/* ============================================================
   Tierra de Ibalon Travel & Tours
   main.css — Design System & Global Styles
   ============================================================ */

/* --- 1. Google Fonts Import (fallback if HTML link unavailable) */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600&display=swap');

/* --- 2. Design Tokens */
:root {
  /* Brand Palette */
  --c-jade:          #1A6B52;
  --c-jade-light:    #2A8A6A;
  --c-jade-dark:     #114535;
  --c-gold:          #C9962A;
  --c-gold-light:    #E8B84B;
  --c-pearl:         #F8F4EE;
  --c-pearl-dark:    #EDE7DC;
  --c-charcoal:      #1C1C1E;
  --c-ash:           #5C5C5C;
  --c-mist:          #D8D2C8;
  --c-volcano:       #C0472A;
  --c-volcano-hover: #A33820;
  --c-logo-red:      #CB2624;
  --c-logo-orange:   #E3522E;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-hero:  clamp(2.75rem, 6vw, 5.5rem);
  --text-h1:    clamp(2rem, 4vw, 3.5rem);
  --text-h2:    clamp(1.5rem, 3vw, 2.5rem);
  --text-h3:    clamp(1.2rem, 2vw, 1.75rem);
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Layout */
  --container:    1200px;
  --container-sm: 760px;
  --radius:       4px;
  --radius-lg:    12px;

  /* Shadows */
  --shadow-card:  0 2px 16px rgba(28,28,30,0.08);
  --shadow-hover: 0 8px 32px rgba(28,28,30,0.16);

  /* Transitions */
  --transition: 200ms ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--c-charcoal);
  background-color: var(--c-pearl);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-jade); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-jade-light); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* --- 4. Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-charcoal);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--space-xs);
}

/* --- 5. Layout */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-sm {
  max-width: var(--container-sm);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

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

.section--jade {
  background-color: var(--c-jade);
  color: white;
}

.section--jade h2, .section--jade h3 { color: white; }
.section--jade .eyebrow { color: var(--c-gold-light); }

.section--pearl-dark {
  background-color: var(--c-pearl-dark);
}

/* --- 6. Navigation */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background var(--transition), box-shadow var(--transition);
  padding-block: 1.25rem;
}

.site-nav.scrolled {
  background: white;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  padding-block: 0.75rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-logo img { height: 64px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}

.site-nav.scrolled .nav-link { color: var(--c-charcoal); }

.nav-link:hover { color: var(--c-gold); }
.site-nav.scrolled .nav-link:hover { color: var(--c-jade); }

.btn-nav-cta {
  background: var(--c-volcano);
  color: white !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
}

.btn-nav-cta:hover {
  background: var(--c-volcano-hover);
  color: white !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  transition: transform var(--transition), opacity var(--transition);
}

.site-nav.scrolled .nav-toggle span { background: var(--c-charcoal); }

/* --- 7. Hero Section */
.site-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 69, 53, 0.55) 0%,
    rgba(17, 69, 53, 0.3) 50%,
    rgba(17, 69, 53, 0.7) 100%
  );
  z-index: 1;
}

/* Abaca texture overlay */
.hero-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.08;
  background-image: repeating-linear-gradient(
    45deg,
    var(--c-pearl) 0px,
    var(--c-pearl) 1px,
    transparent 1px,
    transparent 8px
  ),
  repeating-linear-gradient(
    -45deg,
    var(--c-pearl) 0px,
    var(--c-pearl) 1px,
    transparent 1px,
    transparent 8px
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  padding-inline: var(--space-md);
}

.hero-content .eyebrow { color: var(--c-gold-light); }

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.375rem);
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin-inline: auto;
  margin-top: var(--space-sm);
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.6);
  font-size: var(--text-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: bounce 2s infinite;
}

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

/* --- 8. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-volcano);
  color: white;
}

.btn-primary:hover {
  background: var(--c-volcano-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(192,71,42,0.35);
}

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

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  color: white;
  border-color: white;
}

.btn-jade {
  background: var(--c-jade);
  color: white;
}

.btn-jade:hover {
  background: var(--c-jade-light);
  color: white;
  transform: translateY(-1px);
}

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

.btn-outline-jade:hover {
  background: var(--c-jade);
  color: white;
}

/* --- 9. Tour Cards */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.tour-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

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

