/* ============================================================
   STAYS PERKS — Global Stylesheet
   Virtuoso hotel perks, operated by Geisel Power Travel
   Color Palette: Deep Navy, Warm Gold, Ivory, Stone
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #0C1F3F;
  --navy-light: #162D54;
  --gold: #C5A258;
  --gold-light: #D4B97A;
  --gold-dark: #A88B3D;
  --ivory: #FAF8F5;
  --stone: #E8E3DC;
  --warm-gray: #8B8680;
  --text: #2C2A27;
  --text-light: #6B6660;
  --white: #FFFFFF;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --max-width: 1280px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ivory);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul, ol { list-style: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--navy); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; font-weight: 600; }

.accent-text {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--gold);
  font-size: 1.15em;
}

/* ─────────────────────────────────────────────────────────────────────
   Eyebrow — the small gold uppercase label above a heading.
 
   This was previously redefined inside eight different pages under four
   different class names, which is why the weight drifted (600 on the
   membership hero, 700 in every other section of the same page), the size
   drifted (0.75 / 0.72 / 0.65rem) and the tracking drifted (0.2em / 0.22em /
   0.25em / 2px). It lives here once now. Page-level copies were deleted;
   please add a modifier here rather than a local override.
 
   Two variants, and the difference carries meaning:
     .eyebrow / .section-label  — plain gold text, labels a section mid-page
     .hero-label / .virtuoso-tag — the same text in a bordered chip, used for
                                   the badge at the top of a page hero
   ───────────────────────────────────────────────────────────────────── */
.eyebrow,
.section-label,
.hero-label,
.virtuoso-tag,
.hub-section-label,
.hub-cta-band__eyebrow,
.hub-hero__eyebrow,
.status-header__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  display: block;
}

/* Chip variant — hero badges. `.eyebrow--chip` opts any eyebrow in. */
.hero-label,
.virtuoso-tag,
.eyebrow--chip,
.hub-hero__eyebrow,
.membership-hero .eyebrow,
.hero-band .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(197, 162, 88, 0.12);
  border: 1px solid rgba(197, 162, 88, 0.35);
  border-radius: 2px;
  margin-bottom: 24px;
}

.hero-label::before,
.virtuoso-tag::before,
.eyebrow--chip::before,
.membership-hero .eyebrow::before,
.hero-band .eyebrow::before {
  content: '\25C6'; /* ◆ */
  font-size: 8px;
  line-height: 1;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 640px;
  line-height: 1.8;
}

/* --- Navigation --- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.2rem 0;
  transition: var(--transition);
}
.site-nav.scrolled {
  background: rgba(12, 31, 63, 0.97);
  backdrop-filter: blur(12px);
  padding: 0.8rem 0;
  box-shadow: 0 1px 3px rgba(12,31,63,0.08), 0 8px 24px rgba(12,31,63,0.06), 0 24px 48px rgba(197,162,88,0.04);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.nav-logo span { color: var(--gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  justify-content: center;
}
.nav-links a {
  /* Menu typography is set HERE and only here — the brand serif, per the
     approved reference (Journal nav). Every page shares this rule; do not
     re-declare nav fonts inside individual pages. */
  font-family: var(--font-accent);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  position: relative;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }

/* Right side: Admin + CTA */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.nav-cta {
  padding: 0.5rem 1.4rem;
  border: 1.5px solid var(--gold);
  background: var(--gold);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(197,162,88,0.35);
}
.nav-cta::after { display: none !important; }

/* Admin link — subtle */
.nav-admin {
  font-size: 0.65rem;
  opacity: 0.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.nav-admin:hover { opacity: 1; }
.nav-admin svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
  margin-right: 3px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  /* 44px hit area (WCAG target size) without moving the header layout. */
  padding: 14px 10px;
  margin: -10px -6px;
  min-width: 44px;
  min-height: 44px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  transition: var(--transition);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,31,63,0.85) 0%, rgba(12,31,63,0.5) 50%, rgba(12,31,63,0.3) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 8rem 0 4rem;
}
/* Hero headline — canonical (membership reference). One size, weight, and
   color for every section hero; page-local h1 size rules were deleted, not
   out-specified. Two deliberate exceptions keep their own treatment via
   page-level rules: index.html (animated flagship hero) and property.html
   (headlines a hotel name, sized down). */
