/* ═══════════════════════════════════════════════════════════
   INSPIRA RANCH — PREMIUM REDESIGN
   Custom CSS · No Framework
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --navy:       #0D1B3E;
  --black:      #0A1430;
  --gold:       #C9A02E;
  --gold-light: #E8C96A;
  --white:      #FFFFFF;
  --off-white:  #F5F0E8;
  --gray:       #8A95A3;
  --warm-gray:  #6B6055;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--off-white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul { list-style: none; }

button { font-family: var(--font-body); cursor: pointer; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--gold-light); }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }

p { line-height: 1.8; font-weight: 300; }

/* ── LAYOUT ── */
section { padding: 100px 24px; }
.container { max-width: 1200px; margin: 0 auto; }
.text-center { text-align: center; }

.section-dark  { background: var(--navy); }
.section-black { background: var(--black); }
.section-light { background: var(--off-white); color: var(--warm-gray); }

/* Thin gold hairline between stacked sections (clean navy <-> cream transitions) */
.section-dark, .section-black, .section-light, .services-teaser, .testimonials,
.contact-section, .story-section, .team-section, .values-section,
.packages-section, .lodging-section, .conferences-section {
  border-top: 1px solid rgba(201,160,46,0.12);
}
.section-light h2,
.section-light h3 { color: var(--navy); }
/* Higher-specificity override: section-header h2 (color:#fff) must not bleed into light sections */
.section-light .section-header h2 { color: var(--navy); }

/* ── GOLD LABEL ── */
.gold-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 36px;
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0;
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--black);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 34px;
  border: 2px solid rgba(255,255,255,0.55);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
  border-radius: 0;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-outline-dark {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 34px;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border-radius: 0;
}
.btn-outline-dark:hover { background: var(--navy); color: var(--white); }

/* ── ANIMATIONS ── */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── LANGUAGE TOGGLE ── */
body.show-en .lang.es { display: none; }
body.show-es .lang.en { display: none; }
body:not(.show-en):not(.show-es) .lang.es { display: none; }

.lang-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 0;
  color: rgba(255,255,255,0.75);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--gold); color: var(--gold); }
nav.scrolled .lang-toggle { border-color: rgba(201,160,46,0.4); }


/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  transition: background 0.4s ease, padding 0.35s ease, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

nav.scrolled {
  background: var(--navy);
  padding: 18px 48px;
  border-bottom-color: rgba(201,160,46,0.18);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.nav-logo:hover { color: var(--gold-light); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}
.hamburger span {
  width: 26px;
  height: 1px;
  background: var(--white);
  display: block;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media (max-width: 960px) {
  nav { padding: 20px 24px; }
  nav.scrolled { padding: 16px 24px; }
  .hamburger { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100vh;
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 80px 40px;
    transition: right 0.38s ease;
    border-left: 1px solid rgba(201,160,46,0.2);
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 13px; letter-spacing: 2px; }
  .nav-links .lang-toggle { display: block; }

  .nav-right .lang-toggle { display: none; }
}


/* ══════════════════════════════════════════════════════
   HERO — HOME
══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,20,0.45) 0%, rgba(8,12,20,0.65) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  padding: 0 24px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 28px;
}

.hero-content h1 {
  color: var(--white);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 28px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.hero-divider {
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 28px;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(245,240,232,0.82);
  max-width: 520px;
  margin: 0 auto 44px;
  font-weight: 300;
  line-height: 1.9;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════
   STATS STRIP
══════════════════════════════════════════════════════ */
.stats-strip {
  background: var(--navy);
  padding: 64px 24px;
  border-bottom: 1px solid rgba(201,160,46,0.14);
}

.stats-grid {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center;
}

.stat-divider {
  width: 1px;
  height: 64px;
  background: rgba(201,160,46,0.25);
}

.stat {
  text-align: center;
  padding: 0 48px;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--white);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gray);
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; gap: 48px; }
  .stat-divider { display: none; }
  .stat { padding: 0; }
}


/* ══════════════════════════════════════════════════════
   ABOUT SNAPSHOT — 2 COLUMN
══════════════════════════════════════════════════════ */
.about-snapshot {
  padding: 0;
  background: var(--off-white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.about-img {
  position: relative;
  overflow: hidden;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text {
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text h2 {
  color: var(--navy);
  margin-bottom: 28px;
  font-style: italic;
  font-weight: 400;
}

.about-text p {
  color: var(--warm-gray);
  margin-bottom: 20px;
  font-size: 0.97rem;
}

.gold-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  display: inline-block;
  margin-top: 8px;
  transition: color 0.2s, border-color 0.2s;
}
.gold-link:hover { color: var(--gold-light); border-color: var(--gold-light); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-img { height: 420px; }
  .about-text { padding: 64px 32px; }
}


/* ══════════════════════════════════════════════════════
   SERVICES TEASER — 3 COLUMNS
══════════════════════════════════════════════════════ */
.services-teaser { background: var(--black); }

.services-teaser-header {
  text-align: center;
  margin-bottom: 0;
}

.services-teaser-header h2 { color: var(--white); }

.services-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 72px;
  border-top: 1px solid rgba(201,160,46,0.18);
  border-left: 1px solid rgba(201,160,46,0.18);
}

.service-item {
  padding: 56px 48px;
  border-right: 1px solid rgba(201,160,46,0.18);
  border-bottom: 1px solid rgba(201,160,46,0.18);
}

.service-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 28px;
}

.service-item h3 {
  color: var(--white);
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.service-item p {
  color: var(--gray);
  font-size: 0.93rem;
  line-height: 1.8;
}

.services-cta {
  text-align: center;
  padding-top: 64px;
}

@media (max-width: 768px) {
  .services-teaser-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   GALLERY STRIP
══════════════════════════════════════════════════════ */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 380px;
  padding: 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

.gallery-caption {
  position: absolute;
  inset: 0;
  background: rgba(8,12,20,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s;
}
.gallery-item:hover .gallery-caption { background: rgba(8,12,20,0.48); }

.gallery-caption span {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}
.gallery-item:hover .gallery-caption span {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr); height: auto; }
  .gallery-item { height: 220px; }
}
@media (max-width: 480px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-item { height: 190px; }
}


/* ══════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════ */
.testimonials { background: var(--navy); }

.testimonials-header {
  text-align: center;
  margin-bottom: 72px;
}
.testimonials-header h2 { color: var(--white); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.testimonial-quote-mark {
  font-family: var(--font-heading);
  font-size: 6rem;
  color: var(--gold);
  line-height: 0.7;
  display: block;
  margin-bottom: 24px;
  opacity: 0.45;
}

.testimonial p {
  font-size: 0.93rem;
  color: rgba(245,240,232,0.78);
  font-style: italic;
  line-height: 2;
  margin-bottom: 28px;
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}

.testimonial-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 3px;
}

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 52px; }
}


/* ══════════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════════ */
.cta-banner {
  position: relative;
  padding: 140px 24px;
  text-align: center;
  overflow: hidden;
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
}
.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8,12,20,0.65), rgba(8,12,20,0.78));
}

.cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
.cta-banner-content h2 { color: var(--white); font-style: italic; font-weight: 400; margin-bottom: 20px; }
.cta-banner-content p { color: rgba(245,240,232,0.8); margin-bottom: 40px; }


/* ══════════════════════════════════════════════════════
   FOOTER NAV RESET — prevent global nav{position:fixed} from leaking into footer
══════════════════════════════════════════════════════ */
footer nav,
nav.footer-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
footer {
  background: var(--black);
  padding: 88px 24px 44px;
  border-top: 1px solid rgba(201,160,46,0.12);
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 20px;
  text-decoration: none;
}
.footer-logo:hover { color: var(--gold-light); }

