/* ═══════════════════════════════════════════════════════════════
   JAI INDIA VOYAGE — Design System
   Premium Heritage & Cultural Tours
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Colors */
  --color-primary: #1b3a2d;
  --color-primary-light: #2a5a44;
  --color-primary-dark: #0f1a14;
  --color-secondary: #c8a96e;
  --color-secondary-light: #d4bc8a;
  --color-secondary-dark: #a88b4a;
  --color-accent: #e85d3a;
  --color-accent-light: #f07a5c;
  --color-accent-dark: #c4452a;
  --color-dark: #0f1a14;
  --color-light: #f8f5f0;
  --color-white: #ffffff;
  --color-text: #2c2c2c;
  --color-text-light: #6b7280;
  --color-text-inverse: #f3f4f6;
  --color-border: #e5e1da;
  --color-overlay: rgba(15, 26, 20, 0.65);

  /* Typography */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: 6rem;

  /* Sizing */
  --max-width: 1280px;
  --max-width-narrow: 900px;
  --navbar-height: 80px;
  --border-radius: 8px;
  --border-radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);
}

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

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

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

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

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

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-light);
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-dark);
}

/* ── Typography ── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
}
h4 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.font-accent {
  font-family: var(--font-accent);
}

/* ── Layout Utilities ── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.section {
  padding: var(--space-section) 0;
}

.section--dark {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-secondary);
}

.section--dark p {
  color: rgba(243, 244, 246, 0.75);
}

.section--cream {
  background-color: #f2ede4;
}

/* ── Section Header ── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section--dark .section-label {
  color: var(--color-secondary);
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.section--dark .section-subtitle {
  color: rgba(243, 244, 246, 0.6);
}

/* A divider closing a header already supplies breathing room, so it drops its
   own bottom margin and lets .section-header own the gap to the next block. */
.section-header > .gold-divider:last-child {
  margin-bottom: 0;
}

/* A single centred action closing a section (e.g. "View All Destinations") */
.section-action {
  margin-top: var(--space-2xl);
  text-align: center;
}

/* ── Gold Divider ── */
.gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-lg) auto;
  max-width: 200px;
}

.gold-divider::before,
.gold-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-secondary);
}

.gold-divider-icon {
  color: var(--color-secondary);
  font-size: 1.25rem;
  display: inline-block;
  animation: rotate-mandala 20s linear infinite;
  line-height: 1;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(232, 93, 58, 0.3);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(232, 93, 58, 0.4);
}

.btn--secondary {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

.btn--gold:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(200, 169, 110, 0.4);
}

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  transition: all var(--transition-normal);
}

.navbar--transparent {
  background: transparent;
}

.navbar--solid {
  background: rgba(15, 26, 20, 0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* Mirrors .container exactly (same max-width AND same inner padding) so the
   logo lines up with every heading and card below it. Padding used to sit on
   .navbar itself, which pushed the bar's content 32px wider than the page. */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.navbar__logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.navbar__logo-text {
  display: flex;
  flex-direction: column;
}

.navbar__brand {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
}

.navbar__tagline {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 500;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, var(--space-xl));
}

.navbar__link {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.03em;
  transition: color var(--transition-fast);
  position: relative;
}

.navbar__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-normal);
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--color-white);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  width: 100%;
}

.navbar__cta {
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
}

.navbar__brochure {
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(200, 169, 110, 0.75);
  color: var(--color-secondary-light);
  font-size: 0.78rem;
  white-space: nowrap;
}

.navbar__brochure:hover {
  color: var(--color-primary-dark);
  background: var(--color-secondary);
  transform: translateY(-2px);
}

/* Mobile Menu Toggle */
.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.navbar__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition-fast);
}

.navbar__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar__toggle.active span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

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

.hero--short {
  height: 55vh;
  min-height: 400px;
}

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

.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 26, 20, 0.4) 0%,
    rgba(15, 26, 20, 0.6) 50%,
    rgba(15, 26, 20, 0.85) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 var(--space-xl);
}

