/* ============================================================
   KORKOO TRAVEL PLATFORM — Global Stylesheet  v1.1.0
   ============================================================ */

/* ── 1. CSS VARIABLES ────────────────────────────────────── */
:root {
  /* 🎨 KORKOO CUSTOM BRAND PALETTE */
  --korkoo-primary:  #0d9488;
  --korkoo-secondary:#10b981;
  --korkoo-accent:   #f59e0b;
  --korkoo-blue:     #0d9488;
  --korkoo-green:    #10b981;
  --korkoo-orange:   #f59e0b;
  --korkoo-teal:     #14b8a6;
  --korkoo-taupe:    #92400e;
  --korkoo-slate:    #0f172a; /* Redirect to a Deep Navy-Teal */
  --korkoo-charcoal: #334155; 
  --korkoo-grey:     #64748b;
  --korkoo-deep:     #064e3b; /* Deep Forest Green for footer/contrast */
  
  --korkoo-peach:   #ffedd5;
  --korkoo-bright:  #38bdf8;
  --korkoo-bluebell:#2563eb;

  --korkoo-bg-soft: #f8fafc;
  --korkoo-white:   #ffffff;

  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.7;

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.25rem;
  --space-xl:  2rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(54,62,72,0.08);
  --shadow-md: 0 4px 16px rgba(54,62,72,0.12);
  --shadow-lg: 0 8px 32px rgba(54,62,72,0.16);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-whatsapp: 150;
}


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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Boxed layout — outer canvas */
  background-color: #e8e3dc;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(245,130,32,0.07) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(31,157,85,0.06)  0%, transparent 50%);
}

body {
  font-family: var(--font-primary);
  color: var(--korkoo-charcoal);
  background-color: var(--korkoo-bg-soft);
  line-height: var(--line-height-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* ─── AUTH & USER NAV ─────────────────────────────────────── */
.nav__user-dropdown {
  position: relative;
}
.nav__user-trigger {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--korkoo-deep);
}
.nav__user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: white;
  min-width: 180px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 8px;
  z-index: 1000;
}
.nav__user-menu a {
  display: block;
  padding: 10px 15px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--korkoo-charcoal);
  border-radius: 8px;
  transition: 0.2s;
}
.nav__user-menu a:hover {
  background: #f8fafc;
  color: var(--korkoo-orange);
}
.nav__user-menu .text-red { color: #dc2626 !important; }

.nav__link--auth {
    font-weight: 600;
    margin-right: 1.5rem;
}

/* ─── AUTH CARDS ─────────────────────────────────────────── */
.auth-page {
    padding: 6rem 0;
    background: #f8fafc;
}
.auth-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    padding: 0 !important;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}
.auth-card--login {
    grid-template-columns: 1fr 1.2fr;
}
.auth-card__visual {
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 500px;
}
.auth-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    color: white;
}
.auth-card__overlay h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.auth-card__overlay p { font-size: 1.1rem; opacity: 0.9; }

.auth-card__content {
    padding: 2rem;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-card__header { margin-bottom: 2rem; }
.auth-card__header .section__title { font-size: 2rem; margin-bottom: 10px; }
.auth-card__header .section__subtitle { font-size: 0.95rem; margin: 0; text-align: left; }

.auth-card__footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--korkoo-grey);
}
.auth-card__footer a { color: var(--korkoo-orange); font-weight: 700; }

@media (max-width: 850px) {
    .auth-card { grid-template-columns: 1fr; }
    .auth-card__visual { display: none; }
    .auth-card__content { padding: 3rem 1.5rem; }
}

/* Base Layout Fixes */
  max-width: 1440px;
  margin-inline: auto;
  box-shadow: 0 0 60px rgba(54,62,72,0.18);
}

main { flex: 1; }

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

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

ul, ol { list-style: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; border: none; background: none; }