.footer-brand p {
  color: var(--gray);
  font-size: 0.88rem;
  line-height: 1.9;
  max-width: 280px;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col ul li a {
  font-size: 0.88rem;
  color: var(--gray);
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--off-white); }

.footer-col address {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--gray);
  line-height: 2.1;
}
.footer-col address a { color: var(--gray); transition: color 0.2s; }
.footer-col address a:hover { color: var(--gold); }

.footer-bottom {
  max-width: 1200px;
  margin: 44px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(138,149,163,0.55);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-bottom { justify-content: center; text-align: center; }
}


/* ══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 180px 48px 100px;
  overflow: hidden;
  background: var(--navy);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.35;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(13,27,62,0.6), rgba(13,27,62,0.85));
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
.page-hero-content h1 {
  color: var(--white);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 12px;
}
.page-hero-content p { color: var(--gray); font-size: 1.05rem; }

@media (max-width: 640px) {
  .page-hero { padding: 160px 24px 80px; }
}


/* ══════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════ */
.story-section { background: var(--off-white); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

.story-img { position: relative; overflow: hidden; }
.story-img img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  display: block;
}

.story-text h2 { color: var(--navy); font-style: italic; font-weight: 400; margin-bottom: 28px; }
.story-text p { color: var(--warm-gray); margin-bottom: 18px; font-size: 0.96rem; }

/* Team section */
.team-section { background: var(--off-white); padding-top: 0; }

.team-header { text-align: center; margin-bottom: 64px; }
.team-header h2 { color: var(--navy); }
.team-header p { color: var(--warm-gray); margin-top: 16px; font-size: 0.97rem; }

.team-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 800px;
}

.team-member {
  border-left: 2px solid var(--gold);
  padding-left: 36px;
}
.team-member h3 { color: var(--navy); margin-bottom: 6px; font-size: 1.4rem; }
.team-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.team-member p { color: var(--warm-gray); font-size: 0.95rem; line-height: 1.85; }

/* Values section */
.values-section { background: var(--navy); }
.values-header { text-align: center; margin-bottom: 72px; }
.values-header h2 { color: var(--white); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201,160,46,0.18);
  border-left: 1px solid rgba(201,160,46,0.18);
}

.value-item {
  padding: 56px 48px;
  border-right: 1px solid rgba(201,160,46,0.18);
  border-bottom: 1px solid rgba(201,160,46,0.18);
}
.value-icon { font-size: 2rem; display: block; margin-bottom: 24px; }
.value-item h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 14px; }
.value-item p { color: var(--gray); font-size: 0.93rem; }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-img img { height: 380px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-item { border-right: none; }
}
@media (max-width: 768px) {
  .team-list { max-width: 100%; }
  .team-member { padding-left: 24px; }
}


/* ══════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════ */
.services-hero {
  background: var(--navy);
  padding: 200px 24px 100px;
  text-align: center;
  border-bottom: 1px solid rgba(201,160,46,0.14);
}
.services-hero h1 { color: var(--white); font-style: italic; font-weight: 400; margin-bottom: 20px; }
.services-hero p { color: var(--gray); max-width: 520px; margin: 0 auto; }

/* Package rows */
.pkg-row { padding: 0; }
.pkg-row-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 0;
  min-height: 380px;
}
.pkg-row-inner.reverse { direction: rtl; }
.pkg-row-inner.reverse > * { direction: ltr; }

.pkg-header-col {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pkg-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,160,46,0.4);
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 20px;
}

.pkg-name {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 16px;
}

.pkg-price {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold);
  display: block;
  margin-bottom: 24px;
}

.pkg-desc {
  font-size: 0.95rem;
  line-height: 1.85;
  margin-bottom: 32px;
}

.pkg-features-col {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pkg-features-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 28px;
}

.pkg-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 56px;
}

.pkg-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pkg-check { color: var(--gold); flex-shrink: 0; margin-top: 1px; font-size: 0.8rem; }

/* Dark pkg row (navy) */
.pkg-dark { background: var(--navy); }
.pkg-dark .pkg-name { color: var(--white); }
.pkg-dark .pkg-desc { color: var(--gray); }
.pkg-dark .pkg-features-list li { color: var(--gray); }
.pkg-dark .pkg-header-col { border-right: 1px solid rgba(201,160,46,0.12); }

/* Light pkg row */
.pkg-light { background: var(--off-white); }
.pkg-light .pkg-name { color: var(--navy); }
.pkg-light .pkg-desc { color: var(--warm-gray); }
.pkg-light .pkg-features-list li { color: var(--warm-gray); }
.pkg-light .pkg-features-col { border-left: 1px solid rgba(107,96,85,0.15); }
.pkg-light .btn-primary { }

@media (max-width: 900px) {
  .pkg-row-inner, .pkg-row-inner.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .pkg-header-col { padding: 64px 32px 32px; border-right: none !important; }
  .pkg-features-col { padding: 32px 32px 64px; border-left: none !important; border-top: 1px solid rgba(201,160,46,0.15); }
  .pkg-features-list { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════ */
.contact-section { background: var(--black); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 88px;
  align-items: start;
}

.contact-details-title { color: var(--white); margin-bottom: 40px; font-style: italic; font-weight: 400; }

.contact-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid rgba(201,160,46,0.14);
}
.contact-item:first-of-type { border-top: 1px solid rgba(201,160,46,0.14); }

.contact-item-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 3px; opacity: 0.7; }

.contact-item-text strong {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.contact-item-text p { color: var(--gray); font-size: 0.93rem; }
.contact-item-text a { color: var(--gray); transition: color 0.2s; }
.contact-item-text a:hover { color: var(--off-white); }

.map-container {
  margin-top: 36px;
  border: 1px solid rgba(201,160,46,0.18);
  overflow: hidden;
}

/* Contact form */
.contact-form-wrap {
  background: rgba(13,27,62,0.45);
  border: 1px solid rgba(201,160,46,0.18);
  padding: 52px;
}

.contact-form-title { color: var(--white); margin-bottom: 8px; font-style: italic; font-weight: 400; font-size: 1.6rem; }
.contact-form-sub { color: var(--gray); font-size: 0.9rem; margin-bottom: 36px; }

.form-group { margin-bottom: 22px; }

.form-group label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,160,46,0.22);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(138,149,163,0.5); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); background: rgba(255,255,255,0.06); }
.form-group select option { background: var(--navy); color: var(--off-white); }
.form-group textarea { height: 130px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-success {
  display: none;
  padding: 16px 20px;
  background: rgba(201,160,46,0.1);
  border: 1px solid rgba(201,160,46,0.35);
  color: var(--gold);
  font-size: 0.9rem;
  margin-top: 16px;
  font-family: var(--font-body);
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form-wrap { padding: 36px 24px; }
}


/* ══════════════════════════════════════════════════════
   BLOG PAGE
══════════════════════════════════════════════════════ */
.blog-section { background: var(--black); padding-top: 60px; }

.blog-post-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(201,160,46,0.14);
}

.blog-post-item {
  display: grid;
  grid-template-columns: 400px 1fr;
  border-bottom: 1px solid rgba(201,160,46,0.14);
  transition: background 0.3s;
}
.blog-post-item:hover { background: rgba(13,27,62,0.4); }

.blog-post-img {
  overflow: hidden;
  height: 300px;
}
.blog-post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.blog-post-item:hover .blog-post-img img { transform: scale(1.04); }