.hero__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-lg);
  padding: 0.4rem 1.2rem;
  border: 1px solid rgba(200, 169, 110, 0.4);
  border-radius: 50px;
}

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  line-height: 1.1;
}

.hero__title em {
  font-style: italic;
  color: var(--color-secondary);
}

.hero__subtitle {
  font-family: var(--font-accent);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-2xl);
  font-style: italic;
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: float 3s ease-in-out infinite;
}

.hero__scroll-indicator span {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-secondary), transparent);
}

@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.dest-card {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.dest-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.dest-card:hover .dest-card__img {
  transform: scale(1.08);
}

.dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 20, 0.9) 0%, rgba(15, 26, 20, 0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-xl);
  transition: background var(--transition-normal);
}

.dest-card:hover .dest-card__overlay {
  background: linear-gradient(
    to top,
    rgba(15, 26, 20, 0.95) 0%,
    rgba(15, 26, 20, 0.35) 60%,
    transparent 100%
  );
}

.dest-card__region {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-xs);
}

.dest-card__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.dest-card__meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-md);
}

.dest-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dest-card__desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.dest-card:hover .dest-card__desc {
  max-height: 100px;
}

/* ═══════════════════════════════════════════════
   FEATURE CARDS (Why Choose Us)
   ═══════════════════════════════════════════════ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.feature-card {
  padding: var(--space-2xl);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-normal);
  border: 1px solid var(--color-border);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.feature-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  color: var(--color-secondary);
  font-size: 1.5rem;
  transition: all var(--transition-normal);
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.05);
  animation: diya-glow 2s infinite var(--ease-smooth);
}

.feature-card h4 {
  margin-bottom: var(--space-sm);
}

.feature-card p {
  font-size: 0.9rem;
}

.csr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

/* CSR cards reuse .feature-card on the light #F8F5F0 section */
.feature-card--csr {
  background: var(--color-white);
  border-color: var(--color-border);
}

.csr-card__avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.csr-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Collapse handled in the RESPONSIVE section (1024px → 2 cols, 768px → 1 col)
   so every card grid on the site breaks at the same widths. */

/* ═══════════════════════════════════════════════
   VERIFIED REVIEW MARQUEE — infinite horizontal scroll
   ═══════════════════════════════════════════════ */
.review-marquee {
  --review-card-w: 370px;
  --review-gap: 1.75rem;
  --review-duration: 95s;
  position: relative;
  overflow: hidden;
}

/* Soft edges so cards fade in and out instead of being cut off */
.review-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.review-marquee__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: review-marquee-scroll var(--review-duration) linear infinite;
  will-change: transform;
}

@keyframes review-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Pause so a reader can finish a quote or click through to the source */
.review-marquee:hover .review-marquee__track,
.review-marquee:focus-within .review-marquee__track {
  animation-play-state: paused;
}

/* display:contents drops the duplicated set straight into the flex track, so
   translating -50% advances by exactly one full set — a seamless loop. */
.review-marquee__clone {
  display: contents;
}

.review-card {
  flex: 0 0 var(--review-card-w);
  width: var(--review-card-w);
  /* Spacing via margin, not gap — gap would leave -50% half a gap off. */
  margin-right: var(--review-gap);
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
  white-space: normal;
}

.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  margin-bottom: var(--space-md);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(52, 224, 161, 0.16);
  border: 1px solid rgba(52, 224, 161, 0.5);
  border-radius: 50px;
  line-height: 1;
}

.review-card__source-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.review-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  /* Two lines keeps every card's header block the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__quote {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: var(--space-lg);
}

.review-card__photo-btn {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-light);
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  outline-offset: 2px;
}

.review-card__photo-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
}

.review-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.review-card__photo-btn:hover .review-card__photo {
  transform: scale(1.08);
}

.review-card__photo-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 22, 0.45);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-fast);
  backdrop-filter: blur(2px);
}

.review-card__photo-btn:hover .review-card__photo-zoom,
.review-card__photo-btn:focus-visible .review-card__photo-zoom {
  opacity: 1;
}

.review-card__photo-zoom svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transform: scale(0.9);
  transition: transform var(--transition-fast);
}

.review-card__photo-btn:hover .review-card__photo-zoom svg {
  transform: scale(1.1);
}

.review-card__photo-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(14, 20, 30, 0.88);
  backdrop-filter: blur(6px);
  color: var(--color-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid rgba(200, 169, 110, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   REVIEW PHOTO LIGHTBOX MODAL
   ═══════════════════════════════════════════════ */