.tour-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tour-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.tour-card:hover .tour-card__image img {
  transform: scale(1.05);
}

.tour-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--c-jade);
  color: white;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
}

.tour-card__body {
  padding: var(--space-md);
}

.tour-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: 0.5rem;
}

.tour-card__title::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--c-gold);
  margin-top: 0.5rem;
  transition: width var(--transition);
}

.tour-card:hover .tour-card__title::after { width: 4rem; }

.tour-card__desc {
  color: var(--c-ash);
  font-size: var(--text-small);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.tour-card__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-label);
  color: var(--c-ash);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.tour-card__meta span { display: flex; align-items: center; gap: 0.3rem; }

.tour-card__price {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--c-jade);
  margin-bottom: var(--space-sm);
}

.tour-card__price span {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--c-ash);
  font-weight: 400;
}

.tour-card__ctas {
  display: flex;
  gap: 0.75rem;
}

/* --- 10. Accreditation Badges */
.accreditation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-mist);
  border-radius: var(--radius);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-ash);
}

.section--jade .badge {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
}

/* --- 11. Promo video */
/* Deliberately not full-bleed: a contained player keeps the page's rhythm and
   preload="none" means the 5.7 MB file costs nothing until someone presses play. */
.video-frame {
  max-width: 840px;
  margin: var(--space-md) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #000;
  line-height: 0;
}

.video-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}

/* --- 12. Footer */
.site-footer {
  background: var(--c-charcoal);
  color: rgba(255,255,255,0.8);
  padding-top: var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand p {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  line-height: 1.7;
}

.footer-links h3, .footer-contact h3 {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-sm);
}

.footer-links ul { display: flex; flex-direction: column; gap: 0.5rem; }

.footer-links a, .footer-contact a {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-small);
  transition: color var(--transition);
}

.footer-links a:hover, .footer-contact a:hover { color: white; }

.footer-contact address { font-style: normal; }

.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--text-small);
  margin-bottom: 0.75rem;
}

.footer-contact .fa { color: var(--c-gold); margin-top: 0.2rem; flex-shrink: 0; }

/* Phone numbers stack one per line so the icon column stays aligned */
.footer-contact-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  margin-bottom: 0.35rem;
}

.footer-contact-list li:last-child { margin-bottom: 0; }

.social-links {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.social-links a:hover {
  background: var(--c-jade);
  color: white;
  border-color: var(--c-jade);
}

.footer-bottom {
  padding-block: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-bottom p {
  font-size: var(--text-label);
  color: rgba(255,255,255,0.4);
}

.footer-bottom a {
  color: rgba(255,255,255,0.4);
  transition: color var(--transition);
}

.footer-bottom a:hover { color: white; }

/* --- 13. WhatsApp Float */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  z-index: 999;
  transition: transform var(--transition), box-shadow var(--transition);
}

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

/* --- 14. Section Divider (Abaca-inspired) */
.section-divider {
  height: 40px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--c-mist) 0px, var(--c-mist) 1px,
    transparent 1px, transparent 10px
  );
  opacity: 0.5;
}

/* --- 15. Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.testimonial-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.testimonial-card__stars {
  color: var(--c-gold);
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.testimonial-card__text {
  font-style: italic;
  color: var(--c-ash);
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.testimonial-card__author {
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--c-charcoal);
}

/* --- 16. Forms */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--space-sm);
}

.form-group label {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--c-charcoal);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--c-mist);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--c-charcoal);
  background: white;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-jade);
}

.form-honeypot { display: none; }

/* --- 17. Responsive */
@media (max-width: 1024px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .site-nav { padding-block: 1rem; }

  .nav-toggle { display: flex; }

  .nav-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-jade-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    z-index: 99;
  }

  .nav-menu.is-open { display: flex; }
  .nav-menu .nav-link { font-size: 1.25rem; color: white; }
  .nav-menu .btn-nav-cta { font-size: 1.25rem; }

  .tours-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .testimonials-grid { grid-template-columns: 1fr; }

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

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

/* --- 18. Print */
@media print {
  .site-nav, .whatsapp-float, .hero-scroll { display: none !important; }
  .site-footer { background: white; color: black; }
}

/* --- 19. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VISARCH ADDITIONS — Phase 1 page components
   ============================================================ */