.blog-post-text {
  padding: 52px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-post-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

.blog-post-text h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 16px; }
.blog-post-text p { color: var(--gray); font-size: 0.93rem; line-height: 1.85; margin-bottom: 28px; }

.blog-empty {
  text-align: center;
  padding: 120px 24px;
}
.blog-ornament {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.3;
  display: block;
  margin-bottom: 32px;
  line-height: 1;
}
.blog-empty-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gray);
}

.newsletter-section { background: var(--navy); }
.newsletter-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter-inner h2 { color: var(--white); margin-bottom: 16px; }
.newsletter-inner p { color: var(--gray); margin-bottom: 36px; }
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 440px;
  margin: 0 auto;
}
.newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,160,46,0.3);
  border-right: none;
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 14px 20px;
  outline: none;
  border-radius: 0;
}
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form button { flex-shrink: 0; }

@media (max-width: 768px) {
  .blog-post-item { grid-template-columns: 1fr; }
  .blog-post-img { height: 240px; }
  .blog-post-text { padding: 36px 24px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { border-right: 1px solid rgba(201,160,46,0.3); border-bottom: none; }
}


/* ══════════════════════════════════════════════════════
   BOOKING PAGE
══════════════════════════════════════════════════════ */
.booking-hero { background: var(--navy); }

.pkg-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(201,160,46,0.18);
  border-left: 1px solid rgba(201,160,46,0.18);
  margin-top: 64px;
}

.pkg-select-card {
  border-right: 1px solid rgba(201,160,46,0.18);
  border-bottom: 1px solid rgba(201,160,46,0.18);
  padding: 48px 36px;
  transition: background 0.25s;
  cursor: pointer;
}
.pkg-select-card:hover { background: rgba(201,160,46,0.05); }
.pkg-select-card.selected { background: rgba(201,160,46,0.1); border-color: rgba(201,160,46,0.5); }

.pkg-select-card h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 12px; }
.pkg-select-card .pkg-price-sm { color: var(--gold); font-size: 0.85rem; font-family: var(--font-heading); display: block; margin-bottom: 20px; }
.pkg-select-card ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.pkg-select-card li { color: var(--gray); font-size: 0.82rem; display: flex; gap: 10px; align-items: flex-start; }
.pkg-select-card li::before { content: '—'; color: var(--gold); opacity: 0.6; flex-shrink: 0; }

.booking-form-section { background: var(--black); padding-top: 0; }

.booking-form-box {
  background: rgba(13,27,62,0.45);
  border: 1px solid rgba(201,160,46,0.18);
  padding: 64px;
  max-width: 820px;
  margin: 0 auto;
}

.booking-faq { background: var(--navy); }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item {
  padding: 32px 0;
  border-bottom: 1px solid rgba(201,160,46,0.14);
}
.faq-item:first-child { border-top: 1px solid rgba(201,160,46,0.14); }
.faq-item h4 { color: var(--white); font-size: 1.05rem; margin-bottom: 12px; font-family: var(--font-heading); font-weight: 400; }
.faq-item p { color: var(--gray); font-size: 0.92rem; line-height: 1.8; }

@media (max-width: 900px) {
  .pkg-select-grid { grid-template-columns: 1fr 1fr; }
  .booking-form-box { padding: 36px 24px; }
}
@media (max-width: 560px) {
  .pkg-select-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   REVIEWS PAGE
══════════════════════════════════════════════════════ */
.reviews-hero { background: var(--navy); padding-bottom: 80px; }

.rating-display {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}
.rating-big {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--white);
  line-height: 1;
}
.rating-stars-lg { color: var(--gold); font-size: 1.2rem; letter-spacing: 4px; display: block; margin-bottom: 8px; }
.rating-label { color: var(--gray); font-size: 0.88rem; font-family: var(--font-body); }

.reviews-section { background: var(--black); }

.reviews-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.filter-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(201,160,46,0.3);
  color: var(--gray);
  padding: 8px 20px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  border-radius: 0;
}
.filter-btn:hover, .filter-btn.active { border-color: var(--gold); color: var(--gold); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(201,160,46,0.12);
  border-left: 1px solid rgba(201,160,46,0.12);
}

.review-card {
  border-right: 1px solid rgba(201,160,46,0.12);
  border-bottom: 1px solid rgba(201,160,46,0.12);
  padding: 48px 40px;
}

.review-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 3px; display: block; margin-bottom: 20px; }
.review-card p { color: var(--gray); font-size: 0.9rem; font-style: italic; line-height: 1.9; margin-bottom: 24px; }
.review-author { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--off-white); }
.review-event { color: var(--gray); font-size: 0.8rem; margin-top: 4px; font-family: var(--font-body); }

.reviews-cta { background: var(--navy); }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { border-right: none; }
}

/* ── PHOTO INTEGRATION ─────────────────────────────────────── */

/* Home: 8-photo 2-row gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 280px); gap: 3px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.gallery-grid img:hover { transform: scale(1.04); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 200px); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; } .gallery-grid img { height: 220px; } }

/* About: grounds grid 2×2 */
.grounds-section { background: var(--black); padding: 80px 24px; }
.grounds-header { text-align: center; margin-bottom: 48px; }
.grounds-header h2 { color: var(--white); }
.grounds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 960px; margin: 0 auto; }
.grounds-grid img { width: 100%; height: 260px; object-fit: cover; display: block; }
@media (max-width: 600px) { .grounds-grid { grid-template-columns: 1fr; } .grounds-grid img { height: 200px; } }

/* Services: apartment showcase */
.apt-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 80px 0; }
.apt-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.apt-photos img { width: 100%; height: 210px; object-fit: cover; display: block; }
@media (max-width: 900px) { .apt-showcase { grid-template-columns: 1fr; gap: 40px; } }

/* Contact: dining banner */
.contact-dining-banner { position: relative; height: 300px; overflow: hidden; }
.contact-dining-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-dining-overlay { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.55); display: flex; align-items: center; justify-content: center; }
.contact-dining-overlay span { font-family: var(--font-heading); font-style: italic; font-size: 2rem; color: var(--white); letter-spacing: 4px; text-align: center; }

/* Contact: photo strip below map */
.contact-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.contact-photos img { width: 100%; height: 160px; object-fit: cover; display: block; }
@media (max-width: 600px) { .contact-photos { grid-template-columns: 1fr; } }

