:root {
  --green:        var(--primary, #186900);
  --green-dark:   var(--primary-dark, #0f4400);
  --green-deep:   var(--primary-dark, #0b3300);
  --green-soft:   #eaf3e6;--green-soft:color-mix(in srgb, var(--primary, #eaf3e6) 19%, #fff);
  --green-tint:   #f3f8f0;--green-tint:color-mix(in srgb, var(--primary, #f3f8f0) 11%, #fff);
  --gold:         var(--button-color, #fbbf24);
  --gold-dark:    var(--button-color-dk, #e0a512);
  --ink:          #14181f;   
  --ink-2:        #1b2029;
  --heading:      #1a2230;
  --body:         #5b6472;
  --muted:        #8a93a2;
  --line:         #e7ebf0;
  --white:        #ffffff;
  --bg:           #ffffff;
  --shadow-sm:    0 6px 18px rgba(20,24,31,.06);
  --shadow-md:    0 18px 40px rgba(20,24,31,.10);
  --shadow-lg:    0 30px 70px rgba(20,24,31,.16);
  --radius:       16px;
  --radius-lg:    26px;
  --container:    1200px;
  --header-h:     78px;
  --font:         'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}*, *::before, *::after { box-sizing: border-box; }* { margin: 0; padding: 0; }html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}img { max-width: 100%; display: block; }a { color: inherit; text-decoration: none; }ul { list-style: none; }button { font-family: inherit; cursor: pointer; border: 0; background: none; }h1, h2, h3, h4, h5 { color: var(--heading); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }section { position: relative; }.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }.section { padding: 96px 0; }.section--tint { /* background: var(--green-tint); */ }.center { text-align: center; }.grid { display: grid; gap: 28px; }.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: var(--gold-dark); text-transform: capitalize; margin-bottom: 12px;
}.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; }.eyebrow.eyebrow--center { justify-content: center; }.section-head { max-width: 620px; margin: 0 auto 54px; }.section-head h2 { font-size: clamp(28px, 4vw, 42px); }.section-head p { margin-top: 14px; color: var(--body); }.section-head--left { margin-left: 0; text-align: left; }.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 40px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap; cursor: pointer;
}.btn--primary { background: var(--green); color: #fff; box-shadow: 0 12px 26px rgba(24,105,0,.28); }.btn--primary:hover { background: var(--green-dark); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(24,105,0,.34); }.btn--gold { background: var(--gold); color: var(--green-deep); box-shadow: 0 12px 26px rgba(251,191,36,.35); }.btn--gold:hover { background: var(--gold-dark); transform: translateY(-3px); }.btn--ghost { background: #fff; color: var(--heading); box-shadow: var(--shadow-sm); }.btn--ghost:hover { color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow-md); }.btn--outline { border: 2px solid rgba(255,255,255,.6); color: #fff; }.btn--outline:hover { background: #fff; color: var(--green); }.btn--sm { padding: 11px 22px; font-size: 14px; }.topbar {
  background: var(--ink);
  color: #cfd6df;
  font-size: 13.5px;
}.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 16px; }.topbar__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }.topbar__left a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }.topbar__left a:hover { color: var(--gold); }.topbar__left svg { color: var(--gold); }.topbar__right { display: flex; align-items: center; gap: 18px; }.topbar__socials { display: flex; align-items: center; gap: 14px; }.topbar__socials a { color: #cfd6df; transition: color .2s, transform .2s; }.topbar__socials a:hover { color: var(--gold); transform: translateY(-2px); }.topbar__lang { display: inline-flex; align-items: center; gap: 6px; color: #cfd6df; }.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  /* box-shadow: 0 1px 0 var(--line); */
  transition: box-shadow .3s;
}.site-header.is-stuck { box-shadow: var(--shadow-sm); }.nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 20px; }.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 24px; color: var(--heading); letter-spacing: -.02em; }.brand__mark {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--green), var(--gold));
}.brand__mark svg { width: 22px; height: 22px; }.nav__menu { display: flex; align-items: center; gap: 6px; }.nav__menu a {
  font-weight: 500; font-size: 15px; color: var(--heading);
  padding: 10px 14px; border-radius: 10px; position: relative; transition: color .2s;
}.nav__menu a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--green); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: var(--green); }.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { transform: scaleX(1); }.nav__actions { display: flex; align-items: center; gap: 12px; }.nav__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--green); background: var(--green-soft); transition: background .2s, color .2s, transform .2s;
}.nav__icon:hover { background: var(--green); color: #fff; transform: translateY(-2px); }.nav__toggle { display: none; width: 46px; height: 46px; border-radius: 12px; background: var(--green-soft); color: var(--green); }.nav__toggle svg { width: 24px; height: 24px; }.hero { padding: 60px 0 130px; background: linear-gradient(180deg, #fff 0%, var(--green-tint) 100%); overflow: hidden; }.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }.hero__eyebrow { color: var(--gold-dark); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin-bottom: 14px; display: inline-block; }.hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.06; color: var(--heading); }.hero h1 span { color: var(--green); position: relative; }.hero__lead { margin: 22px 0 30px; max-width: 500px; font-size: 17px; }.hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }.hero__stats { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }.hero__stat b { display: block; font-size: 30px; color: var(--heading); font-weight: 800; }.hero__stat span { font-size: 14px; color: var(--muted); }.hero__media { position: relative; }.hero__img-main {
  border-radius: 46% 46% 46% 46% / 52% 52% 48% 48%;
  aspect-ratio: 4/4.4; object-fit: cover; width: 100%;
  box-shadow: var(--shadow-lg);
}.hero__img-badge {
  position: absolute; right: -6px; bottom: 34px; width: 168px; height: 168px;
  border-radius: 50%; object-fit: cover; border: 8px solid #fff; box-shadow: var(--shadow-md);
}.hero__ring {
  position: absolute; left: -26px; top: 30px; width: 130px; height: 130px;
  border: 2px dashed var(--gold); border-radius: 50%; opacity: .8; z-index: -1;
}.hero__dots {
  position: absolute; right: 30px; top: -10px; width: 90px; height: 60px;
  background-image: radial-gradient(var(--gold) 2px, transparent 2px);
  background-size: 16px 16px; opacity: .6; z-index: -1;
}.hero__plane { position: absolute; left: 40%; top: -6px; color: var(--green); opacity: .5; }.searchbar {
  margin-top: -70px; position: relative; z-index: 20;
}.searchbar__panel {
  border-radius: 20px;
}.tips { padding: 96px 0; }.tips__cards { display: grid; gap: 30px; margin-top: 10px; }.tipcard {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}.tipcard:nth-child(2) { grid-template-columns: 1fr 1fr; direction: rtl; }.tipcard:nth-child(2) .tipcard__body { direction: ltr; }.tipcard__media { position: relative; height: 100%; min-height: 260px; }.tipcard__media img { width: 100%; height: 100%; object-fit: cover; }.tipcard__tag {
  position: absolute; top: 16px; left: 16px; background: var(--gold); color: var(--green-deep);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 30px;
}.tipcard__body { padding: 34px 38px; direction: ltr; }.tipcard__date { color: var(--green); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; }.tipcard__body h3 { font-size: 23px; margin-bottom: 12px; }.tipcard__body p { margin-bottom: 22px; }.pkg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.pkgcard {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}.pkgcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }.pkgcard__media { position: relative; aspect-ratio: 16/11; overflow: hidden; }.pkgcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }.pkgcard:hover .pkgcard__media img { transform: scale(1.07); }.pkgcard__price {
  position: absolute; right: 14px; bottom: -14px; background: var(--green); color: #fff;
  font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 30px; box-shadow: var(--shadow-sm);
}.pkgcard__price s { color: rgba(255,255,255,.6); font-weight: 500; margin-right: 6px; font-size: 13px; }.pkgcard__body { padding: 26px 22px 24px; flex: 1; display: flex; flex-direction: column; }.pkgcard__loc { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }.pkgcard__body h3 { font-size: 19px; margin-bottom: 14px; }.pkgcard__meta { display: flex; gap: 18px; color: var(--body); font-size: 13.5px; margin: auto 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }.pkgcard__meta span { display: inline-flex; align-items: center; gap: 6px; }.pkgcard__meta svg { color: var(--green); }.pkgcard .btn { width: 100%; }.stars { color: var(--gold); display: inline-flex; gap: 2px; }.discover__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }.discover__collage { position: relative; }.discover__collage .c1 { border-radius: 20px; box-shadow: var(--shadow-md); aspect-ratio: 3/4; object-fit: cover; width: 62%; }.discover__collage .c2 {
  position: absolute; right: 0; top: 22%; width: 52%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 20px; border: 8px solid #fff; box-shadow: var(--shadow-lg);
}.discover__play {
  position: absolute; left: 52%; top: 62%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%; background: var(--gold); color: var(--green-deep);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(251,191,36,.5);
  animation: pulse 2.2s infinite;
}@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(251,191,36,.5)} 70%{box-shadow:0 0 0 22px rgba(251,191,36,0)} 100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} }.discover__list { margin: 26px 0 30px; display: grid; gap: 16px; }.discover__list li { display: flex; gap: 14px; align-items: flex-start; }.discover__list .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }.discover__list h4 { font-size: 17px; margin-bottom: 2px; }.discover__list p { font-size: 14px; margin: 0; }.features { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; }.feature {
  background: var(--green); color: #fff; border-radius: var(--radius); padding: 34px 26px;
  transition: transform .25s, background .25s; text-align: left; position: relative; overflow: hidden;
}.feature:hover { transform: translateY(-8px); background: var(--green-dark); }.feature__ic {
  width: 58px; height: 58px; border-radius: 14px; background: rgba(255,255,255,.14); color: var(--gold);
  display: grid; place-items: center; margin-bottom: 20px;
}.feature h3 { color: #fff; font-size: 19px; margin-bottom: 10px; }.feature p { color: rgba(255,255,255,.82); font-size: 14px; margin: 0; }.feature__num { position: absolute; right: 18px; top: 10px; font-size: 54px; font-weight: 800; color: rgba(255,255,255,.08); }.offer {
  background: linear-gradient(120deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: 26px; color: #fff; padding: 60px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px;
}.offer::after {
  content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 2px, transparent 2px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
}.offer__content { position: relative; z-index: 2; max-width: 460px; }.offer h2 { color: #fff; font-size: clamp(28px,3.5vw,38px); margin-bottom: 14px; }.offer p { color: rgba(255,255,255,.85); margin-bottom: 26px; }.offer__visual { position: relative; z-index: 2; text-align: right; }.offer__big { font-size: clamp(90px, 14vw, 170px); font-weight: 800; line-height: 1; color: rgba(255,255,255,.16); position: relative; }.offer__big sup { color: var(--gold); font-size: .4em; }.offer__img { position: absolute; right: 6%; bottom: 8%; width: 220px; }.dest-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.destcard { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/3.5; box-shadow: var(--shadow-sm); }.destcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }.destcard:hover img { transform: scale(1.08); }.destcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,51,0,.82) 100%); }.destcard__cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff; display: flex; align-items: center; justify-content: space-between; }.destcard__cap h3 { color: #fff; font-size: 20px; display: inline-flex; align-items: center; gap: 8px; }.destcard__cap h3 svg { color: var(--gold); }.destcard__cap b { color: var(--gold); font-size: 14px; background: rgba(0,0,0,.3); padding: 6px 12px; border-radius: 20px; }.testi { background: var(--ink); color: #fff; padding: 100px 0; overflow: hidden; }.testi__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }.testi .eyebrow { color: var(--gold); }.testi h2 { color: #fff; font-size: clamp(28px,4vw,42px); }.testi p.lead { color: rgba(255,255,255,.72); margin: 18px 0 28px; }.testi__stage { position: relative; min-height: 380px; display: grid; place-items: center; }.testi__disc {
  width: 300px; height: 300px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  display: grid; place-items: center; text-align: center; padding: 40px; position: relative; box-shadow: 0 20px 60px rgba(24,105,0,.4);
}.testi__quote-ic { color: var(--gold); margin-bottom: 12px; }.testi__item p { color: rgba(255,255,255,.92); font-size: 15.5px; margin-bottom: 18px; }.testi__item b { display: block; color: #fff; font-size: 17px; }.testi__item span { color: var(--gold); font-size: 13px; }.testi__ava {
  position: absolute; width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--ink-2); box-shadow: var(--shadow-md);
}.testi__ava.a1 { top: 4%; left: 8%; }.testi__ava.a2 { top: 2%; right: 12%; width: 54px; height: 54px; }.testi__ava.a3 { bottom: 8%; left: 2%; width: 54px; height: 54px; }.testi__ava.a4 { bottom: 4%; right: 6%; }.testi__dots { display: flex; gap: 10px; margin-top: 30px; }.testi__dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .2s, width .2s; }.testi__dots button.is-active { background: var(--gold); width: 26px; border-radius: 6px; }.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.blogcard { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }.blogcard:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }.blogcard__media { aspect-ratio: 16/10; overflow: hidden; }.blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }.blogcard:hover .blogcard__media img { transform: scale(1.07); }.blogcard__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }.blogcard__body h3 { font-size: 19px; margin-bottom: 12px; }.blogcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }.blogcard__date { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }.blogcard__more { color: var(--green); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }.blogcard__more:hover { gap: 10px; }.cta {
  background: linear-gradient(120deg, var(--gold) 0%, #f6a800 100%);
  border-radius: 26px; padding: 54px 60px; display: grid; grid-template-columns: 1.4fr 1fr;
  align-items: center; gap: 30px; position: relative; overflow: hidden; color: var(--green-deep);
}.cta h2 { color: var(--green-deep); font-size: clamp(26px,3.4vw,38px); margin-bottom: 10px; }.cta p { color: rgba(11,51,0,.78); margin-bottom: 24px; max-width: 460px; }.cta__visual { text-align: right; position: relative; z-index: 2; }.cta__visual img { display: inline-block; width: 260px; margin-left: auto; }.footer { background: var(--ink); color: #aab2bf; padding: 74px 0 0; }.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }.footer .brand { color: #fff; margin-bottom: 18px; }.footer__about p { font-size: 14.5px; margin-bottom: 20px; max-width: 300px; }.footer__socials { display: flex; gap: 12px; }.footer__socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #cfd6df; transition: background .2s, color .2s, transform .2s; }.footer__socials a:hover { background: var(--green); color: #fff; transform: translateY(-3px); }.footer h4 { color: #fff; font-size: 17px; margin-bottom: 22px; }.footer__links a { display: block; padding: 7px 0; font-size: 14.5px; transition: color .2s, padding .2s; }.footer__links a:hover { color: var(--gold); padding-left: 6px; }.footer__insta { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.footer__insta img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; transition: transform .3s, filter .3s; filter: grayscale(.2); }.footer__insta img:hover { transform: scale(1.06); filter: none; }.footer__form { display: flex; background: rgba(255,255,255,.08); border-radius: 40px; padding: 6px; margin-top: 6px; }.footer__form input { flex: 1; background: transparent; border: 0; color: #fff; padding: 10px 16px; font-family: inherit; font-size: 14px; outline: none; }.footer__form input::placeholder { color: #8a93a2; }.footer__form button { background: var(--gold); color: var(--green-deep); border-radius: 40px; padding: 10px 20px; font-weight: 600; font-size: 14px; transition: background .2s; }.footer__form button:hover { background: var(--gold-dark); }.footer__note { font-size: 13px; margin-top: 16px; color: var(--muted); }.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 60px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; flex-wrap: wrap; }.footer__bottom a:hover { color: var(--gold); }.pagehero { background: linear-gradient(120deg, var(--green-deep), var(--green)); color: #fff; padding: 70px 0 90px; text-align: center; position: relative; overflow: hidden; }.pagehero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 2px, transparent 2px); background-size: 26px 26px; opacity: .5; }.pagehero__inner { position: relative; z-index: 2; }.pagehero h1 { color: #fff; font-size: clamp(34px,5vw,52px); }.pagehero .crumbs { margin-top: 14px; color: rgba(255,255,255,.8); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }.pagehero .crumbs a:hover { color: var(--gold); }.pagehero .crumbs .sep { color: var(--gold); }.contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 46px; align-items: start; }.contact__cards { display: grid; gap: 18px; }.contactcard { display: flex; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }.contactcard .ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }.contactcard h4 { font-size: 16px; margin-bottom: 3px; }.contactcard p { font-size: 14.5px; margin: 0; }.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); }.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.field { margin-bottom: 16px; }.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--heading); margin-bottom: 7px; }.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  font-family: inherit; font-size: 15px; color: var(--heading); background: var(--green-tint); transition: border .2s, box-shadow .2s;
}.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(24,105,0,.12); background: #fff; }.field textarea { resize: vertical; min-height: 130px; }.form__note { font-size: 13px; color: var(--muted); margin-top: 10px; }.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }.about__media { position: relative; }.about__media img { border-radius: 22px; box-shadow: var(--shadow-md); }.about__badge { position: absolute; left: -20px; bottom: -20px; background: var(--green); color: #fff; padding: 22px 26px; border-radius: 18px; box-shadow: var(--shadow-lg); text-align: center; }.about__badge b { font-size: 30px; display: block; }.about__badge span { font-size: 13px; color: rgba(255,255,255,.85); }.about__list { margin: 22px 0 28px; display: grid; gap: 12px; }.about__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--body); }.about__list svg { flex: 0 0 auto; color: var(--green); margin-top: 3px; }.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }.stat { text-align: center; padding: 30px 20px; background: var(--green-tint); border-radius: var(--radius); }.stat b { display: block; font-size: 38px; color: var(--green); font-weight: 800; }.stat span { color: var(--body); font-size: 14px; }.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.step { text-align: center; padding: 36px 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .25s; }.step:hover { transform: translateY(-8px); }.step__ic { width: 66px; height: 66px; border-radius: 18px; margin: 0 auto 20px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }.step h3 { font-size: 19px; margin-bottom: 10px; }.step p { font-size: 14.5px; margin: 0; }.mt-sm { margin-top: 40px; }.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal.is-in { opacity: 1; transform: none; }.text-center-more { text-align: center; margin-top: 44px; }


@media (max-width: 1024px) {.section { padding: 76px 0; }.hero__grid { grid-template-columns: 1fr; }.hero__media { max-width: 520px; margin: 0 auto; }.hero { padding-bottom: 110px; }.discover__grid, .about__grid, .contact__grid, .testi__grid, .offer, .cta, .offer__visual { grid-template-columns: 1fr; }.features { grid-template-columns: repeat(2,1fr); }.offer, .cta { text-align: center; }.offer__content, .cta p { margin-inline: auto; }.offer__visual, .cta__visual { display: none; }.stat-row { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 860px) {.nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: #fff;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 90px 22px 30px;
    box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .3s ease; z-index: 70;
  }.nav__menu.is-open { transform: none; }.nav__menu a { padding: 14px 12px; border-radius: 12px; font-size: 16px; }.nav__menu a::after { display: none; }.nav__menu a:hover { background: var(--green-soft); }.nav__toggle { display: grid; place-items: center; }.nav__actions .btn { display: none; }.pkg-grid, .blog-grid, .dest-grid, .steps { grid-template-columns: repeat(2,1fr); }.tipcard, .tipcard:nth-child(2) { grid-template-columns: 1fr; direction: ltr; }.tipcard__media { min-height: 220px; }.nav-backdrop { position: fixed; inset: 0; background: rgba(10,20,10,.4); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 65; }.nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 620px) {.section { padding: 62px 0; }.container { padding-inline: 18px; }.features, .pkg-grid, .blog-grid, .dest-grid, .steps, .stat-row, .form__row { grid-template-columns: 1fr; }.topbar__left { gap: 14px; font-size: 12.5px; }.topbar__lang, .topbar__phone { display: none; }.hero h1 { font-size: 38px; }.searchbar { margin-top: -40px; }.offer, .cta { padding: 40px 26px; }.hero__img-badge { width: 120px; height: 120px; }.footer__bottom { flex-direction: column; text-align: center; }
}

/* adivaha locale-switch header mount v17 */
header .b2c-locale-switch{flex:0 0 auto;align-self:center;}
header .b2c-loc-btn{color:inherit;min-height:0;}
header .b2c-cur-picker{display:none !important;}
header .b2c-loc-panel a{display:block;min-height:0;justify-content:flex-start;text-align:left;padding:.45rem .7rem;font-size:.82rem;font-weight:600;color:#1f2937;}
.top-bar{padding-left:0 !important;padding-right:0 !important;}
.top-bar-row,.product-bar-row{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;padding-left:20px !important;padding-right:20px !important;box-sizing:border-box;}
.sights-section{padding-left:clamp(1rem,2.5vw,2.5rem) !important;padding-right:clamp(1rem,2.5vw,2.5rem) !important;}
@media (max-width:599px){.top-bar .b2c-contact--email{display:none !important;}}
@media (max-width:520px){header .b2c-locale-switch{gap:.15rem;}header .b2c-loc-btn{padding:.3rem .35rem;font-size:.72rem;}header .b2c-locale-switch .b2c-loc-dd:last-child .b2c-loc-btn > span{display:none;}.b2c-coins-pill{display:none !important;}.product-actions a,.product-actions button{white-space:nowrap !important;}.top-bar{display:flex !important;align-items:center !important;justify-content:space-between !important;flex-wrap:nowrap !important;gap:8px !important;}.top-bar-row{flex:1 1 auto;min-width:0;flex-direction:row !important;align-items:center !important;flex-wrap:nowrap !important;gap:8px !important;margin:0 !important;}.top-bar .b2c-contact-strip{display:flex !important;flex:1 1 auto;min-width:0;flex-wrap:nowrap !important;align-items:center;gap:10px;}.top-bar .b2c-contact{min-width:0;}.top-bar .b2c-contact-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.top-bar .b2c-locale-switch-wrap{flex:0 0 auto;margin-left:auto !important;}}
@media (max-width:900px){header a[class*="btn"],header button[class*="btn"],header [class*="auth-btn"],header [class*="sign"],header [class*="book"],header [class*="cta"],.product-actions a,.product-actions button{white-space:nowrap !important;}}
@media (max-width:420px){header .b2c-locale-switch .b2c-loc-btn > span{display:none !important;}header .b2c-loc-btn{padding:.25rem .2rem !important;}header [class*="brand"] img,header [class*="logo"] img{max-height:var(--brand-logo-h, 26px)!important;width:auto !important;}header [class*="brand"]{font-size:15px !important;gap:6px !important;}header *{min-width:0 !important;}header [class*="actions"]{flex-wrap:wrap !important;gap:6px !important;justify-content:flex-end;}header [class*="header-row"],header [class*="header-inner"],header [class*="header__inner"]{gap:8px !important;}header [class*="header-row"],header [class*="header-inner"],header [class*="header__inner"],header [class*="container"]{flex-wrap:wrap !important;row-gap:6px !important;}header .b2c-mnav{flex-wrap:nowrap !important;width:40px !important;height:40px !important;flex:0 0 auto !important;background:transparent !important;border:0 !important;box-shadow:none !important;color:inherit !important;}header .b2c-mnav span{width:20px !important;height:2px !important;flex:0 0 auto !important;background:currentColor !important;border-radius:2px !important;}header a[class*="btn"],header button[class*="btn"],header [class*="auth-btn"],header [class*="sign"],header [class*="book"],header [class*="cta"]{white-space:nowrap !important;}header .b2c-coins-pill{display:none !important;}.b2c-coins-pill{display:none !important;}.product-actions a,.product-actions button{white-space:nowrap !important;}.product-bar-row{gap:8px !important;}}

/* adivaha ai22 theme tweaks v5 */
.searchbar{margin-top:24px !important;}
@media (max-width:900px){.searchbar{margin-top:18px !important;}}
.abe-search-tabs{justify-content:flex-start !important;margin-left:0 !important;margin-right:auto !important;}
.nav__toggle{display:none !important;}
header .b2c-mnav,.nav .b2c-mnav{width:46px !important;height:46px !important;border-radius:12px !important;background:var(--green-soft) !important;color:var(--green) !important;padding:11px !important;}
@media (max-width:1150px){.nav__menu{display:none !important;}.b2c-mnav{display:flex !important;}.nav.b2c-mnav-open .nav__menu{display:flex !important;}}
@media (max-width:1150px){.nav{position:relative;}.nav.b2c-mnav-open .nav__menu{position:absolute !important;inset:auto !important;top:100% !important;left:0 !important;right:0 !important;width:auto !important;transform:none !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:10px 18px 16px !important;background:#fff !important;box-shadow:var(--shadow-lg) !important;border-radius:0 0 14px 14px;z-index:200;}.nav.b2c-mnav-open .nav__menu a{padding:13px 4px !important;border-bottom:1px solid rgba(15,23,42,.08);}.nav.b2c-mnav-open .nav__menu a:last-child{border-bottom:0;}}
@media (max-width:420px){.nav{flex-wrap:nowrap !important;gap:6px !important;}.brand{font-size:17px !important;gap:6px !important;}.brand__mark{width:30px !important;height:30px !important;}.b2c-mnav,.nav__search{width:38px !important;height:38px !important;padding:9px !important;}}
.pkgcard__media{overflow:visible !important;}
.pkgcard:hover .pkgcard__media img{transform:none !important;}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr !important;gap:30px !important;}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr !important;gap:24px !important;}.footer__about p{max-width:none;}.footer__bottom,.footer__bottom .container{flex-direction:column;align-items:flex-start;gap:8px;text-align:left;}}
.footer__form input{min-width:0 !important;}
.footer__grid,.footer__grid > *{min-width:0;}

/* adivaha phone header fixes v6 */
.b2c-mnav{display:none;flex-direction:column !important;gap:4px !important;width:40px;height:40px;align-items:center;justify-content:center;padding:8px !important;margin-left:auto;background:transparent !important;border:0 !important;box-shadow:none !important;cursor:pointer;color:inherit;}
.b2c-mnav span{display:block !important;width:20px !important;height:2px !important;min-height:0 !important;margin:0 !important;background:currentColor !important;border-radius:2px !important;opacity:1 !important;}
@media (max-width:1024px){.b2c-mnav{display:flex;}.nav{position:relative;}.nav__menu{display:none !important;}.nav.b2c-mnav-open .nav__menu{display:flex !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px;margin:6px 0 0;background:#fff;border-radius:10px;box-shadow:0 16px 34px rgba(15,23,42,.22);z-index:200;}.nav.b2c-mnav-open .nav__menu a{display:flex;align-items:center;padding:12px 10px;color:#111827 !important;opacity:1;white-space:nowrap;}}
@media (max-width:520px){header .btn--sm{display:none !important;}}


/* ai22: strip right carries Need Help + Coins */
/* Filler, four dead links (every href="#"), and a static label that switches
   nothing and would read as a second language control. */
.topbar__phone,.topbar__socials,.topbar__lang{display:none !important;}
.topbar{padding:5px 0;}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:6px 20px;flex-wrap:nowrap;}
.topbar__left,.topbar__right{display:inline-flex;align-items:center;gap:14px;}
/* .brand-side carries inline margins meant for the header row. */
.topbar__right .brand-side{margin-left:0 !important;margin-right:0 !important;}
.topbar a{color:inherit;}
.b2c-contact-strip{gap:0rem 1.25rem;}
@media (max-width:768px){
  .topbar__inner{flex-wrap:wrap;justify-content:center;row-gap:6px;}
  .topbar__left,.topbar__right{justify-content:center;flex-wrap:wrap;}
}
@media (max-width:430px){
  .b2c-contact-strip .b2c-contact-val{display:none;}
  /* Hidden outright at this width by an earlier !important rule, and the strip
     is where it lives now. */
  .topbar .b2c-coins-pill{display:inline-flex !important;}
}
@media (max-width:374px){
  .topbar__inner{gap:6px 10px;}
  .topbar__left,.topbar__right{gap:7px;}
}


/* ai22: menu tidy-up */
/* The 2px active bar belongs to the horizontal ribbon; in a stacked menu it
   reads as a stray line under one item. */
.b2c-mnav-open .nav__menu a::after{display:none !important;content:none !important;}
/* The address and the number, not two bare icons. */
.b2c-contact-strip .b2c-contact-val{display:inline !important;}
@media (max-width:768px){
  /* Hidden outright in .nav__actions at this width; in the menu it has to be
     on, and full width so it reads as the menu's action. */
  .nav__menu .btn--primary{display:inline-flex !important;width:100%;justify-content:center;
    margin-top:10px;border-bottom:0 !important;}
}
@media (max-width:599px){
  .nav__menu .brand-side{display:flex !important;align-items:center;gap:14px;flex-wrap:wrap;
    width:100%;margin:6px 0 0 !important;padding:10px 0 0;border-bottom:0 !important;}
  .nav__menu .link-help{border-bottom:0 !important;padding:0 !important;}
  /* Hidden outright at 520 and 420 by earlier !important rules. */
  .nav__menu .b2c-coins-pill{display:inline-flex !important;}
}
@media (max-width:430px){
  /* Two contacts plus the pickers will not share one line here, so the strip
     wraps rather than dropping the labels. */
  .topbar__inner{flex-wrap:wrap;justify-content:center;row-gap:4px;}
  .b2c-contact-strip{flex-wrap:wrap;justify-content:center;}
}


/* ai22: contact strip gap 0 */
.b2c-contact-strip{gap:0 !important;}

/* ── Header: white row, then a menu band ──────────────────────────────
   Row one carries everything about the company - contact, mark, controls.
   Row two is the menu on a band of its own, so the nav reads as one line
   instead of competing with the logo for the middle of the header. */
.gf-hdr{position:relative;z-index:40;background:#fff;}
.gf-hdr__main{background:#fff;border-bottom:1px solid rgba(15,23,42,.08);}

/* Three columns, not flex with space-between: the brand stays optically
   centred on the page even when one side is far wider than the other,
   which it always is once an address is showing. */
.gf-hdr__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.25rem;padding:.85rem 0;}
.gf-hdr__contact{min-width:0;display:flex;align-items:center;gap:1.1rem;font-size:.86rem;}
.gf-hdr__contact .b2c-contact-strip{flex-wrap:nowrap;}
/* Email and phone only. The address wrapped onto a second line and pushed
   the row taller than the logo beside it; it is still on the contact page
   and in the footer, where somebody looking for it actually goes. */
.gf-hdr__contact .b2c-contact--address{display:none;}
/* The icon in front of each detail, as a disc - the reference's shape, and
   it gives three different-length values a common left edge. */
/* A filled disc with a white glyph, as in the reference - but the fill is the
   TENANT's colour, not the reference's black, so each site that picks this
   theme gets its own. --primary is written per tenant by {{brand_styles}};
   the fallback only shows in a preview with no brand set. */
.gf-hdr__contact .b2c-contact-ico{width:38px;height:38px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--primary,#0f172a);color:#fff;flex:none;}
.gf-hdr__contact .b2c-contact-ico svg{width:17px;height:17px;}
/* The value is what is being read; the disc is only its marker. */
.gf-hdr__contact .b2c-contact-val{font-weight:700;}
.gf-hdr__contact .b2c-contact{gap:.6rem;}
.gf-hdr__brand{justify-self:center;display:inline-flex;align-items:center;}
.gf-hdr__actions{justify-self:end;display:inline-flex;align-items:center;gap:.9rem;flex-wrap:nowrap;}
.gf-hdr__actions .link-help{font-size:.88rem;text-decoration:none;color:inherit;white-space:nowrap;}
.gf-hdr__actions .nav__icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(15,23,42,.14);color:inherit;}

/* The band. Brand colour, and the menu centred in it. */
.gf-hdr__band{background:var(--primary,#0ea5c6);}
.gf-hdr__bandrow{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:52px;}
.gf-hdr__band .nav__menu{display:flex;align-items:center;justify-content:center;gap:1.75rem;flex-wrap:wrap;}
.gf-hdr__band .nav__menu a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.4rem 0;border-bottom:2px solid transparent;white-space:nowrap;}
.gf-hdr__band .nav__menu a:hover,.gf-hdr__band .nav__menu a[aria-current="page"]{border-bottom-color:#fff;}
/* Manage My Booking and the account chip are injected into this nav by the
   platform, so they inherit the band's own colours rather than arriving in
   whatever the page body uses. */
.gf-hdr__band .nav__menu .b2c-acct,.gf-hdr__band .nav__menu .b2c-mb-link{color:#fff;}

/* The burger and the collapsed menu are the theme's own, inside its
   max-width:1150px block - nothing here touches them. The one thing that
   does need saying: below that width the menu becomes a white panel, and
   links coloured for the band would be white on white. */
.nav.b2c-mnav-open .nav__menu a{color:var(--ink,#0f172a);}
.nav.b2c-mnav-open .nav__menu a:hover,
.nav.b2c-mnav-open .nav__menu a[aria-current="page"]{border-bottom-color:rgba(15,23,42,.25);}


/* ── Header, narrow ─────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Contact details are the first thing to go: on a phone the phone number is
     a tap on the call button, not a line of text competing with the logo. */
  .gf-hdr__row{grid-template-columns:auto 1fr;gap:.75rem;padding:.7rem 0;}
  .gf-hdr__contact{display:none;}
  .gf-hdr__brand{justify-self:start;}
  .gf-hdr__actions{justify-self:end;gap:.6rem;}
  .gf-hdr__actions .link-help,.gf-hdr__actions .nav__icon{display:none;}

  .gf-hdr__bandrow{justify-content:flex-start;min-height:46px;}
}

/* No Login chip in the nav. The My Account button in the row above goes to
   /account, which sends a guest to sign in and a customer to their dashboard -
   so one button covers both states and the band stays a menu. Logout lives in
   the account page it opens. */
/* The chip lands beside the coins pill and the locale switcher, which are
   in the TOP row - not in the band's nav, where the first attempt looked
   for it. Both are named so it stays hidden wherever the platform decides
   to put it. */
.gf-hdr__actions .b2c-acct,
.gf-hdr__band .nav__menu .b2c-acct{display:none !important;}

/* ── Header row one: spacing, ink, and the coins chip ─────────────────
   The email and the phone were a single gap apart and read as one run-on
   line; they are two separate facts and now sit apart like it. */
/* The only place this gap is set. It is the space between the email and
   the phone - two separate facts that read as one line when they are close. */
.gf-hdr__contact,
.gf-hdr__contact .b2c-contact-strip{gap:2.75rem !important;}

/* Row one reads in ink. The locale buttons and the coins chip both default
   to a muted grey meant for a busy toolbar, which on a white header beside
   a bold email just looks switched off. */
.gf-hdr__main,
.gf-hdr__contact,
.gf-hdr__contact .b2c-contact-val,
.gf-hdr__actions,
.gf-hdr__actions .b2c-loc-btn,
.gf-hdr__actions .b2c-loc-btn > span{color:#0f172a !important;}

/* The account button: 10px, matching the chip beside it. */
.gf-hdr__actions .btn{border-radius:10px !important;}

/* ── The coins chip ───────────────────────────────────────────────────
   A small card: the coin on the left, the label above the figure on the
   right. The markup is the platform's - <svg>, then the number, then the
   word - and cannot be reordered from here, so a grid places the three
   into that shape without touching them.

   It sits immediately left of the account button. `order` rather than
   moving the token, because the platform decides where the pill goes and
   would put it back beside the switcher. */
.gf-hdr__actions .b2c-coins-pill{order:5;}
.gf-hdr__actions .btn{order:6;}

.gf-hdr__actions .b2c-coins-pill{
  display:grid !important;
  grid-template-columns:auto auto;
  grid-template-areas:"ico label" "ico num";
  align-items:center;
  column-gap:.55rem !important;
  row-gap:0 !important;
  padding:.4rem .8rem !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.14) !important;
  border-radius:10px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06) !important;
  line-height:1.15 !important;
}
/* The coin, big enough to read as one. */
.gf-hdr__actions .b2c-coins-pill > svg{
  grid-area:ico; width:26px !important; height:26px !important;
}
/* First span is the figure, second is the word - the order the platform
   emits them in, which is why they are placed by area and not by flow. */
.gf-hdr__actions .b2c-coins-pill > span:nth-of-type(1){
  grid-area:num; font-size:1.05rem !important; font-weight:800 !important;
  color:#0f172a !important;
}
.gf-hdr__actions .b2c-coins-pill > span:nth-of-type(2){
  grid-area:label; font-size:.74rem !important; font-weight:700 !important;
  opacity:1 !important; color:#0f172a !important; letter-spacing:.01em;
}

/* ── product-nav icons ────────────────────────────────────────────────
   {{product_nav}} emits <svg viewBox="0 0 24 24"> with no width or height.
   An SVG with only a viewBox and no intrinsic size falls back to 300x150,
   which is why the icons arrived the size of the header and sat on top of
   their own labels. The theme's old menu had no icons, so nothing here had
   ever needed to say. */
.gf-hdr__band .nav__menu a{display:inline-flex;align-items:center;gap:.45rem;}
.gf-hdr__band .nav__menu a > svg{width:17px;height:17px;flex:0 0 auto;}
/* Same again inside the collapsed panel, which is a different container. */
.nav.b2c-mnav-open .nav__menu a > svg{width:17px;height:17px;flex:0 0 auto;}

/* ── nav band: square underline, and an icon on every item ─────────────
   The theme gives every nav link border-radius:12px, left over from when the
   active state was a filled pill. The band's underline is a border-bottom,
   and a border follows its own corner radius - so the line under the active
   item curved up at both ends. The radius has nothing left to round here. */
.gf-hdr__band .nav__menu a{border-radius:0;}

/* View Booking is injected by the platform, so it gets its icon from CSS
   rather than from markup we do not own - otherwise it would be the one
   item in the row without one. */
.gf-hdr__band .nav__menu .b2c-mb-link::before{
  content:"";width:17px;height:17px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%209V7a1%201%200%200%201%201-1h16a1%201%200%200%201%201%201v2a2%202%200%200%200%200%204v2a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-2a2%202%200%200%200%200-4z%27/%3E%3Cpath%20d=%27M9%206v12%27/%3E%3C/svg%3E) center/contain no-repeat;mask:url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%209V7a1%201%200%200%201%201-1h16a1%201%200%200%201%201%201v2a2%202%200%200%200%200%204v2a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-2a2%202%200%200%200%200-4z%27/%3E%3Cpath%20d=%27M9%206v12%27/%3E%3C/svg%3E) center/contain no-repeat;}
.gf-hdr__band .nav__menu .b2c-mb-link{display:inline-flex;align-items:center;gap:.45rem;}

/* ── Hero: one photograph, copy centred, search card on the seam ───────
   The banner is the tenant's own picture via {{hero_image}}, set as a custom
   property on the section so the URL lives in the markup and the layout
   lives here. */
.gf-hero{position:relative;isolation:isolate;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(2rem,5vw,3.5rem);
  background:var(--gf-hero-img,none) center/cover no-repeat #0f172a;}
/* A wash rather than a flat tint: the heading needs cover at the top, the
   photograph is worth seeing through the middle. */
.gf-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(15,23,42,.58) 0%,rgba(15,23,42,.22) 48%,rgba(15,23,42,.42) 100%);}
.gf-hero > *{position:relative;z-index:1;}
.gf-hero__copy{max-width:820px;margin:0 auto;text-align:center;color:#fff;padding:0 1rem;}
.gf-hero__copy h1{color:#fff;margin:0 0 1rem;line-height:1.12;font-size:clamp(2.1rem,5.2vw,3.55rem);
  text-shadow:0 2px 18px rgba(15,23,42,.35);}
.gf-hero__copy h1 span{color:#fff;}
.gf-hero__copy .hero__lead{color:rgba(255,255,255,.93);max-width:640px;margin:0 auto;
  font-size:clamp(1rem,1.5vw,1.12rem);text-shadow:0 1px 12px rgba(15,23,42,.35);}

/* The card sits ON the bottom edge of the photograph. A negative bottom
   margin, not a transform: transform leaves the old height behind and the
   next section would slide under the card instead of starting below it. */
.gf-hero .searchbar{position:relative;z-index:2;margin-top:clamp(2.5rem,6vw,4.5rem);
  margin-bottom:calc(-1 * clamp(2.5rem,6vw,4.5rem));}
.gf-hero .searchbar__panel{border-radius:18px;box-shadow:0 26px 60px rgba(15,23,42,.20);}

/* -- lift the search card off the photograph --------------------------
   The white card is .abe-search-bar, and the booking engine sets its
   box-shadow to none for every tenant. Overriding it there would change
   every storefront on the platform, so the shadow is scoped to this
   theme s hero - the one place the card sits on a photograph and needs
   an edge to separate it from one. */
.gf-hero .abe-search-bar{box-shadow:0 26px 60px rgba(15,23,42,.28) !important;border-radius:16px !important;}
/* The card carried the radius and shadow on its own; the wrapper adding a
   second one underneath would read as a double edge. */
.gf-hero .searchbar__panel{box-shadow:none;border-radius:0;}

/* ── Popular places: a mosaic, tall-short-short-tall ───────────────────
   The tiles are placed explicitly rather than left to auto-flow: with three
   columns, auto-flow puts the third tile beside the second instead of under
   it, and the mosaic collapses into an ordinary row. */

.places__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:375px;gap:1.25rem;}
.place{position:relative;display:block;overflow:hidden;border-radius:18px;text-decoration:none;
  box-shadow:0 16px 38px rgba(15,23,42,.13);}
.place:nth-child(1){grid-column:1;grid-row:1/span 2;}
.place:nth-child(2){grid-column:2;grid-row:1;}
.place:nth-child(3){grid-column:2;grid-row:2;}
.place:nth-child(4){grid-column:3;grid-row:1/span 2;}
.place img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.place:hover img{transform:scale(1.06);}
/* The wash only near the foot, so the name has something to sit on without
   dulling the photograph itself. */
.place::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.12) 0%,rgba(15,23,42,.34) 55%,rgba(15,23,42,.42) 100%);}
.place__name{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;padding:0 1rem;
  text-align:center;color:#fff;line-height:1.1;
  font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  font-size:clamp(1.7rem,2.7vw,2.6rem);text-shadow:0 2px 16px rgba(15,23,42,.55);}
/* ── Popular places, narrow ─────────────────────────────────────────── */
@media (max-width:900px){
  /* The explicit placement has to be undone, not just overridden by the new
     column count - a tile still told grid-column:3 would sit outside a
     two-column grid and start an implicit third column. */
  .places__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:300px;}
  .place:nth-child(1),.place:nth-child(4){grid-row:span 2;}
  .place:nth-child(1),.place:nth-child(2),.place:nth-child(3),.place:nth-child(4){grid-column:auto;}
  .place:nth-child(2),.place:nth-child(3){grid-row:auto;}
}
@media (max-width:560px){
  .places__grid{grid-template-columns:1fr;grid-auto-rows:320px;}
  .place:nth-child(1),.place:nth-child(4){grid-row:auto;}
}

