/* ============================================================
   Genepool Eco Tourism — standalone landing page
   Independent visual identity from the tree interpretation boards:
   editorial resort site, not a signage/parchment look.
   ============================================================ */

:root {
  --gp-ink:      #1B211C;
  --gp-ink-soft: #3A4339;
  --gp-cream:    #FBF7EE;
  --gp-paper:    #F3EEE0;
  --gp-sage:     #5C7A63;
  --gp-sage-dk:  #3F5744;
  --gp-sun:      #E3A73B;
  --gp-sun-dk:   #C6872A;
  --gp-line:     rgba(27, 33, 28, 0.12);
  --gp-serif: "Playfair Display", Georgia, serif;
  --gp-sans:  "Manrope", system-ui, -apple-system, sans-serif;
  --gp-r: 18px;
  --gp-shadow: 0 20px 50px rgba(27, 33, 28, 0.14);
}

.gp, .gp * { box-sizing: border-box; }
.gp {
  margin: 0;
  font-family: var(--gp-sans);
  color: var(--gp-ink);
  background: var(--gp-cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.gp img { display: block; max-width: 100%; }
.gp a { text-decoration: none; }
.gp-section a, .gp-footer a { color: inherit; }
.gp h1, .gp h2, .gp h3 {
  font-family: var(--gp-serif);
  font-weight: 600;
  line-height: 1.12;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "swsh" 0, "calt" 0;
}
/* zero-specificity reset so component margins below always win */
:where(.gp) :where(h1, h2, h3, p) { margin: 0; }
.gp ul { margin: 0; padding: 0; list-style: none; }

/* ---------- shared kickers / section title ---------- */
.gp-kicker {
  font-family: var(--gp-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-sage-dk);
  margin: 0 0 14px;
}
.gp-kicker-center { text-align: center; }
/* Kickers on dark photo/video sections — brighter and larger than the
   light-section kicker, with a halo so they hold up over moving footage. */
.gp-kicker-invert {
  color: #FFC857;
  font-size: 0.86rem;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.gp-section { padding: clamp(36px, 5vw, 64px) clamp(20px, 6vw, 64px); max-width: 1280px; margin: 0 auto; }
.gp-section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(36px, 5vw, 60px);
}

/* ============ NAV ============ */
#about, #story, #facilities, #gallery, #contact {
  scroll-margin-top: 84px;
}

.gp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.gp-nav-solid {
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(27,33,28,0.08);
}
.gp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gp-serif);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: color 0.25s ease;
}
.gp-nav-solid .gp-nav-brand { color: var(--gp-ink); text-shadow: none; }
.gp-nav-brand img { height: 40px; width: auto; }
.gp-nav-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.gp-nav-brand em { font-style: normal; font-family: var(--gp-sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #F2A88A; }
.gp-nav-solid .gp-nav-brand em { color: #B0573A; }
.gp-nav-links {
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gp-cream);
  transition: color 0.25s ease;
}
.gp-nav-solid .gp-nav-links { color: var(--gp-ink-soft); }
.gp-nav-links a { color: inherit; opacity: 0.9; transition: opacity 0.2s ease; }
.gp-nav-links a:hover { opacity: 1; }
.gp-nav-cta {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--gp-sun);
  color: var(--gp-ink);
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gp-nav-cta:hover { background: var(--gp-sun-dk); transform: translateY(-1px); }
@media (max-width: 640px) { .gp-nav-links { display: none; } }

/* ============ HERO ============ */
.gp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.gp-hero-media { position: absolute; inset: 0; z-index: 0; }
.gp-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.gp-hero-slide-active { opacity: 1; }
.gp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.gp-hero-dots {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 6vw, 64px);
  bottom: clamp(28px, 5vw, 48px);
  display: flex;
  gap: 8px;
}
.gp-hero-dot {
  width: 22px; height: 3px;
  border-radius: 999px;
  background: rgba(251,247,238,0.35);
  transition: background 0.3s ease;
}
.gp-hero-dot-active { background: var(--gp-sun); }
.gp-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,24,18,0.35) 0%, rgba(20,24,18,0.15) 30%, rgba(20,24,18,0.55) 78%, rgba(15,18,14,0.82) 100%);
}
.gp-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(20px, 6vw, 64px) clamp(64px, 10vw, 110px);
  max-width: 1280px;
  margin: 0 auto;
  color: var(--gp-cream);
}
.gp-eyebrow {
  font-size: clamp(0.85rem, 1.4vw, 1.02rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Sits on a rotating photo slideshow — gold text alone vanished on the
     sunlit forest frames, so it gets its own dark frosted backing. */
  display: inline-block;
  color: #FFF6E0;
  background: rgba(15, 20, 16, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(227, 167, 59, 0.55);
  border-radius: 999px;
  padding: 8px 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .gp-eyebrow { border-radius: 14px; padding: 8px 14px; }
}
.gp-hero-content h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  color: #fff;
  max-width: 15ch;
  text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.gp-hero-sub {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(251, 247, 238, 0.92);
}
.gp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gp-btn:hover { transform: translateY(-2px); }
.gp-btn-primary { background: var(--gp-sun); color: var(--gp-ink); }
.gp-btn-primary:hover { background: var(--gp-sun-dk); }
.gp-btn-ghost { border-color: rgba(251,247,238,0.55); color: var(--gp-cream); }
.gp-btn-ghost:hover { background: rgba(251,247,238,0.12); border-color: var(--gp-cream); }

.gp-scroll-cue {
  position: absolute;
  right: clamp(20px, 6vw, 64px);
  bottom: clamp(28px, 5vw, 48px);
  z-index: 2;
  width: 28px; height: 44px;
  border: 2px solid rgba(251,247,238,0.6);
  border-radius: 999px;
  display: none;
}
.gp-scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 999px;
  background: var(--gp-sun);
  animation: gp-scroll-bounce 1.8s ease infinite;
}
@keyframes gp-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0.4; }
}
@media (min-width: 720px) { .gp-scroll-cue { display: block; } }

