:root {
  --green:        var(--primary, #186900);
  --green-dark:   var(--primary-dark, #0f4a00);
  --green-deep:   var(--primary-dark, #0a3300);
  --green-light:  var(--primary-light, #1f8a00);
  --green-tint:   #eef4ea;--green-tint:color-mix(in srgb, var(--primary, #eef4ea) 16%, #fff);
  --green-tint-2: #f5f9f2;--green-tint-2:color-mix(in srgb, var(--primary, #f5f9f2) 9%, #fff);
  --gold:         var(--button-color, #fbbf24);
  --gold-dark:    var(--button-color-dk, #e0a200);
  --gold-soft:    #fef3d3;--gold-soft:color-mix(in srgb, var(--button-color, #fef3d3) 19%, #fff);

  --ink:          #16241a;
  --body:         #4a5a48;
  --muted:        #79867a;
  --white:        #ffffff;
  --bg:           #ffffff;
  --bg-soft:      #f4f7f2;
  --border:       #e4eae0;
  --border-soft:  #eef2ea;

  --shadow-sm:  0 4px 14px rgba(16, 40, 12, 0.06);
  --shadow-md:  0 12px 30px rgba(16, 40, 12, 0.10);
  --shadow-lg:  0 24px 60px rgba(16, 40, 12, 0.16);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --header-h: 84px;
  --maxw: 1200px;

  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}*, *::before, *::after { box-sizing: border-box; }* { margin: 0; padding: 0; }html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  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: none; background: none; }input, select, textarea { font-family: inherit; font-size: 1rem; }h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}.section { padding: 92px 0; }.section--soft { background: var(--bg-soft); }.section--tint { background: var(--green-tint); }.section--dark { background: var(--green-deep); color: #d7e5d2; }.section-head {
  max-width: 660px;
  margin: 0 auto 56px;
  text-align: center;
}.section-head.left { margin-left: 0; text-align: left; }.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 4px;
}.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom: 16px;
}.section-head p { color: var(--muted); font-size: 1.05rem; }.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}.btn--primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(24, 105, 0, 0.28);
}.btn--primary:hover { background: var(--green-dark); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(24, 105, 0, 0.34); }.btn--gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.35);
}.btn--gold:hover { background: var(--gold-dark); transform: translateY(-3px); }.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border);
  padding: 13px 28px;
}.btn--ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-3px); }.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  padding: 13px 28px;
}.btn--outline-light:hover { background: #fff; color: var(--green-dark); transform: translateY(-3px); }.btn--sm { padding: 11px 22px; font-size: 0.78rem; }.link-arrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .25s var(--ease), color .25s var(--ease);
}.link-arrow:hover { gap: 12px; color: var(--green-dark); }.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}.site-header.transparent { background: transparent; }.site-header.solid {
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-sm);
  height: 72px;
}.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: #fff;
  flex-shrink: 0;
}.brand .mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--green);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(24,105,0,.35);
}.brand .mark svg { width: 22px; height: 22px; }.solid .brand { color: var(--ink); }.main-nav ul { display: flex; align-items: center; gap: 34px; }.main-nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.92);
  position: relative;
  padding: 6px 0;
  transition: color .2s var(--ease);
}.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .25s var(--ease);
}.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }.main-nav a.active { color: #fff; }.solid .main-nav a { color: var(--body); }.solid .main-nav a:hover, .solid .main-nav a.active { color: var(--green); }.header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }.header-phone {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  display: flex; align-items: center; gap: 8px;
}.solid .header-phone { color: var(--ink); }.header-phone svg { width: 17px; height: 17px; color: var(--gold); }.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 9px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}.nav-toggle span {
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}.solid .nav-toggle span { background: var(--ink); }.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 60px) 0 90px;
  color: #fff;
  overflow-x: clip;
  overflow-y: visible;
}.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.05);
}.hero::after {
  content: "";
  position: absolute; inset: 0;
 
  z-index: -1;
}.hero__inner { max-width: 720px; }.hero .eyebrow { color: var(--gold); }.hero .eyebrow::before { background: var(--gold); }.hero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 4.7vw, 3.35rem);
  line-height: 1.06;
  margin-bottom: 22px;
}.hero h1 .hl { color: var(--gold); }.hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin-bottom: 20px;
}.hero__stats { display: flex; gap: 38px; margin-top: 34px; flex-wrap: wrap; }.hero__stats .stat strong {
  font-family: var(--font-head);
  font-size: 1.9rem;
  color: #fff;
  display: block;
  line-height: 1;
}.hero__stats .stat span { font-size: 0.85rem; color: rgba(255,255,255,0.8); letter-spacing: .04em; }.hero__search {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  max-width: 960px;
}.search-band {

  margin-top: -46px;
  position: relative;
  z-index: 5;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  
}.search-band .label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 78px) 0 84px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}.page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background:linear-gradient(180deg, rgb(2 47 131), rgb(86 184 32 / 29%));
  z-index: -1;
}.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.3rem); margin-bottom: 14px; }.page-hero p { color: rgba(255,255,255,0.9); max-width: 620px; margin: 0 auto; font-size: 1.08rem; }.breadcrumb {
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,0.85);
}.breadcrumb a:hover { color: var(--gold); }.breadcrumb .sep { margin: 0 10px; color: var(--gold); }.grid { display: grid; gap: 28px; }.grid-3 { grid-template-columns: repeat(3, 1fr); }.grid-4 { grid-template-columns: repeat(4, 1fr); }.grid-2 { grid-template-columns: repeat(2, 1fr); }.pkg-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}.pkg-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }.pkg-card__media { position: relative; aspect-ratio: 3 / 2.15; overflow: hidden; }.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }.pkg-card:hover .pkg-card__media img { transform: scale(1.08); }.pkg-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 40px;}.pkg-card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;}.pkg-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }.pkg-card__loc {
  font-size: 0.82rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}.pkg-card__loc svg { width: 14px; height: 14px; color: var(--green); }.pkg-card__body h3 { font-size: 1.22rem; margin-bottom: 10px; }.pkg-card__body h3 a:hover { color: var(--green); }.pkg-card__desc { font-size: 0.94rem; color: var(--muted); margin-bottom: 16px; flex: 1; }.pkg-card__meta {
  display: flex; gap: 16px; font-size: 0.82rem; color: var(--body);
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}.pkg-card__meta span { display: flex; align-items: center; gap: 6px; }.pkg-card__meta svg { width: 15px; height: 15px; color: var(--green); }.pkg-card__foot { display: flex; align-items: center; justify-content: space-between; }.pkg-card__price { font-size: 0.82rem; color: var(--muted); }.pkg-card__price strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: var(--green); }.pkg-card__rate { display: flex; align-items: center; gap: 5px; font-size: 0.84rem; color: var(--body); font-weight: 600; }.pkg-card__rate svg { width: 15px; height: 15px; color: var(--gold); }.dest-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: block;
  box-shadow: var(--shadow-sm);
}.dest-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }.dest-tile:hover img { transform: scale(1.09); }.dest-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,30,5,0) 32%, rgba(8,26,4,0.85) 100%);
}.dest-tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 22px;
  z-index: 2;
  color: #fff;
}.dest-tile__cap .count {
  font-size: 0.78rem; letter-spacing: .05em; color: var(--gold);
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
}.dest-tile__cap h3 { color: #fff; font-size: 1.3rem; margin-top: 4px; }.dest-tile__cap .go {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: .05em; color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), gap .25s var(--ease);
}.dest-tile:hover .dest-tile__cap .go { opacity: 1; transform: translateY(0); }.dest-tile:hover .dest-tile__cap .go:hover { gap: 12px; }.dest-tile--tall { aspect-ratio: auto; height: 100%; }.feature {
  text-align: center;
  padding: 34px 26px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }.feature__ic {
  width: 66px; height: 66px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--green-tint);
  color: var(--green);
  display: grid; place-items: center;
}.feature__ic svg { width: 30px; height: 30px; }.feature h3 { font-size: 1.18rem; margin-bottom: 10px; }.feature p { font-size: 0.94rem; color: var(--muted); }.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }.split__media { position: relative; }.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }.split__media.stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.split__media.stack img:first-child { grid-row: span 2; height: 100%; }.split__badge {
  position: absolute; bottom: -24px; right: -12px;
  background: var(--green);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 26px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}.split__badge strong { font-family: var(--font-head); font-size: 2rem; display: block; line-height: 1; }.split__badge span { font-size: 0.8rem; opacity: .9; }.split h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 18px; }.split .lead-p { color: var(--body); font-size: 1.05rem; margin-bottom: 22px; }.check-list { display: grid; gap: 14px; margin: 24px 0 30px; }.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; color: var(--body); }.check-list .ic {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
}.check-list .ic svg { width: 13px; height: 13px; }.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }.stat-strip .item strong {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: #fff; display: block; line-height: 1;
}.stat-strip .item strong .plus { color: var(--gold); }.stat-strip .item span { color: rgba(255,255,255,0.8); font-size: 0.92rem; letter-spacing: .03em; }.tst-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
}.tst-card__quote { position: absolute; top: 22px; right: 26px; font-family: var(--font-head); font-size: 4rem; color: var(--green-tint); line-height: 1; }.tst-card__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 16px; }.tst-card__stars svg { width: 17px; height: 17px; }.tst-card p { font-size: 0.98rem; color: var(--body); margin-bottom: 22px; flex: 1; }.tst-card__who { display: flex; align-items: center; gap: 13px; }.tst-card__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }.tst-card__who strong { font-family: var(--font-head); font-size: 0.98rem; color: var(--ink); display: block; }.tst-card__who span { font-size: 0.82rem; color: var(--muted); }.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 72px 56px;
  text-align: center;
  color: #fff;
}.cta-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }.cta-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgb(2 46 130), rgb(92 182 42 / 30%)); z-index:-1; }.cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; }.cta-banner p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 28px; font-size: 1.05rem; }.cta-banner .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }.post-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
}.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; }.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }.post-card:hover .post-card__media img { transform: scale(1.07); }.post-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }.post-card__tag {
  font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 10px;
}.post-card__body h3 { font-size: 1.14rem; margin-bottom: 10px; }.post-card__body h3 a:hover { color: var(--green); }.post-card__excerpt { font-size: 0.92rem; color: var(--muted); margin-bottom: 16px; flex: 1; }.post-card__meta { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--muted); }.post-card__meta span { display: flex; align-items: center; gap: 6px; }.post-card__meta svg { width: 14px; height: 14px; color: var(--green); }.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }.info-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  margin-bottom: 16px;
}.info-card .ic {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px;
  background: var(--green); color: #fff; display: grid; place-items: center;
}.info-card .ic svg { width: 22px; height: 22px; }.info-card h4 { font-family: var(--font-head); font-size: 1.02rem; color: var(--ink); margin-bottom: 3px; }.info-card p, .info-card a { color: var(--muted); font-size: 0.96rem; }.info-card a:hover { color: var(--green); }.form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
}.field { margin-bottom: 18px; }.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 7px; }.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fbfdfa;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(24,105,0,0.12);
  background: #fff;
}.field textarea { resize: vertical; min-height: 130px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.form-note { font-size: 0.84rem; color: var(--muted); margin-top: 6px; }.form-status { margin-top: 14px; font-weight: 600; font-size: 0.92rem; }.form-status.ok { color: var(--green); }.faq { max-width: 780px; margin: 0 auto; }.faq__item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: #fff; }.faq__q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}.faq__q .sign { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; transition: transform .3s var(--ease); font-size: 1.3rem; }.faq__item.open .faq__q .sign { transform: rotate(45deg); }.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }.faq__a p { padding: 0 24px 22px; color: var(--muted); font-size: 0.96rem; }.site-footer { background: var(--green-deep); color: #b9cbb2; padding: 76px 0 0; }.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 54px; border-bottom: 1px solid rgba(255,255,255,0.1); }.footer-brand .brand { color: #fff; margin-bottom: 18px; }.footer-brand p { font-size: 0.95rem; color: #98ac91; margin-bottom: 22px; max-width: 320px; }.footer-social { display: flex; gap: 11px; }.footer-social a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  display: grid; place-items: center; color: #cfe0c8;
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}.footer-social a:hover { background: var(--gold); color: #3a2c00; transform: translateY(-3px); }.footer-social svg { width: 18px; height: 18px; }.footer-col h4 { font-family: var(--font-head); color: #fff; font-size: 1.02rem; margin-bottom: 20px; }.footer-col ul { display: grid; gap: 12px; }.footer-col a { color: #a7bb9f; font-size: 0.95rem; transition: color .2s var(--ease), padding-left .2s var(--ease); }.footer-col a:hover { color: var(--gold); padding-left: 5px; }.footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: #a7bb9f; margin-bottom: 15px; }.footer-contact svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-size: 0.88rem; color: #8ba283; flex-wrap: wrap; }.footer-bar a:hover { color: var(--gold); }.foot-news { display: flex; gap: 10px; margin-top: 6px; }.foot-news input {
  flex: 1; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff;
}.foot-news input::placeholder { color: #8ba283; }.foot-news input:focus { outline: none; border-color: var(--gold); }.foot-news button { padding: 12px 18px; border-radius: var(--radius-sm); background: var(--gold); color: #3a2c00; font-family: var(--font-head); font-weight: 700; }.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }.reveal.in { opacity: 1; transform: none; }.mobile-nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(340px, 86vw);
  background: #fff;
  z-index: 1200;
  padding: 90px 30px 40px;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  box-shadow: -20px 0 60px rgba(0,0,0,0.2);
  overflow-y: auto;
}.mobile-nav.open { transform: translateX(0); }.mobile-nav ul { display: grid; gap: 4px; }.mobile-nav a {
  display: block; padding: 14px 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); border-bottom: 1px solid var(--border-soft);
}.mobile-nav a.active, .mobile-nav a:hover { color: var(--green); }.mobile-nav .btn { width: 100%; justify-content: center; margin-top: 24px; }.mobile-nav__close { position: absolute; top: 24px; right: 24px; width: 42px; height: 42px; border-radius: 10px; background: var(--bg-soft); color: var(--ink); font-size: 1.5rem; display: grid; place-items: center; }.nav-overlay { position: fixed; inset: 0; background: rgba(10,20,5,0.5); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease); }.nav-overlay.open { opacity: 1; visibility: visible; }