.review-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.review-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 15, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 0.25s ease;
}

.review-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.review-lightbox__close:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.08);
}

.review-lightbox__container {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #111722;
  border: 1px solid rgba(200, 169, 110, 0.4);
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(200, 169, 110, 0.2);
  overflow: hidden;
  animation: modalScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.review-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080b11;
  padding: var(--space-md);
  user-select: none;
}

.review-lightbox__img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05080e;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.review-lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: fadeIn 0.2s ease;
}

.review-lightbox__counter {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 14, 22, 0.8);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 15px;
  border: 1px solid rgba(200, 169, 110, 0.3);
  letter-spacing: 0.04em;
}

.review-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 23, 34, 0.85);
  backdrop-filter: blur(8px);
  color: var(--color-secondary);
  border: 1px solid rgba(200, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.review-lightbox__nav--prev {
  left: 12px;
}

.review-lightbox__nav--next {
  right: 12px;
}

.review-lightbox__nav:hover {
  background: var(--color-secondary);
  color: #0b0f17;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 16px rgba(200, 169, 110, 0.5);
}

.review-lightbox__details {
  padding: var(--space-md) var(--space-lg);
  background: #111722;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.review-lightbox__info {
  flex: 1 1 280px;
  min-width: 0;
}

.review-lightbox__author-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.review-lightbox__author-row .review-card__source {
  margin-bottom: 0;
}

.review-lightbox__author-name {
  color: var(--color-secondary);
  font-weight: 700;
  font-size: 0.92rem;
}

.review-lightbox__date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.review-lightbox__title {
  color: #fff;
  font-size: 1.05rem;
  font-family: var(--font-heading);
  line-height: 1.35;
  margin: 0 0 0.4rem;
}

.review-lightbox__quote {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-lightbox__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .review-lightbox__container {
    max-height: 95vh;
  }
  .review-lightbox__stage {
    min-height: 240px;
    max-height: 52vh;
    padding: var(--space-xs);
  }
  .review-lightbox__image {
    max-height: 48vh;
  }
  .review-lightbox__nav {
    width: 38px;
    height: 38px;
  }
  .review-lightbox__nav--prev {
    left: 6px;
  }
  .review-lightbox__nav--next {
    right: 6px;
  }
  .review-lightbox__details {
    padding: var(--space-sm) var(--space-md);
  }
  .review-lightbox__cta {
    width: 100%;
    justify-content: center;
  }
}

.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.review-card__author {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-secondary-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 139, 74, 0.45);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.review-card__author:hover,
.review-card__author:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.review-card__ext {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.75;
}

.review-card__date {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--color-text-light);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .review-marquee {
    --review-card-w: 290px;
    --review-gap: 1rem;
    --review-duration: 70s;
  }
  .review-card {
    padding: var(--space-lg);
  }
}

/* Respect reduced-motion: stop the travel, allow manual swipe instead */
@media (prefers-reduced-motion: reduce) {
  .review-marquee__track {
    animation: none;
  }
  .review-marquee__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .review-card {
    scroll-snap-align: center;
  }
}

/* ═══════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════ */
/* Stats and accreditation logos are different kinds of content with different
   heights, so they get their own rows instead of sharing one flex line — that
   way the four numbers land on a single baseline in equal-width columns. */
.trust-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
}

.trust-bar__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: 900px;
}

.trust-bar__stat {
  text-align: center;
  padding: 0 var(--space-md);
}

.trust-bar__stat + .trust-bar__stat {
  border-left: 1px solid var(--color-border);
}

.trust-bar__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1;
}

.trust-bar__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-top: var(--space-sm);
}

.trust-bar__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.trust-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed height + contain keeps both logos optically the same size
   regardless of their differing source aspect ratios */
.trust-bar__item img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-normal);
}

