/* ============================================================
   ST. ANDREWS CHAPEL & HALL
   "Modern Wedding Hall" — Ivory & Sage Elegance
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Core Palette */
  --color-cloud-dancer : #F8F6F1;
  --color-cream        : #FDF9F3;
  --color-sage         : #8FAF8F;
  --color-sage-light   : #C5D5C5;
  --color-charcoal     : #2C2C2C;
  --color-silver       : #B8B8B8;
  --color-gold-accent  : #C9A84C;
  --color-navy         : #1a2744;

  /* Supporting */
  --color-silver-hi     : #EBEBEB;
  --color-silver-mid    : #D0D0D0;
  --color-silver-shadow : #989898;
  --color-charcoal-soft : #4A4948;
  --color-cream-border  : #E2D9CC;
  --color-sage-dark     : #678767;
  --color-sage-pale     : #EDF3ED;
  --color-navy-light    : #243560;
  --color-white         : #FFFFFF;
  --color-gold-light    : #E8D49C;
  --color-gold-dark     : #A88A38;

  /* Fonts */
  --font-script : 'Great Vibes', cursive;
  --font-serif  : 'Cormorant Garamond', Georgia, serif;
  --font-body   : 'Lato', sans-serif;

  /* Type scale */
  --text-xs   : 0.6875rem;
  --text-sm   : 0.8125rem;
  --text-base : 1rem;
  --text-md   : 1.125rem;
  --text-lg   : 1.25rem;
  --text-xl   : 1.5rem;
  --text-2xl  : 1.875rem;
  --text-3xl  : 2.25rem;
  --text-hero : clamp(3.4rem, 7.5vw, 6.8rem);
  --text-section-title : clamp(2.2rem, 4vw, 3.5rem);

  /* Spacing */
  --sp-1  : 0.25rem;  --sp-2  : 0.5rem;   --sp-3  : 0.75rem;
  --sp-4  : 1rem;     --sp-5  : 1.25rem;  --sp-6  : 1.5rem;
  --sp-8  : 2rem;     --sp-10 : 2.5rem;   --sp-12 : 3rem;
  --sp-16 : 4rem;     --sp-20 : 5rem;     --sp-24 : 6rem;
  --sp-32 : 8rem;

  /* Motion */
  --ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk     : cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast  : 200ms;
  --dur-base  : 380ms;
  --dur-slow  : 640ms;
  --dur-enter : 800ms;

  /* Shadows */
  --shadow-sm     : 0 1px 4px rgba(44,44,44,0.08);
  --shadow-md     : 0 4px 18px rgba(44,44,44,0.10);
  --shadow-lg     : 0 10px 40px rgba(44,44,44,0.15);
  --shadow-silver : 0 4px 22px rgba(150,140,130,0.30);
  --shadow-card   : 0 2px 16px rgba(44,44,44,0.07);

  /* Layout */
  --nav-height    : 80px;
  --nav-mob       : 64px;
  --container-max : 1180px;
  --container-pad : clamp(1rem, 5vw, 3rem);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size       : 16px;
  scroll-behavior : smooth;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

body {
  font-family      : var(--font-body);
  font-size        : var(--text-base);
  color            : var(--color-charcoal-soft);
  background-color : var(--color-cloud-dancer);
  line-height      : 1.65;
  overflow-x       : hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: transparent; font-family: inherit; }
abbr { text-decoration: none; }
strong { font-weight: 700; }


/* ============================================================
   3. NAVIGATION
   ============================================================ */
.nav {
  position   : fixed;
  top        : 0; left: 0; right: 0;
  z-index    : 100;
  height     : var(--nav-height);
  transition :
    background-color var(--dur-slow) var(--ease-silk),
    box-shadow       var(--dur-slow) var(--ease-silk),
    backdrop-filter  var(--dur-slow) var(--ease-silk);
}

.nav--solid {
  background-color       : rgba(253,249,243,0.96);
  backdrop-filter        : blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow             : 0 1px 0 rgba(201,168,76,0.18), var(--shadow-sm);
}

.nav__container {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  height          : 100%;
  max-width       : var(--container-max);
  margin          : 0 auto;
  padding         : 0 var(--container-pad);
}

.nav__logo {
  font-family    : var(--font-script);
  font-size      : 2rem;
  line-height    : 1;
  color          : var(--color-cream);
  transition     : color var(--dur-base) var(--ease-silk);
}
.nav--solid .nav__logo { color: var(--color-navy); }
.nav__logo:hover { opacity: 0.8; }

.nav__links {
  display     : flex;
  align-items : center;
  gap         : var(--sp-8);
}

.nav__link {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : rgba(253,249,243,0.85);
  position       : relative;
  transition     : color var(--dur-fast);
}
.nav__link::after {
  content    : '';
  position   : absolute;
  bottom     : -3px; left: 0;
  width      : 0; height: 1px;
  background : var(--color-gold-accent);
  transition : width var(--dur-base) var(--ease-out-expo);
}
.nav__link:hover::after { width: 100%; }
.nav__link:hover { color: var(--color-cream); }
.nav--solid .nav__link { color: var(--color-charcoal-soft); }
.nav--solid .nav__link:hover { color: var(--color-navy); }

.nav__hamburger {
  display         : none;
  flex-direction  : column;
  justify-content : center;
  gap             : 5px;
  width: 36px; height: 36px;
  padding: var(--sp-1);
}
.nav__bar {
  display          : block;
  width: 22px; height: 1.5px;
  background-color : var(--color-cream);
  border-radius    : 1px;
  transition       : transform var(--dur-base) var(--ease-out-expo),
                     opacity   var(--dur-base) var(--ease-silk),
                     background-color var(--dur-base) var(--ease-silk);
  transform-origin : center;
}
.nav--solid .nav__bar { background-color: var(--color-charcoal); }
.nav__hamburger.is-open .nav__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.is-open .nav__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-open .nav__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ============================================================
   4. HERO
   ============================================================ */
