*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Inter', sans-serif;
      background:#f5f1ea;
      color:#111;
      overflow-x:hidden;
      line-height:1.5;
    }

    img{
      width:100%;
      display:block;
    }

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

/* =========================
   NAVBAR
========================== */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 50px;
  color:white;

  transition:
    transform 0.4s ease,
    background 0.4s ease,
    color 0.4s ease,
    padding 0.4s ease;

  background:transparent;
}
/* LOGO */

.logo{
  font-size:20px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-weight:400;
  max-height: 80px;
  width: auto;
}

/* NAV LINKS */
.nav-links{
  display:flex;
  gap:40px;

  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
}

/* SCROLLED STATE */

.navbar.scrolled{
  background:rgba(255,255,255,0.94);
  color:#111;
  backdrop-filter:blur(12px);
  padding:10px 50px;
  box-shadow:0 2px 20px rgba(0,0,0,0.04);
}

/* HIDDEN STATE */

.navbar.hidden{
  transform:translateY(-100%);
}

/* DEFAULT HERO STATE */

.logo img{
  height:80px;
  width:auto;
  display:block;

  filter:invert(1);

  transition:filter 0.4s ease;
}

/* SCROLLED NAVBAR */

.navbar.scrolled .logo img{
  filter:invert(0);
}

/* =========================
   MOBILE MENU
========================== */

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:inherit;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  cursor:pointer;
}

.mobile-menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:#f5f1ea;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:32px;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease;
}

.mobile-menu a{
  font-family:'Cormorant Garamond', serif;
  font-size:42px;
  font-weight:300;
}

.mobile-menu.active{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   MOBILE
========================== */


@media(max-width:900px){

  .navbar{
    padding:10px;
  }

  .navbar.scrolled{
    padding:10px;
  }

  .nav-links{
    display:none;
  }

  .menu-toggle{
    display:block;
    padding: 1em;
  }

}


    /* =========================
       HERO
    ========================== */

    .hero{
      position:relative;
      height:90vh;
      overflow:hidden;
    }

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

.hero img{
  object-position:center center;
}

    .hero-overlay{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.25);
    }

    .hero-content{
      position:absolute;
      bottom:8%;
      left:6%;
      z-index:2;
      color:white;
      max-width:900px;
    }

    .hero-subtitle{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:0.35em;
      margin-bottom:24px;
    }

    .hero-title{
      font-family:'Cormorant Garamond', serif;
      font-size:clamp(3rem, 5vw, 8rem);
      line-height:0.92;
      font-weight:300;
    }

    /* =========================
       HERO MOBILE
    ========================== */

/*→ show more right side*/
@media(max-width:900px){

  .hero img{
    object-position:90% center;
  }

}

/* show more left side
object-position:25% center; */ 

    /* =========================
       INTRO
    ========================== */

    .intro{
      padding:100px 8%;
      max-width:1200px;
    }

    .section-label{
      text-transform:uppercase;
      letter-spacing:0.3em;
      font-size:10px;
      margin-bottom:10px;
      color:#777;
    }

    .intro-text{
      font-family:'Cormorant Garamond', serif;
      font-size:clamp(2.5rem, 5vw, 5rem);
      line-height:1.05;
      font-weight:300;
    }

    /* =========================
       DESTINATIONS
    ========================== */

    .destinations{
      padding:0 6% 140px;
    }

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

    .card{
      cursor:pointer;
    }

    .card-image{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      aspect-ratio:3/4;
    }

    .card-image img{
      height:100%;
      object-fit:cover;
      transition:transform 0.8s ease;
    }

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

    .card-info{
      padding-top:18px;

      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .card-title{
      font-family:'Cormorant Garamond', serif;
      font-size:34px;
      font-weight:300;
    }

    .card-link{
      text-transform:uppercase;
      letter-spacing:0.2em;
      font-size:11px;
    }

    /* =========================
       FULL WIDTH SECTION
    ========================== */

    .feature-section{
      position:relative;
      height:85vh;
      overflow:hidden;
    }

    .feature-section img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .feature-overlay{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.2);
    }

    .feature-content{
      position:absolute;
      inset:0;

      display:flex;
      align-items:center;

      padding:0 8%;
      z-index:2;
    }

    .feature-title{
      color:white;
      font-family:'Cormorant Garamond', serif;
      font-size:clamp(3rem, 6vw, 6rem);
      line-height:1;
      max-width:800px;
      font-weight:300;
    }

    /* =========================
       FOOTER
    ========================== */

    footer{
      background:black;
      color:white;
      padding:100px 8%;
    }

    .footer-grid{
      display:flex;
      justify-content:space-between;
      gap:80px;
      flex-wrap:wrap;
    }

    .footer-title{
      font-family:'Cormorant Garamond', serif;
      font-size:42px;
      margin-bottom:18px;
      font-weight:300;
    }

    .footer-description{
      max-width:400px;
      color:#aaa;
    }

    .footer-columns{
      display:flex;
      gap:80px;
    }

    .footer-heading{
      text-transform:uppercase;
      letter-spacing:0.2em;
      font-size:12px;
      margin-bottom:20px;
    }

    .footer-links{
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:12px;
      color:#ccc;
    }

    /* =========================
       MOBILE
    ========================== */

    @media(max-width:900px){

      .navbar{
        padding:10px;
      }

      .nav-links{
        display:none;
      }

      .hero-content{
        left:24px;
        right:24px;
      }

      .intro{
        padding:40px 24px;
      }

      .destinations{
        padding:0 24px 100px;
      }

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

      .feature-content{
        padding:24px;
      }

      footer{
        padding:80px 24px;
      }

      .footer-columns{
        gap:40px;
      }

    }
 /* =========================
   GUIDES SECTION
========================== */

