:root {
  --primary: #186900;
  --primary-dark: #0e3f07;
  --primary-deep: var(--primary-dark, #0a2505);
  --primary-soft: #e9f6e6;--primary-soft:color-mix(in srgb, var(--primary, #e9f6e6) 18%, #fff);
  --accent: var(--button-color, #fbbf24);
  --accent-dark: var(--button-color-dk, #d89104);
  --ink: #152016;
  --muted: #637064;
  --line: #e3e9e1;
  --panel: #ffffff;
  --soft: #f6fbf3;
  --sand: #fbf4e4;
  --mint: #dff7ed;
  --lime: #ecffd9;
  --shadow: 0 24px 60px rgba(12, 38, 9, 0.14);
  --shadow-soft: 0 14px 36px rgba(12, 38, 9, 0.1);
  --radius: 8px;
  --container: 1180px;
}* {
  box-sizing: border-box;
}html {
  scroll-behavior: smooth;
}body {
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.6;
  letter-spacing: 0;
  overflow-x: hidden;
}img {
  display: block;
  max-width: 100%;
}a {
  color: inherit;
  text-decoration: none;
}button, input, textarea {
  font: inherit;
}.container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}.section-pad {
  padding: 88px 0;
}.section-pad-sm {
  padding: 58px 0;
}.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(12, 38, 9, 0.06);
}.nav-frame {
  width: min(1240px, calc(100% - 32px));
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: stretch;
}.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background:
    linear-gradient(135deg, var(--accent) 0 50%, transparent 50%),
    linear-gradient(135deg, #31b56f 0 50%, var(--primary) 50% 100%);
  box-shadow: 0 6px 16px rgba(24, 105, 0, 0.2);
  flex: 0 0 auto;
}.nav-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 0 18px 0 52px;
  background: var(--primary-dark);
  color: #ffffff;
  clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%);
  min-width: 0;
}.nav-ribbon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}.nav-ribbon a:hover, .nav-ribbon a:focus-visible, .nav-ribbon a[aria-current="page"] {
  color: #ffffff;
}.support-link {
  min-width: 126px;
  padding: 0 16px !important;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary-deep) !important;
  box-shadow: 0 10px 20px rgba(251, 191, 36, 0.26);
}.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  padding: 10px;
  cursor: pointer;
}.menu-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: #ffffff;
  border-radius: 999px;
}.hero {
  position: relative;
  min-height: 740px;
  padding-top: 70px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 68%, var(--soft) 68%, var(--soft) 100%);
}.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 2px solid rgba(24, 105, 0, 0.12);
  border-radius: 999px;
}.hero::before {
  width: 72px;
  height: 26px;
  left: 7%;
  top: 100px;
}.hero::after {
  width: 52px;
  height: 20px;
  right: 8%;
  top: 172px;
}.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.9fr);
  gap: 54px;
  align-items: center;
}.hero-copy {
  max-width: 610px;
}.eyebrow {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}.eyebrow.light {
  color: var(--accent);
}h1, h2, h3, p {
  margin-top: 0;
}h1 {
  margin-bottom: 20px;
  font-size: 58px;
  line-height: 1.05;
  font-weight: 800;
  color: #253024;
}h2 {
  margin-bottom: 16px;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 800;
  color: #20351d;
}h3 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  color: #20351d;
}p {
  color: var(--muted);
  font-size: 15px;
}.hero-lede {
  max-width: 500px;
  margin-bottom: 28px;
  font-size: 16px;
}.hero-actions, .store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
}.btn-primary {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 14px 26px rgba(24, 105, 0, 0.24);
}.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--primary-dark);
}.btn-accent {
  background: var(--accent);
  color: var(--primary-deep);
  box-shadow: 0 14px 26px rgba(251, 191, 36, 0.25);
}.btn-soft {
  background: var(--primary-soft);
  color: var(--primary-dark);
}.btn-outline {
  border-color: rgba(24, 105, 0, 0.25);
  background: #ffffff;
  color: var(--primary-dark);
}.hero-visual {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}.hero-visual::before {
  content: "";
  position: absolute;
  inset: 66px 32px 34px 46px;
  border-radius: 8px;
  background: #bdf4e2;
  z-index: 0;
}.hero-visual img {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  height: 470px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: var(--shadow);
}.hero-badge {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 118px;
  width: 154px;
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}.hero-badge span {
  display: block;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
}.hero-badge strong {
  display: block;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.12;
}.booking-wrap {
  position: relative;
  z-index: 3;
  margin-top: -28px;
}.smart-band-wrap {
  padding-top: 28px;
}.smart-band {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: center;
  overflow: visible;
  padding: 44px 52px 44px 42px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 34%),
    var(--primary-dark);
  color: #ffffff;
}.smart-band::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  opacity: 0.12;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255, 255, 255, 0.55) 10% 11%, transparent 11% 22%, rgba(255, 255, 255, 0.55) 22% 23%, transparent 23% 100%);
}.smart-photo {
  position: relative;
  z-index: 1;
  align-self: stretch;
  margin-top: -118px;
}.tall-photo img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}.smart-copy {
  position: relative;
  z-index: 1;
  max-width: 430px;
}.smart-copy h2, .smart-copy p {
  color: #ffffff;
}.smart-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 24px;
}.smart-collage {
  position: relative;
  z-index: 1;
  min-height: 260px;
}.smart-collage img {
  position: absolute;
  object-fit: cover;
  border: 8px solid rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}.circle-one {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  left: 20px;
  top: 20px;
}.circle-two {
  width: 210px;
  height: 210px;
  border-radius: 999px;
  right: 0;
  bottom: 0;
}.section-title {
  margin-bottom: 34px;
}.title-narrow {
  max-width: 680px;
}.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}.destination-card, .feature-card, .why-card, .experience-card, .contact-card, .contact-form, .explore-card {
  border-radius: 8px;
}.destination-card {
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(18, 45, 16, 0.09);
  transition: transform 180ms ease, box-shadow 180ms ease;
}.destination-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(18, 45, 16, 0.14);
}.destination-card img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
}.destination-card div {
  padding: 18px 18px 22px;
}.destination-card p, .feature-card p, .why-card p, .experience-card p {
  margin-bottom: 0;
}.connected-section {
  background: #ffffff;
}.connected-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 70px;
  align-items: center;
}.travel-board {
  position: relative;
  min-height: 360px;
}.board-main, .board-card {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}.board-main {
  width: 250px;
  left: 70px;
  top: 40px;
}.board-main img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}.board-main strong, .board-card span {
  display: block;
  padding: 14px 16px;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 800;
}.board-card {
  width: 178px;
}.board-card img {
  width: 100%;
  height: 126px;
  object-fit: cover;
}.board-card:nth-child(2) {
  left: 0;
  bottom: 22px;
}.board-card:nth-child(3) {
  right: 8px;
  top: 76px;
}.connected-copy {
  max-width: 540px;
}.connected-copy p:not(.eyebrow) {
  margin-bottom: 26px;
}.deal-band {
  padding: 42px 0;
  background: #ffffff;
}.deal-inner {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 34px;
  align-items: center;
  overflow: hidden;
  padding: 36px 44px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(10, 37, 5, 0.9), rgba(14, 63, 7, 0.93)),
    url("https://images.unsplash.com/photo-1474302770737-173ee21bab63?auto=format&fit=crop&w=1400&q=80") center / cover;
  color: #ffffff;
}.deal-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}.deal-copy {
  max-width: 530px;
}.deal-copy h2 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 42px;
}.deal-copy p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.83);
}.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-bottom: 18px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 800;
}.story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 74px;
  align-items: center;
}.service-bubbles {
  position: relative;
  min-height: 430px;
}.bubble {
  position: absolute;
  overflow: hidden;
  border: 8px solid #ffffff;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}.bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}.bubble span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}.bubble-large {
  width: 245px;
  height: 245px;
  left: 52px;
  top: 0;
}.bubble-medium {
  width: 220px;
  height: 220px;
  right: 20px;
  top: 140px;
}.bubble-small {
  width: 185px;
  height: 185px;
  left: 10px;
  bottom: 10px;
}.story-copy {
  position: relative;
  max-width: 600px;
}.mini-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}.mini-reviews div {
  min-height: 130px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}.mini-reviews strong, .mini-reviews span {
  display: block;
}.mini-reviews strong {
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 14px;
}.mini-reviews span {
  color: var(--muted);
  font-size: 13px;
}.circle-cta {
  position: absolute;
  right: 0;
  bottom: -58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(251, 191, 36, 0.28);
}.explore-section {
  background: var(--soft);
}.explore-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.7fr;
  gap: 22px;
  align-items: stretch;
}.explore-large {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--primary-dark);
  color: #ffffff;
}.explore-large img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  opacity: 0.78;
}.explore-large::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 37, 5, 0.86));
}.explore-large-copy {
  position: absolute;
  z-index: 1;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}.explore-large-copy h2 {
  max-width: 360px;
  margin: 0;
  color: #ffffff;
}.explore-stack {
  display: grid;
  gap: 22px;
}.explore-card {
  overflow: hidden;
  padding: 24px 22px 0;
  min-height: 239px;
}.explore-card p {
  font-size: 13px;
}.explore-card img {
  width: calc(100% + 44px);
  height: 160px;
  margin: 16px -22px 0;
  object-fit: cover;
}.tone-mint {
  background: var(--mint);
}.tone-lime {
  background: var(--lime);
}.tone-sand {
  background: var(--sand);
}.contact-strip {
  background: #ffffff;
}.contact-strip-inner, .soft-cta-inner, .testimonial-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}.contact-strip h2, .soft-cta h2, .testimonial-inner h2 {
  margin-bottom: 0;
}.site-footer {
  margin: 0 32px 32px;
  border-radius: 8px;
  background: var(--primary-dark);
  color: #ffffff;
}.footer-main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 0.75fr);
  gap: 46px;
  padding: 58px 0 34px;
}.brand-footer {
  margin-bottom: 18px;
  color: #ffffff;
}.footer-brand p {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}.footer-column h2 {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 14px;
}.footer-column a {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}.footer-column a:hover, .footer-column a:focus-visible {
  color: #ffffff;
}.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
}.footer-bottom a {
  color: #ffffff;
  font-weight: 800;
}.page-hero {
  padding: 72px 0 54px;
  background: linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
}.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: 58px;
  align-items: center;
}.page-hero h1 {
  max-width: 640px;
  font-size: 48px;
}.page-hero p:not(.eyebrow) {
  max-width: 540px;
  margin-bottom: 26px;
  font-size: 16px;
}.page-hero img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}.page-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}.feature-card {
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}.feature-card img {
  width: 100%;
  height: 270px;
  object-fit: cover;
}.feature-card div {
  padding: 24px;
}.soft-cta {
  background: var(--soft);
}.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}.why-card {
  min-height: 300px;
  padding: 26px 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(18, 45, 16, 0.07);
}.why-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 800;
}.route-section, .testimonial-panel {
  background: var(--primary-dark);
  color: #ffffff;
}.route-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: start;
}.route-grid h2, .testimonial-inner h2 {
  color: #ffffff;
}.route-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: route;
}.route-list li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}.route-list strong {
  color: var(--accent);
}.route-list span, .testimonial-inner p {
  color: rgba(255, 255, 255, 0.78);
}.story-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}.experience-card {
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}.experience-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}.experience-card div {
  padding: 24px;
}.testimonial-inner {
  color: #ffffff;
}.contact-page {
  background: #ffffff;
}.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: start;
}.contact-card, .contact-form {
  padding: 30px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}.contact-card h2 {
  font-size: 28px;
  word-break: break-word;
}.contact-form {
  display: grid;
  gap: 12px;
}.contact-form label {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdf9;
  color: var(--ink);
  padding: 13px 14px;
  outline: none;
}.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(24, 105, 0, 0.1);
}

@media (max-width: 1120px) {.nav-frame {
    grid-template-columns: 230px minmax(0, 1fr);
  }.nav-ribbon {
    gap: 12px;
    padding-right: 12px;
    padding-left: 46px;
  }.nav-ribbon a {
    font-size: 11px;
  }h1 {
    font-size: 48px;
  }h2 {
    font-size: 30px;
  }.smart-band {
    grid-template-columns: 250px minmax(0, 1fr) 260px;
    padding-right: 36px;
  }.destination-grid, .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.explore-grid {
    grid-template-columns: 1fr 1fr;
  }.explore-large {
    grid-row: span 2;
  }
}

@media (max-width: 900px) {.container {
    width: min(var(--container), calc(100% - 36px));
  }.section-pad {
    padding: 66px 0;
  }.site-header {
    position: sticky;
  }.nav-frame {
    min-height: 70px;
    grid-template-columns: 1fr 44px;
    align-items: center;
  }.menu-toggle {
    display: block;
    justify-self: end;
  }.nav-ribbon {
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border-radius: 8px;
    clip-path: none;
    box-shadow: var(--shadow);
  }.nav-ribbon.is-open {
    display: flex;
  }.nav-ribbon a {
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }.support-link {
    justify-content: center !important;
    margin-top: 8px;
  }.hero {
    min-height: auto;
    padding-top: 52px;
  }.hero-grid, .connected-grid, .story-grid, .page-hero-grid, .contact-grid, .route-grid {
    grid-template-columns: 1fr;
  }.hero-grid {
    gap: 36px;
  }.hero-copy {
    max-width: none;
  }.hero-visual {
    min-height: 430px;
  }.hero-visual img {
    height: 395px;
  }.booking-wrap {
    margin-top: 24px;
  }.smart-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }.smart-photo {
    margin-top: 0;
  }.tall-photo img {
    height: 290px;
  }.smart-collage {
    display: none;
  }.travel-board {
    min-height: 410px;
  }.deal-inner {
    grid-template-columns: 1fr;
  }.deal-photo img {
    height: 240px;
  }.mini-reviews {
    grid-template-columns: 1fr;
  }.circle-cta {
    position: static;
    margin-top: 22px;
  }.page-card-grid, .story-page-grid, .footer-main {
    grid-template-columns: 1fr;
  }.footer-main {
    gap: 24px;
  }
}

