:root{
  --gold:#C8A34A;
  --gold-2:#E1C36A;
  --ink:#0b0b0b;
  --paper:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
}

html{
  scroll-behavior:smooth;
}


/* =========================================================
   SUBTLE GRAIN OVERLAY
   ========================================================= */

.grain{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="220" height="220" filter="url(%23n)" opacity="0.35"/></svg>');
  mix-blend-mode:overlay;
}


/* =========================================================
   GLOBAL BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:1rem;
  padding:.75rem 1rem;
  font-weight:600;
  letter-spacing:.01em;

  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  user-select:none;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}

.btn:active{
  transform:translateY(0);
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}


.btn-primary{
  border-color:rgba(200,163,74,.65);

  background:
    linear-gradient(
      135deg,
      rgba(200,163,74,.18),
      rgba(255,255,255,.06)
    );

  box-shadow:
    0 10px 30px rgba(200,163,74,.10),
    0 12px 50px rgba(0,0,0,.35);
}

.btn-primary:hover{
  border-color:rgba(200,163,74,.9);

  background:
    linear-gradient(
      135deg,
      rgba(200,163,74,.26),
      rgba(255,255,255,.08)
    );
}


.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.12);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.20);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-link{
  display:inline-flex;
  align-items:center;
  padding:.6rem .85rem;
  border-radius:1rem;
  color:rgba(255,255,255,.82);
  border:1px solid transparent;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .15s ease;

  white-space:nowrap;
}

.nav-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.nav-active{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-title{
  font-weight:700;
  letter-spacing:.02em;
}

.footer-link{
  color:rgba(255,255,255,.78);
}

.footer-link:hover{
  color:#fff;
  text-decoration:underline;
}


/* =========================================================
   CHIPS
   ========================================================= */

.chip{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:.35rem .6rem;
  font-size:.75rem;
  color:rgba(255,255,255,.85);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.70);
}

.section-kicker:before{
  content:"";
  width:34px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(200,163,74,.0),
      rgba(200,163,74,.85)
    );
}

.section-title{
  margin-top:.65rem;
  font-size:1.85rem;
  line-height:1.15;
  font-weight:700;
}

.section-sub{
  margin-top:.75rem;
  color:rgba(255,255,255,.72);
  font-size:.95rem;
  line-height:1.7;
  max-width:48rem;
}


/* =========================================================
   CARDS
   ========================================================= */

.lux-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:1.5rem;
  box-shadow:0 18px 55px rgba(0,0,0,.45);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.lux-card:hover{
  transform:translateY(-3px);
  border-color:rgba(200,163,74,.35);
  background:rgba(255,255,255,.06);
}


.glass-card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
  border-radius:1.5rem;
  box-shadow:0 18px 55px rgba(0,0,0,.55);
}


.lux-media{
  position:relative;
  height:220px;
  overflow:hidden;
  border-top-left-radius:1.5rem;
  border-top-right-radius:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}

@media (min-width:1024px){
  .lux-media{
    height:240px;
  }
}

.lux-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .5s ease;
}

.lux-card:hover .lux-media img{
  transform:scale(1.07);
}


.lux-grad{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05),
      rgba(0,0,0,.65)
    );
}


.lux-badge{
  position:absolute;
  top:14px;
  left:14px;
  height:42px;
  width:42px;
  border-radius:1.15rem;
  border:1px solid rgba(200,163,74,.35);
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}


.link-gold{
  color:rgba(225,195,106,.95);
  font-weight:600;
}

.link-gold:hover{
  text-decoration:underline;
  color:#fff;
}


.mini-cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .75rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:.85rem;
}

.mini-cta:hover{
  border-color:rgba(200,163,74,.35);
  background:rgba(255,255,255,.07);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  display:block;
}

@supports (height:100dvh){
  .hero{
    min-height:100dvh;
  }
}


.hero-slide{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1s ease;
  filter:saturate(1.05) contrast(1.05);
  transform:translateZ(0);
}

.hero-slide.is-active{
  opacity:1;
}


.hero-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(200,163,74,.20),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.15),
      rgba(0,0,0,.80)
    );
}


.hero:after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      rgba(200,163,74,.00),
      rgba(200,163,74,.14),
      rgba(255,255,255,.06),
      rgba(200,163,74,.00)
    );

  filter:blur(18px);
  opacity:.35;
  animation:sheen 10s ease-in-out infinite;
  pointer-events:none;
}


@keyframes sheen{
  0%{
    transform:translateX(-35%) translateY(-10%);
  }

  50%{
    transform:translateX(25%) translateY(10%);
  }

  100%{
    transform:translateX(-35%) translateY(-10%);
  }
}