/* ============ STORY / VIDEO ============ */
.gp-story {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: clamp(40px, 6vw, 72px) 0;
}
.gp-story-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gp-story-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,20,15,0.55) 0%, rgba(16,20,15,0.72) 100%);
}
.gp-story-content {
  position: relative; z-index: 2;
  max-width: 640px;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 64px);
  color: var(--gp-cream);
}
.gp-story-content h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); color: #fff; }
.gp-story-sub { margin: 20px auto 0; max-width: 48ch; color: rgba(251,247,238,0.82); font-size: 1.02rem; }
.gp-story-play {
  margin-top: 32px;
  gap: 10px;
  cursor: pointer;
}
.gp-play-ic { font-size: 0.75rem; }

.gp-sound-toggle {
  position: absolute; z-index: 3;
  right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(251,247,238,0.35);
  border-radius: 999px;
  background: rgba(16,20,15,0.55);
  color: var(--gp-cream);
  font: inherit; font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gp-sound-toggle:hover { background: rgba(16,20,15,0.75); }
.gp-sound-toggle[aria-pressed="true"] .gp-sound-label { opacity: 0.8; }

.gp-video-full {
  width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #000;
}

/* ============ ABOUT ============ */
.gp-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 640px) { .gp-about-grid { grid-template-columns: 1fr; } }
.gp-about-text h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 22px; }
.gp-lead { font-size: 1.08rem; color: var(--gp-ink-soft); margin-bottom: 16px; }
.gp-about-text > p:not(.gp-lead) { color: var(--gp-ink-soft); margin-bottom: 8px; }
.gp-about-media { border-radius: var(--gp-r); overflow: hidden; box-shadow: var(--gp-shadow); }
.gp-about-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

/* ============ FACILITIES ============ */
.gp-facilities { background: var(--gp-paper); border-radius: 32px; }
.gp-facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
@media (max-width: 860px) { .gp-facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gp-facility-grid { grid-template-columns: 1fr; } }
.gp-facility-card {
  background: var(--gp-cream);
  border-radius: var(--gp-r);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(27,33,28,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gp-facility-card:hover { transform: translateY(-6px); box-shadow: var(--gp-shadow); }
.gp-facility-media { aspect-ratio: 4/3; overflow: hidden; }
.gp-facility-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gp-facility-card:hover .gp-facility-media img { transform: scale(1.06); }
.gp-facility-card h3 { font-size: 1.25rem; padding: 22px 22px 8px; }
.gp-facility-card p { padding: 0 22px 24px; color: var(--gp-ink-soft); font-size: 0.94rem; }

.gp-facility-media-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gp-sage) 0%, var(--gp-sage-dk) 100%);
}
.gp-pending-ic { font-size: 2.6rem; opacity: 0.85; }
.gp-facility-card-pending { opacity: 0.92; }