/* --- 20. Skip link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-jade);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); color: white; }

/* --- 21. Section head (intro block) */
.section-head { max-width: 740px; margin-inline: auto; text-align: center; margin-bottom: var(--space-lg); }
.section-head--left { text-align: left; margin-inline: 0; }
.section-head h2 { margin-bottom: var(--space-sm); }
.lead { color: var(--c-ash); font-size: 1.125rem; line-height: 1.75; }
.section--jade .lead { color: rgba(255,255,255,0.85); }

/* --- 22. Split (media + body) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; }
.split__body h2 { margin-bottom: var(--space-sm); }
.split__body p { color: var(--c-ash); margin-bottom: var(--space-sm); }
.split__body p:last-of-type { margin-bottom: var(--space-md); }
.section--jade .split__body p { color: rgba(255,255,255,0.85); }

/* --- 23. Stat row */
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-md); }
.stat__num { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; color: var(--c-gold); line-height: 1; }
.stat__label { font-size: var(--text-small); color: var(--c-ash); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.25rem; }
.section--jade .stat__num { color: var(--c-gold-light); }
.section--jade .stat__label { color: rgba(255,255,255,0.7); }

/* --- 24. Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.feature-card { background: white; border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-card); }
.feature-card__icon {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-pearl-dark); color: var(--c-jade);
  font-size: 1.25rem; margin-bottom: var(--space-sm);
}
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.feature-card p { color: var(--c-ash); font-size: var(--text-small); }
.section--jade .feature-card { background: rgba(255,255,255,0.06); }
.section--jade .feature-card__icon { background: rgba(255,255,255,0.12); color: var(--c-gold-light); }
.section--jade .feature-card h3 { color: white; }
.section--jade .feature-card p { color: rgba(255,255,255,0.8); }

/* --- 25. Page hero (interior pages) */
.page-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero .hero-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: 0; }
.page-hero .hero-overlay, .page-hero .hero-texture { position: absolute; inset: 0; }
.page-hero__content { position: relative; z-index: 3; padding-block: var(--space-lg); }
.page-hero__content h1 { color: white; text-shadow: 0 2px 20px rgba(0,0,0,0.45); }
.page-hero__content .eyebrow { color: var(--c-gold-light); }
.page-hero__content p { color: rgba(255,255,255,0.92); max-width: 620px; margin-top: 0.5rem; }

/* --- 26. Breadcrumb */
.breadcrumb { font-size: var(--text-small); color: rgba(255,255,255,0.85); margin-bottom: var(--space-sm); }
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: white; }
.breadcrumb span { opacity: 0.6; margin-inline: 0.4rem; }

/* --- 27. Tour detail layout + booking sidebar */
.tour-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-lg); align-items: start; }
.tour-main > section + section { margin-top: var(--space-lg); }
.tour-main h2 { margin-bottom: var(--space-sm); }
.tour-main p { color: var(--c-ash); }

.booking-card {
  position: sticky; top: 96px; background: white; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-md); border-top: 4px solid var(--c-gold);
}
.booking-card__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--c-jade); }
.booking-card__price small { font-family: var(--font-body); font-size: var(--text-small); font-weight: 400; color: var(--c-ash); display: block; }
.booking-meta { display: flex; flex-direction: column; gap: 0.5rem; margin-block: var(--space-sm); }
.booking-meta li { display: flex; gap: 0.6rem; align-items: center; font-size: var(--text-small); color: var(--c-ash); }
.booking-meta i { color: var(--c-gold); width: 1.1rem; text-align: center; flex-shrink: 0; }
.booking-card .btn { width: 100%; justify-content: center; margin-bottom: 0.5rem; }
.booking-card__note { font-size: var(--text-label); color: var(--c-ash); text-align: center; margin-top: 0.5rem; }

/* --- 28. OTA / WhatsApp action buttons */
.btn-whatsapp { background: #25D366; color: white; }
.btn-whatsapp:hover { background: #1DA851; color: white; transform: translateY(-1px); }

/* --- 29. Itinerary timeline */
.itinerary { position: relative; padding-left: 0.5rem; }
.itinerary::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--c-mist); }
.itinerary__item { position: relative; padding: 0 0 var(--space-md) var(--space-md); }
.itinerary__item:last-child { padding-bottom: 0; }
.itinerary__item::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--c-jade); border: 3px solid var(--c-pearl); box-sizing: content-box;
}
.itinerary__time { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold); }
.itinerary__item h3 { font-size: 1.2rem; margin-block: 0.2rem; }
.itinerary__item p { font-size: var(--text-small); color: var(--c-ash); margin: 0; }