/* ── 3. TYPOGRAPHY ───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { 
  font-family: var(--font-heading);
  font-weight: 800; 
  line-height: 1.1; 
  color: var(--korkoo-deep); 
  letter-spacing: -0.03em;
}

/* Gradient effects on large headings - using brand-depth instead of black */
h1 { 
  font-size: clamp(2.5rem, 6vw, 4.5rem); 
  background: linear-gradient(135deg, var(--korkoo-deep) 20%, var(--korkoo-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h2 { 
  font-size: clamp(2.25rem, 5vw, 3.25rem); 
  background: linear-gradient(135deg, var(--korkoo-deep) 40%, var(--korkoo-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h3 { 
  font-size: clamp(1.75rem, 4vw, 2.5rem); 
  color: var(--korkoo-deep);
}

/* Specific section heading overrides for color variety */
.hero__title { font-size: clamp(2.25rem,5vw,3.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.about__title { font-size: clamp(2rem,4vw,3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.toppicks__title { font-family: 'Plus Jakarta Sans', sans-serif; }
.experiences__title { font-family: 'Plus Jakarta Sans', sans-serif; }
.locals-heading { font-family: 'Plus Jakarta Sans', sans-serif; }

h4 { font-size: 1.35rem; font-weight: 700; color: var(--korkoo-charcoal); }
h5 { font-size: 1.125rem; font-weight: 700; }
h6 { font-size: 0.875rem; font-weight: 700; }
p  { max-width: 65ch; color: #4b5563; line-height: 1.8; font-weight: 500; }
strong { font-weight: 700; color: var(--korkoo-slate); }


/* ── 4. CONTAINER & LAYOUT ───────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px; /* Standardized width */
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.container--narrow { max-width: 800px; }
.container--wide   { max-width: 1400px; }

/* Boxed System */
.boxed-wrapper {
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
  border-radius: 32px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  width: 100%;
}

/* CAROUSEL WRAPPER: Handles edge-to-edge scrollers inside a box */
.boxed-wrapper--carousel {
  padding-left: 0;
  padding-right: 0;
}
.boxed-wrapper--carousel > *:not(.k-dc__track):not(.k-hl__slider):not(.locals__track):not(.k-collage__scroller) {
  padding-left: 4rem;
  padding-right: 4rem;
}

/* Reduced padding versions */
.boxed-wrapper--p2 { padding: 2rem; }
.boxed-wrapper--p0 { padding: 0; }

@media (max-width: 768px) {
  .boxed-wrapper {
    padding: 2.5rem 1rem;
    border-radius: 20px;
    margin-bottom: 2rem;
  }
}


/* ── 5. NAVIGATION ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 2px solid var(--korkoo-primary);
  transition: all var(--transition-base);
}
.site-header.scrolled { 
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 40px rgba(13, 148, 136, 0.1);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.nav__logo { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.nav__logo img { height: 42px; width: auto; border-radius: 8px; }
.nav__logo-text { 
  font-family: var(--font-heading);
  font-size: 1.5rem; 
  font-weight: 800; 
  color: var(--korkoo-charcoal); 
  letter-spacing: -0.04em; 
}

.nav__links { 
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: rgba(13, 148, 136, 0.06); 
  border: 1px solid rgba(13, 148, 136, 0.1);
  border-radius: 100px; position: relative;
}

.nav__pill {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px);
  background: var(--korkoo-primary); border-radius: 100px; 
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none; z-index: 1; opacity: 0;
}

.nav__link {
  font-size: 0.875rem; font-weight: 700; color: var(--korkoo-charcoal);
  padding: 0.5rem 1.25rem; border-radius: 100px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; z-index: 2; display: block;
}
.nav__link:hover { color: white; }
.nav__links:hover .nav__pill { opacity: 1; }

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

.nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; border-radius: var(--radius-sm); }
.nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--korkoo-charcoal); border-radius: var(--radius-full); transition: transform var(--transition-base), opacity var(--transition-base); }

.nav__mobile {
  display: none; flex-direction: column; gap: var(--space-md);
  padding: var(--space-lg); border-top: 1px solid rgba(157,138,116,0.2);
  background: var(--korkoo-bg-soft);
}
.nav__mobile .nav__link { font-size: 1rem; }


/* ── 6. BUTTONS ──────────────────────────────────────────── */
/* Shine Lens Glow Effect */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm); padding: 0.75rem 1.85rem; border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.9375rem; font-weight: 700;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer; position: relative; overflow: hidden;
  will-change: transform, box-shadow;
}

/* Cursor-aware Glow Lens */
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.25) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.btn:hover::before { opacity: 1; }

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.btn--primary { 
  background: var(--korkoo-primary); 
  color: var(--korkoo-white); border: none;
}
.btn--primary:hover { 
  background: #0d9488;
  box-shadow: 0 15px 35px rgba(13, 148, 136, 0.3);
}

.btn--outline { 
  border: 2px solid var(--korkoo-charcoal); 
  color: var(--korkoo-charcoal); background: transparent; 
}
.btn--outline:hover { 
  background: var(--korkoo-charcoal); color: var(--korkoo-white); 
  box-shadow: 0 15px 30px rgba(30, 41, 59, 0.2);
}

/* Shine Swipe Animation */
.btn::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-25deg); transition: none;
}
.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.btn:hover::after {
  left: 150%; transition: all 0.6s ease-in-out;
}

.btn--primary { 
  border: none;
}
.btn--primary:hover { 
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%); 
}
.btn--outline { border: 2px solid var(--korkoo-charcoal); color: var(--korkoo-charcoal); background: transparent; }
.btn--outline:hover { background: var(--korkoo-charcoal); color: var(--korkoo-white); }
.btn--ghost { color: var(--korkoo-charcoal); padding: 0.6rem 0.8rem; }
.btn--sm { padding: 0.45rem 1rem; font-size: 0.875rem; }


/* ── 7. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--korkoo-deep);
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-xl) var(--space-lg);
}
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl); padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-md); }
.footer__logo { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.footer__tagline { font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,0.65); max-width: 26ch; }
.footer__badge { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.8125rem; color: rgba(255,255,255,0.5); }
.footer__badge-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.6; }
.footer__col-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--korkoo-orange); margin-bottom: var(--space-md); }
.footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col a { font-size: 0.9375rem; color: rgba(255,255,255,0.6); transition: color var(--transition-fast); }
.footer__col a:hover { color: var(--korkoo-white); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-lg); gap: var(--space-md); flex-wrap: wrap; }
.footer__copy { font-size: 0.8125rem; color: rgba(255,255,255,0.4); }
.footer__socials { display: flex; gap: var(--space-md); }
.footer__social-link {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); font-size: 0.875rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer__social-link:hover { background: var(--korkoo-orange); color: var(--korkoo-white); border-color: var(--korkoo-orange); }


/* ── 8. WHATSAPP WIDGET ──────────────────────────────────── */
.whatsapp-widget { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-whatsapp); }
.whatsapp-widget__btn {
  display: flex; align-items: center; gap: var(--space-sm);
  background: #25d366; color: var(--korkoo-white);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.9375rem;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.whatsapp-widget__btn:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37,211,102,0.5); }
.whatsapp-widget__icon { width: 22px; height: 22px; flex-shrink: 0; }


/* ── 9. UTILITIES ────────────────────────────────────────── */
.text-center { text-align: center; }
.text-orange  { color: var(--korkoo-orange); }
.text-green   { color: var(--korkoo-green); }
.text-blue    { color: var(--korkoo-blue); }
.text-teal    { color: var(--korkoo-teal); }
.text-muted   { color: var(--korkoo-grey); }
.bg-soft      { background: var(--korkoo-bg-soft); }
.bg-white     { background: var(--korkoo-white); }
.section { 
  padding-block: var(--space-xl); 
  position: relative; 
}

/* ── Content Sheet (Single Box Layout) ── */
.content-sheet {
  background: var(--korkoo-white, #ffffff);
  border-radius: 42px;
  box-shadow: 0 10px 80px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  margin-top: -5rem; /* Rise over hero */
  position: relative;
  z-index: 20;
  padding-top: 2rem;
  padding-bottom: 2rem;
  overflow: hidden; /* Clips internal section gradients if any */
}

/* Ensure inner containers don't double up on width */
.content-sheet .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 4rem; /* generous internal padding */
}

@media (max-width: 991px) {
  .content-sheet {
    margin-top: -2rem;
    border-radius: 24px;
  }
  .content-sheet .container {
    padding-inline: 1.5rem;
  }
}
.section-header {
  margin-bottom: 3.5rem;
  max-width: 800px;
}
.section-header--centered {
  margin-inline: auto;
  text-align: center;
}
.section-header--left {
  text-align: left;
}
.section-header .section__eyebrow {
  margin-bottom: 1.25rem;
}
.section-header .section__title {
  margin-bottom: 1rem;
}
.section-header .section__subtitle {
  margin-top: 1rem;
}

.section__header { text-align: center; margin-bottom: 1.25rem; max-width: 800px; margin-inline: auto; }
.section__eyebrow { 
  display: inline-block; 
  font-family: var(--font-heading);
  font-size: 0.75rem; 
  font-weight: 800; 
  letter-spacing: 0.2rem; 
  text-transform: uppercase; 
  color: var(--korkoo-teal); 
  margin-bottom: var(--space-md);
  padding: 0.4rem 1rem;
  background: rgba(20, 184, 166, 0.08);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(20, 184, 166, 0.15);
}
.section__eyebrow--orange { color: var(--korkoo-orange); background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.15); }
.section__eyebrow--green  { color: var(--korkoo-green); background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.15); }
.section__eyebrow--teal   { color: var(--korkoo-teal); background: rgba(20, 184, 166, 0.08); border-color: rgba(20, 184, 166, 0.15); }

.section__title { 
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: var(--space-md); 
  letter-spacing: -0.02em;
}
.section__subtitle { 
  font-family: var(--font-primary);
  font-size: 1.05rem; 
  font-weight: 500;
  line-height: 1.7;
  color: var(--korkoo-grey); 
  margin-inline: auto; 
  max-width: 65ch; 
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* ── 10. BASE RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .nav__links, .nav__actions .btn--primary { display: none; }
  .nav__hamburger { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .whatsapp-widget { bottom: 16px; right: 16px; }
}

/* ── 11. INNOVATIVE EFFECTS (Catchy) ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform, opacity;
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay staggered children */
.toppicks__grid .reveal:nth-child(2), .toppicks__row2 .reveal:nth-child(2) { transition-delay: 0.1s; }
.toppicks__grid .reveal:nth-child(3), .toppicks__row2 .reveal:nth-child(3) { transition-delay: 0.2s; }
.toppicks__row2 .reveal:nth-child(4) { transition-delay: 0.3s; }

.pulsate {
  animation: pulsate 2s infinite ease-in-out;
}
@keyframes pulsate {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
}

[data-magnetic] {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}


/* ══════════════════════════════════════════════════════════
   11. HERO SECTION
══════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--korkoo-bg-soft);
  padding-block: 2rem 1.5rem;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), rgba(249, 115, 22, 0.08) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.hero__blob--1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,130,32,0.12) 0%, transparent 70%); top: -120px; left: -100px; }
.hero__blob--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(31,157,85,0.10)  0%, transparent 70%); bottom: -80px; right: 10%; }

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-xl); align-items: center;
  min-height: calc(100vh - 68px);
  perspective: 1000px;
}

/* LEFT */
.hero__content { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 560px; }

.hero__badges { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); }
.hero__badge--dipp { background: rgba(37, 99, 235, 0.12); color: var(--korkoo-blue); border: 1px solid rgba(37, 99, 235, 0.25); }
.hero__badge--iim  { background: rgba(16, 185, 129, 0.10);  color: var(--korkoo-green);  border: 1px solid rgba(16, 185, 129, 0.20); }

.hero__title { font-size: clamp(2.25rem,5vw,3.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.hero__title-highlight { background: linear-gradient(135deg, var(--korkoo-secondary) 0%, var(--korkoo-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero__subtitle { 
  font-family: var(--font-primary);
  font-size: 1.125rem; 
  font-weight: 450;
  line-height: 1.8; 
  color: #5a6270; 
  max-width: 50ch; 
  margin-bottom: 2rem;
}
.hero__subtitle em { 
  font-style: normal; 
  color: var(--korkoo-teal); 
  font-weight: 700; 
  background: linear-gradient(120deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
  padding-inline: 4px;
}

.hero__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__cta-primary  { padding: 0.875rem 1.75rem; font-size: 1rem; gap: 0.5rem; }
.hero__cta-secondary { padding: 0.875rem 1.75rem; font-size: 1rem; }

.hero__stats { display: flex; align-items: center; gap: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(157,138,116,0.25); }
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-number { font-size: 1.5rem; font-weight: 800; color: var(--korkoo-charcoal); line-height: 1; }
.hero__stat-plus { font-size: 1rem; color: var(--korkoo-orange); }
.hero__stat-label { font-size: 0.8125rem; color: var(--korkoo-grey); font-weight: 500; }
.hero__stat-divider { width: 1px; height: 36px; background: rgba(157,138,116,0.3); }

/* RIGHT */
.hero__visual { 
  position: relative; 
  display: grid; 
  grid-template-columns: 1.1fr 1fr; 
  grid-template-rows: auto auto; 
  gap: 14px; 
  height: 520px; 
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}

.hero__dest-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: var(--korkoo-white); border: 1px solid rgba(157,138,116,0.25);
  box-shadow: var(--shadow-md); display: inline-flex; align-items: center; gap: 6px;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-full);
  font-size: 0.8125rem; font-weight: 600; color: var(--korkoo-teal); white-space: nowrap;
}

.hero__img-wrap { border-radius: var(--radius-lg); overflow: hidden; background: var(--korkoo-taupe); position: relative; }
.hero__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hero__img-wrap:hover img { transform: scale(1.04); }

.hero__img--tall { grid-column: 1; grid-row: 1 / 3; }
.hero__img-col { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 14px; }
.hero__img--top, .hero__img--bottom { flex: 1; }

.hero__review-card {
  position: absolute; bottom: -20px; left: -20px; z-index: 3;
  background: var(--korkoo-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-md);
  max-width: 220px; border-left: 3px solid var(--korkoo-orange);
}
.hero__review-stars { font-size: 0.875rem; color: var(--korkoo-orange); letter-spacing: 2px; margin-bottom: 6px; }
.hero__review-text  { font-size: 0.8125rem; line-height: 1.5; color: var(--korkoo-charcoal); font-style: italic; max-width: none; margin-bottom: 6px; }
.hero__review-author { font-size: 0.75rem; font-weight: 600; color: var(--korkoo-grey); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; min-height: auto; padding-block: 1rem; gap: var(--space-lg); }
  .hero__content { max-width: 100%; text-align: center; }
  .hero__badges, .hero__ctas, .hero__stats { justify-content: center; }
  .hero__subtitle { margin-inline: auto; }
  .hero__visual { height: 380px; }
  .hero__review-card { bottom: -12px; left: 8px; max-width: 185px; }
}
@media (max-width: 480px) {
  .hero { padding-block: 3rem 2rem; }
  .hero__visual { height: 280px; }
  .hero__review-card { display: none; }
  .hero__dest-tag { font-size: 0.6875rem; }
}


/* ══════════════════════════════════════════════════════════
   12. WHAT IS KORKOO? (ABOUT) SECTION
══════════════════════════════════════════════════════════ */
.about { background: var(--korkoo-white); }

.about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }

/* LEFT */
.about__visual { position: relative; }
/* LEFT: Pinterest style masonry */
.about__masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  position: relative;
}

.about__masonry-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Stagger the second column for that classic Pinterest look */
.about__masonry-col--2 {
  margin-top: 3.5rem; 
}

.about__masonry-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}

.about__masonry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.about__masonry-img:hover img {
  transform: scale(1.05);
}

.crop-tall { aspect-ratio: 4/5; }
.crop-short { aspect-ratio: 4/3; }

.about__cred {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--korkoo-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 0.75rem 1.1rem; min-width: 170px;
  animation: credFloat 4s ease-in-out infinite;
  z-index: 10;
}
.about__cred--dipp { top: -20px; right: -24px; animation-delay: 0s; }
.about__cred--iim  { bottom: 40px; right: -30px; animation-delay: 2s; }
@keyframes credFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.about__cred-icon  { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.about__cred-title { font-size: 0.875rem; font-weight: 700; color: var(--korkoo-charcoal); line-height: 1.2; max-width: none; }
.about__cred-sub   { font-size: 0.75rem; color: var(--korkoo-grey); max-width: none; }

/* RIGHT */
.about__content { display: flex; flex-direction: column; gap: var(--space-md); }
.about__title { font-size: clamp(2rem,4vw,3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.about__lead  { font-size: 1.15rem; line-height: 1.8; color: var(--korkoo-charcoal); font-weight: 500; max-width: 50ch; margin-bottom: 0.5rem; }
.about__lead strong { color: var(--korkoo-orange); font-weight: 800; }

/* Editorial style oversized pull quote */
.about__quote { 
  position: relative; 
  padding: 1.5rem 0 1.5rem 3.5rem; 
  margin: 1.5rem 0 2rem 0; 
  background: transparent; 
  border: none;
}
.about__quote::before {
  content: "“";
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 6.5rem;
  color: var(--korkoo-teal);
  opacity: 0.15;
  position: absolute;
  top: -1.75rem;
  left: -0.5rem;
  line-height: 1;
}
.about__quote p { 
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.9rem; 
  font-style: italic; 
  font-weight: 500;
  color: var(--korkoo-charcoal); 
  line-height: 1.3; 
  max-width: 24ch; 
  margin-bottom: 1.25rem; 
}
.about__quote p em { font-style: italic; color: var(--korkoo-orange); font-weight: 700; }
.about__quote-author { 
  font-size: 0.85rem; 
  font-weight: 700; 
  color: var(--korkoo-grey); 
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.about__cta { align-self: flex-start; gap: 0.5rem; }

@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__masonry { max-width: 480px; margin-inline: auto; }
  .about__cred--dipp, .about__cred--iim { right: -12px; }
}
@media (max-width: 600px) {
  .about__cred { display: none; }
}


/* ══════════════════════════════════════════════════════════
   13. OUR ECOSYSTEM SECTION  (v8 inspiration)
══════════════════════════════════════════════════════════ */

/* Warm sand gradient — mirrors v8 sec-sand */
.ecosystem {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* ── 2-Column Ecosystem Layout ── */
.ecosystem__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.ecosystem__content-col {
  padding-right: 2rem;
}
.section__header--left { text-align: left; }
.section__subtitle--left { margin-inline: 0; max-width: 480px; }

/* ── Ecosystem Trail Visual (Vertical right) ── */
.ecosystem__trail-wrapper {
  position: relative;
  background: url('../images/site/trail.png') no-repeat center center;
  background-size: contain;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}

.eco-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  width: 260px;
  position: relative;
}

/* Wobbly positioning to organically follow a vertical graphical path */
.eco-node:nth-child(1) { transform: translateX(-50px); }
.eco-node:nth-child(2) { transform: translateX(45px); }
.eco-node:nth-child(3) { transform: translateX(-25px); }

.eco-node__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--korkoo-white);
  border: 6px solid currentColor;
  box-shadow: 0 0 0 8px rgba(255,255,255,0.6);
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}

.eco-node:hover .eco-node__dot {
  transform: scale(1.2);
}

.eco-node--blue   { color: var(--korkoo-blue); }
.eco-node--green  { color: var(--korkoo-green); }
.eco-node--orange { color: var(--korkoo-orange); }

.eco-node__content {
  background: var(--korkoo-white);
  padding: 1.75rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
}

.eco-node:hover .eco-node__content {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.1);
}

.eco-node__kicker {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 3.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: currentColor;
  opacity: 0.15;
  position: absolute;
  top: -15px;
  right: 15px;
  pointer-events: none;
}

.eco-node__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--korkoo-charcoal);
  margin-bottom: 0.5rem;
}

.eco-node__sub {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--korkoo-charcoal);
  opacity: 0.8;
  font-weight: 500;
  display: block;
}