/* =========================================================
   STATS + FEATURES
   ========================================================= */

.stat-card{
  display:flex;
  gap:1rem;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:1.25rem;
  padding:1rem;
}

.stat-icon{
  height:42px;
  width:42px;
  border-radius:1.15rem;
  background:rgba(200,163,74,.10);
  border:1px solid rgba(200,163,74,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}

.stat-label{
  font-size:.75rem;
  color:rgba(255,255,255,.58);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.stat-value{
  font-weight:700;
}


.contact-row{
  display:flex;
  gap:.9rem;
  align-items:center;
  padding:1rem;
  border-radius:1.25rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition:.15s;
}

.contact-row:hover{
  border-color:rgba(200,163,74,.28);
  background:rgba(255,255,255,.06);
}

.contact-ico{
  height:42px;
  width:42px;
  border-radius:1.15rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}


.feature-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:1.25rem;
  padding:1rem;
}

.feature-ico{
  height:44px;
  width:44px;
  border-radius:1.25rem;
  background:rgba(200,163,74,.10);
  border:1px solid rgba(200,163,74,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  margin-top:.1rem;
}

.feature-title{
  font-weight:700;
}

.feature-text{
  margin-top:.2rem;
  font-size:.9rem;
  color:rgba(255,255,255,.70);
  line-height:1.6;
}


/* =========================================================
   OFFERS
   ========================================================= */

.offer-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:1.5rem;
  padding:1.5rem;
  box-shadow:0 18px 55px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}

.offer-card:before{
  content:"";
  position:absolute;
  inset:-1px;

  background:
    linear-gradient(
      135deg,
      rgba(200,163,74,.35),
      rgba(255,255,255,.10),
      rgba(200,163,74,.18)
    );

  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.offer-card:hover:before{
  opacity:.35;
}

.offer-card.is-featured{
  border-color:rgba(200,163,74,.35);
}

.offer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.price-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.35rem .75rem;
  font-weight:700;
  border:1px solid rgba(200,163,74,.45);
  background:rgba(200,163,74,.12);
  color:#fff;
  white-space:nowrap;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.review-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:1.5rem;
  padding:1.5rem;
  box-shadow:0 18px 55px rgba(0,0,0,.45);
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery-tile{
  position:relative;
  border-radius:1.25rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 14px 45px rgba(0,0,0,.45);
  cursor:pointer;
  text-align:left;
}

.gallery-tile img{
  transition:transform .6s ease;
}

.gallery-tile:hover img{
  transform:scale(1.06);
}

.gallery-tile-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1rem;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.75)
    );
}


.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  padding:.45rem .8rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:.85rem;
  color:rgba(255,255,255,.82);
  transition:.15s;
}

.pill:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(200,163,74,.25);
}

.pill.is-active{
  border-color:rgba(200,163,74,.55);
  background:rgba(200,163,74,.14);
}


/* =========================================================
   CTA PANEL
   ========================================================= */

.cta-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-radius:1.75rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
}

@media(min-width:1024px){
  .cta-panel{
    grid-template-columns:1.15fr .85fr;
  }
}

.cta-content{
  padding:1.75rem;
}

@media(min-width:640px){
  .cta-content{
    padding:2.25rem;
  }
}

.cta-media{
  min-height:280px;
}

@media(min-width:1024px){
  .cta-media{
    min-height:unset;
  }
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-hero{
  border-bottom:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,0)
    );
}

.breadcrumbs{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  color:rgba(255,255,255,.55);
}

.breadcrumbs a{
  color:rgba(255,255,255,.78);
}

