:root {
  --bg-main: #fff6eb; /* uniform warm ivory */
  --bg-alt: #fff6eb;
  --text-main: #292720;
  --color-text: var(--text-main);
  --color-white: #fffdf9;
  --color-accent: #f3dfc4;
  --color-border: #292720;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: "Dancing Script", cursive;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --section-space: clamp(6rem, 9vw, 9rem);
  --section-space-mobile: clamp(4.5rem, 15vw, 6.5rem);

  --max-width: 1100px;
  --radius: 16px;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);

  --section-gap: 64px;
  --section-gap-mobile: 48px;
}

/* Only direct sections inside <main> */
main > section {
  margin-bottom: var(--section-gap);
}

/* Prevent margins from collapsing unexpectedly */
main > section {
  display: flow-root;
}

/* Mobile */
@media (max-width: 767px) {
  main > section {
    margin-bottom: var(--section-gap-mobile);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-main);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(100% - 32px, 1100px);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 88px 0;
}

.site-header {
  position: sticky;
  top: 0;
  background-color: #f7f4ef;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31, 31, 31, 0.08);
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.nav-logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}
/* hero image */ 
/* ========================================
   HOME HERO
======================================== */

.hero {
  position: relative;
  width: 100%;

  /* Navbar is approximately 48px tall */
  height: calc(100svh - 48px);
  min-height: 0;

  overflow: hidden;

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

  padding: 0;

  text-align: center;
  color: #fff;

  background-color: #f8f4ef;
}
/*hero start*/
/* ========================================
   HOME PAGE VIEWPORT
   The Home page is a true one-screen landing page:
   navbar = natural height, hero = remaining viewport.

   Required markup:
   <body class="home-page">
   <section id="home" class="hero">
======================================== */

body.home-page {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;

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

  overflow: hidden;
  background-color: #f8f4ef;
}

.home-page .site-header {
  position: relative;
  z-index: 100;
  width: 100%;
  min-width: 0;
}

.home-page main {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home-page .hero {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;

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

  overflow: hidden;
  text-align: center;
  color: #fff;
  background-color: #f8f4ef;
}

.home-page .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home-page .hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.home-page .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
}

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

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


.hero-image {
  display: block;

  width: 100%;
  height: 100%;

  /*
   * Fill the entire viewport.
   * Cropping is preferable to empty side space.
   */
  object-fit: cover;
  object-position: center center;

  filter:
    contrast(0.98)
    brightness(0.92);

  transform: scale(1);

  animation: heroZoom 18s ease-in-out infinite alternate;
}


/* Very subtle cinematic movement */

@keyframes heroZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.025);
  }
}


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

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.56) 0%,
      rgba(0, 0, 0, 0.30) 34%,
      rgba(0, 0, 0, 0.15) 66%,
      rgba(0, 0, 0, 0.08) 100%
    );
}


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

.hero-content {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  min-height: 0;

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

  padding:
    clamp(28px, 4vh, 52px)
    24px
    clamp(32px, 5vh, 60px);

  gap: 0;

  opacity: 0;
  transform: translateY(20px);

  animation: heroFadeUp 1.2s ease forwards;
  animation-delay: 0.35s;
}


@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-content > * {
  margin-bottom: 0;
}


/* ========================================
   HERO TEXT
======================================== */
.eyebrow {
  margin: 0 0 14px;

  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.94);
}


.hero-names {
  margin: 0;

  font-family: var(--font-script);

  font-size: clamp(2.7rem, 12vw, 4rem);
  font-weight: 600;

  line-height: 0.94;

  color: #fff;

  text-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18);
}


.hero-date,
.hero-location {
  font-family: var(--font-heading);

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.94);
}


.hero-date {
  margin: 24px 0 0;

  font-size: 0.76rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
}


.hero-location {
  margin: 6px 0 0;

  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
}


/* Old decorative frame is no longer used */

.hero-frame,
.hero-frame::after {
  display: none;
}


/* ========================================
   COUNTDOWN AREA
======================================== */

.hero .flip-countdown-section {
  width: 100%;

  margin-top: clamp(24px, 3vh, 36px);
}


.hero .flip-countdown {
  display: grid;
  grid-template-columns: repeat(4, auto);

  justify-content: center;
  align-items: start;

  gap: clamp(10px, 1vw, 18px);
}


.hero .flip-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.hero .flip-card {
  width: clamp(88px, 7vw, 116px);
  height: clamp(90px, 7.5vw, 120px);

  border-radius: 15px;
}


.hero .flip-label {
  margin-top: 10px;

  font-size: clamp(9px, 0.65vw, 11px);
  font-weight: 500;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.92);
}


.countdown-message {
  margin-top: 14px;

  font-size: 12px;
  letter-spacing: 0.08em;
}


/* ========================================
   HOME HERO CTA
======================================== */

.hero-cta {
  display: flex;
  justify-content: center;

  width: 100%;

  margin-top: clamp(26px, 3.5vh, 42px);
}


.hero-cta-link {
  position: relative;

  width: min(460px, 92%);
  min-height: 112px;

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

  padding: 20px 52px 17px;

  overflow: hidden;

  color: #fff;
  text-align: center;
  text-decoration: none;

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  border-radius: 3px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.04)
    );

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);

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


/* Inner invitation border */

.hero-cta-link::before {
  content: "";

  position: absolute;
  inset: 7px;

  border:
    1px solid
    rgba(255, 255, 255, 0.28);

  border-radius: 1px;

  pointer-events: none;

  transition:
    inset 0.45s ease,
    border-color 0.45s ease;
}


/* Subtle light sweep */

.hero-cta-link::after {
  content: "";

  position: absolute;

  top: -60%;
  left: -80%;

  width: 38%;
  height: 220%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.13),
      transparent
    );

  transform: rotate(18deg);

  pointer-events: none;

  transition: left 0.85s ease;
}


/* CTA kicker */

.hero-cta-kicker {
  position: relative;
  z-index: 2;

  margin-bottom: 10px;

  font-family: var(--font-body);

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.30em;
  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.82);
}


/* Main CTA row */

.hero-cta-main {
  position: relative;
  z-index: 2;

  width: 100%;

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

  gap: 18px;
}


.hero-cta-text {
  font-family: var(--font-heading);

  font-size: clamp(21px, 1.7vw, 27px);
  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  white-space: nowrap;

  color: rgba(255, 255, 255, 0.98);

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(0, 0, 0, 0.18);
}


/* Side embellishments */

.hero-cta-line {
  display: block;

  width: 36px;
  height: 1px;

  flex-shrink: 0;

  background:
    rgba(255, 255, 255, 0.62);

  transition: width 0.45s ease;
}


/* Downward progression cue */

.hero-cta-arrow {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 9px;

  font-size: 15px;
  line-height: 1;

  color: rgba(255, 255, 255, 0.82);

  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}


/* Decorative corners */

.hero-cta-corner {
  position: absolute;
  z-index: 2;

  font-family: var(--font-heading);

  font-size: 11px;

  color: rgba(255, 255, 255, 0.68);

  pointer-events: none;
}


.hero-cta-corner--tl {
  top: 13px;
  left: 16px;
}


.hero-cta-corner--tr {
  top: 13px;
  right: 16px;

  transform: scaleX(-1);
}


.hero-cta-corner--bl {
  bottom: 13px;
  left: 16px;

  transform: scaleY(-1);
}


.hero-cta-corner--br {
  right: 16px;
  bottom: 13px;

  transform: scale(-1);
}


/* ========================================
   CTA HOVER
======================================== */

.hero-cta-link:hover,
.hero-cta-link:focus-visible {
  transform: translateY(-4px);

  border-color:
    rgba(255, 255, 255, 0.98);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.21),
      rgba(255, 255, 255, 0.07)
    );

  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}


.hero-cta-link:hover::before,
.hero-cta-link:focus-visible::before {
  inset: 10px;

  border-color:
    rgba(255, 255, 255, 0.40);
}


.hero-cta-link:hover::after,
.hero-cta-link:focus-visible::after {
  left: 145%;
}


.hero-cta-link:hover .hero-cta-line,
.hero-cta-link:focus-visible .hero-cta-line {
  width: 50px;
}


.hero-cta-link:hover .hero-cta-arrow,
.hero-cta-link:focus-visible .hero-cta-arrow {
  transform: translateY(4px);

  opacity: 1;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 900px) {

  .hero-content {
    padding:
      30px
      20px
      34px;
  }


  .hero-names {
    font-size: clamp(56px, 10vw, 84px);
  }


  .hero .flip-card {
    width: 92px;
    height: 100px;
  }


  .hero-cta {
    margin-top: 28px;
  }
}


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

@media (max-width: 767px) {

  .hero {
    /*
     * Use the actual visible mobile viewport.
     * Keeps the hero beneath the navbar without
     * creating additional page height.
     */
    height: calc(100dvh - 48px);
    min-height: 0;

    overflow: hidden;
  }


  /* ========================================
     MOBILE IMAGE FRAMING
  ======================================== */

  .hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Bias crop toward the upper portion
     * so more sky / upper composition survives.
     */
    object-position: 50% 26%;

    animation: none;
  }


  /* ========================================
     MOBILE HERO CONTENT
  ======================================== */

  .hero-content {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    /*
     * Start from the top instead of vertically
     * centering an oversized content stack.
     */
    justify-content: flex-start;

    box-sizing: border-box;

    padding:
      clamp(22px, 4dvh, 34px)
      18px
      20px;

    overflow: hidden;
  }


  /* ========================================
   INTRO TEXT
======================================== */

.eyebrow {
  flex-shrink: 0;

  /* More breathing room before the names */
  margin: 0 0 14px;

  font-size: 9px;
  line-height: 1.2;

  letter-spacing: 0.22em;
}


.hero-names {
  flex-shrink: 0;

  margin: 0;

  font-size: clamp(46px, 13vw, 64px);
  line-height: 0.94;
}


.hero-date {
  flex-shrink: 0;

  /* More breathing room below the names */
  margin-top: 22px;

  font-size: 10px;
  line-height: 1.35;
}


.hero-location {
  flex-shrink: 0;

  /* Keep date + location visually grouped */
  margin-top: 4px;

  font-size: 9px;
  line-height: 1.35;
}


  /* ========================================
     MOBILE COUNTDOWN
  ======================================== */

  .hero .flip-countdown-section {
    flex-shrink: 0;

    width: 100%;

    margin-top: 18px;
  }


  .hero .flip-countdown {
    display: grid;

    grid-template-columns:
      repeat(2, 96px);

    justify-content: center;

    gap:
      10px
      14px;

    width: fit-content;

    margin: 0 auto;
  }


  .hero .flip-unit {
    width: 96px;
  }


  .hero .flip-card {
    width: 96px;
    height: 94px;

    border-radius: 14px;
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 2.25rem !important;
  }


  .hero .flip-label {
    margin-top: 6px;

    font-size: 8px;

    letter-spacing: 0.14em;
  }


  .countdown-message {
    margin-top: 8px;

    font-size: 10px;
  }


  /* ========================================
     MOBILE CTA
  ======================================== */

  .hero-cta {
    flex-shrink: 0;

    width: 100%;

    margin-top: 18px;
  }


  .hero-cta-link {
    width: min(330px, 92%);

    min-height: 86px;

    padding:
      16px
      26px;

    /*
     * Slightly darker glass so white CTA text
     * remains readable over Claire's dress,
     * water, sand, etc.
     */
    background:
      linear-gradient(
        135deg,
        rgba(20, 20, 20, 0.26),
        rgba(20, 20, 20, 0.12)
      );

    border-color:
      rgba(255, 255, 255, 0.88);

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


  /*
   * Hide any old kicker markup if it
   * still exists. CTA is now one line.
   */
  .hero-cta-kicker {
    display: none;
  }


  .hero-cta-main {
    width: 100%;

    gap: 12px;
  }


  .hero-cta-text {
    color: #fff !important;

    font-size: clamp(17px, 5vw, 20px);
    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0.08em;

    white-space: nowrap;

    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.65),
      0 0 12px rgba(0, 0, 0, 0.28);
  }


  .hero-cta-line {
    width: 20px;

    background:
      rgba(255, 255, 255, 0.78);
  }


  .hero-cta-link:hover .hero-cta-line,
  .hero-cta-link:focus-visible .hero-cta-line {
    width: 26px;
  }

}


/* ========================================
   SMALL / NARROW MOBILE
======================================== */

@media (max-width: 420px) {

  .hero-image {
    /*
     * Protect even more of the upper image
     * on narrow phones.
     */
    object-position: 50% 18%;
  }


  .hero-content {
    padding-left: 14px;
    padding-right: 14px;
  }


  .hero-names {
    font-size: clamp(42px, 12.5vw, 52px);
  }


  .hero .flip-countdown {
    grid-template-columns:
      repeat(2, 90px);

    gap: 9px 12px;
  }


  .hero .flip-unit {
    width: 90px;
  }


  .hero .flip-card {
    width: 90px;
    height: 88px;
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 2.1rem !important;
  }


  .hero-cta-link {
    width: min(310px, 94%);
    min-height: 82px;

    padding:
      14px
      20px;
  }


  .hero-cta-text {
    font-size: 16px;

    letter-spacing: 0.06em;
  }


  .hero-cta-line {
    width: 14px;
  }

}


/* ========================================
   SHORT-HEIGHT MOBILE
   e.g. smaller Androids / older iPhones
======================================== */

@media (max-width: 767px) and (max-height: 740px) {

  .hero-content {
    padding-top: 16px;
    padding-bottom: 12px;
  }


  .eyebrow {
    margin-bottom: 12px;

    font-size: 0.58rem;
  }


  .hero-names {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }


  .hero-date {
    margin-top: 18px;
    font-size: 0.66rem;
  }


  .hero-location {
    margin-top: 4px;
    font-size: 0.62rem;
  }


  .hero .flip-countdown-section {
    margin-top: 12px;
  }


  .hero .flip-countdown {
    grid-template-columns:
      repeat(2, 82px);

    gap: 7px 10px;
  }


  .hero .flip-unit {
    width: 82px;
  }


  .hero .flip-card {
    width: 82px;
    height: 76px;

    border-radius: 12px;
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 1.85rem !important;
  }


  .hero .flip-label {
    margin-top: 4px;

    font-size: 7px;
  }


  .hero-cta {
    margin-top: 12px;
  }


  .hero-cta-link {
    min-height: 68px;

    padding:
      11px
      20px;
  }


  .hero-cta-text {
    font-size: 15px;
  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .hero-image,
  .hero-content {
    animation: none;
  }


  .hero-content {
    opacity: 1;
    transform: none;
  }


  .hero-cta-link,
  .hero-cta-link::before,
  .hero-cta-link::after,
  .hero-cta-line,
  .hero-cta-arrow {
    transition: none;
  }

}




/* =========================
   Hero Countdown
========================= */

.flip-countdown-section {
  margin-top: 1.8rem;
  position: relative;
  z-index: 2;
}

.flip-countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.flip-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.flip-card {
  position: relative;
  width: 130px;
  height: 140px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* one visible full card */
.card-fold.top-fold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1f1f1f;
  background: transparent;
  border-radius: 18px;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: hidden;
  z-index: 2;
}

.card-face.top span,
.card-fold.top-fold span {
  line-height: 1;
}

/* hide old split-card parts */
.card-face.bottom,
.card-fold.bottom-fold,
.hinge-right {
  display: none !important;
}

/* animated overlay card */
.card-fold.top-fold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 600;
  color: #1f1f1f;
  background: transparent;
  border-radius: 18px;
  transform-origin: center center;
  backface-visibility: hidden;
  visibility: hidden;
  z-index: 2;
}