@media (max-width: 640px) {.container {
    width: calc(100% - 28px);
  }.section-pad {
    padding: 52px 0;
  }.section-pad-sm {
    padding: 44px 0;
  }.brand {
    font-size: 14px;
  }h1, .page-hero h1 {
    font-size: 38px;
    line-height: 1.08;
  }h2 {
    font-size: 27px;
  }.hero {
    padding-top: 40px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, var(--soft) 72%, var(--soft) 100%);
  }.hero-actions, .store-actions, .contact-strip-inner, .soft-cta-inner, .testimonial-inner, .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }.btn {
    width: 100%;
    min-height: 48px;
  }.hero-visual {
    min-height: 360px;
  }.hero-visual::before {
    inset: 46px 8px 20px;
  }.hero-visual img {
    width: calc(100% - 42px);
    height: 330px;
  }.hero-badge {
    right: 4px;
    bottom: 54px;
    width: 132px;
    padding: 12px;
  }.hero-badge strong {
    font-size: 16px;
  }.smart-band {
    padding: 20px;
  }.destination-grid, .why-grid, .explore-grid {
    grid-template-columns: 1fr;
  }.destination-card img {
    aspect-ratio: 1.55;
  }.travel-board {
    min-height: auto;
    display: grid;
    gap: 14px;
  }.board-main, .board-card {
    position: static;
    width: 100%;
  }.board-main img, .board-card img {
    height: 190px;
  }.deal-inner {
    padding: 22px;
  }.deal-copy h2 {
    font-size: 32px;
  }.service-bubbles {
    min-height: auto;
    display: grid;
    gap: 14px;
  }.bubble {
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    border-radius: 8px;
  }.explore-large, .explore-large img {
    min-height: 380px;
  }.explore-large-copy {
    display: block;
  }.explore-large-copy .btn {
    margin-top: 18px;
  }.page-hero {
    padding: 52px 0 42px;
  }.page-hero img {
    height: 300px;
  }.feature-card img, .experience-card img {
    height: 220px;
  }.route-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }.contact-card, .contact-form {
    padding: 22px;
  }.site-footer {
    margin: 0 14px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {*, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* 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 header fixes v3 */
.nav-ribbon .b2c-locale-switch{flex:0 0 auto;}
.nav-ribbon .b2c-loc-btn{color:#fff;min-height:0;}
.nav-ribbon .b2c-loc-panel a{display:block;min-height:0;justify-content:flex-start;padding:.45rem .7rem;font-size:.82rem;font-weight:600;text-align:left;}
@media (max-width:1120px){.nav-ribbon .b2c-loc-btn{padding:.3rem .35rem;font-size:.72rem;}.nav-ribbon .b2c-locale-switch{gap:.2rem;}}
@media (max-width:900px){.nav-ribbon .b2c-locale-switch{align-self:flex-start;padding:6px 2px;}.nav-ribbon .b2c-loc-panel{right:auto;left:0;}}
@media (max-width:767px){.explore-large-copy .btn{display:none !important;}}
.abe-search-tabs{justify-content:flex-start !important;margin-left:0 !important;margin-right:auto !important;}
body{display:flow-root;}


/* ai25: burger from 991, ribbon utilities */
/* The theme's own 900 block also restacks the hero, the bands and the footer,
   so only its header rules are restated here - the page layout keeps 900. */
@media (max-width:991px){
  .site-header{position:sticky;}
  .nav-frame{min-height:70px;grid-template-columns:1fr 44px;align-items:center;}
  .menu-toggle{display:block;justify-self:end;}
  .nav-ribbon{position:absolute;top:70px;left:16px;right:16px;display:none;
    flex-direction:column;align-items:stretch;gap:0;padding:12px;border-radius:8px;
    clip-path:none;box-shadow:var(--shadow);}
  .nav-ribbon.is-open{display:flex;}
  .nav-ribbon a{justify-content:flex-start;min-height:44px;padding:0 12px;font-size:13px;}
  .support-link{justify-content:center !important;margin-top:8px;}
  .nav-ribbon .b2c-locale-switch{align-self:flex-start;padding:6px 2px;}
  .nav-ribbon .b2c-loc-panel{right:auto;left:0;}
  /* Need Help and Coins live in the ribbon now, so they need a row of their
     own once it is a stacked menu. */
  .nav-ribbon .link-help{min-height:44px;display:flex;align-items:center;padding:0 12px;
    text-decoration:none;color:inherit;}
  .nav-ribbon .b2c-coins-pill{align-self:stretch;margin:6px 0;}
}
/* Hidden outright at 520 and 420 by earlier !important rules, and this theme's
   menu is where it would otherwise have gone. */
@media (max-width:520px){ .nav-ribbon .b2c-coins-pill{display:inline-flex !important;} }

/* ==========================================================================
   Homepage, rebuilt to the travel-agency reference layout.
   Prefixed nd- so none of it can collide with the sections above.
   Colour comes from the brand variables only - never a literal.
   ========================================================================== */
.nd-section{padding:96px 0;}
.nd-soft{background:var(--soft);}
.nd-eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dark);}
.nd-head{max-width:720px;margin:0 0 46px;}
.nd-head h2{margin:0;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.18;letter-spacing:-.02em;}
.nd-head-lede{margin:14px 0 0;color:var(--muted);font-size:1.02rem;}
.nd-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;}

.nd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:.92rem 1.9rem;border-radius:var(--radius);font-weight:700;font-size:.94rem;
  letter-spacing:.02em;border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease;}
.nd-btn:hover{transform:translateY(-2px);}
.nd-btn-solid{background:var(--accent);color:#fff;box-shadow:var(--shadow-soft);}
.nd-btn-ghost{border-color:var(--line);color:var(--ink);background:var(--panel);}
.nd-btn-ghost:hover{border-color:var(--accent);}
.nd-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;
  color:var(--primary);}
.nd-link::after{content:"\2192";transition:transform .18s ease;}
.nd-link:hover::after{transform:translateX(4px);}

/* Hero -------------------------------------------------------------------- */
.nd-hero{position:relative;overflow:hidden;}
.nd-hero-bg{position:absolute;inset:0;z-index:0;}
.nd-hero-bg img{width:100%;height:100%;object-fit:cover;}
.nd-hero-bg::after{display:none;}


.nd-cta h2,.nd-cta p{color:#fff;}



/* The search card rides up over the hero. */
.nd-searchband{position:relative;z-index:2;margin-top:-88px;padding-bottom:26px;}
.nd-searchcard{background:var(--panel);border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);padding:22px;}

/* Packages ---------------------------------------------------------------- */
.nd-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.nd-pkg{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.nd-pkg:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);}
/* The photograph is taken out of the flow so a portrait file cannot stretch
   its card taller than the two beside it. */
.nd-pkg-media{position:relative;aspect-ratio:3/2;overflow:hidden;}
.nd-pkg-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.nd-badge-days{position:absolute;left:16px;bottom:16px;padding:.36rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:.76rem;font-weight:700;}
.nd-badge-sale{position:absolute;right:16px;top:16px;padding:.34rem .8rem;border-radius:var(--radius);
  background:var(--accent);color:var(--ink);font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;}
.nd-pkg-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.nd-pkg-place{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);}
.nd-pkg-body h3{margin:0;font-size:1.16rem;line-height:1.35;}
.nd-pkg-body p{margin:0;color:var(--muted);font-size:.94rem;}
.nd-pkg-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nd-price{font-size:1.35rem;font-weight:800;color:var(--primary);}
.nd-price small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}
.nd-price s{font-size:.9rem;font-weight:600;color:var(--muted);}

/* Split copy + photograph -------------------------------------------------- */
.nd-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.nd-split-copy h2{margin:0 0 18px;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.18;
  letter-spacing:-.02em;}
.nd-split-copy p{margin:0 0 16px;color:var(--muted);}
.nd-split-copy .nd-btn{margin-top:12px;}
.nd-split-media img{width:100%;border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);
  aspect-ratio:4/3;object-fit:cover;}
.nd-split-flip .nd-split-media{order:-1;}
.nd-ticks{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:12px;}
.nd-ticks li{position:relative;padding-left:34px;color:var(--muted);}
.nd-ticks li::before{content:"\2713";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--accent);color:var(--ink);font-size:.74rem;font-weight:800;
  display:grid;place-items:center;}

/* Services ---------------------------------------------------------------- */
.nd-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.nd-svc{background:var(--panel);border-radius:calc(var(--radius) + 4px);padding:40px 32px;
  text-align:center;border:1px solid var(--line);}
.nd-svc-icon{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 20px;
  border-radius:50%;background:color-mix(in srgb, var(--primary) 14%, #fff);color:var(--primary);}
.nd-svc-icon svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.nd-svc h3{margin:0 0 10px;font-size:1.18rem;}
.nd-svc p{margin:0;color:var(--muted);font-size:.94rem;}

/* Sideways rails (destinations, testimonials) ------------------------------ */
.nd-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(266px,1fr);gap:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:10px;scrollbar-width:none;}
.nd-rail::-webkit-scrollbar{display:none;}
.nd-rail > *{scroll-snap-align:start;}
.nd-arrows{display:flex;gap:10px;flex:0 0 auto;}
.nd-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;}
.nd-arrow:hover{background:var(--accent);border-color:var(--accent);}

.nd-dest{position:relative;border-radius:calc(var(--radius) + 4px);overflow:hidden;
  min-height:400px;display:flex;align-items:flex-end;}
.nd-dest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;}
.nd-dest:hover img{transform:scale(1.06);}
.nd-dest::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.78));}
.nd-dest-body{position:relative;z-index:1;padding:26px;color:#fff;}
.nd-dest-body h3{margin:0 0 4px;font-size:1.5rem;color:#fff;}
.nd-dest-body p{margin:0 0 12px;font-size:.9rem;color:rgba(255,255,255,.82);}
.nd-dest-body .nd-link{color:var(--accent);}

.nd-quote{margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);padding:32px 26px;text-align:center;}
.nd-quote img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 18px;}
.nd-quote blockquote{margin:0 0 18px;color:var(--muted);font-size:.96rem;line-height:1.62;}
.nd-quote figcaption{font-weight:700;font-size:.95rem;}
.nd-quote figcaption span{display:block;font-weight:500;font-size:.84rem;color:var(--muted);}

/* Plans ------------------------------------------------------------------- */
.nd-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start;}
.nd-plan{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);padding:40px 32px;text-align:center;}
.nd-plan h3{margin:0 0 12px;font-size:1.22rem;}
.nd-plan-price{margin:0 0 22px;font-size:2.6rem;font-weight:800;color:var(--primary);
  line-height:1;}
.nd-plan-price small{font-size:.92rem;font-weight:600;color:var(--muted);}
.nd-plan ul{margin:0 0 28px;padding:0;list-style:none;display:grid;gap:12px;}
.nd-plan li{padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--muted);
  font-size:.93rem;}
.nd-plan li:last-child{border-bottom:0;padding-bottom:0;}
.nd-plan .nd-btn{width:100%;}
.nd-plan-featured{border-color:var(--accent);box-shadow:var(--shadow);padding-top:52px;}
.nd-plan-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:.4rem 1.2rem;border-radius:999px;background:var(--accent);color:var(--ink);
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.nd-plan-note{margin:26px 0 0;text-align:center;color:var(--muted);font-size:.86rem;}

/* Parallax call to action -------------------------------------------------- */
.nd-cta{position:relative;padding:130px 0;color:#fff;text-align:center;overflow:hidden;}
.nd-cta-bg{position:absolute;inset:0;z-index:0;}
.nd-cta-bg img{width:100%;height:100%;object-fit:cover;}
.nd-cta-bg::after{content:"";position:absolute;inset:0;background:rgba(8,20,10,.62);}
.nd-cta-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;}
.nd-cta-inner .nd-eyebrow{color:var(--accent);}
.nd-cta h2{margin:0 0 16px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;
  letter-spacing:-.02em;}
.nd-cta p{margin:0 0 30px;color:rgba(255,255,255,.88);}

/* Journal ----------------------------------------------------------------- */
.nd-blog{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:start;}
.nd-post{background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);overflow:hidden;}
.nd-post-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.nd-post-body{padding:24px;}
.nd-post-date{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);}
.nd-post-body h3{margin:0 0 10px;font-size:1.2rem;line-height:1.35;}
.nd-post-body p{margin:0 0 14px;color:var(--muted);font-size:.94rem;}
.nd-post-stack{display:grid;gap:22px;}
.nd-post-stack .nd-post{display:grid;grid-template-columns:150px 1fr;align-items:center;}
.nd-post-stack .nd-post img{width:100%;height:100%;min-height:132px;object-fit:cover;}
.nd-post-stack .nd-post-body{padding:18px 22px;}
.nd-post-stack .nd-post-body h3{font-size:1.02rem;margin-bottom:8px;}

/* ==========================================================================
   Header and hero, rebuilt to the reference: logo left, nav through the
   middle with dot separators, actions right; then type on the left of the
   hero and arched photographs on the right over a dotted field.
   These come after the block above on purpose - they replace what it said
   about .nd-hero, and they override the theme's original ribbon header.
   ========================================================================== */
.nd-header{background:var(--panel);box-shadow:0 1px 0 var(--line);}
.nd-header-inner{width:min(1320px,calc(100% - 40px));margin:0 auto;min-height:88px;
  display:flex;align-items:center;gap:24px;}
.nd-header .nd-brand{flex:0 0 auto;font-size:16px;}
.nd-header .nd-brand img{max-height:46px;width:auto;}

.nd-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:0;
  min-width:0;}
.nd-nav a{position:relative;padding:0 22px;font-weight:600;font-size:.98rem;
  color:var(--ink);white-space:nowrap;transition:color .18s ease;}
.nd-nav a + a::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--accent);}
.nd-nav a:hover,.nd-nav a.active,.nd-nav a[aria-current="page"]{color:var(--primary);}
.nd-nav-help{font-weight:500;opacity:.75;}

.nd-header-side{flex:0 0 auto;display:flex;align-items:center;gap:14px;}
.nd-header-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 2rem;border-radius:var(--radius);background:var(--primary);color:#fff;
  font-weight:700;font-size:.95rem;transition:transform .18s ease,box-shadow .18s ease;}
.nd-header-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.nd-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;border:0;background:transparent;cursor:pointer;}
.nd-burger span{display:block;height:2px;border-radius:2px;background:var(--ink);}

/* Hero -------------------------------------------------------------------- */
.nd-hero{position:relative;overflow:visible;padding:96px 0 210px;
  background:var(--soft);min-height:0;display:block;color:var(--ink);text-align:left;}
/* The dotted field behind everything, in place of the reference's dot map. */
.nd-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size:22px 22px;color:var(--line);opacity:.85;}
.nd-hero-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px;align-items:center;
  max-width:none;}
.nd-hero-kicker{margin:0 0 26px;font-size:.95rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);}
.nd-hero h1{margin:0;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.06;
  letter-spacing:-.03em;font-weight:800;color:var(--ink);text-shadow:none;}
/* The yellow rule under the first line, drawn behind the letters. */
.nd-mark{position:relative;display:inline-block;white-space:nowrap;}
.nd-mark::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:.17em;
  background:var(--accent);z-index:-1;}
.nd-hero-lede{margin:26px 0 32px;max-width:480px;font-size:1.06rem;color:var(--muted);}

/* Two tall capsules, rounded at both ends, the second overlapping the first
   and running on past the search card - as on the reference. */
.nd-hero-art{position:relative;min-height:clamp(480px,58vw,660px);}
.nd-arch{margin:0;overflow:hidden;border-radius:999px;}
.nd-arch img{width:100%;height:100%;object-fit:cover;}
.nd-arch-lead{position:absolute;left:2%;top:-34px;width:58%;height:156%;}
.nd-arch-trail{position:absolute;right:-4%;top:56px;width:50%;height:162%;}