.breadcrumbs a:hover{
  color:#fff;
  text-decoration:underline;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-label{
  display:block;
  font-size:.85rem;
  color:rgba(255,255,255,.72);
  margin-bottom:.35rem;
}

.form-input,
.form-textarea{
  width:100%;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:#fff;
  padding:.85rem 1rem;
  outline:none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.form-textarea{
  min-height:140px;
  resize:vertical;
}

.form-input:focus,
.form-textarea:focus{
  border-color:rgba(200,163,74,.55);
  box-shadow:0 0 0 4px rgba(200,163,74,.15);
  background:rgba(0,0,0,.45);
}

.form-help{
  margin-top:.35rem;
  font-size:.75rem;
  color:rgba(255,255,255,.50);
}

.form-error{
  margin-top:.35rem;
  font-size:.8rem;
  color:#ffd1d1;
}


/* =========================================================
   TABLES
   ========================================================= */

.table-wrap{
  border-radius:1.5rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th{
  background:rgba(255,255,255,.05);
  text-align:left;
  font-size:.8rem;
  color:rgba(255,255,255,.72);
  padding:1rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.table td{
  padding:1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  vertical-align:top;
}

.table tr:hover td{
  background:rgba(255,255,255,.03);
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.lightbox.hidden{
  display:none;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
}

.lightbox-panel{
  position:relative;
  max-width:min(1100px,96vw);
  max-height:86vh;
  border-radius:1.5rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,10,.72);
  box-shadow:0 30px 90px rgba(0,0,0,.75);
}

.lightbox-panel img{
  width:100%;
  height:100%;
  max-height:76vh;
  object-fit:contain;
  background:#000;
}

.lightbox-caption{
  padding:.85rem 1rem;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.9rem;
  color:rgba(255,255,255,.85);
}

.lightbox-close{
  position:absolute;
  top:.8rem;
  right:.8rem;
  height:44px;
  width:44px;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-close:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(200,163,74,.25);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(18px);

  transition:
    opacity .6s ease,
    transform .6s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}


/* =========================================================
   MOBILE + TABLET HERO
   ========================================================= */

@media (max-width:1024px){

  #hero [data-hero-panel] .glass-card,
  #hero [data-hero-panel] .stat-card,
  #hero [data-hero-panel] .contact-row,
  #hero [data-hero-panel] .rounded-3xl.border.border-white\/10{

    background:rgba(0,0,0,.18) !important;

    border-color:
      rgba(255,255,255,.10) !important;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:
      blur(10px);
  }


  #hero
  [data-hero-panel="1"]
  .rounded-2xl.border.border-white\/10{

    background:
      rgba(255,255,255,.05) !important;

    border-color:
      rgba(255,255,255,.10) !important;
  }


  #hero [data-hero-panel] .text-zinc-200{
    color:
      rgba(255,255,255,.90) !important;
  }

  #hero [data-hero-panel] .text-zinc-300{
    color:
      rgba(255,255,255,.82) !important;
  }

  #hero [data-hero-panel] .text-zinc-400{
    color:
      rgba(255,255,255,.60) !important;
  }


  #hero .hero-overlay{

    background:

      radial-gradient(
        circle at 15% 20%,
        rgba(200,163,74,.14),
        transparent 44%
      ),

      linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.58)
      );
  }


  #hero
  [data-hero-panel="1"]
  .rounded-3xl.border.border-white\/10,

  #hero
  [data-hero-panel="2"]
  .glass-card{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

    background:
      rgba(0,0,0,.28) !important;

    border-color:
      rgba(255,255,255,.12) !important;
  }


  #hero
  [data-hero-panel="2"]
  .contact-row{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;

    background:
      rgba(255,255,255,.06) !important;

    border-color:
      rgba(255,255,255,.12) !important;
  }
}


/* =========================================================
   DESKTOP HERO
   ========================================================= */

@media (min-width:1024px){

  #hero .backdrop-blur-xl{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;
  }


  #hero .glass-card{

    backdrop-filter:none !important;

    -webkit-backdrop-filter:none !important;
  }
}


/* =========================================================
   BOOKING CHOICE MODAL
   ========================================================= */

.booking-modal{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(
      1rem,
      3vw,
      2rem
    );
}


.booking-modal.hidden{
  display:none;
}


/* Background behind popup */
.booking-modal-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(0,0,0,.78);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* Main popup */
.booking-modal-shell{
  position:relative;

  width:
    min(
      100%,
      760px
    );

  max-height:
    calc(
      100dvh - 2rem
    );

  overflow:auto;

  border:
    1px solid
    rgba(200,163,74,.35);

  border-radius:
    1.75rem;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(200,163,74,.13),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(24,24,27,.98),
      rgba(8,8,9,.99)
    );

  box-shadow:
    0 30px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,255,255,.04) inset;

  padding:
    clamp(
      1.25rem,
      4vw,
      2.25rem
    );

  animation:
    bookingModalIn
    .2s
    ease-out
    both;
}


/* Close button */
.booking-modal-close{
  position:absolute;

  top:1rem;
  right:1rem;

  width:2.75rem;
  height:2.75rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:1rem;

  background:
    rgba(255,255,255,.05);

  color:#fff;

  cursor:pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.booking-modal-close:hover{
  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(200,163,74,.45);

  transform:
    translateY(-1px);
}


/* Header */
.booking-modal-header{
  display:flex;
  align-items:flex-start;
  gap:1rem;

  padding-right:3rem;
}


.booking-modal-mark{
  flex:0 0 auto;

  width:3.4rem;
  height:3.4rem;

  border-radius:1.1rem;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--gold-2);

  border:
    1px solid
    rgba(200,163,74,.35);

  background:
    linear-gradient(
      145deg,
      rgba(200,163,74,.18),
      rgba(255,255,255,.04)
    );

  font-size:1.25rem;
}