.flip-card.flip .top-fold {
  visibility: visible;
  animation: singleFlip 0.7s ease-in-out forwards;
}

/* =========================
   HERO COUNTDOWN TEXT RESET
   Put this at the VERY BOTTOM
========================= */

.hero .flip-card {
  position: relative;
  width: 115px;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero .flip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 0;
}

/* kill old split-half layout */
.hero .card-face.bottom,
.hero .card-fold.bottom-fold,
.hero .hinge-right {
  display: none !important;
}

/* full visible number card */
.hero .card-face.top {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px;
  box-shadow: none !important;
  color: #111 !important;
  font-family: var(--font-heading) !important;
  font-size: 2.6rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  overflow: hidden;
}

/* animated overlay number */
.hero .card-fold.top-fold {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px;
  box-shadow: none !important;
  color: #111 !important;
  font-family: var(--font-heading) !important;
  font-size: 2.6rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: hidden;
  overflow: hidden;
}

/* reset old span offsets completely */
.hero .card-face.top span,
.hero .card-fold.top-fold span {
  display: block !important;
  position: static !important;
  transform: none !important;
  translate: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* labels */
.hero .flip-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  text-align: center;
}

/* animation */
.hero .flip-card.flip .top-fold {
  visibility: visible;
  animation: singleFlip 0.7s ease-in-out forwards;
}

@keyframes singleFlip {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }
  45% {
    transform: rotateX(90deg);
    opacity: 0.95;
  }
  55% {
    transform: rotateX(-90deg);
    opacity: 0.95;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 0;
    visibility: hidden;
  }
}

.flip-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.countdown-message {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.92);
}

/* =========================
   Hero Buttons
========================= */

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
}

.hero-actions .button {
  min-width: 150px;
  padding: 0.75rem 1.6rem;
  border-radius: 999px; /* FULL pill */
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
}

.hero-actions .button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.95);
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================
   HERO RESPONSIVE FRAMING
======================================== */


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

@media (min-width: 1024px) {

  /*
   * Hero height is controlled by the
   * home-page viewport/grid layout.
   * Do not add min-height here.
   */

  .hero-image {
    object-position: 50% 22%;
  }

}


/* ========================================
   TABLET
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  .hero-image {
    object-position: 50% 32%;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

  /*
   * Do NOT set hero/min-height here.
   * The Home layout already gives the hero
   * exactly the remaining viewport height.
   */

  .hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Bias image upward so the upper portion
     * of the photograph isn't lost.
     */
    object-position: 50% 24%;

    animation: none;
  }


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

  .hero-content {
    width: 100%;
    height: 100%;
    min-height: 0;

    justify-content: flex-start;

    box-sizing: border-box;

    padding:
      22px
      18px
      18px;
  }


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

  .eyebrow {
    margin: 0 0 8px;

    font-size: 0.68rem;
    line-height: 1.2;

    letter-spacing: 0.18em;
  }


  .hero-names {
    margin: 0;

    font-size: clamp(2.7rem, 12vw, 4rem);
    line-height: 0.94;
  }


  .hero-date {
    margin-top: 10px;

    font-size: 0.76rem;
  }


  .hero-location {
    margin-top: 3px;

    font-size: 0.7rem;
  }


  /* ========================================
     MOBILE COUNTDOWN
  ======================================== */

  .hero .flip-countdown-section {
    position: relative;
    z-index: 2;

    width: 100%;

    margin-top: 16px;
  }


  .hero .flip-countdown {
    display: grid;

    /*
     * Explicit column widths prevent
     * countdown cards from spilling into
     * one another.
     */
    grid-template-columns: repeat(2, 104px);

    column-gap: 20px;
    row-gap: 14px;

    justify-content: center;
    align-items: start;

    width: fit-content;

    margin: 0 auto;
  }


  .hero .flip-unit {
    width: 104px;

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


  .hero .flip-card {
    position: relative;

    width: 104px !important;
    height: 100px !important;

    border-radius: 15px;

    overflow: hidden;

    background:
      rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border:
      1px solid
      rgba(255, 255, 255, 0.28);

    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 2.2rem !important;

    border-radius: 15px;
  }


  .hero .flip-label {
    margin-top: 6px;

    font-size: 0.6rem;

    line-height: 1.2;

    letter-spacing: 0.16em;

    opacity: 0.94;
  }


  /* ========================================
     MOBILE CTA
  ======================================== */

  .hero-cta {
    margin-top: 18px;
  }


  .hero-cta-link {
    width: min(330px, 92%);

    min-height: 80px;

    padding:
      15px
      24px;

    /*
     * Darker glass improves readability
     * while retaining the elegant treatment.
     */
    background:
      linear-gradient(
        135deg,
        rgba(20, 20, 20, 0.25),
        rgba(20, 20, 20, 0.10)
      );

    border-color:
      rgba(255, 255, 255, 0.88);

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


  .hero-cta-kicker {
    display: none;
  }


  .hero-cta-main {
    gap: 12px;
  }


  .hero-cta-text {
    color: #fff !important;

    font-size: 18px;
    line-height: 1.2;

    letter-spacing: 0.08em;

    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.65),
      0 0 10px rgba(0, 0, 0, 0.25);
  }


  .hero-cta-line {
    width: 20px;

    background:
      rgba(255, 255, 255, 0.78);
  }

}


/* ========================================
   VERY SMALL MOBILE
======================================== */

@media (max-width: 420px) {

  /*
   * Protect more of the upper photograph
   * on narrow screens.
   */
  .hero-image {
    object-position: 50% 18%;
  }


  .hero-content {
    padding:
      18px
      14px
      14px;
  }


  .hero-names {
    font-size: clamp(2.55rem, 12vw, 3.25rem);
  }


  .hero .flip-countdown {
    grid-template-columns: repeat(2, 94px);

    column-gap: 18px;
    row-gap: 12px;
  }


  .hero .flip-unit {
    width: 94px;
  }


  .hero .flip-card {
    width: 94px !important;
    height: 90px !important;
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 2rem !important;
  }


  .hero-cta {
    margin-top: 14px;
  }


  .hero-cta-link {
    width: min(310px, 94%);

    min-height: 74px;

    padding:
      13px
      20px;
  }


  .hero-cta-text {
    font-size: 16px;
  }


  .hero-cta-line {
    width: 15px;
  }

}


/* ========================================
   SHORT MOBILE SCREENS
======================================== */

@media (max-width: 767px) and (max-height: 740px) {

  .hero-content {
    padding-top: 14px;
    padding-bottom: 10px;
  }


  .eyebrow {
    margin-bottom: 5px;

    font-size: 0.58rem;
  }


  .hero-names {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }


  .hero-date {
    margin-top: 7px;

    font-size: 0.66rem;
  }


  .hero-location {
    font-size: 0.62rem;
  }


  .hero .flip-countdown-section {
    margin-top: 11px;
  }


  .hero .flip-countdown {
    grid-template-columns: repeat(2, 92px);

    column-gap: 16px;
    row-gap: 9px;
  }


  .hero .flip-unit {
    width: 92px;
  }


  .hero .flip-card {
    width: 92px !important;
    height: 82px !important;
  }


  .hero .card-face.top,
  .hero .card-fold.top-fold {
    font-size: 1.9rem !important;
  }


  .hero .flip-label {
    margin-top: 4px;

    font-size: 0.52rem;
  }


  .hero-cta {
    margin-top: 11px;
  }


  .hero-cta-link {
    min-height: 66px;

    padding:
      10px
      18px;
  }


  .hero-cta-text {
    font-size: 15px;
  }

}




/* ========================================
   HOME HERO CTA
======================================== */

.hero-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 38px;
}

.hero-cta-link {
  position: relative;

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

  width: min(460px, 90%);
  min-height: 118px;

  padding: 22px 54px 18px;

  color: #fff;
  text-align: center;
  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.035)
    );

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  overflow: hidden;

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


/* Inner decorative border */

.hero-cta-link::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;

  pointer-events: none;

  transition:
    inset 0.45s ease,
    border-color 0.45s ease;
}


/* Soft light sweep */

.hero-cta-link::after {
  content: "";

  position: absolute;
  top: -50%;
  left: -80%;

  width: 50%;
  height: 200%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );

  transform: rotate(20deg);

  transition: left 0.8s ease;

  pointer-events: none;
}


/* Small introductory text */

.hero-cta-kicker {
  position: relative;
  z-index: 2;

  margin-bottom: 9px;

  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.28em;
  text-transform: uppercase;

  opacity: 0.82;
}


/* Main CTA row */

.hero-cta-main {
  position: relative;
  z-index: 2;

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

  width: 100%;
  gap: 18px;
}

.hero-cta-text {
  font-family: var(--font-heading);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 400;

  letter-spacing: 0.06em;
  white-space: nowrap;
}


/* Decorative lines */

.hero-cta-line {
  display: block;

  width: 44px;
  height: 1px;

  background: rgba(255, 255, 255, 0.58);

  transition: width 0.45s ease;
}


/* Arrow */

.hero-cta-arrow {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 10px;

  font-size: 17px;
  line-height: 1;

  opacity: 0.85;

  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}


/* Corner flourishes */

.hero-cta-corner {
  position: absolute;

  z-index: 2;

  font-family: var(--font-heading);
  font-size: 12px;

  color: rgba(255, 255, 255, 0.7);

  transition:
    color 0.45s ease,
    transform 0.45s ease;
}

.hero-cta-corner--tl {
  top: 13px;
  left: 16px;
}

.hero-cta-corner--tr {
  top: 13px;
  right: 16px;
  transform: scaleX(-1);
}

.hero-cta-corner--bl {
  bottom: 13px;
  left: 16px;
  transform: scaleY(-1);
}

.hero-cta-corner--br {
  right: 16px;
  bottom: 13px;
  transform: scale(-1);
}


/* ========================================
   HOVER
======================================== */

.hero-cta-link:hover,
.hero-cta-link:focus-visible {
  transform: translateY(-4px);

  border-color: rgba(255, 255, 255, 0.95);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.07)
    );

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hero-cta-link:hover::before,
.hero-cta-link:focus-visible::before {
  inset: 10px;

  border-color: rgba(255, 255, 255, 0.35);
}

.hero-cta-link:hover::after,
.hero-cta-link:focus-visible::after {
  left: 140%;
}

.hero-cta-link:hover .hero-cta-line,
.hero-cta-link:focus-visible .hero-cta-line {
  width: 58px;
}

.hero-cta-link:hover .hero-cta-arrow,
.hero-cta-link:focus-visible .hero-cta-arrow {
  transform: translateY(5px);
  opacity: 1;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

  .hero-cta {
    margin-top: 30px;
  }

  .hero-cta-link {
    width: min(340px, 92%);
    min-height: 105px;

    padding: 20px 32px 17px;
  }

  .hero-cta-main {
    gap: 12px;
  }

  .hero-cta-line {
    width: 24px;
  }

  .hero-cta-text {
    font-size: 19px;
  }

  .hero-cta-kicker {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  .hero-cta-link:hover .hero-cta-line,
  .hero-cta-link:focus-visible .hero-cta-line {
    width: 30px;
  }
}
/* hero end */

/*hero ends*/



/* section start */

.section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-content--center {
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.section-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  line-height: 1.1;
  font-weight: 500;
}

.section-text {
  max-width: 500px;
  margin: 0 auto;
}

.details-grid,
.faq-list {
  display: grid;
  gap: 1rem;
}

.card,
.faq-item {
  background-color: var(--color-white);
  border: 1px solid rgba(31, 31, 31, 0.1);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.section-tight-bottom {
  padding-bottom: 40px;
}

.faq-item h3,
.faq-item button {
  font-weight: 700;
}

/* section end */

/* =========================================================
   OUR STORY SECTION
========================================================= */

.story-hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
}

.story-hero-media {
  position: absolute;
  inset: 0;
}

.story-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(0.98) brightness(0.92);
  animation: heroZoom 15s ease-in-out infinite alternate;
}

.story-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.2)
    );
}

.story-hero-content {
  position: relative;
  z-index: 2;

  min-height: 80vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  text-align: center;

  padding: 0 1.5rem 4rem;

  color: #fff;

  opacity: 0;
  transform: translateY(24px);

  animation: heroFadeUp 1.2s ease forwards;
  animation-delay: 0.4s;
}

.story-hero-kicker {
  margin-bottom: 0.75rem;

  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  opacity: 0.9;
}

.story-hero-title {
  max-width: 680px;

  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.1;
}

.story-section {
  padding: 0;
  margin-top: 48px;
}

.story-intro {
  max-width: 760px;
  margin: 60px auto 80px;
}

.story-section .section-text {
  max-width: 620px;
  margin-top: 1.2rem;
}


/* =========================================================
   OUR MOMENTS EDITORIAL HERO
========================================================= */

.moments-hero {
  position: relative;

  min-height: 100vh;

  overflow: hidden;
}

.moments-hero-media {
  position: absolute;
  inset: 0;
}

.moments-hero-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  animation: heroZoom 15s ease-in-out infinite alternate;
}

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

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.12)
    );
}

.moments-hero-content {
  position: relative;
  z-index: 2;

  min-height: 100vh;

  display: grid;
  align-content: end;
  justify-items: center;

  text-align: center;

  padding: 0 1.5rem 5rem;

  color: #fff;

  opacity: 0;
  transform: translateY(20px);

  animation: fadeUp 1.2s ease forwards;
  animation-delay: 0.5s;
}

.moments-hero-kicker {
  margin-bottom: 0.75rem;

  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.92;
}

.moments-hero-title {
  margin: 0;

  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
}

.moments-hero-text {
  max-width: 36rem;

  margin-top: 1rem;

  font-size: 1rem;
  line-height: 1.7;

  opacity: 0.92;
}


/* =========================================================
   MOMENTS / GALLERY SECTION
========================================================= */

/*
 * Tight transition from the full-screen editorial
 * image into the gallery heading.
 */
.moments-section {
  margin-top: 0;

  padding-top: 28px;
  padding-bottom: 16px;
}

.moments-section .section-header {
  max-width: 640px;

  margin: 0 auto;

  text-align: center;
}

.moments-section .section-kicker {
  display: block;

  margin-bottom: 0.5rem;

  letter-spacing: 0.15em;
}
/* =========================================================
   MOMENTS GALLERY
========================================================= */

.moments-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}


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

.gallery-tabs {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

  margin: 2rem 0 2.25rem;
}

.gallery-tab {
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid rgba(31, 31, 31, 0.12);

  background: rgba(255, 255, 255, 0.72);
  color: #1f1f1f;

  padding: 0.82rem 1.3rem;

  border-radius: 999px;

  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;

  letter-spacing: 0.04em;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);

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