/* --- 30. Info columns (includes / excludes) */
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.info-list { display: flex; flex-direction: column; gap: 0.6rem; }
.info-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--text-small); color: var(--c-ash); }
.info-list i { margin-top: 0.25rem; flex-shrink: 0; }
.info-list .yes { color: var(--c-jade); }
.info-list .no { color: var(--c-volcano); }

/* --- 31. Gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 400ms ease; }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid figure:first-child img { aspect-ratio: 1 / 1; height: 100%; }
/* Two-image galleries sit as an even pair — the 2x2 first-child span would leave a hole */
.gallery-grid--pair { grid-template-columns: repeat(2, 1fr); }
.gallery-grid--pair figure:first-child { grid-column: auto; grid-row: auto; }
.gallery-grid--pair figure:first-child img { aspect-ratio: 4 / 3; height: auto; }

/* --- 32. Fleet grid */
.fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.fleet-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.fleet-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.fleet-card__body { padding: var(--space-md); }
.fleet-card__cap { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gold); font-weight: 600; }
.fleet-card__body h3 { font-size: 1.3rem; margin-block: 0.2rem 0.4rem; }
.fleet-card__body p { color: var(--c-ash); font-size: var(--text-small); }

/* --- 33. Rate table */
.rate-table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.rate-table thead { background: var(--c-jade); color: white; }
.rate-table th, .rate-table td { padding: 0.875rem 1rem; text-align: left; font-size: var(--text-small); }
.rate-table th { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.03em; }
.rate-table tbody tr { border-bottom: 1px solid var(--c-mist); }
.rate-table tbody tr:nth-child(even) { background: var(--c-pearl); }
.rate-table tbody tr:last-child { border-bottom: none; }

/* --- 34. Booking / enquiry form */
.form-feedback { display: none; padding: 0.875rem 1rem; border-radius: var(--radius); margin-bottom: var(--space-sm); font-size: var(--text-small); }
.form-feedback--success { background: #E6F4EC; color: var(--c-jade-dark); border: 1px solid var(--c-jade); }
.form-feedback--error { background: #FBEAE6; color: var(--c-volcano-hover); border: 1px solid var(--c-volcano); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-card { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg); }

/* --- 35. CTA band */
.cta-band { text-align: center; }
.cta-band .hero-ctas { margin-top: var(--space-md); }

/* --- 36. Misc helpers */
.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.prose p { color: var(--c-ash); margin-bottom: var(--space-sm); }
.prose h3 { margin-top: var(--space-md); margin-bottom: 0.5rem; }
.prose ul.bullets { list-style: disc; padding-left: 1.25rem; color: var(--c-ash); }
.prose ul.bullets li { margin-bottom: 0.4rem; }

/* --- 37. Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.revealed { opacity: 1; transform: none; }

/* --- 38b. Solid page hero (no image — legal & utility pages) */
.page-hero--solid {
  min-height: 42vh;
  background: linear-gradient(135deg, var(--c-jade-dark) 0%, var(--c-jade) 100%);
}
.page-hero--solid .hero-texture { opacity: 0.07; }

/* --- 38c. Legal / long-form document */
.doc { max-width: 800px; margin-inline: auto; }
.doc h2 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); font-size: var(--text-h3); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--c-ash); }
.doc p { margin-bottom: var(--space-sm); }
.doc ul.bullets { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--space-sm); }
.doc ul.bullets li { margin-bottom: 0.4rem; }
.doc .doc-updated { font-size: var(--text-small); color: var(--c-ash); font-style: italic; }
.doc .doc-note {
  background: var(--c-pearl-dark); border-left: 3px solid var(--c-gold);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
  font-size: var(--text-small); margin-bottom: var(--space-md);
}

/* --- 38d. Coming-soon card (blog teasers) */
.card-soon { position: relative; opacity: 0.96; }
.card-soon .tour-card__badge { background: var(--c-ash); }