.guides-section{
  padding:110px 6%;
  background:#f5f1ea;
}

.guides-header{
  margin-bottom:50px;
  max-width:700px;
}

.guides-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.4rem, 4vw, 4.5rem);
  line-height:1;
  font-weight:300;
}

.guides-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}

.guide-card{
  display:flex;
  align-items:center;
  gap:28px;

  background:rgba(255,255,255,0.55);

  padding:22px;
  border-radius:28px;

  transition:all 0.35s ease;

  backdrop-filter:blur(8px);
}

.guide-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.72);
}

.guide-image{
  width:140px;
  height:180px;

  flex-shrink:0;

  overflow:hidden;
  border-radius:22px;
}

.guide-image img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:transform 0.8s ease;
}

.guide-card:hover .guide-image img{
  transform:scale(1.03);
}

.guide-content{
  flex:1;
}

.guide-name{
  font-family:'Cormorant Garamond', serif;
  font-size:36px;
  line-height:1;
  font-weight:300;

  margin-bottom:10px;
}

.guide-role{
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:10px;
  color:#777;

  margin-bottom:18px;
}

.guide-description{
  font-size:14px;
  line-height:1.8;
  color:#555;

  max-width:420px;
}

/* =========================
   GUIDE LIST
========================== */

.guide-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0px;
  margin-top:24px;
  padding:0;
}

.guide-list li{
  position:relative;
  padding-left:15px;
  color:#555;
  line-height:1.7;
  font-size:12px;
}

.guide-list li::before{
  content:"—";
  position:absolute;
  left:0;
  top:0;
  color:#999;
}

/* =========================
   MOBILE
========================== */

@media(max-width:900px){

  .guides-section{
    padding:90px 24px;
  }

  .guides-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .guide-card{
    align-items:flex-start;
    padding:18px;
    gap:10px;
  }

  .guide-image{
    width:90px;
    height:120px;
    border-radius:16px;
  }

  .guide-name{
    font-size:30px;
  }

  .guide-description{
    font-size:13px;
    line-height:1.7;
  }

}

/* MENU OPEN STATE */

.navbar.menu-open{
  color:#111;
}

.navbar.menu-open .logo img{
  filter:invert(0);
}

/* =========================
   CONTACT PAGE
========================== */

.contact-layout{
  display:grid;
  grid-template-columns:0.9fr 1.2fr;
  gap:80px;
  align-items:start;
}

.contact-page-section{
  padding-top:100px;
}
/* =========================
   MOBILE
========================== */

@media(max-width:900px){

  .contact-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

}

/* =========================
   SERVICE HERO
========================== */

.service-hero{
  height:68vh;
  min-height:620px;
}

