/* ===========================================================
   Saray Banqueting Suite — Shared Stylesheet
   =========================================================== */
:root {
  --plum: #3b1450;
  --plum-deep: #25092f;
  --plum-soft: #5a2a72;
  --gold: #c9a24b;
  --gold-light: #e7cf8f;
  --cream: #f7f1e8;
  --ink: #1c0f24;
  --muted: #6b5a72;
  --white: #ffffff;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 600; line-height: 1.15;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 140, "SOFT" 0, "WONK" 0;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1rem;
  display: inline-block;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  background: transparent;
  cursor: pointer;
  transition: all 0.45s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.btn:hover { color: var(--plum-deep); }
.btn:hover::before { transform: scaleX(1); }
.btn--solid { background: var(--gold); color: var(--plum-deep); }
.btn--solid:hover { color: var(--gold-light); }
.btn--solid::before { background: var(--plum-deep); }
.btn--dark { border-color: var(--plum); color: var(--plum); }
.btn--dark::before { background: var(--plum); }
.btn--dark:hover { color: var(--cream); }

/* ---------- NAV ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.4rem 0;
  transition: all 0.4s ease;
}
header.scrolled, header.solid {
  background: rgba(37, 9, 47, 0.94);
  backdrop-filter: blur(12px);
  padding: 0.9rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 62px; width: auto; display: block; transition: height 0.4s ease; }
header.scrolled .brand img, header.solid .brand img { height: 52px; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  color: var(--cream); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.35s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--gold-light); }

/* dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::before {
  content: '▾'; font-size: 0.7em; margin-left: 0.35em; color: var(--gold);
  display: inline-block; vertical-align: middle;
}
.dropdown {
  list-style: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 250px; background: rgba(37,9,47,0.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(201,162,75,0.25); border-radius: 6px; padding: 0.6rem 0;
  box-shadow: 0 18px 44px rgba(0,0,0,0.4); opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease; z-index: 120;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown li { display: block; }
.dropdown a {
  display: block; padding: 0.7rem 1.4rem; font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream); transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a:hover, .dropdown a.active { background: rgba(201,162,75,0.14); color: var(--gold-light); }
.nav-cta { padding: 0.7rem 1.6rem; font-size: 0.7rem; }
.menu-toggle { display: none; background: none; border: none; color: var(--cream); font-size: 1.5rem; cursor: pointer; }

/* ---------- HERO (home) ---------- */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative;
  background:
    linear-gradient(rgba(28,9,38,0.78), rgba(37,9,47,0.88)),
    url('images/photo-1519167758481-83f550bb49b3.jpg') center/cover;
  color: var(--cream);
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(201,162,75,0.18), transparent 55%);
  pointer-events: none;
}
/* background video */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(28,9,38,0.72), rgba(37,9,47,0.86));
}
.hero-inner { max-width: 1200px; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); margin: 0.6rem 0 1.4rem; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero p { font-size: 1.15rem; font-weight: 300; max-width: 540px; color: #ece3f1; margin-bottom: 2.4rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: var(--gold-light); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  z-index: 2; animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,10px);} }

/* ---------- PAGE BANNER (inner pages) ---------- */
.page-banner {
  min-height: 56vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative; color: var(--cream);
  background-size: cover; background-position: center;
}
.page-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(28,9,38,0.74), rgba(37,9,47,0.86)); }
.page-banner .inner { position: relative; z-index: 2; padding-top: 4rem; }
.page-banner h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.page-banner h1 em { font-style: normal; color: var(--gold-light); }
.crumb { margin-top: 1rem; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: #d7c8e0; }
.crumb a { color: var(--gold-light); }

/* slim variant for inner pages — title only, no hero weight */
.page-banner--slim { min-height: 34vh; }
.page-banner--slim h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }

/* ---------- SECTION SHELL ---------- */
section { padding: 7rem 0; }
.section-head { max-width: 680px; margin: 0 auto 3.5rem; text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--plum); margin-bottom: 1rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.divider { width: 60px; height: 2px; background: var(--gold); margin: 1.4rem auto; }