.hero {
  position        : relative;
  width           : 100%;
  min-height      : 100svh;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  overflow        : hidden;
  isolation       : isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__bg-stone {
  position            : absolute; inset: 0;
  background-image    : url('images/front_entrance.jpg');
  background-size     : cover;
  background-position : center 35%;
  /* warm tint overlay on top of real photo */
  filter              : brightness(0.80) saturate(1.1);
}
.hero__bg-bloom {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.hero__bg-bloom--gold {
  top: -10%; right: -5%; width: 55%; height: 65%;
  background: radial-gradient(ellipse at center,
    rgba(201,168,76,0.22) 0%, rgba(220,195,120,0.12) 45%, transparent 75%);
}
.hero__bg-bloom--sage {
  bottom: -8%; left: -8%; width: 60%; height: 55%;
  background: radial-gradient(ellipse at center,
    rgba(143,175,143,0.26) 0%, rgba(143,175,143,0.12) 50%, transparent 72%);
}
.hero__bg-bloom--top {
  top: -15%; left: 25%; width: 50%; height: 50%;
  background: radial-gradient(ellipse at center,
    rgba(248,242,228,0.32) 0%, transparent 65%);
}
.hero__bg-grain {
  position: absolute; inset: 0;
  opacity: 0.038; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}
.hero__bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 85% at 50% 40%,
    transparent 40%, rgba(60,40,20,0.28) 100%);
  pointer-events: none;
}
.hero__wash {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 1;
}
.hero__wash--bl {
  bottom: -80px; left: -120px;
  width: 500px; height: 380px;
  background: radial-gradient(ellipse at center,
    rgba(197,213,197,0.30) 0%, rgba(143,175,143,0.15) 45%, transparent 72%);
  filter: blur(32px);
  transform: rotate(-12deg);
}
.hero__wash--tr {
  top: -60px; right: -100px;
  width: 420px; height: 340px;
  background: radial-gradient(ellipse at center,
    rgba(248,240,220,0.25) 0%, rgba(201,168,76,0.10) 45%, transparent 72%);
  filter: blur(40px);
  transform: rotate(8deg);
}

.hero__content {
  position        : relative;
  z-index         : 2;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  text-align      : center;
  padding         : var(--sp-32) var(--container-pad) var(--sp-16);
  max-width       : 860px;
  width           : 100%;
}

.hero__badge {
  display       : flex;
  align-items   : center;
  gap           : var(--sp-4);
  margin-bottom : var(--sp-4);
}
.hero__badge-rule {
  display    : block;
  width      : 48px; height: 1px;
  background : linear-gradient(90deg, transparent, var(--color-gold-accent) 40%, var(--color-gold-accent) 60%, transparent);
}
.hero__badge-inner {
  display: flex; align-items: center; gap: var(--sp-3);
}
.hero__badge-inner abbr,
.hero__badge-inner span {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  color          : rgba(253,249,243,0.82);
}
.hero__badge-crest { color: var(--color-gold-accent) !important; }

.hero__title {
  font-family    : var(--font-script);
  font-size      : var(--text-hero);
  font-weight    : 400;
  line-height    : 1.12;
  color          : var(--color-cloud-dancer);
  text-shadow    : 0 2px 24px rgba(100,70,40,0.35), 0 1px 4px rgba(60,40,20,0.25);
  margin-bottom  : var(--sp-5);
}
.hero__location {
  font-family    : var(--font-serif);
  font-size      : var(--text-sm);
  font-weight    : 300;
  letter-spacing : 0.20em;
  text-transform : uppercase;
  color          : rgba(253,249,243,0.75);
  margin-bottom  : var(--sp-5);
  display        : flex;
  align-items    : center;
}
.hero__dot { color: var(--color-gold-accent); }
.hero__tagline {
  font-family   : var(--font-serif);
  font-size     : clamp(1rem, 2vw, 1.25rem);
  font-style    : italic;
  font-weight   : 300;
  line-height   : 1.6;
  color         : rgba(253,249,243,0.68);
  margin-bottom : var(--sp-10);
  max-width     : 540px;
}
.hero__actions {
  display         : flex;
  flex-wrap       : wrap;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-4);
}