.hero h1, .page-hero h1, .hotels-hero h1, .membership-hero h1,
.explore-hero h1, .journal-hero h1, .article-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ivory);
  margin-bottom: 1.5rem;
}
/* Gold headline accent — canonical. This was 700-italic on six pages,
   400 on membership and faq, 500 on index, and not even gold on about;
   defined here once so every hero highlights the same way. Page rules
   with higher specificity were deleted, not out-specified. */
h1 em,
h1 span[data-fx-decode],
.hero h1 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--gold);
}
.hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 560px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(197,162,88,0.3); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn-outline:hover { background: var(--gold); color: var(--navy); }
.btn-outline-dark {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}
.btn-outline-dark:hover { background: var(--navy); color: var(--white); }
.btn-white {
  background: var(--white);
  color: var(--navy);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Sections --- */
.section {
  padding: 7rem 0;
}
.section-dark {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(197,162,88,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(197,162,88,0.04) 0%, transparent 50%);
  pointer-events: none;
  animation: sectionDarkMesh 10s ease-in-out infinite alternate;
}
@keyframes sectionDarkMesh {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark .section-desc { color: rgba(255,255,255,0.7); }
.section-stone { background: var(--stone); }

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-header h2 { margin-bottom: 1rem; }
.section-header .section-desc { margin: 0 auto; }

/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: 2px;
  overflow: hidden;
  transition: var(--transition);
  will-change: transform;
  box-shadow: 0 1px 3px rgba(12,31,63,0.08), 0 8px 24px rgba(12,31,63,0.06), 0 24px 48px rgba(197,162,88,0.04);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 4px 8px rgba(12,31,63,0.1), 0 16px 40px rgba(12,31,63,0.08), 0 32px 64px rgba(197,162,88,0.06); }
.card-img {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--navy);
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--gold);
}
.card-body { padding: 2rem; }
.card-body h3 { margin-bottom: 0.5rem; font-size: 1.3rem; }
.card-body p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 1.5rem; }
.card-link {
  /* 24px+ tap height on touch screens */
  padding: 6px 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}
.card-link:hover { color: var(--navy); gap: 0.8rem; }

/* --- Grid Layouts --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

/* --- Virtuoso Badge --- */
.virtuoso-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(197,162,88,0.4);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.virtuoso-badge svg { width: 16px; height: 16px; }

/* --- Stats Bar --- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 4rem 0;
  text-align: center;
}
.stat-item .stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-item .stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Testimonials --- */
.testimonial-card {
  background: var(--white);
  padding: 3rem;
  border-left: 3px solid var(--gold);
  transition: var(--transition);
}
.testimonial-card:hover {
  box-shadow: 0 8px 24px rgba(12,31,63,0.06), 0 24px 48px rgba(197,162,88,0.04);
}
.testimonial-card blockquote {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.testimonial-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Split Layout --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 600px;
}
.split-img {
  background-size: cover;
  background-position: center;
  min-height: 400px;
}
.split-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--gold);
}
.split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
}
.split-content h2 { margin-bottom: 1.5rem; }
.split-content p { margin-bottom: 1.5rem; color: var(--text-light); }