.gallery-tab:hover {
  background: rgba(255, 255, 255, 0.92);

  border-color: rgba(31, 31, 31, 0.18);

  transform: translateY(-1px);
}

.gallery-tab.active {
  background: #1f1f1f;
  color: #ffffff;

  border-color: #1f1f1f;

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.gallery-tab:focus-visible {
  outline: 2px solid rgba(31, 31, 31, 0.2);
  outline-offset: 3px;
}
/* =========================================================
   CAROUSEL SHELL
========================================================= */

.apple-carousel {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 0.75rem 0 1.25rem;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  scroll-snap-type: x proximity;
}

.apple-carousel::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   CAROUSEL TRACK
========================================================= */

.apple-carousel-track {
  display: flex;
  align-items: flex-start;

  gap: 1.5rem;

  padding:
    0 max(
      2rem,
      calc((100vw - 1200px) / 2 + 1.5rem)
    );
}


/* =========================================================
   CAROUSEL CARDS — POLAROID STYLE
========================================================= */

.apple-carousel-item {
  flex: 0 0 min(78vw, 420px);

  height: auto;
  aspect-ratio: auto;

  align-self: flex-start;

  /*
   * Polaroid frame:
   * equal top + side spacing,
   * slightly deeper bottom margin.
   */
  padding: 14px 14px 26px;

  box-sizing: border-box;

  background: #ffffff;

  border-radius: 4px;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);

  scroll-snap-align: center;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.apple-carousel-item:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.11),
    0 3px 8px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   CAROUSEL IMAGES
========================================================= */

.apple-carousel-image {
  display: block;

  width: 100%;
  height: auto;

  /*
   * Keep the original photo composition.
   */
  aspect-ratio: auto;

  object-fit: initial;
  object-position: center;

  image-rendering: auto;

  /*
   * Tiny radius so the image still feels
   * like a physical print inside the frame.
   */
  border-radius: 1px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .apple-carousel {
    padding: 0.5rem 0 1rem;
  }

  .apple-carousel-track {
    align-items: flex-start;

    gap: 1rem;

    padding-left: 1rem;
    padding-right: 1rem;
  }

  .apple-carousel-item {
    flex: 0 0 78vw;

    height: auto;
    aspect-ratio: auto;

    align-self: flex-start;

    padding: 10px 10px 20px;

    border-radius: 3px;
  }

  .apple-carousel-image {
    width: 100%;
    height: auto;

    aspect-ratio: auto;
  }
}
/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.apple-carousel-image {
  cursor: zoom-in;
}


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

.gallery-lightbox {
  position: fixed;
  inset: 0;

  width: 100%;
  max-width: none;

  height: 100%;
  max-height: none;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  overflow: hidden;

  box-sizing: border-box;
}


/* =========================================================
   SUBTLE BLACK PAGE OVERLAY
========================================================= */

.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);

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


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

.gallery-lightbox-inner {
  position: relative;

  width: 100%;
  height: 100%;

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

  padding: 64px 24px 24px;

  box-sizing: border-box;
}


/* =========================================================
   FULL PHOTOGRAPH
========================================================= */

.gallery-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: calc(100vh - 160px);

  margin: 0 auto;

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

  border-radius: 4px;

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.gallery-lightbox-close {
  position: fixed;

  top: 24px;
  right: 28px;

  z-index: 10;

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;

  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.gallery-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);

  transform: scale(1.05);
}

.gallery-lightbox-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}


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

.gallery-lightbox-controls {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 1.5rem;

  margin-top: 1.25rem;

  flex-shrink: 0;
}

.gallery-lightbox-nav {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.1);

  color: #ffffff;

  font-size: 1.25rem;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.gallery-lightbox-nav:hover {
  background:
    rgba(255, 255, 255, 0.2);

  transform: scale(1.05);
}

.gallery-lightbox-nav:disabled {
  opacity: 0.3;

  cursor: default;

  transform: none;
}

.gallery-lightbox-counter {
  min-width: 64px;

  text-align: center;

  font-family: var(--font-body);
  font-size: 0.8rem;

  letter-spacing: 0.12em;

  color:
    rgba(255, 255, 255, 0.8);
}


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

@media (max-width: 767px) {

  .gallery-lightbox {
    width: 100%;
    height: 100%;
  }

  .gallery-lightbox-inner {
    width: 100%;
    height: 100%;

    padding:
      64px
      18px
      calc(
        20px +
        env(safe-area-inset-bottom)
      );
  }

  .gallery-lightbox-image {
    width: auto;
    height: auto;

    /*
     * Image can only use the space INSIDE
     * the lightbox padding, keeping equal
     * margins on both sides.
     */
    max-width: 100%;

    max-height:
      calc(100dvh - 160px);

    margin-left: auto;
    margin-right: auto;
  }

  .gallery-lightbox-close {
    top: 16px;
    right: 16px;

    width: 40px;
    height: 40px;

    font-size: 26px;
  }

  .gallery-lightbox-controls {
    gap: 1.25rem;

    margin-top: 1rem;
  }

  .gallery-lightbox-nav {
    width: 42px;
    height: 42px;
  }

  .gallery-lightbox-counter {
    min-width: 56px;

    font-size: 0.75rem;
  }
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .gallery-lightbox-inner {
    padding:
      4rem 1rem
      calc(1.5rem + env(safe-area-inset-bottom));
  }

  .gallery-lightbox-image {
    max-width: 94vw;
    max-height: calc(100vh - 150px);
  }

  .gallery-lightbox-controls {
    gap: 1.25rem;
    margin-top: 1rem;
  }

  .gallery-lightbox-nav {
    width: 42px;
    height: 42px;
  }
}


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

.gallery-location {
  margin: 18px 0 0;

  text-align: center;

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;

  letter-spacing: 0.08em;

  color: rgba(31, 31, 31, 0.58);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.gallery-location.is-changing {
  opacity: 0;

  transform: translateY(4px);
}


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

.gallery-empty-state,
.gallery-fallback {
  display: grid;
  place-items: center;

  min-height: 320px;

  padding: 2rem;

  text-align: center;

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.6);
  color: rgba(31, 31, 31, 0.7);

  font-family: var(--font-body);
}

/* =========================================================
   OUR STORY → THE WEDDING CTA
========================================================= */

.story-next-cta {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  margin-top: 48px;
  padding: 8px 20px 20px;
}


/* Decorative editorial lines */

.story-next-cta-line {
  display: block;
  flex-shrink: 0;

  width: 48px;
  height: 1px;

  background: rgba(31, 31, 31, 0.22);

  transition:
    width 0.3s ease,
    background 0.3s ease;
}


/* Outlined CTA */

.story-next-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 13px 22px;

  border: 1px solid rgba(31, 31, 31, 0.28);
  border-radius: 3px;

  background: transparent;

  color: #1f1f1f;
  text-decoration: none;

  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.09em;
  text-transform: uppercase;

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


/* Hover */

.story-next-cta-link:hover {
  color: #ffffff;

  background: #1f1f1f;
  border-color: #1f1f1f;

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.story-next-cta:has(.story-next-cta-link:hover)
.story-next-cta-line {
  width: 56px;

  background: rgba(31, 31, 31, 0.38);
}


/* Keyboard accessibility */

.story-next-cta-link:focus-visible {
  outline: 2px solid rgba(31, 31, 31, 0.32);
  outline-offset: 4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .story-next-cta {
    gap: 10px;

    margin-top: 38px;

    padding:
      4px 14px
      16px;
  }

  .story-next-cta-line {
    width: 20px;
  }

  .story-next-cta-link {
    padding: 12px 16px;

    font-size: 0.7rem;

    letter-spacing: 0.07em;

    text-align: center;
  }

  .story-next-cta:has(.story-next-cta-link:hover)
  .story-next-cta-line {
    width: 24px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .hero-cta {
    margin-top: 36px;
    padding: 0 1rem 8px;
  }

  .hero-cta-main {
    gap: 12px;
  }

  .hero-cta-line {
    width: 28px;
  }

  .hero-cta-text {
    font-size: 0.78rem;
    letter-spacing: 0.07em;
  }

  .hero-cta-link:hover .hero-cta-line {
    width: 36px;
  }
}



/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;

    transform: translateY(0);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .story-section {
    margin-top: 28px;
  }

  .story-hero-image {
    object-position: 30% center;
  }

  .story-intro {
    margin: 44px auto 56px;
  }


  /*
   * Slightly tighter editorial → gallery transition
   * on smaller screens.
   */
  .moments-section {
    margin-top: 0;

    padding-top: 20px;
    padding-bottom: 16px;
  }


  .gallery-tabs {
    gap: 0.6rem;

    margin: 1.5rem 0 1.75rem;
  }

  .gallery-tab {
    padding: 0.75rem 1.1rem;

    font-size: 0.85rem;
  }

  .apple-carousel-track {
    align-items: flex-start;
    gap: 1rem;

    padding: 0 1rem;
  }

  .apple-carousel-item {
    flex: 0 0 78vw;

    border-radius: 22px;
  }
}


/* =========================================================
   DRESS CODE
========================================================= */

.dress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.5rem;
}

.dress-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  padding: 1.5rem;

  background-color: var(--color-white);
  border: 1px solid rgba(31, 31, 31, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);

  color: var(--color-text);
  font-family: var(--font-body);
  text-align: center;
}

/* Card headings */
.dress-box h3 {
  margin: 0 0 0.85rem;

  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Card descriptions */
.dress-box p {
  max-width: 620px;
  margin: 0;

  color: rgba(31, 31, 31, 0.72);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.005em;
}

/* Highlighted text inside descriptions */
.dress-box p strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Both dress-code sample cards */
.dress-box--sample {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  padding: 1.5rem;
  background-color: #f8f4ef;
}

.dress-box--sample img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 1.25rem;

  border-radius: 12px;
  object-fit: contain;
}

/* =========================================================
   COLOR PALETTE
========================================================= */

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 0.75rem;
  margin-top: 0.25rem;
}

.swatch {
  display: block;
  width: 40px;
  height: 40px;

  border: 3px solid var(--color-white);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(31, 31, 31, 0.12),
    0 4px 10px rgba(31, 31, 31, 0.08);
}

.swatch.champagne {
  background-color: #f7e7ce;
}

.swatch.gold {
  background-color: #efd3a9;
}

.swatch.ivory {
  background-color: #fffff0;
}

.swatch.black {
  background-color: #1f1f1f;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .dress-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
  }

  .dress-box,
  .dress-box--sample {
    width: 100%;
    max-width: none;
    padding: 1.25rem;
    justify-self: stretch;
  }

  .dress-box h3 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.4rem, 6vw, 1.65rem);
  }

  .dress-box p {
    font-size: 0.9rem;
    line-height: 1.75;
  }

  .dress-box--sample img {
    max-width: 240px;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .dress-box,
  .dress-box--sample {
    padding: 1rem;
  }

  .dress-box h3 {
    font-size: 1.4rem;
  }

  .dress-box p {
    font-size: 0.87rem;
  }

  .swatch {
    width: 38px;
    height: 38px;
  }
}


/* gallery start */
.gallery-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2.25rem;
}
.gallery-tab {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.8rem 1.3rem;
  border: 1px solid rgba(31, 31, 31, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}
.gallery-tab:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(31, 31, 31, 0.18);
}
.gallery-tab.active {
  background: #1f1f1f;
  color: #ffffff;
  border-color: #1f1f1f;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.gallery-tab:focus-visible {
  outline: 2px solid rgba(31, 31, 31, 0.2);
  outline-offset: 3px;
}
.apple-carousel {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 0.5rem 0 0.25rem;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  overscroll-behavior: contain;
  touch-action: pan-x;
}

.apple-carousel::-webkit-scrollbar {
  display: none;
}

.apple-carousel-track {
  display: flex;
  align-items: stretch;

  gap: 1.25rem;

  padding-left: 1rem;
  padding-right: 1rem;
}

.apple-carousel-item {
  flex: 0 0 min(70vw, 360px);

  aspect-ratio: 4 / 5;

  border-radius: 24px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.46);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.apple-carousel-image {
  display: block;

  width: 100%;
  height: 100%;

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

  image-rendering: auto;
}


.gallery-empty-state,
.gallery-fallback {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 2rem;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(31, 31, 31, 0.7);
}
@media (max-width: 767px) {
  .gallery-tabs {
    gap: 0.6rem;
    margin: 1.25rem 0 1.75rem;
  }
  .gallery-tab {
    padding: 0.75rem 1.1rem;
    font-size: 0.85rem;
  }
  .apple-carousel {
    padding: 0.25rem 0 0.75rem;
  }
  .apple-carousel-track {
    gap: 1rem;
  }
  .apple-carousel-item {
    flex: 0 0 78vw;
    border-radius: 20px;
  }
 
  

  #details {
  padding-top: 40px;
}

#details.section {
  padding-top: 16px;
}
} /* gallery end */

/* hotel start */
/* ========================================
   TRAVEL & ACCOMMODATIONS
======================================== */

.accommodations-section {
  --accommodations-bg: #f6f1e8;
  --accommodations-card: #ffffff;
  --accommodations-text: #25241f;
  --accommodations-muted: rgba(37, 36, 31, 0.68);
  --accommodations-border: rgba(37, 36, 31, 0.13);
  --accommodations-chip: #f0ebe2;
  --accommodations-radius: 3px;
  --accommodations-shadow: 0 18px 45px rgba(35, 31, 25, 0.08);

  padding: clamp(5rem, 9vw, 8rem) 1.5rem;
  background-color: var(--accommodations-bg);
  color: var(--accommodations-text);
}

.accommodations-container {
  width: min(1120px, 100%);
  margin-inline: auto;
}

/* Section heading */

.accommodations-heading {
  width: min(720px, 100%);
  margin: 0 auto clamp(4rem, 7vw, 6rem);
  text-align: center;
}

.accommodations-eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.accommodations-heading h2 {
  margin: 0;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
}

.accommodations-heading p {
  max-width: 650px;
  margin: 1.25rem auto 0;
  color: var(--accommodations-muted);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.8;
}

/* Grid */

.accommodations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* Cards */

.accommodation-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--accommodations-card);
  border: 1px solid var(--accommodations-border);
  border-radius: var(--accommodations-radius);
  box-shadow: var(--accommodations-shadow);
  transition:
    transform 350ms ease,
    box-shadow 350ms ease;
}

@media (hover: hover) {
  .accommodation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(35, 31, 25, 0.12);
  }
}

/* Images */

.accommodation-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #ddd6ca;
}

.accommodation-card-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    to top,
    rgba(20, 19, 16, 0.16),
    transparent 50%
  );
  pointer-events: none;
}

.accommodation-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms ease;
}

@media (hover: hover) {
  .accommodation-card:hover .accommodation-card-image img {
    transform: scale(1.04);
  }
}

/* Card content */

.accommodation-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}

.accommodation-location {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--accommodations-muted);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.accommodation-card h3 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
}

.accommodation-card-content > p {
  margin: 0 0 1.4rem;
  color: var(--accommodations-muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

/* Highlight tags */

.accommodation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}

.accommodation-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0.45rem 0.75rem;
  background-color: var(--accommodations-chip);
  border-radius: 999px;
  color: rgba(37, 36, 31, 0.76);
  font-size: 0.7rem;
  line-height: 1.2;
}