/* Scroll indicator */
.hero__scroll {
  position       : absolute;
  bottom         : var(--sp-8);
  left           : 50%;
  transform      : translateX(-50%);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : var(--sp-2);
  z-index        : 2;
}
.hero__scroll-word {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 300;
  letter-spacing : 0.18em;
  text-transform : uppercase;
  color          : rgba(253,249,243,0.55);
}
.hero__scroll-track {
  position  : relative;
  width     : 1px; height: 52px;
  background: rgba(253,249,243,0.20);
  overflow  : hidden;
}
.hero__scroll-dot {
  position      : absolute;
  top           : -10px;
  left          : 50%;
  transform     : translateX(-50%);
  width: 1px; height: 10px;
  background    : var(--color-gold-accent);
  border-radius : 1px;
  animation     : scrollDot 2.2s var(--ease-out-expo) infinite;
}
@keyframes scrollDot {
  0%   { top: -10px; opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { top: 54px; opacity: 0; }
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  position        : relative;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  overflow        : hidden;
  height          : 50px;
  padding         : 0 var(--sp-8);
  font-family     : var(--font-body);
  font-size       : var(--text-xs);
  font-weight     : 400;
  letter-spacing  : 0.16em;
  text-transform  : uppercase;
  border-radius   : var(--radius-sm, 2px);
  transition      : transform var(--dur-base) var(--ease-out-expo),
                    box-shadow var(--dur-base) var(--ease-silk);
  white-space     : nowrap;
  cursor          : pointer;
  text-decoration : none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn__label  { position: relative; z-index: 1; }

/* Brushed Silver */
.btn--silver {
  background :
    linear-gradient(138deg,
      var(--color-silver-shadow) 0%, var(--color-silver-hi) 18%,
      var(--color-silver) 36%,        var(--color-silver-hi) 52%,
      var(--color-silver-mid) 68%,    var(--color-silver-hi) 82%,
      var(--color-silver-shadow) 100%);
  color      : var(--color-charcoal);
  border     : 1px solid rgba(255,255,255,0.55);
  box-shadow : var(--shadow-silver),
               inset 0  1px 0 rgba(255,255,255,0.75),
               inset 0 -1px 0 rgba(0,0,0,0.08);
}
.btn--silver:hover {
  transform  : translateY(-2px);
  box-shadow : 0 6px 28px rgba(150,140,130,0.50),
               inset 0 1px 0 rgba(255,255,255,0.80);
}

/* Gold CTA */
.btn--gold {
  background :
    linear-gradient(138deg,
      var(--color-gold-dark) 0%, var(--color-gold-light) 25%,
      var(--color-gold-accent) 50%, var(--color-gold-light) 75%,
      var(--color-gold-dark) 100%);
  color      : var(--color-navy);
  border     : 1px solid rgba(255,255,255,0.40);
  box-shadow : 0 4px 20px rgba(201,168,76,0.35),
               inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn--gold:hover {
  transform  : translateY(-2px);
  box-shadow : 0 6px 28px rgba(201,168,76,0.50);
}

/* Ghost */
.btn--ghost {
  color           : var(--color-cloud-dancer);
  background      : transparent;
  border          : 1px solid rgba(253,249,243,0.42);
  backdrop-filter : blur(4px);
}
.btn--ghost:hover {
  background   : rgba(253,249,243,0.10);
  border-color : rgba(253,249,243,0.68);
  transform    : translateY(-2px);
  box-shadow   : 0 4px 16px rgba(200,190,175,0.20);
}

/* Shine sweep */
.btn__shine {
  position    : absolute;
  top: -50%;  left: -80%;
  width: 50%; height: 200%;
  background  : linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.50) 50%, transparent 80%);
  transform   : skewX(-18deg);
  transition  : left 560ms var(--ease-out-expo);
  pointer-events: none;
}
.btn:hover .btn__shine { left: 140%; }


/* ============================================================
   6. LAYOUT UTILITIES
   ============================================================ */
.container {
  width     : 100%;
  max-width : var(--container-max);
  margin    : 0 auto;
  padding   : 0 var(--container-pad);
}
.container--narrow {
  max-width: 760px;
}

.section {
  padding : var(--sp-20) 0;
}
.section--cream  { background-color: var(--color-cream); }
.section--white  { background-color: var(--color-white); }
.section--sage   { background-color: var(--color-sage-pale); }
.section--navy   { background-color: var(--color-navy); }


/* ============================================================
   7. SECTION HEADER
   ============================================================ */
.section-header {
  text-align    : center;
  margin-bottom : var(--sp-12);
}

/* ESTD Badge */
.estd-badge {
  display     : flex;
  align-items : center;
  justify-content: center;
  gap         : var(--sp-4);
  margin-bottom: var(--sp-4);
}
.estd-badge__rule {
  display    : block;
  width      : 48px; height: 1px;
  background : linear-gradient(90deg, transparent, var(--color-gold-accent) 40%, var(--color-gold-accent) 60%, transparent);
}
.estd-badge--light .estd-badge__rule {
  background : linear-gradient(90deg, transparent, rgba(201,168,76,0.6) 40%, rgba(201,168,76,0.6) 60%, transparent);
}
.estd-badge__text {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  color          : var(--color-charcoal-soft);
}
.estd-badge--light .estd-badge__text { color: rgba(253,249,243,0.75); }
.estd-badge__crest { color: var(--color-gold-accent); }

.section-title {
  font-family   : var(--font-script);
  font-size     : var(--text-section-title);
  font-weight   : 400;
  line-height   : 1.15;
  color         : var(--color-navy);
  margin-bottom : var(--sp-3);
}
.section-title--light { color: var(--color-cloud-dancer); }

.section-subtitle {
  font-family : var(--font-serif);
  font-size   : var(--text-md);
  font-weight : 300;
  color       : var(--color-charcoal-soft);
  line-height : 1.6;
  max-width   : 620px;
  margin      : 0 auto;
}
.section-subtitle--italic { font-style: italic; }
.section-subtitle--light  { color: rgba(253,249,243,0.72); }
.section-subtitle a {
  color           : var(--color-gold-accent);
  text-decoration : none;
  border-bottom   : 1px solid rgba(201,168,76,0.35);
  padding-bottom  : 1px;
  transition      : border-color 0.2s, color 0.2s;
}
.section-subtitle a:hover {
  color        : #b8933a;
  border-color : rgba(201,168,76,0.8);
}

.section-note {
  font-family  : var(--font-serif);
  font-style   : italic;
  font-size    : var(--text-sm);
  color        : var(--color-charcoal-soft);
  text-align   : center;
  max-width    : 700px;
  margin       : var(--sp-8) auto 0;
  line-height  : 1.7;
  opacity      : 0.85;
}
.section-note--top { margin-top: var(--sp-4); margin-bottom: 0; }

.body-serif {
  font-family : var(--font-serif);
  font-size   : var(--text-md);
  font-style  : italic;
  font-weight : 300;
  line-height : 1.75;
  color       : var(--color-charcoal-soft);
}
.body-serif + .body-serif { margin-top: var(--sp-4); }
.body-serif.note {
  font-size : var(--text-sm);
  opacity   : 0.80;
  margin-top: var(--sp-3);
}


/* ============================================================
   8. IMAGE FRAMES
   ============================================================ */
.img-frame {
  overflow      : hidden;
  border-radius : 4px;
  background    : var(--color-cream-border);
  width         : 100%;
  position      : relative;
}
.img-frame img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform var(--dur-slow) var(--ease-silk);
}
.img-frame:hover img { transform: scale(1.03); }