/* ── Bottom CTA strip (adapted for left column) ── */
.howwork__cta-strip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  margin: 3rem 0 0 0;
  padding: 0.65rem 0.65rem 0.65rem 1.75rem;
  background: var(--korkoo-white);
  border: 1px solid rgba(245,134,51,0.25); /* soft orange tint border */
  border-radius: 99px;
  box-shadow: 0 12px 30px rgba(245,134,51,0.08); /* glowing orange shadow */
  flex-wrap: wrap;
  position: relative;
  left: 0;
  transform: none;
}

.howwork__cta-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--korkoo-charcoal);
  max-width: none;
  margin: 0;
}

/* Local override for button inside strip to look sleek */
.howwork__cta-strip .btn {
  border-radius: 99px;
  padding: 0.75rem 1.5rem;
  background: var(--korkoo-orange);
  color: var(--korkoo-white);
  box-shadow: 0 6px 16px rgba(245,134,51,0.25);
  border: none;
}
.howwork__cta-strip .btn:hover {
  background: #E07324;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,134,51,0.35);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ecosystem__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ecosystem__content-col {
    padding-right: 0;
  }
  .section__header--left { text-align: center; }
  .section__subtitle--left { margin-inline: auto; }
  
  .ecosystem__trail-wrapper {
    min-height: auto;
    padding: 3rem 0;
    gap: 2.5rem;
    background-size: cover;
  }
  .eco-node:nth-child(1),
  .eco-node:nth-child(2),
  .eco-node:nth-child(3) { transform: translateX(0); }
  
  .howwork__cta-strip {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .howwork__cta-strip { 
    flex-direction: column; 
    text-align: center; 
    padding: 1.5rem; 
    border-radius: 20px; 
    gap: 1rem; 
    width: 100%; 
    left: 0; 
    transform: none; 
  }
}

/* ══════════════════════════════════════════════════════════
   14. TRUST ENGINE (VERIFICATION) SECTION
   Premium Trust & Safety UI
══════════════════════════════════════════════════════════ */
.trust-engine {
  padding: 50px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.trust-engine__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.trust-engine__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.trust-engine__eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.trust-engine__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 20px;
}

.trust-engine__subtitle {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
}

.trust-engine__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.trust-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  position: relative;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.trust-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.trust-card__num {
  font-size: 0.9rem;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 20px;
}

.trust-card__icon {
  width: 48px;
  height: 48px;
  background: #f8fafc;
  color: #6366f1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.trust-card:hover .trust-card__icon {
  background: #6366f1;
  color: #ffffff;
  transform: rotate(6deg) scale(1.1);
}

.trust-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 10px;
}

.trust-card__text {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.trust-card--active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}

.trust-card__tag {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px;
  background: #6366f1;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .trust-engine__grid {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin: 0 auto;
  }
  .trust-engine__title {
    font-size: 2rem;
  }
}

/* ── PEDIGREE & JOURNEY SECTION ─────────────────────── */
.pedigree-journey {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.pedigree-journey__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.pedigree-journey__content-col h2 {
    font-size: 2.25rem;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 24px;
    font-weight: 800;
}

.pedigree-journey__text {
    font-size: 1.15rem;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 32px;
}

/* Validation Shield: Innovative Floating Logos */
.pedigree-journey__visual-col {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pedigree-shield {
    position: relative;
    width: 280px;
    height: 320px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 40px 80px rgba(13, 148, 136, 0.1);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 2;
}

.pedigree-shield__icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: var(--korkoo-primary);
}

.pedigree-shield__status {
    font-weight: 800;
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 5px;
}

.pedigree-shield__sub {
    font-size: 0.9rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.floating-badge {
    position: absolute;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.5s ease;
    border: 1px solid #f1f5f9;
}

.floating-badge--dpiit {
    top: -20px;
    right: -40px;
    width: 160px;
    height: 100px;
    animation: float 6s ease-in-out infinite;
}

.floating-badge--iim {
    bottom: -10px;
    left: -40px;
    width: 180px;
    height: 100px;
    animation: float 6s ease-in-out infinite reverse;
}

.floating-badge img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

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

@media (max-width: 991px) {
    .pedigree-journey__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }
    .pedigree-journey__visual-col {
        height: 350px;
    }
}

/* ══════════════════════════════════════════════════════════
   15. OUR DESTINATIONS & TOURS SECTION
══════════════════════════════════════════════════════════ */

.tours {
  background: var(--korkoo-white);
}

/* ── Filter Tabs ── */
.tours__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.tours__filter {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--korkoo-taupe);
  background: transparent;
  border-radius: var(--radius-full);
  border: 1px solid rgba(157,138,116,0.3);
  transition: all var(--transition-fast);
}

.tours__filter:hover {
  border-color: var(--korkoo-charcoal);
  color: var(--korkoo-charcoal);
}

.tours__filter--active {
  background: var(--korkoo-charcoal);
  color: var(--korkoo-white);
  border-color: var(--korkoo-charcoal);
}