.trust-bar__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.section--dark .trust-bar__label {
  color: rgba(255, 255, 255, 0.5);
}

.section--dark .trust-bar__stat + .trust-bar__stat,
.section--dark .trust-bar__logos {
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  .trust-bar__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
  }
  /* With two columns only the 2nd and 4th sit to the right of a sibling */
  .trust-bar__stat:nth-child(odd) {
    border-left: none;
  }
  .trust-bar__number {
    font-size: 2rem;
  }
  .trust-bar__logos {
    gap: var(--space-xl);
  }
}

/* ═══════════════════════════════════════════════
   CENTRED NARRATIVE BLOCK
   Shared by the home intro and the About story so both read with the
   same measure and rhythm instead of two sets of inline values.
   ═══════════════════════════════════════════════ */
.prose-center {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.9;
}

/* The global `p` rule sets a lighter colour and would win over an inherited
   one, so body copy here opts back in to the darker text colour. */
.prose-center > p {
  font-size: inherit;
  line-height: inherit;
  color: var(--color-text);
}

/* Adjacent-sibling rhythm rather than a margin on every paragraph, so the
   block ends flush with the section padding instead of adding a stray gap. */
.prose-center > p + p {
  margin-top: var(--space-lg);
}

.prose-center__closing {
  font-weight: 500;
  color: var(--color-primary-dark);
}

.prose-center__closing--italic {
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   TEAM MEMBER CARD
   ═══════════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

/* ScrollReveal wrapper must pass full row height down to the card */
.team-grid__cell {
  display: flex;
  min-width: 0;
}

.team-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.team-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
  transform: translateY(-4px);
}

/* Arched portrait frame — identical geometry whether it holds a photo or a monogram */
.team-card__frame {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 4 / 5;
  margin: 0 auto var(--space-lg);
  border-radius: 85px 85px var(--border-radius) var(--border-radius);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #f7f1e4 0%, #e9ddc6 100%);
  border: 1px solid var(--color-secondary);
  box-shadow: 0 8px 22px rgba(200, 169, 110, 0.22);
}

.team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.team-card__monogram {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #d4b87c 0%, #a8863f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

/* Body grows so every card ends at the same height regardless of bio length */
.team-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.team-card__role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.team-card__tag {
  display: inline-block;
  align-self: center;
  padding: 0.3rem 0.75rem;
  margin-bottom: var(--space-md);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  background: rgba(200, 169, 110, 0.14);
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: 50px;
  line-height: 1.4;
}

.team-card__bio {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.75;
  text-align: left;
}

@media (max-width: 1180px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-card__bio {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════ */
.faq-list {
  max-width: 750px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-item__question:hover {
  color: var(--color-primary);
}

.faq-item__icon {
  font-size: 1.3rem;
  color: var(--color-secondary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
}

.faq-item--open .faq-item__answer {
  max-height: 300px;
  padding-bottom: var(--space-lg);
}

.faq-item__answer p {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════ */
.cta-banner {
  position: relative;
  padding: var(--space-4xl) 0;
  text-align: center;
  overflow: hidden;
}

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

.cta-banner__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27, 58, 45, 0.92), rgba(15, 26, 20, 0.88));
  z-index: 1;
}

.cta-banner__content {
  position: relative;
  z-index: 2;
}

/* The banner sits on a dark image rather than .section--dark, so it needs its
   own label colour — the default accent orange has no contrast here. */
.cta-banner .section-label {
  color: var(--color-secondary);
}

.cta-banner h2 {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.cta-banner p {
  font-family: var(--font-accent);
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.footer {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  padding-top: var(--space-4xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.footer__about p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: var(--space-md) 0;
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.03em;
}

.footer__links li {
  margin-bottom: var(--space-sm);
}

.footer__links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-secondary);
  padding-left: 6px;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__contact-icon {
  color: var(--color-secondary);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__bottom p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer__accreditations {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.footer__accreditations img {
  height: 35px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.footer__accreditations img:hover {
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ═══════════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-fast);
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(37, 211, 102, 0.4),
      0 0 0 8px rgba(37, 211, 102, 0.15);
  }
  100% {
    box-shadow:
      0 4px 20px rgba(37, 211, 102, 0.4),
      0 0 0 16px rgba(37, 211, 102, 0);
  }
}

/* ═══════════════════════════════════════════════
   GALLERY — Seamless masonry grid
   ═══════════════════════════════════════════════ */
.gallery-section {
  background: #f4efe7;
}

.gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: end;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(168, 139, 74, 0.35);
}

.gallery-intro .section-label {
  margin-bottom: var(--space-xs);
}

.gallery-intro h2 {
  text-wrap: balance;
}

.gallery-intro p {
  max-width: 520px;
  font-family: var(--font-accent);
  font-size: 1.15rem;
  line-height: 1.65;
  font-style: italic;
  text-wrap: pretty;
}

.gallery-grid {
  --gallery-row-height: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: var(--color-primary-dark);
}

.gallery-item {
  position: relative;
  display: block;
  flex: 1 1 300px;
  width: auto;
  height: var(--gallery-row-height);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-primary-dark);
  box-shadow: none;
  text-align: left;
  isolation: isolate;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 180ms ease-out,
    opacity 180ms ease-out;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  z-index: 1;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.035);
  opacity: 0.92;
}

.gallery-item:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: -3px;
}

.gallery-item__expand {
  color: var(--color-white);
  background: rgba(15, 26, 20, 0.86);
  box-shadow: var(--shadow-sm);
}

.gallery-item__expand {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

/* Gallery Lightbox */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 5.5rem 2rem;
  background: rgba(8, 14, 11, 0.97);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  max-width: min(1120px, 100%);
  max-height: 100%;
  margin: 0;
}

.lightbox__figure > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 11rem);
  margin: 0 auto;
  border-radius: var(--border-radius-lg);
  object-fit: contain;
  box-shadow: var(--shadow-xl);
}