.img-frame--tall     { min-height: 420px; }
.img-frame--medium   { min-height: 220px; }
.img-frame--square   { min-height: 180px; }
.img-frame--landscape{ min-height: 200px; }
.img-frame--map      { min-height: 180px; }

/* Photo strip */
.photo-strip {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : var(--sp-3);
  margin-bottom         : var(--sp-10);
}
.photo-strip--col { grid-template-columns: repeat(3, 1fr); }


/* ============================================================
   9. PRICING CARDS
   ============================================================ */
.cards-grid {
  display : grid;
  gap     : var(--sp-6);
}
.cards-grid--3 {
  grid-template-columns : repeat(3, 1fr);
}

.price-card {
  background    : var(--color-white);
  border        : 1px solid var(--color-cream-border);
  border-radius : 4px;
  padding       : var(--sp-8) var(--sp-6);
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-3);
  box-shadow    : var(--shadow-card);
  transition    : transform var(--dur-base) var(--ease-out-expo),
                  box-shadow var(--dur-base) var(--ease-silk),
                  opacity    var(--dur-slow) var(--ease-out-expo);
  opacity       : 0;
  transform     : translateY(20px);
}
.price-card.in-view {
  opacity   : 1;
  transform : translateY(0);
}
.price-card:hover {
  transform  : translateY(-4px);
  box-shadow : var(--shadow-md);
}

/* Featured card — gold border accent */
.price-card--featured {
  border-color   : var(--color-gold-accent);
  border-width   : 1.5px;
  box-shadow     : 0 4px 24px rgba(201,168,76,0.18);
  position       : relative;
}
.price-card--featured::before {
  content    : 'Most Popular';
  position   : absolute;
  top        : -1px; left: 50%;
  transform  : translateX(-50%);
  background : var(--color-gold-accent);
  color      : var(--color-navy);
  font-family: var(--font-body);
  font-size  : 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding    : 3px 12px;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
}

.price-card__name {
  font-family   : var(--font-script);
  font-size     : 1.75rem;
  font-weight   : 400;
  color         : var(--color-navy);
  line-height   : 1.2;
}
.price-card__sub {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-charcoal-soft);
  opacity        : 0.70;
}
.price-card__availability {
  display         : inline-flex;
  align-items     : center;
  gap             : 0;
  margin-top      : var(--sp-2);
  border-radius   : 3px;
  overflow        : hidden;
  border          : 1px solid var(--color-sage);
  font-family     : var(--font-body);
  font-size       : var(--text-xs);
  letter-spacing  : 0.09em;
  text-transform  : uppercase;
}
.avail-label {
  background  : var(--color-sage);
  color       : #fff;
  font-weight : 700;
  padding     : 3px 8px;
  white-space : nowrap;
}
.avail-days {
  color       : var(--color-sage);
  font-weight : 400;
  padding     : 3px 10px;
  white-space : nowrap;
}
.price-card__tag {
  font-family : var(--font-serif);
  font-style  : italic;
  font-size   : var(--text-sm);
  color       : var(--color-sage-dark);
}
.price-card__rule {
  border     : none;
  border-top : 1px solid var(--color-cream-border);
  margin     : var(--sp-1) 0;
}
.price-card__features {
  flex          : 1;
  font-family   : var(--font-serif);
  font-size     : var(--text-sm);
  font-weight   : 300;
  line-height   : 1.8;
  color         : var(--color-charcoal-soft);
}
.price-card__features li {
  padding-left : var(--sp-4);
  position     : relative;
}
.price-card__features li::before {
  content    : '—';
  position   : absolute;
  left       : 0;
  color      : var(--color-gold-accent);
  font-size  : 0.65em;
  top        : 0.35em;
}
.price-card__features .feature--indent { padding-left: var(--sp-8); }
.price-card__features .feature--indent::before { left: var(--sp-4); }
.price-card__features .feature--highlight {
  font-weight    : 600;
  color          : var(--color-sage-dark);
  font-style     : italic;
  font-family    : var(--font-serif);
  padding-left   : 0;
}
.price-card__features .feature--highlight::before { display: none; }

.price-card__price {
  font-family   : var(--font-serif);
  font-size     : var(--text-2xl);
  font-weight   : 500;
  color         : var(--color-navy);
  margin-top    : var(--sp-2);
  line-height   : 1.2;
}
.price-card__price--sm { font-size: var(--text-md); color: var(--color-charcoal-soft); }
.price-card__tax {
  font-size   : var(--text-sm);
  font-weight : 300;
  font-style  : italic;
  color       : var(--color-charcoal-soft);
}
.price-card__deposit {
  font-family : var(--font-body);
  font-size   : var(--text-xs);
  letter-spacing: 0.08em;
  color       : var(--color-charcoal-soft);
  opacity     : 0.70;
}
.price-card__included-note {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-style     : italic;
  color          : var(--color-sage);
  margin-top     : var(--sp-1);
  padding-top    : var(--sp-2);
  border-top     : 1px solid rgba(143,175,143,0.3);
}