.service-hero-text{
  max-width:620px;
  margin-top:28px;

  font-size:16px;
  line-height:1.9;

  color:rgba(255,255,255,0.84);
}

/* =========================
   SERVICE META
========================== */

.service-meta{
  padding:60px 6%;
}

.service-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.meta-value{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  font-weight:300;
  line-height:1;
}

/* =========================
   OVERVIEW
========================== */

.service-overview{
  padding:0 6% 140px;
}

.overview-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:0px;
  align-items:start;
}

.overview-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.5rem,4vw,4.5rem);
  line-height:1;
  font-weight:300;

  margin-bottom:28px;
}

.overview-text{
  max-width:700px;
  line-height:1.9;
  color:#555;
}

.highlights-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.highlight-item{
  display:flex;
  align-items:flex-start;
  gap:16px;

  line-height:1.7;
}

.highlight-icon{
  font-size:14px;
  margin-top:3px;
}

/* =========================
   GENERIC SERVICE SECTION
========================== */

.service-section{
  padding:0 6% 140px;
}

.section-heading{
  margin-bottom:50px;
}

.section-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.4rem,2vw,4.5rem);
  line-height:1;
  font-weight:300;
}

/* =========================
   EXPERIENCES
========================== */

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

.two-column-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;    
}

.experience-image{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:7px;
}

.experience-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.experience-content{
  padding-top:20px;
}

.experience-title{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  line-height:1;
  font-weight:300;

  margin-bottom:14px;
}

.experience-description{
  color:#555;
  line-height:1.8;
}

/* =========================
   EXPERIENCE SLIDER
========================== */

.experience-slider{
  position:relative;
  overflow:hidden;
  border-radius:7px;
}

.experience-slides{
  position:relative;
  aspect-ratio:5/4;
}

.experience-slides img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0;
  transition:opacity 0.45s ease;
}

.experience-slides img.active{
  opacity:1;
}

/* ARROWS */

.experience-arrow{
  position:absolute;
  top:50%;

  transform:translateY(-50%);

  width:42px;
  height:42px;

  border:none;
  border-radius:999px;

  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(10px);

  color:#111;

  cursor:pointer;

  opacity:0;
  transition:all 0.25s ease;

  z-index:3;
}

.experience-slider:hover .experience-arrow{
  opacity:1;
}

.experience-arrow:hover{
  background:white;
}

.experience-arrow.prev{
  left:14px;
}

.experience-arrow.next{
  right:14px;
}



/* DOTS */

.experience-dots{
  position:absolute;
  left:50%;
  bottom:18px;

  transform:translateX(-50%);

  display:flex;
  gap:8px;

  z-index:3;
}

.experience-dots button{
  width:8px;
  height:8px;

  border:none;
  border-radius:999px;

  background:rgba(255,255,255,0.45);

  padding:0;

  transition:all 0.25s ease;
}

.experience-dots button.active{
  background:white;
  transform:scale(1.15);
}

/* =========================
   DESTINATION GRID / multi-day
========================== */