/* ── Cards Grid ── */
.tours__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.tours__card {
  background: var(--korkoo-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid rgba(157,138,116,0.15);
}

.tours__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Card Image & Overlay */
.tours__card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tours__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tours__card:hover .tours__card-img img {
  transform: scale(1.04);
}

/* Dark overlay on hover */
.tours__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(54,62,72,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
}

.tours__card:hover .tours__card-overlay {
  opacity: 1;
}

.tours__card-cta {
  transform: translateY(15px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tours__card:hover .tours__card-cta {
  transform: translateY(0);
  opacity: 1;
}

/* Badges over image */
.tours__card-img > span {
  position: absolute;
  z-index: 3;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tours__region-tag {
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,0.9);
  color: var(--korkoo-charcoal);
}

.tours__difficulty {
  top: 12px;
  right: 12px;
  color: var(--korkoo-white);
}

.tours__difficulty--easy     { background: rgba(31,157,85,0.85); }
.tours__difficulty--moderate { background: rgba(245,130,32,0.85); }
.tours__difficulty--hard     { background: rgba(54,62,72,0.85); }

.tours__bestseller-tag {
  top: 12px;
  left: 12px;
  background: #FFD700;
  color: var(--korkoo-charcoal);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Card Body */
.tours__card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tours__card-title {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.tours__card-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--korkoo-grey);
  margin-bottom: var(--space-md);
  flex: 1;
}

/* Meta: Duration, Pax, Price */
.tours__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(157,138,116,0.2);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tours__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--korkoo-charcoal);
}

.tours__meta-item svg {
  color: var(--korkoo-orange);
}

.tours__card-price {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--korkoo-teal);
  margin-left: auto;
}

/* Bottom CTA */
.tours__view-all {
  text-align: center;
  margin-top: var(--space-xl);
}

.tours__view-all-btn {
  padding: 0.875rem 2rem;
  font-size: 1rem;
}

/* ── Tours Responsive ── */
@media (max-width: 600px) {
  .tours__grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   15. MEET OUR LOCALS SECTION
══════════════════════════════════════════════════════════ */

.locals {
  overflow: hidden; /* Prevent horizontal scrollbar on body */
}

/* Header & Controls */
.locals__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.locals__controls {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.locals__btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--korkoo-white);
  border: 1px solid rgba(157,138,116,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--korkoo-charcoal);
  transition: all var(--transition-fast);
}

.locals__btn:hover {
  background: var(--korkoo-charcoal);
  color: var(--korkoo-white);
  border-color: var(--korkoo-charcoal);
}

/* Scroller Track */
.locals__track {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-lg);
  /* Hide scrollbar */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.locals__track::-webkit-scrollbar {
  display: none;
}

/* ═══════ LOCALS CARD — Editorial Magazine Style ═══════ */
.locals__card {
  flex: 0 0 280px;
  min-width: 280px;
  scroll-snap-align: start;
  background: var(--korkoo-white);
  border-radius: 16px;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.35s ease;
  /* Outer editorial border */
  border: 2px solid rgba(157,138,116,0.18);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.locals__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* ── Thick left accent bar ── */
.locals__card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-radius: 16px 0 0 16px;
  transition: width 0.3s ease;
}
.locals__card:hover .locals__card-accent {
  width: 9px;
}
.locals__card--blue   .locals__card-accent { background: var(--korkoo-blue); }
.locals__card--green  .locals__card-accent { background: var(--korkoo-green); }
.locals__card--orange .locals__card-accent { background: var(--korkoo-orange); }
.locals__card--teal   .locals__card-accent { background: var(--korkoo-teal); }