/* Fallback bg for broken images */
img { background: #0D1B3E; }

/* ── INDEX REDESIGN — NAV ──────────────────────────────────── */
#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 40px;
  transition: background 0.3s, padding 0.3s, box-shadow 0.3s;
}
#mainNav.scrolled {
  background: rgba(13, 27, 62, 0.97);
  padding: 12px 40px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
}
#mainNav .nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-img { height: 48px; width: auto; display: block; opacity: 1; filter: brightness(0) invert(1); transition: filter 0.3s ease, opacity 0.3s ease; }
#mainNav:not(.scrolled) .logo-img { filter: brightness(0) invert(1); }
#mainNav.scrolled .logo-img { filter: none; }
.logo-text-fallback {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 2px;
}
.nav-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.25s ease;
}
.nav-logo-text:hover { color: var(--gold-light); }
#mainNav.scrolled .nav-logo-text { color: var(--gold); }
#mainNav .nav-links { display: flex; align-items: center; gap: 32px; }
#mainNav .nav-links a {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
#mainNav .nav-links a:hover { color: #C9A02E; }
#mainNav .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
#mainNav .hamburger span { display: block; width: 24px; height: 2px; background: rgba(255,255,255,0.9); margin: 5px 0; transition: all 0.3s; }
@media (max-width: 768px) {
  #mainNav { padding: 16px 20px; }
  #mainNav.scrolled { padding: 10px 20px; }
  #mainNav .hamburger { display: block; }

  /* Keep the bar's logo, language toggle and close (X) above the overlay */
  #mainNav .nav-logo-text,
  #mainNav .nav-inner > #langBtn,
  #mainNav .hamburger { position: relative; z-index: 1002; }

  /* Full-screen menu overlay (ALZA-style) */
  #mainNav .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    z-index: 1001;
    background: rgba(10,16,33,0.985);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
    border-top: none;
    max-height: none;
    overflow-y: auto;
    padding: 92px 0 40px;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  #mainNav .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Hide the floating chat bubble while the menu is open so it can't overlap */
  body:has(#nav-links.open) #alza-chat-btn { display: none !important; }
}

/* ── INDEX REDESIGN — HERO ─────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: scale(1.12);
  transition: none;
  will-change: transform;
}
.hero:hover .hero-bg { transform: scale(1.12); }
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}
.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: #fff;
  line-height: 1.1;
  margin: 16px 0 20px;
  font-weight: 400;
  font-style: italic;
  text-shadow: 0 4px 32px rgba(0,0,0,0.35);
  letter-spacing: -0.01em;
}
.hero-rule { width: 60px; height: 1px; background: #C9A02E; margin: 20px auto; }
.hero-content p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 300;
  margin-bottom: 40px;
  line-height: 1.8;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: center; }
/* Force the two primary buttons onto row 1 and "View Services" onto its own centered row 2 — same in EN and ES */
.hero-btns-break { flex-basis: 100%; height: 0; margin: 0; }
.hero-btns .btn-primary, .hero-btns .btn-outline { min-width: 260px; text-align: center; }
.hero-scroll-hint {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  z-index: 2;
  cursor: default;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
/* Applied after hintFadeIn completes (via JS) */
.hero-scroll-hint.bouncing {
  animation: bounce 2.2s ease-in-out infinite;
}

/* ── INDEX REDESIGN — ABOUT SNAPSHOT ──────────────────────── */
.about-snap { padding: 100px 24px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-photo img { width: 100%; height: 480px; object-fit: cover; display: block; }
.about-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--navy); margin: 16px 0 24px; line-height: 1.2; }
.about-text p { color: var(--warm-gray); line-height: 1.9; font-size: 0.95rem; margin-bottom: 32px; }
.text-link { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
/* gold-label.dark = gold label for use on LIGHT backgrounds — must be navy, not gold */
.gold-label.dark { color: var(--navy); }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo img { height: 300px; }
}

/* ── INDEX REDESIGN — AMENITIES ────────────────────────────── */
.amenities { padding: 100px 24px; }
.section-header { text-align: center; margin-bottom: 80px; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin-top: 16px; }
.amenity-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px; }
.amenity-pool-block { margin-bottom: 80px; }
.amenity-pool-block .amenity-info { padding-top: 28px; }
.pool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.pool-grid img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .pool-grid { grid-template-columns: 1fr; }
}
.amenity-row.reverse { direction: rtl; }
.amenity-row.reverse > * { direction: ltr; }
.amenity-photo.large img { width: 100%; height: 480px; object-fit: cover; display: block; }
.amenity-photo.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amenity-photo.two-up img { width: 100%; height: 230px; object-fit: cover; display: block; }
.amenity-photo.three-up { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.amenity-photo.three-up img:first-child { grid-column: 1 / -1; height: 260px; object-fit: cover; width: 100%; display: block; }
.amenity-photo.three-up img:not(:first-child) { height: 180px; object-fit: cover; width: 100%; display: block; }
.amenity-num { font-size: 48px; font-family: 'Playfair Display', serif; color: var(--gold); opacity: 0.4; display: block; margin-bottom: 8px; line-height: 1; }
.amenity-info h3 { font-size: 1.8rem; color: var(--white); margin-bottom: 16px; }
.amenity-info p { color: var(--gray); line-height: 1.8; font-weight: 300; }
.amenity-full { position: relative; margin-bottom: 80px; }
.amenity-full img { width: 100%; height: 420px; object-fit: cover; display: block; }
.amenity-full-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(8,12,20,0.85)); padding: 40px 40px 30px; }
.amenity-full-caption h3 { color: var(--white); margin-bottom: 6px; font-size: 1.8rem; }
.amenity-full-caption p { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
@media (max-width: 768px) {
  .amenity-row { grid-template-columns: 1fr; gap: 30px; direction: ltr; }
  .amenity-row.reverse { direction: ltr; }
  .amenity-photo.large img { height: 280px; }
  .amenity-photo.two-up img { height: 160px; }
}

/* ── INDEX REDESIGN — POOL BANNER ──────────────────────────── */
.pool-banner { position: relative; }
.pool-banner img { width: 100%; height: 360px; object-fit: cover; display: block; }
.pool-overlay { position: absolute; bottom: 30px; left: 50px; }
.pool-overlay h3 { color: var(--white); font-size: 1.6rem; margin-top: 8px; }

/* ── INDEX REDESIGN — MONOGRAM DIVIDER ─────────────────────── */
.monogram-divider { text-align: center; padding: 40px 0; background: #F5F0E8; }
.monogram-divider img { height: 80px; width: auto; opacity: 0.85; }
.property-logo-pair {
  background: var(--off-white);
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.property-logo { height: 72px; width: auto; max-width: 100%; opacity: 0.9; }
.property-logo-pair { flex-wrap: wrap; }
@media (max-width: 600px) {
  .property-logo-pair { gap: 24px; padding: 36px 20px; }
  .property-logo { height: 52px; }
}
/* very narrow phones (360px and under): the wordmark logo alone was wider
   than the screen, which put a horizontal scrollbar on the whole page */
@media (max-width: 420px) {
  .property-logo-pair { gap: 16px; padding: 28px 16px; }
  .property-logo { height: 40px; }
}

/* ── INDEX REDESIGN — CTA BANNER ───────────────────────────── */
.cta-banner {
  background: linear-gradient(rgba(8,12,20,0.65), rgba(8,12,20,0.65)),
              url('../img/live/venue-08.jpg') center/cover fixed;
  text-align: center;
  padding: 120px 24px;
}
.cta-overlay { max-width: 600px; margin: 0 auto; }
.cta-overlay h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--white); margin-bottom: 16px; }
.cta-overlay p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 36px; }

/* ── INDEX REDESIGN — FOOTER ────────────────────────────────── */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo { height: 80px; width: auto; margin-bottom: 16px; display: block; }
.footer-logo-text { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.4rem; letter-spacing: 2px; display: block; margin-bottom: 16px; }
.footer-brand p { color: var(--gray); font-size: 13px; margin-top: 8px; }
.footer-links, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-links strong, .footer-contact strong { color: var(--gold); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px; display: block; }
.footer-links a { color: var(--gray); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-contact span { color: var(--gray); font-size: 14px; line-height: 1.6; }
.footer-monogram { text-align: center; padding: 40px 0 20px; }
.footer-monogram img { height: 50px; opacity: 0.4; filter: brightness(0) invert(1); }
.footer-copy { text-align: center; color: rgba(255,255,255,0.3); font-size: 12px; padding-bottom: 20px; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } }

/* ══════════════════════════════════════════════════════
   PHOTO STRIP — 4 COLUMN
══════════════════════════════════════════════════════ */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  background: var(--black);
}
.photo-strip img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  background-color: var(--navy);
  display: block;
}
@media (max-width: 768px) {
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip img { height: 180px; }
}

/* ══════════════════════════════════════════════════════
   LANDSCAPE BANNER — FULL BLEED
══════════════════════════════════════════════════════ */
.landscape-banner {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: var(--navy);
}
.landscape-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landscape-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,12,20,0.35) 0%, rgba(8,12,20,0.7) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.landscape-banner-overlay h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.2;
}
.landscape-banner-overlay p {
  color: var(--gray);
  font-size: 0.88rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 768px) { .landscape-banner { height: 340px; } }

/* ══════════════════════════════════════════════════════
   GROUNDS GRID — ABOUT PAGE 2×2
══════════════════════════════════════════════════════ */
.grounds-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--black);
}
.grounds-grid-2x2 img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background-color: var(--navy);
  display: block;
}
@media (max-width: 640px) {
  .grounds-grid-2x2 img { height: 180px; }
}

/* ══════════════════════════════════════════════════════
   CONTACT PHOTOS STRIP
══════════════════════════════════════════════════════ */
.contact-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 20px;
}
.contact-photos img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background-color: var(--navy);
  display: block;
}
@media (max-width: 640px) { .contact-photos { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════
   PHOTO GALLERY — MASONRY
══════════════════════════════════════════════════════ */
.gallery-section { padding: 80px 0 0; background: var(--white); }
.gallery-section .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; }
.gallery-section h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #0D1B3E;
  margin-bottom: 40px;
}
.gallery-masonry {
  columns: 4;
  column-gap: 4px;
  padding: 0;
}
.gallery-item {
  width: 100%;
  display: block;
  margin-bottom: 4px;
  break-inside: avoid;
  transition: transform 0.3s ease, filter 0.3s ease;
  background: #0D1B3E;
  min-height: 40px;
}
.gallery-item:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
  z-index: 1;
  position: relative;
}
@media (max-width: 1024px) { .gallery-masonry { columns: 3; } }
@media (max-width: 768px)  { .gallery-masonry { columns: 2; } }
@media (max-width: 480px)  { .gallery-masonry { columns: 2; } }

/* Sub-section headings inside a masonry gallery panel (e.g. Event Hall panel
   split into Event Hall / Chapel / Gazebo groups). column-span:all makes the
   heading break across the whole masonry width instead of sitting inside a
   single column. */
.gallery-subheading {
  column-span: all;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9A02E;
  margin: 28px 0 10px;
}
.gallery-subheading:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════
   EMAILJS CONTACT FORM
══════════════════════════════════════════════════════ */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0D1B3E;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fff;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #C9A84C;
}
.form-group textarea { resize: vertical; min-height: 120px; }
#submitBtn {
  background: #0D1B3E;
  color: #fff;
  border: none;
  padding: 14px 40px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
}
#submitBtn:hover { background: #C9A84C; color: #0D1B3E; }
#submitBtn:disabled { opacity: 0.6; cursor: not-allowed; }
.form-status {
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  min-height: 24px;
}