/* The search card overlaps the foot of the hero, as it does on the reference. */
.nd-searchband{margin-top:-132px;}
/* The capsules run on well past the card, so the first section below has to
   start clear of them rather than colliding with the rounded ends. */
.nd-searchband + .nd-section{padding-top:170px;}

/* ==========================================================================
   Footer: a photograph washed almost to grey, the promise across the left,
   address and contact to the right, small links along the foot.
   ========================================================================== */
/* The theme's own .site-footer floats the footer in from the page edges with
   a rounded card; this one is full-bleed, so both are undone. Two classes so
   it also beats the narrow-screen rule that re-states the margin. */
.site-footer.nd-footer{margin:0;border-radius:0;}
.nd-footer{position:relative;overflow:hidden;color:#fff;padding:104px 0 34px;
  background:#3f4a55;}
.nd-footer-bg{position:absolute;inset:0;z-index:0;}
.nd-footer-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  filter:grayscale(1);}
.nd-footer-bg::after{content:"";position:absolute;inset:0;background:rgba(46,56,66,.82);}
.nd-footer-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:48px;
  align-items:start;}

.nd-footer-lead h2{margin:0;max-width:15ch;font-size:clamp(1.9rem,3.2vw,2.8rem);
  line-height:1.16;letter-spacing:-.02em;color:#fff;}

.nd-footer-col h3{margin:0 0 22px;font-size:1.35rem;color:#fff;}
/* The address is stored with its own line breaks, the way it is written on
   an envelope; pre-line keeps them. */
.nd-footer-col address{font-style:normal;line-height:1.9;white-space:pre-line;
  color:rgba(255,255,255,.86);}
.nd-footer-col address::first-line{font-weight:700;color:#fff;}

.nd-footer-social{margin-top:22px;display:flex;align-items:center;gap:14px;}
/* The platform's social markup brings its own colours; here they sit on a
   dark photograph, so they are flattened to white outlines. */
.nd-footer-social a{display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:transparent !important;border:1px solid rgba(255,255,255,.5);
  color:#fff !important;transition:background .18s ease,border-color .18s ease;}
.nd-footer-social a:hover{background:var(--accent) !important;border-color:var(--accent);
  color:var(--ink) !important;}
.nd-footer-social svg{width:17px;height:17px;fill:currentColor;}
.nd-footer-social img{max-width:17px;filter:brightness(0) invert(1);}

.nd-footer-mail{display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.6rem;border-radius:var(--radius);background:var(--primary);color:#fff;
  font-weight:700;font-size:.98rem;word-break:break-all;}
.nd-footer-mail:hover{background:var(--primary-dark);}
.nd-footer-tel{display:block;margin-top:22px;font-size:clamp(1.3rem,2vw,1.75rem);
  font-weight:800;color:#fff;letter-spacing:-.01em;}

.nd-footer-bottom{position:relative;z-index:1;margin-top:86px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.88rem;color:rgba(255,255,255,.72);}
.nd-footer-links{display:flex;align-items:center;flex-wrap:wrap;}
.nd-footer-links a{position:relative;padding:0 18px 0 0;margin-right:18px;color:#fff;
  font-weight:600;}
.nd-footer-links a::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--accent);}
.nd-footer-links a:last-child{margin-right:0;padding-right:0;}
.nd-footer-links a:last-child::after{display:none;}
.nd-footer-links a:hover{color:var(--accent);}

/* A tenant that has not filled in an address, a phone or any social profile
   should not be left with a heading standing over nothing. Each empty piece
   removes itself, and a column with nothing left in it goes too. */
.nd-footer-col address:empty,
.nd-footer-social:empty,
.nd-footer-tel:empty{display:none;}
.nd-footer-col:has(address:empty):has(.nd-footer-social:empty){display:none;}

/* Policy pages: a title band, then one readable column of text. */
.nd-legal-head{background:var(--soft);padding:64px 0 56px;}
.nd-legal-head h1{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.12;
  letter-spacing:-.02em;}
.nd-legal{padding:70px 0 96px;}
.nd-legal-body{max-width:820px;}
.nd-legal-body h2{margin:52px 0 14px;font-size:1.4rem;line-height:1.3;
  letter-spacing:-.01em;}
.nd-legal-body h2:first-child{margin-top:0;}
.nd-legal-body h3{margin:32px 0 10px;font-size:1.06rem;color:var(--primary);}
.nd-legal-body p{margin:0 0 16px;color:var(--muted);line-height:1.75;}
.nd-legal-body ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:10px;}
.nd-legal-body li{position:relative;padding-left:26px;color:var(--muted);
  line-height:1.7;}
.nd-legal-body li::before{content:"";position:absolute;left:6px;top:.65em;width:7px;
  height:7px;border-radius:50%;background:var(--accent);}
.nd-legal-body a{color:var(--primary);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;word-break:break-word;}
.nd-legal-body hr{margin:44px 0;border:0;border-top:1px solid var(--line);}

/* The three reasons to book, sitting just above the footer. Icon on the left,
   the claim and one line of detail beside it. */
.nd-trust{padding:78px 0 88px;}
.nd-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.nd-trust-item{display:flex;align-items:flex-start;gap:20px;}
.nd-trust-icon{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  color:var(--primary);}
.nd-trust-icon svg{width:46px;height:46px;fill:none;stroke:currentColor;
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;}
.nd-trust-item h3{margin:0 0 8px;font-size:1.24rem;line-height:1.25;
  letter-spacing:-.01em;}
.nd-trust-item p{margin:0;color:var(--muted);font-size:1rem;line-height:1.65;}

/* Destination tiles: a photograph, the count in a pill, the name across the
   foot. The whole tile is the link. */
.nd-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.nd-tile{position:relative;display:block;overflow:hidden;border-radius:calc(var(--radius) + 2px);
  aspect-ratio:4/2.9;box-shadow:var(--shadow-soft);}
.nd-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s ease;}
.nd-tile:hover img{transform:scale(1.07);}
.nd-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0 38%,rgba(0,0,0,.62));}
.nd-tile-count{position:absolute;top:16px;right:16px;z-index:2;padding:.36rem .8rem;
  border-radius:var(--radius);background:var(--primary);color:#fff;font-size:.78rem;
  font-weight:700;}
.nd-tile-name{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;
  color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.01em;
  text-shadow:0 2px 16px rgba(0,0,0,.4);}

/* Dream vacation: the copy sits to the left of a dotted world map, and the
   three things we run sit under it as wide colour-and-photograph cards. */
.nd-dream{position:relative;padding:104px 0 110px;overflow:hidden;}
.nd-dream::before{content:"";position:absolute;top:0;right:-2%;width:56%;height:74%;
  z-index:0;background:url("../img/world-dots.svg?slug=ai-77b0001-25") no-repeat
  center/contain;opacity:.85;pointer-events:none;}
.nd-dream-inner{position:relative;z-index:1;}
.nd-dream-copy{max-width:560px;}
/* The reference sets this line in a handwritten face; ours keeps the brand
   colour and a lighter, wider setting so it still reads as a flourish. */
.nd-dream-copy .nd-dream-kicker{margin:0 0 18px;font-size:1.32rem;font-weight:700;font-style:italic;
  letter-spacing:.01em;color:var(--primary);}
.nd-dream-copy h2{margin:0 0 20px;font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;
  letter-spacing:-.02em;}
.nd-dream-copy p{margin:0 0 28px;color:var(--muted);font-size:1.04rem;}

.nd-feat-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;margin-top:76px;}

/* Each is a photograph with the name across its foot. The colour block that
   used to take half the card, with the title straddling the join, read as a
   placeholder rather than a design. The brand shows in the icon and in the
   rule that grows under the name on hover. */
.nd-feat{position:relative;display:block;height:230px;overflow:hidden;
  border-radius:calc(var(--radius) + 6px);background:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease;}
.nd-feat:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.nd-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:none;transition:transform .6s cubic-bezier(.2,.7,.25,1);}
.nd-feat:hover img{transform:scale(1.07);}
.nd-feat::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,8,7,.10) 0 36%,rgba(10,8,7,.84) 100%);}
.nd-feat-icon{position:absolute;left:22px;top:22px;transform:none;z-index:2;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(4px);
  transition:background .25s ease,border-color .25s ease;}
.nd-feat:hover .nd-feat-icon{background:var(--accent);border-color:var(--accent);}
.nd-feat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.nd-feat-name{position:absolute;left:22px;right:22px;bottom:24px;top:auto;
  transform:none;z-index:2;display:block;color:#fff;font-size:1.22rem;
  font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.45);}
.nd-feat-name::after{content:"";display:block;width:34px;height:3px;margin-top:10px;
  border-radius:3px;background:var(--accent);transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.7,.25,1);}
.nd-feat:hover .nd-feat-name::after{transform:scaleX(2.4);}

/* ==========================================================================
   Header and hero, second pass: a dark bar with an icon menu, then a
   photograph washed deep enough to read white type over, with the search
   sitting on the photograph instead of in a card below it.

   These come after the earlier header/hero block and replace what it said.
   The wash is built from the brand variables, so a tenant whose colour is
   not orange still gets a hero that belongs to them.
   ========================================================================== */
.site-header.nd-header{position:sticky;top:0;z-index:60;margin:0;border-radius:0;
  background:linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow:none;color:#fff;}
.nd-header-inner{width:min(1200px,calc(100% - 40px));margin:0 auto;min-height:66px;
  display:flex;align-items:center;gap:18px;}
.nd-header .nd-brand{flex:0 0 auto;color:#fff;}
.nd-header .nd-brand img{max-height:36px;width:auto;}

.nd-nav{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:4px;
  min-width:0;margin:0 auto;align-self:center;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);}
.nd-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:.6rem 1.15rem;border-radius:999px;font-weight:700;font-size:.9rem;
  color:#fff;white-space:nowrap;
  transition:background .16s ease,color .16s ease;}
.nd-nav a:hover{background:rgba(255,255,255,.18);}
.nd-nav a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.nd-nav a + a::before{display:none;}

/* The page you are on is underlined in the accent, as on the reference. */
.nd-nav a.active,.nd-nav a[aria-current="page"]{background:#fff;color:var(--primary-dark);}
.nd-nav a.active:hover,.nd-nav a[aria-current="page"]:hover{background:#fff;}
.nd-nav-help{opacity:.9;}

.nd-header-side{flex:0 0 auto;display:flex;align-items:center;gap:12px;color:#fff;}
.nd-header-cta{padding:.6rem 1.5rem;border-radius:999px;background:#fff;
  color:var(--primary-dark);font-weight:700;font-size:.88rem;}
.nd-header-cta:hover{background:#fff;opacity:.92;}
.nd-header-cta:hover{transform:translateY(-1px);}
.nd-burger span{background:#fff;}
.nd-header .b2c-loc-btn{color:#fff;}

/* Hero --------------------------------------------------------------------- */
.nd-hero{position:relative;overflow:visible;padding:0;background:var(--primary-deep);
  min-height:clamp(430px,52vw,520px);display:flex;align-items:center;}
.nd-hero::before{display:none;}
.nd-hero-bg{position:absolute;inset:0;z-index:0;}
.nd-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
/* Deep on the left where the words are, clearing towards the photograph. */
.nd-hero-bg::after{display:none;}
/* A breath of the brand across the whole wash so the hero belongs to the
   tenant rather than being a plain grey scrim. */
.nd-hero-bg::before{display:none;}
.nd-hero-inner{position:relative;z-index:1;display:block;padding:44px 0 52px;
  max-width:none;}

.nd-hero h1{margin:0 0 30px;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1;
  letter-spacing:-.02em;color:#fff;font-weight:800;}

/* The widget keeps its own card, sitting on the photograph. */


/* ==========================================================================
   Banner, third pass: the photograph holds the right of the frame while the
   left goes solid so white type has something to sit on; the widget is
   flattened into one row of pale pills with a round Search at the end.
   Everything here is scoped to .nd-hero so the results pages keep the widget
   they already have.
   ========================================================================== */
.nd-hero-bg img{object-position:center;}
/* Solid on the left, clearing to the photograph by two-thirds across. */
.nd-hero-bg::after{display:none;}
.nd-hero-bg::before{display:none;}

.nd-hero-inner{padding:38px 0 46px;}
.nd-hero h1{margin:0 0 22px;font-size:clamp(1.9rem,3.6vw,2.7rem);}


/* Inner-page banner, shared by the contact page and anything else that wants
   a title over a photograph. */
.nd-page-head{position:relative;overflow:hidden;padding:72px 0 78px;color:#fff;}
.nd-page-head-bg{position:absolute;inset:0;z-index:0;}
.nd-page-head-bg img{width:100%;height:100%;object-fit:cover;}
.nd-page-head-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(17,14,12,.92), rgba(17,14,12,.62));}
.nd-page-head-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg, var(--primary-dark), transparent 70%);
  opacity:.45;mix-blend-mode:multiply;}
.nd-page-head-inner{position:relative;z-index:1;}
.nd-page-head .nd-eyebrow{color:var(--accent);}
.nd-page-head h1{margin:0 0 14px;max-width:18ch;font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1.12;letter-spacing:-.02em;color:#fff;}
.nd-page-head p{margin:0;color:rgba(255,255,255,.86);font-size:1.02rem;max-width:60ch;}

/* Contact ----------------------------------------------------------------- */
.nd-contact{padding:78px 0 96px;}
.nd-contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;align-items:start;}
.nd-contact-side h2{margin:0 0 12px;font-size:1.55rem;letter-spacing:-.01em;}
.nd-contact-lede{margin:0 0 30px;color:var(--muted);}
.nd-contact-list{margin:0;padding:0;list-style:none;display:grid;gap:22px;}
.nd-contact-list li{display:flex;align-items:flex-start;gap:16px;}
.nd-contact-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:color-mix(in srgb, var(--primary) 12%, #fff);
  color:var(--primary);}
.nd-contact-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.nd-contact-list strong{display:block;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:700;}
.nd-contact-list a{color:var(--ink);font-weight:600;word-break:break-word;}
.nd-contact-list a:hover{color:var(--primary);}
.nd-contact-list address{font-style:normal;white-space:pre-line;line-height:1.6;
  color:var(--ink);font-weight:600;}
.nd-contact-list li:has(a[href="tel:"]),
.nd-contact-list li:has(a[href="mailto:"]),
.nd-contact-list li:has(address:empty){display:none;}

.nd-form{border:0;background:none;padding:0;box-shadow:none;}
.nd-form-card{background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);padding:38px;}
.nd-form-card h2{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.01em;}
.nd-form-note{margin:0 0 26px;color:var(--muted);font-size:.96rem;}
.nd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.nd-field{display:block;margin-bottom:18px;}
.nd-field label{display:block;margin-bottom:7px;font-size:.86rem;font-weight:700;
  color:var(--ink);}
.nd-field label span{font-weight:500;color:var(--muted);}
.nd-field input,.nd-field textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);font-size:.96rem;
  transition:border-color .16s ease, box-shadow .16s ease;}
.nd-field textarea{resize:vertical;min-height:150px;line-height:1.6;}
.nd-field input:focus,.nd-field textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);}
.nd-field input::placeholder,.nd-field textarea::placeholder{color:#9aa5a0;}
.nd-form-send{width:100%;margin-top:6px;}
.nd-form-small{margin:16px 0 0;color:var(--muted);font-size:.84rem;line-height:1.6;}
/* The honeypot the platform also looks for - off-screen, never focusable. */
.nd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* The flash the storefront returns after a submission. */
.nd-form-card .flash{margin:0 0 22px;padding:.9rem 1.1rem;border-radius:var(--radius);
  font-size:.92rem;font-weight:600;border:1px solid transparent;}
.nd-form-card .flash-success{background:#e7f7ec;border-color:#bfe9cd;color:#166534;}
.nd-form-card .flash-error{background:#fdeceb;border-color:#f6c9c4;color:#9b1c1c;}
.nd-form-card .flash-info{background:var(--soft);border-color:var(--line);color:var(--ink);}

/* Home only: the header sits ON the banner rather than above it. The class
   comes from index.html's own <body>, so every other page keeps the solid
   sticky bar - a transparent header over a white page would vanish. */
body.nd-home .site-header.nd-header{position:absolute;top:0;left:0;right:0;
  background:transparent;box-shadow:none;}
body.nd-home .nd-hero-inner{padding-top:104px;}

/* ── The hero line ─────────────────────────────────────────────────────────
   Two lines that rise into place on load, with the last word underscored by
   a stroke that draws itself afterwards. Everything is a transform or an
   opacity, so it costs one compositor frame and nothing reflows. */
.nd-hero-title{display:block;}
.nd-hero-line{display:block;opacity:0;transform:translateY(26px);
  animation:nd-rise .75s cubic-bezier(.2,.7,.25,1) forwards;}
.nd-hero-line--2{animation-delay:.13s;}
.nd-hero-title em{position:relative;font-style:normal;white-space:nowrap;}
/* The stroke is drawn under the last word once the words have landed. */
.nd-hero-title em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;
  height:.11em;border-radius:99px;background:#fff;transform:scaleX(0);
  transform-origin:left center;
  animation:nd-underline .55s cubic-bezier(.2,.7,.25,1) .62s forwards;}
@keyframes nd-rise{to{opacity:1;transform:translateY(0);}}
@keyframes nd-underline{to{transform:scaleX(1);}}
/* A visitor who asks for less motion gets the finished state, not the ride. */
@media (prefers-reduced-motion: reduce){
  .nd-hero-line{opacity:1;transform:none;animation:none;}
  .nd-hero-title em::after{transform:scaleX(1);animation:none;}
}

/* ── Nothing the search box opens may be clipped ───────────────────────────
   The banner cropped itself to hold the photograph, and the autocomplete,
   the calendar and the guests panel all open downward past its foot - so
   they were being cut off at the banner's edge. The crop belongs to the
   photograph, not to the section, and the search sits above whatever
   follows it. */
.nd-hero{overflow:visible;}
.nd-hero-bg{overflow:hidden;}
.nd-hero-inner{position:relative;z-index:2;}
.nd-hero-search{position:relative;z-index:3;}
.nd-hero-search .abe-search-widget,
.nd-hero-search .abe-search-widget-body,
.nd-hero-search .abe-shortcode-wrap{overflow:visible;}

/* ── Fare cards ────────────────────────────────────────────────────────────
   A photograph, then the city and its price on one line, the route beneath
   it, the dates with a small round thumbnail, and the fare condition along
   the foot. Four to a row. */
.nd-deal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.nd-deal{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);padding:14px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.nd-deal:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);
  border-color:color-mix(in srgb, var(--primary) 35%, var(--line));}