/* ── Popular activities: picture, then the two things a visitor decides on
   (what it costs, how to start) on one line at the foot ──────────────── */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.actcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,23,42,.07);
  border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(15,23,42,.07);
  transition:transform .35s ease,box-shadow .35s ease;}
.actcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(15,23,42,.13);}
.actcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.actcard__media img{width:100%;height:100%;object-fit:cover;display:block;}
.actcard__tag{position:absolute;top:.85rem;right:.85rem;padding:.32rem .8rem;border-radius:999px;
  background:var(--primary,#e60023);color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.01em;}
/* The body grows, the foot is pushed down by it - so a two-line title on one
   card does not leave its Book Now button higher than the rest of the row. */
.actcard__body{display:flex;flex-direction:column;flex:1;gap:.7rem;padding:1.15rem 1.25rem 1.35rem;}
.actcard__body h3{margin:0;font-size:1.12rem;line-height:1.3;}
.actcard__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;color:rgba(15,23,42,.6);font-size:.86rem;}
.actcard__meta span{display:inline-flex;align-items:center;gap:.35rem;}
.actcard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(15,23,42,.08);}
.actcard__price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;}
.actcard__price small{color:rgba(15,23,42,.55);font-size:.76rem;}
.actcard__price b{font-size:1rem;}
/* ── Popular activities, narrow ─────────────────────────────────────── */
@media (max-width:980px){ .act-grid{grid-template-columns:repeat(2,1fr);gap:1.35rem;} }
@media (max-width:620px){
  .act-grid{grid-template-columns:1fr;}
  /* Button and price side by side survive down to about 380px; below that the
     price wraps under its own label and reads as a second, different number. */
  .actcard__foot{flex-wrap:wrap;}
}