@media (max-width: 1024px) {.footer-top { grid-template-columns: 1fr 1fr; gap: 40px 30px; }.grid-4 { grid-template-columns: repeat(2, 1fr); }.split { gap: 40px; }.hero { min-height: 82vh; }
}

@media (max-width: 900px) {.main-nav, .header-phone { display: none; }.nav-toggle { display: flex; }.section { padding: 68px 0; }.grid-3 { grid-template-columns: repeat(2, 1fr); }.split { grid-template-columns: 1fr; }.split__media { order: -1; }.split__badge { right: 12px; }.contact-grid { grid-template-columns: 1fr; gap: 34px; }.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

@media (max-width: 640px) {.container { padding: 0 18px; }.grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }.section { padding: 56px 0; }.section-head { margin-bottom: 40px; }.hero { min-height: auto; padding: calc(var(--header-h) + 40px) 0 60px; }.hero__stats { gap: 26px; }.cta-banner { padding: 48px 24px; }.field-row { grid-template-columns: 1fr; }.footer-top { grid-template-columns: 1fr; gap: 34px; }.footer-bar { flex-direction: column; text-align: center; }.split__media.stack { grid-template-columns: 1fr 1fr; }.cta-banner .btn-row { flex-direction: column; }.cta-banner .btn-row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {.brand { font-size: 1.2rem; }.brand .mark { width: 34px; height: 34px; }.hero h1 { font-size: 1.85rem; }
}

/* 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: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 ai21 theme tweaks v3 */
@media (max-width:1180px){.main-nav,.header-phone{display:none !important;}.nav-toggle{display:flex !important;}}
.mobile-nav a.btn,.mobile-nav a.btn:hover{color:#fff !important;display:flex !important;align-items:center;justify-content:center !important;text-align:center;width:100%;}
@media (max-width:599px){.header-actions .btn{display:none !important;}}

/* adivaha phone header fixes v6 */
@media (max-width:520px){header .btn--sm{display:none !important;}}

/* header locale colour */
.site-header .b2c-loc-btn{color:#fff;}
.site-header .b2c-loc-btn:hover{background:rgba(255,255,255,.18);}
.site-header.solid .b2c-loc-btn{color:var(--body);}
.site-header.solid .b2c-loc-btn:hover{background:rgba(15,23,42,.06);}

/* footer text on brand colour */
.site-footer{color:#fff;}
.footer-brand p{color:rgba(255,255,255,.82);}
.footer-col a{color:rgba(255,255,255,.88);}
.footer-col a:hover{color:#fff;}
.footer-contact li{color:#fff;}
.footer-contact a,.footer-contact .b2c-contact,.footer-contact .b2c-contact-val{color:#fff !important;}
.footer-contact svg{color:#fff;}
.footer-bar{color:rgba(255,255,255,.78);}
.footer-bar a{color:#fff;}
.footer-contact li{align-items:center;}


/* coins pill: right edge, white coin */
.site-header .header-actions{align-items:center;}
.site-header .b2c-coins-pill{order:9 !important;}
.site-header .b2c-locale-switch{order:1;}
.site-header .nav-toggle{order:10;}


.header-actions>span{color:#fff;}
.solid .header-actions>span{color:#777;}

/* ---- product nav (Hotels / Flights / Bus / Excursions) -------------------
   Seven items instead of five, so tighten the desktop nav a little. The
   1180px hand-over to the mobile drawer is unchanged. */
.main-nav ul { gap: 26px; }
.main-nav a { font-size: 0.89rem; white-space: nowrap; }

/* ---- product shortcut tiles (home page) ---- */
.prod-links { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.prod-link {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 12px; border:1px solid rgba(15,23,42,.08); border-radius:14px;
  background:#fff; text-align:center; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.prod-link:hover { transform:translateY(-4px); box-shadow:0 16px 30px -16px rgba(15,23,42,.35); border-color:var(--primary); }
.prod-link svg { width:28px; height:28px; color:var(--primary); }
.prod-link strong { font-family:var(--font-head); font-size:.95rem; font-weight:700; }
.prod-link span { font-size:.8rem; color:var(--muted); line-height:1.35; }
@media (max-width:900px){ .prod-links { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .prod-links { grid-template-columns:repeat(2,1fr); } }

/* ---- home page sections now route into the product pages ---------------- */

/* .feature became an <a>; keep the card's own typography instead of link blue. */
a.feature { display:block; color:inherit; text-decoration:none; }
a.feature h3 { color:var(--ink); }
a.feature .link-arrow { margin-top:14px; }

/* Per-destination product shortcuts inside a package card. */
.pkg-card__links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(15,23,42,.08); }
.pkg-card__links a {
  font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:999px;
  background:rgba(3,47,132,.06); color:var(--primary); text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.pkg-card__links a:hover { background:var(--primary); color:#fff; }

/* Product CTA sitting next to a blog card's tag. */
.post-card__body { position:relative; }
.post-card__cta { float:right; font-size:.78rem; font-weight:600; color:var(--primary); text-decoration:none; }
.post-card__cta:hover { text-decoration:underline; }

/* ---- policy pages (terms, cancellation, privacy) ---- */
.policy-body h2 { font-family:var(--font-head); font-size:1.35rem; margin:36px 0 12px; }
.policy-body p { line-height:1.9; color:var(--muted); margin-bottom:14px; }
.policy-list { margin:0 0 16px; padding-left:4px; }
.policy-list li {
  position:relative; padding-left:24px; margin-bottom:8px;
  line-height:1.8; color:var(--muted);
}
.policy-list li::before {
  content:""; position:absolute; left:6px; top:.75em;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.policy-meta {
  display:inline-block; font-size:.85rem; font-weight:600; color:var(--primary);
  background:rgba(3,47,132,.06); padding:6px 14px; border-radius:999px; margin-bottom:24px;
}
.policy-note {
  margin-top:40px; padding-top:22px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.92rem;
}
.policy-body a[href^="mailto"], .policy-body a[href^="tel"], .policy-body a[href$=".php"] {
  color:var(--primary); text-decoration:underline;
}
.policy-body h3.policy-sub { font-family:var(--font-head); font-size:1.08rem; margin:26px 0 10px; }

/* ================= CLICK TO CALL ==========================================
   Fixed bottom button + the 60-second idle pop-up. Both live in
   partials/call-widget.html. */

.c2c-fab {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 1200;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: var(--button-color, #57b521);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(15,23,42,.45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.c2c-fab:hover { transform: translateY(-3px); background: var(--button-color-dk, #349200); box-shadow: 0 18px 38px -8px rgba(15,23,42,.5); }
.c2c-fab__ico { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.2); flex-shrink:0; }
.c2c-fab__ico svg { width:18px; height:18px; }
.c2c-fab__txt { display:flex; flex-direction:column; line-height:1.15; }
.c2c-fab__txt small { font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; opacity:.85; }
.c2c-fab__txt strong { font-family:var(--font-head); font-size:.98rem; font-weight:800; letter-spacing:-.01em; }

/* Pulse so it reads as "live support", not just another button. */
.c2c-fab__ring {
  position:absolute; left:14px; bottom:12px; width:34px; height:34px;
  border-radius:50%; background:var(--button-color, #57b521);
  animation:c2cPulse 2.4s var(--ease) infinite; pointer-events:none; z-index:-1;
}
@keyframes c2cPulse {
  0%   { transform:scale(1);   opacity:.55; }
  70%  { transform:scale(2.1); opacity:0; }
  100% { transform:scale(2.1); opacity:0; }
}

/* On a phone the label eats the screen, so show the icon only. */
@media (max-width:560px) {
  .c2c-fab { left:16px; bottom:16px; padding:12px; gap:0; }
  .c2c-fab__txt { display:none; }
  .c2c-fab__ring { left:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce) { .c2c-fab__ring { animation:none; } }

/* ---- the idle pop-up ---- */
.c2c-pop { position:fixed; inset:0; z-index:1300; display:none; }
.c2c-pop.is-open { display:block; }
.c2c-pop__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); animation:c2cFade .2s var(--ease); }
.c2c-pop__card {
  position:relative;
  width:min(420px, calc(100vw - 32px));
  margin:0 auto; top:50%; transform:translateY(-50%);
  background:#fff; border-radius:18px; padding:38px 30px 30px;
  text-align:center; box-shadow:0 30px 70px -20px rgba(15,23,42,.55);
  animation:c2cRise .28s var(--ease);
}
@keyframes c2cFade { from { opacity:0; } to { opacity:1; } }
@keyframes c2cRise { from { opacity:0; transform:translateY(calc(-50% + 16px)); } to { opacity:1; transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .c2c-pop__card, .c2c-pop__backdrop { animation:none; } }

.c2c-pop__x {
  position:absolute; top:10px; right:14px;
  font-size:1.7rem; line-height:1; color:var(--muted);
  background:none; border:0; cursor:pointer; padding:4px 8px;
}
.c2c-pop__x:hover { color:var(--ink); }
.c2c-pop__ico {
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto 18px;
  border-radius:50%; background:color-mix(in srgb, var(--button-color, #57b521) 12%, #fff); color:var(--button-color, #57b521);
}
.c2c-pop__ico svg { width:28px; height:28px; }
.c2c-pop__card h3 { font-size:1.25rem; margin-bottom:8px; }
.c2c-pop__card p { color:var(--muted); font-size:.95rem; line-height:1.6; margin-bottom:22px; }
.c2c-pop__cta {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 20px; border-radius:10px;
  background:var(--button-color, #57b521); color:#fff; text-decoration:none;
  font-family:var(--font-head); font-weight:800; font-size:.92rem; letter-spacing:.02em;
  box-shadow:0 10px 24px -8px rgba(87,181,33,.6);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.c2c-pop__cta:hover { background:var(--button-color-dk, #349200); transform:translateY(-2px); }
.c2c-pop__cta svg { width:18px; height:18px; flex-shrink:0; }
.c2c-pop__alt { display:block; margin-top:16px; font-size:.85rem; color:var(--muted); }
.c2c-pop__alt a { color:var(--primary); text-decoration:underline; }

/* ================= HERO: tighter, so the search box sits in view =========
   The hero was 90vh tall, which pushed the booking widget below the fold on
   a laptop. Shorten it and pull the search band further up over the image so
   the tabs are the first thing under the headline. */
.hero { min-height: 68vh; padding: calc(var(--header-h) + 48px) 0 130px; }
@media (min-width:1600px){ .hero { min-height: 60vh; } }
.search-band { margin-top: -104px; }

@media (max-width:1024px){
  .hero { min-height: 58vh; padding: calc(var(--header-h) + 40px) 0 110px; }
  .search-band { margin-top: -86px; }
}
@media (max-width:640px){
  .hero { min-height: auto; padding: calc(var(--header-h) + 32px) 0 78px; }
  .search-band { margin-top: -56px; }
}

/* ---- headline: highlighted + animated ---------------------------------
   The hero sits on a bright sky photo, so the type needs its own contrast
   rather than relying on the image. A soft shadow does the legibility; the
   marker sweep behind ".hl" does the emphasis. */
.hero h1 {
  text-shadow: 0 2px 18px rgba(15,23,42,.35), 0 1px 3px rgba(15,23,42,.25);
  letter-spacing: -0.02em;
}
.hero h1 .hl {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0 .12em;
  z-index: 0;
  white-space: nowrap;
}
/* The marker itself - drawn behind the words, swept in from the left. */
.hero h1 .hl::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: .06em; bottom: .06em;
  z-index: -1;
  border-radius: 6px;
  /* Brand blue, not gold - the marker should read as the site, and blue
     holds white type better than gold does. */
  background: linear-gradient(100deg, var(--primary-light, #3f6bc0) 0%, var(--primary, #032f84) 55%, var(--primary-dark, #000c61) 100%);
  box-shadow: 0 8px 22px -8px rgba(3,47,132,.75);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero__inner.in h1 .hl::before { animation: hlSweep .75s cubic-bezier(.65,0,.35,1) .35s forwards; }

/* A slow shine that crosses the marker every few seconds - enough movement
   to read as "animated" without becoming a distraction while reading. */
.hero h1 .hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: .06em; bottom: .06em;
  z-index: -1;
  border-radius: 6px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 220% 100%;
  background-position: 220% 0;
  opacity: 0;
}
.hero__inner.in h1 .hl::after { animation: hlShine 4.5s var(--ease) 1.3s infinite; }

@keyframes hlSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hlShine {
  0%   { background-position: 220% 0; opacity: 0; }
  12%  { opacity: 1; }
  45%  { background-position: -120% 0; opacity: 1; }
  55%, 100% { background-position: -120% 0; opacity: 0; }
}

/* The headline rises on its own, slightly ahead of the rest of the block. */
.hero__inner.in h1 { animation: heroRise .8s var(--ease) both; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner.in h1,
  .hero__inner.in h1 .hl::before,
  .hero__inner.in h1 .hl::after { animation: none; }
  .hero h1 .hl::before { transform: scaleX(1); }
}

/* On a narrow screen the highlighted phrase must be allowed to wrap. */
@media (max-width:560px){ .hero h1 .hl { white-space: normal; } }

/* The scrim itself is defined once, further down. The shadow separates the
   letters from the clouds without darkening the whole word. */
.hero h1 { text-shadow: 0 2px 12px rgba(2,12,40,.5); }
.hero p.lead { text-shadow: 0 1px 8px rgba(2,12,40,.45); }

/* ================= HEADER: toll free number, top right =================
   The number used to float bottom-left. It now lives in the header, which
   is fixed, so it stays visible while the bottom-right corner is left free
   for the chat widget. */
.header-call {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: var(--button-color, #57b521);
  color: #fff; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(15,23,42,.45);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.header-call:hover { background: var(--button-color-dk, #349200); transform: translateY(-2px); }
.header-call__ico { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22); flex-shrink:0; }
.header-call__ico svg { width:16px; height:16px; }
.header-call__txt { display:flex; flex-direction:column; line-height:1.12; }
.header-call__txt small { font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; opacity:.9; }
.header-call__txt strong { font-family:var(--font-head); font-size:.92rem; font-weight:800; letter-spacing:-.01em; }

/* The nav collapses at 1180px; below that the number keeps its icon but
   drops the label so the header does not wrap. */
@media (max-width:1180px){
  .header-call { padding:7px; gap:0; }
  .header-call__txt { display:none; }
}
@media (max-width:420px){ .header-call { display:none; } }

/* ================= HERO: centred, with the search box inside it =========
   The booking tabs are the point of the page, so they sit in the hero,
   horizontally centred, rather than below it. */
.hero__inner--center { max-width: 900px; margin: 0 auto; text-align: center; }
.hero__tag {
  display:inline-block;
  font-family:var(--font-head); font-weight:700;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  padding:7px 18px; border-radius:999px; margin-bottom:20px;
  backdrop-filter:blur(4px);
}
.hero__inner--center h1 { margin-bottom: 0; }

/* The hero is now a stacked column (headline, then search) rather than a
   single vertically-centred block. */
/* Inside the hero the band needs no negative pull - it just centres and
   keeps a comfortable gap under the headline. No max-width: the band
   spans the hero container. */
.search-band--hero {
  margin: 44px auto 0;
  width: 100%;
}
.hero { align-items: flex-start; }
.hero > .container { width: 100%; }

.hero { min-height: auto; padding: calc(var(--header-h) + 34px) 0 62px; }
@media (max-width:1024px){ .hero { padding: calc(var(--header-h) + 28px) 0 50px; } }
@media (max-width:640px){
  .hero { padding: calc(var(--header-h) + 20px) 0 40px; }
  .search-band--hero { margin-top: 30px; }
  .hero__tag { font-size:.72rem; letter-spacing:.12em; padding:6px 14px; }
}

/* Hero scrim - the single definition. Centred type sits over the middle of
   the photo, so it runs top-to-bottom across the full width. Kept light so
   the aircraft stays bright; the headline gets its contrast from the gold
   marker and its own text-shadow. */
.hero::after {
  background: linear-gradient(180deg,
    rgb(2 12 40 / 8%)  0%,
    rgb(2 12 40 / 21%) 45%,
    rgb(2 12 40 / 11%) 100%);
}

/* ---- pop-up: agent photo ------------------------------------------------
   Replaces the old plain phone circle. A face converts better than an icon,
   so the photo is the largest thing in the card. */
.c2c-pop__avatar {
  position: relative;
  display: block;
  width: 150px; height: 150px;
  margin: 0 auto 20px;
 
 
}
.c2c-pop__avatar img {
  width: 100%; height: 100%;
  display: block;
}

/* Shown only when the photo is missing or fails to load. */
.c2c-pop__avatar-fallback {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  color: var(--primary, #032f84);
}
.c2c-pop__avatar-fallback svg { width: 44px; height: 44px; }
.c2c-pop__avatar.is-fallback img { display: none; }
.c2c-pop__avatar.is-fallback .c2c-pop__avatar-fallback { display: grid; }

/* "Someone is actually there" dot. */
.c2c-pop__online {
  position: absolute; right: 4px; bottom: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--button-color, #22c55e);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.25);
}
.c2c-pop__online::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--button-color, #22c55e);
  opacity: .55;
  animation: c2cOnline 2s var(--ease) infinite;
  z-index: -1;
}
@keyframes c2cOnline {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2);   opacity: 0; }
  100% { transform: scale(2);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .c2c-pop__online::after { animation: none; } }

/* A touch more room at the top now that a photo sits there. */
.c2c-pop__card { padding-top: 34px; }

/* ---- currency + language pickers: hidden -------------------------------
   The slot stays in the markup (the locale script writes into it and the
   booking engine reads the stored currency), it is just not shown. Remove
   the .is-hidden class in partials/header.html to bring them back. */
/* Belt and braces: the booking engine renders its own switcher on some
   layouts, and that should stay hidden in the header too. */

/* Set class="is-hidden" on the slot in partials/header.html to switch the
   currency + language pickers off again. */
.locale-slot.is-hidden { display: none !important; }

/* Currency + language sit to the LEFT of the toll-free button. The switcher
   already carries order:1, but the call button had no order at all - so flex
   treated it as 0 and put it first, leaving the pickers stranded on the far
   right of the header. */
.site-header .header-call{order:5;}

/* Logo size, header and footer alike. {{brand}} renders the tenant's own
   image, which arrives at whatever size they uploaded. */
.site-header .brand img,.site-footer .brand img,.footer-brand .brand img{max-height:62px !important;width:auto !important;height:auto !important;}

/* ============================================================
   CLICK TO CALL - sticky bottom bar
   Markup: partials/call-widget.html (included once from the footer,
   so every page carries it). The idle pop-up above is the interruption;
   this is the quiet one that is simply always within reach.

   Desktop: a compact pill anchored bottom-LEFT. Deliberately not
   full-width and deliberately not on the right - the tawk.to chat
   launcher docks bottom-right, and two floating things fighting for the
   same corner looks broken on every site it happens to.

   Phone: a full-width bar, because on a phone the number IS the primary
   action. Body gets matching bottom padding so the bar never sits on top
   of the last line of content or a footer link.
   ============================================================ */
.c2c-bar {
  position: fixed;
  z-index: 1200;
  left: 20px;
  bottom: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body, inherit);
  animation: c2cBarIn .5s var(--ease, ease) both;
  animation-delay: .8s;
}
.c2c-bar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--primary, #032f84) 16%, #fff);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--primary, #032f84) 42%, transparent);
}

/* The pitch. Hidden on a phone - the bar is the button there. */
.c2c-bar__pitch {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--primary, #032f84);
}
.c2c-bar__pitch b { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.c2c-bar__pitch i {
  font-style: normal;
  font-size: .72rem;
  color: color-mix(in srgb, var(--primary, #032f84) 58%, #fff);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
/* Live dot - says "someone is actually there" without a word of copy. */
.c2c-bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--button-color, #22c55e);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-color, #22c55e) 60%, transparent);
  animation: c2cBarPing 2.4s ease-out infinite;
  flex: 0 0 auto;
}

.c2c-bar__call {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary, #032f84), color-mix(in srgb, var(--primary, #032f84) 62%, #000));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary, #032f84) 70%, transparent);
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), filter .18s ease;
}
.c2c-bar__call:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--primary, #032f84) 78%, transparent);
}
.c2c-bar__call:active { transform: translateY(0); }
.c2c-bar__call svg { width: 17px; height: 17px; flex: 0 0 auto; }
.c2c-bar__txt { display: flex; flex-direction: column; line-height: 1.2; }
.c2c-bar__lbl {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.c2c-bar__num { font-size: .92rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }

@keyframes c2cBarIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes c2cBarPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-color, #22c55e) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ── Responsive + motion preferences ───────────────────────── */
@media (max-width: 720px) {
  /* A compact pill, not a full-width strip. The bar is permanent, so it
     should take the least room that still reads - a bar across the whole
     screen competes with the content behind it. Anchored left, leaving the
     bottom-right corner to the chat launcher. */
  .c2c-bar { left: 12px; right: auto; bottom: 6px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .c2c-bar__inner { padding: 5px; gap: 8px; }
  .c2c-bar__pitch { display: none; }
  .c2c-bar__call { padding: 7px 14px 7px 9px; gap: 8px; }
  .c2c-bar__call svg { width: 15px; height: 15px; }
  /* Label above the number, not beside it - on a narrow screen a long
     international number and a label on one line either wrap mid-number or
     shrink the type until neither reads. */
  .c2c-bar__txt { flex-direction: column; align-items: flex-start; gap: 0; }
  .c2c-bar__lbl { font-size: .52rem; letter-spacing: .1em; }
  .c2c-bar__num { font-size: .82rem; }
  /* Clear the pill so it never covers the last line of a page. */
  body { padding-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .c2c-bar, .c2c-bar__dot { animation: none; }
  .c2c-bar__call { transition: none; }
}

/* ── Idle pop-up CTA: stack the label and the number on a phone ──────
   "CLICK TO CALL - +1(800) 280-2162" on one line either wraps mid-number
   or shrinks the type until neither part reads. Stacked, both stay full
   size and the number stays tappable. Desktop keeps the single line. */
.c2c-pop__cta-txt { display: inline-flex; align-items: baseline; gap: 8px; }
.c2c-pop__cta-lbl { letter-spacing: .06em; }
.c2c-pop__cta-num { white-space: nowrap; }

@media (max-width: 480px) {
  .c2c-pop__cta { flex-direction: row; align-items: center; gap: 10px; }
  .c2c-pop__cta-txt { flex-direction: column; align-items: flex-start; gap: 2px; }
  .c2c-pop__cta-lbl { font-size: .68rem; opacity: .85; }
  .c2c-pop__cta-num { font-size: 1.02rem; font-weight: 800; }
}

/* ============================================================
   HEADER TOLL-FREE BUTTON - attention animation
   Three quiet cues layered so the eye catches it without the header
   turning into a blinking advert:
     1. a halo that breathes outward from the pill, in the button's own
        colour so it reads as glow rather than a border;
     2. a shine that crosses the face every few seconds - most of the
        cycle is deliberately still, which is what keeps it from nagging;
     3. the handset gives a short ring-shake at the end of each cycle.
   All three stop on hover: once the visitor is on the button, the
   animation has done its job and would only fight the hover state.
   ============================================================ */
.header-call {
  position: relative;
  overflow: hidden;                /* clips the shine, not the halo -
                                      box-shadow is never clipped by the
                                      element's own overflow */
  animation: hcPulse 2.8s ease-out infinite;
}
.header-call::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: skewX(-18deg);
  animation: hcShine 4.6s ease-in-out infinite;
  pointer-events: none;
}
.header-call__ico svg {
  transform-origin: 50% 60%;
  animation: hcRing 4.6s ease-in-out infinite;
}
.header-call:hover { animation: none; }
.header-call:hover::after,
.header-call:hover .header-call__ico svg { animation: none; }

@keyframes hcPulse {
  0%   { box-shadow: 0 8px 20px -8px rgba(15,23,42,.45), 0 0 0 0 color-mix(in srgb, var(--button-color, #57b521) 60%, transparent); }
  70%  { box-shadow: 0 8px 20px -8px rgba(15,23,42,.45), 0 0 0 13px rgba(0,0,0,0); }
  100% { box-shadow: 0 8px 20px -8px rgba(15,23,42,.45), 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes hcShine {
  0%, 58%   { left: -40%; }
  88%, 100% { left: 120%; }
}
@keyframes hcRing {
  0%, 70%, 100% { transform: rotate(0deg); }
  74% { transform: rotate(-13deg); }
  78% { transform: rotate(11deg); }
  82% { transform: rotate(-8deg); }
  86% { transform: rotate(6deg); }
  90% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .header-call,
  .header-call::after,
  .header-call__ico svg { animation: none; }
  .header-call::after { display: none; }
}

/* ============================================================
   CLICK TO CALL bar - attention pulse
   The bar sat quietly enough to be missed. Same approach as the header
   button: a halo that breathes out of the pill in the brand colour, a
   shine that crosses the call button, and a small breath on the button
   itself. Most of each cycle is deliberately still - a true blink reads
   as a broken element, while a slow pulse reads as "live".
   Everything stops on hover, once the visitor is already there.
   ============================================================ */
.c2c-bar__inner { animation: c2cGlow 2.6s ease-out infinite; }
.c2c-bar__call {
  position: relative;
  overflow: hidden;                 /* clips the shine; the halo above is a
                                       box-shadow on the parent, unaffected */
  animation: c2cBreath 2.6s ease-in-out infinite;
}
.c2c-bar__call::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  animation: c2cSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
.c2c-bar:hover .c2c-bar__inner,
.c2c-bar:hover .c2c-bar__call,
.c2c-bar:hover .c2c-bar__call::after { animation: none; }

@keyframes c2cGlow {
  0%   { box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--primary, #032f84) 42%, transparent),
                     0 0 0 0 color-mix(in srgb, var(--primary, #032f84) 45%, transparent); }
  70%  { box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--primary, #032f84) 42%, transparent),
                     0 0 0 14px rgba(0,0,0,0); }
  100% { box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--primary, #032f84) 42%, transparent),
                     0 0 0 0 rgba(0,0,0,0); }
}
@keyframes c2cBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes c2cSweep {
  0%, 55%   { left: -45%; }
  85%, 100% { left: 125%; }
}

@media (prefers-reduced-motion: reduce) {
  .c2c-bar__inner,
  .c2c-bar__call,
  .c2c-bar__call::after { animation: none; }
  .c2c-bar__call::after { display: none; }
}

/* ============================================================
   c2c/header call alignment + side
   The stacked label-over-number reads better centred than left-ragged:
   the number is the long line, so a left edge leaves the small caps
   label floating off to one side of it.
   The bottom pill moves to the right, where the eye finishes reading.
   ============================================================ */
.header-call__txt { align-items: center; text-align: center; }

.c2c-bar__pitch { align-items: center; text-align: center; }
.c2c-bar__pitch i { justify-content: center; }
.c2c-bar__txt { align-items: center; text-align: center; }

/* Right-anchored. left:auto is required because the base rule sets left. */
.c2c-bar { left: auto; right: 20px; }

@media (max-width: 720px) {
  .c2c-bar { left: auto; right: 12px; }
  .c2c-bar__txt { align-items: center; }
}

/* ============================================================
   MOBILE: get the searchbox onto the first screen
   The banner was pushing the search band below the fold, so the one
   thing a visitor came to do needed a scroll to find. The headline
   moves up and gives back the room: smaller, lighter, tighter leading.
   An 800-weight display size reads as a wall on a 390px screen and
   earns none of the space it takes.
   Appended last so it wins over the earlier 640px blocks rather than
   editing four of them.
   ============================================================ */
@media (max-width: 640px) {
  .hero { padding: calc(var(--header-h) + 10px) 0 26px; }
  .hero h1 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-bottom: 12px;
  }
  .hero p, .hero__sub { font-size: .9rem; line-height: 1.5; margin-bottom: 10px; }
  .hero__tag { margin-bottom: 8px; }
  /* The band sat 30px clear of the headline; at this size that gap is the
     difference between the Search button being on screen or not. */
  .search-band--hero { margin-top: 14px; }
}

/* ── Call to action: never clipped ─────────────────────────────
   Right-anchored with an automatic width, a long international number
   pushed the pill past the left edge of the viewport and the label was
   cut in half. A call to action you can only half read is worse than
   none, so on a phone it spans the full strip (still short - the
   padding and type sizes set earlier are unchanged) and centres its
   contents. */
@media (max-width: 720px) {
  .c2c-bar { left: 12px; right: 12px; max-width: none; }
  .c2c-bar__inner { justify-content: center; }
  .c2c-bar__call { flex: 1 1 auto; justify-content: center; }
  .c2c-bar__txt { align-items: center; text-align: center; }
}

/* ── phone CTA: taller tap target ─────────────────────────────
   The bar was trimmed until the button was thin. The number is the
   whole point of it, so give the button real height and bring the type
   up with it - otherwise the extra height just reads as padding round
   small text. Bottom clearance follows, so the bar still never sits on
   the last line of the page. */
@media (max-width: 720px) {
  .c2c-bar__inner { padding: 6px; }
  .c2c-bar__call { padding: 12px 16px; }
  .c2c-bar__call svg { width: 17px; height: 17px; }
  .c2c-bar__lbl { font-size: .56rem; }
  .c2c-bar__num { font-size: .92rem; }
  body { padding-bottom: 74px; }
}

/* ── header on a phone: edges + logo size ─────────────────────
   .header-inner runs at padding:0 so it lines up with the page container
   on desktop, where max-width supplies the gap. Once the container is
   full-bleed that leaves the logo flush against the screen edge, so the
   padding comes back exactly where it is needed. The 62px logo cap is a
   desktop number; at phone width it swallows the bar. */
@media (max-width: 1240px) {
  .header-inner { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .header-inner { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .site-header .brand img { max-height: 38px !important; }
  .site-header .header-actions { gap: 6px; }
}


/* c2c-bar: off on results pages under 720px */
/* The engine's filter button takes the bottom-left corner on a phone, and
   this bar sat on top of it - the one control for narrowing a long list of
   results. is-results-state is on the body only where those results are, so
   the bar stays put on the home page, the detail pages and everywhere else. */
@media (max-width: 720px) {
  body.is-results-state .c2c-bar { display: none; }
}

/* ── c2c-bar: phones only ─────────────────────────────────────
   The sticky call pill is a phone affordance. On a desktop the same
   number is already in the header, top right, so the floating bar is
   the call to action twice over - and the second one sits on top of
   the page. 721px is the exact complement of the 720px blocks above,
   which are what reshape the bar for a small screen. */
@media (min-width: 721px) {
  .c2c-bar { display: none; }
}