.destination-grid{
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

.destination-grid .experience-title{
  font-size:26px;
}

.destination-grid .experience-description{
  font-size:14px;
  line-height:1.7;
}

.multi-day-grid{
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.multi-day-grid .experience-title{
  font-size:26px;
}

.multi-day-grid .experience-description{
  font-size:14px;
  line-height:1.7;
}

/* =========================
   OPTIONALS
========================== */

.optional-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.optional-card{
  padding:20px;
  border-radius:28px;

  background:rgba(255,255,255,0.6);
}

.optional-icon{
  font-size:24px;
  margin-bottom:24px;
  max-width: 2em;
  place-self: anchor-center;

}

.optional-title{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  line-height:1;
  font-weight:300;
  margin-bottom:16px;
}

.optional-description{
  color:#555;
  line-height:1.8;
}
/* =========================
   OFFERING
========================== */

.offer-grid{
  display:grid;
  grid-template-columns:repeat(5,2fr);
  gap:5px;
}

.offer-card{
  padding:10px;
  border-radius:28px;

  background:rgba(255,255,255,0.6);
}

.offer-title{
  font-family:'Cormorant Garamond', serif;
  font-size:15px;
  line-height:1;
  font-weight:300;
  margin-bottom:5px;
}

.offer-description{
  color:#555;
  line-height:1.8;
  font-size: 10px;
}

/* =========================
   FLOATING INQUIRY BUTTON
========================== */

.floating-inquiry{
  position:fixed;
  right:24px;
  bottom:24px;

  z-index:999;

  background:#111;
  color:white;

  padding:18px 28px;

  border-radius:999px;

  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:11px;

  transition:all 0.3s ease;
}

.floating-inquiry:hover{
  transform:translateY(-2px);
}

/* =========================
   MOBILE EXPERIENCES / DESTINATION
========================== */

@media(max-width:900px){

  /* HERO */

  .service-hero{
    height:52vh;
    min-height:460px;
  }

  .hero-content{
    bottom:6%;
  }

  .service-hero-text{
    margin-top:20px;
    font-size:14px;
    line-height:1.7;
    max-width:100%;
  }

  /* LAYOUT */

  .service-meta,
  .service-overview,
  .service-section{
    padding-left:24px;
    padding-right:24px;
  }

  .overview-grid,
  .experience-grid,
  .two-column-grid,
  .optional-grid{
    grid-template-columns:1fr;
  }
  
    .offer-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-grid{
    gap:60px;
  }
  
  /* DESTINATION GRID */

.destination-grid{
  display:flex;
  overflow-x:auto;

  gap:18px;

  padding-bottom:10px;

  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.destination-grid::-webkit-scrollbar{
  display:none;
}

.destination-grid .experience-card {
  flex:0 0 82%;
  scroll-snap-align:start;
}

  /* META */

  .service-meta{
    padding-top:30px;
    padding-bottom:40px;
  }

  .service-meta-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }

  .meta-value{
    font-size:25px;
  }

  /* FLOATING BUTTON */

  .floating-inquiry{
    right:18px;
    bottom:18px;
  }

}

/* =========================
   EXPERIENCES HOME
========================== */

.experiences-home{
  padding:10px 6%;
}

.experiences-header{
  text-align:center;
  margin-bottom:70px;
}

.experiences-main-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(3rem,6vw,5.5rem);
  line-height:1;
  font-weight:300;

  margin-bottom:24px;
}

.experiences-subtitle{
  max-width:800px;
  margin:0;
  color:#666;
  line-height:1.8;
  text-align: left;
}

.experience-tier-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;

  align-items:start;
}

.tier-card{
  background:#f8f4ee;
  border:1px solid rgba(0,0,0,0.06);

  position:relative;
}

.tier-card-featured{
  transform:translateY(-18px);
}

.tier-image{
  aspect-ratio:4/5;
  overflow:hidden;
}

.tier-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tier-content{
  padding:34px;
}

.tier-label{
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:11px;
  margin-bottom:10px;

  color:#777;
}

.tier-title{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  line-height:0.95;
  font-weight:300;

  margin-bottom:34px;
}

.tier-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  margin-bottom:30px;
}

.tier-meta-label{
  display:block;
  font-size:12px;
  margin-bottom:0px;
}

.tier-price{
  font-family:'Cormorant Garamond', serif;
  font-size:52px;
  line-height:1;
}

.tier-duration{
  font-size:14px;
  color:#666;
}

.tier-features{
  list-style:none;

  display:flex;
  flex-direction:column;
  gap:14px;

  margin-bottom:36px;

  color:#555;
}

.tier-features li::before{
  content:"✓";
  margin-right:10px;
}

.tier-button{
  display:flex;
  justify-content:center;
  align-items:center;

  border:1px solid rgba(0,0,0,0.15);

  height:56px;

  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:11px;
}

.tier-badge{
  position:absolute;
  top:20px;
  left:50%;

  transform:translateX(-50%);

  background:#b89b6d;
  color:white;

  padding:10px 22px;

  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:10px;

  z-index:2;
}

/* =========================
   MOBILE
========================== */

@media(max-width:900px){

  .experiences-home{
    padding:50px 24px;
  }

  .experience-tier-grid{
    grid-template-columns:1fr;
  }

  .tier-card-featured{
    order:-1;
    transform:none;
  }

  .tier-title{
    font-size:38px;
  }

  .tier-price{
    font-size:42px;
  }

}


/* =========================
   MAP / INFO PANEL
========================== */

  .map-section{
    padding:20px 10px;
  }

.map-info-panel{
  position:relative;
  min-height:320px;
}