/* -- Commitment panel ---------------------------------------------- */
.promise{background:var(--tint,#f4f5fb);border-radius:26px;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);}
.promise__title{text-align:center;margin:0 0 clamp(1.75rem,4vw,2.75rem);line-height:1.2;
  font-size:clamp(1.6rem,3.4vw,2.5rem);}
.promise__title em{font-style:italic;font-weight:600;}
.promise__items{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
.promise__item{display:flex;align-items:flex-start;gap:.9rem;}
.promise__item h3{margin:0 0 .35rem;font-size:1.08rem;}
.promise__item p{margin:0;color:rgba(15,23,42,.68);font-size:.92rem;line-height:1.55;}
.promise__ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;color:#0f172a;}
.promise__ico svg{width:22px;height:22px;}
.promise__ico--a{background:#ffd633;}
.promise__ico--b{background:#7cc4f7;}
.promise__ico--c{background:#ffb95e;}
.promise__cta{display:flex;align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap;
  margin:clamp(1.75rem,4vw,2.5rem) auto 0;max-width:780px;background:#fff;border-radius:999px;
  padding:.5rem .6rem .5rem 1.75rem;box-shadow:0 12px 30px rgba(15,23,42,.08);}
.promise__cta span{color:rgba(15,23,42,.72);font-size:.94rem;}

/* -- Offer band: a photograph with a glass card on it ---------------
   The card is translucent, so it carries its own floor of contrast: on a pale
   stretch of photograph the blur alone leaves white text on near-white. */
.offerband{position:relative;min-height:clamp(420px,50vw,540px);display:flex;align-items:center;
  justify-content:center;padding:clamp(2rem,5vw,3.5rem) 1rem;
  background:url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1800&q=80")
    center/cover no-repeat #0f172a;}
.offerband__card{position:relative;max-width:560px;width:100%;text-align:center;color:#fff;
  padding:clamp(1.75rem,4vw,2.75rem);border-radius:22px;border:1px solid rgba(255,255,255,.28);
  background:rgba(15,23,42,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 26px 60px rgba(15,23,42,.28);}
.offerband__kicker{display:inline-block;margin-bottom:.75rem;font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.offerband__card h2{color:#fff;margin:0;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;}
.offerband__script{margin:.35rem 0 0;font-size:clamp(1.2rem,2.4vw,1.7rem);
  font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;color:rgba(255,255,255,.95);}
.offerband__note{margin:1rem auto 1.5rem;max-width:430px;color:rgba(255,255,255,.9);
  font-size:.95rem;line-height:1.6;}

/* -- Questions and answers ------------------------------------------ */
.faq__list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
.faq__item{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);overflow:hidden;}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.35rem;cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;}
/* Both spellings: Safari still ships the -webkit- pseudo-element, and without
   it the browser's default triangle sits next to our own chevron. */
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::marker{content:"";}
.faq__chev{flex:0 0 auto;width:10px;height:10px;border-right:2px solid rgba(15,23,42,.45);
  border-bottom:2px solid rgba(15,23,42,.45);transform:rotate(45deg);transition:transform .25s ease;}
.faq__item[open] .faq__chev{transform:rotate(-135deg);}
.faq__item p{margin:0;padding:0 1.35rem 1.25rem;color:rgba(15,23,42,.7);line-height:1.65;}
/* -- Commitment panel, narrow ---------------------------------------- */
@media (max-width:900px){
  .promise__items{grid-template-columns:1fr;gap:1.35rem;}
  /* A stack, and no longer a pill: two lines of text inside a 999px radius
     collide with their own rounded ends. */
  .promise__cta{flex-direction:column;text-align:center;border-radius:20px;padding:1.25rem;}
}

/* -- Footer contact block ------------------------------------------- */
.fcontact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem;}
.fcontact__row{display:flex;align-items:center;gap:.85rem;}
.fcontact__ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08);}
.fcontact__ico svg{width:20px;height:20px;}
.fcontact__ico--mail{color:#4ade80;}
.fcontact__ico--tel{color:#60a5fa;}
.fcontact__text{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.fcontact__text small{color:rgba(255,255,255,.55);font-size:.82rem;}
.fcontact__text a{color:#fff;font-weight:700;text-decoration:none;word-break:break-word;}
.fcontact__text a:hover{text-decoration:underline;}
/* The WhatsApp row is the platform's own anchor - icon and label already
   inside it - so it is dressed to match rather than rebuilt around. */
.fcontact__row--wa .nd-footer-wa{display:inline-flex;align-items:center;gap:.85rem;
  color:#fff;font-weight:700;text-decoration:none;}
.fcontact__row--wa .nd-footer-wa svg{flex:0 0 auto;width:42px;height:42px;padding:11px;
  border-radius:50%;background:rgba(255,255,255,.08);fill:#25d366;box-sizing:border-box;}
.fcontact__row--wa .nd-footer-wa:hover{text-decoration:underline;}
/* The email and phone link tokens each render with a small icon of their own.
   This block already gives the row a 42px disc, so the token s icon would be
   a second, smaller one sitting inside the label. */
.fcontact__text .b2c-contact-ico{display:none;}
.fcontact__text a{display:inline-flex;align-items:center;}

/* -- footer link hover ---------------------------------------------
   --gold barely separates from the footer's near-black, so the link a
   visitor is pointing at was the one they could not read. */
.footer__links a:hover{color:var(--primary,#e60023);}

/* -- Legal pages ----------------------------------------------------
   A single measured column. Policy text is read to find one clause, not
   front to back, so the headings carry the navigation and the line length
   stays short enough to scan down. */
.legal{max-width:760px;margin:0 auto;}
.legal__lead{font-size:1.08rem;line-height:1.7;color:rgba(15,23,42,.75);
  padding-bottom:1.5rem;margin-bottom:.5rem;border-bottom:1px solid rgba(15,23,42,.1);}
.legal h2{margin:2.25rem 0 .75rem;font-size:1.22rem;line-height:1.3;}
.legal h2:first-of-type{margin-top:1.5rem;}
.legal p{margin:0 0 .9rem;line-height:1.75;color:rgba(15,23,42,.72);}
.legal__contact{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(15,23,42,.1);}
.legal__contact a{color:var(--primary,#e60023);font-weight:600;}

/* -- one vertical rhythm for every section --------------------------- */
.places{padding:96px 0;}
.section--promise{padding:96px 0 0;}
/* Full width, so the panel's own radius would be rounding against the
   window edge - it has nothing left to round. */
.section--promise .promise{border-radius:0;}
@media (max-width:1024px){
  .places{padding:76px 0;}
  .section--promise{padding:76px 0 0;}
}
@media (max-width:620px){
  .places{padding:62px 0;}
  .section--promise{padding:62px 0 0;}
}


/* -- the hero must not clip the autocomplete panel -------------------
   .hero carries overflow:hidden, which was there to contain the ring and
   plane ornaments the old two-column hero drew outside its box. Those are
   gone, and what the rule clips now is the destination suggestions dropping
   out of the search card - the visitor could see the first suggestion and
   nothing below it. */
.gf-hero{overflow:visible;}

/* -- and the panel must paint above what follows it -------------------
   isolation:isolate sealed the hero into its own layer, so the calendar
   escaping the hero still painted underneath the next section - the dates
   were there, with Popular Activity Places written across them. The hero
   needs a real z-index in the page instead: above the sections after it,
   and still well under the sticky header at 60. */
.gf-hero{isolation:auto;z-index:5;}

/* -- Destination tile: the name is the whole label ------------------ */
.place__name{top:50%;bottom:auto;transform:translateY(-50%);padding:0 1rem;}

/* -- no coins chip in this header -----------------------------------
   The coins pill is injected into the header by the platform, not written
   into the theme - taking {{coins}} out of the markup removed one of two,
   and the injected one carried on appearing. Hidden here rather than
   switched off at the source, so no other tenant loses its coins. */
.gf-hdr__actions .b2c-coins-pill,.gf-hdr__band .b2c-coins-pill{display:none !important;}

/* ── Header: side space, and the menu in the header row ───────────────
   Two things were wrong on a phone.

   The row had no side space. `.gf-hdr__row{padding:.85rem 0}` overrides the
   padding-inline every other .container on the page carries, so the wordmark
   sat flush against the left edge and the locale buttons against the right,
   while every section below them started 18px in. padding-block says what
   was meant without taking the sides away.

   And the menu was a row of its own: a full-width dark band holding one pale
   burger tile and nothing else. The button now lives in the header row (see
   partials/header.html) beside the locale switcher and My Account, which is
   where a hand looks for it. The band stays in the markup but collapses to
   nothing until the menu is open, and then it IS the open menu - so the
   header is one row, and the panel drops out of it.

   b2cMnav() toggles b2c-mnav-open on the button's parent, now the header
   row, so the band's menu is revealed with :has() across the two siblings.
   Desktop never sees any of it: .b2c-mnav is display:none above 1150px, and
   above that breakpoint the band renders exactly as it always has. */

.gf-hdr__row{padding-block:.85rem;padding-inline:18px;}

@media (min-width:1201px){
  /* The container is capped at 1200 and centred; past that the page gutter
     does the spacing and the row should sit flush inside it. */
  .gf-hdr__row{padding-inline:0;}
}

@media (max-width:1150px){
  /* The row is a three-column grid built for contact | brand | actions.
     The button is a fourth child, and on a grid it dropped onto a second
     line underneath the wordmark. With the contact strip hidden at this
     width there is nothing left for the grid to align, so the row becomes
     a plain flex line: mark on the left, controls on the right. */
  .gf-hdr__row{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:.5rem;
    padding-block:.7rem;
  }
  .gf-hdr__brand{margin-right:auto;justify-self:auto !important;}
  .gf-hdr__actions{gap:.55rem !important;justify-self:auto !important;}

  /* The button, in the row, drawn in ink on the white row rather than in the
     pale green tile it wore on the dark band. */
  .gf-hdr__row .b2c-mnav{
    display:inline-flex !important;
    position:relative;
    align-items:center;
    width:auto !important;
    height:34px !important;
    padding:0 0 0 26px !important;
    margin-left:.35rem !important;
    background:transparent !important;
    color:var(--heading,#0f172a) !important;
    border-radius:0 !important;
    font-size:.95rem;
    font-weight:600;
    overflow:visible;
  }
  .gf-hdr__row .b2c-mnav span{
    position:absolute;
    left:0;
    width:18px !important;
    height:2px !important;
    background:currentColor !important;
  }
  .gf-hdr__row .b2c-mnav span:nth-child(1){top:11px;}
  .gf-hdr__row .b2c-mnav span:nth-child(2){top:16px;}
  .gf-hdr__row .b2c-mnav span:nth-child(3){top:21px;}
  .gf-hdr__row .b2c-mnav::after{content:"Menu";color:inherit;letter-spacing:.01em;}

  /* Closed: the band takes no room and shows no colour, so the header reads
     as the single white row it now is. */
  .gf-hdr__band{background:transparent;}
  .gf-hdr__bandrow{min-height:0;padding-block:0;}

  /* Open: the band is the panel. In flow, not floating, so it pushes the
     page down instead of covering the first thing under the header. */
  .gf-hdr:has(.gf-hdr__row.b2c-mnav-open) .gf-hdr__band{
    background:#fff;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  .gf-hdr:has(.gf-hdr__row.b2c-mnav-open) .gf-hdr__band .nav__menu{
    display:flex !important;
    /* The theme also ships an off-canvas drawer for this element - fixed,
       full-height, parked at translateX(100%). Putting it back in flow means
       undoing the transform and the insets too, or the panel opens one
       viewport to the right of the screen and only a scrollbar finds it. */
    position:static !important;
    inset:auto !important;
    transform:none !important;
    height:auto !important;
    max-height:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    width:100% !important;
    padding:.35rem 0 .75rem !important;
    background:none !important;
    box-shadow:none !important;
  }
  /* Links only. The platform injects My Account into this menu as a filled
     button, and painting it the ink colour put dark text on a dark fill. */
  .gf-hdr:has(.gf-hdr__row.b2c-mnav-open) .gf-hdr__band .nav__menu a:not([class*="btn"]){
    color:var(--heading,#0f172a) !important;
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.7rem .2rem !important;
    border-bottom:1px solid rgba(15,23,42,.06) !important;
    font-size:.95rem;
  }
  .gf-hdr:has(.gf-hdr__row.b2c-mnav-open) .gf-hdr__band .nav__menu a:last-child{
    border-bottom:0 !important;
  }
  .gf-hdr:has(.gf-hdr__row.b2c-mnav-open) .gf-hdr__band .nav__menu a[class*="btn"]{
    color:#fff !important;
    justify-content:center;
    border-bottom:0 !important;
    margin-top:.5rem;
  }
}

@media (max-width:430px){
  .gf-hdr__row{padding-inline:16px;}
  .gf-hdr__row .b2c-mnav{font-size:.9rem;margin-left:.2rem !important;}
}