.lightbox__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  width: 100%;
  padding-top: var(--space-md);
  color: var(--color-white);
}

.lightbox__caption > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lightbox__caption strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.35;
}

.lightbox__caption small {
  margin-top: 2px;
  color: var(--color-secondary);
  font-size: 0.75rem;
}

.lightbox__counter {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition:
    transform 180ms ease-out,
    background-color 180ms ease-out;
}

.lightbox__close {
  top: 1.25rem;
  right: 1.5rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--previous {
  left: 1.5rem;
}

.lightbox__nav--next {
  right: 1.5rem;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: var(--color-accent);
  transform: scale(1.05);
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  transform: translateY(-50%) scale(1.05);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-item img,
  .lightbox__close,
  .lightbox__nav {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .gallery-grid {
    --gallery-row-height: 220px;
  }
}

@media (max-width: 700px) {
  .gallery-intro {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .gallery-grid {
    --gallery-row-height: 165px;
    border-radius: var(--border-radius);
  }

  .gallery-item__expand {
    right: 8px;
    bottom: 8px;
  }

  .lightbox {
    padding: 4.5rem var(--space-md) 5.25rem;
  }

  .lightbox__figure > img {
    max-height: calc(100vh - 12rem);
  }

  .lightbox__caption {
    gap: var(--space-md);
  }

  .lightbox__nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }

  .lightbox__nav--previous {
    left: calc(50% - 54px);
  }

  .lightbox__nav--next {
    right: calc(50% - 54px);
  }

  .lightbox__nav:hover,
  .lightbox__nav:focus-visible {
    transform: scale(1.05);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* Paired fields (name+email, phone+travelers). Collapses to one column so the
   inputs never get too narrow to read their own placeholder. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
}

/* A native select is taller than a text input and its arrow sits inconsistently
   across browsers, so it's reset and given a matching chevron instead. */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1.5 7,7.5 13,1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 58, 45, 0.1);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* ── Contact sidebar ── */
.contact-panel {
  background: var(--color-primary-dark);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.contact-panel__heading {
  color: var(--color-secondary);
  font-size: 1.3rem;
  margin-bottom: var(--space-xl);
}

.contact-panel__item + .contact-panel__item {
  margin-top: var(--space-xl);
}

.contact-panel__label {
  color: var(--color-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.contact-panel__value {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.6;
}

a.contact-panel__value:hover {
  color: var(--color-secondary);
}

.contact-panel__value--whatsapp {
  color: #25d366;
  font-weight: 600;
}

.contact-stats {
  background: #f2ede4;
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.contact-stats__heading {
  margin-bottom: var(--space-xl);
}

.contact-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-lg);
}

.contact-stats__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-secondary-dark);
  line-height: 1;
}

.contact-stats__label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════
   EXPERIENCE CARDS
   ═══════════════════════════════════════════════ */
/* Explicit columns rather than auto-fill, so this grid breaks at exactly the
   same widths as the destinations / features / blog grids. */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .exp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.exp-card {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
}

.exp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.exp-card__img-wrap {
  height: 220px;
  overflow: hidden;
}

.exp-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.exp-card:hover .exp-card__img-wrap img {
  transform: scale(1.06);
}

.exp-card__body {
  padding: var(--space-xl);
}

.exp-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(232, 93, 58, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  margin-bottom: var(--space-sm);
}

.exp-card__body h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.exp-card__body p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: var(--space-3xl);
  max-width: 700px;
  margin: 0 auto;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-secondary);
}