.map-info{
  position:absolute;
  inset:0;

  opacity:0;
  visibility:hidden;

  transform:translateY(12px);

  transition:all 0.35s ease;
}

.map-info.active{
  opacity:1;
  visibility:visible;

  transform:translateY(0);
}

.map-description{
  max-width:520px;

  color:#555;
  line-height:1.9;

  margin-top:24px;
}

.map-layout{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:center;
}

/* =========================
   MOBILE
========================== */

@media(max-width:900px){

  .map-section{
    padding:90px 10px;
  }

  .map-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

  .map-info-panel{
    min-height:auto;
  }

  .map-info{
    position:relative;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }

  .map-info.active{
    display:block;
  }

  .hokkaido-map{
    opacity:1;
  }

}

/* =========================
   MAP WRAPPER
========================== */

.map-wrapper{
  position:relative;
  width:100%;
  max-width:700px;
  margin:0 auto;
}

/* =========================
   HOTSPOTS
========================== */

.map-hotspot{
  position:absolute;

  width:14px;
  height:14px;

  border:none;
  border-radius:999px;

  background:#2b2b2b;

  opacity:0.38;

  transform:translate(-50%,-50%);
  cursor:pointer;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

  z-index:3;
}

/* INNER DOT */

.map-hotspot::before{
  content:"";

  position:absolute;
  inset:3px;

  background:white;
  border-radius:999px;
}

/* SUBTLE OUTER RING */

.map-hotspot::after{
  content:"";

  position:absolute;
  inset:-6px;

  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;

  opacity:0;

  transition:opacity 0.3s ease;
}

/* HOVER */

.map-hotspot:hover{
  opacity:0.75;
  transform:translate(-50%,-50%) scale(1.08);
}

/* ACTIVE */

.map-hotspot.active{
  width:18px;
  height:18px;

  opacity:1;

  background:#5b2c2c;

  transform:translate(-50%,-50%) scale(1.08);

  box-shadow:
    0 0 0 8px rgba(120,40,40,0.10),
    0 0 18px rgba(120,40,40,0.24),
    0 0 34px rgba(120,40,40,0.14);
}

.map-hotspot.active::after{
  inset:-10px;

  opacity:1;

  border:1px solid rgba(120,40,40,0.22);

  animation:pulse 2.8s infinite;
}

/* =========================
   MAP GALLERY
========================== */

.map-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:14px;

  margin:28px 0;
}

.map-gallery img{
  width:100%;

  aspect-ratio:4/3;

  object-fit:cover;

  border-radius:7px;

  display:block;
}

/* =========================
   MAP NAVIGATION
========================== */

.map-navigation{
  display:flex;
  gap:12px;

  margin-top:34px;
}

.map-nav-button{
  height:46px;

  padding:0 22px;

  border:none;
  border-radius:999px;

  background:#f3f0ea;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.16em;

  cursor:pointer;

  transition:all 0.3s ease;
}

.map-nav-button:hover{
  background:#111;
  color:white;
}

/* =========================
   ANIMATION
========================== */

@keyframes pulse{

  0%{
    transform:scale(1);
    opacity:0.7;
  }

  70%{
    transform:scale(1.18);
    opacity:0;
  }

  100%{
    transform:scale(1.18);
    opacity:0;
  }

}

/* =========================
   MOBILE
========================== */

@media(max-width:900px){

  .map-hotspot{
    width:12px;
    height:12px;
  }

  .map-hotspot.active{
    width:16px;
    height:16px;
  }

  .map-gallery{
    gap:10px;
  }

  .map-navigation{
    justify-content:space-between;
  }

  .map-nav-button{
    flex:1;
  }

}

/* =========================
   MAP LAYOUT
========================== */

.map-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.map-left{
  display:flex;
  flex-direction:column;
}

/* MOBILE */

@media(max-width:900px){

  .map-layout{
    grid-template-columns:1fr;
    gap:50px;
  }

}
/* =========================
   ABOUT US
========================== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* =========================
   POLICY CONTENT
========================== */

.policy-content{
  white-space:pre-wrap;
  word-break:break-word;

  font-family:'Inter', sans-serif;
  font-size:15px;
  line-height:1.9;
  color:#555;

  margin:0;

  overflow-x:hidden;
}