/* ============================================================
   9b. SECTION WATERCOLOR ACCENT
   ============================================================ */
.section--sage {
  position   : relative;
  overflow   : hidden;
}
.section--sage::before {
  content            : '';
  position           : absolute;
  top: 0; right: 0;
  width              : 340px;
  height             : 340px;
  background-image   : url('images/venue-01.png');
  background-size    : cover;
  opacity            : 0.35;
  pointer-events     : none;
  border-radius      : 0 0 0 100%;
}
.section--sage::after {
  content            : '';
  position           : absolute;
  bottom: 0; left: 0;
  width              : 260px;
  height             : 260px;
  background-image   : url('images/venue-25.png');
  background-size    : cover;
  opacity            : 0.30;
  pointer-events     : none;
  border-radius      : 0 100% 0 0;
}

/* ============================================================
   10. ABOUT SECTION
   ============================================================ */
.about-layout {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-12);
  align-items           : start;
}
.about-text {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-5);
}
.about-stats {
  display     : flex;
  align-items : center;
  gap         : var(--sp-6);
  padding     : var(--sp-6) 0;
  border-top  : 1px solid var(--color-cream-border);
  margin-top  : var(--sp-4);
}
.stat {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  flex           : 1;
  opacity        : 0;
  transform      : translateY(16px);
  transition     : opacity var(--dur-slow) var(--ease-out-expo),
                   transform var(--dur-slow) var(--ease-out-expo);
}
.stat.in-view { opacity: 1; transform: translateY(0); }
.stat__num {
  font-family    : var(--font-serif);
  font-size      : var(--text-3xl);
  font-weight    : 500;
  color          : var(--color-navy);
  line-height    : 1;
}
.stat__label {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : var(--color-charcoal-soft);
  opacity        : 0.70;
  margin-top     : var(--sp-1);
}
.stat__divider {
  width      : 1px;
  height     : 48px;
  background : var(--color-cream-border);
  flex-shrink: 0;
}
.about-image { position: relative; }
.about-image-caption {
  font-family    : var(--font-serif);
  font-style     : italic;
  font-size      : var(--text-sm);
  color          : var(--color-charcoal-soft);
  opacity        : 0.65;
  text-align     : center;
  margin-top     : var(--sp-3);
}


/* ============================================================
   11. SPACES SECTION
   ============================================================ */
.spaces-grid {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : var(--sp-8);
}
.space-card {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-5);
  opacity        : 0;
  transform      : translateY(20px);
  transition     : opacity var(--dur-slow) var(--ease-out-expo),
                   transform var(--dur-slow) var(--ease-out-expo);
}
.space-card.in-view { opacity: 1; transform: translateY(0); }
.space-card__body {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-3);
}
.space-card__title {
  font-family   : var(--font-script);
  font-size     : 2rem;
  font-weight   : 400;
  color         : var(--color-navy);
  line-height   : 1.2;
}


/* ============================================================
   12. HALL ITINERARY BLOCK
   ============================================================ */
.itinerary-block {
  margin-top    : var(--sp-12);
  padding       : var(--sp-8);
  background    : var(--color-cream);
  border        : 1px solid var(--color-cream-border);
  border-radius : 4px;
}
.itinerary-block__title {
  font-family   : var(--font-script);
  font-size     : 1.8rem;
  color         : var(--color-navy);
  margin-bottom : var(--sp-6);
  text-align    : center;
}
.itinerary-cols {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-8);
  margin-bottom         : var(--sp-6);
}
.itinerary-col h4 {
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-navy);
  margin-bottom  : var(--sp-3);
}
.itinerary-col ul {
  font-family : var(--font-serif);
  font-size   : var(--text-sm);
  line-height : 2;
  color       : var(--color-charcoal-soft);
}
.itinerary-col li { padding-left: var(--sp-4); position: relative; }
.itinerary-col li::before {
  content  : '·';
  position : absolute;
  left     : 0;
  color    : var(--color-gold-accent);
}
.itinerary-note {
  font-family : var(--font-serif);
  font-style  : italic;
  font-size   : var(--text-sm);
  color       : var(--color-charcoal-soft);
  opacity     : 0.75;
  margin-top  : var(--sp-4);
  line-height : 1.65;
}
.itinerary-options {
  border-top  : 1px solid var(--color-cream-border);
  padding-top : var(--sp-6);
  font-family : var(--font-serif);
  font-size   : var(--text-sm);
  color       : var(--color-charcoal-soft);
}
.itinerary-options p { margin-bottom: var(--sp-2); }
.inline-list {
  display   : flex;
  flex-wrap : wrap;
  gap       : var(--sp-4);
  margin    : var(--sp-2) 0;
}
.inline-list li {
  font-style  : italic;
  padding-left: var(--sp-4);
  position    : relative;
}
.inline-list li::before {
  content  : '✦';
  position : absolute;
  left     : 0;
  font-size: 0.5em;
  top      : 0.45em;
  color    : var(--color-gold-accent);
}
.note {
  font-style  : italic;
  font-size   : var(--text-sm);
  opacity     : 0.75;
}
.feature-heading {
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-navy);
  margin-top     : var(--sp-6);
  margin-bottom  : var(--sp-3);
}
.feature-list {
  font-family : var(--font-serif);
  font-size   : var(--text-sm);
  line-height : 2;
  color       : var(--color-charcoal-soft);
}
.feature-list li { padding-left: var(--sp-5); position: relative; }
.feature-list li::before {
  content  : '—';
  position : absolute; left: 0;
  color    : var(--color-gold-accent);
  font-size: 0.65em; top: 0.4em;
}