.booking-modal-kicker{
  font-size:.7rem;
  line-height:1.2;

  text-transform:uppercase;

  letter-spacing:.18em;

  color:var(--gold-2);

  font-weight:700;
}


.booking-modal-title{
  margin-top:.45rem;

  font-size:
    clamp(
      1.55rem,
      4vw,
      2.15rem
    );

  line-height:1.15;

  font-weight:650;

  letter-spacing:-.025em;

  color:#fff;
}


.booking-modal-copy{
  margin-top:.7rem;

  max-width:38rem;

  font-size:.925rem;

  line-height:1.65;

  color:
    rgba(255,255,255,.68);
}


/* Two booking options */
.booking-option-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:1rem;

  margin-top:1.6rem;
}


.booking-option{
  min-width:0;

  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:.95rem;

  padding:1.15rem;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:1.35rem;

  background:
    rgba(255,255,255,.045);

  color:#fff;

  text-decoration:none;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.booking-option:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(200,163,74,.62);

  background:
    rgba(200,163,74,.09);

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.28);
}


/* Emergency option */
.booking-option-emergency{
  border-color:
    rgba(200,163,74,.30);

  background:
    linear-gradient(
      145deg,
      rgba(200,163,74,.10),
      rgba(255,255,255,.035)
    );
}


/* Option icon */
.booking-option-icon{
  width:3rem;
  height:3rem;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:1rem;

  color:var(--gold-2);

  border:
    1px solid
    rgba(200,163,74,.28);

  background:
    rgba(200,163,74,.10);

  font-size:1rem;
}


/* Option text */
.booking-option-body{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}


.booking-option-eyebrow{
  font-size:.67rem;

  text-transform:uppercase;

  letter-spacing:.14em;

  color:
    rgba(225,195,106,.85);

  font-weight:700;
}


.booking-option-title{
  margin-top:.25rem;

  font-size:1rem;

  line-height:1.3;

  font-weight:700;

  color:#fff;
}


.booking-option-text{
  margin-top:.4rem;

  font-size:.78rem;

  line-height:1.5;

  color:
    rgba(255,255,255,.60);
}


/* Arrow */
.booking-option-arrow{
  color:
    rgba(255,255,255,.45);

  font-size:.8rem;

  transition:
    transform .16s ease,
    color .16s ease;
}


.booking-option:hover
.booking-option-arrow{

  transform:
    translateX(3px);

  color:var(--gold-2);
}


/* Footer inside popup */
.booking-modal-footer{
  margin-top:1.2rem;

  padding-top:1rem;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:.5rem;

  color:
    rgba(255,255,255,.48);

  font-size:.72rem;

  text-align:center;
}


.booking-modal-footer i{
  color:
    rgba(225,195,106,.72);
}


/* Popup opening animation */
@keyframes bookingModalIn{

  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.985);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   BOOKING MODAL - MOBILE
   ========================================================= */

@media (max-width:640px){

  .booking-modal{
    align-items:flex-end;
    padding:.75rem;
  }


  .booking-modal-shell{
    width:100%;

    max-height:
      calc(
        100dvh - 1.5rem
      );

    border-radius:1.5rem;

    padding:1.2rem;
  }


  .booking-modal-header{
    gap:.8rem;

    padding-right:2.8rem;
  }


  .booking-modal-mark{
    width:3rem;
    height:3rem;

    border-radius:1rem;
  }


  .booking-modal-copy{
    font-size:.86rem;

    line-height:1.55;
  }


  .booking-option-grid{
    grid-template-columns:1fr;

    gap:.75rem;

    margin-top:1.2rem;
  }


  .booking-option{
    padding:1rem;

    gap:.8rem;

    border-radius:1.15rem;
  }


  .booking-option-icon{
    width:2.8rem;
    height:2.8rem;
  }


  .booking-option-text{
    font-size:.75rem;
  }


  .booking-modal-footer{
    font-size:.68rem;
  }
}


/* Reduce animation for accessibility */
@media (prefers-reduced-motion:reduce){

  .booking-modal-shell{
    animation:none;
  }

  .booking-option,
  .booking-modal-close{
    transition:none;
  }
}