/* Links */

.accommodation-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  color: var(--accommodations-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    gap 250ms ease,
    opacity 250ms ease;
}

.accommodation-link:hover {
  gap: 0.85rem;
  opacity: 0.7;
}

.accommodation-link:focus-visible {
  outline: 2px solid var(--accommodations-text);
  outline-offset: 5px;
}

/* Footer */

.accommodations-footer {
  width: min(720px, 100%);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  text-align: center;
}

.accommodations-footer p {
  margin: 0;
  color: rgba(37, 36, 31, 0.58);
  font-size: 0.76rem;
  line-height: 1.75;
}

/* Missing-image fallback */

.accommodation-card-image.is-missing-image {
  display: grid;
  place-items: center;
  min-height: 280px;
  background:
    linear-gradient(
      rgba(37, 36, 31, 0.06),
      rgba(37, 36, 31, 0.06)
    ),
    var(--accommodations-chip);
}

.accommodation-card-image.is-missing-image::before {
  position: relative;
  z-index: 1;
  max-width: 240px;
  padding: 2rem;
  content: "Accommodation image coming soon";
  color: var(--accommodations-muted);
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
}

.accommodation-card-image.is-missing-image img {
  display: none;
}

/* Accessibility utility */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile */

@media (max-width: 700px) {
  .accommodations-section {
    padding: 4.5rem 1rem;
  }

  .accommodations-heading {
    margin-bottom: 3.75rem;
  }

  .accommodations-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .accommodation-card-content {
    padding: 1.5rem;
  }

  .accommodations-footer {
    margin-top: 3rem;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .accommodation-card,
  .accommodation-card-image img,
  .accommodation-link {
    transition: none;
  }

  .accommodation-card:hover {
    transform: none;
  }

  .accommodation-card:hover .accommodation-card-image img {
    transform: none;
  }
}
/* hotel end */
/* wedding details start */
/* =========================================================
   WEDDING DETAILS SECTION
========================================================= */

.wedding-details {
  --details-cream: #f5f0e8;
  --details-paper: #fbf8f2;
  --details-ink: #292a25;
  --details-muted: #77766d;
  --details-accent: #84745d;
  --details-accent-dark: #5c503f;
  --details-line: rgba(41, 42, 37, 0.18);
  --details-white: #ffffff;

  position: relative;
  overflow: hidden;
  padding: clamp(90px, 10vw, 160px) 24px;
  color: var(--details-ink);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.08)
    ),
    var(--details-cream);
}

.wedding-details *,
.wedding-details *::before,
.wedding-details *::after {
  box-sizing: border-box;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.wedding-details__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(
      circle at 5% 10%,
      rgba(132, 116, 93, 0.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 95% 55%,
      rgba(132, 116, 93, 0.1),
      transparent 24%
    );
}

.wedding-details__background::before,
.wedding-details__background::after {
  position: absolute;
  width: 320px;
  height: 320px;
  content: "";
  border: 1px solid rgba(132, 116, 93, 0.12);
  border-radius: 50%;
}

.wedding-details__background::before {
  top: -180px;
  right: -130px;
}

.wedding-details__background::after {
  bottom: -190px;
  left: -140px;
}

.wedding-details__container {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin-inline: auto;
}


/* =========================================================
   SHARED EYEBROW STYLES
========================================================= */

.wedding-details__eyebrow,
.venue-details__eyebrow,
.guest-notes__heading > span,
.wedding-timeline__heading > span {
  display: block;
  margin-bottom: 15px;
  color: var(--details-accent);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1.4;
  text-transform: uppercase;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.wedding-details__header {
  max-width: 720px;
  margin: 0 auto clamp(60px, 8vw, 100px);
  text-align: center;
}

.wedding-details__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  margin: 0 auto 22px;
  color: var(--details-accent);
}

.wedding-details__ornament span {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--details-accent)
  );
}

.wedding-details__ornament span:last-child {
  background: linear-gradient(
    90deg,
    var(--details-accent),
    transparent
  );
}

.wedding-details__ornament svg {
  flex: 0 0 80px;
  width: 80px;
  margin-inline: 12px;
}

.wedding-details__header h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 7vw, 6.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.wedding-details__header p {
  max-width: 560px;
  margin: 30px auto 0;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(0.82rem, 1.5vw, 0.98rem);
  letter-spacing: 0.035em;
  line-height: 1.9;
}


/* =========================================================
   DATE DISPLAY
========================================================= */

.wedding-details__date {
  width: min(620px, 100%);
  margin: 0 auto clamp(70px, 10vw, 130px);
  text-align: center;
}

.wedding-details__date-day {
  display: block;
  margin-bottom: 12px;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.wedding-details__date-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid var(--details-line);
  border-bottom: 1px solid var(--details-line);
}

.wedding-details__date-main span {
  padding: 22px 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-style: italic;
}

.wedding-details__date-main strong {
  padding: 12px clamp(22px, 5vw, 48px);
  border-right: 1px solid var(--details-line);
  border-left: 1px solid var(--details-line);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
}


/* =========================================================
   CEREMONY AND RECEPTION CARDS
========================================================= */

.event-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: clamp(100px, 13vw, 180px);
  border-top: 1px solid var(--details-line);
  border-bottom: 1px solid var(--details-line);
}

.event-card {
  position: relative;
  min-height: 550px;
  padding: clamp(55px, 7vw, 90px) clamp(28px, 5vw, 72px);
  text-align: center;
}

.event-card + .event-card {
  border-left: 1px solid var(--details-line);
}

.event-card__number {
  position: absolute;
  top: 25px;
  right: 28px;
  color: rgba(41, 42, 37, 0.22);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.event-card__label {
  display: block;
  margin-bottom: 24px;
  color: var(--details-accent);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.event-card h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 4.5vw, 4.3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.event-card__divider {
  width: 42px;
  height: 1px;
  margin: 38px auto;
  background: var(--details-accent);
}

.event-card__venue {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 500;
}

.event-card__address,
.event-card__note {
  font-family: "Montserrat", Arial, sans-serif;
}

.event-card__address {
  margin: 0;
  color: var(--details-muted);
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  line-height: 1.8;
  text-transform: uppercase;
}

.event-card__note {
  max-width: 350px;
  margin: 35px auto 0;
  color: var(--details-muted);
  font-size: 0.78rem;
  line-height: 1.85;
}

.event-card__note strong {
  color: var(--details-ink);
  font-weight: 600;
}


/* =========================================================
   WEDDING TIMELINE
========================================================= */

.wedding-timeline {
  width: min(950px, 100%);
  margin: 0 auto clamp(110px, 14vw, 190px);
}

.wedding-timeline__heading {
  margin-bottom: clamp(65px, 8vw, 100px);
  text-align: center;
}

.wedding-timeline__heading h3,
.guest-notes__heading h3,
.venue-details__content h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.wedding-timeline__heading p {
  margin: 22px auto 0;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1.8;
}

.wedding-timeline__track {
  position: relative;
}

.wedding-timeline__track::before,
.wedding-timeline__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 191px;
  width: 1px;
  content: "";
}

.wedding-timeline__track::before {
  background: var(--details-line);
}

.wedding-timeline__progress {
  z-index: 1;
  bottom: auto;
  height: 0;
  background: var(--details-accent);
  transition: height 120ms linear;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 135px 112px minmax(0, 1fr);
  align-items: start;
  min-height: 185px;
  opacity: 0.2;
  transform: translateY(28px);
  transition:
    opacity 800ms ease,
    transform 800ms ease;
}

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

.timeline-item:last-child {
  min-height: auto;
}

.timeline-item__marker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 34px;
}

.timeline-item__marker span {
  width: 11px;
  height: 11px;
  border: 3px solid var(--details-cream);
  border-radius: 50%;
  outline: 1px solid var(--details-accent);
  background: var(--details-accent);
  box-shadow: 0 0 0 5px var(--details-cream);
  transform: scale(0.75);
  transition: transform 500ms ease 200ms;
}

.timeline-item.is-visible .timeline-item__marker span {
  transform: scale(1);
}

.timeline-item__time {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 1px;
  padding-right: 36px;
  text-align: right;
}

.timeline-item__time span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.1rem;
  line-height: 1;
}

.timeline-item__time small {
  margin: 4px 0 0 5px;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.timeline-item__content {
  max-width: 530px;
  padding: 0 0 65px 34px;
}

.timeline-item__step {
  display: block;
  margin-bottom: 9px;
  color: var(--details-accent);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.timeline-item__content h4 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  font-weight: 500;
  line-height: 1;
}

.timeline-item__content p {
  margin: 15px 0 0;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.85;
}
/* ========================================
   TIMELINE → DRESS CODE SPACING FIX
========================================= */

.wedding-timeline {
  margin-bottom: 0;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.wedding-timeline + #dress-code {
  margin-top: 0;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.wedding-timeline + #dress-code .section-content {
  padding-top: 0;
}

/* =========================================================
   VENUE DETAILS
========================================================= */

.venue-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  margin-bottom: clamp(110px, 14vw, 180px);
  padding: clamp(45px, 7vw, 80px);
  border: 1px solid var(--details-line);
  background: rgba(251, 248, 242, 0.7);
}

.venue-details__content h3 {
  margin-bottom: 24px;
}

.venue-details__address {
  margin: 0;
  color: var(--details-accent-dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-style: italic;
  line-height: 1.45;
}

.venue-details__description {
  max-width: 590px;
  margin: 25px 0 0;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1.85;
}


/* =========================================================
   DIRECTION BUTTONS
========================================================= */

.venue-details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.direction-button {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 176px;
  padding: 13px 18px;
  border: 1px solid var(--details-accent-dark);
  color: var(--details-accent-dark);
  text-decoration: none;
  background: transparent;
  transition:
    color 250ms ease,
    background-color 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
}

.direction-button--primary {
  color: var(--details-white);
  background: var(--details-accent-dark);
}

.direction-button:hover {
  color: var(--details-white);
  background: var(--details-accent-dark);
  box-shadow: 0 10px 25px rgba(41, 42, 37, 0.12);
  transform: translateY(-2px);
}

.direction-button:focus-visible {
  outline: 2px solid var(--details-accent);
  outline-offset: 4px;
}

.direction-button svg {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
}

.direction-button span {
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.direction-button small {
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  opacity: 0.75;
  text-transform: uppercase;
}


/* =========================================================
   CLICKABLE WAZE QR CODE
========================================================= */

.venue-details__qr {
  width: 100%;
  text-align: center;
}

.venue-details__qr-link {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  transform: translateY(0) scale(1);
  transition:
    transform 250ms ease,
    filter 250ms ease;
}

.venue-details__qr-link:hover {
  transform: translateY(-3px) scale(1.02);
}

.venue-details__qr-link:hover .venue-details__qr-frame {
  box-shadow: 0 20px 55px rgba(41, 42, 37, 0.16);
}

.venue-details__qr-link:focus-visible {
  outline: 2px solid var(--details-accent);
  outline-offset: 7px;
}

.venue-details__qr-frame {
  position: relative;
  width: min(220px, 100%);
  margin: 0 auto;
  padding: 17px;
  background: var(--details-white);
  box-shadow: 0 14px 45px rgba(41, 42, 37, 0.11);
  transition: box-shadow 250ms ease;
}

.venue-details__qr-frame::before,
.venue-details__qr-frame::after {
  position: absolute;
  width: 25px;
  height: 25px;
  pointer-events: none;
  content: "";
}

.venue-details__qr-frame::before {
  top: 8px;
  left: 8px;
  border-top: 1px solid var(--details-accent);
  border-left: 1px solid var(--details-accent);
}

.venue-details__qr-frame::after {
  right: 8px;
  bottom: 8px;
  border-right: 1px solid var(--details-accent);
  border-bottom: 1px solid var(--details-accent);
}

.venue-details__qr-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.venue-details__qr-title {
  margin: 22px 0 7px;
  color: var(--details-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.venue-details__qr-description {
  max-width: 230px;
  margin: 0 auto;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1.7;
}


/* =========================================================
   GUEST NOTES
========================================================= */

.guest-notes {
  margin-bottom: clamp(100px, 13vw, 170px);
}

.guest-notes__heading {
  max-width: 630px;
  margin: 0 auto clamp(55px, 7vw, 85px);
  text-align: center;
}

.guest-notes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--details-line);
  border-bottom: 1px solid var(--details-line);
}

.guest-note {
  position: relative;
  min-height: 310px;
  padding: 45px 30px;
}

.guest-note + .guest-note {
  border-left: 1px solid var(--details-line);
}

.guest-note__icon {
  display: block;
  margin-bottom: 55px;
  color: var(--details-accent);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
}

.guest-note h4 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
}

.guest-note p {
  margin: 18px 0 0;
  color: var(--details-muted);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.73rem;
  line-height: 1.85;
}


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

.wedding-details__footer {
  text-align: center;
}

.wedding-details__footer-line {
  width: 1px;
  height: 60px;
  margin: 0 auto 35px;
  background: var(--details-accent);
}

.wedding-details__footer p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.3rem, 5vw, 4.7rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.wedding-details__footer > span {
  display: block;
  margin-top: 30px;
  color: var(--details-accent);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}


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

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .event-card {
    min-height: 510px;
    padding-inline: 30px;
  }

  .venue-details {
    grid-template-columns: 1fr;
  }

  .venue-details__qr {
    width: 100%;
    padding-top: 45px;
    border-top: 1px solid var(--details-line);
  }

  .guest-notes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guest-note:nth-child(3) {
    border-top: 1px solid var(--details-line);
    border-left: 0;
  }

  .guest-note:nth-child(4) {
    border-top: 1px solid var(--details-line);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {
  .wedding-details {
    padding-inline: 18px;
  }

  .wedding-details__header {
    margin-bottom: 65px;
  }

  .wedding-details__header h2 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .wedding-details__ornament {
    width: min(300px, 100%);
  }

  .wedding-details__date-main span {
    padding-inline: 7px;
    font-size: 1.15rem;
  }

  .wedding-details__date-main strong {
    padding-inline: 18px;
  }

  .event-details {
    grid-template-columns: 1fr;
  }

  .event-card {
    min-height: auto;
    padding: 65px 24px;
  }

  .event-card + .event-card {
    border-top: 1px solid var(--details-line);
    border-left: 0;
  }

  .event-card h3 {
    font-size: clamp(2.35rem, 12vw, 3.5rem);
  }

  .wedding-timeline__track::before,
  .wedding-timeline__progress {
    left: 15px;
  }

  .timeline-item {
    grid-template-columns: 31px minmax(0, 1fr);
    min-height: 190px;
  }

  .timeline-item__marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: flex-start;
    width: 31px;
  }

  .timeline-item__time {
    grid-column: 2;
    justify-content: flex-start;
    padding: 0 0 16px 22px;
    text-align: left;
  }

  .timeline-item__time span {
    font-size: 1.7rem;
  }

  .timeline-item__content {
    grid-column: 2;
    max-width: none;
    padding: 0 0 58px 22px;
  }

  .venue-details {
    padding: 42px 24px;
  }

  .venue-details__actions {
    flex-direction: column;
  }

  .direction-button {
    justify-content: center;
    width: 100%;
  }

  .venue-details__qr {
    padding-top: 40px;
  }

  .venue-details__qr-frame {
    width: min(210px, 100%);
  }

  .venue-details__qr-title {
    font-size: 1.3rem;
  }

  .venue-details__qr-description {
    max-width: 250px;
  }

  .guest-notes__grid {
    grid-template-columns: 1fr;
  }

  .guest-note {
    min-height: auto;
  }

  .guest-note + .guest-note,
  .guest-note:nth-child(3),
  .guest-note:nth-child(4) {
    border-top: 1px solid var(--details-line);
    border-left: 0;
  }

  .guest-note__icon {
    margin-bottom: 35px;
  }

  .wedding-details__footer p {
    font-size: clamp(2.4rem, 12vw, 3.7rem);
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .wedding-details {
    padding-inline: 15px;
  }

  .wedding-details__date-main span {
    padding: 18px 5px;
    font-size: 1rem;
  }

  .wedding-details__date-main strong {
    padding: 10px 14px;
    font-size: 3.6rem;
  }

  .venue-details {
    padding-inline: 20px;
  }

  .event-card {
    padding-inline: 20px;
  }

  .guest-note {
    padding-inline: 24px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .timeline-item,
  .timeline-item__marker span,
  .direction-button,
  .wedding-timeline__progress,
  .venue-details__qr-link,
  .venue-details__qr-frame {
    transition: none;
  }

  .reveal-on-scroll,
  .timeline-item {
    opacity: 1;
    transform: none;
  }

  .venue-details__qr-link:hover {
    transform: none;
  }
}
/* wedding details end */


/* header nav start */
 /* =========================================
   SITE HEADER / RESPONSIVE NAVIGATION
========================================= */

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(247, 244, 239, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31, 31, 31, 0.08);
  z-index: 1000;
}

.site-header,
.site-header * {
  box-sizing: border-box;
}

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

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 72px;
}

/* Use this only if you do not already have
   a global .container rule */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

/* =========================================
   LOGO
========================================= */

.nav-logo {
  position: relative;
  z-index: 1002;
  flex-shrink: 0;

  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text, #1f1f1f);
  text-decoration: none;
  white-space: nowrap;
}

/* =========================================
   DESKTOP MENU
========================================= */

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);

  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links li {
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: block;

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text, #1f1f1f);
  text-decoration: none;
  white-space: nowrap;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;

  width: 100%;
  height: 1px;
  background-color: currentColor;

  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a:focus-visible,
.nav-logo:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* =========================================
   MOBILE TOGGLE
========================================= */

.nav-toggle {
  position: relative;
  z-index: 1002;
  display: none;
  flex-shrink: 0;

  width: 44px;
  height: 44px;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text, #1f1f1f);
  cursor: pointer;
}

.nav-toggle-line {
  position: absolute;
  left: 10px;

  display: block;
  width: 24px;
  height: 1.5px;

  background-color: currentColor;
  border-radius: 999px;

  transition:
    top 0.3s ease,
    transform 0.3s ease,
    opacity 0.2s ease;
}

.nav-toggle-line:nth-child(1) {
  top: 13px;
}

.nav-toggle-line:nth-child(2) {
  top: 21px;
}

.nav-toggle-line:nth-child(3) {
  top: 29px;
}

/* Toggle becomes an X */

.nav-toggle.is-active .nav-toggle-line:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active .nav-toggle-line:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* =========================================
   SECTION ANCHOR OFFSET
========================================= */

/*
  These IDs must match the href values
  used in the navigation links.
*/

#home,
#story,
#details,
#dress-code,
#travel,
#rsvp,
#faq {
  scroll-margin-top: 90px;
}