/* split variant — left-aligned title with copy alongside, breaks the centered-stack rhythm */
.section-head--split {
  max-width: none; text-align: left;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: end;
}
.section-head--split .divider { margin: 1.4rem 0 0; }
.section-head--split p { margin: 0; padding-bottom: 0.3rem; }

/* ---------- INTRO / ABOUT ---------- */
.intro { background: var(--white); }
.intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4.5rem; align-items: center; }
.intro-text h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--plum); margin-bottom: 1.4rem; }
.intro-text p { color: var(--muted); margin-bottom: 1.2rem; font-weight: 300; font-size: 1.05rem; }
.intro-media { position: relative; }
.intro-media img { border-radius: 4px; box-shadow: 0 30px 60px rgba(59,20,80,0.25); }
.intro-media .badge {
  position: absolute; bottom: -28px; left: -28px;
  background: var(--plum); color: var(--gold-light); padding: 1.6rem 1.8rem;
  border-radius: 4px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.intro-media .badge strong { font-family: var(--serif); font-size: 2.4rem; display: block; color: var(--gold); }
.intro-media .badge span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- FEATURE STRIP ---------- */
.features { background: linear-gradient(160deg, var(--plum-deep), var(--plum)); color: var(--cream); }
.features .section-head h2 { color: var(--cream); }
.features .section-head p { color: #d7c8e0; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.feature-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,75,0.25);
  padding: 2.4rem 1.6rem; text-align: center; border-radius: 4px;
  transition: transform 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.feature-card:hover { transform: translateY(-10px); background: rgba(201,162,75,0.1); border-color: var(--gold); }
.feature-card .icon {
  width: 64px; height: 64px; margin: 0 auto 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(201,162,75,0.45);
  background: rgba(201,162,75,0.07); color: var(--gold);
  transition: background 0.4s ease, transform 0.4s ease;
}
.feature-card:hover .icon { background: rgba(201,162,75,0.16); transform: translateY(-2px); }
.feature-card .icon svg { width: 30px; height: 30px; }
.feature-card h4 { font-size: 1.4rem; color: var(--gold-light); margin-bottom: 0.6rem; }
.feature-card p { font-size: 0.92rem; color: #d7c8e0; font-weight: 300; }

/* light variant — lets a page alternate dark/light section rhythm */
.features--light { background: var(--white); color: var(--ink); }
.features--light .section-head h2 { color: var(--plum); }
.features--light .section-head p { color: var(--muted); }
.features--light .feature-card { background: var(--cream); border-color: rgba(201,162,75,0.35); }
.features--light .feature-card:hover { background: rgba(201,162,75,0.12); }
.features--light .feature-card h4 { color: var(--plum); }
.features--light .feature-card p { color: var(--muted); }

/* ---------- SERVICES ---------- */
.services { background: var(--cream); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.service-card {
  background: var(--white); border-radius: 4px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(59,20,80,0.08);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  border-bottom: 3px solid transparent;
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(59,20,80,0.18); border-bottom-color: var(--gold); }
.service-card .thumb { height: 210px; overflow: hidden; }
.service-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.service-card:hover .thumb img { transform: scale(1.08); }
.service-card .body { padding: 1.8rem; flex-grow: 1; display: flex; flex-direction: column; }
.service-card h3 { font-size: 1.5rem; color: var(--plum); margin-bottom: 0.6rem; }
.service-card p { color: var(--muted); font-size: 0.95rem; font-weight: 300; flex-grow: 1; }
.service-card .more { margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

/* ---------- GALLERY ---------- */
.gallery { background: var(--white); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 1rem; }
.gallery-grid figure { overflow: hidden; border-radius: 3px; position: relative; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.gallery-grid figure:hover img { transform: scale(1.1); }
.gallery-grid figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(transparent, rgba(37,9,47,0.45));
  opacity: 0; transition: opacity 0.4s ease;
}
.gallery-grid figure:hover::after { opacity: 1; }
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }

/* ---------- PACKAGES ---------- */
.packages { background: linear-gradient(160deg, var(--plum), var(--plum-deep)); color: var(--cream); }
.packages .section-head h2 { color: var(--cream); }
.packages .section-head p { color: #d7c8e0; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: stretch; }
.pkg {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,75,0.3);
  border-radius: 6px; padding: 2.6rem 2rem; display: flex; flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pkg:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,0.35); }
.pkg.featured { background: rgba(201,162,75,0.12); border-color: var(--gold); position: relative; }
.pkg.featured .tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--plum-deep); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.4rem 1.1rem; border-radius: 20px; font-weight: 600;
}
.pkg h3 { font-size: 1.9rem; color: var(--gold-light); margin-bottom: 0.2rem; }
.pkg .price { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #d7c8e0; margin-bottom: 0.3rem; }
.pkg .pkg-amount { font-family: var(--serif); font-size: 2.8rem; color: var(--gold); line-height: 1; margin-bottom: 1.4rem; }
.pkg-note {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2rem; padding: 1.6rem 2rem; border-radius: 6px;
  background: rgba(201,162,75,0.1); border: 1px solid rgba(201,162,75,0.35);
}
.pkg-note .pkg-note-label { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); display: block; margin-bottom: 0.2rem; }
.pkg-note p { font-size: 0.92rem; color: #d7c8e0; font-weight: 300; }
.pkg-note .pkg-note-price { font-family: var(--serif); font-size: 1.9rem; color: var(--gold); white-space: nowrap; }
.pkg ul { list-style: none; margin-bottom: 2rem; flex-grow: 1; }
.pkg li { font-size: 0.92rem; color: #e3d8ea; font-weight: 300; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.pkg li::before { content: '✦'; color: var(--gold); margin-right: 0.7rem; font-size: 0.7rem; }
.pkg .btn { width: 100%; text-align: center; }

/* ---------- PROCESS STEPS ---------- */
.process { background: var(--cream); }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.step { text-align: center; padding: 2rem; }
.step .num { font-family: var(--serif); font-size: 3rem; color: var(--gold); display: block; margin-bottom: 0.6rem; }
.step h4 { font-size: 1.5rem; color: var(--plum); margin-bottom: 0.6rem; }
.step p { color: var(--muted); font-weight: 300; font-size: 0.96rem; }

/* ---------- TESTIMONIALS ---------- */
.testimonials { background: var(--cream); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.quote {
  background: var(--white); padding: 2.4rem; border-radius: 4px;
  box-shadow: 0 12px 40px rgba(59,20,80,0.08); position: relative;
}
.quote .mark { font-family: var(--serif); font-size: 4rem; color: var(--gold-light); line-height: 0.5; position: absolute; top: 1.8rem; left: 1.6rem; opacity: 0.6; }
.quote p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--plum); margin: 1.6rem 0 1.4rem; position: relative; z-index: 1; }
.stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 0.8rem; }
.quote .who { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- CTA BANNER ---------- */
.cta {
  background:
    linear-gradient(rgba(37,9,47,0.9), rgba(37,9,47,0.92)),
    url('images/photo-1464366400600-7168b8af9bc3.jpg') center/cover fixed;
  color: var(--cream); text-align: center;
}
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--cream); margin-bottom: 1.2rem; }
.cta h2 em { color: var(--gold-light); font-style: normal; }
.cta p { color: #e3d8ea; max-width: 560px; margin: 0 auto 2.4rem; font-weight: 300; font-size: 1.1rem; }

/* ---------- CONTACT PAGE ---------- */
.contact-wrap { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.contact-form { background: var(--cream); padding: 2.6rem; border-radius: 6px; }
.contact-form h3 { color: var(--plum); font-size: 1.8rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid #ddd2e0; border-radius: 4px;
  font-family: var(--sans); font-size: 0.95rem; background: var(--white); color: var(--ink);
  transition: border-color 0.3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 120px; }
.field-error { display: block; margin-top: 0.35rem; color: #b3261e; font-size: 0.8rem; }
.form-alert { padding: 0.9rem 1.1rem; border-radius: 4px; margin-bottom: 1.4rem; font-size: 0.92rem; }
.form-alert--success { background: rgba(201,162,75,0.14); border: 1px solid var(--gold); color: var(--plum); }
.form-alert--error { background: rgba(179,38,30,0.08); border: 1px solid #b3261e; color: #b3261e; }
.loc-cards { display: flex; flex-direction: column; gap: 1.6rem; }
.loc-card { border: 1px solid #eadfe2; border-radius: 6px; padding: 1.8rem; transition: box-shadow 0.3s ease; }
.loc-card:hover { box-shadow: 0 14px 40px rgba(59,20,80,0.1); }
.loc-card h4 { color: var(--plum); font-size: 1.5rem; margin-bottom: 0.3rem; }
.loc-card .tagline { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.loc-card p { color: var(--muted); font-size: 0.95rem; font-weight: 300; margin-bottom: 0.5rem; }
.loc-card a { color: var(--plum-soft); font-weight: 400; }
.loc-card a:hover { color: var(--gold); }
.map-embed { margin-top: 1rem; border-radius: 6px; overflow: hidden; border: 1px solid #eadfe2; }
.map-embed iframe { width: 100%; height: 300px; border: 0; display: block; }

/* ---------- 360 VIRTUAL TOUR ---------- */
.tour { background: linear-gradient(160deg, var(--plum-deep), var(--plum)); color: var(--cream); }
.tour .section-head h2 { color: var(--cream); }
.tour .section-head p { color: #d7c8e0; }

/* light variant — avoids three stacked dark blocks on the tour page */
.tour--light { background: var(--white); color: var(--ink); }
.tour--light .section-head h2 { color: var(--plum); }
.tour--light .section-head p { color: var(--muted); }
.tour-frame {
  position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(201,162,75,0.35);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--plum-deep); background: var(--gold); padding: 0.5rem 1.1rem;
  border-radius: 30px; font-weight: 600; margin-bottom: 1.2rem;
}

/* ---------- VALUES / ABOUT EXTRAS ---------- */
.values { background: var(--white); }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.value {
  padding: 2.6rem 2.2rem; background: var(--cream); border-radius: 8px;
  border: 1px solid rgba(201,162,75,0.16);
  box-shadow: 0 14px 40px rgba(59,20,80,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.value:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgba(59,20,80,0.13);
  border-color: rgba(201,162,75,0.4);
}
.value h4 {
  color: var(--plum); font-size: 1.4rem; margin-bottom: 1rem;
  padding-bottom: 0.85rem; position: relative;
}
.value h4::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 40px; height: 2px; background: var(--gold);
  transition: width 0.4s ease;
}
.value:hover h4::after { width: 64px; }
.value p { color: var(--muted); font-weight: 300; font-size: 0.96rem; }

.stats { background: linear-gradient(160deg, var(--plum-deep), var(--plum)); color: var(--cream); padding: 4rem 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.stat strong { font-family: var(--serif); font-size: 3rem; color: var(--gold); display: block; }
.stat span { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #d7c8e0; }

/* ---------- FOOTER ---------- */
footer { background: var(--plum-deep); color: var(--cream); padding: 5rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.foot-brand .brand { margin-bottom: 1.2rem; }
.foot-brand .brand img { height: 70px; }
.foot-brand p { color: #c6b5d0; font-weight: 300; font-size: 0.95rem; max-width: 300px; }
.socials { display: flex; gap: 0.8rem; margin-top: 1.4rem; }
.socials a {
  width: 38px; height: 38px; border: 1px solid rgba(201,162,75,0.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold-light);
  font-size: 0.8rem; transition: all 0.3s ease;
}
.socials a:hover { background: var(--gold); color: var(--plum-deep); border-color: var(--gold); }
footer h4 { color: var(--gold-light); font-size: 1.3rem; margin-bottom: 1.2rem; }
.foot-col p, .foot-col a { color: #c6b5d0; font-size: 0.92rem; font-weight: 300; display: block; margin-bottom: 0.7rem; transition: color 0.3s ease; }
.foot-col a:hover { color: var(--gold-light); }
.foot-col ul { list-style: none; }
.foot-label { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 1.2rem; margin-bottom: 0.4rem; font-weight: 500; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.8rem; text-align: center; color: #9885a3; font-size: 0.82rem; }

/* ---------- DRY HIRE POPUP ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 6, 26, 0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.popup-overlay.open { opacity: 1; visibility: visible; }
.popup {
  position: relative; width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto;
  background: #56685c url('images/pop-up-saray-event.jpg') center/cover no-repeat;
  border-radius: 10px; box-shadow: 0 40px 90px rgba(0,0,0,0.55);
  text-align: center; color: var(--cream);
  padding: 2.6rem 2.6rem 2.4rem;
  transform: translateY(24px) scale(0.97); transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.popup-overlay.open .popup { transform: translateY(0) scale(1); }
.popup-close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.3); color: var(--cream); font-size: 1.3rem; line-height: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}
.popup-close:hover { background: var(--gold); color: #3c4c43; transform: rotate(90deg); }
.popup-logo { width: 140px; max-width: 55%; margin: 0 auto 0.6rem; position: relative; z-index: 2; }
.popup h2 {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 1.15rem; color: var(--gold-light); margin-bottom: 0.9rem; position: relative; z-index: 2;
}
.popup .price-row { position: relative; z-index: 2; margin-bottom: 0.5rem; }
.popup .price-row .label {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--cream); line-height: 1.3;
}
.popup .price-row .amount { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-light); margin-top: 0.05rem; }
.popup .price-sep { width: 46%; height: 1px; background: rgba(201,162,75,0.5); margin: 0.55rem auto; position: relative; z-index: 2; }
.popup .note { position: relative; z-index: 2; font-size: 0.72rem; color: #f0ebe1; line-height: 1.45; margin: 0.7rem 0 0.2rem; }
.popup .note strong { color: var(--gold-light); }
.popup .sub-note {
  position: relative; z-index: 2; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #e4ded3; margin: 0.6rem 0 0.9rem;
}
.popup .btn { position: relative; z-index: 2; padding: 0.7rem 1.7rem; font-size: 0.68rem; }
@media (max-width: 440px) {
  .popup { padding: 2.2rem 1.8rem 2rem; }
  .popup-logo { width: 120px; }
  .popup h2 { font-size: 1rem; }
  .popup .price-row .amount { font-size: 1.1rem; }
  .popup .price-row .label { font-size: 0.66rem; }
}

/* ---------- REVEAL ANIMATION ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .section-head--split { display: block; }
  .section-head--split p { margin-top: 1.2rem; padding-bottom: 0; }
  .feature-grid, .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid, .pkg-grid, .quote-grid, .step-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .intro-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  section { padding: 4.5rem 0; }
  .feature-grid, .service-grid, .pkg-grid, .quote-grid, .step-grid, .value-grid, .stat-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .intro-media .badge { left: 16px; bottom: -20px; }
  /* dropdown becomes inline in mobile menu */
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: transparent; border: none; box-shadow: none;
    padding: 0.4rem 0 0.4rem 1rem; backdrop-filter: none;
  }
  .has-dropdown > a::before { content: ''; margin: 0; }
  .dropdown a { padding: 0.5rem 0; }
}

/* ===========================================================
   LIGHT + GOLD THEME
   Warm cream/white surfaces, gold as the primary accent.
   Dark hue shifted from purple to warm espresso and kept only
   for text and fine details. (Remove this block to restore the
   original dark theme.)
   =========================================================== */

/* Repalette: purple -> warm espresso (affects headings, text, details);
   warm cream -> lighter neutral greige surface */
:root {
  --plum: #3a2c1c;
  --plum-deep: #241a10;
  --plum-soft: #6f5a3c;
  --ink: #2a2018;
  --muted: #7c6c58;
  --cream: #f5f5f4;
}

/* Buttons — readable deep-gold text on light; light text kept over the dark hero and transparent nav */
/* plain outline button gets readable deep-gold text on light; re-assert the
   variant defaults (all specificity 0,1,0) so this generic rule can't clobber
   them, and add NO generic :hover so the base per-variant hovers keep working
   (solid -> gold-light, dark -> cream/white on their dark fills) */
.btn { color: #8a6d24; }
.btn--solid { color: var(--plum-deep); }
.btn--dark { color: var(--plum); }
.hero .btn:not(.btn--solid):not(:hover) { color: var(--gold-light); }
/* solid button has an opaque gold fill, so its ::before wipe can't show —
   swap the element background directly on hover for a readable dark fill */
.btn--solid:hover { background: var(--plum-deep); color: var(--gold-light); }
header:not(.solid):not(.scrolled) .nav-cta:not(:hover) { color: var(--gold-light); }

/* NAV — solid/scrolled becomes light glass with dark text */
header.scrolled, header.solid {
  background: rgba(255,255,255,0.93);
  box-shadow: 0 8px 30px rgba(58,44,28,0.12);
}
header.solid .nav-links a, header.scrolled .nav-links a { color: var(--plum); }
header.solid .nav-links a.active, header.scrolled .nav-links a.active { color: var(--gold); }
header.solid .menu-toggle, header.scrolled .menu-toggle { color: var(--plum); }

/* Dropdown — light panel */
.dropdown {
  background: rgba(255,255,255,0.98);
  border-color: rgba(201,162,75,0.35);
  box-shadow: 0 18px 44px rgba(58,44,28,0.18);
}
.dropdown a { color: var(--plum); }
.dropdown a:hover, .dropdown a.active { background: rgba(201,162,75,0.14); color: var(--plum-deep); }

/* HERO — bottom-left editorial placement; directional scrim so the video
   shows through the top-right and text stays legible bottom-left */
.hero {
  background:
    linear-gradient(to top right, rgba(28,19,11,0.6), rgba(28,19,11,0.2)),
    url('images/photo-1519167758481-83f550bb49b3.jpg') center/cover;
}
/* anchor the hero content to the bottom-left (flex align was unreliable here) */
.hero-inner { position: absolute; left: 0; right: 0; bottom: 5.5rem; }
/* ---------- MOBILE HERO: compact text, video stays visible ---------- */
@media (max-width: 640px) {
  /* header: the wide "Schedule a Visit" button pushed the hamburger off-screen */
  .nav-cta { display: none; }
  .brand img { height: 46px; }

  /* keep the text anchored bottom-left so the video breathes above it */
  .hero-inner { position: absolute; left: 0; right: 0; bottom: 3.2rem; }

  /* compact type so the block stops filling the screen (and h1 actually wraps) */
  .hero .eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; margin-bottom: 0.3rem; }
  .hero h1 { font-size: 1.8rem; margin: 0.3rem 0 0.7rem; line-height: 1.18; }
  .hero p { font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.2rem; }

  /* buttons side by side instead of two full-width stacked bars;
     wrap is allowed so they stack rather than overflow on very narrow phones */
  .hero-actions { flex-direction: row; gap: 0.6rem; flex-wrap: wrap; }
  .hero-actions .btn {
    width: auto; flex: 1 1 8rem; min-width: 0; text-align: center; white-space: nowrap;
    padding: 0.8rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.1em;
  }

  /* lighter, bottom-weighted scrim: video visible up top, text legible below */
  .hero-overlay {
    background: linear-gradient(to top,
      rgba(26,18,10,0.88) 0%,
      rgba(26,18,10,0.55) 42%,
      rgba(26,18,10,0.15) 100%);
  }

  .scroll-cue { bottom: 1rem; }
}

/* very narrow phones (iPhone SE / mini) — keep the hero from crowding out the video */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.88rem; }
  .hero-actions .btn { font-size: 0.58rem; padding: 0.75rem 0.4rem; letter-spacing: 0.08em; }
}

/* compact editorial block: smaller headline so the venue video stays the star */
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin: 0.5rem 0 1.1rem; }
.hero p { font-size: 1.05rem; margin-bottom: 1.8rem; }
.hero .eyebrow { margin-bottom: 0.4rem; }
.hero-overlay {
  background: linear-gradient(to top right,
    rgba(26,18,10,0.82) 0%,
    rgba(26,18,10,0.52) 40%,
    rgba(26,18,10,0.18) 100%);
}

/* PAGE BANNERS — lighter warm scrim */
.page-banner::before { background: linear-gradient(rgba(36,26,16,0.34), rgba(36,26,16,0.55)); }

/* FEATURES — light */
.features { background: var(--cream); color: var(--ink); }
.features .section-head h2 { color: var(--plum); }
.features .section-head p { color: var(--muted); }
.features .feature-card { background: var(--white); border-color: rgba(201,162,75,0.28); box-shadow: 0 12px 34px rgba(58,44,28,0.06); }
.features .feature-card:hover { background: var(--white); border-color: var(--gold); }
.features .feature-card h4 { color: var(--plum); }
.features .feature-card p { color: var(--muted); }

/* PACKAGES — light */
.packages { background: var(--cream); color: var(--ink); }
.packages .section-head h2 { color: var(--plum); }
.packages .section-head p { color: var(--muted); }
.packages .pkg { background: var(--white); border-color: rgba(201,162,75,0.3); box-shadow: 0 12px 34px rgba(58,44,28,0.06); }
.packages .pkg:hover { box-shadow: 0 24px 50px rgba(58,44,28,0.14); }
.packages .pkg.featured { background: var(--white); border-color: var(--gold); }
.packages .pkg h3 { color: var(--plum); }
.packages .pkg .price { color: var(--muted); }
.packages .pkg li { color: var(--ink); border-bottom-color: rgba(58,44,28,0.08); }
.packages .pkg-note {
  display: block; text-align: left;
  margin-top: 2.6rem; padding: 3.2rem 3.4rem;
  background: var(--white);
  border: 1px solid rgba(201,162,75,0.6);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(58,44,28,0.09);
}
.packages .pkg-note-label {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--plum);
  display: block; margin: 0 0 1rem;
}
.packages .pkg-note-badge {
  display: inline-block; font-size: 0.8rem; letter-spacing: 0.03em;
  color: var(--plum); border: 1px solid var(--gold); border-radius: 30px;
  padding: 0.42rem 1.15rem; margin-bottom: 1.5rem;
}
.packages .pkg-note-price {
  font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 4rem);
  color: var(--gold); line-height: 1; margin-bottom: 1.1rem; white-space: nowrap;
}
.packages .pkg-note-lead {
  font-family: var(--serif); font-size: 1.15rem; color: var(--plum);
  font-weight: 500; margin-bottom: 0.4rem;
}
.packages .pkg-note-lead strong { color: var(--gold); }
.packages .pkg-note-sub { color: var(--muted); font-size: 0.98rem; font-weight: 300; margin: 0; }
.packages .pkg-note-divider { height: 1px; background: rgba(201,162,75,0.5); margin: 1.9rem 0; }
.packages .pkg-note .btn { display: block; width: max-content; margin: 0 auto; }

/* STATS — soft cream band, espresso numbers, gold hairlines */
.stats {
  background: var(--cream); color: var(--ink); padding: 4rem 0;
  border-top: 1px solid rgba(201,162,75,0.3);
  border-bottom: 1px solid rgba(201,162,75,0.3);
}
.stat strong { color: var(--plum); }
.stat span { color: var(--muted); }

/* TOUR — light */
.tour { background: var(--cream); color: var(--ink); }
.tour .section-head h2 { color: var(--plum); }
.tour .section-head p { color: var(--muted); }

/* CTA — warm gold-tinted band with dark text */
.cta {
  background: linear-gradient(160deg, #f2f2f0, rgba(201,162,75,0.14));
  color: var(--ink);
}
.cta h2 { color: var(--plum); }
.cta h2 em { color: var(--gold); }
.cta p { color: var(--muted); }

/* FOOTER — light, grounded by a gold top border */
footer { background: #eae9e7; color: var(--ink); border-top: 3px solid var(--gold); }
.foot-brand p { color: var(--muted); }
footer h4 { color: var(--plum); }
.foot-region {
  display: block; margin: -0.85rem 0 1.15rem;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.foot-col p, .foot-col a { color: var(--muted); }
.foot-col a:hover { color: var(--gold); }
.foot-label { color: var(--plum-soft); }
.socials a { border-color: rgba(201,162,75,0.5); color: var(--plum); }
.socials a:hover { background: var(--gold); color: var(--white); border-color: var(--gold); }
.foot-bottom { border-top-color: rgba(58,44,28,0.14); color: var(--muted); }

/* misc de-purpling */
.gallery-grid figure::after { background: linear-gradient(transparent, rgba(36,26,16,0.45)); }