/* ── Top colour strip ── */
.locals__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.locals__card:hover::before { opacity: 1; }
.locals__card--blue::before   { background: linear-gradient(90deg, var(--korkoo-blue), #7dd3fc); }
.locals__card--green::before  { background: linear-gradient(90deg, var(--korkoo-green), #6ee7b7); }
.locals__card--orange::before { background: linear-gradient(90deg, var(--korkoo-orange), #fbbf24); }
.locals__card--teal::before   { background: linear-gradient(90deg, var(--korkoo-teal), #5eead4); }

/* ── Inner layout ── */
.locals__card-inner {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.1rem 1.6rem; /* extra left for accent bar */
  flex: 1;
  align-items: flex-start; /* keep portrait + text top-aligned */
}

/* ── Portrait cluster ── */
.locals__card-portrait-wrap {
  flex-shrink: 0;
  position: relative;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding-top: 5px; /* breathing room so ring isn't clipped by card top */
}

/* Decorative ring behind photo */
.locals__card-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px dashed rgba(157,138,116,0.3);
  transition: border-color 0.3s ease, transform 0.5s ease;
}

.locals__card--blue   .locals__card-ring { border-color: rgba(0,166,230,0.35); }
.locals__card--green  .locals__card-ring { border-color: rgba(31,157,85,0.35); }
.locals__card--orange .locals__card-ring { border-color: rgba(245,130,32,0.4); }
.locals__card--teal   .locals__card-ring { border-color: rgba(0,152,151,0.35); }

.locals__card:hover .locals__card-ring {
  transform: rotate(45deg) scale(1.06);
}

.locals__card--blue:hover   .locals__card-ring { border-style: solid; border-color: rgba(0,166,230,0.6); }
.locals__card--green:hover  .locals__card-ring { border-style: solid; border-color: rgba(31,157,85,0.6); }
.locals__card--orange:hover .locals__card-ring { border-style: solid; border-color: rgba(245,130,32,0.7); }
.locals__card--teal:hover   .locals__card-ring { border-style: solid; border-color: rgba(0,152,151,0.6); }

/* Photo circle */
.locals__card-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--korkoo-white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  position: relative;
  z-index: 1;
}

.locals__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.locals__card:hover .locals__card-photo img { transform: scale(1.1); }

/* Role pill below photo */
.locals__card-role {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  white-space: nowrap;
  color: white;
}
.locals__card--blue   .locals__card-role { background: var(--korkoo-blue); }
.locals__card--green  .locals__card-role { background: var(--korkoo-green); }
.locals__card--orange .locals__card-role { background: var(--korkoo-orange); }
.locals__card--teal   .locals__card-role { background: var(--korkoo-teal); }

/* ── Right text column ── */
.locals__card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.locals__card-name {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--korkoo-deep);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}
.locals__card:hover .locals__card-name {
  color: var(--korkoo-primary);
}

.locals__card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.locals__card--blue   .locals__card-location { color: var(--korkoo-blue); }
.locals__card--green  .locals__card-location { color: var(--korkoo-green); }
.locals__card--orange .locals__card-location { color: var(--korkoo-orange); }
.locals__card--teal   .locals__card-location { color: var(--korkoo-teal); }

.locals__card-bio {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--korkoo-grey);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .locals__header { flex-direction: column; align-items: flex-start; }
  .locals__card   { flex: 0 0 260px; min-width: 260px; }
}
@media (max-width: 600px) {
  .locals__card { flex: 0 0 82vw; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════
   16. TESTIMONIALS SECTION
══════════════════════════════════════════════════════════ */

/* (merged below) */

/* ══════════════════════════════════════════════════════════
   WORD ON THE TRAIL  —  Masonry layout, light on-theme bg
══════════════════════════════════════════════════════════ */

/* ── Section bg — matches Top Picks / other sections ── */
.section {
  padding-block: 1.5rem; /* Even tighter for maximum density */
  position: relative;
}

.section + .section {
  margin-top: 0;
}

.testimonials {
  background: linear-gradient(150deg, #f0fdf9 0%, #f7f2ec 55%, #ecfdf5 100%) !important;
  padding: 2rem 0;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid texture */
.testimonials::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(13,148,136,0.07) 1.5px, transparent 0);
  background-size: 30px 30px;
}

/* Section text — dark like all other sections */
.testimonials .section__eyebrow {
  color: var(--korkoo-primary, #0d9488);
  border-color: rgba(13,148,136,0.25);
  background: rgba(13,148,136,0.06);
}
.testimonials .section__title {
  background: linear-gradient(135deg, var(--korkoo-deep,#064e3b) 30%, var(--korkoo-primary,#0d9488) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.testimonials .section__subtitle { color: var(--korkoo-grey, #64748b); }

/* ══ TRUE CSS MASONRY (3 → 2 → 1 columns) ══ */
.dispatch__stack {
  columns: 3 240px;
  column-gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Card ── */
.dispatch__card {
  break-inside: avoid;          /* keeps card in one column */
  column-span: none;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(13,148,136,0.1);
  border-top: 3px solid var(--korkoo-primary, #0d9488);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dispatch__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(13,148,136,0.14), 0 4px 8px rgba(0,0,0,0.06);
}

/* Flip class unused in masonry — no-op */
.dispatch__card--flip { border-top-color: var(--korkoo-accent, #f59e0b); }

/* ── Featured travel photo — fills card top ── */
.dispatch__img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 160px;
  flex-shrink: 0;
}

/* No-image cards: hide the img slot entirely */
.dispatch__card--no-img .dispatch__img { display: none; }

.dispatch__img-bg {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.55s ease;
}
.dispatch__card:hover .dispatch__img-bg { transform: scale(1.06); }

.dispatch__img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(6,78,59,0.35));
}
/* Hide flip-overlay (not used in masonry) */
.dispatch__card--flip .dispatch__img-overlay { background: linear-gradient(to bottom, transparent 50%, rgba(6,78,59,0.35)); }

/* Destination pill — bottom-left of image */
.dispatch__dest-badge {
  position: absolute; bottom: 8px; left: 10px;
  background: rgba(6,78,59,0.84);
  color: #d1fae5;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px;
  backdrop-filter: blur(4px);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dispatch__card--flip .dispatch__dest-badge { left: 10px; right: auto; }

/* ── Text body ── */
.dispatch__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 0.9rem;
  flex: 1;
}

/* Stars — amber */
.dispatch__stars {
  font-size: 0.75rem;
  color: var(--korkoo-accent, #f59e0b);
  letter-spacing: 3px;
}

/* Quote — dark text on white card */
.dispatch__quote {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--korkoo-charcoal, #334155);
  font-style: italic;
  margin: 0;
  flex: 1;
  /* No line-clamp — natural height = masonry magic */
}
.dispatch__quote::before { content: '\201C'; color: var(--korkoo-primary,#0d9488); font-size: 1.5em; line-height: 0; vertical-align: -0.3em; margin-right: 2px; }
.dispatch__quote::after  { content: '\201D'; color: var(--korkoo-primary,#0d9488); font-size: 1.5em; line-height: 0; vertical-align: -0.3em; margin-left:  2px; }

/* Read-more pill */
.dispatch__readmore {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--korkoo-primary, #0d9488);
  background: rgba(13,148,136,0.07);
  border: 1.5px solid rgba(13,148,136,0.2);
  border-radius: 99px; padding: 4px 12px;
  cursor: pointer; transition: background 0.2s, gap 0.2s;
  width: fit-content;
}
.dispatch__readmore:hover {
  background: rgba(13,148,136,0.14);
  border-color: rgba(13,148,136,0.45);
  gap: 8px;
}

/* ── Author footer ── */
.dispatch__author {
  display: flex; align-items: center; gap: 12px;
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid rgba(13,148,136,0.1);
  background: rgba(240,253,249,0.6);
}

/* Traveler portrait — clearly separate from the travel photo above */
.dispatch__avatar {
  width: 52px; height: 52px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(13,148,136,0.35);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

/* Initial circle when no portrait */
.dispatch__avatar-initial {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

.dispatch__author-name {
  font-size: 0.875rem; font-weight: 700;
  color: var(--korkoo-charcoal, #334155);
  margin-bottom: 2px;
}
.dispatch__author-from {
  font-size: 0.725rem; color: var(--korkoo-primary, #0d9488); font-weight: 600;
  display: flex; align-items: center; gap: 3px;
}
.dispatch__author-sub {
  font-size: 0.725rem; color: var(--korkoo-grey, #64748b);
  display: flex; align-items: center; gap: 3px;
}

/* No-image fallback */
.dispatch__card--no-img { border-top-width: 4px; }
.dispatch__card--no-img .dispatch__body { padding: 1.1rem 1.25rem 0.9rem; }

/* ── Responsive ── */
@media (max-width: 800px) {
  .dispatch__stack { columns: 2 220px; }
}
@media (max-width: 500px) {
  .dispatch__stack { columns: 1; }
  .dispatch__img   { height: 180px; }
}

/* ── Legacy passthrough ── */
.reviews__author-photo {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; border: 2px solid rgba(245,130,32,0.3);
}
.reviews__author-from {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.75rem; color: var(--korkoo-orange); font-weight: 600; margin-bottom: 2px;
}




/* ══════════════════════════════════════════════════════════
   TOP PICKS — v8 dest-grid layout
══════════════════════════════════════════════════════════ */

.toppicks {
  /* v8 sec-linen */
  background: linear-gradient(135deg, var(--korkoo-bg-soft,#f7f2ec) 0%, #f3ede5 100%);
}

/* ── Header row ── */
.toppicks__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

/* v8 .sh — serif section heading */
.toppicks__title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(2rem, 3.5vw, 2.875rem);
  font-weight: 400;
  color: var(--korkoo-charcoal);
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.toppicks__title em {
  font-style: italic;
  color: var(--korkoo-orange);
  position: relative;
  display: inline-block;
}
.toppicks__title em::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: #dbeafe;
  z-index: -1;
  border-radius: 4px;
}

/* v8 .vlink */
.toppicks__viewall {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--korkoo-blue);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap 0.2s, color 0.2s;
}
.toppicks__viewall:hover {
  gap: 10px;
  color: var(--korkoo-teal, #0090CC);
}

/* ── Main grid — v8 dest-grid ── */
.toppicks__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* ── 4-card second row ── */
.toppicks__row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* ── Photo card base (v8 .dc) ── */
.tppk {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
}

.tppk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}
.tppk--tall img   { height: 460px; }
.tppk:not(.tppk--tall):not(.tppk--sm) img { height: 320px; }
.tppk--sm img     { height: 200px; }

.tppk:hover img { transform: scale(1.06); }

/* ── Gradient overlay (v8 .dc-ov) ── */
.tppk__ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46,58,66,0.88) 0%, transparent 55%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.4s;
}
.tppk:hover .tppk__ov {
  background: linear-gradient(to top, rgba(46,58,66,0.96) 0%, transparent 65%);
}

/* ── Glass badge (v8 .dc-badge) ── */
.tppk__badge {
  align-self: flex-start;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.28);
  transition: background 0.3s;
}
.tppk:hover .tppk__badge {
  background: rgba(0,168,90,0.35);
  border-color: rgba(0,168,90,0.5);
}

/* ── Country label ── */
.tppk__country {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 5px;
}

/* ── City name (v8 .dc-city) — big serif ── */
.tppk__city {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 2rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  margin-bottom: 14px;
}
.tppk__city--sm { font-size: 1.375rem; }

/* ── CTA slide-up (v8 .dc-cta) ── */
.tppk__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--korkoo-orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 99px;
  text-decoration: none;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.32s, transform 0.32s cubic-bezier(.16,1,.3,1), background 0.25s;
}
.tppk:hover .tppk__cta {
  transform: translateY(0);
  opacity: 1;
}
.tppk__cta:hover { background: var(--korkoo-orange-dark, #D97220); }

/* ── Top colour tags (v8 .hp-tag) ── */
.tppk__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
  color: #fff;
  z-index: 2;
}
.tppk__tag--sky    { background: var(--korkoo-blue); }
.tppk__tag--green  { background: var(--korkoo-green); }
.tppk__tag--orange { background: var(--korkoo-orange); }
.tppk__tag--sand   { background: var(--korkoo-taupe); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .toppicks__grid    { grid-template-columns: 1.3fr 1fr; }
  .toppicks__grid .tppk:last-child { grid-column: 1 / -1; }
  .toppicks__grid .tppk:last-child img { height: 200px; }
  .toppicks__row2    { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .toppicks__header  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .toppicks__grid    { grid-template-columns: 1fr; }
  .tppk--tall img    { height: 300px; }
  .tppk:not(.tppk--tall):not(.tppk--sm) img { height: 220px; }
  .tppk__cta         { transform: translateY(0); opacity: 1; }
  .toppicks__row2    { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════
   ALL EXPERIENCES MOSAIC — v8 exp-grid
══════════════════════════════════════════════════════════ */

.experiences {
  background: var(--korkoo-white, #FFFFFF);
  position: relative;
}

/* ── Header row ── */
.experiences__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

/* v8 .sh — serif section heading */
.experiences__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.875rem);
  font-weight: 800;
  color: var(--korkoo-deep);
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.experiences__title em {
  font-style: italic;
  font-weight: 400;
  font-family: 'Cormorant Garamond', serif;
  color: var(--korkoo-green);
}

.experiences__viewall {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--korkoo-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap 0.2s, color 0.2s;
}
.experiences__viewall:hover {
  gap: 10px;
  color: var(--korkoo-orange);
}


/* All Experiences Modern Styles applied via global .card-grid */


/* ══════════════════════════════════════════════════════════
   15. MODAL & FORMS
   ══════════════════════════════════════════════════════════ */
.k-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
}
.k-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(13, 148, 136, 0.4);
  backdrop-filter: blur(10px);
}
.k-modal__content {
  position: relative; width: 100%; max-width: 500px;
  background: var(--korkoo-white); border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.2); padding: 1.75rem;
  border: 4px solid var(--korkoo-white); /* White border for clean separation */
  outline: 1px solid rgba(0,0,0,0.05);
  animation: modalIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-height: calc(100vh - 60px); 
  overflow-y: auto;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}
.k-modal__content::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.k-modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--korkoo-white); border: 1px solid #fee2e2;
  font-size: 1.5rem; color: #ef4444; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); z-index: 10;
  cursor: pointer; transition: all 0.2s;
}
.k-modal__close:hover { background: #fee2e2; transform: scale(1.1); font-weight: 800; }
.k-modal__header { text-align: center; margin-bottom: 0.75rem; }
.k-modal__logo { height: 28px; margin-bottom: 0.5rem; }
.k-modal__header h3 { font-size: 1.25rem; color: var(--korkoo-charcoal); margin-bottom: 0.25rem; }
.k-modal__header p { font-size: 0.85rem; color: var(--korkoo-grey); margin-inline: auto; line-height: 1.4; }

.k-form { display: flex; flex-direction: column; gap: 0.75rem; }
.k-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.k-field { display: flex; flex-direction: column; gap: 0.25rem; }
.k-field label { font-size: 0.7rem; font-weight: 800; color: var(--korkoo-charcoal); text-transform: uppercase; letter-spacing: 0.08em; }
.k-field input, .k-field select, .k-field textarea {
  padding: 0.65rem 0.85rem; border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #ffffff; font-size: 0.9rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03), inset 0 1px 2px rgba(0,0,0,0.02);
}
.k-form { display: flex; flex-direction: column; gap: 0.6rem; }
.k-field input:focus { outline: none; border-color: var(--korkoo-orange); box-shadow: 0 0 0 3px rgba(245,130,32,0.1); }

.k-captcha {
  display: flex; align-items: center; gap: 0.4rem;
  background: #fdfaf5; padding: 0.35rem 0.5rem; border-radius: 8px;
  border: 1px dashed var(--korkoo-accent);
}
.k-captcha span { font-weight: 800; color: var(--korkoo-charcoal); font-size: 0.72rem; }
.k-captcha input { width: 40px; padding: 0.25rem; text-align: center; height: 26px; font-size: 0.8rem; border:1px solid var(--korkoo-orange); border-radius: 4px; }

.k-form__action-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 0.5rem; align-items: center;
  margin-top: 0.5rem;
}
.k-form__action-row .btn { padding: 0.5rem 0.75rem; font-size: 0.85rem; height: 35px; min-width: 0; }

/* ── Community First: Innovative Pop-out Team Section ── */
.k-community { padding: 4rem 0; background: #faf9f6; position: relative; overflow: hidden; }
.k-community__header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 5; }
.k-community__title { font-size: 2.25rem; font-weight: 900; color: var(--korkoo-charcoal); letter-spacing: -0.02em; }
.k-community__title span { color: var(--korkoo-orange); }

.k-community__team {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; padding: 0 1rem;
}

.k-team-card {
  width: 280px; position: relative; padding-top: 60px; /* Space for pop-out */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.k-team-card:hover { transform: scale(1.05); }

.k-team-card__inner {
  background: white; border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.03);
  text-align: center; position: relative; z-index: 1;
}

.k-team-card__splash {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 160px; border-radius: 50%; z-index: 0;
  opacity: 0.15; filter: blur(20px);
}

.k-team-card__portrait-wrap {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 140px; z-index: 2;
}

.k-team-card__portrait {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 30px; border: 4px solid white;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.k-team-card__info { margin-top: 70px; }
.k-team-card__name { font-size: 1.25rem; font-weight: 800; color: var(--korkoo-charcoal); margin-bottom: 0.15rem; }
.k-team-card__role { font-size: 0.75rem; font-weight: 700; color: var(--korkoo-orange); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.k-team-card__loc { font-size: 0.7rem; color: var(--korkoo-grey); font-weight: 600; margin-bottom: 1rem; display: block; }
.k-team-card__promise { 
  font-size: 0.85rem; color: var(--korkoo-charcoal); line-height: 1.5; 
  padding: 0.75rem; background: #f8fafc; border-radius: 12px; font-style: italic;
}

/* Color Themes */
.k--green .k-team-card__splash { background: #10b981; }
.k--green .k-team-card__role { color: #10b981; }
.k--blue .k-team-card__splash { background: #3b82f6; }
.k--blue .k-team-card__role { color: #3b82f6; }
.k--orange .k-team-card__splash { background: var(--korkoo-orange); }

@media (max-width: 640px) {
  .k-team-card { width: 100%; max-width: 320px; }
}

/* ── Korkoo Says: Custom Branded Alerts ────────────── */
.k-alert-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); 
  backdrop-filter: blur(4px); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; opacity: 0; pointer-events: none; transition: all 0.25s ease;
}
.k-alert-overlay--visible { opacity: 1; pointer-events: auto; }

.k-alert-modal {
  background: var(--korkoo-white); border-radius: 16px; padding: 2rem;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-lg);
  transform: scale(0.95); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center; border: 1px solid rgba(245, 130, 32, 0.1);
}
.k-alert-overlay--visible .k-alert-modal { transform: scale(1); }

.k-alert-modal__logo { height: 24px; margin-bottom: 1.25rem; }
.k-alert-modal__title { 
  font-size: 0.75rem; font-weight: 800; color: var(--korkoo-orange); 
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem;
}
.k-alert-modal__msg { 
  font-size: 1rem; color: var(--korkoo-charcoal); line-height: 1.5; 
  font-weight: 500; margin-bottom: 1.5rem;
}
.k-alert-modal__btn {
  width: 100%; background: var(--korkoo-primary); color: white;
  padding: 0.75rem 1.5rem; border-radius: 10px; border: none;
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.k-alert-modal__btn:hover { background: var(--korkoo-orange); transform: translateY(-2px); }

@media (max-width: 600px) {
  .k-form__row { grid-template-columns: 1fr; }
  .k-modal__content { padding: 2rem 1.5rem; }
  .k-alert-modal { padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   16. BEST PICKS — MODERN MASONRY CARD GRID
   ══════════════════════════════════════════════════════════ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  align-items: start;
}

/* Card Component Wrapper */
.card {
  background: var(--korkoo-white);
  border-radius: 28px;
  padding: 1rem;
  box-shadow: 0 4px 25px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Hover State */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
  border-color: rgba(245, 158, 11, 0.2);
}


/* Card Visuals */
.card__img-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.card--tall .card__img-wrap   { aspect-ratio: 4 / 4.2; }
.card--medium .card__img-wrap { aspect-ratio: 16 / 11; }
.card--short .card__img-wrap  { aspect-ratio: 16 / 7; }

.card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

/* Fallback Dull Image Styling */
.card__img-wrap.card__img--dull {
  background-color: var(--korkoo-light, #f4f4f4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__img-wrap.card__img--dull img {
  width: 50%; /* Shrink down the logo */
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.2);
}

.card:hover .card__img-wrap.card__img--dull img {
  transform: scale(1.02); /* Less aggressive scale for the logo */
}

.card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.card__tag--sky    { background: #38bdf8; }
.card__tag--green  { background: #10b981; }
.card__tag--orange { background: #f59e0b; }

/* Card Body */
.card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1rem 1.25rem 1.25rem;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.03);
  flex-grow: 0; /* Let it shrink to content */
}

.card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--korkoo-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--korkoo-deep);
  line-height: 1.2;
  transition: color 0.3s ease;
}
.card:hover .card__title {
  color: var(--korkoo-primary);
}

.card__text {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--korkoo-primary);
  transition: gap 0.2s;
}

.card__cta:hover {
  gap: 10px;
}



/* Entrance Animation: Staggered slide up & fade in */
.reveal-card {
  opacity: 1; /* Force visible by default to ensure they show up */
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.2, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.reveal-card.not-revealed {
    opacity: 0;
    transform: translateY(30px);
}

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

/* Wide Container for Masonry */
.container--wide {
  max-width: 1300px;
}

/* Responsiveness: 1 column on small screens */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .card {
    grid-row-end: auto !important;
  }
  .card__img-wrap {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   17. HERO STITCH (ULTRA MODERN ASYMMETRIC)
   ══════════════════════════════════════════════════════════ */
#main-content {
  background: #f8fafc; /* Very light slate stage */
  min-height: 100vh;
}

.hero-stitch {
  padding: 3rem 0;
  background: transparent;
  overflow: visible;
}

.hero-stitch__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 40px;
  padding: 3rem; /* Reduced from 5rem */
  box-shadow: 0 40px 100px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
}


.hero-stitch__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--korkoo-orange);
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
}

.hero-stitch__title {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--korkoo-charcoal);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hero-stitch__title .text-orange {
    color: var(--korkoo-orange);
}

.hero-stitch__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--korkoo-grey);
  max-width: 540px;
  margin-bottom: 40px;
}

.hero-stitch__ctas {
  display: flex;
  gap: 16px;
}

/* Visual Column */
.hero-stitch__visual {
  position: relative;
}

.hero-stitch__image-card {
  position: relative;
  transform: rotate(2deg);
  box-shadow: 0 40px 100px rgba(0,0,0,0.15);
  border-radius: 40px;
  overflow: visible; /* To allow badge overlap */
}

.hero-stitch__main-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 40px;
}

.hero-stitch__badge {
  position: absolute;
  bottom: -40px;
  left: -40px;
  background: white;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  max-width: 280px;
  transform: rotate(-2deg); /* Counter rotate */
  border-left: 6px solid var(--korkoo-orange);
}

.hero-stitch__badge-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.hero-stitch__badge-map {
  width: 100%;
  height: 100px;
  background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=400&q=80');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  filter: grayscale(100%) opacity(0.3);
  margin-bottom: 12px;
}

.hero-stitch__badge-quote {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--korkoo-grey);
}

/* ══════════════════════════════════════════════════════════
   18. TRUST STRIP (FEATURED EXPERTS)
   ══════════════════════════════════════════════════════════ */
.trust-strip {
  padding: 50px 0;
  background: var(--korkoo-white);
}

.trust-strip__eyebrow {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--korkoo-grey);
  letter-spacing: 0.1em;
  margin-bottom: 48px;
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

.expert-card {
  background: #fdfaf5;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.expert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.expert-card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.expert-card__info h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--korkoo-deep);
  margin-bottom: 2px;
}

.expert-card__info p {
  font-size: 0.8125rem;
  color: var(--korkoo-grey);
  margin-bottom: 4px;
}

.expert-card__rating {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--korkoo-charcoal);
  display: flex;
  align-items: center;
  gap: 4px;
}

.expert-card__rating .star {
  color: var(--korkoo-orange);
}

@media (max-width: 1024px) {
  .hero-stitch__inner { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .hero-stitch__subtitle { margin-inline: auto; }
  .hero-stitch__ctas { justify-content: center; }
  .hero-stitch__main-img { height: 400px; }
  .hero-stitch__badge { left: 50%; transform: translateX(-50%) rotate(0); bottom: -20px; }
  .trust-strip__grid { grid-template-columns: 1fr; }
}

/* Hero Trust Logos */
.hero-stitch__trust-logos {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 24px;
}

.trust-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--korkoo-grey);
  opacity: 0.8;
}

.trust-logo span {
  font-size: 1.25rem;
}

/* ══════════════════════════════════════════════════════════
   19. JOURNEY (HOW IT WORKS)
   ══════════════════════════════════════════════════════════ */
.journey {
  padding: 60px 0;
  background: var(--korkoo-white);
}

.journey__title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 80px;
  color: var(--korkoo-charcoal);
  letter-spacing: -0.01em;
}

.journey__blocks {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.journey__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--korkoo-grey);
  margin-bottom: 40px;
}

.journey__group-title svg {
  color: var(--korkoo-orange);
}

.journey__group--locals {
  padding-top: 80px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.journey__group--locals .journey__group-title svg {
  color: var(--korkoo-blue);
}

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

.journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.journey__step-num {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.1;
  position: absolute;
  top: -20px;
  left: -10px;
  z-index: 0;
}

.journey__step-content {
  position: relative;
  z-index: 1;
}

.journey__step-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--korkoo-charcoal);
  margin-bottom: 12px;
}

.journey__step-content p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--korkoo-grey);
}

@media (max-width: 768px) {
  .journey__grid { grid-template-columns: 1fr; gap: 40px; }
  .journey__title { font-size: 2rem; margin-bottom: 50px; }
  .journey__blocks { gap: 60px; }
}

/* ══════════════════════════════════════════════════════════
   CUSTOM LAYOUTS (MOCKUP INJECTIONS)
══════════════════════════════════════════════════════════ */

/* 1. Travel Themes (Icons) */
.k-themes {
  padding: 6rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.k-themes__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.k-themes__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.k-themes__item:hover { transform: translateY(-5px); }
.k-themes__icon {
  width: 64px; height: 64px;
  color: #a3a3a3; /* Light icon look */
  transition: color 0.3s ease;
}
.k-themes__item:hover .k-themes__icon { color: var(--korkoo-orange); }
.k-themes__count {
  font-size: 0.8rem;
  color: var(--korkoo-grey);
}
.k-themes__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--korkoo-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2. Find Your Local (Masonry + Search) */
.k-find-local {
  background: #fdfaf6;
  padding: 2rem 0; /* Reduced to match global density */
  overflow: hidden;
}
.k-fl__wrapper {
  display: flex;
  align-items: flex-start; /* Top align content */
  gap: 2.5rem;
  padding-top: 2rem;
}
.k-fl__masonry {
  flex: 3; /* More width for the grid */
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columns for smaller photos */
  grid-auto-rows: 10px; /* Shorter rows */
  gap: 10px;
  position: relative;
}
.k-fl__img-box {
  border-radius: 8px; /* Slightly smaller radius */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
  background: #eee;
  border: 2px solid #fff; /* Thinner border */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.k-fl__img-box img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.k-fl__img-box:hover {
  transform: scale(1.03); /* Smaller scale effect */
  border-color: var(--korkoo-orange);
  z-index: 5;
}

.k-fl__img-box:hover img {
  transform: scale(1.08);
}

.k-fl__badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s ease;
}

.k-fl__img-box:hover .k-fl__badge {
  opacity: 1;
  transform: translateY(0);
}

.badge-dest {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 800;
  color: #fbbd30;
}

.badge-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

/* 10 Items in 5 columns - WIDER but SHORTER cards */
.k-fl__img-1 { grid-column: 1; grid-row: 1 / span 8; }
.k-fl__img-2 { grid-column: 2; grid-row: 2 / span 7; }
.k-fl__img-3 { grid-column: 3; grid-row: 1 / span 9; }
.k-fl__img-4 { grid-column: 4; grid-row: 3 / span 7; }
.k-fl__img-5 { grid-column: 5; grid-row: 1 / span 8; }

.k-fl__img-6 { grid-column: 1; grid-row: 9 / span 7; }
.k-fl__img-7 { grid-column: 2; grid-row: 9 / span 9; }
.k-fl__img-8 { grid-column: 3; grid-row: 10 / span 8; }
.k-fl__img-9 { grid-column: 4; grid-row: 10 / span 9; }
.k-fl__img-10 { grid-column: 5; grid-row: 9 / span 7; }

.k-fl__content {
  flex: 1.2;
  text-align: left;
  padding: 0.5rem 0;
}
.k-fl__title {
  font-size: 1.8rem; /* Smaller title */
  color: var(--korkoo-deep);
  margin-bottom: 8px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1.2;
}
.k-fl__title span { color: var(--korkoo-orange); }
.k-fl__desc {
  font-size: 0.95rem; /* Smaller subtitle */
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 500;
}
.k-fl__action {
  margin-top: 10px;
}

/* 3. Newsletter (Poster + Book) */
.k-news {
  background: #f1efe8;
  padding: 3rem 0;
  position: relative;
}
.k-news__wrap {
  display: flex; align-items: center; gap: 3rem;
}
.k-news__visuals {
  flex: 1;
  position: relative;
  height: 400px;
}
.k-news__poster {
  position: absolute;
  width: 250px; height: 350px;
  background: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  top: 10px; left: 0;
  padding: 10px;
  transform: rotate(-3deg);
  z-index: 1;
}
.k-news__poster::before, .k-news__poster::after {
  content: ''; position: absolute;
  top: -15px; width: 2px; height: 30px; background: #ccc;
}
.k-news__poster::before { left: 40px; }
.k-news__poster::after { right: 40px; }

.k-news__book {
  position: absolute;
  width: 280px; height: 280px;
  background: white;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15), inset 0 0 15px rgba(0,0,0,0.05);
  top: 70px; left: 140px;
  transform: rotate(18deg);
  z-index: 2;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.k-news__book-page {
  flex: 1; padding: 15px; font-size: 0.5rem; color: #888;
  border-right: 1px solid #eee; background: #faf9f6;
  background-size: cover; background-position: center;
}
.k-news__book-page:last-child {
  border-left: 1px solid #ddd;
  box-shadow: inset 10px 0 15px -10px rgba(0,0,0,0.08);
}

.k-news__content { flex: 1; }
.k-news__eyebrow {
  display: block; font-style: italic; color: #777; margin-bottom: 8px; font-family: serif;
}
.k-news__title {
  font-size: 2.5rem; line-height: 1.1; font-weight: 900;
  color: var(--korkoo-deep); text-transform: uppercase; margin-bottom: 15px;
}
.k-news__title span {
  background: #507153; /* Text highlight green */
  color: white; padding: 0 10px;
  margin: 2px; display: inline-block;
}
.k-news__desc { color: #666; margin-bottom: 25px; line-height: 1.6; }

.k-news__form { display: flex; gap: 10px; }
.k-news__form input {
  padding: 12px 15px; border: none; font-style: italic; background: white; flex: 1;
}
.k-news__form button {
  background: #507153; color: white; border: none; font-weight: bold;
  padding: 0 20px; cursor: pointer; text-transform: uppercase; transition: 0.2s;
}
.k-news__form button:hover { background: var(--korkoo-deep); }

@media (max-width: 900px) {
  .k-fl__wrapper, .k-news__wrap { flex-direction: column; }
  .k-fl__masonry { width: 100%; margin-bottom: 2rem; }
  .k-news__visuals { width: 100%; margin-bottom: 2rem; height: 350px; }
}


/* 4. Backpack Traveler Collage Scroller */
.k-collage {
  background: #fdfdfd;
  padding: 4rem 0;
  overflow: hidden;
  position: relative;
}
/*.k-collage::before {
  content: 'Discover'; position: absolute; top: 10%; left: -5%;
  font-size: 15vw; font-weight: 900; color: rgba(0,0,0,0.03); z-index: 0;
  font-style: italic;
}*/
.k-collage__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.k-collage__scroller {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  padding: 2rem 5vw;
  display: flex; gap: 40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.k-collage__scroller::-webkit-scrollbar { display: none; }

.k-collage__photo {
  flex: 0 0 280px;
  background: white;
  padding: 12px 12px 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: rotate(var(--rot));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.k-collage__photo:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.05);
  box-shadow: 0 20px 45px rgba(0,0,0,0.12);
  z-index: 10;
}
.k-collage__photo img {
  width: 100%; height: 260px;
  object-fit: cover;
  display: block;
}
.k-collage__photo-label {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1rem; color: #555;
}

.k-collage__content {
  max-width: 700px;
  margin: 3rem auto 0;
}
.k-collage__logo {
  font-size: 4.5rem; font-weight: 900; color: #000;
  font-family: 'Cormorant Garamond', serif;
  line-height: 0.9; margin-bottom: 1rem;
}
.k-collage__subtitle {
  font-size: 1.25rem; color: #777; margin-bottom: 2rem;
}
.k-collage__btn {
  background: black; color: white; border: none;
  padding: 15px 50px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; cursor: pointer; transition: 0.3s;
}
.k-collage__btn:hover { background: var(--korkoo-orange); color: white; }

/* ─── MOBILE OPTIMIZATIONS & RESPONSIVE REFINEMENTS ─────────── */

/* Section Gradients & Global Depth */
.section-gradient-soft { 
  background: linear-gradient(180deg, #fdfcfb 0%, #ffffff 100%); 
}
.section-gradient-blue { 
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%); 
}
.section-gradient-orange { 
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%); 
}

.boxed-wrapper {
  background: white;
  border-radius: 40px;
  padding: 3rem; /* Reduced internal padding */
  box-shadow: 0 10px 40px rgba(13, 148, 136, 0.05), 0 30px 60px rgba(0,0,0,0.03);
  border: 1.5px solid rgba(13, 148, 136, 0.15);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
}

.boxed-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 80px rgba(13, 148, 136, 0.12);
  border-color: var(--korkoo-primary);
}

@media (max-width: 768px) {
  /* Boxed System Refinements */
  .boxed-wrapper {
    margin-bottom: 2rem;
    padding: 2rem 1.25rem;
    border-radius: 24px;
  }

  /* Reset carousel inner padding for mobile */
  .boxed-wrapper--carousel > *:not(.locals__track):not(.k-collage__scroller) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .boxed-wrapper--carousel {
    padding-left: 0;
    padding-right: 0;
  }

  /* Headlines & Text */
  .k-fl__title {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  .k-collage__logo {
    font-size: 2.5rem !important;
  }
  .k-collage__subtitle, .k-fl__desc, .k-news__desc {
    font-size: 1rem;
    line-height: 1.5;
  }


  /* Find Your Local Masonry */
  .k-fl__masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;
    gap: 10px;
  }
  .k-fl__img-1 { grid-column: 1; grid-row: 1 / span 2; }
  .k-fl__img-2 { grid-column: 2; grid-row: 1 / span 1; }
  .k-fl__img-3 { grid-column: 2; grid-row: 2 / span 2; }
  .k-fl__img-4, .k-fl__img-5 { display: none; } /* Simplify for mobile */

  .k-fl__wrapper { padding: 2rem 1.25rem !important; }


  /* Locals Scroller */
  .locals__header {
    padding: 0 1.25rem !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .locals__track {
    padding: 1rem 1.25rem !important;
    gap: 15px;
  }
  .locals__card {
    flex: 0 0 240px !important;
  }

  /* Backpack Traveler Collage */
  .k-collage { padding: 4rem 0; }
  .k-collage__scroller { gap: 20px; }
  .k-collage__photo {
    flex: 0 0 200px;
    padding: 10px 10px 30px;
  }
  .k-collage__photo img { height: 180px; }
  .k-collage__content { padding: 2rem 1.25rem !important; }

  /* Newsletter Box */
  .k-news__wrap { padding: 2rem 1.25rem !important; }
  .k-news__visuals {
    height: 300px;
    display: flex;
    justify-content: center;
  }
  .k-news__poster { width: 180px; height: 260px; }
  .k-news__book { width: 200px; height: 200px; left: 100px; top: 50px; }
  .k-news__form { flex-direction: column; }

  /* Testimonials Dispatch */
  .dispatch__stack {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
  .boxed-wrapper { border-radius: 16px; padding: 1.5rem 1rem; }
  .k-fl__title { font-size: 1.75rem !important; }
  .k-fl__search { flex-direction: column; border-radius: 20px; padding: 10px; }
  .k-fl__search button { width: 100%; justify-content: center; }
}
/* -----------------------------------------------------------
   COMMUNITY CARD STYLE (MATCHING USER REQUEST PHOTO)
   ----------------------------------------------------------- */
.community-card {
  background: #fff;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 280px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.03);
  margin-bottom: 20px;
}

.community-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.06);
}

.community-card__photo-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradients matching the requested photo style */
.community-card__photo-box--blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.community-card__photo-box--green { background: linear-gradient(135deg, #10b981, #3b82f6); }
.community-card__photo-box--orange { background: linear-gradient(135deg, #f97316, #ec4899); }

.community-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  transition: transform 0.6s ease;
}

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

.community-card__decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 130%;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.community-card__decoration::before {
  content: "";
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
 animation: rotateDecoration 15s linear infinite;
}

@keyframes rotateDecoration {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

.community-card__info {
 padding: 0 8px 12px;
}

.community-card__name {
 font-size: 1.4rem;
 font-weight: 800;
 color: #0d2b3e;
 margin-bottom: 6px;
 letter-spacing: -0.02em;
}

.community-card__role {
 font-size: 0.9rem;
 color: #64748b;
 margin: 0;
 font-weight: 500;
}


@media (max-width: 600px) {
  .community-card {
    width: 250px;
    padding: 14px;
  }
  .community-card__name {
    font-size: 1.25rem;
  }
}


/* Badges & Metrics for Community Cards */
.community-card__photo-box {
  position: relative; /* already set but good to ensure */
}

.community-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: white;
  color: #10b981;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 10;
  text-transform: uppercase;
  border: 1px solid rgba(16, 185, 129, 0.1);
}

.community-card__badge svg {
  width: 12px;
  height: 12px;
}

.community-card__metrics {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #64748b;
}

.community-metric__label {
  font-weight: 600;
}

.community-metric__stars {
  display: flex;
  gap: 1px;
  color: #f59e0b;
}

.community-metric__stars svg {
  width: 10px;
  height: 10px;
}


/* Compact Ecosystem / Korkoo Model section */
.ecosystem.section-gradient-soft {
  background: linear-gradient(180deg, #fdfcfb 0%, #ffffff 100%);
  padding: 4rem 0;
}

.ecosystem__boxed {
  background: #fff;
  padding: 3rem !important;
  border-radius: 32px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.ecosystem__layout {
  display: flex !important;
  align-items: center;
  gap: 4rem;
}

.ecosystem__content-col {
  flex: 0.8;
  padding: 0 !important;
}

.ecosystem__trail-wrapper {
  flex: 1.2;
  min-height: 450px !important;
  background: url("../images/site/trail.png") no-repeat center center;
 background-size: contain;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 0.75rem !important;
}

.eco-node {
 width: 240px !important;
 padding: 12px !important;
 background: white;
 border-radius: 16px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.03);
 text-align: center;
}

.eco-node__kicker {
 font-size: 0.7rem;
 font-weight: 800;
 text-transform: uppercase;
 color: var(--korkoo-grey);
 margin-bottom: 4px;
 display: block;
}

.eco-node__title {
 font-size: 1.1rem !important;
 font-weight: 800;
 margin-bottom: 4px !important;
}

.eco-node__sub {
 font-size: 0.8rem !important;
 line-height: 1.3 !important;
 color: #64748b;
}

@media (max-width: 900px) {
 .ecosystem__layout {
 flex-direction: column !important;
 text-align: center;
 }
 .ecosystem__trail-wrapper {
 width: 100%;
 min-height: 400px !important;
 }
}


/* -----------------------------------------------------------
   COMMUNITY FIRST: GLASSMORPHISM BENTO GRID
   ----------------------------------------------------------- */
.glass-community {
  padding: 8rem 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Dark mesh background */
  position: relative;
  overflow: hidden;
}

.glass-community::after {
  content: "";
 position: absolute;
 top: 10%; left: 20%;
 width: 300px; height: 300px;
 background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
 filter: blur(80px);
 z-index: 0;
}

.glass-community::before {
  content: "";
 position: absolute;
 bottom: 10%; right: 20%;
 width: 400px; height: 400px;
 background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
 filter: blur(100px);
 z-index: 0;
}

.bento-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-auto-rows: 180px;
 gap: 20px;
 position: relative;
 z-index: 1;
}

.glass-card {
 background: rgba(255, 255, 255, 0.05);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 24px;
 padding: 24px;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 color: white;
 transition: all 0.3s ease;
 overflow: hidden;
 position: relative;
}

.glass-card:hover {
 background: rgba(255, 255, 255, 0.1);
 border-color: rgba(255, 255, 255, 0.2);
 transform: translateY(-5px);
}

.glass-card__photo {
 position: absolute;
 top: 0; left: 0; width: 100%; height: 100%;
 object-fit: cover;
 opacity: 0.6;
 z-index: -1;
 transition: opacity 0.5s ease, transform 0.5s ease;
}

.glass-card:hover .glass-card__photo {
 opacity: 0.8;
 transform: scale(1.1);
}

.glass-card--wide { grid-column: span 2; }
.glass-card--tall { grid-row: span 2; }

.glass-card__name { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.glass-card__role { font-size: 0.9rem; opacity: 0.8; }

/* -----------------------------------------------------------
 COMMUNITY FIRST: NEUMORPHISM BENTO GRID
 ----------------------------------------------------------- */
.neu-community {
 padding: 8rem 0;
 background: #e0e0e0;
}

.neu-card {
 background: #e0e0e0;
 border-radius: 30px;
 box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
 padding: 30px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 transition: box-shadow 0.3s ease;
}

.neu-card:hover {
 box-shadow: inset 10px 10px 30px #bebebe, inset -10px -10px 30px #ffffff;
}

.neu-card__photo {
 width: 100px; height: 100px;
 border-radius: 50%;
 margin-bottom: 20px;
 box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
 padding: 5px;
 background: #e0e0e0;
}

.neu-card__photo img {
 width: 100%; height: 100%;
 border-radius: 50%;
 object-fit: cover;
}

.neu-card__name {
 font-size: 1.3rem;
 font-weight: 700;
 color: #444;
 margin-bottom: 5px;
}

.neu-card__role {
 font-size: 0.9rem;
 color: #888;
}

@media (max-width: 1024px) {
 .bento-grid { grid-template-columns: repeat(2, 1fr); }
 .glass-card--wide { grid-column: span 1; }
}

@media (max-width: 600px) {
 .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
}







/* -----------------------------------------------------------
   MODERN STORIES CARDS SECTION
   ----------------------------------------------------------- */
.story-cards-section {
  padding: 100px 0;
  background: #fdfdfd;
}

.story-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.story-card-v3 {
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0,0,0,0.03);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.story-card-v3:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}

.story-card-v3__header {
  height: 280px;
  position: relative;
  overflow: hidden;
}

.story-card-v3__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.story-card-v3:hover .story-card-v3__img {
  transform: scale(1.1);
}

.story-card-v3__badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #111;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.story-card-v3__content {
  padding: 30px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.story-card-v3__title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
  margin-bottom: 12px;
}

.story-card-v3__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6b7280;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-card-v3__footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.story-card-v3__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-card-v3__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e5e7eb;
}

.story-card-v3__author-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151;
}

.story-card-v3__rating {
  display: flex;
  color: #f97316;
}
.story-card-v3__rating svg { width: 14px; height: 14px; }

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


/* Swiper Customizations */
.storySwiper {
  padding: 20px 0 60px !important;
}

.swiper-pagination-bullet-active {
  background: var(--korkoo-orange) !important;
}

.story-nav {
  color: #111 !important;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  top: 50%;
  transform: translateY(-50%);
}

.story-nav:after {
  font-size: 18px !important;
  font-weight: 900;
}

@media (max-width: 768px) {
  .story-nav { display: none; }
}


/* Animated Info Box Overlay */
.story-card-v3 {
  position: relative;
}

.story-card-v3__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--korkoo-orange);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 10;
  color: #fff;
  text-align: center;
}

.story-card-v3:hover .story-card-v3__overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.story-card-v3__overlay-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: #fff;
}

.story-card-v3__overlay-link {
  background: #fff;
  color: var(--korkoo-orange);
  padding: 12px 24px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.story-card-v3__overlay-link:hover {
  background: #111;
  color: #fff;
}

/* Ensure original content is still interactable if needed, 
   but usually the overlay takes over on hover */

/* -----------------------------------------------------------
   DESTINATIONS EXPLORER GRID
   ----------------------------------------------------------- */
.dest-explorer {
  background: #fff;
  padding: 2rem 0;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
}

.dest-card {
  display: flex;
  gap: 20px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.dest-card:hover {
  transform: translateX(10px);
}

.dest-card__visual {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 3px solid white;
}

.dest-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dest-card__details {
  flex: 1;
}

.dest-card__name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.dest-card__desc {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



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

@media (max-width: 640px) {
  .dest-explorer { padding: 60px 0; }
  .dest-grid { grid-template-columns: 1fr; gap: 35px; }
  .dest-card:hover { transform: none; }
}