/* =========================================
   TABLET AND MOBILE
========================================= */

@media (max-width: 900px) {
  .nav {
    min-height: 64px;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 50%;

    display: block;
    width: 100vw;
    max-height: 0;
    overflow: hidden;

    background-color: #f7f4ef;
    border-bottom: 1px solid rgba(31, 31, 31, 0.08);

    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -8px);

    transition:
      max-height 0.4s ease,
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .nav-menu.is-open {
    max-height: 520px;
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    width: 100%;
    padding: 0.75rem 1rem 1.25rem;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    width: 100%;
    padding: 0.9rem 1rem;

    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    background-color: rgba(31, 31, 31, 0.04);
  }

  #home,
  #story,
  #details,
  #dress-code,
  #travel,
  #rsvp,
  #faq {
    scroll-margin-top: 78px;
  }
}

/* =========================================
   SMALL MOBILE DEVICES
========================================= */

@media (max-width: 480px) {
  .container {
    width: min(100% - 1.5rem, 1200px);
  }

  .nav {
    min-height: 60px;
  }

  .nav-logo {
    font-size: 1.15rem;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .nav-toggle-line {
    left: 8px;
  }

  .nav-toggle-line:nth-child(1) {
    top: 11px;
  }

  .nav-toggle-line:nth-child(2) {
    top: 19px;
  }

  .nav-toggle-line:nth-child(3) {
    top: 27px;
  }

  .nav-toggle.is-active .nav-toggle-line:nth-child(1),
  .nav-toggle.is-active .nav-toggle-line:nth-child(3) {
    top: 19px;
  }

  .nav-links {
    padding-inline: 0.75rem;
  }

  .nav-links a {
    padding: 0.8rem;
    font-size: 0.95rem;
  }

  #home,
  #story,
  #details,
  #dress-code,
  #travel,
  #rsvp,
  #faq {
    scroll-margin-top: 72px;
  }
}

/* =========================================
   VERY SMALL MOBILE DEVICES
========================================= */

@media (max-width: 340px) {
  .container {
    width: min(100% - 1rem, 1200px);
  }

  .nav-logo {
    font-size: 1.05rem;
  }

  .nav-links a {
    font-size: 0.9rem;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-toggle-line,
  .nav-links a,
  .nav-links a::after {
    transition: none;
  }
}
/* header nav end */
/* =========================================================
   GLOBAL FORMATTING OVERRIDES
   Typography, spacing, uniform background, footer and
   cinematic section dissolve
========================================================= */

html,
body {
  background: var(--bg-main);
}

body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------
   GLOBAL HEADING TYPOGRAPHY
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.story-hero-title,
.moments-hero-title,
.accommodations-heading h2,
.accommodation-card h3,
.wedding-details__header h2,
.event-card h3,
.event-card__venue,
.wedding-timeline__heading h3,
.guest-notes__heading h3,
.venue-details__content h3,
.timeline-item__content h4,
.guest-note h4,
.rsvp-heading__title,
.rsvp-card__title,
.rsvp-choice__title,
.rsvp-success__title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.025em;
}

/* Preserve the handwritten couple-name treatment. */
.hero-names {
  font-family: var(--font-script);
}

/* Small editorial labels and navigation remain clean and modern. */
.eyebrow,
.section-kicker,
.story-hero-kicker,
.moments-hero-kicker,
.accommodations-eyebrow,
.accommodation-location,
.wedding-details__eyebrow,
.venue-details__eyebrow,
.guest-notes__heading > span,
.wedding-timeline__heading > span,
.event-card__label,
.timeline-item__step,
.rsvp-heading__eyebrow,
.rsvp-card__kicker,
.rsvp-field__label,
.nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
}

/* ---------------------------------------------------------
   ARTICLE AND CONTENT TYPOGRAPHY
--------------------------------------------------------- */

article,
article p,
.section-text,
.story-section .section-text,
.moments-hero-text,
.accommodations-heading p,
.accommodation-card-content > p,
.accommodations-footer p,
.dress-box p,
.faq-item p,
.event-card__address,
.event-card__note,
.wedding-timeline__heading p,
.timeline-item__content p,
.venue-details__description,
.venue-details__qr-description,
.guest-note p,
.rsvp-card__description,
.rsvp-heading__deadline,
.rsvp-choice__description,
.rsvp-field__hint,
.rsvp-field__error,
.rsvp-form__privacy-note,
.rsvp-success__message,
.rsvp-success__reference {
  font-family: var(--font-body);
  line-height: 1.8;
}

.section-text,
.story-section .section-text,
.accommodations-heading p,
.moments-hero-text {
  font-size: clamp(0.96rem, 1.4vw, 1.05rem);
  color: rgba(41, 39, 32, 0.72);
}

/* ---------------------------------------------------------
   HEADER AND NAVIGATION TYPOGRAPHY
--------------------------------------------------------- */

.site-header {
  background-color: rgba(255, 246, 235, 0.94);
  border-bottom-color: rgba(41, 39, 32, 0.09);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0.015em;
}

.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .nav-menu {
    background-color: var(--bg-main);
  }

  .nav-links a {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }
}

/* ---------------------------------------------------------
   UNIFORM SECTION BACKGROUND
   The image-based hero banners remain untouched.
--------------------------------------------------------- */

main,
.story-section,
.moments-section,
.section,
.accommodations-section,
.wedding-details,
.rsvp-section,
#story,
#moments,
#details,
#dress-code,
#travel,
#rsvp,
#faq {
  background: var(--bg-main) !important;
}

.accommodations-section {
  --accommodations-bg: var(--bg-main);
}

.wedding-details {
  --details-cream: var(--bg-main);
}

.rsvp-section {
  --rsvp-bg: var(--bg-main);
}

/* ---------------------------------------------------------
   CONSISTENT SECTION RHYTHM
--------------------------------------------------------- */

.section,
.moments-section,
.accommodations-section,
.wedding-details,
.rsvp-section {
  margin-top: 0;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.story-section {
  margin-top: 0;
  padding: 0;
}

.story-intro {
  margin-top: var(--section-space);
  margin-bottom: var(--section-space);
}

.section-tight-bottom {
  padding-bottom: var(--section-space);
}

#details.section {
  padding-top: var(--section-space);
}

.section-content {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.section-content--center {
  max-width: 780px;
}

@media (max-width: 767px) {
  .section,
  .moments-section,
  .accommodations-section,
  .wedding-details,
  .rsvp-section {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }

  .story-intro {
    margin-top: var(--section-space-mobile);
    margin-bottom: var(--section-space-mobile);
  }

  .section-tight-bottom {
    padding-bottom: var(--section-space-mobile);
  }

  #details.section {
    padding-top: var(--section-space-mobile);
  }
}

/* ---------------------------------------------------------
   SITE FOOTER
   Works with .site-footer or a direct body-level <footer>.
--------------------------------------------------------- */

.site-footer,
body > footer {
  position: relative !important;
  inset: auto !important;
  display: block;
  clear: both;
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 8vw, 6.5rem) 1.25rem
    clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  color: var(--color-text);
  text-align: center;
  background: var(--bg-main);
  border-top: 1px solid rgba(41, 39, 32, 0.1);
  z-index: 1;
}

.site-footer .container,
body > footer > .container,
.site-footer__inner,
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 900px);
  margin-inline: auto;
  padding-inline: 0;
}

.site-footer h2,
.site-footer h3,
.site-footer__names,
.site-footer__title,
.footer-title,
.footer-logo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.site-footer p,
.site-footer a,
.site-footer__text,
.site-footer__date,
.site-footer__copyright,
.footer-text,
.footer-copy,
body > footer p,
body > footer a {
  font-family: var(--font-body);
}

.site-footer p,
.site-footer__text,
.footer-text,
body > footer p {
  max-width: 620px;
  margin: 1rem auto 0;
  color: rgba(41, 39, 32, 0.66);
  font-size: 0.82rem;
  line-height: 1.8;
}

.site-footer__date,
.site-footer__copyright,
.footer-copy {
  margin-top: 1.4rem;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer nav,
.site-footer__links,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.75rem;
}

.site-footer a,
body > footer a {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .site-footer,
  body > footer {
    padding-inline: 1rem;
  }

  .site-footer nav,
  .site-footer__links,
  .footer-links {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ---------------------------------------------------------
   CINEMATIC DISSOLVE
   Add .section-reveal to a section. JavaScript adds
   .is-visible when it enters the viewport.
--------------------------------------------------------- */

.section-reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(34px) scale(0.992);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.section-reveal--slow {
  transition-duration: 1.65s;
}

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

.reveal-stagger > * {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(20px);
}

.section-reveal.is-visible .reveal-stagger > * {
  animation: cinematicStaggerIn 0.9s
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section-reveal.is-visible .reveal-stagger > *:nth-child(2) {
  animation-delay: 90ms;
}

.section-reveal.is-visible .reveal-stagger > *:nth-child(3) {
  animation-delay: 180ms;
}

.section-reveal.is-visible .reveal-stagger > *:nth-child(4) {
  animation-delay: 270ms;
}

.section-reveal.is-visible .reveal-stagger > *:nth-child(5) {
  animation-delay: 360ms;
}

.section-reveal.is-visible .reveal-stagger > *:nth-child(n + 6) {
  animation-delay: 450ms;
}

@keyframes cinematicStaggerIn {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-reveal,
  .reveal-stagger > * {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------
   WEDDING DETAILS VISIBILITY SAFEGUARD
   This section already owns its internal reveal animations.
--------------------------------------------------------- */

.wedding-details,
.wedding-details.section-reveal {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  visibility: visible !important;
}

.wedding-details .reveal-on-scroll.section-reveal {
  /* Prevent the global section class from overriding the
     Wedding Details component's original reveal behavior. */
  filter: none;
}
/* ========================================
   WEDDING ENTOURAGE
========================================= */

#entourage.entourage-section {
  position: relative;
  overflow: visible;

  /* Remove inherited global section spacing */
  padding-top: 0;
  padding-bottom: 0;

  /* Seamless background */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
}



/* ========================================
   REMOVE INNER SECTION BACKGROUND
========================================= */

#entourage .container,
#entourage .section-content,
#entourage .section-content--center,
#entourage.entourage-section .section-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none;
  box-shadow: none !important;

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


/* Remove decorative/global pseudo backgrounds */
#entourage::before,
#entourage::after,
#entourage .section-content::before,
#entourage .section-content::after {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}



/* ========================================
   CONTENT WIDTH + SPACING
========================================= */

#entourage .section-content {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  /* Tight transition from ceremony/reception */
  padding-top: clamp(2.5rem, 4vw, 4rem);

  /* Breathing room before programme flow */
  padding-bottom: clamp(5rem, 8vw, 7rem);
}



/* ========================================
   SECTION HEADER
========================================= */

.entourage-header {
  width: 100%;
  max-width: 760px;

  margin: 0 auto clamp(4rem, 7vw, 6rem);

  text-align: center;
}


.entourage-header .section-eyebrow {
  margin: 0 0 0.75rem;

  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;

  letter-spacing: 0.22em;
  text-transform: uppercase;
}


.entourage-header .section-title {
  margin: 0;

  font-family: var(--font-heading);
}


.entourage-intro {
  max-width: 620px;

  margin: 1.25rem auto 0;

  line-height: 1.8;
}



/* ========================================
   GENERAL GROUP STYLES
========================================= */

.entourage-group {
  width: 100%;

  text-align: center;
}


.entourage-group-heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}


.entourage-group-kicker {
  display: block;

  margin-bottom: 0.6rem;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  opacity: 0.7;
}


.entourage-group-heading h3 {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
}


.entourage-column-title {
  position: relative;

  margin: 0 0 1.75rem;
  padding-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 400;
}


.entourage-column-title::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 50%;

  width: 42px;
  height: 1px;

  background-color: currentColor;

  opacity: 0.35;

  transform: translateX(-50%);
}


.entourage-name {
  margin: 0;

  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.15rem);

  line-height: 1.6;
}