/* ============ SERVICES ============ */
.gp-services {
  background:
    radial-gradient(ellipse 900px 500px at 15% 100%, rgba(122,150,109,0.18), transparent 70%),
    var(--gp-ink);
}
.gp-services-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 640px) { .gp-services-grid { grid-template-columns: 1fr; } }
.gp-services-media { order: 2; border-radius: var(--gp-r); overflow: hidden; box-shadow: var(--gp-shadow); }
.gp-services-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.6; }
.gp-services-text { order: 1; }
@media (max-width: 640px) { .gp-services-media, .gp-services-text { order: 0; } }
.gp-services-text h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 30px; color: #fff; }
.gp-service-list { display: flex; flex-direction: column; gap: 20px; }
.gp-service-list li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(251,247,238,0.68);
}
.gp-service-list li strong { color: var(--gp-cream); font-weight: 700; }
.gp-service-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gp-sage);
  opacity: 0.22;
}
.gp-service-list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gp-sun);
}

/* ============ GALLERY ============ */
.gp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}
.gp-gallery-tall { grid-row: span 2; }
@media (max-width: 720px) {
  .gp-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
.gp-gallery-item {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--gp-paper);
}
.gp-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gp-gallery-item:hover img { transform: scale(1.08); }
.gp-gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.28));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gp-gallery-item:hover::after { opacity: 1; }

.gp-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(15,18,14,0.92);
  padding: 24px;
}
.gp-lightbox-open { display: flex; }
.gp-lightbox img { max-width: min(1100px, 92vw); max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.gp-lb-close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: none;
  color: var(--gp-cream);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}
.gp-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(251,247,238,0.25);
  background: rgba(15,18,14,0.6);
  color: var(--gp-cream);
  font-size: 2.2rem; line-height: 1; padding-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.gp-lb-nav:hover { background: rgba(255,200,87,0.25); }
.gp-lb-prev { left: clamp(10px, 3vw, 32px); }
.gp-lb-next { right: clamp(10px, 3vw, 32px); }
.gp-lb-count {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center;
  font-size: 0.85rem; letter-spacing: 0.08em;
  color: rgba(251,247,238,0.75);
}
@media (max-width: 640px) {
  .gp-lb-nav { width: 42px; height: 42px; font-size: 1.8rem; }
}

/* ============ CONTACT ============ */
.gp-contact {
  background:
    radial-gradient(ellipse 900px 500px at 50% 35%, rgba(122,150,109,0.22), transparent 70%),
    var(--gp-ink);
  color: var(--gp-cream);
}

.gp-contact-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}
.gp-contact-copy { text-align: left; }
.gp-contact h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: #fff; max-width: 14ch; margin: 0; }
.gp-contact-lead { margin: 16px 0 0; max-width: 42ch; color: rgba(251,247,238,0.68); font-size: 1rem; }

.gp-contact-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.gp-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gp-sun);
  color: var(--gp-ink);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 24px;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.gp-contact-cta:hover { background: var(--gp-sun-dk); transform: translateY(-1px); }