/* --- 38. Responsive (Phase 1 components) */
@media (max-width: 1024px) {
  .feature-grid, .fleet-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-layout { grid-template-columns: 1fr; }
  .booking-card { position: static; }
}
@media (max-width: 768px) {
  .split, .info-cols, .feature-grid, .fleet-grid, .form-row, .gallery-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .gallery-grid figure:first-child { grid-column: auto; grid-row: auto; }
  .gallery-grid figure:first-child img { aspect-ratio: 4 / 3; }
  .stat-row { gap: var(--space-md); }
  .rate-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- 39. Navigation dropdown menu */
/* Offset anchored sections so they clear the fixed nav when deep-linked */
:target { scroll-margin-top: 96px; }

.nav-item.has-dropdown { position: relative; }

.nav-caret {
  font-size: 0.7em;
  margin-left: 0.35rem;
  transition: transform var(--transition);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: white;
  border-top: 3px solid var(--c-gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 101;
}

/* Invisible bridge so the cursor can travel from link to panel without closing */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.has-dropdown:hover > .nav-dropdown,
.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-dropdown:hover > .nav-link .nav-caret,
.has-dropdown:focus-within > .nav-link .nav-caret,
.has-dropdown.is-open > .nav-link .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown__link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--c-charcoal);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: var(--c-pearl-dark);
  color: var(--c-jade);
}

/* Mobile: dropdown becomes an inline accordion inside the overlay menu */
@media (max-width: 768px) {
  .nav-menu {
    justify-content: flex-start;
    padding-block: 6rem 2rem;
    overflow-y: auto;
  }

  .nav-item.has-dropdown { width: 100%; text-align: center; }

  .nav-dropdown {
    position: static;
    display: none;
    min-width: 0;
    background: transparent;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.25rem 0 0.75rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-dropdown::before { display: none; }

  /* On mobile we drive visibility with .is-open (set by JS), not hover */
  .has-dropdown:hover > .nav-dropdown,
  .has-dropdown:focus-within > .nav-dropdown { display: none; }
  .nav-item.has-dropdown.is-open > .nav-dropdown { display: flex; }

  .nav-dropdown__link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    white-space: normal;
  }
  .nav-dropdown__link:hover,
  .nav-dropdown__link:focus-visible { background: transparent; color: var(--c-gold); }
}

/* --- 40. Footer tagline --- */
.footer-tagline{color:var(--c-gold);font-family:var(--font-display);font-style:italic;font-size:1.05rem;margin-top:.5rem}

/* --- 41. Footer logo (square emblem) --- */
.footer-brand img{height:64px;width:auto;margin-bottom:var(--space-sm)}

/* --- 42. Nav logo lockup + wordmark --- */
.nav-logo { display: flex; align-items: center; gap: 0.6rem; }
.nav-logo__text {
  font-family: 'Caprasimo', 'Cooper Black', Georgia, serif;
  text-transform: uppercase;
  color: var(--c-logo-red);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-nav:not(.scrolled) .nav-logo__text { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
@media (max-width: 768px) { .nav-logo img { height: 48px; } .nav-logo__text { font-size: 1.05rem; } }
@media (max-width: 400px) { .nav-logo__text { display: none; } }

/* --- 43. Footer logo lockup (added by parallel page work) --- */
.footer-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-sm); }
.footer-logo img { height: 64px; width: auto; margin: 0; }
.footer-logo__text {
  font-family: 'Caprasimo', 'Cooper Black', Georgia, serif;
  text-transform: uppercase;
  color: var(--c-logo-orange);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* --- 44. Footer brand ribbon (logo colours) --- */
.brand-ribbon { height: 5px; width: 100%; background: linear-gradient(90deg, #2E8B57 0%, #E8B84B 35%, #E3522E 70%, #CB2624 100%); }

/* --- 45. Client itinerary stop lists --- */
.itin-stops { list-style: disc; padding-left: 1.1rem; margin: 0.4rem 0 0; }
.itin-stops li { font-size: var(--text-small); color: var(--c-ash); margin-bottom: 0.25rem; line-height: 1.45; }
.itin-lead { font-size: var(--text-small); color: var(--c-jade); font-weight: 600; margin: 0.2rem 0 0; }
.itin-note { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gold); font-weight: 600; margin-top: 0.5rem; }