/* =========================================
   ITINERARY
========================================= */

.itinerary-section{
  display:flex;
  flex-direction:column;
  gap:140px;
}

/*    HEADER */

.itinerary-header{
  max-width:1600px;
  margin-bottom:40px;
}

.itinerary-title{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.8rem,4vw,4.8rem);
  line-height:0.95;
  font-weight:300;

  margin:18px 0 20px;
}

.itinerary-meta{
  line-height:1.8;
  margin-bottom:14px;
  float: inline-start;
  padding-inline-end: 1em;
}

.itinerary-notes{
  color:#666;
  line-height:1.8;
}

/*  BODY */

.itinerary-body{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:70px;
  align-items:start;
}

/* alternating desktop layout */

.itinerary-item.reverse .itinerary-media{
  order:2;
}

.itinerary-item.reverse .itinerary-content{
  order:1;
}

/*  IMAGE */

.itinerary-media{
  overflow:hidden;
  border-radius:12px;
}

/*   CONTENT */

.itinerary-content{
  display:flex;
  flex-direction:column;
  gap:50px;
}

.itinerary-label{
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:11px;

  margin-bottom:24px;
}

/* SCHEDULE */

.schedule-list{
  list-style:none;

  display:flex;
  flex-direction:column;
  gap:18px;
}

.schedule-list li{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;

  line-height:1.7;
}

.schedule-list span{
  font-weight:600;
  color:#111;
}

/* SUBTITLE */

.itinerary-subtitle{
  font-family:'Cormorant Garamond', serif;
  font-size:34px;
  line-height:1;
  font-weight:300;

  margin-bottom:18px;
}

/* ====   ITINERARY  MOBILE ========= */

@media(max-width:900px){

  .itinerary-section{
    gap:100px;
  }

  .itinerary-header{
    margin-bottom:28px;
  }

  .itinerary-body{
    grid-template-columns:1fr;
    gap:34px;
  }

  /* force consistent mobile order */

  .itinerary-media{
    order:1 !important;
  }

  .itinerary-content{
    order:2 !important;
    gap:40px;
  }

  .itinerary-title{
    font-size:30px;
  }

  .schedule-list li{
    grid-template-columns:72px 1fr;
    gap:14px;

    font-size:14px;
  }

}

/* =========================
   ITINERARY SLIDER FIX
========================== */

/* REMOVE inline aspect-ratio styles from HTML */

.itinerary-media{
  width:100%;
  min-width:0;
}

.experience-slider{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* SLIDES WRAPPER */

.experience-slides{
  position:relative;
  width:100%;

  aspect-ratio:5 / 4;
}

/* SAFARI HEIGHT FIX */

.experience-slides::before{
  content:"";
  display:block;
  padding-top:80%;
}

/* IMAGES */

.experience-slides img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0;

  transition:opacity 0.45s ease;
}

.experience-slides img.active{
  opacity:1;
}

/* MOBILE */

@media(max-width:900px){

  .experience-slider{
    touch-action:pan-y;
  }

.experience-slides{
  position:relative;
  overflow:hidden;
}

  /*.experience-arrow{
    display:none;
  }*/

  .experience-dots{
    bottom:14px;
  }

}

/* =========================
   MOBILE SWIPE FIX
========================== */

.experience-slider{
  position:relative;
  overflow:hidden;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.experience-slides{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
}

.experience-slides img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  touch-action:pan-y;
}

.experience-slider,
.experience-slides{
  touch-action:pan-y;
}

.experience-slides img{
  -webkit-user-drag:none;
  user-select:none;
}

/* =========================================
   ITINERARY LAYOUT FIX
========================================= */

.itinerary-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:start;
}

/* prevent either side from shrinking */

.itinerary-media,
.itinerary-content{
  width:100%;
  min-width:0;
}

/* make image wrappers consistent */

.itinerary-media{
  display:block;
}

.itinerary-media .experience-slider{
  width:100%;
}

/* keep gallery proportions identical */

.itinerary-media .experience-slides{
  position:relative;
  width:100%;
  aspect-ratio:5/4;
  overflow:hidden;
  border-radius:20px;
}

/* reverse layout */

.itinerary-item.reverse .itinerary-media{
  order:2;
}