/* ============================================================
   13. ADD-ONS BLOCK
   ============================================================ */
.addons-block {
  margin-top    : var(--sp-10);
  padding       : var(--sp-8);
  background    : var(--color-white);
  border        : 1px solid var(--color-cream-border);
  border-radius : 4px;
}
.addons-block__title {
  font-family   : var(--font-script);
  font-size     : 1.8rem;
  color         : var(--color-navy);
  margin-bottom : var(--sp-3);
}
.addons-list {
  margin-top : var(--sp-5);
  display    : flex;
  flex-direction: column;
  gap        : var(--sp-2);
}
.addons-list li {
  display         : flex;
  justify-content : space-between;
  align-items     : baseline;
  gap             : var(--sp-4);
  padding         : var(--sp-3) 0;
  border-bottom   : 1px solid var(--color-cream-border);
  font-family     : var(--font-serif);
  font-size       : var(--text-sm);
  color           : var(--color-charcoal-soft);
}
.addons-list li:last-child { border-bottom: none; }
.addon-item { flex: 1; font-style: italic; }
.addon-price {
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  font-weight    : 700;
  color          : var(--color-navy);
  white-space    : nowrap;
}


/* ============================================================
   14. BRIDAL PREP LAYOUT
   ============================================================ */
.bridal-layout {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-12);
  align-items           : start;
}
.bridal-highlight {
  background    : var(--color-sage-pale);
  border-left   : 3px solid var(--color-sage);
  padding       : var(--sp-5) var(--sp-6);
  border-radius : 0 4px 4px 0;
  margin        : var(--sp-6) 0;
  opacity       : 0;
  transform     : translateX(-12px);
  transition    : opacity var(--dur-slow) var(--ease-out-expo),
                  transform var(--dur-slow) var(--ease-out-expo);
}
.bridal-highlight.in-view { opacity: 1; transform: translateX(0); }
.bridal-highlight h4 {
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-sage-dark);
  margin-bottom  : var(--sp-2);
}
.bridal-photos {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  grid-template-rows    : auto auto;
  gap                   : var(--sp-3);
}
.bridal-photos .img-placeholder--tall {
  grid-column : 1 / -1;
  min-height  : 240px;
}
.bridal-coming-soon {
  grid-column     : 1 / -1;
  border          : 1px solid rgba(143,175,143,0.4);
  border-radius   : 4px;
  padding         : var(--sp-10) var(--sp-6);
  background      : linear-gradient(160deg, rgba(248,246,241,0.6) 0%, rgba(197,213,197,0.15) 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-height      : 280px;
}
.bridal-coming-soon__inner {
  text-align : center;
  display    : flex;
  flex-direction : column;
  align-items    : center;
  gap            : var(--sp-3);
}
.bridal-coming-soon__rule {
  display          : block;
  width            : 60px;
  height           : 1px;
  background       : linear-gradient(90deg, transparent, var(--color-gold-accent), transparent);
}
.bridal-coming-soon__label {
  font-size   : 1.1rem;
  color       : var(--color-gold-accent);
  margin      : 0;
  opacity     : 0.8;
}
.bridal-coming-soon__text {
  font-family    : var(--font-serif);
  font-size      : clamp(1.4rem, 3vw, 2rem);
  font-weight    : 300;
  font-style     : italic;
  letter-spacing : 0.06em;
  color          : var(--color-charcoal);
  margin         : 0;
}
.bridal-coming-soon__sub {
  font-family : var(--font-body);
  font-size   : var(--text-sm);
  color       : var(--color-charcoal);
  opacity     : 0.55;
  max-width   : 280px;
  line-height : 1.6;
  margin      : 0;
}


/* ============================================================
   15. INCLUSIONS LAYOUT
   ============================================================ */
.inclusions-layout {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-12);
  align-items           : start;
}
.inclusion-group {
  margin-bottom : var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom : 1px solid var(--color-sage-light);
}
.inclusion-group:last-child { border-bottom: none; margin-bottom: 0; }
.inclusion-group__title {
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-navy);
  margin-bottom  : var(--sp-3);
}
.inclusion-group__note {
  font-family : var(--font-serif);
  font-size   : var(--text-md);
  font-style  : italic;
  color       : var(--color-charcoal);
  opacity     : 0.80;
  margin-top  : var(--sp-3);
}
.inclusion-group__note a {
  color           : var(--color-gold-accent);
  text-decoration : none;
  border-bottom   : 1px solid rgba(201,168,76,0.35);
  padding-bottom  : 1px;
  transition      : border-color 0.2s, color 0.2s;
}
.inclusion-group__note a:hover {
  color        : #b8933a;
  border-color : rgba(201,168,76,0.8);
}
.inclusions-photos {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-3);
}


/* ============================================================
   16. QUIZ / PACKAGE FINDER
   ============================================================ */