.entourage-role {
  display: block;

  margin-bottom: 0.55rem;

  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  opacity: 0.65;
}



/* ========================================
   SECTION DIVIDERS
========================================= */

.entourage-divider {
  display: flex;

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

  gap: 1rem;

  width: min(100%, 560px);

  margin: clamp(3.5rem, 7vw, 6rem) auto;
}


.entourage-divider span {
  width: 100%;
  height: 1px;

  background-color: currentColor;

  opacity: 0.15;
}


.entourage-divider i {
  flex: 0 0 auto;

  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: normal;

  opacity: 0.55;
}



/* ========================================
   PRINCIPAL SPONSORS
========================================= */

.principal-sponsors-list {
  display: grid;

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

  gap: 1.25rem;

  width: 100%;
  max-width: 900px;

  margin: 0 auto;
}


.principal-sponsor-pair {
  display: flex;

  flex-direction: column;

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

  min-height: 170px;

  padding: 2rem;

  border: 1px solid rgba(31, 31, 31, 0.12);

  background-color: rgba(255, 255, 255, 0.35);
}


.entourage-pair-divider {
  display: block;

  margin: 0.55rem 0;

  font-family: var(--font-heading);
  font-size: 1rem;
  font-style: italic;

  opacity: 0.55;
}

/* =========================================================
   PRINCIPAL SPONSORS — DESKTOP ONLY
========================================================= */

@media (min-width: 901px) {

  .principal-sponsors-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    max-width: 720px;
    margin-inline: auto;
  }

  .principal-sponsors-list > * {
    width: 100%;
  }

}


/* ========================================
   HONOR ATTENDANTS
========================================= */

.honor-attendants-grid {
  display: grid;

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

  gap: clamp(1.5rem, 4vw, 3rem);

  width: 100%;
  max-width: 900px;

  margin: 0 auto;
}


.honor-attendants-column {
  padding: clamp(1.75rem, 4vw, 2.75rem);

  border: 1px solid rgba(31, 31, 31, 0.12);

  background-color: rgba(255, 255, 255, 0.35);
}


.honor-attendant-card + .honor-attendant-card {
  margin-top: 1rem;
}



/* ========================================
   GROOMSMEN + BRIDESMAIDS
========================================= */

.wedding-party-columns {
  display: grid;

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

  align-items: start;

  gap: clamp(1.5rem, 5vw, 4rem);

  width: 100%;
  max-width: 920px;

  margin: 0 auto;
}


.wedding-party-column {
  min-width: 0;

  padding: clamp(1.75rem, 4vw, 3rem);

  border: 1px solid rgba(31, 31, 31, 0.12);

  background-color: rgba(255, 255, 255, 0.35);
}


.entourage-name-list {
  display: flex;

  flex-direction: column;

  gap: 0;
}


.entourage-member {
  position: relative;

  padding: 1rem 0;
}


.entourage-member:first-child {
  padding-top: 0;
}


.entourage-member:last-child {
  padding-bottom: 0;
}


.entourage-member:not(:last-child)::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width: 34px;
  height: 1px;

  background-color: currentColor;

  opacity: 0.12;

  transform: translateX(-50%);
}



/* ========================================
   LITTLE ATTENDANTS
========================================= */

.little-attendants-grid {
  display: grid;

  /* Two attendants */
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.5rem;

  width: 100%;
  max-width: 720px;

  margin: 0 auto;
}


.little-attendant-card {
  display: flex;

  flex-direction: column;

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

  min-height: 150px;

  padding: 2rem 1.5rem;

  border: 1px solid rgba(31, 31, 31, 0.12);

  background-color: rgba(255, 255, 255, 0.35);

  text-align: center;
}



/* ========================================
   FLOWER GIRLS
========================================= */

.flower-girls-group {
  width: 100%;
  max-width: 620px;

  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
}


.flower-girls-list {
  display: grid;

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

  gap: 1.25rem;
}


.flower-girl {
  padding: 1.5rem;

  border: 1px solid rgba(31, 31, 31, 0.12);

  background-color: rgba(255, 255, 255, 0.35);
}



/* ========================================
   TABLET
========================================= */

@media (max-width: 768px) {

  .principal-sponsors-list,
  .honor-attendants-grid,
  .wedding-party-columns {
    gap: 1rem;
  }


  .wedding-party-column,
  .honor-attendants-column {
    padding: 1.75rem 1.25rem;
  }


  /* Keep both bearer cards side-by-side on tablet */
  .little-attendants-grid {
    max-width: 620px;

    gap: 1rem;
  }

}



/* ========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  /* Preserve the tighter transition on mobile */
  #entourage .section-content {
    padding-top: 2.5rem;
    padding-bottom: 4.5rem;
  }


  .entourage-header {
    margin-bottom: 3.5rem;
  }


  .principal-sponsors-list,
  .honor-attendants-grid,
  .wedding-party-columns,
  .little-attendants-grid,
  .flower-girls-list {
    grid-template-columns: 1fr;
  }


  .principal-sponsor-pair {
    min-height: auto;
  }


  .wedding-party-columns {
    gap: 1.5rem;
  }


  .little-attendants-grid {
    max-width: 480px;
  }


  .wedding-party-column,
  .honor-attendants-column,
  .principal-sponsor-pair,
  .little-attendant-card,
  .flower-girl {
    padding: 1.75rem 1.25rem;
  }


  .little-attendant-card {
    min-height: auto;
  }


  .entourage-divider {
    margin: 3.5rem auto;
  }

}

/* =========================================================
   GUEST GUIDE — FINAL OVERRIDES
   IMPORTANT: Keep this at the VERY BOTTOM of styles.css
========================================================= */


/* =========================================================
   UNIFIED BACKGROUND
========================================================= */

.getting-there-section,
.accommodations-section,
#faq {
  background: var(--bg-main) !important;
  background-color: var(--bg-main) !important;
  background-image: none !important;
}


/* Remove section seams caused by inherited backgrounds */

.getting-there-section .container,
.accommodations-container,
#faq .container,
#faq .section-content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}


/* =========================================================
   GETTING THERE
========================================================= */

.getting-there-section {
  margin: 0 !important;
  padding: 0 !important;
}

.getting-there-section .container {
  width: min(100% - 2rem, 1100px);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 96px;
  padding-bottom: 48px;
}


/* Header */

.getting-there-header {
  width: min(720px, 100%);
  margin: 0 auto 56px;
  text-align: center;
}

.getting-there-header .section-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.getting-there-header .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
}

.getting-there-header .section-text {
  max-width: 650px;
  margin: 20px auto 0;
  color: rgba(41, 39, 32, 0.68);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.8;
}


/* ========================================
   GETTING THERE — PUBLIC TRANSPORTATION
========================================= */

.public-transport {
  width: 100%;
  max-width: 920px;
  margin: clamp(4rem, 7vw, 6rem) auto 0;
}



/* ========================================
   PUBLIC TRANSPORT HEADER
========================================= */

.public-transport__header {
  width: 100%;
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}


.public-transport__eyebrow {
  display: block;
  margin-bottom: 0.75rem;

  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  opacity: 0.7;
}


.public-transport__header h3 {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}


.public-transport__header p {
  max-width: 620px;
  margin: 1.25rem auto 0;

  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.8;

  opacity: 0.75;
}



/* ========================================
   BUS OPERATORS
========================================= */

.public-transport__operators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: 100%;

  border-top: 1px solid rgba(31, 31, 31, 0.14);
  border-bottom: 1px solid rgba(31, 31, 31, 0.14);
}


.transport-operator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);

  gap: 1.5rem;

  min-height: 240px;
  padding: clamp(2rem, 4vw, 3rem);
}


.transport-operator + .transport-operator {
  border-left: 1px solid rgba(31, 31, 31, 0.14);
}



/* ========================================
   OPERATOR NUMBER
========================================= */

.transport-operator__number {
  padding-top: 0.15rem;

  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-style: italic;

  opacity: 0.5;
}



/* ========================================
   OPERATOR CONTENT
========================================= */

.transport-operator__content {
  min-width: 0;
}


.transport-operator__label {
  display: block;
  margin-bottom: 0.75rem;

  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.6;
}


.transport-operator__content h4 {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;

  line-height: 1.1;
}


.transport-operator__content p {
  max-width: 320px;

  margin: 1rem 0 1.5rem;

  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.75;

  opacity: 0.72;
}



/* ========================================
   OPERATOR LINKS
========================================= */

.transport-operator__link {
  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  color: inherit;

  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    gap 0.25s ease,
    opacity 0.25s ease;
}


.transport-operator__link span {
  font-size: 1rem;
  line-height: 1;
}


.transport-operator__link:hover {
  gap: 0.95rem;
  opacity: 0.65;
}


.transport-operator__link:focus-visible {
  outline: 2px solid rgba(31, 31, 31, 0.25);
  outline-offset: 5px;
}



/* ========================================
   TRAVEL REMINDER
========================================= */

.public-transport__note {
  max-width: 640px;

  margin: 2rem auto 0;

  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.8;

  text-align: center;

  opacity: 0.65;
}



/* ========================================
   TABLET
========================================= */

@media (max-width: 768px) {

  .public-transport {
    margin-top: 4rem;
  }


  .transport-operator {
    gap: 1.25rem;

    padding: 2rem 1.5rem;
  }

}



/* ========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .public-transport {
    margin-top: 3.5rem;
  }


  .public-transport__header {
    margin-bottom: 2.5rem;
  }


  .public-transport__operators {
    grid-template-columns: 1fr;
  }


  .transport-operator {
    grid-template-columns: 36px minmax(0, 1fr);

    min-height: auto;

    padding: 2rem 1.25rem;
  }


  .transport-operator + .transport-operator {
    border-top: 1px solid rgba(31, 31, 31, 0.14);
    border-left: none;
  }


  .transport-operator__content p {
    max-width: none;
  }


  .public-transport__note {
    margin-top: 1.75rem;

    padding: 0 0.5rem;
  }

}

/* =========================================================
   VENUE CARD
========================================================= */

.getting-there-section .venue-details {
  /*
    CRITICAL:
    Wedding Details originally gives this component
    a 110–180px bottom margin.
  */
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(41, 39, 32, 0.14);
}


/* =========================================================
   ACCOMMODATIONS
========================================================= */

.accommodations-section {
  /*
    Override both:
    - original accommodations padding
    - later global section padding
  */
  margin: 0 !important;
  padding: 48px 24px 96px !important;
  --accommodations-bg: var(--bg-main);
}


/* Prevent extra padding being added inside as well */

.accommodations-container {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 !important;
}


/* Keep cards slightly elevated from the canvas */

.accommodation-card {
  background-color: var(--color-white);
}


/* Keep chips subtle but consistent */

.accommodation-tags span {
  background-color: #f8f4ef;
}


/* =========================================================
   REMOVE GLOBAL SECTION GAP BETWEEN THESE TWO SECTIONS
========================================================= */

main > .getting-there-section {
  margin-bottom: 0 !important;
}

main > .getting-there-section + .accommodations-section {
  margin-top: 0 !important;
}


/* =========================================================
   FAQ
========================================================= */

#faq {
  margin: 0 !important;
  padding: 96px 0 !important;
}

#faq .section-content {
  padding: 0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .getting-there-section .container {
    width: min(100% - 1.5rem, 1100px);
    padding-top: 72px;
    padding-bottom: 36px;
  }

  .getting-there-header {
    margin-bottom: 40px;
  }

  .accommodations-section {
    padding: 36px 16px 72px !important;
  }

  #faq {
    padding: 72px 0 !important;
  }
}

/* RSVP start */
/* ======================================================
   RSVP SECTION
   Designed for the King & Claire wedding website
====================================================== */

.rsvp-form {
  display: grid;
  gap: 1rem;
  max-width: 700px;
}

.form-group {
  display: grid;
  gap: 0.5rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(31, 31, 31, 0.2);
  border-radius: 12px;
  background-color: var(--color-white);
  font: inherit;
}



.rsvp-section {
  /* Adjust these variables to match your global theme */
  --rsvp-bg: #f8f5f0;
  --rsvp-card-bg: rgba(255, 255, 255, 0.88);
  --rsvp-card-solid: #fffdf9;
  --rsvp-text: #302a26;
  --rsvp-text-soft: #746b64;
  --rsvp-accent: #a47d57;
  --rsvp-accent-dark: #805f40;
  --rsvp-accent-light: #d9c3ad;
  --rsvp-border: #ded4ca;
  --rsvp-input-bg: #fcfaf7;
  --rsvp-error: #a6443c;
  --rsvp-success: #65775d;

  --rsvp-display-font:
    var(--font-display, "Cormorant Garamond", "Times New Roman", serif);
  --rsvp-body-font:
    var(--font-body, "Montserrat", "Helvetica Neue", Arial, sans-serif);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  padding: clamp(5rem, 9vw, 8.5rem) 1.25rem;

  color: var(--rsvp-text);
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(164, 125, 87, 0.08),
      transparent 30rem
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(164, 125, 87, 0.06),
      transparent 28rem
    ),
    var(--rsvp-bg);
}


/* Subtle background texture */

.rsvp-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  opacity: 0.18;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.4) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.4) 1px,
      transparent 1px
    );
  background-size: 42px 42px;
}


/* Decorative glow behind the card */

.rsvp-section::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: -1;

  width: min(45rem, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;

  pointer-events: none;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.42);
  filter: blur(80px);
}


/* ======================================================
   SECTION CONTAINER
====================================================== */

.rsvp-section__inner {
  width: min(100%, 760px);
  margin-inline: auto;
}


/* ======================================================
   SECTION HEADING
====================================================== */

.rsvp-heading {
  width: min(100%, 640px);
  margin: 0 auto clamp(2.75rem, 6vw, 4.75rem);
  text-align: center;
}

.rsvp-heading__ornament,
.rsvp-section__footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;

  width: min(100%, 250px);
  margin-inline: auto;
  color: var(--rsvp-accent);
}

.rsvp-heading__ornament > span:not(.rsvp-heading__diamond),
.rsvp-section__footer-ornament > span:not(.rsvp-section__footer-symbol) {
  display: block;
  flex: 1;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--rsvp-accent-light)
  );
}

.rsvp-heading__ornament > span:last-child,
.rsvp-section__footer-ornament > span:last-child {
  background: linear-gradient(
    90deg,
    var(--rsvp-accent-light),
    transparent
  );
}

.rsvp-heading__diamond,
.rsvp-section__footer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0.58rem;
  line-height: 1;
  transform: rotate(45deg);
}