.gp-contact-cta .gp-contact-link-ic { font-size: 1.05rem; }
.gp-contact-cta-ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 200, 87, 0.8);
}
.gp-contact-cta-ghost:hover { background: rgba(255, 200, 87, 0.14); }
.gp-contact-book-note { margin: 12px 0 0; font-size: 0.82rem; color: rgba(251,247,238,0.6); }
.gp-contact-book-note a { color: #FFC857; text-decoration: underline; text-underline-offset: 3px; }

.gp-contact-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gp-contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  text-align: left;
  background: rgba(251,247,238,0.05);
  border: 1px solid rgba(251,247,238,0.12);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gp-contact-link:hover { background: rgba(251,247,238,0.09); border-color: rgba(251,247,238,0.22); transform: translateY(-1px); }
.gp-contact-link-ic { font-size: 1.3rem; flex: none; line-height: 1; }
.gp-contact-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gp-contact-link-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gp-sun); }
.gp-contact-link-value { font-size: 0.95rem; font-weight: 600; color: var(--gp-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-contact-link-arrow { flex: none; color: var(--gp-cream); opacity: 0.45; transition: opacity 0.2s ease, transform 0.2s ease; }
.gp-contact-link:hover .gp-contact-link-arrow { opacity: 0.9; transform: translateX(3px); }
@media (max-width: 760px) {
  .gp-contact-body { grid-template-columns: 1fr; text-align: center; }
  .gp-contact-copy { text-align: center; }
  .gp-contact-ctas { justify-content: center; }
  .gp-contact h2 { max-width: none; }
  .gp-contact-lead { margin-left: auto; margin-right: auto; }
}

/* ============ FOOTER ============ */
.gp-footer {
  background: #0B0E0A;
  color: rgba(251,247,238,0.78);
  padding: 16px clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.gp-footer-logo {
  height: 44px;
  width: auto;
  justify-self: start;
  object-fit: contain;
}
.gp-footer-logo-tn {
  width: 44px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.gp-footer-logo:last-child { justify-self: end; }
.gp-footer-center { text-align: center; line-height: 1.45; }
.gp-footer-dept { font-size: 0.82rem; font-weight: 600; color: var(--gp-cream); }
.gp-footer-name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gp-sun); }
.gp-footer-credit { opacity: 0.6; font-size: 0.68rem; margin-top: 4px; }
/* Phones keep the logo · text · logo row rather than stacking —
   three short lines fit between two small logos. */
@media (max-width: 640px) {
  .gp-footer { gap: 12px; }
  .gp-footer-logo { height: 38px; }
  .gp-footer-logo-tn { width: 38px; padding: 4px; }
  .gp-footer-dept { font-size: 0.76rem; }
  .gp-footer-name { font-size: 0.66rem; }
  .gp-footer-credit { font-size: 0.62rem; }
}

/* ============================================================
   PREMIUM LAYER — motion, ridges, badge, marquee
   ============================================================ */
:root { --gp-ridge-h: clamp(38px, 6.5vw, 96px); --gp-ease: cubic-bezier(.2,.7,.2,1); }

/* ---------- scroll progress ---------- */
.gp-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 3px;
  background: linear-gradient(90deg, var(--gp-sun), #F3CF7A);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- mountain ridge dividers (echo the logo) ---------- */
.gp-ridge {
  display: block;
  width: 100%;
  height: var(--gp-ridge-h);
  pointer-events: none;
}
/* Three soft ranges fading into the distance, like the Ghats in morning mist. */
.gp-ridge-far { opacity: 0.22; }
.gp-ridge-mid { opacity: 0.5; }
/* into dark sections the far ranges take on forest greens, not grey */
.gp-ridge-into-dark .gp-ridge-far { color: var(--gp-sage); opacity: 0.32; }
.gp-ridge-into-dark .gp-ridge-mid { color: var(--gp-sage-dk); opacity: 0.85; }
.gp-hero .gp-ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; color: var(--gp-cream); }
.gp-ridge-into-dark { color: var(--gp-ink); background: var(--gp-cream); margin-bottom: -1px; }

/* hero content and controls sit above the ridge */
.gp-hero-content { padding-bottom: calc(var(--gp-ridge-h) + clamp(36px, 6vw, 72px)); }
.gp-hero-dots, .gp-scroll-cue { bottom: calc(var(--gp-ridge-h) + 18px); }

/* ---------- hero: slow Ken Burns + staggered entrance ---------- */
.gp-hero-media img { animation: gp-kenburns 16s ease-in-out infinite alternate; }
@keyframes gp-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.1) translate(-1%, -1%); }
}
.gp-hero-content > * { animation: gp-rise 1.1s var(--gp-ease) both; }
.gp-hero-content > :nth-child(1) { animation-delay: 0.15s; }
.gp-hero-content > :nth-child(2) { animation-delay: 0.3s; }
.gp-hero-content > :nth-child(3) { animation-delay: 0.5s; }
.gp-hero-content > :nth-child(4) { animation-delay: 0.7s; }
@keyframes gp-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.gp-hero-content h1 em {
  font-style: italic;
  /* soft terracotta (client's choice over yellow), echoing the red
     cottage walls; the tight dark halo keeps it clear on every slide */
  color: #F2A88A;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 4px 28px rgba(0, 0, 0, 0.55);
}

/* ---------- kicker ornament ---------- */
.gp-kicker { display: flex; align-items: center; gap: 12px; }
.gp-kicker::before { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: 0.7; }
.gp-kicker-center { justify-content: center; }
.gp-kicker-center::after { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: 0.7; }
.gp-contact-copy .gp-kicker { justify-content: flex-start; }
.gp-story-content .gp-kicker { justify-content: center; }
.gp-story-content .gp-kicker::after { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: 0.7; }
@media (max-width: 760px) { .gp-contact-copy .gp-kicker { justify-content: center; } }

/* ---------- scroll reveal (only when JS is running) ---------- */
.gp-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--gp-ease), transform 0.9s var(--gp-ease);
  transition-delay: var(--gp-d, 0ms);
}
.gp-reveal.gp-in { opacity: 1; transform: none; }
.gp-reveal-zoom { transform: scale(0.94); }
.gp-reveal-zoom.gp-in { transform: none; }

/* ---------- experiences marquee ---------- */
/* Deep forest ribbon: soft tonal gradient, fine gold rules, italic serif
   in cream with small gold diamonds. The edge fades are painted in the
   band's own colour, so they dissolve into it rather than going muddy. */