.timeline__item {
  position: relative;
  margin-bottom: var(--space-2xl);
  padding-left: var(--space-lg);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -42px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 3px solid var(--color-light);
  box-shadow: 0 0 0 3px var(--color-secondary);
}

.timeline__year {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-xs);
}

.timeline__content h4 {
  margin-bottom: var(--space-xs);
}

.timeline__content p {
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════
   CATEGORY TABS (Destinations Filter)
   ═══════════════════════════════════════════════ */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.category-tab {
  flex: 0 0 auto;
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-light);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.category-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-tab--active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════
   SECTION CTA PANEL (dark card closing a section)
   ═══════════════════════════════════════════════ */
.section-cta {
  margin-top: var(--space-3xl);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  background: var(--color-primary-dark);
  border-radius: var(--border-radius-lg);
}

.section-cta__heading {
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

.section-cta__text {
  max-width: 520px;
  margin: 0 auto var(--space-lg);
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .section-cta {
    padding: var(--space-2xl) var(--space-lg);
  }
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL ANIMATION
   ═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal--left {
  transform: translateX(-40px);
}

.reveal--left.reveal--visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(40px);
}

.reveal--right.reveal--visible {
  transform: translateX(0);
}

/* ── Grid alignment: let ScrollReveal wrappers pass row height to the card ──
   ScrollReveal inserts a <div class="reveal"> between the grid and the card.
   As a grid item it stretches to the row height, but the card inside kept
   height:auto — so cards in the same row ended at different heights. Making
   the wrapper a flex container and letting the card flex to fill restores
   equal-height rows everywhere without touching the reveal animation.       */
.destinations-grid > .reveal,
.features-grid > .reveal,
.csr-grid > .reveal,
.exp-grid > .reveal,
.blog-grid > .reveal,
.team-grid > .reveal {
  display: flex;
  min-width: 0;
}

.destinations-grid > .reveal > *,
.features-grid > .reveal > *,
.csr-grid > .reveal > *,
.exp-grid > .reveal > *,
.blog-grid > .reveal > *,
.team-grid > .reveal > * {
  flex: 1 1 auto;
  min-width: 0;
}

/* Cards that now stretch need internal column flow so their content
   distributes instead of bunching at the top of a taller box.
   .dest-card is deliberately excluded — its aspect-ratio: 4/5 already
   guarantees identical heights, and flex would fight the absolute overlay. */
.feature-card,
.exp-card {
  display: flex;
  flex-direction: column;
}

.feature-card__icon,
.exp-card__img-wrap {
  flex-shrink: 0;
}

.exp-card__body {
  flex: 1 1 auto;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --space-section: 4rem;
  }

  .features-grid,
  .csr-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --navbar-height: 65px;
    --space-section: 3rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  /* Keep the bar's gutter equal to .container's at this breakpoint too */
  .navbar__inner {
    padding: 0 var(--space-md);
  }

  .navbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100dvh - var(--navbar-height));
    flex-direction: column;
    background: rgba(15, 26, 20, 0.98);
    backdrop-filter: blur(20px);
    padding: clamp(1.25rem, 4vh, var(--space-2xl));
    gap: clamp(0.75rem, 2.3vh, var(--space-lg));
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navbar__links--open {
    display: flex;
  }

  .navbar__link {
    font-size: 1.2rem;
  }

  .navbar__toggle {
    display: flex;
  }

  /* Hidden in the collapsed bar, shown inside the open drawer — handled here
     rather than with an inline style so the two states stay in one place. */
  .navbar__cta {
    display: none;
  }

  .navbar__links--open .navbar__cta {
    display: inline-flex;
  }

  .navbar__brochure {
    padding: 0.65rem 1.2rem;
    font-size: 0.85rem;
  }

  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .dest-card {
    aspect-ratio: 3/4;
  }

  .features-grid,
  .csr-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .exp-grid {
    grid-template-columns: 1fr;
  }

  /* Portrait source images need a higher focal point on narrow cards. Keeping
     the compact card height while moving the crop upward preserves faces and
     avoids turning each mobile card into a full-screen photograph. */
  .exp-card__img-wrap img {
    object-position: center 30%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════
   BLOG PAGE
   ═══════════════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  align-items: stretch;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.blog-card__image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-primary-dark);
  flex-shrink: 0;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.05);
}