/* ══════════════════════════════════════════════════════
   CONTACT FORM — dark-context overrides
   The EmailJS block above uses light-theme colors.
   The contact form lives in a dark navy card, so
   we restore gold labels and translucent dark inputs.
══════════════════════════════════════════════════════ */
.contact-form-wrap .form-group label {
  color: var(--gold) !important;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.contact-form-wrap .form-group input,
.contact-form-wrap .form-group textarea,
.contact-form-wrap .form-group select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(201,160,46,0.22) !important;
  border-radius: 0 !important;
  color: var(--off-white) !important;
  font-size: 0.95rem !important;
}
.contact-form-wrap .form-group input::placeholder,
.contact-form-wrap .form-group textarea::placeholder {
  color: rgba(138,149,163,0.55);
}
.contact-form-wrap .form-group input:focus,
.contact-form-wrap .form-group textarea:focus,
.contact-form-wrap .form-group select:focus {
  border-color: var(--gold) !important;
  background: rgba(255,255,255,0.09) !important;
  outline: none;
}
/* Override the 16px mobile font-size for contact form too */
@media (max-width: 768px) {
  .contact-form-wrap .form-group input,
  .contact-form-wrap .form-group textarea,
  .contact-form-wrap .form-group select {
    font-size: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════
   LOGO CENTERING — block images need margin:auto
   text-align:center on parent doesn't center block imgs
══════════════════════════════════════════════════════ */
.footer-logo       { display: block; margin-left: auto; margin-right: auto; }
.footer-monogram img { margin: 0 auto; }
.monogram-divider img { margin: 0 auto; }


/* ══════════════════════════════════════════════════════
   MOBILE POLISH — COMPREHENSIVE 375px PASS
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── NAV: hamburger 44px touch target ─────────── */
  #mainNav .hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
    gap: 6px;
  }

  /* Mobile menu links — generous spacing, full-width dividers (ALZA-style) */
  #mainNav .nav-links a {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    color: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(201,160,46,0.14);
  }
  #mainNav .nav-links a:first-of-type { border-top: 1px solid rgba(201,160,46,0.14); }
  #mainNav .nav-links a:hover,
  #mainNav .nav-links a:active { color: var(--gold); background: rgba(201,160,46,0.06); }
  /* Lang button when JS moves it outside nav-links into nav-inner */
  #mainNav .nav-inner > #langBtn {
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    border-color: rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.85);
  }

  /* ── HERO ─────────────────────────────────────── */
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    background-position: center center;
  }
  .hero-bg img { object-position: center center; }
  .hero-content { padding: 0 20px; max-width: 100%; }
  .hero-content h1 { font-size: clamp(2rem, 8vw, 4rem); }
  .hero-sub { max-width: 90%; }

  /* Hero buttons: full-width on mobile */
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-btns-break { display: none; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── PAGE HERO (inner pages) ──────────────────── */
  .page-hero { padding: 140px 20px 60px !important; }
  .page-hero-content h1 { font-size: clamp(2rem, 8vw, 3.5rem); }

  /* ── SERVICES HERO ────────────────────────────── */
  .services-hero { padding: 140px 20px 60px !important; }

  /* ── SECTION PADDING REDUCTION ────────────────── */
  .stats-strip { padding: 48px 20px; }
  .about-snap { padding: 60px 20px; }
  .services-teaser { padding: 60px 20px; }
  .amenities { padding: 60px 20px; }
  .testimonials { padding: 60px 20px; }
  .testimonials-header { margin-bottom: 40px; }
  .testimonials-grid { gap: 40px; }
  .cta-banner { padding: 80px 20px; background-attachment: scroll; }
  .gallery-section { padding: 60px 0 0; }
  .contact-section { padding: 60px 20px; }
  .newsletter-section { padding: 60px 20px; }
  .blog-section { padding-top: 40px !important; }
  .reviews-section { padding: 60px 20px; }
  .reviews-cta { padding: 60px 20px !important; }
  .grounds-section { padding: 60px 20px; }
  .booking-faq { padding: 60px 20px; }

  /* About page: override inline padding on story + team */
  .story-section { padding: 60px 20px !important; }
  .team-section  { padding: 40px 20px 60px !important; }
  .values-section { padding: 60px 20px !important; }
  .story-grid { gap: 40px; }
  .story-img img { height: 280px; }

  /* ── POOL GRID: stacked at 260px ─────────────── */
  .pool-grid img { height: 260px; }

  /* ── POOL BANNER ──────────────────────────────── */
  .pool-banner img { height: 260px; }
  .pool-overlay {
    bottom: 20px;
    left: 20px;
    right: auto;
  }

  /* ── LANDSCAPE BANNER ─────────────────────────── */
  .landscape-banner { height: 260px; }

  /* ── AMENITY PHOTOS ───────────────────────────── */
  .amenity-photo.large img { height: 240px; }
  .amenity-photo.two-up img { height: 160px; }
  .amenity-photo.three-up img:first-child { height: 200px; }
  .amenity-photo.three-up img:not(:first-child) { height: 140px; }
  .amenity-full img { height: 280px; }
  .amenity-full-caption { padding: 24px 20px 20px; }

  /* ── SERVICES PAGE: konfronta grid collapse ───── */
  .konfronta-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .konfronta-grid-lodging {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(201,160,46,0.18);
    padding-top: 40px;
  }

  /* Package rows */
  .pkg-header-col { padding: 48px 20px 24px !important; }
  .pkg-features-col { padding: 24px 20px 48px !important; }
  .pkg-features-list { grid-template-columns: 1fr; gap: 12px; }

  /* ── BOOKING: pkg select grid + form ─────────── */
  .booking-form-box { padding: 32px 20px !important; }

  /* ── BUTTONS: min 48px touch target ──────────── */
  .btn-primary, .btn-outline, .btn-outline-dark {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .filter-btn { min-height: 44px; padding: 12px 20px; }

  /* Contact + booking submit: full width */
  #submitBtn { width: 100%; margin-top: 4px; }
  .booking-form-box .btn-primary[type="submit"] { width: 100%; text-align: center; justify-content: center; }

  /* ── FORMS: 16px prevents iOS zoom ───────────── */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
  .form-group textarea { min-height: 120px; }
  .form-group label { display: block; margin-bottom: 6px; font-size: 14px; }

  /* ── CONTACT PHOTOS: 200px stacked ───────────── */
  .contact-photos img { height: 200px; }
  .contact-photos { grid-template-columns: 1fr; }

  /* ── REVIEWS ──────────────────────────────────── */
  .rating-display { flex-wrap: wrap; gap: 12px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .review-card { border-right: none; }

  /* ── FOOTER ───────────────────────────────────── */
  .footer-inner { text-align: center; }
  .footer-brand p { text-align: center; }
  .footer-links, .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .footer-copy { font-size: 12px; text-align: center; }
  .footer-contact span { display: block; font-size: 15px; }

  /* ── ABOUT: team section ──────────────────────── */
  .team-list { max-width: 100%; }
  .team-member { padding-left: 20px; }

  /* ── TYPOGRAPHY ───────────────────────────────── */
  h2 { font-size: clamp(1.6rem, 6vw, 2.8rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.8rem); }
  p  { line-height: 1.75; }
  .gold-label { font-size: 11px; }
  body { font-size: 16px; }

  /* No text within 20px of edge */
  .container { padding-left: 20px; padding-right: 20px; }
  .section-dark > .container,
  .section-light > .container,
  .section-black > .container { padding-left: 20px; padding-right: 20px; }

  /* ── BLOG ─────────────────────────────────────── */
  .blog-post-item { grid-template-columns: 1fr; }
  .blog-post-img  { height: 220px; }
  .blog-post-text { padding: 32px 20px; }
  .newsletter-form { flex-direction: column; gap: 0; }
  .newsletter-form input {
    border-right: 1px solid rgba(201,160,46,0.3);
    border-bottom: none;
    min-height: 48px;
    font-size: 16px;
  }
  .newsletter-form button { min-height: 48px; }

  /* ── STATS STRIP ──────────────────────────────── */
  .stats-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat-divider { display: none; }
  .stat { padding: 0; }
  .stat-number { font-size: 2.4rem; }

  /* ── SECTION HEADER ───────────────────────────── */
  .section-header { margin-bottom: 48px; }
  .section-header h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
}

/* ── Very small (375px) overrides ─────────────────── */
@media (max-width: 480px) {
  .hero-content h1 { font-size: clamp(1.9rem, 8vw, 3rem); }
  .pkg-select-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip img { height: 160px; }
  .about-grid { gap: 32px; }
  .about-photo img { height: 240px; }
}


/* ══════════════════════════════════════════════════════
   UI POLISH — HOVER STATES, GRADIENTS, TRANSITIONS
══════════════════════════════════════════════════════ */

/* Photo strip — hover scale */
.photo-strip img { transition: transform 0.45s ease; }
.photo-strip img:hover { transform: scale(1.04); }

/* Pool banner — gradient overlay so text is always readable */
.pool-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 240px;
  background: linear-gradient(to top, rgba(8,12,20,0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.pool-overlay { z-index: 1; }
.pool-overlay .gold-label { color: var(--gold); }

/* Service cards — lift on hover */
.svc-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.svc-card:hover {
  box-shadow: 0 10px 36px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}

/* Accommodation cards — lift on hover */
.acc-card { transition: box-shadow 0.25s ease; }
.acc-card:hover { box-shadow: 0 10px 36px rgba(0,0,0,0.18); }

/* Package cards — subtle lift */
.pkg-card { transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.pkg-card:hover { transform: translateY(-3px); border-color: rgba(201,160,46,0.5); }

/* Testimonials — subtle left border on hover */
.testimonial { transition: padding-left 0.25s ease; }
.testimonial:hover { padding-left: 8px; }

/* Gallery section label — ensure visibility on dark */
.gallery-section-label { color: var(--gold); }

/* Stats strip stat-number animation on scroll (handled by fade-in) */
.stat-number { transition: color 0.3s; }

/* About photo — subtle scale on hover */
.about-photo img { transition: transform 0.5s ease; }
.about-photo:hover img { transform: scale(1.02); }

/* Landscape banner text legibility improvement */
.landscape-banner-overlay .gold-label { opacity: 0.9; }

/* Footer links — consistent spacing */
.footer-copy a { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile: pool banner overlay position */
@media (max-width: 768px) {
  .pool-overlay { left: 20px; bottom: 20px; }
}

/* Smooth image transitions across the board */
.svc-card-img img,
.acc-card-img img,
.gallery-grid img { transition: transform 0.45s ease; }

/* Ensure gallery images don't clip outside their container on hover */
.gallery-grid { overflow: hidden; }
.gallery-section-label { margin-bottom: 20px; }


/* ══════════════════════════════════════════════════════
   HERO — CINEMATIC ENTRANCE ANIMATION
══════════════════════════════════════════════════════ */
@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Override the generic fade-in for the hero — animate immediately on load */
.hero .hero-content {
  opacity: 0;
  transform: translateY(36px);
  animation: heroEntrance 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

/* Scroll hint fades in after hero content */
.hero-scroll-hint {
  opacity: 0;
  animation: hintFadeIn 0.8s ease 1.2s forwards;
}
@keyframes hintFadeIn {
  to { opacity: 1; }
}


/* ══════════════════════════════════════════════════════
   NAV — ACTIVE PAGE LINK INDICATOR
══════════════════════════════════════════════════════ */
#nav-links a {
  position: relative;
}

#nav-links a.active {
  color: var(--gold) !important;
}

#nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* Mobile: active link keeps its color inside dropdown */
@media (max-width: 768px) {
  #nav-links a.active {
    background: rgba(201,160,46,0.08) !important;
    border-left: 2px solid var(--gold) !important;
    padding-left: 22px !important;
  }
  #nav-links a.active::after { display: none; }
}


/* ══════════════════════════════════════════════════════
   FOOTER — GRAY RECTANGLE FIX
   logo-full.png is a JPEG with an opaque background.
   Hide the image and always render the text logo.
══════════════════════════════════════════════════════ */
footer .footer-logo {
  display: none;
}
footer .footer-logo-text {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════
   STATS STRIP — ENHANCED
══════════════════════════════════════════════════════ */
.stats-strip {
  border-top: 1px solid rgba(201,160,46,0.2);
}

.stat-number {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
}


/* ══════════════════════════════════════════════════════
   GALLERY — IMAGE FADE-IN ON LAZY LOAD
══════════════════════════════════════════════════════ */
.gal-item img {
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.45s ease;
}
.gal-item img.loaded {
  opacity: 1;
}
/* Fallback: images already loaded when DOM runs */
.gal-item img.loaded { opacity: 1; }


/* ══════════════════════════════════════════════════════
   PACKAGE CARDS — FEATURED HIGHLIGHT ENHANCEMENT
══════════════════════════════════════════════════════ */
.pkg-card.featured {
  border-color: var(--gold);
  background: rgba(201,160,46,0.12);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201,160,46,0.15);
  position: relative;
}
.pkg-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--black);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 12px;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════
   HERO SCROLL HINT — CIRCLE BUTTON
══════════════════════════════════════════════════════ */
.hero-scroll-hint {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.hero-scroll-hint:hover {
  border-color: var(--gold);
  color: var(--gold);
}


/* ══════════════════════════════════════════════════════
   SECTION HEADER — CONSISTENT SPACING
══════════════════════════════════════════════════════ */
.section-header .gold-label {
  margin-bottom: 12px;
}
.section-header h2 {
  margin-top: 0;
}


/* ══════════════════════════════════════════════════════
   LANDSCAPE BANNER — PARALLAX SUPPORT
══════════════════════════════════════════════════════ */
.landscape-banner > img {
  will-change: transform;
}


/* ══════════════════════════════════════════════════════
   CONTACT MAP — REMOVE GRAYSCALE
══════════════════════════════════════════════════════ */
.map-container iframe,
.idx-map iframe {
  filter: none !important;
}

/* ════ A11Y widget placement (June 2026) ════
   ADA/WCAG do not require the accessibility launcher to float over content —
   only that the controls are reachable and keyboard-navigable (WCAG 2.1.1).
   Moved to the bottom-LEFT corner so it never collides with the chat launcher
   (bottom-right) or page content. Toolbar opens upward from the button. */
/* A11Y widget — June 2026: no longer floats over the UI. The container sits
   after the footer in the DOM on every page, so static positioning renders it
   as a quiet utility bar at the very bottom of the site. ADA/WCAG satisfied:
   reachable in tab order, keyboard-operable, and linked from the skip-nav.
   (Selector anchors on the stable #a11y-toggle-btn child because the
   container's aria-label is translated by the i18n system.) */
div.fixed:has(> #a11y-toggle-btn) {
  position: static !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #080C14;
  padding: 20px 16px 28px;
  border-top: 1px solid rgba(201, 160, 46, 0.15);
}
div.fixed:has(> #a11y-toggle-btn) #a11y-toolbar {
  margin-top: 10px;
}

/* ── Motion polish (Inspira Ranch · added for smoother feel) ─────────────── */
:root { --ease-smooth: cubic-bezier(.22, 1, .36, 1); }

.fade-in { transition-timing-function: var(--ease-smooth), var(--ease-smooth); will-change: opacity, transform; }
.fade-in.visible { will-change: auto; }

/* Opt-in gentle hover lift: add class="hover-lift" to cards/tiles/buttons */
.hover-lift { transition: transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), opacity .7s var(--ease-smooth); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(8,12,20,.18); }

/* Lenis smooth-scroll support */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── FAQ SECTION ─────────────────────────────────── */
.faq-section { padding: 6rem 0; background: #0D1B3E; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.faq-item { background: rgba(255,255,255,.04); border: 1px solid rgba(201,160,46,.2); border-radius: 4px; padding: 1.5rem; }
.faq-q { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: #C9A02E; margin-bottom: .75rem; line-height: 1.4; }
.faq-a { color: #8A95A3; font-size: .92rem; line-height: 1.75; }
@media(max-width:768px) { .faq-grid { grid-template-columns: 1fr; } }

/* Accessibility: honor reduced-motion everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hover-lift { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Konfronta brand link (points to konfrontaonline.com) */
.konfronta-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,160,46,.6);transition:color .2s;}
.konfronta-link:hover{color:#C9A02E;}

/* ── SEO silo sections + fact tables (2026-09-22) ── */
.ir-silo { padding: 5rem 0; background: #F5F0E8; color: #0D1B3E; }
.ir-silo .container { max-width: 960px; padding: 0 24px; }
.ir-silo h2 { color: #0D1B3E; margin: .5rem 0 1.25rem; }
.ir-silo p { color: #3a4556; font-size: 1.02rem; line-height: 1.8; margin: 0 0 1rem; }
.ir-facts { width: 100%; border-collapse: collapse; margin-top: 1.75rem; background: #fff; border: 1px solid rgba(201,160,46,.35); font-size: .95rem; }
.ir-facts caption { text-align: left; font-weight: 600; color: #0D1B3E; padding: 0 0 .6rem; font-size: 1rem; }
.ir-facts th, .ir-facts td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-top: 1px solid rgba(13,27,62,.08); line-height: 1.6; }
.ir-facts th { width: 32%; color: #0D1B3E; font-weight: 600; background: rgba(201,160,46,.08); }
.ir-facts td { color: #3a4556; }
@media (max-width: 640px) {
  .ir-silo { padding: 3.5rem 0; }
  .ir-facts th, .ir-facts td { display: block; width: 100%; }
  .ir-facts th { border-top: 1px solid rgba(201,160,46,.35); }
  .ir-facts td { border-top: 0; padding-top: 0; }
}

/* ══ NAV FIX (2026-09-27) ═══════════════════════════════════════════════
   1. The wordmark sat flush against "HOME" at every desktop width, and
      between 769px and 1024px the link row overflowed off the right edge.
   2. The mobile menu now opens and closes on an eased curve with the links
      fading up in sequence, instead of a flat 0.3s opacity swap.
   ═════════════════════════════════════════════════════════════════════ */

/* Breathing room between the wordmark and the first link, at every width. */
#mainNav .nav-inner { width: 100%; gap: clamp(28px, 5vw, 72px); flex-wrap: nowrap; }
#mainNav .nav-links { flex-wrap: nowrap; }

/* Tighten the row before it can ever collide, on smaller laptops. */
@media (max-width: 1200px) {
  #mainNav .nav-links { gap: 24px; }
  #mainNav .nav-links a { font-size: 12px; letter-spacing: 0.6px; }
  .nav-logo-text { font-size: 1.08rem; letter-spacing: 2px; }
}

/* Hand over to the hamburger while the full row still fits comfortably.
   Below this the desktop row used to run off the right edge of the screen. */
@media (max-width: 1024px) {
  #mainNav .hamburger { display: flex; }
  #mainNav .nav-logo-text,
  #mainNav .nav-inner > #langBtn,
  #mainNav .hamburger { position: relative; z-index: 1002; }
  /* keep the wordmark hard left once the links leave the bar */
  #mainNav .nav-logo-text { margin-right: auto; }
  #mainNav .nav-inner { width: 100%; gap: 14px; }

  #mainNav .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    z-index: 1001;
    background: rgba(10,16,33,0.985);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-height: none;
    overflow-y: auto;
    padding: 92px 0 40px;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* out: quick and linear-ish. in: eased, slightly longer, feels deliberate */
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0.28s;
  }
  #mainNav .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.42s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }

  /* Links slide up one after another as the panel opens. */
  #mainNav .nav-links > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.38s cubic-bezier(.16, 1, .3, 1);
  }
  #mainNav .nav-links.open > * { opacity: 1; transform: translateY(0); }
  #mainNav .nav-links.open > *:nth-child(1) { transition-delay: .06s; }
  #mainNav .nav-links.open > *:nth-child(2) { transition-delay: .10s; }
  #mainNav .nav-links.open > *:nth-child(3) { transition-delay: .14s; }
  #mainNav .nav-links.open > *:nth-child(4) { transition-delay: .18s; }
  #mainNav .nav-links.open > *:nth-child(5) { transition-delay: .22s; }
  #mainNav .nav-links.open > *:nth-child(6) { transition-delay: .26s; }
  #mainNav .nav-links.open > *:nth-child(7) { transition-delay: .30s; }

  #mainNav .nav-links a {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 0 32px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    color: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(201,160,46,0.14);
  }
  #mainNav .nav-links a:first-of-type { border-top: 1px solid rgba(201,160,46,0.14); }
  #mainNav .nav-links a:hover,
  #mainNav .nav-links a:active { color: var(--gold); background: rgba(201,160,46,0.06); }

  /* Hamburger: 44px touch target, smoother morph into the X */
  #mainNav .hamburger {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
    gap: 6px;
  }
  #mainNav .hamburger span {
    margin: 0;
    transition: transform 0.32s cubic-bezier(.16, 1, .3, 1), opacity 0.18s ease;
  }
  #mainNav .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #mainNav .hamburger.active span:nth-child(2) { opacity: 0; }
  #mainNav .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  body:has(#nav-links.open) #alza-chat-btn { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #mainNav .nav-links,
  #mainNav .nav-links > *,
  #mainNav .hamburger span { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ══ MENU CLIPPED AFTER SCROLL FIX (2026-09-28) ══════════════════════════
   Once the page scrolls, #mainNav gets .scrolled, which adds
   backdrop-filter: blur(). Any backdrop-filter (or transform/filter) on an
   ancestor turns it into the containing block for position:fixed children,
   so the full-screen menu overlay was sized to the thin nav bar instead of
   the screen: only "Home" showed and the rest was cut off. At overlay widths
   the bar is already ~97% opaque navy, so the blur adds nothing; drop it. */
@media (max-width: 1024px) {
  #mainNav,
  #mainNav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Hero grows to fit its content on short screens instead of overflowing
   under the fixed nav (small phones, ~667px-tall laptop windows). */
.hero {
  box-sizing: border-box;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 104px 0 84px;
}
@media (max-height: 760px) {
  .hero-content h1 { margin: 10px 0 12px; }
  .hero-rule { margin: 12px auto; }
  .hero-content p { margin-bottom: 24px; line-height: 1.6; }
}


/* ══ GALLERY ARROWS + HORSE PANEL + EVENT BUNDLE NOTE (2026-10-05) ═══════ */
.gallery-stage { position: relative; }
/* Rails span the full height of the photos; the button inside is sticky so
   it stays at mid-screen while scrolling through a tall category. */
.gal-nav-rail {
  position: absolute; top: 0; bottom: 0; width: 52px;
  pointer-events: none; z-index: 5;
}
.gal-nav-rail-prev { left: -76px; }
.gal-nav-rail-next { right: -76px; }
.gal-nav {
  position: sticky; top: calc(50vh - 26px);
  margin-top: 120px;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,27,62,0.88);
  border: 1.5px solid #C9A02E;
  color: #E2C266;
  font-size: 34px; line-height: 1; padding: 0 0 4px;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.gal-nav:hover, .gal-nav:focus-visible { background: #C9A02E; color: #0D1B3E; transform: scale(1.06); }
.gal-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Narrower than the container + rails: float the arrows over the photo edges */
@media (max-width: 1380px) {
  .gal-nav-rail-prev { left: 8px; }
  .gal-nav-rail-next { right: 8px; }
}
@media (max-width: 768px) {
  .gal-nav-rail { width: 44px; }
  .gal-nav-rail-prev { left: 4px; }
  .gal-nav-rail-next { right: 4px; }
  .gal-nav { width: 44px; height: 44px; font-size: 30px; margin-top: 60px; }
}
.gal-hint {
  text-align: center;
  margin: -1.25rem 0 1.25rem;
  color: #D9D2C3;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.gal-hint-count { color: #E2C266; font-weight: 600; }
@media (max-width: 768px) { .gal-hint { margin: -0.75rem 0 1rem; } }
.gal-credit { text-align: center; margin-top: 14px; font-size: 0.8rem; color: #D9D2C3; }
.gal-credit a { color: #E2C266; text-decoration: underline; text-underline-offset: 3px; }

/* Personalized event bundle note */
.pkg-note { background: #0D1B3E; padding: 64px 20px; }
.pkg-note-card {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: 40px 32px;
  border: 1px solid rgba(201,160,46,0.55);
  border-radius: 14px;
  /* Solid color on purpose: a gradient here plus the .fade-in animation
     crashed WebKit (Safari engine) when switching gallery tabs in testing. */
  background: #112249;
}
.pkg-note-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: #FFFFFF; font-weight: 400; font-style: italic;
  margin: 12px 0 14px; line-height: 1.2;
}
.pkg-note-card > p { color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.7; max-width: 600px; margin: 0 auto; }
.pkg-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 28px; padding: 0; }
.pkg-chips li {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(201,160,46,0.6);
  color: #F5F0E8; font-size: 0.88rem; font-weight: 500;
  background: rgba(201,160,46,0.08);
}
.pkg-note-btn { display: inline-block; min-width: 260px; }
.pkg-note-card .pkg-note-sub { margin-top: 14px; font-size: 0.85rem; color: rgba(255,255,255,0.75); }
@media (max-width: 600px) {
  .pkg-note { padding: 44px 16px; }
  .pkg-note-card { padding: 28px 18px; }
  .pkg-chips li { font-size: 0.82rem; padding: 7px 13px; }
  .pkg-note-btn { min-width: 0; width: 100%; }
}

/* ══ CONTRAST FIXES ON DARK/NAVY BACKGROUNDS (2026-10-05) ═══════════════
   Footer fine print used Tailwind gray-500/600/700 on the #080C14 footer
   (1.9:1 to 4:1, below WCAG AA 4.5:1). Lifted to readable grays (~7-8:1). */
footer .text-gray-500 { color: #AEB6C2; }
footer .text-gray-600,
footer .text-gray-700 { color: #A3ABB8; }
footer a.text-gray-500:hover,
footer a.text-gray-600:hover { color: #C9A02E; }
/* Cookie banner "Disagree": had no background, so browsers drew their
   default light-gray button behind light-gray text (1.3:1). */
button[onclick^="rejectAllCookies"] {
  background-color: transparent;
  color: #E5E7EB;
  border-color: #9CA3AF;
}
/* Gold link text on the cream sections (2.2:1) -> darker gold (5.4:1). */
.section-light .text-link { color: #7A5C0E; border-bottom-color: #7A5C0E; }
.section-light .text-link:hover { color: #0D1B3E; border-bottom-color: #0D1B3E; }
/* Gold team titles on cream (about page) -> darker gold for AA contrast */
.section-light .team-title,
.section-light a.konfronta-link { color: #7A5C0E; }