.nd-deal-img{display:block;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:16/10;}
.nd-deal-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.nd-deal:hover .nd-deal-img img{transform:scale(1.05);}

.nd-deal-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:16px 0 8px;}
.nd-deal-city{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.nd-deal-price{font-size:1.16rem;font-weight:800;color:var(--primary);white-space:nowrap;}
.nd-deal-route{display:block;font-size:.98rem;color:var(--muted);margin-bottom:12px;}
.nd-deal-route b{color:var(--ink);font-weight:700;}
/* Four cards to a row leaves each date about ninety pixels; without this the
   year drops onto a second line and the row grows a step taller. */
.nd-deal-dates{display:flex;align-items:center;gap:8px;font-size:.84rem;
  color:var(--muted);white-space:nowrap;}
.nd-deal-dates i{font-style:normal;color:var(--accent);}
.nd-deal-thumb{width:30px;height:30px;border-radius:50%;object-fit:cover;
  margin-left:auto;flex:0 0 auto;}
.nd-deal-foot{display:flex;align-items:center;gap:8px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);
  font-size:.9rem;font-weight:600;color:var(--muted);}
.nd-deal-foot svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

/* A section that follows something already generous with its own space. */
.nd-section--tight{padding-top:46px;}

/* ── Adventure, full width ─────────────────────────────────────────────────
   The photograph runs off the left edge of the screen; the words keep to the
   container so they still line up with every other section. Both halves are
   held back until the section is reached, then arrive from their own side. */
.nd-adventure{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;background:var(--soft);overflow:hidden;}
.nd-adventure-media{position:relative;min-height:clamp(420px,44vw,600px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.25,1);}
.nd-js .nd-adventure:not(.is-in) .nd-adventure-media{opacity:0;transform:translateX(-34px);}
.nd-adventure-media img{width:100%;height:100%;object-fit:cover;}
/* A figure lifted off the photograph, the way a modern hero carries a stat. */
.nd-adventure-stat{position:absolute;right:-38px;bottom:52px;z-index:2;
  display:flex;flex-direction:column;gap:2px;
  padding:18px 26px;border-radius:calc(var(--radius) + 6px);
  background:var(--panel);box-shadow:var(--shadow);}
.nd-adventure-stat strong{font-size:1.9rem;font-weight:800;line-height:1;
  color:var(--primary);}
.nd-adventure-stat span{font-size:.86rem;color:var(--muted);max-width:14ch;}
.nd-adventure-copy{display:flex;align-items:center;
  padding:clamp(56px,6vw,96px) clamp(28px,5vw,88px);
  transition:opacity .7s ease .1s,transform .7s cubic-bezier(.2,.7,.25,1) .1s;}
.nd-js .nd-adventure:not(.is-in) .nd-adventure-copy{opacity:0;transform:translateX(34px);}
.nd-adventure-copy > div{max-width:560px;}
.nd-adventure-copy h2{margin:0 0 18px;font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1.16;letter-spacing:-.02em;}
.nd-adventure-copy > div > p{margin:0 0 24px;color:var(--muted);}
/* Arrived. */
.nd-adventure.is-in .nd-adventure-media,
.nd-adventure.is-in .nd-adventure-copy{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .nd-adventure-media,.nd-adventure-copy{opacity:1;transform:none;transition:none;}
}

/* ── Currency in the header ────────────────────────────────────────────────
   The platform renders one control holding two dropdowns: currency first,
   language second. Only the currency is wanted here, so the second is hidden
   rather than the whole control switched off - switching it off is what took
   the currency away with it. White, because the bar is the brand colour. */
.nd-header .b2c-locale-switch{display:inline-flex;align-items:center;}
.nd-header .b2c-locale-switch .b2c-loc-dd + .b2c-loc-dd{display:none;}
.nd-header .b2c-loc-btn{color:#fff;font-weight:600;font-size:.86rem;
  padding:.45rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12);}
.nd-header .b2c-loc-btn:hover{background:rgba(255,255,255,.22);}
.nd-header .b2c-loc-panel{color:var(--ink);}