.blog-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-lg);
}

.blog-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-sm);
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

/* Clamped to 3 lines so every card's button lands on the same baseline */
.blog-card__summary {
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__cta {
  margin-top: auto;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
}

.blog-detail-body p {
  margin-bottom: 1.5rem;
  color: var(--color-text);
  line-height: 1.8;
}

.blog-detail-body h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  font-size: 1.35rem;
  margin: 2rem 0 1rem;
}

.blog-detail-body strong {
  color: var(--color-accent);
}

@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ═══════════════════════════════════════════════
   LOTUS LOADER — Animated Loading Screen
   ═══════════════════════════════════════════════ */
.lotus-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #162e23 0%, #0f1a14 50%, #0a120e 100%);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Subtle background ambiance */
.lotus-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200, 169, 110, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(232, 93, 58, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(200, 169, 110, 0.03) 0%, transparent 35%);
  pointer-events: none;
}

/* Vignette overlay */
.lotus-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 18, 14, 0.6) 100%);
  pointer-events: none;
}

/* Exit animation — scale up + fade out */
.lotus-loader--exit {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

/* ── Floating Golden Particles ── */
.lotus-loader__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.lotus-loader__particle {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 169, 110, 0.8), rgba(200, 169, 110, 0.1));
  animation: particle-float var(--duration, 6s) ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  8% {
    opacity: 0.7;
    transform: translateY(-8vh) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translateY(-50vh) scale(0.8) translateX(15px);
  }
  100% {
    transform: translateY(-100vh) scale(0.2) translateX(-10px);
    opacity: 0;
  }
}

/* ── Rotating Mandala Ring ── */
.lotus-loader__mandala-ring {
  position: absolute;
  width: 280px;
  height: 280px;
  color: var(--color-secondary);
  opacity: 0;
  animation:
    lotus-mandala-spin 20s linear infinite,
    lotus-mandala-fadein 0.6s 0.1s ease forwards;
  z-index: 2;
}

.lotus-loader__mandala-svg {
  width: 100%;
  height: 100%;
}

@keyframes lotus-mandala-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes lotus-mandala-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.35;
  }
}

/* ── Lotus Container ── */
.lotus-loader__lotus {
  position: relative;
  width: 200px;
  height: 220px;
  z-index: 3;
  filter: drop-shadow(0 0 25px rgba(200, 169, 110, 0.3)) drop-shadow(0 0 60px rgba(200, 169, 110, 0.1));
}

.lotus-loader__lotus-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Center Glow ── */
.lotus-loader__center-glow {
  opacity: 0;
  animation: center-glow-pulse 2s 0.2s ease-in-out infinite;
}