.quiz-block {
  background    : var(--color-white);
  border        : 1px solid var(--color-cream-border);
  border-radius : 4px;
  padding       : var(--sp-8);
}
.quiz-list {
  display        : flex;
  flex-direction : column;
  counter-reset  : quiz;
}
.quiz-item {
  display         : flex;
  align-items     : baseline;
  justify-content : space-between;
  gap             : var(--sp-6);
  padding         : var(--sp-5) 0;
  border-bottom   : 1px solid var(--color-cream-border);
  opacity         : 0;
  transform       : translateX(-10px);
  transition      : opacity var(--dur-slow) var(--ease-out-expo),
                    transform var(--dur-slow) var(--ease-out-expo);
}
.quiz-item.in-view { opacity: 1; transform: translateX(0); }
.quiz-item:last-child { border-bottom: none; }
.quiz-q {
  font-family : var(--font-serif);
  font-style  : italic;
  font-size   : var(--text-md);
  color       : var(--color-charcoal-soft);
  flex        : 1;
}
.quiz-a {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.10em;
  color          : var(--color-navy);
  text-align     : right;
  flex-shrink    : 0;
  max-width      : 240px;
}
.quiz-cta {
  margin-top      : var(--sp-8);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : var(--sp-5);
  padding-top     : var(--sp-6);
  border-top      : 1px solid var(--color-cream-border);
  text-align      : center;
}


/* ============================================================
   17. PARKING / LOCATION
   ============================================================ */
.parking-layout {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-12);
  align-items           : start;
}
.parking-list {
  margin        : var(--sp-5) 0;
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-4);
}
.parking-list li {
  display    : flex;
  align-items: flex-start;
  gap        : var(--sp-3);
  font-family: var(--font-serif);
  font-size  : var(--text-sm);
  line-height: 1.6;
  color      : var(--color-charcoal-soft);
}
.parking-icon {
  font-family    : var(--font-body);
  font-weight    : 700;
  font-size      : var(--text-sm);
  color          : var(--color-sage-dark);
  background     : var(--color-sage-pale);
  width          : 28px; height: 28px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  flex-shrink    : 0;
}
.parking-maps {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--sp-3);
  margin-top            : var(--sp-5);
}
.parking-photos {
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-4);
}
.parking-photo {
  opacity       : 0;
  transform     : translateY(16px);
  transition    : opacity var(--dur-slow) var(--ease-out-expo),
                  transform var(--dur-slow) var(--ease-out-expo);
}
.parking-photo.in-view { opacity: 1; transform: translateY(0); }
.parking-photo figcaption {
  font-family  : var(--font-serif);
  font-style   : italic;
  font-size    : var(--text-sm);
  color        : var(--color-charcoal-soft);
  opacity      : 0.65;
  text-align   : center;
  margin-top   : var(--sp-2);
}


/* ============================================================
   18. INQUIRY FORM
   ============================================================ */
.inquiry-form {
  margin-top : var(--sp-8);
}
.form-row {
  display : grid;
  gap     : var(--sp-5);
}
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-2);
  margin-bottom  : var(--sp-5);
}
.form-field label {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 400;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : rgba(253,249,243,0.65);
}
.form-field input,
.form-field select,
.form-field textarea {
  background      : rgba(255,255,255,0.06);
  border          : 1px solid rgba(253,249,243,0.20);
  border-radius   : 3px;
  padding         : var(--sp-3) var(--sp-4);
  font-family     : var(--font-serif);
  font-size       : var(--text-md);
  font-style      : italic;
  font-weight     : 300;
  color           : var(--color-cloud-dancer);
  transition      : border-color var(--dur-fast), background var(--dur-fast);
  width           : 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color   : rgba(253,249,243,0.35);
  opacity : 1;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline      : none;
  border-color : var(--color-gold-accent);
  background   : rgba(255,255,255,0.10);
}
.form-field select { color: rgba(253,249,243,0.75); }
.form-field select option { color: var(--color-charcoal); background: white; }

