: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;
}
/* On a dark band the eyebrow's own colour is the tenant's button colour on
   the tenant's primary-dark - unreadable. There, it and its dash go white. */
.section--dark .eyebrow { color: #fff; }
.section--dark .eyebrow::before { background: #fff; }
.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); }
/* The header and footer strips want a long address to ellipsise, so
   .b2c-contact-val is nowrap. In an info card nothing constrains it: the
   address held the card at 330px and pushed the whole column past the
   container below ~366px. Here it wraps. */
.info-card .b2c-contact { max-width: 100%; }
.info-card .b2c-contact-val { white-space: normal; overflow-wrap: anywhere; }
.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: minmax(0, 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: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 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:var(--brand-logo-h, 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:var(--brand-logo-h, 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; }
}


/* ai21: the account chip is a drawer row like any other */
/* Login ships wrapped in an inline-flex span, so in the drawer - where
   every row is a full-width block with a rule under it - its underline
   stopped at the width of the word. The wrapper carries that display as
   an inline style, which is what the !important is for. */
.mobile-nav .b2c-acct{ display: block !important; }


/* ai21: paired buttons keep a gap when they stack */
/* The row is a plain block, so the two buttons are inline and held apart only
   by the whitespace between the tags - 4px side by side, and nothing at all
   once the column is too narrow to hold both, where they read as one welded
   slab. A wrapping flex row gives the stacked pair 12px; the column gap is
   held at the 4px the whitespace was giving, so nothing moves at any width
   where they still fit on one line.

   .split only. .cta-banner .btn-row has its own flex rule and its own gap,
   and the hero's row is laid out differently and is measurably disturbed by
   being made a flex container. */
.split .btn-row{ display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 12px; }

/* ── dest-tile eyebrow: white ─────────────────
   The category above each destination name took var(--gold), which this
   palette resolves to the brand blue: dark type on a dark photograph,
   sitting directly above a white title, reading as a link rather than a
   label. White is what the name and the "View hotels" line already use,
   and it is the one colour that holds against every image behind it. */
.dest-tile__cap .count { color: #fff; }


/* ai21: the product cards centre under their own heading */
/* Five tracks, four products: the empty fifth track pushed the whole row off
   to the left of a section that is centred - 117px out at 1440. A wrapping
   centred flex row instead, with each card keeping the width of the grid
   track it had, so five products lay out exactly as before and four or three
   are the same cards, centred. The basis follows the theme's own 900 and 560
   breakpoints, where the grid was 3 and 2 across. */
.prod-links{ display: flex; flex-wrap: wrap; justify-content: center; }
.prod-links > *{ flex: 0 1 calc((100% - 64px) / 5); }
@media (max-width: 900px){ .prod-links > *{ flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 560px){ .prod-links > *{ flex-basis: calc((100% - 16px) / 2); } }

/* ── cta-banner clears the tinted band above it ─────────
   The CTA section carries an inline padding-top:0 so the card can sit
   tight under the section before it. After a plain white section that is
   right - the card floats in the space that section's own bottom padding
   already gives it. After a tinted band it is not: the band's background
   ends on exactly the line where the card begins, and the two read as one
   welded block. The margin goes on the card, not the section, because the
   section's padding-top is inline and beating it would take an
   !important this does not need. Stepped to match the theme's own
   92 / 68 / 56 section rhythm. */
.section--soft + .section .cta-banner,
.section--dark + .section .cta-banner { margin-top: 56px; }
@media (max-width: 900px) {
  .section--soft + .section .cta-banner,
  .section--dark + .section .cta-banner { margin-top: 40px; }
}
@media (max-width: 640px) {
  .section--soft + .section .cta-banner,
  .section--dark + .section .cta-banner { margin-top: 32px; }
}


/* ai21 v3: call circle kept on phones */
.ai21-v3-stray-brace-guard{}
/* The call circle stays on phones too (the theme dropped it below 420). */
@media (max-width:420px){ .site-header .header-call{ display:inline-flex !important; padding:6px; } }


/* ai21 v3: section-foot buttons keep a gap when they stack */
.btn-row.reveal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start !important; column-gap:4px; row-gap:12px; }


/* ai21 v4: manage booking item hidden when the feature is off */
.main-nav li.b2c-mb-item:empty{display:none;}


/* ai21 v4: breadcrumb clears the searchbox */
.ai21-v4-stray-brace-guard{}
/* Inner pages with a searchbox (Hotels, Flights, Buses, Excursions,
   Destinations): the box is pulled up over the hero and covered the
   breadcrumb. The hero grows by the pull so the crumb clears the box by 24px. */
.page-hero:has(+ .container > .search-band){ padding-bottom:132px; }
@media (max-width:1024px){ .page-hero:has(+ .container > .search-band){ padding-bottom:114px; } }
@media (max-width:640px){ .page-hero:has(+ .container > .search-band){ padding-bottom:84px; } }