.rsvp-heading__eyebrow {
  margin: 1.35rem 0 0.65rem;

  color: var(--rsvp-accent-dark);
  font-family: var(--rsvp-body-font);
  font-size: clamp(0.68rem, 1.5vw, 0.76rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rsvp-heading__title {
  margin: 0;

  color: var(--rsvp-text);
  font-family: var(--rsvp-display-font);
  font-size: clamp(3.6rem, 10vw, 6.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.045em;
}

.rsvp-heading__intro {
  max-width: 540px;
  margin: 1.3rem auto 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-display-font);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
}

.rsvp-heading__deadline {
  margin: 1rem auto 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.035em;
}

.rsvp-heading__deadline strong {
  color: var(--rsvp-accent-dark);
  font-weight: 600;
}


/* ======================================================
   RSVP CARD
====================================================== */

.rsvp-card {
  position: relative;

  width: 100%;
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 1px solid rgba(164, 125, 87, 0.3);
  border-radius: 2rem;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 252, 247, 0.86)
    );
  box-shadow:
    0 2px 4px rgba(48, 42, 38, 0.025),
    0 15px 45px rgba(48, 42, 38, 0.07),
    0 40px 90px rgba(48, 42, 38, 0.05);

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


/* Fine inner border */

.rsvp-card::before {
  content: "";
  position: absolute;
  inset: 0.65rem;

  border: 1px solid rgba(164, 125, 87, 0.13);
  border-radius: 1.55rem;

  pointer-events: none;
}


/* Small ornamental accent */

.rsvp-card::after {
  content: "◆";
  position: absolute;
  top: 0;
  left: 50%;

  display: grid;
  place-items: center;

  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(164, 125, 87, 0.35);
  border-radius: 50%;

  color: var(--rsvp-accent);
  font-size: 0.5rem;
  line-height: 1;

  background: var(--rsvp-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ======================================================
   CARD HEADER
====================================================== */

.rsvp-card__header {
  position: relative;
  z-index: 1;

  width: min(100%, 530px);
  margin-inline: auto;
  text-align: center;
}

.rsvp-card__kicker {
  margin: 0 0 0.7rem;

  color: var(--rsvp-accent-dark);
  font-family: var(--rsvp-body-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.rsvp-card__title {
  margin: 0;

  color: var(--rsvp-text);
  font-family: var(--rsvp-display-font);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}

.rsvp-card__description {
  margin: 1rem auto 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: clamp(0.82rem, 2vw, 0.92rem);
  font-weight: 400;
  line-height: 1.8;
}


/* ======================================================
   CARD DIVIDER
====================================================== */

.rsvp-card__divider {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 0.8rem;

  width: min(100%, 420px);
  margin: clamp(2rem, 5vw, 3rem) auto;
}

.rsvp-card__divider span {
  flex: 1;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--rsvp-border)
  );
}

.rsvp-card__divider span:last-child {
  background: linear-gradient(
    90deg,
    var(--rsvp-border),
    transparent
  );
}

.rsvp-card__divider i {
  color: var(--rsvp-accent);
  font-size: 0.48rem;
  font-style: normal;
  transform: rotate(45deg);
}


/* ======================================================
   FORM
====================================================== */

.rsvp-form {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 1.7rem;
  width: 100%;
}

.rsvp-form__honeypot {
  position: absolute !important;
  left: -9999px !important;

  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;

  opacity: 0 !important;
  pointer-events: none !important;
}

.rsvp-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rsvp-field__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  width: 100%;
  margin: 0 0 0.65rem;

  color: var(--rsvp-text);
  font-family: var(--rsvp-body-font);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.rsvp-field__required {
  color: var(--rsvp-accent-dark);
  font-size: 0.9em;
}

.rsvp-field__optional {
  margin-left: auto;

  color: var(--rsvp-text-soft);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rsvp-field__control {
  position: relative;
  width: 100%;
}


/* ======================================================
   TEXT INPUTS AND TEXTAREA
====================================================== */

.rsvp-field__input,
.rsvp-field__textarea {
  display: block;

  width: 100%;
  min-width: 0;
  border: 1px solid var(--rsvp-border);
  border-radius: 1rem;
  outline: none;

  color: var(--rsvp-text);
  font-family: var(--rsvp-body-font);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;

  background: var(--rsvp-input-bg);
  box-shadow:
    inset 0 1px 1px rgba(48, 42, 38, 0.02),
    0 1px 0 rgba(255, 255, 255, 0.9);

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.rsvp-field__input {
  min-height: 3.75rem;
  padding: 0.9rem 1.1rem;
}

.rsvp-field__textarea {
  min-height: 9rem;
  padding: 1rem 1.1rem;
  resize: vertical;
}

.rsvp-field__input::placeholder,
.rsvp-field__textarea::placeholder {
  color: #a39a92;
  opacity: 1;
}

.rsvp-field__input:hover,
.rsvp-field__textarea:hover {
  border-color: var(--rsvp-accent-light);
  background: #fffdf9;
}

.rsvp-field__input:focus,
.rsvp-field__textarea:focus {
  border-color: var(--rsvp-accent);
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(164, 125, 87, 0.11),
    0 10px 25px rgba(48, 42, 38, 0.045);
}


/* Browser autofill */

.rsvp-field__input:-webkit-autofill,
.rsvp-field__input:-webkit-autofill:hover,
.rsvp-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--rsvp-text);
  box-shadow: 0 0 0 1000px var(--rsvp-input-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}


/* ======================================================
   FIELD HINTS AND ERRORS
====================================================== */

.rsvp-field__hint,
.rsvp-field__error {
  margin: 0.55rem 0 0;

  font-family: var(--rsvp-body-font);
  font-size: 0.7rem;
  line-height: 1.55;
}

.rsvp-field__hint {
  color: var(--rsvp-text-soft);
}

.rsvp-field__error {
  display: none;
  color: var(--rsvp-error);
  font-weight: 500;
}

.rsvp-field.has-error .rsvp-field__error,
.rsvp-attendance.has-error .rsvp-field__error {
  display: block;
}

.rsvp-field.has-error .rsvp-field__input,
.rsvp-field.has-error .rsvp-field__textarea {
  border-color: var(--rsvp-error);
  background: rgba(166, 68, 60, 0.025);
  box-shadow: 0 0 0 4px rgba(166, 68, 60, 0.08);
}


/* ======================================================
   ATTENDANCE RADIO OPTIONS
====================================================== */

.rsvp-attendance__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.rsvp-choice {
  position: relative;

  display: flex;
  align-items: flex-start;
  gap: 0.85rem;

  min-width: 0;
  min-height: 7.2rem;
  padding: 1.15rem;
  border: 1px solid var(--rsvp-border);
  border-radius: 1.15rem;

  cursor: pointer;
  background: var(--rsvp-input-bg);

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.rsvp-choice:hover {
  border-color: var(--rsvp-accent-light);
  background: #fffdf9;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(48, 42, 38, 0.055);
}

.rsvp-choice__input {
  position: absolute;

  width: 1px;
  height: 1px;
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
}

.rsvp-choice__indicator {
  display: grid;
  flex: 0 0 auto;
  place-items: center;

  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.08rem;
  border: 1px solid #c8bdb3;
  border-radius: 50%;

  background: #ffffff;

  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.rsvp-choice__indicator span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;

  background: #ffffff;
  opacity: 0;
  transform: scale(0.4);

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.rsvp-choice__content {
  display: block;
  min-width: 0;
}

.rsvp-choice__title {
  display: block;

  color: var(--rsvp-text);
  font-family: var(--rsvp-display-font);
  font-size: clamp(1.08rem, 2.7vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
}

.rsvp-choice__description {
  display: block;
  margin-top: 0.45rem;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.69rem;
  line-height: 1.55;
}


/* Checked option */

.rsvp-choice:has(.rsvp-choice__input:checked) {
  border-color: var(--rsvp-accent);
  background:
    linear-gradient(
      145deg,
      rgba(164, 125, 87, 0.09),
      rgba(255, 255, 255, 0.9)
    );
  box-shadow:
    0 0 0 3px rgba(164, 125, 87, 0.08),
    0 12px 28px rgba(48, 42, 38, 0.06);
}

.rsvp-choice__input:checked + .rsvp-choice__indicator {
  border-color: var(--rsvp-accent);
  background: var(--rsvp-accent);
  box-shadow: 0 0 0 4px rgba(164, 125, 87, 0.1);
}

.rsvp-choice__input:checked
  + .rsvp-choice__indicator
  span {
  opacity: 1;
  transform: scale(1);
}


/* Keyboard focus */

.rsvp-choice:has(.rsvp-choice__input:focus-visible) {
  border-color: var(--rsvp-accent);
  box-shadow:
    0 0 0 4px rgba(164, 125, 87, 0.14),
    0 12px 28px rgba(48, 42, 38, 0.05);
}


/* Fallback for browsers without :has() */

.rsvp-choice.is-selected {
  border-color: var(--rsvp-accent);
  background:
    linear-gradient(
      145deg,
      rgba(164, 125, 87, 0.09),
      rgba(255, 255, 255, 0.9)
    );
  box-shadow:
    0 0 0 3px rgba(164, 125, 87, 0.08),
    0 12px 28px rgba(48, 42, 38, 0.06);
}


/* Attendance validation */

.rsvp-attendance.has-error .rsvp-attendance__options {
  padding: 0.35rem;
  border-radius: 1.35rem;
  box-shadow: 0 0 0 3px rgba(166, 68, 60, 0.08);
}


/* ======================================================
   CONDITIONAL ATTENDING FIELDS
====================================================== */

.rsvp-form__attending-fields {
  display: grid;
  grid-template-rows: 1fr;

  opacity: 1;
  transform: translateY(0);

  transition:
    grid-template-rows 280ms ease,
    opacity 220ms ease,
    transform 280ms ease;
}

.rsvp-form__attending-fields > * {
  min-height: 0;
  overflow: hidden;
}

.rsvp-form__attending-fields.is-hidden {
  grid-template-rows: 0fr;

  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
}


/* ======================================================
   PRIVACY NOTE
====================================================== */

.rsvp-form__privacy-note {
  max-width: 500px;
  margin: 0.1rem auto 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.69rem;
  font-style: italic;
  line-height: 1.65;
  text-align: center;
}


/* ======================================================
   SUBMIT BUTTON
====================================================== */

.rsvp-form__actions {
  display: flex;
  justify-content: center;
  padding-top: 0.3rem;
}

.rsvp-submit {
  position: relative;

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

  width: min(100%, 320px);
  min-height: 3.9rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--rsvp-accent);
  border-radius: 999px;

  overflow: hidden;
  cursor: pointer;

  color: #ffffff;
  font-family: var(--rsvp-body-font);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  background:
    linear-gradient(
      135deg,
      var(--rsvp-accent),
      var(--rsvp-accent-dark)
    );
  box-shadow:
    0 10px 24px rgba(128, 95, 64, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    opacity 180ms ease;
}

.rsvp-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;

  width: 80%;
  height: 100%;

  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-18deg);

  transition: left 550ms ease;
}

.rsvp-submit:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow:
    0 15px 32px rgba(128, 95, 64, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.rsvp-submit:hover::before {
  left: 150%;
}

.rsvp-submit:active {
  transform: translateY(-1px);
}

.rsvp-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px var(--rsvp-card-solid),
    0 0 0 7px rgba(164, 125, 87, 0.55),
    0 15px 32px rgba(128, 95, 64, 0.22);
}

.rsvp-submit:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  filter: none;
}

.rsvp-submit__default,
.rsvp-submit__loading {
  position: relative;
  z-index: 1;

  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.rsvp-submit__default {
  display: flex;
}

.rsvp-submit__loading {
  display: none;
}

.rsvp-submit__arrow {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 0;
  transition: transform 180ms ease;
}

.rsvp-submit:hover .rsvp-submit__arrow {
  transform: translateX(4px);
}


/* Loading state */

.rsvp-form.is-submitting .rsvp-submit__default,
.rsvp-submit.is-loading .rsvp-submit__default {
  display: none;
}

.rsvp-form.is-submitting .rsvp-submit__loading,
.rsvp-submit.is-loading .rsvp-submit__loading {
  display: flex;
}

.rsvp-submit__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;

  animation: rsvp-spin 750ms linear infinite;
}

@keyframes rsvp-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ======================================================
   FORM-LEVEL MESSAGE
====================================================== */

.rsvp-form__message {
  width: 100%;
  margin-top: -0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.9rem;

  font-family: var(--rsvp-body-font);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

.rsvp-form__message.is-error {
  border-color: rgba(166, 68, 60, 0.25);
  color: var(--rsvp-error);
  background: rgba(166, 68, 60, 0.055);
}

.rsvp-form__message.is-success {
  border-color: rgba(101, 119, 93, 0.25);
  color: var(--rsvp-success);
  background: rgba(101, 119, 93, 0.06);
}


/* ======================================================
   SUCCESS STATE
====================================================== */

.rsvp-success {
  position: relative;
  z-index: 1;

  width: min(100%, 520px);
  margin-inline: auto;
  padding-block: clamp(1.25rem, 3vw, 2rem);

  text-align: center;
  animation: rsvp-success-in 550ms ease both;
}

@keyframes rsvp-success-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rsvp-success__icon {
  display: grid;
  place-items: center;

  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 1.3rem;
  border: 1px solid rgba(101, 119, 93, 0.35);
  border-radius: 50%;

  color: var(--rsvp-success);
  font-family: var(--rsvp-body-font);
  font-size: 1.65rem;
  line-height: 1;

  background: rgba(101, 119, 93, 0.065);
  box-shadow: 0 0 0 8px rgba(101, 119, 93, 0.035);
}

.rsvp-success__eyebrow {
  margin: 0 0 0.7rem;

  color: var(--rsvp-success);
  font-family: var(--rsvp-body-font);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.rsvp-success__title {
  margin: 0;

  color: var(--rsvp-text);
  font-family: var(--rsvp-display-font);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.rsvp-success__message {
  margin: 1.2rem auto 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.86rem;
  line-height: 1.8;
}

.rsvp-success__reference {
  margin: 1.2rem 0 0;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.rsvp-success__reference strong {
  color: var(--rsvp-accent-dark);
  font-weight: 600;
}

.rsvp-success__reset {
  margin-top: 1.6rem;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid rgba(164, 125, 87, 0.45);

  cursor: pointer;

  color: var(--rsvp-accent-dark);
  font-family: var(--rsvp-body-font);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  background: transparent;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.rsvp-success__reset:hover {
  border-color: var(--rsvp-accent-dark);
  color: var(--rsvp-text);
  transform: translateY(-1px);
}

.rsvp-success__reset:focus-visible {
  outline: 2px solid var(--rsvp-accent);
  outline-offset: 5px;
  border-radius: 0.2rem;
}


/* ======================================================
   SECTION FOOTER ORNAMENT
====================================================== */

.rsvp-section__footer-ornament {
  margin-top: clamp(3.25rem, 7vw, 5.5rem);
}


/* ======================================================
   HIDDEN ATTRIBUTE
====================================================== */

.rsvp-section [hidden] {
  display: none !important;
}


/* ======================================================
   DISABLED FORM STATE
====================================================== */

.rsvp-form.is-submitting {
  cursor: wait;
}

.rsvp-form.is-submitting
  :is(
    input,
    textarea,
    button,
    label
  ) {
  pointer-events: none;
}


/* ========================================
   RSVP FORM FIELD SPACING
   Adds breathing room between question copy
   and its input/choice control without altering
   validation hints or error-message spacing.
======================================== */

/* Standard question/helper copy placed before a control */
.rsvp-field > p:not(.rsvp-field__hint):not(.rsvp-field__error),
.rsvp-field__description,
.field-description,
.field-help,
.input-description {
  margin: 0 0 1rem;
  line-height: 1.65;
}

/* RSVP Question Description */

.rsvp-field__description {
  margin: 0 0 1rem;

  color: var(--rsvp-text-soft);
  font-family: var(--rsvp-body-font);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.7;
}

/* If the markup wraps the input/choices in a control container,
   preserve a clear visual break after the question copy. */
.rsvp-field > p:not(.rsvp-field__hint):not(.rsvp-field__error) + .rsvp-field__control,
.rsvp-field__description + .rsvp-field__control,
.field-description + .rsvp-field__control,
.field-help + .rsvp-field__control,
.input-description + .rsvp-field__control {
  margin-top: 0.15rem;
}

/* Radio-card groups such as Attendance / Parking */
.rsvp-attendance__options,
.radio-group,
.choice-group,
.option-grid,
.parking-options {
  margin-top: 0.15rem;
}

/* ======================================================
   RESPONSIVE: TABLET
====================================================== */

@media (max-width: 760px) {
  .rsvp-section {
    padding-inline: 1rem;
  }

  .rsvp-card {
    border-radius: 1.6rem;
  }

  .rsvp-card::before {
    inset: 0.5rem;
    border-radius: 1.25rem;
  }

  .rsvp-attendance__options {
    grid-template-columns: 1fr;
  }

  .rsvp-choice {
    min-height: auto;
  }
}


/* ======================================================
   RESPONSIVE: MOBILE
====================================================== */

@media (max-width: 520px) {
  .rsvp-section {
    padding:
      clamp(4.25rem, 15vw, 5.5rem)
      0.8rem;
  }

  .rsvp-heading {
    margin-bottom: 3.25rem;
  }

  .rsvp-heading__title {
    font-size: clamp(3.4rem, 18vw, 4.8rem);
  }

  .rsvp-heading__intro {
    padding-inline: 0.35rem;
    font-size: 1.08rem;
  }

  .rsvp-heading__deadline {
    max-width: 290px;
  }

  .rsvp-card {
    padding:
      2.5rem
      clamp(1.25rem, 6vw, 1.75rem)
      2.25rem;
    border-radius: 1.4rem;
  }

  .rsvp-card::before {
    inset: 0.4rem;
    border-radius: 1.1rem;
  }

  .rsvp-card::after {
    width: 2.3rem;
    height: 2.3rem;
  }

  .rsvp-card__title {
    font-size: 2.15rem;
  }

  .rsvp-card__description {
    font-size: 0.8rem;
    line-height: 1.75;
  }

  .rsvp-card__divider {
    margin-block: 2rem;
  }

  .rsvp-form {
    gap: 1.45rem;
  }

  .rsvp-field__label {
    font-size: 0.69rem;
  }

  .rsvp-field__input {
    min-height: 3.55rem;
    padding-inline: 1rem;
    font-size: 0.85rem;
  }

  .rsvp-field__textarea {
    min-height: 7.8rem;
    padding: 0.95rem 1rem;
    font-size: 0.85rem;
  }

  .rsvp-choice {
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  .rsvp-choice__title {
    font-size: 1.08rem;
  }

  .rsvp-choice__description {
    font-size: 0.66rem;
  }

  .rsvp-submit {
    width: 100%;
    min-height: 3.7rem;
    font-size: 0.72rem;
  }

  .rsvp-success__message {
    font-size: 0.81rem;
  }
}


/* ======================================================
   VERY SMALL MOBILE
====================================================== */

@media (max-width: 360px) {
  .rsvp-section {
    padding-inline: 0.55rem;
  }

  .rsvp-card {
    padding-inline: 1.05rem;
  }

  .rsvp-heading__ornament,
  .rsvp-section__footer-ornament {
    width: 200px;
  }

  .rsvp-choice {
    padding: 0.9rem;
  }
}


/* ======================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {
  .rsvp-section *,
  .rsvp-section *::before,
  .rsvp-section *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ======================================================
   HIGH-CONTRAST / FORCED COLOURS
====================================================== */

@media (forced-colors: active) {
  .rsvp-card,
  .rsvp-choice,
  .rsvp-field__input,
  .rsvp-field__textarea,
  .rsvp-submit {
    border: 1px solid CanvasText;
  }

  .rsvp-choice__input:checked
    + .rsvp-choice__indicator {
    forced-color-adjust: none;
  }
}

/* ======================================================
   SPACING BETWEEN RSVP QUESTIONS
====================================================== */

.rsvp-form__attending-fields .rsvp-field + .rsvp-field {
  margin-top: 1.75rem;
}

/* Space between parking Yes/No cards and vehicle counts */
.rsvp-form__parking-spaces {
  margin-top: 1.5rem;
  
}


/* ======================================================
   CONDITIONAL PARKING VEHICLE FIELDS
====================================================== */

.rsvp-form__parking-spaces {
  margin-top: 1.5rem;
}

.rsvp-form__parking-spaces.is-hidden {
  display: none;
}


/* ======================================================
   MOBILE NUMBER WITH FIXED +63 PREFIX
====================================================== */

.rsvp-phone-input {
  display: flex;
  align-items: stretch;

  width: 100%;
  border: 1px solid var(--rsvp-border);
  border-radius: 1rem;

  overflow: hidden;
  background: var(--rsvp-input-bg);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.rsvp-phone-input:focus-within {
  border-color: var(--rsvp-accent);
  background: #ffffff;

  box-shadow:
    0 0 0 4px rgba(164, 125, 87, 0.11),
    0 10px 25px rgba(48, 42, 38, 0.045);
}

.rsvp-phone-input__prefix {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 1rem;
  border-right: 1px solid var(--rsvp-border);

  color: var(--rsvp-text);
  font-family: var(--rsvp-body-font);
  font-size: 0.9rem;
  font-weight: 600;

  background: rgba(164, 125, 87, 0.06);
}

.rsvp-phone-input__field {
  flex: 1;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.rsvp-phone-input__field:focus {
  box-shadow: none !important;
}
/* RSVP end */


/* ========================================
   FINAL MOBILE HERO TEXT SPACING OVERRIDE
   Keep at absolute bottom of stylesheet
======================================== */

@media (max-width: 767px) {

  .hero .eyebrow {
    margin: 0 0 14px !important;
  }


  .hero .hero-names {
    margin: 0 !important;
  }


  .hero .hero-date {
    margin: 26px 0 0 !important;
  }


  .hero .hero-location {
    margin: 6px 0 0 !important;
  }

}

/* =========================================================
   RSVP — SEAT ALLOCATION
========================================================= */

.rsvp-seat-allocation {
  margin-bottom: 2rem;
}


/* =========================================================
   RESERVED SEAT BANNER
========================================================= */

.rsvp-seat-banner {
  position: relative;

  padding:
    2.4rem
    2rem
    2.25rem;

  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 249, 0.98),
      rgba(248, 245, 240, 0.98)
    );

  border: 1px solid rgba(164, 125, 87, 0.42);

  border-radius: 18px;

  text-align: center;

  overflow: hidden;

  box-shadow:
    0 14px 34px rgba(70, 54, 40, 0.06);
}


/* Decorative corner lines */

.rsvp-seat-banner::before,
.rsvp-seat-banner::after {
  content: "";

  position: absolute;

  width: 58px;
  height: 58px;

  pointer-events: none;
}


.rsvp-seat-banner::before {
  top: 12px;
  left: 12px;

  border-top: 1px solid rgba(164, 125, 87, 0.5);
  border-left: 1px solid rgba(164, 125, 87, 0.5);

  border-top-left-radius: 12px;
}


.rsvp-seat-banner::after {
  right: 12px;
  bottom: 12px;

  border-right: 1px solid rgba(164, 125, 87, 0.5);
  border-bottom: 1px solid rgba(164, 125, 87, 0.5);

  border-bottom-right-radius: 12px;
}


.rsvp-seat-banner__eyebrow {
  margin: 0 0 0.75rem;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.72rem;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--rsvp-accent);
}


.rsvp-seat-banner__ornament {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  margin-bottom: 1.1rem;

  color: var(--rsvp-accent);
}


.rsvp-seat-banner__ornament span {
  display: block;

  width: 42px;
  height: 1px;

  background:
    rgba(164, 125, 87, 0.55);
}


.rsvp-seat-banner__ornament i {
  font-style: normal;

  font-size: 0.55rem;

  line-height: 1;
}


.rsvp-seat-banner__message {
  max-width: 520px;

  margin:
    0
    auto
    0.9rem;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(
      1.7rem,
      4vw,
      2.25rem
    );

  line-height: 1.15;

  color: var(--rsvp-text);
}


.rsvp-seat-banner__message strong {
  color: var(--rsvp-accent-dark);
  font-weight: 600;
}


.rsvp-seat-banner__note {
  max-width: 460px;

  margin: 0 auto;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.86rem;
  line-height: 1.65;

  color: var(--rsvp-text-soft);
}


/* =========================================================
   CONFIRMED PAX
========================================================= */

.rsvp-pax-field {
  margin-top: 2rem;
}


.rsvp-pax-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 1.2rem;

  margin-top: 1rem;

  padding:
    0.55rem
    0.65rem;

  background:
    var(--rsvp-card-solid);

  border:
    1px solid
    var(--rsvp-border);

  border-radius: 999px;

  box-shadow:
    0 7px 18px rgba(70, 54, 40, 0.05);
}


.rsvp-pax-control__button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid
    rgba(164, 125, 87, 0.45);

  border-radius: 50%;

  background:
    transparent;

  color:
    var(--rsvp-accent-dark);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 1.35rem;
  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}


.rsvp-pax-control__button:hover:not(:disabled) {
  background:
    var(--rsvp-accent);

  color: #fff;

  border-color:
    var(--rsvp-accent);
}


.rsvp-pax-control__button:active:not(:disabled) {
  transform: scale(0.96);
}


.rsvp-pax-control__button:focus-visible {
  outline:
    2px solid
    rgba(164, 125, 87, 0.4);

  outline-offset: 3px;
}


.rsvp-pax-control__button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}


.rsvp-pax-control__value {
  min-width: 40px;

  text-align: center;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 2rem;
  font-weight: 600;

  line-height: 1;

  color: var(--rsvp-text);
}


.rsvp-pax-control__limit {
  margin:
    0.8rem
    0
    0;

  font-size: 0.76rem;
  line-height: 1.5;

  color: var(--rsvp-text-soft);
}


/* =========================================================
   PARTY MEMBERS
========================================================= */

.rsvp-party-members {
  margin-top: 2.2rem;

  padding-top: 2.1rem;

  border-top:
    1px solid
    rgba(222, 212, 202, 0.75);
}


.rsvp-party-members__header {
  margin-bottom: 1.35rem;
}


/* Primary guest */

.rsvp-party-members__primary,
.rsvp-party-member {
  display: grid;

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

  gap: 0.9rem;

  align-items: center;

  padding:
    1rem
    1.05rem;

  background:
    rgba(255, 253, 249, 0.75);

  border:
    1px solid
    rgba(222, 212, 202, 0.9);

  border-radius: 14px;
}


.rsvp-party-members__primary {
  margin-bottom: 0.85rem;
}


.rsvp-party-members__number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    rgba(164, 125, 87, 0.42);

  border-radius: 50%;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.04em;

  color:
    var(--rsvp-accent-dark);

  background:
    rgba(164, 125, 87, 0.05);
}


.rsvp-party-members__primary-content {
  min-width: 0;
}


.rsvp-party-members__role,
.rsvp-party-member__label {
  display: block;

  margin-bottom: 0.2rem;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.68rem;
  font-weight: 600;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  color:
    var(--rsvp-accent);
}


.rsvp-party-members__primary-name {
  display: block;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 1.3rem;
  font-weight: 600;

  line-height: 1.25;

  color:
    var(--rsvp-text);
}


/* =========================================================
   DYNAMIC PARTY MEMBER LIST
========================================================= */

.rsvp-party-members__list {
  display: grid;

  gap: 0.85rem;
}


.rsvp-party-member__content {
  min-width: 0;
}


.rsvp-party-member__input-row {
  display: flex;
  align-items: center;

  gap: 0.65rem;
}


.rsvp-party-member__input {
  flex: 1;
  min-width: 0;
}


.rsvp-party-member__remove {
  flex: 0 0 auto;

  padding:
    0.7rem
    0.75rem;

  border: 0;

  background:
    transparent;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.72rem;
  font-weight: 500;

  color:
    var(--rsvp-text-soft);

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease;
}


.rsvp-party-member__remove:hover {
  color:
    var(--rsvp-error);
}


/* =========================================================
   ADD GUEST BUTTON
========================================================= */

.rsvp-party-members__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  margin-top: 1rem;

  padding:
    0.8rem
    1.15rem;

  border:
    1px solid
    rgba(164, 125, 87, 0.55);

  border-radius: 999px;

  background:
    transparent;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.76rem;
  font-weight: 600;

  letter-spacing: 0.04em;

  color:
    var(--rsvp-accent-dark);

  cursor: pointer;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}


.rsvp-party-members__add-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  font-size: 1rem;
  line-height: 1;
}


.rsvp-party-members__add:hover:not(:disabled) {
  background:
    var(--rsvp-accent);

  border-color:
    var(--rsvp-accent);

  color: #fff;
}


.rsvp-party-members__add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}


/* =========================================================
   PARTY MEMBER STATUS
========================================================= */

.rsvp-party-members__status {
  margin:
    0.75rem
    0
    0;

  min-height: 1.25em;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 0.75rem;
  line-height: 1.5;

  color:
    var(--rsvp-text-soft);
}


.rsvp-party-members__status.is-error {
  color:
    var(--rsvp-error);
}


/* =========================================================
   HIDDEN STATES
========================================================= */

.rsvp-seat-allocation[hidden],
.rsvp-party-members[hidden] {
  display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .rsvp-seat-banner {
    padding:
      2rem
      1.25rem
      1.9rem;

    border-radius: 15px;
  }


  .rsvp-seat-banner::before,
  .rsvp-seat-banner::after {
    width: 42px;
    height: 42px;
  }


  .rsvp-seat-banner__message {
    font-size:
      clamp(
        1.55rem,
        7vw,
        1.95rem
      );
  }


  .rsvp-pax-control {
    gap: 0.95rem;
  }


  .rsvp-pax-control__button {
    width: 40px;
    height: 40px;
  }


  .rsvp-party-members__primary,
  .rsvp-party-member {
    grid-template-columns:
      36px
      minmax(0, 1fr);

    gap: 0.7rem;

    padding:
      0.9rem;
  }


  .rsvp-party-members__number {
    width: 34px;
    height: 34px;

    font-size: 0.65rem;
  }


  .rsvp-party-member__input-row {
    align-items: stretch;
    flex-direction: column;

    gap: 0.35rem;
  }


  .rsvp-party-member__remove {
    align-self: flex-end;

    padding:
      0.25rem
      0;
  }


  .rsvp-party-members__add {
    width: 100%;
  }

}