.gp-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  padding: 26px 0;
  color: #F4EEDD;
  background:
    radial-gradient(ellipse 60% 140% at 50% 50%, rgba(122, 150, 109, 0.22), transparent 70%),
    linear-gradient(180deg, #1E2A21 0%, #18221B 100%);
  border-top: 1px solid rgba(227, 167, 59, 0.45);
  border-bottom: 1px solid rgba(227, 167, 59, 0.45);
  box-shadow: inset 0 6px 0 -5px rgba(227, 167, 59, 0.18), inset 0 -6px 0 -5px rgba(227, 167, 59, 0.18);
}
.gp-marquee::before,
.gp-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0; z-index: 1;
  width: clamp(48px, 12vw, 180px);
  pointer-events: none;
}
.gp-marquee::before { left: 0;  background: linear-gradient(90deg, #1B261E, transparent); }
.gp-marquee::after  { right: 0; background: linear-gradient(270deg, #1B261E, transparent); }
.gp-marquee-track {
  display: inline-flex;
  animation: gp-marquee 60s linear infinite;
}
.gp-marquee span {
  font-family: var(--gp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  letter-spacing: 0.02em;
  padding: 0 30px;
  display: inline-flex; align-items: center; gap: 60px;
}
.gp-marquee span::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--gp-sun);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(227, 167, 59, 0.6);
}
/* the dark ribbon leads straight into the dark film section */
.gp-marquee + .gp-story { margin-top: 0; }
@keyframes gp-marquee { to { transform: translateX(-50%); } }

/* ---------- about: offset frame + rotating badge ---------- */
.gp-about-media {
  position: relative;
  overflow: visible;
  box-shadow: none;
  isolation: isolate;
}
.gp-about-media img { border-radius: var(--gp-r); box-shadow: var(--gp-shadow); }
.gp-about-media::before {
  content: "";
  position: absolute; inset: 0;
  transform: translate(18px, 18px);
  border: 1.5px solid var(--gp-sun);
  border-radius: var(--gp-r);
  z-index: -1;
}
.gp-about-badge {
  position: absolute;
  left: -46px; bottom: -46px;
  width: 138px; height: 138px;
  border-radius: 50%;
  background: var(--gp-ink);
  color: var(--gp-cream);
  display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(27,33,28,0.28);
}
.gp-about-badge svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: gp-spin 24s linear infinite;
}
.gp-about-badge text {
  font-family: var(--gp-sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: currentColor;
}
.gp-about-badge img { width: 62px; height: auto; border-radius: 0; box-shadow: none; }
@keyframes gp-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .gp-about-media { margin: 0 18px 18px 0; }
  .gp-about-badge { left: auto; right: -8px; bottom: -34px; width: 108px; height: 108px; }
  .gp-about-badge img { width: 48px; }
}

/* ---------- facilities: numbered cards with gold accent ---------- */
.gp-facility-grid { counter-reset: gp-fac; }
.gp-facility-card { position: relative; counter-increment: gp-fac; }
.gp-facility-card::before {
  content: "0" counter(gp-fac);
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--gp-serif);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gp-ink);
  background: rgba(251,247,238,0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 999px;
}
.gp-facility-card::after {
  content: "";
  position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gp-sun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--gp-ease);
}
.gp-facility-card:hover::after { transform: scaleX(1); }

/* ---------- gallery hover caption ---------- */
.gp-gallery-item::before {
  content: attr(data-caption);
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gp-gallery-item::after { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.6)); }
.gp-gallery-item:hover::before { opacity: 1; transform: none; }

/* ---------- floating WhatsApp ---------- */
.gp-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  /* --gp-fab-lift (set by script) raises the button above the footer
     once it scrolls into view, so it never sits on the footer logos */
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--gp-fab-lift, 0px));
  z-index: 70;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.gp-fab:hover { transform: scale(1.07); }
.gp-fab svg { width: 30px; height: 30px; fill: #fff; }
.gp-fab::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: gp-pulse 2.4s ease-out infinite;
}
@keyframes gp-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to   { transform: scale(1.6); opacity: 0; }
}
/* keep the sound toggle clear of the floating button */
.gp-sound-toggle { left: 16px; right: auto; }

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gp-hero-media img, .gp-hero-content > *, .gp-marquee-track,
  .gp-about-badge svg, .gp-fab::before { animation: none; }
  .gp-reveal { opacity: 1; transform: none; transition: none; }
}
.gp-hero-sub { margin-top: 30px; }
.gp-eyebrow { text-shadow: 0 1px 12px rgba(0,0,0,0.45); }