/* Event type tiles */
.event-tiles {
  display   : flex;
  flex-wrap : wrap;
  gap       : var(--sp-3);
}
.tile {
  display        : flex;
  align-items    : center;
  gap            : var(--sp-2);
  padding        : var(--sp-2) var(--sp-4);
  border         : 1px solid rgba(253,249,243,0.25);
  border-radius  : 3px;
  cursor         : pointer;
  font-family    : var(--font-body);
  font-size      : var(--text-sm);
  letter-spacing : 0.06em;
  color          : rgba(253,249,243,0.75);
  transition     : border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.tile:has(input:checked) {
  background   : var(--color-gold-accent);
  border-color : var(--color-gold-accent);
  color        : var(--color-navy);
  font-weight  : 700;
}
.tile input { display: none; }

.form-submit {
  text-align  : center;
  margin-top  : var(--sp-4);
}

/* Form success */
.form-success {
  text-align     : center;
  padding        : var(--sp-12) var(--sp-8);
  color          : var(--color-cloud-dancer);
}
.form-success__icon {
  font-size     : 2rem;
  color         : var(--color-gold-accent);
  margin-bottom : var(--sp-4);
}
.form-success h3 {
  font-family   : var(--font-script);
  font-size     : 2.5rem;
  color         : var(--color-cloud-dancer);
  margin-bottom : var(--sp-3);
}
.form-success p {
  font-family : var(--font-serif);
  font-style  : italic;
  font-size   : var(--text-md);
  opacity     : 0.80;
}

/* Form error fallback */
.form-error {
  padding    : var(--sp-8);
  color      : var(--color-cloud-dancer);
  text-align : center;
}
.form-error__icon {
  font-size     : 2rem;
  color         : var(--color-gold-accent);
  margin-bottom : var(--sp-4);
}
.form-error h3 {
  font-family   : var(--font-script);
  font-size     : 2.5rem;
  color         : var(--color-cloud-dancer);
  margin-bottom : var(--sp-3);
}
.form-error p {
  font-family   : var(--font-serif);
  font-style    : italic;
  font-size     : var(--text-md);
  opacity       : 0.80;
  margin-bottom : var(--sp-4);
}
.form-error p a {
  color           : var(--color-gold-accent);
  text-decoration : none;
  border-bottom   : 1px solid rgba(201,168,76,0.4);
}
.form-error__copy {
  width         : 100%;
  background    : rgba(255,255,255,0.07);
  border        : 1px solid rgba(255,255,255,0.15);
  border-radius : 4px;
  color         : var(--color-cloud-dancer);
  font-family   : monospace;
  font-size     : var(--text-sm);
  line-height   : 1.7;
  padding       : var(--sp-4);
  resize        : none;
  margin-bottom : var(--sp-4);
  text-align    : left;
}


/* ============================================================
   19. FOOTER
   ============================================================ */
.footer {
  background-color : var(--color-charcoal);
  color            : rgba(253,249,243,0.65);
  padding          : var(--sp-12) 0 var(--sp-6);
}
.footer__top {
  display               : grid;
  grid-template-columns : 2fr 1fr 1fr 1.5fr;
  gap                   : var(--sp-8);
  padding-bottom        : var(--sp-8);
  border-bottom         : 1px solid rgba(255,255,255,0.08);
  margin-bottom         : var(--sp-6);
}
.footer__logo {
  display      : block;
  font-family  : var(--font-script);
  font-size    : 2.4rem;
  color        : var(--color-cloud-dancer);
  line-height  : 1;
  margin-bottom: var(--sp-3);
}
.footer__tagline {
  font-family : var(--font-body);
  font-size   : var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.footer__estd {
  font-family  : var(--font-serif);
  font-style   : italic;
  font-size    : var(--text-sm);
  margin-top   : var(--sp-2);
  color        : var(--color-gold-accent);
  opacity      : 0.75;
}
.footer__links h4,
.footer__contact h4 {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 700;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  color          : var(--color-cloud-dancer);
  margin-bottom  : var(--sp-4);
}
.footer__links ul {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-2);
}
.footer__links a {
  font-family : var(--font-serif);
  font-size   : var(--text-sm);
  font-style  : italic;
  transition  : color var(--dur-fast);
}
.footer__links a:hover { color: var(--color-gold-accent); }
.footer__contact p {
  font-family  : var(--font-serif);
  font-size    : var(--text-sm);
  line-height  : 1.8;
  margin-bottom: var(--sp-2);
}
.footer__contact a:hover { color: var(--color-gold-accent); }
.footer__bottom {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : var(--sp-4);
}
.footer__bottom p {
  font-family : var(--font-body);
  font-size   : var(--text-xs);
  letter-spacing: 0.06em;
  opacity     : 0.50;
}
.footer__social {
  display : flex;
  gap     : var(--sp-4);
}
.footer__social a {
  font-family    : var(--font-body);
  font-size      : var(--text-xs);
  font-weight    : 700;
  letter-spacing : 0.12em;
  color          : rgba(253,249,243,0.40);
  transition     : color var(--dur-fast);
}
.footer__social a:hover { color: var(--color-gold-accent); }


/* ============================================================
   20. ENTRANCE ANIMATIONS
   ============================================================ */
.fade-up {
  opacity         : 0;
  transform       : translateY(28px);
  transition      : opacity var(--dur-enter) var(--ease-out-expo),
                    transform var(--dur-enter) var(--ease-out-expo);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }


/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cards-grid--3       { grid-template-columns: 1fr 1fr; }
  .spaces-grid         { grid-template-columns: 1fr 1fr; }
  .footer__top         { grid-template-columns: 1fr 1fr; }
  .itinerary-cols      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-height: var(--nav-mob); }

  .nav__hamburger { display: flex; }
  .nav__links {
    position     : fixed;
    top          : var(--nav-mob);
    left: 0; right: 0;
    flex-direction: column;
    align-items  : center;
    gap          : 0;
    background   : rgba(253,249,243,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-cream-border);
    padding      : var(--sp-4) 0;
    transform    : translateY(-110%);
    opacity      : 0;
    transition   : transform var(--dur-slow) var(--ease-out-expo),
                   opacity   var(--dur-slow) var(--ease-silk);
    pointer-events: none;
  }
  .nav__links--open {
    transform     : translateY(0);
    opacity       : 1;
    pointer-events: auto;
  }
  .nav__links li { width: 100%; }
  .nav__link {
    display        : block;
    padding        : var(--sp-4) var(--sp-8);
    color          : var(--color-charcoal-soft);
    text-align     : center;
  }
  .nav__link::after { display: none; }

  .hero__content       { padding-top: var(--sp-24); }
  .hero__actions       { flex-direction: column; width: 100%; max-width: 280px; }
  .btn                 { width: 100%; }
  .hero__wash--bl      { width: 280px; height: 220px; }
  .hero__wash--tr      { width: 240px; height: 200px; }

  .photo-strip         { grid-template-columns: 1fr; }
  .cards-grid--3       { grid-template-columns: 1fr; }
  .spaces-grid         { grid-template-columns: 1fr; }
  .about-layout        { grid-template-columns: 1fr; }
  .bridal-layout       { grid-template-columns: 1fr; }
  .inclusions-layout   { grid-template-columns: 1fr; }
  .parking-layout      { grid-template-columns: 1fr; }
  .footer__top         { grid-template-columns: 1fr 1fr; }
  .form-row--2         { grid-template-columns: 1fr; }
  .form-row--3         { grid-template-columns: 1fr; }
  .quiz-item           { flex-direction: column; gap: var(--sp-2); }
  .quiz-a              { text-align: left; max-width: 100%; }
}

@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; }
  .hero__badge-rule { width: 28px; }
  .parking-maps { grid-template-columns: 1fr; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .fade-up, .price-card, .space-card, .stat,
  .quiz-item, .parking-photo, .bridal-highlight {
    opacity: 1; transform: none; transition: none;
  }
}