/* --- Perks Highlight --- */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.perk-item {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.perk-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.perk-item h4 {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
}
.perk-item p {
  font-size: 0.9rem;
  color: var(--text-light);
}
.section-dark .perk-item p { color: rgba(255,255,255,0.65); }

/* --- FAQ Accordion --- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--stone);
  padding: 1.5rem 0;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  padding: 0;
  transition: color 0.3s ease;
}
.faq-question:hover { color: var(--gold-dark); }
.faq-question .faq-icon {
  font-size: 1.5rem;
  color: var(--gold);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  opacity: 0;
}
.faq-answer-inner {
  padding: 1rem 0 0;
  color: var(--text-light);
  line-height: 1.8;
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-item.active .faq-answer { max-height: 500px; opacity: 1; }

/* --- Contact Form --- */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--stone);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  transition: var(--transition);
  border-radius: 2px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197,162,88,0.15);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* --- Footer --- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(197,162,88,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 35% 40% at 90% 10%, rgba(197,162,88,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.footer-brand h3 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.footer-brand h3 span { color: var(--gold); }
.footer-brand p { font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.5rem; }
.footer-virtuoso-text {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer-virtuoso-text span { font-size: 0.7em; vertical-align: super; }
.footer-virtuoso-text:hover { opacity: 1; color: var(--gold-light); }
.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.footer-col a {
  /* Comfortable tap height on touch screens. */
  display: inline-block;
  padding: 5px 0;
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  position: relative;
  z-index: 1;
}
.footer-social {
  display: flex;
  gap: 1.5rem;
}
.footer-social a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}
.footer-social a:hover { color: var(--gold); }
.footer-social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Editorial Dynamics: Cards --- */
.card,
.feature-card,
.agent-card,
.perk-card,
.testimonial-card,
.destination-card,
.faq-item,
.form-card,
.breakdown-item,
.step-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover,
.feature-card:hover,
.perk-card:hover,
.testimonial-card:hover,
.destination-card:hover,
.step-card:hover {
  box-shadow: 0 4px 8px rgba(12,31,63,0.06), 0 22px 44px rgba(12,31,63,0.08), 0 32px 64px rgba(197,162,88,0.04);
}

/* --- Editorial Dynamics: Form Inputs --- */
input, select, textarea {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 162, 88, 0.08);
  outline: none;
}

/* --- Editorial Dynamics: Accordion/FAQ --- */
.faq-answer,
.accordion-body {
  transition: max-height 220ms ease, opacity 180ms ease;
}
.faq-item {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.faq-item:hover {
  border-color: var(--gold);
}
.faq-toggle {
  transition: transform 180ms ease, background 180ms ease;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split-content { padding: 3rem; }
}

/* --- Navigation collapse ---------------------------------------------------
   The nav needs 1120px to fit on inner pages and 1184px on the homepage (which
   carries the extra Admin link). The hamburger used to appear only at 768px, so
   between 769px and 1184px the links ran off the right edge — and because html
   and body are overflow-x:hidden there was no scrollbar to reveal them. iPad
   portrait (810-834px) sat squarely inside that dead band with the "Book a Call"
   button cut off or entirely off-screen.

   Collapsing at 1200px covers both layouts with margin. Kept separate from the
   768px block below, which is layout-only, so the two can move independently. */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--navy);
    padding: 2rem;
    gap: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
  .nav-inner { padding: 0 1rem; }
  .hero-content { padding: 7rem 0 3rem; }
  .container { padding: 0 1.25rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-content { padding: 2.5rem 2rem; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .perk-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 4rem 0; }
  .btn-group { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-social { justify-content: center; }
}

/* --- Scroll Reveal Animations --- */
.fade-in,
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.visible,
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* --- Gradient Text Effect --- */
.gradient-text {
  color: var(--navy);
  -webkit-text-fill-color: var(--navy);
}
/* On dark sections, use the gold gradient */
.section-dark .gradient-text {
  background: linear-gradient(135deg, var(--gold) 0%, #EDE0C8 45%, var(--gold-light) 70%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- CTA Button Glow/Pulse --- */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(197, 162, 88, 0.25); }
  50% { box-shadow: 0 4px 32px rgba(197, 162, 88, 0.45), 0 0 60px rgba(197, 162, 88, 0.12); }
}
.btn-glow {
  animation: ctaGlow 3s ease-in-out infinite;
}
.btn-glow:hover {
  animation: none;
  box-shadow: 0 8px 32px rgba(197, 162, 88, 0.5);
}

/* --- Enhanced Card Glassmorphism --- */
.glass-hover {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.glass-hover:hover {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(197, 162, 88, 0.2);
  box-shadow: 0 4px 8px rgba(12,31,63,0.06),
              0 16px 40px rgba(12,31,63,0.08),
              0 32px 64px rgba(197,162,88,0.06);
}

/* --- Stat Counter Animation --- */
@keyframes statCountUp {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-animate .stat-number {
  animation: statCountUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- AI Agent Section (dark themed) --- */
.section-agent {
  background: linear-gradient(180deg, #0F172A 0%, #0C1225 60%, #0F172A 100%);
  color: var(--white);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.section-agent::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 80%, rgba(99,102,241,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(197,162,88,0.06) 0%, transparent 50%);
  pointer-events: none;
}
/* Agent section animated grid */
.section-agent::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 70%);
  pointer-events: none;
  animation: agentGridDrift 20s ease-in-out infinite alternate;
}
@keyframes agentGridDrift {
  0% { transform: translateY(0) scale(1); opacity: 0.5; }
  100% { transform: translateY(-10px) scale(1.02); opacity: 1; }
}
.section-agent .section-agent-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.section-agent .agent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #818CF8;
  margin-bottom: 1.5rem;
  padding: 6px 16px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 999px;
}
.section-agent .agent-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: #818CF8;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.section-agent h2 {
  color: #E2E8F0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.section-agent h2 .gold-accent {
  color: var(--gold);
}
.section-agent .agent-subtitle {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.section-agent .agent-desc {
  font-size: 1.05rem;
  color: #94A3B8;
  max-width: 560px;
  line-height: 1.8;
  margin-bottom: 3.5rem;
}

/* Agent feature cards */
.agent-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
}
.agent-feature-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-radius: 16px;
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.agent-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.agent-feature-card:hover::before { opacity: 1; }
.agent-feature-card:hover {
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.agent-feature-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.agent-feature-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99,102,241,0.4), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.agent-feature-icon--discover { background: rgba(99,102,241,0.15); }
.agent-feature-icon--route { background: rgba(197,162,88,0.12); }
.agent-feature-icon--pay { background: rgba(16,185,129,0.15); }
.agent-feature-card h3 {
  color: #E2E8F0;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
}
.agent-feature-card p {
  color: #94A3B8;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.btn-agent-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 24px rgba(99,102,241,0.35);
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.btn-agent-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
  color: white;
}
.btn-agent-cta svg { width: 18px; height: 18px; }

/* Agent section responsive */
@media (max-width: 768px) {
  .agent-features { grid-template-columns: 1fr; }
  .section-agent { padding: 5rem 0; }
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-2 { margin-top: 2rem; }

/* --- Elevation Pass — Refinements ─────────────────────────── */

/* Hero parallax utility */
.hero-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@supports (-webkit-overflow-scrolling: touch) {
  .hero-parallax { background-attachment: scroll; }
}

/* Glassmorphism for membership/pricing cards */
.glass-card,
.membership-card,
.pricing-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(12,31,63,0.08), 0 8px 24px rgba(12,31,63,0.06), 0 24px 48px rgba(197,162,88,0.04);
}

/* Richer interactive shadows for buttons */
.btn:hover, .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(197, 162, 88, 0.25), 0 4px 12px rgba(12, 31, 63, 0.1);
}

/* Smoother hover states — GPU hint */
.btn, .card, .card-link, .nav-link {
  will-change: transform;
}

/* Warm layered shadow for section containers */
.section-elevated {
  box-shadow: 0 1px 3px rgba(12,31,63,0.08),
              0 8px 24px rgba(12,31,63,0.06),
              0 24px 48px rgba(197,162,88,0.04);
}

/* Mobile audit — small screen fixes */
@media (max-width: 480px) {
  .nav-inner { padding: 0 0.75rem; }
  .stats-bar { grid-template-columns: 1fr; gap: 1.5rem; }
  .container { padding: 0 1rem; }
  .split-content { padding: 2rem 1.25rem; }
  .testimonial-card { padding: 2rem 1.5rem; }
  .btn { padding: 0.9rem 2rem; font-size: 0.75rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-social { justify-content: center; }
}