/* Responsive for the homepage rebuild. Kept together at the very bottom. */
@media (max-width:1024px){
  .nd-pkg-grid,.nd-svc-grid,.nd-plans{grid-template-columns:repeat(2,1fr);}
  .nd-plan-featured{grid-column:span 2;}
  .nd-split{gap:40px;}
  .nd-blog{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .nd-section{padding:66px 0;}
  .nd-hero{padding:96px 0 130px;min-height:clamp(440px,64vh,560px);}
  .nd-split{grid-template-columns:1fr;}
  .nd-split-flip .nd-split-media{order:0;}
  .nd-head-row{flex-direction:column;align-items:flex-start;}
  .nd-arrows{display:none;}
}
@media (max-width:640px){
  .nd-pkg-grid,.nd-svc-grid,.nd-plans{grid-template-columns:1fr;}
  .nd-plan-featured{grid-column:auto;}
  .nd-searchband{margin-top:-56px;}
  .nd-searchband .container{width:calc(100% - 28px);}
  /* The booking widget carries its own widths from the engine stylesheet.
     On a narrow screen those push the card past the viewport, and the body
     clips overflow, so the right edge of the card simply disappears. Nothing
     inside it is allowed to be wider than the card. */

  .nd-cta{padding:88px 0;}
  .nd-rail{grid-auto-columns:82%;}
  .nd-post-stack .nd-post{grid-template-columns:110px 1fr;}
  .nd-post-stack .nd-post img{min-height:104px;}
}

/* Header and hero, narrow screens. */
@media (max-width:1180px){
  .nd-nav a{padding:0 14px;font-size:.94rem;}
  .nd-header-cta{padding:.8rem 1.4rem;}
}
@media (max-width:1024px){
  .nd-hero-inner{grid-template-columns:1fr;gap:44px;}
  .nd-hero-art{min-height:460px;max-width:620px;}
  .nd-hero{padding:56px 0 170px;}
}
@media (max-width:900px){
  /* The middle of the bar cannot hold six links, so it becomes the drop-down
     the burger already opens. */
  .nd-header-inner{min-height:72px;gap:12px;flex-wrap:wrap;}
  .nd-nav{position:absolute;left:0;right:0;top:100%;z-index:60;display:none;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:var(--panel);box-shadow:var(--shadow-soft);padding:8px 0;}
  .nd-nav.is-open{display:flex;}
  .nd-nav a{padding:14px 22px;}
  .nd-nav a + a::before{display:none;}
  .nd-header{position:sticky;top:0;}
  .nd-header-inner{position:relative;}
  .nd-nav{width:100%;}
}
@media (min-width:901px){
  .nd-burger{display:none !important;}
}
/* The theme's own .menu-toggle rule hides the button outright and this one
   carries the same weight, so on a phone it has to say so plainly. */
@media (max-width:900px){
  .nd-header .nd-burger{display:inline-flex !important;background:transparent;
    border-radius:8px;padding:0 10px;}
  .nd-header .nd-burger span{margin:0;background:var(--ink) !important;height:3px !important;width:24px;}
}
@media (max-width:640px){
  .nd-header-inner{width:calc(100% - 28px);}
  .nd-header-cta{padding:.72rem 1.1rem;font-size:.88rem;}
  .nd-hero{padding:40px 0 128px;}
  .nd-hero-art{min-height:340px;}
  .nd-arch-lead{left:0;top:-16px;width:58%;height:118%;}
  .nd-arch-trail{width:48%;top:34px;height:120%;}
  .nd-searchband{margin-top:-84px;}
}

/* Footer, narrow screens. */
@media (max-width:1024px){
  .nd-footer-inner{grid-template-columns:1fr 1fr;gap:40px;}
  .nd-footer-lead{grid-column:1 / -1;}
  .nd-footer-lead h2{max-width:22ch;}
}
@media (max-width:640px){
  .nd-footer{padding:66px 0 28px;}
  .nd-footer-inner{grid-template-columns:1fr;gap:34px;}
  .nd-footer-bottom{margin-top:52px;flex-direction:column;align-items:flex-start;}
  .nd-footer-mail{width:100%;}
}

/* Policy pages, narrow screens. */
@media (max-width:640px){
  .nd-legal-head{padding:44px 0 38px;}
  .nd-legal{padding:46px 0 64px;}
  .nd-legal-body h2{margin-top:38px;font-size:1.22rem;}
}

/* The trust band, narrow screens. */
@media (max-width:900px){
  .nd-trust-grid{grid-template-columns:1fr;gap:30px;}
  .nd-trust{padding:56px 0 62px;}
}

/* Destination tiles, narrow screens. */
@media (max-width:1024px){
  .nd-tiles{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:640px){
  .nd-tiles{grid-template-columns:1fr;}
  .nd-tile-name{font-size:1.4rem;bottom:20px;}
}

/* Dream vacation, narrow screens. */
@media (max-width:1024px){
  .nd-feat-grid{grid-template-columns:1fr;gap:18px;margin-top:52px;}
  .nd-dream::before{width:100%;right:0;top:auto;bottom:26%;height:52%;opacity:.5;}
}
@media (max-width:640px){
  .nd-dream{padding:62px 0 70px;}
  .nd-feat{height:190px;}
  .nd-feat-name{font-size:1.08rem;}
}

/* Header and hero, second pass - narrow screens. */
@media (max-width:1180px){
  .nd-nav a{padding:0 10px;font-size:.85rem;}
  .nd-nav a span{display:none;}
}
@media (max-width:1024px){
  .nd-nav a svg{display:none;}
}
@media (max-width:900px){
  .nd-nav{position:absolute;left:0;right:0;top:100%;z-index:60;display:none;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    border-radius:0;backdrop-filter:none;gap:0;
    background:var(--primary-dark);box-shadow:var(--shadow-soft);padding:6px 0;}
  .nd-nav a{border-radius:0;}
  .nd-nav.is-open{display:flex;}
  .nd-nav a{min-height:48px;padding:0 22px;}
  .nd-nav a svg{display:inline-block;}
  .nd-nav a.active::after,.nd-nav a[aria-current="page"]::after{left:0;right:auto;
    top:0;bottom:0;width:3px;height:auto;border-radius:0 3px 3px 0;}
  .nd-hero{min-height:0;}
  .nd-hero-inner{padding:30px 0 36px;}
}
@media (max-width:640px){
  .nd-header-inner{width:calc(100% - 24px);min-height:58px;gap:8px;}
  .nd-header-cta{padding:.5rem 1rem;font-size:.82rem;}
  .nd-crumbs{margin-bottom:16px;font-size:.8rem;}
  .nd-hero h1{margin-bottom:22px;}
}

/* Banner, third pass - narrow screens. The round button and the single row
   only make sense with room; on a phone the widget goes back to stacking. */
@media (max-width:1100px){
}
@media (max-width:900px){
  .nd-hero-bg::after{display:none;}
  .nd-hero-bg::before{display:none;}
}

/* Contact page, narrow screens. */
@media (max-width:960px){
  .nd-contact-grid{grid-template-columns:1fr;gap:38px;}
}
@media (max-width:640px){
  .nd-page-head{padding:48px 0 52px;}
  .nd-contact{padding:44px 0 62px;}
  .nd-form-card{padding:24px;}
  .nd-form-row{grid-template-columns:1fr;gap:0;}
}

/* Home header over the banner, narrow screens. The drop-down still needs a
   solid ground of its own once it opens. */
@media (max-width:900px){
  body.nd-home .nd-hero-inner{padding-top:88px;}
  body.nd-home .nd-nav{background:var(--primary-dark);}
}

/* Fare cards, narrow screens. */
@media (max-width:1100px){ .nd-deal-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .nd-deal-grid{grid-template-columns:1fr;} }

/* Adventure, narrow screens - the photograph goes back on top. */
@media (max-width:900px){
  .nd-adventure{grid-template-columns:1fr;}
  .nd-adventure-media{min-height:280px;}
  .nd-js .nd-adventure:not(.is-in) .nd-adventure-media,
  .nd-js .nd-adventure:not(.is-in) .nd-adventure-copy{transform:translateY(24px);}
  .nd-adventure-stat{right:20px;bottom:-26px;padding:14px 20px;}
}


/* ══════════════════════════════════════════════════════════════════════
   TripNow front office - reference layout pass.

   Built against the ajala.ng reference the operator supplied: a white
   header over a photographic hero, the search sitting on the photo as a
   white card, an airline / follow-us trust strip directly under it, a
   Holiday Deals band on a photograph, and a join-us band before the
   footer.

   The COLOURS are TripNow's own, not the reference's. Everything here
   pulls --tn-brand from the tenant's Branding settings, so this file is
   layout, not identity - change the brand colour in Settings and the page
   follows. Appended after the theme's own CSS so these rules win.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --tn-brand: var(--brand-primary, #fb6903);
  --tn-brand-dk: color-mix(in srgb, var(--tn-brand) 78%, #000);
  --tn-amber: #f7b32b;
  --tn-ink: #16202c;
  --tn-muted: #6b7683;
  --tn-line: #e8ecf1;
  /* ONE measure for the whole site. Every container below is this wide and
     no wider, centred, with the same gutter either side - so the header, the
     hero, the sections, the results and the footer all share one left edge
     and one right edge. Change these two values and the whole page follows. */
  --tn-max: 1520px;
  --tn-gutter: clamp(1rem, 2.5vw, 2.5rem);
}

/* ── Header: white, and off the hero ─────────────────────────────── */
body.nd-home .tn-header,
.tn-header{
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--tn-line);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.tn-header .nd-header-inner{
  max-width: 1220px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem 1.25rem;
}
.tn-header .nd-brand{ flex: 0 0 auto; display: flex; align-items: center; }
.tn-header .nd-brand img{ max-height: 42px; width: auto; }
.tn-header .tn-nav{
  display: flex; align-items: center; gap: 1.6rem;
  margin: 0 auto 0 1rem;
  background: none; padding: 0; border: 0; box-shadow: none;
}
.tn-header .tn-nav a{
  display: inline-flex; align-items: center;
  padding: .35rem 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--tn-ink); font-size: .93rem; font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tn-header .tn-nav a svg{ display: none; }   /* the reference nav is words only */
.tn-header .tn-nav a:hover,
.tn-header .tn-nav a.active{ color: var(--tn-brand); border-bottom-color: var(--tn-brand); }
.tn-header .nd-header-side{ display: flex; align-items: center; gap: .75rem; }
.tn-header .tn-cta{
  display: inline-flex; align-items: center;
  padding: .6rem 1.35rem; border-radius: 999px;
  background: var(--tn-brand); color: #fff;
  font-size: .88rem; font-weight: 700; text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.tn-header .tn-cta:hover{ background: var(--tn-brand-dk); transform: translateY(-1px); }

/* ── Hero: the photograph carries it, the search floats on top ───── */
body.nd-home .nd-hero{ padding: 0; background: #0d1620; }
body.nd-home .nd-hero-bg::after{
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(9,16,24,.78) 0%, rgba(9,16,24,.42) 48%, rgba(9,16,24,.18) 100%);
}
body.nd-home .nd-hero-inner{
  position: relative; z-index: 2;
  max-width: 1220px; margin: 0 auto;
  padding: 4.5rem 1.25rem 3.25rem;
}
body.nd-home .nd-hero-title{
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.16;
  letter-spacing: -.02em; color: #fff;
  text-wrap: balance;
}
body.nd-home .nd-hero-title em{ font-style: normal; color: var(--tn-amber); }
body.nd-home .tn-hero-sub{
  margin: 0 0 1.9rem;
  font-size: 1rem; color: rgba(255,255,255,.88);
}
/* No wrapper on the search: the widget brings its own card, and painting a
   second white box around it gave the hero a card inside a card. */

/* ── Trust strip: follow us + the airlines we sell ───────────────── */
.tn-strip{ background: #f6f8fa; border-bottom: 1px solid var(--tn-line); }
.tn-strip-inner{
  max-width: 1220px; margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.tn-follow{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--tn-line);
}
.tn-follow span{ font-size: .82rem; font-weight: 700; color: var(--tn-ink); }
.tn-follow a{
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tn-ink); color: #fff; text-decoration: none;
}
.tn-follow a svg{ width: 13px; height: 13px; fill: currentColor; }
.tn-airlines{
  margin-left: auto;
  display: flex; align-items: center; gap: 2.2rem; flex-wrap: wrap;
}
.tn-airlines img{ height: 26px; width: auto; opacity: .72; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.tn-airlines img:hover{ opacity: 1; filter: none; }

/* ── Holiday deals: a package offer on a photograph ──────────────── */
.tn-holiday{ position: relative; isolation: isolate; padding: 3.5rem 0; color: #fff; }
.tn-holiday::before{
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--tn-holiday-img);
  background-size: cover; background-position: center;
}
.tn-holiday::after{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(9,16,24,.86) 0%, rgba(9,16,24,.55) 55%, rgba(9,16,24,.3) 100%);
}
.tn-holiday-inner{ max-width: 1220px; margin: 0 auto; padding: 0 1.25rem; }
.tn-holiday h2{
  margin: 0 0 .35rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #fff;
}
.tn-holiday h2 em{ font-style: normal; color: var(--tn-amber); }
.tn-holiday-place{
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1.6rem; font-size: .95rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.92);
}
.tn-holiday-place svg{ width: 18px; height: 18px; fill: var(--tn-brand); }
.tn-holiday-card{
  max-width: 430px;
  background: rgba(9,16,24,.55);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 14px; padding: 1.25rem 1.35rem;
}
.tn-holiday-card h3{ margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #fff; }
.tn-stars{ display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .85rem; }
.tn-stars svg{ width: 15px; height: 15px; fill: var(--tn-amber); }
.tn-stars small{ margin-left: .4rem; font-size: .8rem; color: rgba(255,255,255,.75); }
.tn-holiday-meta{ display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; font-size: .85rem; color: rgba(255,255,255,.86); }
.tn-holiday-price{ display: block; margin-bottom: 1rem; font-size: 1.55rem; font-weight: 800; color: #fff; }
.tn-holiday-btn{
  display: inline-block; padding: .7rem 1.5rem; border-radius: 8px;
  background: var(--tn-brand); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
}
.tn-holiday-btn:hover{ background: var(--tn-brand-dk); }

/* ── Join us band ────────────────────────────────────────────────── */
.tn-join{ background: #fff; border-top: 1px solid var(--tn-line); }
.tn-join-inner{
  max-width: 1220px; margin: 0 auto; padding: 3rem 1.25rem;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center;
}
.tn-join h2{ margin: 0 0 .6rem; font-size: 1.5rem; font-weight: 800; color: var(--tn-ink); }
.tn-join p{ margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.7; color: var(--tn-muted); max-width: 46ch; }
.tn-join-actions{ display: flex; gap: .7rem; flex-wrap: wrap; }
.tn-join-actions a{
  display: inline-block; padding: .7rem 1.6rem; border-radius: 8px;
  font-size: .9rem; font-weight: 700; text-decoration: none;
}
.tn-join-primary{ background: var(--tn-brand); color: #fff; }
.tn-join-primary:hover{ background: var(--tn-brand-dk); }
.tn-join-ghost{ background: #fff; color: var(--tn-ink); border: 1px solid var(--tn-line); }
.tn-join-ghost:hover{ border-color: var(--tn-brand); color: var(--tn-brand); }
.tn-join-map{ opacity: .5; }
.tn-join-map svg{ width: 100%; height: auto; fill: #cfd6de; }

@media (max-width: 900px){
  .tn-header .tn-nav{
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--tn-line);
    padding: .5rem 1.25rem 1rem; margin: 0;
    display: none;
  }
  .tn-header .nd-header-inner.is-open .tn-nav{ display: flex; }
  .tn-header .tn-nav a{ width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--tn-line); }
  .tn-strip-inner{ justify-content: center; }
  .tn-airlines{ margin-left: 0; gap: 1.4rem; justify-content: center; }
  .tn-airlines img{ height: 20px; }
  .tn-join-inner{ grid-template-columns: 1fr; }
  .tn-join-map{ display: none; }
  body.nd-home .nd-hero-inner{ padding: 2.75rem 1.25rem 2.25rem; }
}

/* ── Specificity pass ─────────────────────────────────────────────────
   The theme already carries a TripNow header rule - .site-header.nd-header
   with a brand gradient - which outweighs a single .tn-header class. These
   restate the white header at the same weight, and later in the file, so
   they land. Same story for the nav pill, which the gradient header needed
   and a white one does not. */
body .site-header.tn-header{
  background: #fff;
  color: var(--tn-ink);
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
  border-bottom: 1px solid var(--tn-line);
}
body .site-header.tn-header .nd-header-inner{
  width: min(1220px, calc(100% - 40px)); min-height: 74px;
}
body .site-header.tn-header .nd-nav{
  background: none; padding: 0; backdrop-filter: none;
  gap: 1.6rem; margin: 0 auto 0 1.25rem; justify-content: flex-start;
}
body .site-header.tn-header .nd-nav a{
  padding: .35rem 0; gap: 0; border-radius: 0;
  color: var(--tn-ink); background: none;
}
body .site-header.tn-header .nd-nav a + a::before{ display: none; }
body .site-header.tn-header .nd-nav a:hover,
body .site-header.tn-header .nd-nav a.active{
  color: var(--tn-brand); background: none;
  border-bottom: 2px solid var(--tn-brand);
}
body .site-header.tn-header .nd-brand,
body .site-header.tn-header .b2c-loc-btn,
body .site-header.tn-header .b2c-loc-btn *{ color: var(--tn-ink); }
body .site-header.tn-header .b2c-loc-btn{ background: #fff; border-color: var(--tn-line); }
body .site-header.tn-header .nd-brand img{ max-height: 42px; }
body .site-header.tn-header .nd-burger span{ background: var(--tn-ink); }
body .site-header.tn-header .nd-header-cta{
  padding: .62rem 1.4rem; border-radius: 999px; background: var(--tn-brand);
}

/* Let the photograph carry the hero. The theme fills it with --primary-deep
   and our own near-black was doing the same job twice; the scrim over the
   image is what makes the words readable, not a second flat colour. */
body.nd-home .nd-hero{ background: #12202c; min-height: clamp(460px, 54vw, 560px); }
body.nd-home .nd-hero-bg img{ object-position: center 45%; }

/* The theme's own TripNow pass paints this bar with a brand gradient and wins
   on load order in the browser even where the cascade says otherwise, so the
   white header states itself outright. Kept to the header only. */
body .site-header.tn-header{ background: #fff !important; background-image: none !important; }
body .site-header.tn-header .nd-nav{ background: none !important; }
body .site-header.tn-header .nd-nav a{ color: var(--tn-ink) !important; }
body .site-header.tn-header .nd-nav a:hover,
body .site-header.tn-header .nd-nav a.active{ color: var(--tn-brand) !important; }
body .site-header.tn-header .b2c-loc-btn,
body .site-header.tn-header .b2c-loc-btn span{ color: var(--tn-ink) !important; }

/* ── Hero: room to breathe ────────────────────────────────────────────
   The headline, the line under it and the search card were stacked with
   barely a gap between them, so the words sat on the card. The band is
   taller and each part gets its own space. */
body.nd-home .nd-hero{ min-height: clamp(560px, 62vw, 680px) !important; }
body.nd-home .nd-hero-inner{ padding: 6rem var(--tn-gutter) 4rem !important; }
body.nd-home .nd-hero-title{ margin: 0 0 1rem !important; line-height: 1.2 !important; }
body.nd-home .tn-hero-sub{ margin: 0 0 2.6rem !important; font-size: 1.05rem !important; }

/* ── Mobile app: coming soon ─────────────────────────────────────────── */
.tn-app{ background: #0f1b26; color: #fff; overflow: hidden; }
.tn-app-inner{
  max-width: 1220px; margin: 0 auto; padding: 3.5rem 1.25rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center;
}
.tn-app-flag{
  display: inline-block; margin-bottom: .9rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tn-amber);
}
.tn-app h2{ margin: 0 0 .8rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: #fff; }
.tn-app p{ margin: 0 0 .9rem; font-size: .97rem; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 52ch; }
.tn-app-note{ color: rgba(255,255,255,.6) !important; font-size: .88rem !important; }
.tn-app-actions{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.tn-app-primary{
  display: inline-block; padding: .8rem 1.7rem; border-radius: 999px;
  background: var(--tn-brand); color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none;
}
.tn-app-primary:hover{ background: var(--tn-brand-dk); }
.tn-app-stores{ display: inline-flex; gap: .5rem; }
/* Not store badges: the app is not there to download, and a badge that does
   nothing is a broken promise. These are labels. */
.tn-app-store{
  padding: .55rem 1rem; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.3);
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.62);
}
.tn-app-art{ display: flex; justify-content: center; }
.tn-phone{
  position: relative; width: 210px; height: 400px;
  border-radius: 30px; padding: 12px;
  background: #1b2b39; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}
.tn-phone-notch{
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 15px; border-radius: 0 0 12px 12px; background: #0f1b26;
}
.tn-phone-screen{
  height: 100%; border-radius: 20px; background: #f4f7fa;
  padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 9px;
}
.tn-phone-bar{ height: 30px; border-radius: 8px; background: var(--tn-brand); opacity: .9; }
.tn-phone-card{ height: 86px; border-radius: 10px; background: #dde5ec; }
.tn-phone-card--sm{ height: 58px; }
.tn-phone-line{ height: 9px; border-radius: 5px; background: #e6ecf1; }
.tn-phone-line--short{ width: 62%; }

/* ── About us ─────────────────────────────────────────────────────────── */
.tn-about-hero{ background: #0f1b26; color: #fff; }
.tn-about-hero-inner{ max-width: 900px; margin: 0 auto; padding: 4.5rem 1.25rem 3.5rem; }
.tn-about-eyebrow{
  margin: 0 0 .7rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tn-amber);
}
.tn-about-hero h1{
  margin: 0 0 1rem; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -.02em; color: #fff; text-wrap: balance;
}
.tn-about-lede{ margin: 0; font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,.82); }
.tn-about-body{ background: #fff; }
.tn-about-grid{
  max-width: 1120px; margin: 0 auto; padding: 3.5rem 1.25rem;
  display: grid; grid-template-columns: 1.5fr .9fr; gap: 3rem; align-items: start;
}
.tn-about-copy h2{ margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 800; color: var(--tn-ink); }
.tn-about-copy h2 + p{ margin-top: 0; }
.tn-about-copy h2:not(:first-child){ margin-top: 2.2rem; }
.tn-about-copy p{ margin: 0 0 1rem; font-size: 1rem; line-height: 1.8; color: #46525f; }
.tn-about-facts{
  background: #f6f8fa; border: 1px solid var(--tn-line); border-radius: 14px; padding: 1.5rem;
}
.tn-about-facts h3{ margin: 0 0 1rem; font-size: 1rem; font-weight: 800; color: var(--tn-ink); }
.tn-about-facts dl{ margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.tn-about-facts dt{ font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tn-muted); }
.tn-about-facts dd{ margin: .2rem 0 0; font-size: .95rem; color: var(--tn-ink); }
.tn-about-facts a{ color: var(--tn-brand); text-decoration: none; }
.tn-about-facts a:hover{ text-decoration: underline; }
.tn-about-cta{
  display: inline-block; padding: .7rem 1.5rem; border-radius: 8px;
  background: var(--tn-brand); color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none;
}
.tn-about-cta:hover{ background: var(--tn-brand-dk); }
.tn-about-values{ background: #f6f8fa; border-top: 1px solid var(--tn-line); }
.tn-about-values-inner{
  max-width: 1120px; margin: 0 auto; padding: 3rem 1.25rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.tn-about-values article{ background: #fff; border: 1px solid var(--tn-line); border-radius: 14px; padding: 1.4rem; }
.tn-about-values h3{ margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 800; color: var(--tn-ink); }
.tn-about-values p{ margin: 0; font-size: .92rem; line-height: 1.7; color: var(--tn-muted); }

@media (max-width: 900px){
  .tn-app-inner{ grid-template-columns: 1fr; }
  .tn-app-art{ display: none; }
  .tn-about-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .tn-about-values-inner{ grid-template-columns: 1fr; }
  body.nd-home .nd-hero-inner{ padding: 3.5rem var(--tn-gutter) 2.5rem !important; }
  body.nd-home .nd-hero{ min-height: 0 !important; }
}

/* ── Full width ───────────────────────────────────────────────────────
   The theme centres everything in a 1200-1320px column, which on a wide
   monitor left the hero copy floating in the middle of the photograph and
   a dead strip of orange down the right-hand side. The page now runs to
   the edges, with a gutter wide enough that nothing touches the glass.

   One column width, stated once, so the header, the hero, the strips and
   every section keep the same left edge as each other. */
/* Every container on the site, every page: same measure, same gutter,
   centred. This used to run everything edge to edge, which on a wide monitor
   left the hero copy stranded in the middle of the photograph and the fare
   cards a screen apart. */
.container,
body .site-header.tn-header .nd-header-inner,
body.nd-home .nd-hero-inner,
.tn-strip-inner,
.tn-holiday-inner,
.tn-app-inner,
.tn-join-inner,
.tn-about-body .tn-about-grid,
.tn-about-values-inner{
  width: 100% !important;
  max-width: var(--tn-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--tn-gutter) !important;
  padding-right: var(--tn-gutter) !important;
}
/* The about hero's measure is deliberate - a headline that runs the whole
   width of a 27-inch monitor is unreadable - so it keeps its column and
   only moves its left edge to line up with everything else. */
.tn-about-hero-inner{
  width: 100% !important; max-width: var(--tn-max) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--tn-gutter) !important;
  padding-right: var(--tn-gutter) !important;
}
.tn-about-hero h1,
.tn-about-lede{ max-width: 60ch; }

/* The engine's widget centres its own panel inside a 1200px measure
   (.abe-search-widget-body{max-width:1200px;margin:auto}). In a full-width
   hero that left the panel floating in from the left while its tabs, which
   are left-aligned, stayed at the gutter - the tabs and the box they open
   were no longer the same object. The panel takes the container's width. */
body.nd-home .nd-hero-search .abe-search-widget-body{
  /* The widget runs the width of the page, like everything else on it. The
     engine's own 1200px measure would otherwise stop the panel short of the
     right gutter while the header and the sections beside it carried on. */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* About: the services list. Four things the company actually sells, each with
   a sentence - a bulleted list would have run them together. */
.tn-about-intro{ font-size: 1.05rem !important; line-height: 1.8 !important; color: #46525f; margin: 0 0 2rem !important; }
.tn-about-intro strong{ color: var(--tn-ink); }
.tn-about-services{
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.tn-about-services li{
  background: #f6f8fa; border: 1px solid var(--tn-line);
  border-radius: 12px; padding: 1.15rem 1.25rem;
}
.tn-about-services h3{ margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; color: var(--tn-ink); }
.tn-about-services p{ margin: 0 !important; font-size: .92rem !important; line-height: 1.7 !important; color: var(--tn-muted) !important; }
@media (max-width: 760px){
  .tn-about-services{ grid-template-columns: 1fr; }
}

/* Hero video, over the still. It is decoration: it sits behind the scrim and
   the copy, it never carries information, and if the file is missing the
   element simply paints nothing and the photograph underneath shows through. */
body.nd-home .nd-hero-bg .tn-hero-video{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  border: 0; background: transparent;
  /* Fades up from the dark ground, not from a photograph - see below. */
  opacity: 0; transition: opacity .5s ease;
}
body.nd-home .nd-hero-bg .tn-hero-video.is-playing{ opacity: 1; }

/* No still before the video. The photograph used to sit under it and show
   for the second or so the video took to start, which read as the hero
   changing its mind. The band is the brand dark until the video is playing,
   and then it is the video - one picture, not two.
   The image stays in the markup for the one case below where there is no
   video to show. */
body.nd-home .nd-hero-bg > img{ display: none; }
body.nd-home .nd-hero{ background: linear-gradient(160deg, #12202c 0%, #0b1520 100%); }
/* Anyone who has asked their system to stop moving pictures gets the still. */
@media (prefers-reduced-motion: reduce){
  /* Someone who has asked their system to stop moving pictures gets the
     photograph instead - for them there is no video, so this is the hero,
     not a placeholder in front of one. */
  body.nd-home .nd-hero-bg .tn-hero-video{ display: none; }
  body.nd-home .nd-hero-bg > img{ display: block; }
}

/* The follow row renders from the tenant's own social settings
   ({{social_links}}), so a different PID shows a different set - and a PID
   with none shows just the label. The renderer inlines 36px brand-coloured
   circles; inside this pill they want to be smaller. */
.tn-follow a{
  width: 26px !important; height: 26px !important;
  margin: 0 !important;
}
.tn-follow a svg{ width: 13px !important; height: 13px !important; }
.tn-follow a:hover{ transform: translateY(-1px); }
/* No links configured yet: the bare word "Follow us" is not worth a pill. */
.tn-follow:not(:has(a)){ display: none; }

/* ── Fare cards, reference design ─────────────────────────────────────
   Photograph with a badge in its corner, then a rounded panel that rides
   up over the bottom of it, the trip named in bold, the place under it,
   tags, and a foot with the price on the left and the dates on the right.

   The reference this is built from is a tours grid with star ratings. There
   are no ratings on a held fare and inventing them would be a lie printed
   next to a price, so that line carries what a flight actually has: the
   trip type and cabin. */
.tn-fare-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tn-fare{
  display: block; position: relative;
  border-radius: 16px; background: transparent; text-decoration: none;
  transition: transform .18s ease;
}
.tn-fare:hover{ transform: translateY(-3px); }
.tn-fare-media{ display: block; position: relative; border-radius: 16px; overflow: hidden; }
.tn-fare-media img{ display: block; width: 100%; height: 230px; object-fit: cover; }
.tn-fare-badge{
  position: absolute; top: 12px; right: 12px;
  padding: .4rem .85rem; border-radius: 8px;
  background: #fff; color: #dc2626;
  font-size: .78rem; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(15,23,42,.45);
}
/* Rides up over the photograph, as in the reference. */
.tn-fare-body{
  display: block; position: relative; z-index: 2;
  margin: -46px 12px 0; padding: 1rem 1.1rem 1.15rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(15,23,42,.4);
}
.tn-fare-carrier{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--tn-brand);
}
.tn-fare-carrier svg{ width: 15px; height: 15px; fill: var(--tn-brand); }
.tn-fare-title{
  display: block; margin: .45rem 0 .5rem;
  font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--tn-ink);
}
.tn-fare-place{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: #5c6773;
}
.tn-fare-place svg{ width: 14px; height: 14px; fill: #7b8794; }
.tn-fare-tags{ display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.tn-tag{
  font-style: normal; padding: .3rem .7rem; border-radius: 6px;
  font-size: .76rem; font-weight: 700;
}
.tn-tag--a{ background: var(--tn-brand); color: #fff; }
.tn-tag--b{ background: #fde8e8; color: #b3261e; }
.tn-fare-foot{
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid #e8edf2;
}
.tn-fare-price{ font-size: .84rem; color: #5c6773; }
.tn-fare-price b{ font-size: 1.05rem; font-weight: 800; color: var(--tn-brand); }
.tn-fare-when{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: #5c6773; white-space: nowrap;
}
.tn-fare-when svg{ width: 14px; height: 14px; }

@media (max-width: 1440px){ .tn-fare-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px){ .tn-fare-grid{ grid-template-columns: 1fr; } }

/* The panel was already full width but the fields inside it stopped short:
   the engine caps its own search BAR at 1200px and centres it
   (#adivaha-booking-engine .abe-search-bar{max-width:1200px;margin:0 auto}),
   which left a slab of empty white to the right of the Search button. */
body.nd-home .nd-hero-search #adivaha-booking-engine .abe-search-bar{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Popular destinations (replaces the adventure band) ───────────────
   Photograph left with a quote over its lower corner, copy right: a pill,
   the headline, a paragraph, two credentials side by side above a rule,
   and the call to action. */
.tn-popular{ background: #fff; }
.tn-popular-inner{
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center;
  max-width: var(--tn-max); margin: 0 auto;
  padding: 4rem var(--tn-gutter);
}
.tn-popular-media{ position: relative; }
.tn-popular-media img{
  display: block; width: 100%; height: 520px; object-fit: cover;
  border-radius: 22px;
}
.tn-popular-quote{
  position: absolute; left: 0; bottom: 28px; margin: 0;
  max-width: 340px; padding: 1.15rem 1.25rem;
  background: rgba(12, 20, 28, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 14px; color: #fff;
}
.tn-popular-quote blockquote{
  margin: 0 0 .8rem; font-size: .95rem; line-height: 1.6; font-weight: 600;
}
.tn-popular-quote figcaption{ display: flex; flex-direction: column; gap: .15rem; }
.tn-popular-quote-who{ font-size: .85rem; font-weight: 700; }
.tn-popular-quote-note{ font-size: .78rem; color: rgba(255,255,255,.7); }

.tn-popular-pill{
  display: inline-block; margin-bottom: 1.1rem;
  padding: .45rem 1.1rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tn-brand) 35%, #fff);
  background: color-mix(in srgb, var(--tn-brand) 8%, #fff);
  color: var(--tn-brand);
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.tn-popular h2{
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em; color: var(--tn-ink);
  text-wrap: balance;
}
.tn-popular-copy > p{
  margin: 0 0 1.8rem; font-size: 1rem; line-height: 1.8; color: #56626f; max-width: 56ch;
}
.tn-popular-facts{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  padding: 1.5rem 0; margin-bottom: 1.8rem;
  border-top: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line);
}
.tn-popular-fact{ display: flex; align-items: flex-start; gap: .8rem; }
.tn-popular-fact + .tn-popular-fact{ border-left: 1px solid var(--tn-line); padding-left: 1.5rem; }
.tn-popular-fact-ico{ flex: 0 0 auto; color: var(--tn-ink); }
.tn-popular-fact-ico svg{ width: 30px; height: 30px; }
.tn-popular-fact strong{ display: block; font-size: .98rem; font-weight: 800; color: var(--tn-ink); }
.tn-popular-fact span{ display: block; margin-top: .15rem; font-size: .85rem; color: var(--tn-muted); }
.tn-popular-cta{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  background: var(--tn-brand); color: #fff;
  font-size: .95rem; font-weight: 700; text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.tn-popular-cta svg{ width: 18px; height: 18px; }
.tn-popular-cta:hover{ background: var(--tn-brand-dk); transform: translateX(2px); }

@media (max-width: 980px){
  .tn-popular-inner{ grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem; }
  .tn-popular-media img{ height: 340px; }
  .tn-popular-quote{ position: static; max-width: none; margin-top: -40px; }
  .tn-popular-facts{ grid-template-columns: 1fr; gap: 1rem; }
  .tn-popular-fact + .tn-popular-fact{ border-left: 0; padding-left: 0; }
}

/* The tab icons carry their colour as a stroke attribute on the SVG - a
   different hue per product (hotel purple, flight blue, and so on). That is
   readable on the white inactive tabs and nearly invisible on the active one,
   which is now filled with the brand orange. CSS beats a presentation
   attribute, so the active tab's icon simply goes white with its label. */
body.nd-home .nd-hero-search .abe-search-tab.active svg,
body.nd-home .nd-hero-search .abe-search-tab.active svg *{
  stroke: #fff !important;
}
body.nd-home .nd-hero-search .abe-search-tab.active svg [fill]:not([fill="none"]){
  fill: #fff !important;
}

/* ── Holiday deal: an offer sheet, not a third photo band ─────────────
   Terms on the left where they can be read against a light ground, the
   trip on the right as three pictures. */
.tn-deal{ background: #f6f8fa; border-top: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line); }
.tn-deal-inner{
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  padding: 4rem clamp(1.25rem, 3vw, 3.5rem);
}
.tn-deal-eyebrow{
  margin: 0 0 .7rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tn-brand);
}
.tn-deal h2{
  margin: 0 0 .9rem; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800;
  line-height: 1.18; letter-spacing: -.02em; color: var(--tn-ink);
}
.tn-deal h2 em{ font-style: normal; color: var(--tn-brand); }
.tn-deal-lede{ margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.75; color: #56626f; max-width: 52ch; }
.tn-deal-list{ list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.tn-deal-list li{
  display: flex; align-items: flex-start; gap: .8rem;
  font-size: .95rem; line-height: 1.6; color: #46525f;
}
.tn-deal-list span{
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tn-brand); color: #fff; font-size: .76rem; font-weight: 800;
}
.tn-deal-buy{
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid #e2e8ee;
}
.tn-deal-price span{ display: block; font-size: .8rem; color: var(--tn-muted); }
.tn-deal-price strong{ display: block; font-size: 1.8rem; font-weight: 800; color: var(--tn-ink); letter-spacing: -.02em; }
.tn-deal-price small{ display: block; font-size: .78rem; color: var(--tn-muted); }
.tn-deal-actions{ display: flex; flex-direction: column; gap: .5rem; }
.tn-deal-btn{
  display: inline-block; padding: .85rem 1.8rem; border-radius: 999px;
  background: var(--tn-brand); color: #fff; font-size: .93rem; font-weight: 700;
  text-decoration: none; text-align: center;
}
.tn-deal-btn:hover{ background: var(--tn-brand-dk); }
.tn-deal-link{ font-size: .85rem; font-weight: 600; color: var(--tn-ink); text-decoration: none; }
.tn-deal-link:hover{ color: var(--tn-brand); }

/* Three pictures: the long one carries the trip, the two under it name the
   other two stops. */
.tn-deal-gallery{
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px; gap: 14px;
}
.tn-deal-shot{ position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.tn-deal-shot--main{ grid-column: 1 / -1; }
.tn-deal-shot img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.tn-deal-shot figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem .9rem .7rem;
  background: linear-gradient(180deg, rgba(9,16,24,0) 0%, rgba(9,16,24,.8) 100%);
  color: #fff; font-size: .82rem; font-weight: 700;
}

@media (max-width: 980px){
  .tn-deal-inner{ grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem; }
  .tn-deal-gallery{ grid-template-rows: 200px 140px; }
}

/* ── App band, reference layout ───────────────────────────────────────
   A photograph across the whole width with a scrim over it, the phone
   standing proud of the band on the left, the invitation on the right.
   These rules come after the first app-band block and replace what it
   said about layout; the phone mock-up itself is reused as it was. */
.tn-app{
  position: relative; isolation: isolate;
  background: #0f1b26; overflow: hidden;
}
.tn-app::before{
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?auto=format&fit=crop&w=1900&q=70');
  background-size: cover; background-position: center 35%;
}
.tn-app::after{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,17,24,.94) 0%, rgba(10,17,24,.78) 45%, rgba(10,17,24,.55) 100%);
}
.tn-app-inner{
  display: grid; grid-template-columns: 430px 1fr; gap: 3.5rem; align-items: center;
  max-width: var(--tn-max); margin: 0 auto;
  padding: 4.5rem var(--tn-gutter);
}
/* The phone breaks the band, top and bottom, the way the reference does. */
.tn-app-phone{ display: flex; justify-content: center; align-self: stretch; }
.tn-app-phone .tn-phone{
  width: 290px; height: 560px; margin: -3.5rem 0;
  border-radius: 42px; padding: 14px;
  background: #1d2b39; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.85);
}
.tn-app-phone .tn-phone-screen{ border-radius: 30px; padding: 36px 16px 16px; gap: 11px; }
.tn-app-phone .tn-phone-notch{ width: 96px; height: 20px; }
.tn-app-copy{ max-width: 620px; }
.tn-app h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; letter-spacing: -.02em; }
.tn-app-copy > p{ font-size: 1.05rem; max-width: 46ch; }

/* Store badges: the reference's shape, and honest about what they are. */
.tn-store-row{ display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 1.2rem; }
.tn-store{
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .65rem 1.2rem; border-radius: 10px;
  background: #0b1219; border: 1px solid rgba(255,255,255,.28);
  color: #fff; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.tn-store:hover{ background: #16212c; border-color: rgba(255,255,255,.5); }
.tn-store svg{ width: 26px; height: 26px; fill: #fff; flex: 0 0 auto; }
.tn-store span{ display: flex; flex-direction: column; line-height: 1.2; }
.tn-store small{ font-size: .68rem; color: rgba(255,255,255,.72); }
.tn-store strong{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tn-app-note a{ color: #fff; text-decoration: underline; }

@media (max-width: 980px){
  .tn-app-inner{ grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
  .tn-app-phone{ display: none; }
  .tn-app::after{ background: rgba(10,17,24,.88); }
}

/* ── Join us: a boarding pass ─────────────────────────────────────────
   The stub on the left, a perforation, then the ask. Notches and dashes
   are drawn with radial and repeating gradients, so there is no image to
   load and nothing to go missing. These rules follow the first .tn-join
   block and supersede its two-column layout. */
.tn-join{
  background:
    radial-gradient(1200px 400px at 15% 0%, color-mix(in srgb, var(--tn-brand) 12%, #fff) 0%, #f6f8fa 60%),
    #f6f8fa;
  border-top: 1px solid var(--tn-line);
}
.tn-join-inner{
  display: block; padding: 4rem clamp(1.25rem, 3vw, 3.5rem);
}
.tn-pass{
  position: relative;
  display: grid; grid-template-columns: 190px 1fr;
  max-width: 980px; margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06);
  overflow: hidden;
}
/* The stub, in the brand colour, with its own little identity block. */
.tn-pass-stub{
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.6rem 1.3rem;
  background: linear-gradient(160deg, var(--tn-brand) 0%, var(--tn-brand-dk) 100%);
  color: #fff;
}
.tn-pass-brand{ font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tn-pass-kind{ font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.tn-pass-seq{
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  color: rgba(255,255,255,.85);
}
/* The tear: two notches biting in from top and bottom, and a dashed line
   between them. */
.tn-pass::before,
.tn-pass::after{
  content: ''; position: absolute; left: 190px; z-index: 3;
  width: 26px; height: 26px; border-radius: 999px;
  background: #f6f8fa; transform: translateX(-50%);
}
.tn-pass::before{ top: -13px; }
.tn-pass::after{ bottom: -13px; }
.tn-pass-main{
  position: relative;
  padding: 1.9rem 2.1rem;
}
.tn-pass-main::before{
  content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px;
  background: repeating-linear-gradient(180deg, #d9e0e7 0 7px, transparent 7px 14px);
}
.tn-pass-route{
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--tn-line);
}
.tn-pass-port b{ display: block; font-size: 1.35rem; font-weight: 800; color: var(--tn-ink); letter-spacing: .02em; }
.tn-pass-port small{ display: block; font-size: .78rem; color: var(--tn-muted); }
.tn-pass-port--to{ text-align: right; }
.tn-pass-line{
  flex: 1; display: flex; align-items: center; gap: .5rem;
}
.tn-pass-line i{
  flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, #cfd8e0 0 6px, transparent 6px 12px);
}
.tn-pass-line svg{ width: 20px; height: 20px; fill: var(--tn-brand); flex: 0 0 auto; }
.tn-pass h2{
  margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800; letter-spacing: -.02em; color: var(--tn-ink);
}
.tn-pass p{ margin: 0 0 1.5rem; font-size: .97rem; line-height: 1.75; color: #56626f; max-width: 58ch; }
.tn-pass-actions{ display: flex; gap: .7rem; flex-wrap: wrap; }
.tn-pass-btn{
  display: inline-block; padding: .8rem 1.7rem; border-radius: 999px;
  background: var(--tn-brand); color: #fff; font-size: .93rem; font-weight: 700; text-decoration: none;
}
.tn-pass-btn:hover{ background: var(--tn-brand-dk); }
.tn-pass-ghost{
  display: inline-block; padding: .8rem 1.7rem; border-radius: 999px;
  background: #fff; color: var(--tn-ink); border: 1px solid #d9e0e7;
  font-size: .93rem; font-weight: 700; text-decoration: none;
}
.tn-pass-ghost:hover{ border-color: var(--tn-brand); color: var(--tn-brand); }

@media (max-width: 760px){
  .tn-pass{ grid-template-columns: 1fr; }
  .tn-pass-stub{ flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; }
  .tn-pass-kind{ font-size: 1.05rem; }
  .tn-pass::before, .tn-pass::after{ display: none; }
  .tn-pass-main::before{ display: none; }
  .tn-pass-main{ padding: 1.5rem 1.3rem; }
}

/* The phone shows the app's launch screen rather than a skeleton of a UI
   that does not exist yet: the mark, and under it what is actually true. */
.tn-phone-screen--splash{
  align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem 1.5rem;
  background: #fff;
}
.tn-phone-logo{ max-width: 72%; height: auto; }
.tn-phone-soon{
  font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tn-brand);
}

/* WhatsApp in the footer contact column, under the phone number. */
.nd-footer-wa{
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .5rem;
  font-size: .92rem; font-weight: 600; color: inherit; text-decoration: none;
}
.nd-footer-wa svg{ width: 17px; height: 17px; fill: #25d366; flex: 0 0 auto; }
.nd-footer-wa:hover{ text-decoration: underline; }

/* Solid ground for the app band. The stock photograph behind it was a room
   full of strangers that had nothing to do with the product, and the text and
   badges had to fight it for contrast. One flat colour, and the phone is the
   only thing to look at. */
.tn-app::before{ display: none !important; }
.tn-app::after{ display: none !important; }
.tn-app{ background: #0f1b26 !important; }

/* ── Search results page ──────────────────────────────────────────────
   Same measure as every other container on the site. The engine caps the
   results at 1200px and the search bar separately, both centred on their
   own; left alone they disagreed with the header above them, and forced to
   full width they ran off both edges of the screen while the filters and
   the cards stayed inside. One width, one gutter, and the search bar lines
   up with the cards underneath it. */
body .search-page .abe-results-layout,
body .search-page .abe-results-search-wrap,
body .search-page .abe-shortcode-wrap,
body .search-page #adivaha-booking-engine.abe-root--search{
  /* The measure only. The engine already centres these and gives them their
     own padding; restating both here was pushing the search bar further in
     than the filters and the cards it sits above. */
  max-width: var(--tn-max) !important;
}
/* The bar sits inside the root, which already carries the gutter, so it
   takes the width and nothing else - two gutters would push the fields
   further in than the filters. */
body .search-page #adivaha-booking-engine .abe-search-bar{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The zeroing that used to sit here is gone with it: with no gutter of its
   own on the bar, the root's gutter is the only one, which is the single
   gutter the page wanted all along. */

/* ── First paint ──────────────────────────────────────────────────────
   The engine ships its own stylesheet and injects it from JavaScript, so
   for the moment between the HTML painting and that file arriving the
   widget is raw markup: the tabs stack into little unstyled boxes and the
   panel is not there at all. On a slow connection that is what a visitor
   meets first.

   So the widget is held back until the engine has marked itself loaded
   (#adivaha-booking-engine[data-abe-loaded="1"]), and the hero keeps the
   space for it so nothing jumps when it appears.

   The animation is a dead man's switch: if the engine never sets that
   attribute - script blocked, error, an older build - the widget is shown
   anyway after 2.5s. Hiding something for ever to avoid showing it ugly
   would be the worse bug. */
body.nd-home .nd-hero-search{ min-height: 210px; }
body.nd-home .nd-hero-search .abe-search-widget{
  visibility: hidden;
  animation: tnRevealWidget 0s linear 2.5s forwards;
}
body.nd-home .nd-hero-search .abe-search-widget:has(#adivaha-booking-engine[data-abe-loaded="1"]){
  visibility: visible;
  animation: none;
}
@keyframes tnRevealWidget { to { visibility: visible; } }

@media (max-width: 900px){
  body.nd-home .nd-hero-search{ min-height: 320px; }
}

/* ── Results page, final measure ──────────────────────────────────────
   Set from the browser and carried over as written. The search bar takes
   the page measure with a 48px gutter of its own, and the results grid
   below it keeps the engine's 1200px column, centred, with the same 48px
   either side - so the filters column and the fare cards line up with the
   fields above them.

   These come last in the file on purpose: the earlier rules in this
   stylesheet set padding on the same elements, and the last one wins. */
body .search-page #adivaha-booking-engine .abe-search-bar{
  max-width: var(--tn-max) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}
body.adivaha-be[data-adivaha="AD001"] #adivaha-booking-engine .abe-results-layout{
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 1.25rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}


/* ==========================================================================
   HEADER CLEARANCE - the hero has to start below a header that is not in flow
   --------------------------------------------------------------------------
   .site-header is position:absolute, so it paints OVER the hero instead of
   pushing it down. Above 900px the hero's 96px top padding happened to clear
   the 75px bar, so nobody noticed; below it the padding drops to 56px and the
   first line of the headline was sliding under the white bar. On a phone it
   was worse - the bar wraps onto two rows there (138px tall), so most of the
   headline disappeared.

   Two fixes, in order: keep the bar to ONE row on small screens so its height
   is predictable, then state the clearance in terms of that height instead of
   a number that happens to work at one width.
   ========================================================================== */
:root{ --tn-header-h: 75px; }

@media (max-width: 900px){
  body.nd-home .nd-hero-inner{
    padding-top: calc(var(--tn-header-h) + 2rem) !important;
  }
  /* The interior pages set their own top padding from the same variable. */
  .tn-about-hero-inner{ padding-top: calc(var(--tn-header-h) + 2rem) !important; }
}

@media (max-width: 560px){
  /* One row: the logo shrinks, the currency pill loses its padding and the
     call-to-action tightens, which is what stops the wrap to 138px. */
  :root{ --tn-header-h: 66px; }
  body .site-header.tn-header .nd-header-inner{
    flex-wrap: nowrap;
    gap: .5rem;
    padding-top: .6rem; padding-bottom: .6rem;
  }
  body .site-header.tn-header .nd-brand img{ max-height: 30px; }
  body .site-header.tn-header .b2c-loc-btn{ padding: .3rem .5rem; font-size: .78rem; }
  body .site-header.tn-header .nd-header-cta{
    padding: .5rem .85rem; font-size: .78rem; white-space: nowrap;
  }
}

@media (max-width: 380px){
  /* At this width the pill and the button cannot both fit next to a logo and
     a burger. The currency picker goes: it is repeated in the footer, the
     Need Help button is not repeated anywhere. */
  body .site-header.tn-header .b2c-loc-btn{ display: none; }
}


/* ==========================================================================
   FAQ ACCORDION
   --------------------------------------------------------------------------
   Built on <details>/<summary>, so it opens with JavaScript off, takes
   keyboard focus and announces its state to a screen reader without any of
   that being written by hand. The only thing styling has to do is hide the
   native marker and draw our own.

   Component styling only - no copy, no tenant - so this is safe in the
   master theme even though the questions themselves are per tenant.
   ========================================================================== */
.tn-faq{ background: #fff; }
.tn-faq h2{ margin: .35rem 0 .6rem; }
.tn-faq-lede{
  margin: 0 0 2rem; max-width: 62ch;
  font-size: 1rem; line-height: 1.7; color: var(--tn-muted, #5b6b7c);
}
.tn-faq-lede a{ color: var(--tn-brand, #fb6903); font-weight: 600; }

.tn-faq-item{
  border: 1px solid var(--tn-line, #e6ebf1);
  border-radius: 14px;
  background: #fff;
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tn-faq-item[open]{
  border-color: color-mix(in srgb, var(--tn-brand, #fb6903) 45%, #fff);
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .28);
}
.tn-faq-item + .tn-faq-item{ margin-top: 0; }

.tn-faq-item summary{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-size: 1.02rem; font-weight: 700; line-height: 1.45;
  color: var(--tn-ink, #10202e);
  cursor: pointer;
  list-style: none;                 /* Firefox */
}
.tn-faq-item summary::-webkit-details-marker{ display: none; }
.tn-faq-item summary:hover{ color: var(--tn-brand, #fb6903); }
.tn-faq-item summary:focus-visible{
  outline: 2px solid var(--tn-brand, #fb6903);
  outline-offset: -2px;
}

/* Our own marker: a plus that becomes a minus. Drawn from two bars so it
   needs no icon font and inherits the brand colour. */
.tn-faq-mark{
  position: relative; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--tn-brand, #fb6903) 12%, #fff);
}
.tn-faq-mark::before,
.tn-faq-mark::after{
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--tn-brand, #fb6903);
  transform: translate(-50%, -50%);
  transition: transform .18s ease, opacity .18s ease;
}
.tn-faq-mark::after{ transform: translate(-50%, -50%) rotate(90deg); }
.tn-faq-item[open] .tn-faq-mark::after{
  transform: translate(-50%, -50%) rotate(0deg); opacity: 0;
}

.tn-faq-answer{
  padding: 0 1.25rem 1.15rem;
  border-top: 1px solid var(--tn-line, #e6ebf1);
}
.tn-faq-answer p{
  margin: 1rem 0 0; max-width: 78ch;
  font-size: .97rem; line-height: 1.75; color: var(--tn-muted, #5b6b7c);
}
.tn-faq-answer strong{ color: var(--tn-ink, #10202e); }

@media (prefers-reduced-motion: reduce){
  .tn-faq-item,
  .tn-faq-mark::before,
  .tn-faq-mark::after{ transition: none; }
}

@media (max-width: 640px){
  .tn-faq-item summary{ padding: .95rem 1rem; font-size: .96rem; gap: .75rem; }
  .tn-faq-answer{ padding: 0 1rem 1rem; }
  .tn-faq-answer p{ font-size: .93rem; }
}


/* ==========================================================================
   MOBILE MENU PANEL
   --------------------------------------------------------------------------
   The mobile nav already had a panel defined - absolute, white, padded - but
   a later rule outside any media query, `body .site-header.tn-header .nd-nav`,
   sets background:none, padding:0 and a row gap for the DESKTOP bar. It wins
   on specificity at every width, so when the burger opened the menu the links
   appeared with no panel behind them, spread down the page over the hero.

   Restated here at a specificity that beats it, inside the breakpoint where
   it matters. Open state is accepted from either element, because the two
   layouts in this stylesheet disagree about which one carries the class.
   ========================================================================== */
@media (max-width: 900px){
  body .site-header.tn-header .nd-header-inner .nd-nav{
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column; align-items: stretch;
    gap: 0; margin: 0;
    padding: .35rem 1.25rem .9rem;
    /* !important, reluctantly: an earlier pass pins the desktop bar with
       `body .site-header.tn-header .nd-nav{ background:none !important }` to
       beat the theme's own brand gradient. That declaration cannot be
       outranked, only matched - and without a solid panel the open menu is
       unreadable text floating over the hero photograph. */
    background: #fff !important;
    border-bottom: 1px solid var(--tn-line, #e6ebf1);
    box-shadow: 0 20px 36px -24px rgba(15, 23, 42, .5);
    z-index: 70;
  }
  body .site-header.tn-header .nd-header-inner.is-open .nd-nav,
  body .site-header.tn-header .nd-header-inner .nd-nav.is-open{
    display: flex;
  }
  body .site-header.tn-header .nd-header-inner .nd-nav a{
    width: 100%;
    padding: .8rem 0;
    border-bottom: 1px solid var(--tn-line, #e6ebf1);
    border-radius: 0;
  }
  body .site-header.tn-header .nd-header-inner .nd-nav a:last-child{ border-bottom: 0; }
  /* The active item is marked with a left bar here: the desktop underline
     reads as a divider once the links are stacked. */
  body .site-header.tn-header .nd-header-inner .nd-nav a.active{
    border-bottom-color: var(--tn-line, #e6ebf1);
    box-shadow: inset 3px 0 0 var(--tn-brand, #fb6903);
    padding-left: .7rem;
  }
}


/* ==========================================================================
   INTERIOR PAGE HERO (.tn-page-hero)
   --------------------------------------------------------------------------
   The menu landing pages - /search/flight and friends - used a different
   banner entirely: a flat stock photo with its own type. Arriving from the
   Flights menu therefore looked like leaving the site.

   The home page's hero is styled through body.nd-home, and these pages do
   not carry that class, so the rules are restated here against
   .tn-page-hero. Only the ones that make the hero what it is - the wash,
   the measure, the type - not the whole cascade.
   ========================================================================== */
.tn-page-hero{
  position: relative; overflow: visible;
  padding: 0; background: #0d1620;
  min-height: clamp(420px, 46vw, 520px);
  display: flex; align-items: center;
}
.tn-page-hero .nd-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.tn-page-hero .nd-hero-bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
/* The wash: deep where the words are, clearing towards the photograph. */
.tn-page-hero .nd-hero-bg::after{
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(9,16,24,.78) 0%, rgba(9,16,24,.42) 48%, rgba(9,16,24,.18) 100%);
}
.tn-page-hero .nd-hero-inner{
  position: relative; z-index: 2;
  width: 100%; max-width: var(--tn-max, 1520px);
  margin-left: auto; margin-right: auto;
  padding: calc(var(--tn-header-h, 75px) + 2.25rem) var(--tn-gutter, 1.5rem) 3rem;
}
.tn-page-hero .nd-hero-title{
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: #fff;
  text-wrap: balance;
}
.tn-page-hero .nd-hero-title em{ font-style: normal; color: var(--tn-amber, #ffb648); }
.tn-page-hero .tn-hero-sub{
  margin: 0 0 2.4rem;
  font-size: 1.05rem; color: rgba(255,255,255,.88);
}
.tn-page-hero .nd-hero-search{ position: relative; z-index: 3; }

@media (max-width: 900px){
  .tn-page-hero{ min-height: 0; }
  .tn-page-hero .nd-hero-inner{
    padding: calc(var(--tn-header-h, 75px) + 2rem) var(--tn-gutter, 1.5rem) 2.5rem;
  }
  .tn-page-hero .tn-hero-sub{ margin-bottom: 1.8rem; }
}

/* The stock-photo banner the seeded page used to draw. Left in place for any
   menu page still on the old template; hidden only where ours is present. */
.tn-page-hero + .sp-hero{ display: none; }


/* ==========================================================================
   RESULTS-STATE BANNER (.sp-hero)
   --------------------------------------------------------------------------
   Running a search leaves the theme's own landing page and hands the banner
   back to the platform, which draws .sp-hero. The photograph is now the
   tenant's (search_hero_image), but the SHAPE was still the platform's:
   centred type, no clearance for our absolute header, a different measure.
   Two banners on one journey should not differ in more than the picture.

   The platform injects its .sp-* rules into <head> AFTER this stylesheet,
   so these have to out-specify them rather than simply follow.
   ========================================================================== */
body .sp-hero{
  min-height: clamp(300px, 34vw, 420px);
  display: flex; align-items: center;
  background-size: cover; background-position: center 45%;
}
body .sp-hero .sp-hero-inner{
  width: 100%; max-width: var(--tn-max, 1520px);
  margin-left: auto; margin-right: auto;
  padding: calc(var(--tn-header-h, 75px) + 1.75rem) var(--tn-gutter, 1.5rem) 1.75rem;
  text-align: left;
}
body .sp-hero .sp-hero-title{
  margin: 0 0 .6rem;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: #fff;
  text-wrap: balance;
}
body .sp-hero .sp-hero-sub{
  margin: 0; max-width: 62ch;
  font-size: 1rem; color: rgba(255,255,255,.88);
}

@media (max-width: 900px){
  body .sp-hero{ min-height: 0; }
  body .sp-hero .sp-hero-inner{
    padding: calc(var(--tn-header-h, 75px) + 1.5rem) var(--tn-gutter, 1.5rem) 1.5rem;
  }
}


/* ==========================================================================
   INTERIOR PAGE HERO: THE VIDEO
   --------------------------------------------------------------------------
   The banner IS the video on this theme - the still underneath is hidden and
   the band stays brand-dark until the video is playing, so the hero never
   shows two pictures in a row. All three of those rules were written against
   body.nd-home, so /search/flight got the markup but none of the behaviour:
   the video had no positioning, nothing faded in, and the band sat flat dark.

   Restated for .tn-page-hero so the interior banner is the same banner,
   including what a visitor who has asked for less motion sees instead.
   ========================================================================== */
.tn-page-hero .nd-hero-bg .tn-hero-video{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  border: 0; background: transparent;
  opacity: 0; transition: opacity .5s ease;
}
.tn-page-hero .nd-hero-bg .tn-hero-video.is-playing{ opacity: 1; }

/* The still is only there for the no-video case below. */
.tn-page-hero .nd-hero-bg > img{ display: none; }
.tn-page-hero{ background: linear-gradient(160deg, #12202c 0%, #0b1520 100%); }

@media (prefers-reduced-motion: reduce){
  .tn-page-hero .nd-hero-bg .tn-hero-video{ display: none; }
  .tn-page-hero .nd-hero-bg > img{ display: block; }
}


/* ==========================================================================
   INTERIOR PAGE HERO: THE SEARCH BAR
   --------------------------------------------------------------------------
   The engine caps its own bar at 1200px and centres it
   (#adivaha-booking-engine .abe-search-bar{max-width:1200px;margin:0 auto}).
   Two rules already undo that - one for the home page hero, one for the
   .search-page results layout - but the menu landing page is neither, so the
   cap came back: on a 1440 viewport the panel ran to 1353px while the fields
   inside stopped at 1200, leaving a slab of empty white past the Search
   button. The panel already carries the page gutter, so the bar takes the
   full width and nothing else.
   ========================================================================== */
.tn-page-hero .nd-hero-search #adivaha-booking-engine .abe-search-bar{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* A landing hero with a photograph and no film. The video hero deliberately
   hides its still - there the still is only the fallback - so a page whose
   banner IS the photograph has to put it back. Same wash, same type, same
   measure; only the picture differs. */
.tn-page-hero--still .nd-hero-bg > img{ display: block; }


/* held-fares: the card takes its column on a narrow phone */
/* A grid item's min-width is auto, so the card could never be narrower than
   its own footer - price and a no-wrap date range on one line - and hung off
   the right of a 344px screen. It takes its column now, and the footer puts
   the dates on their own line when the two cannot share one. */
.tn-fare{ min-width: 0; }
.tn-fare-foot{ flex-wrap: wrap; }


/* tn-header: the menu folds into the burger at 1086px */
/* Six links plus the Login pill, the currency switch and Need Help only fit
   above ~1086px; below that they ran into each other. The burger panel that
   used to wait until 900px starts here instead - same panel, same open state,
   same list - and the side block takes the free space, so the logo keeps the
   left and everything else sits right. With the nav lifted out of the flow
   nothing was doing that before, and the whole bar bunched to the left. */
@media (max-width: 1086px){
  body .site-header.tn-header .nd-header-inner{ position: relative; }
  body .site-header.tn-header .nd-header-inner .nd-nav{
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column; align-items: stretch;
    gap: 0; margin: 0;
    padding: .35rem 1.25rem .9rem;
    background: #fff !important;
    border-bottom: 1px solid var(--tn-line, #e6ebf1);
    box-shadow: 0 20px 36px -24px rgba(15, 23, 42, .5);
    z-index: 70;
  }
  body .site-header.tn-header .nd-header-inner.is-open .nd-nav,
  body .site-header.tn-header .nd-header-inner .nd-nav.is-open{ display: flex; }
  body .site-header.tn-header .nd-header-inner .nd-nav a{
    width: 100%; padding: .8rem 0;
    border-bottom: 1px solid var(--tn-line, #e6ebf1); border-radius: 0;
  }
  body .site-header.tn-header .nd-header-inner .nd-nav a:last-child{ border-bottom: 0; }
  body .site-header.tn-header .nd-header-inner .nd-nav a.active{
    border-bottom-color: var(--tn-line, #e6ebf1);
    box-shadow: inset 3px 0 0 var(--tn-brand, #fb6903);
    padding-left: .7rem;
  }
  body .site-header.tn-header .nd-burger{
    display: inline-flex !important; background: transparent;
    border-radius: 8px; padding: 0 10px;
  }
  body .site-header.tn-header .nd-burger span{ margin: 0; height: 3px !important; width: 24px; }
  body .site-header.tn-header .nd-header-side{ margin-left: auto; }
}


/* tn-header: a legible Login, a square menu panel, Need Help inside it */
/* The Login pill is injected with inline styles, including
   `color: inherit !important`, which no stylesheet can outrank - so the
   colour is set on what it inherits from. Its pale grey wash becomes white
   with the theme's hairline, which is what it was drawn for. */
body .site-header.tn-header .nd-header-side{ color: var(--tn-ink, #16202c); }
body .site-header.tn-header .b2c-acct-link{
  background: #fff !important;
  border-color: var(--tn-line, #e6ebf1) !important;
}
@media (max-width: 1086px){
  /* The panel inherited the desktop bar's pill radius and read as a white
     lozenge over the hero. */
  body .site-header.tn-header .nd-header-inner .nd-nav{ border-radius: 0; }
  /* Need Help? goes with the rest of the navigation. */
  body .site-header.tn-header .nd-header-side .nd-header-cta{ display: none; }
  body .site-header.tn-header .nd-header-inner .nd-nav a.tn-nav-cta{
    color: var(--tn-brand, #fb6903) !important; font-weight: 700;
  }
}
@media (min-width: 1087px){
  /* Above the fold-in point the bar carries it, so the menu's copy stands down. */
  body .site-header.tn-header .tn-nav .tn-nav-cta{ display: none; }
}


/* tn-header: the orange call to action is the account chip */
/* The slot carries .tn-cta, so it is already the orange pill. The chip
   inside it arrives with its own inline pill styling (a grey wash, a
   border, padding) which would draw a second button inside the first -
   so flatten it back to plain white text and let the slot be the button.
   Inline styles need !important to beat. */
body .site-header.tn-header .b2c-login-slot{ gap:.4rem; }
body .site-header.tn-header .b2c-login-slot .b2c-acct-link,
body .site-header.tn-header .b2c-login-slot .b2c-acct-logout{
  background: none !important; border: 0 !important; padding: 0 !important;
  color: #fff !important; font: inherit !important; text-decoration: none;
}
body .site-header.tn-header .b2c-login-slot .b2c-acct-logout{ opacity: .8; font-size: .8em; }
/* Empty slot = a tenant with the account chip switched off. An empty
   orange lozenge is worse than no button, so collapse it. */
body .site-header.tn-header .b2c-login-slot:empty{ display: none; }


/* tn-about: the page carries only the client's own sections */
/* The facts aside is gone, so the copy takes the whole measure instead of
   sitting in the 1.5fr half of a two column grid with nothing beside it. */
body.tn-about .tn-about-body .tn-about-grid{ grid-template-columns: 1fr !important; }
/* Two value cards, not three: mission and vision. A repeat(3,1fr) row
   would leave a card-shaped hole on the right. */
body.tn-about .tn-about-values-inner{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px){
  body.tn-about .tn-about-values-inner{ grid-template-columns: 1fr; }
}