@keyframes center-glow-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* ── Petal Bloom Animation ── */
.lotus-loader__petal {
  opacity: 0;
  transform-origin: 50% 100%; /* Scale from bottom center of petal */
  transform-box: fill-box;
  animation: petal-bloom 0.6s var(--bloom-delay, 0.2s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes petal-bloom {
  0% {
    opacity: 0;
    transform: scaleY(0) scaleX(0.3);
  }
  30% {
    opacity: 0.6;
    transform: scaleY(0.4) scaleX(0.6);
  }
  70% {
    opacity: 0.85;
    transform: scaleY(0.9) scaleX(0.95);
  }
  85% {
    transform: scaleY(1.05) scaleX(1.02); /* Slight overshoot for organic feel */
  }
  100% {
    opacity: 0.9;
    transform: scaleY(1) scaleX(1);
  }
}

/* ── Pistil (center dot) ── */
.lotus-loader__pistil {
  opacity: 0;
  animation:
    pistil-appear 0.3s 0.1s ease-out forwards,
    pistil-glow 2s 0.4s ease-in-out infinite;
}

.lotus-loader__pistil-inner {
  opacity: 0;
  animation: pistil-appear 0.25s 0.15s ease-out forwards;
}

@keyframes pistil-appear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pistil-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(232, 93, 58, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(232, 93, 58, 0.8)) drop-shadow(0 0 25px rgba(200, 169, 110, 0.3));
  }
}

/* ── Leaf / Curve Drawing ── */
.lotus-loader__leaf {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: leaf-draw 0.6s var(--bloom-delay, 0.8s) ease-out forwards;
}

@keyframes leaf-draw {
  to {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}

/* ── Brand Text ── */
.lotus-loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 1.5rem;
  z-index: 4;
  opacity: 0;
  animation: brand-fadein 0.5s 0.85s ease forwards;
}

.lotus-loader__brand-name {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(
    90deg,
    #d4bc8a 0%,
    #f5e6c0 20%,
    #c8a96e 40%,
    #f5e6c0 60%,
    #d4bc8a 80%,
    #f5e6c0 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 3s 1s linear infinite;
}

.lotus-loader__brand-tagline {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.12em;
}

@keyframes brand-fadein {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer-text {
  to {
    background-position: 300% center;
  }
}

/* ── Loading Dots ── */
.lotus-loader__dots {
  display: flex;
  gap: 10px;
  margin-top: 1.2rem;
  z-index: 4;
  opacity: 0;
  animation: brand-fadein 0.4s 1s ease forwards;
}

.lotus-loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
  animation: dot-pulse 1.4s var(--dot-delay) ease-in-out infinite;
}

@keyframes dot-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.35);
    opacity: 0.25;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ── Lock body scroll ── */
body.loading {
  overflow: hidden;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .lotus-loader__lotus {
    width: 150px;
    height: 165px;
  }
  .lotus-loader__mandala-ring {
    width: 210px;
    height: 210px;
  }
  .lotus-loader__brand-name {
    font-size: 1.4rem;
  }
  .lotus-loader__brand-tagline {
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════
   INDIANIZED KEYFRAMES & ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes rotate-mandala {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes diya-glow {
  0%,
  100% {
    box-shadow:
      0 0 5px rgba(200, 169, 110, 0.4),
      0 0 10px rgba(200, 169, 110, 0.2);
  }
  50% {
    box-shadow:
      0 0 15px rgba(200, 169, 110, 0.8),
      0 0 25px rgba(232, 93, 58, 0.4);
  }
}

@keyframes marigold-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}

/* Standalone HTML support */
main {
  overflow-x: clip;
}
[hidden] {
  display: none !important;
}
body.modal-open {
  overflow: hidden;
}
.blog-modal {
  animation: fadeIn 0.25s ease;
}
.blog-modal > div {
  animation: modalScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 600px) {
  .blog-modal {
    padding: 0.75rem !important;
  }
  .blog-modal > div {
    max-height: 94dvh !important;
  }
  .blog-modal .blog-detail-body {
    padding: 1.3rem !important;
  }
}