.itinerary-item.reverse .itinerary-content{
  order:1;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:900px){

  .itinerary-body{
    grid-template-columns:1fr;
    gap:36px;
  }

  .itinerary-item.reverse .itinerary-media,
  .itinerary-item.reverse .itinerary-content{
    order:initial;
  }

}


.layout-hero{
  padding:180px 8% 100px;
  text-align:center;
}

.layout-hero h1{
  font-size:clamp(3rem,7vw,6rem);
  margin:20px 0;
}

/* ========================================
   GENERAL
======================================== */

.test-section{
  max-width:1200px;
  margin:0 auto;
  padding:120px 8%;
}

/* ========================================
   SHOWCASE
======================================== */

.experience-showcase{
  position:relative;
  min-height:420px;
  overflow:hidden;
}

/* ========================================
   SLIDES
======================================== */

.showcase-slide{
  position:absolute;
  inset:0;

  opacity:0;
  visibility:hidden;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

.showcase-slide.active{
  opacity:1;
  visibility:visible;
}

/* ========================================
   BACKGROUND IMAGE
======================================== */

.slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
  transform:scale(1.03);
}

.slide-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.68) 45%,
      rgba(0,0,0,.58) 100%
    );
}

/* ========================================
   CONTENT WRAPPER
======================================== */

.slide-inner{
  position:relative;
  z-index:2;
  min-height:420px;
  display:flex;
  align-items:center;
  padding:50px 8%;
}

/* ========================================
   EDITORIAL HEADING
======================================== */

.slide-heading{
  position:absolute;
  left:80px;
  top:50%;
  transform:translateY(-50%);
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(7rem,17vw,12rem);
  line-height:.82;
  letter-spacing:.08em;
  color:rgba(255,255,255,.04);
  -webkit-text-stroke:
    1px rgba(255,255,255,.15);
  text-shadow:
    0 0 35px rgba(255,255,255,.08);
  pointer-events:none;
  z-index:1;
}

/* ========================================
   FOREGROUND CONTENT
======================================== */

.slide-content{
  position:relative;
  z-index:5;
  max-width:760px;
  margin-left:180px;
  display:flex;
  flex-direction:column;

  gap:34px;
}

.slide-item{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.slide-item img{
  width:24px;
  height:24px;
  object-fit:contain;
  flex-shrink:0;
  filter:
    brightness(0)
    invert(1);
  opacity:.95;
}

.slide-item h3{
  color:#fff;
  font-size:18px;
  font-weight:500;
  margin-bottom:0px;
}

.slide-item p{
  color:rgba(255,255,255,.6);
  font-size:15px;
  line-height:1.8;
  max-width:620px;
}

/* ========================================
   FOOTER
======================================== */

.showcase-footer{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  z-index:10;
  padding:24px 8%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ========================================
   PROGRESS BARS
======================================== */

.showcase-progress{
  display:flex;
  gap:12px;
  width:320px;
}

.progress-line{
  flex:1;
  height:2px;
  background:
    rgba(255,255,255,.18);
  overflow:hidden;
}

.progress-fill{
  width:0%;
  height:100%;
  background:
    rgba(255,255,255,.95);
}

/* ========================================
   NAVIGATION
======================================== */

.showcase-nav{
  display:flex;
  gap:18px;
}

.showcase-nav button{
  border:none;
  background:none;
  color:#fff;
  cursor:pointer;
  font-size:24px;
  opacity:.65;
  transition:.3s ease;
}

.showcase-nav button:hover{
  opacity:1;
  transform:translateX(3px);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width:900px){
  .experience-showcase{
    min-height:620px;
  }

  .slide-inner{
    min-height:620px;
    display:block;
    padding:40px 24px 110px;
  }

  .slide-heading{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    font-size:clamp(4rem,18vw,7rem);
    margin-bottom:30px;
    line-height:.9;
  }

  .slide-content{
    margin-left:0;
    max-width:none;
    gap:28px;
  }

  .slide-item{
    gap:14px;
  }

  .slide-item img{
    width:26px;
    height:26px;
  }

  .slide-item h3{
    font-size:15px;
  }

  .slide-item p{
    font-size:14px;
    line-height:1.7;
  }

  .showcase-footer{
    padding:20px 24px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .showcase-progress{
    width:100%;
  }
}