/* =====================================================================
   Beyond Journey - Kids Friendly Journeys (/kids-friendly-journeys)
   ---------------------------------------------------------------------
   The designer's mock-up of 2026-10-13, as it is: its layout, its
   colours and - at her explicit ask, for this page - its own faces
   ("iske fonts colors ye sb ese hi rakhna plz same template ki trh"):
     Baloo 2          the rounded display headings (banner, "Holidays
                      That Spark Their Imagination")
     Caveat           the hand-written lines
     Playfair Display the serif headings (destination names, "Holiday
                      Packages", "What Our Travellers Say")
     Poppins          everything else, as on the rest of the site
   The faces load from Google Fonts in the view. css/bj-type.css puts
   Poppins on every heading with `html body h1 ... !important`, so the
   face rules here are `html body .kj ...` + !important, as the
   Spiritual Journeys page does.
   Scoped to .kj; markup in Areas/Booking/Views/Pages/KidsFriendlyJourneys.cshtml.
   ===================================================================== */

.kj {
  --kj-navy: #163c84;
  --kj-navy-2: #0f2d66;
  --kj-orange: #f47b20;
  --kj-orange-dk: #dc6610;
  --kj-sun: #fbbf2a;
  --kj-sun-dk: #f0a90c;
  --kj-ink: #1d2a44;
  --kj-body: #4f5b70;
  --kj-cream: #fffaf2;
  --kj-sky: #e8f3fd;
  --kj-line: #ece4d6;
  --kj-r: 18px;
  --kj-ease: cubic-bezier(.2, .7, .2, 1);
  background: var(--kj-cream);
  color: var(--kj-body);
  font-family: 'Poppins', sans-serif;
  overflow-x: clip;
}

/* style.css pads every <section> 72/80px; each band here sets its own */
.kj section { position: relative; padding: 64px 0; }
.kj section > .container { position: relative; z-index: 1; }
.kj p { margin: 0; }

/* ---- the faces -------------------------------------------------- */
html body .kj h1,
html body .kj .kj-display { font-family: 'Baloo 2', 'Poppins', sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em; text-transform: none; }
html body .kj .kj-serif,
html body .kj .kj-serif-caps,
html body .kj .kj-dest__txt strong { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; letter-spacing: 0; }
html body .kj .kj-script,
html body .kj .kj-hero__script { font-family: 'Caveat', 'Segoe Script', cursive !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; }

.kj-kicker {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kj-navy);
}
.kj .kj-kicker--h { margin: 0; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .2em !important; color: var(--kj-orange); text-transform: uppercase !important; line-height: 1.4; }

/* ---- buttons: round pills -------------------------------------- */
.kj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px; border-radius: 999px; border: 0;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: transform .2s var(--kj-ease), box-shadow .2s var(--kj-ease), background-color .2s;
}
.kj-btn i, .kj-btn svg { font-size: 13px; }
.kj-btn:hover { transform: translateY(-2px); text-decoration: none; }
.kj-btn--sun { background: var(--kj-sun); color: var(--kj-navy-2) !important; box-shadow: 0 12px 24px -12px rgba(240, 169, 12, .8); }
.kj-btn--sun:hover { background: var(--kj-sun-dk); }
.kj-btn--orange { background: var(--kj-orange); color: #fff !important; box-shadow: 0 12px 24px -12px rgba(244, 123, 32, .8); }
.kj-btn--orange:hover { background: var(--kj-orange-dk); }
.kj-btn--navy { background: var(--kj-navy); color: #fff !important; box-shadow: 0 12px 24px -14px rgba(22, 60, 132, .8); }
.kj-btn--navy:hover { background: var(--kj-navy-2); }

.kj-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--kj-navy); text-decoration: underline; text-underline-offset: 4px; }
.kj-link:hover { color: var(--kj-orange); }
.kj-link i, .kj-link svg { font-size: 11px; }

/* ---- doodles ---------------------------------------------------- */
.kj-doodle { position: absolute; z-index: 2; pointer-events: none; }
.kj-doodle--sun { color: var(--kj-sun); }
.kj-doodle--orange { color: var(--kj-orange); }
.kj-doodle--sky { color: #7fb4e6; }

/* the mock-up's colours on the promise icons */
.kj-c-orange { color: #f47b20; }
.kj-c-blue { color: #2f7de1; }
.kj-c-green { color: #2fa36b; }
.kj-c-red { color: #e2464b; }
.kj-c-purple { color: #8b5cd6; }

/* =====================================================================
   1. Banner - the family on the right, the words on a pale wash
   ===================================================================== */
.kj .kj-hero {
  min-height: 600px; display: flex; align-items: center; padding: 70px 0 120px;
  background: #cfe6f7 url(/img/kids/hero-waterpark.jpg) 70% 40% / cover no-repeat;
  isolation: isolate;
}
.kj .kj-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(255, 250, 242, .96) 0%, rgba(255, 250, 242, .9) 30%, rgba(255, 250, 242, .45) 46%, rgba(255, 250, 242, 0) 60%);
}
.kj .kj-hero > .container { position: relative; }
.kj-hero__copy { position: relative; max-width: 520px; }
.kj .kj-hero h1 { margin: 0 0 18px; font-size: 72px; line-height: .98; transform: rotate(-2deg); transform-origin: left center; }
.kj-hero__l1 { display: block; color: var(--kj-navy); }
.kj-hero__l2 { position: relative; display: inline-block; color: var(--kj-orange); }
.kj-hero__dash { position: absolute; right: -44px; top: 10px; width: 36px; height: 36px; color: var(--kj-sun-dk); }
.kj .kj-hero__lead { max-width: 440px; margin-bottom: 26px; font-size: 15px; line-height: 1.7; color: #33405a; }
.kj-hero__sun { width: 72px; height: 72px; right: -40px; top: -40px; }
.kj .kj-hero__script {
  position: absolute; right: 30px; top: -36px; z-index: 2; margin: 0;
  font-size: 40px; line-height: 1; color: var(--kj-navy); text-align: center; transform: rotate(-9deg);
  text-shadow: 0 0 14px rgba(255, 255, 255, .95), 0 0 4px rgba(255, 255, 255, .9);
}
.kj-hero__plane { width: 48px; height: 36px; right: 40px; top: 70px; color: var(--kj-navy); transform: rotate(-14deg); }

/* =====================================================================
   2. The promise card over the banner's foot - five columns, icon above
   ===================================================================== */
.kj .kj-promise { padding: 0; }
.kj .kj-promise__row {
  position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: -78px 0 0; padding: 26px 18px; list-style: none;
  background: #fff; border-radius: 30px; box-shadow: 0 24px 50px -28px rgba(22, 60, 132, .35);
}
.kj-promise__row li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 14px; text-align: center; }
.kj-promise__row li + li { border-left: 1px solid var(--kj-line); }
.kj-promise__row i, .kj-promise__row svg { font-size: 30px; width: 1em; height: 1em; margin-bottom: 4px; }
.kj-promise__row strong { font-size: 14px; font-weight: 700; color: var(--kj-ink); line-height: 1.3; }
.kj-promise__row span { font-size: 12px; line-height: 1.5; color: var(--kj-body); }

/* =====================================================================
   3. Holidays that spark their imagination - words beside three blobs
   ===================================================================== */
.kj .kj-spark { padding: 80px 0 60px; }
.kj-spark__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.kj-spark__copy { position: relative; }
.kj .kj-spark h2 { margin: 0 0 18px; font-size: 54px; line-height: 1.02; color: var(--kj-navy); }
.kj .kj-spark h2 em { display: block; font-style: normal; color: var(--kj-orange); }
.kj .kj-spark__copy > p:not(.kj-kicker) { max-width: 470px; margin-bottom: 26px; font-size: 15px; line-height: 1.7; }
.kj-spark__sun { width: 64px; height: 64px; right: 40px; top: -20px; }
.kj-spark__cloud { width: 56px; height: 36px; right: -10px; top: 46px; }

.kj-spark__collage { position: relative; height: 470px; }
.kj .kj-blob { position: absolute; margin: 0; overflow: hidden; border: 6px solid #fff; box-shadow: 0 24px 46px -26px rgba(22, 60, 132, .45); background: #dde9f4; }
.kj-blob img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kj-blob--a { left: 0; top: 16px; width: 62%; height: 360px; border-radius: 48% 52% 44% 56% / 46% 40% 60% 54%; }
.kj-blob--b { right: 0; top: 0; width: 44%; height: 230px; border-radius: 56% 44% 52% 48% / 50% 56% 44% 50%; }
.kj-blob--c { right: 6%; bottom: 0; width: 48%; height: 230px; border-radius: 44% 56% 48% 52% / 56% 46% 54% 44%; }
.kj-blob--a img { object-position: 62% 50%; }
.kj-spark__plane { width: 54px; height: 40px; right: 4%; top: -34px; transform: rotate(-10deg); }
.kj-spark__star { width: 30px; height: 30px; left: 46%; bottom: 0; }
.kj-spark__loop { width: 120px; height: 60px; left: -10px; bottom: -24px; }

/* =====================================================================
   4. Top kids friendly destinations - the name over the photograph
   ===================================================================== */
.kj .kj-dests { padding: 40px 0 50px; }
.kj-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.kj-dests__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kj-dest {
  position: relative; display: block; aspect-ratio: 9 / 10; overflow: hidden; border-radius: var(--kj-r);
  background: #c9d9ea; box-shadow: 0 18px 36px -24px rgba(22, 60, 132, .55); text-decoration: none;
}
.kj-dest img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kj-ease); }
.kj-dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 34, 0) 45%, rgba(8, 16, 34, .35) 66%, rgba(8, 16, 34, .85) 100%); }
.kj-dest__txt { position: absolute; left: 18px; right: 68px; bottom: 18px; z-index: 1; }
.kj .kj-dest__txt strong { display: block; font-size: 26px; line-height: 1.1; color: #fff; }
.kj-dest__txt span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.kj-dest__go { position: absolute; right: 16px; bottom: 20px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--kj-ink); font-size: 14px; transition: background .2s, color .2s; }
.kj-dest:hover img { transform: scale(1.05); }
.kj-dest:hover .kj-dest__go { background: var(--kj-orange); color: #fff; }

/* =====================================================================
   5. Exciting experiences for kids - a round photo over a tinted card
   ===================================================================== */
.kj .kj-exp { padding: 40px 0 70px; }
.kj .kj-exp__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.kj-exp__item { display: flex; flex-direction: column; align-items: center; padding: 0 10px 20px; border-radius: 26px 26px 20px 20px; text-align: center; }
.kj-exp__ph {
  display: block; width: 100%; aspect-ratio: 1 / 1; margin: -10px 0 14px; overflow: hidden;
  border: 5px solid #fff; border-radius: 48% 52% 50% 50% / 52% 50% 50% 48%;
  box-shadow: 0 18px 32px -20px rgba(22, 60, 132, .5); background: #dde9f4;
}
.kj-exp__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kj-exp__item strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--kj-ink); }
.kj-tint--sun { background: #fff3d4; }
.kj-tint--leaf { background: #e9f5e4; }
.kj-tint--sky { background: #e3f0fc; }
.kj-tint--rose { background: #fde9ee; }
.kj-exp__cloud { width: 70px; height: 44px; left: 2%; top: 20px; }
.kj-exp__plane { width: 52px; height: 38px; right: 3%; top: 26px; transform: rotate(-8deg); }

/* =====================================================================
   6. Curated packages - a pale blue band, words left, three cards right
   ===================================================================== */
.kj .kj-packs { padding: 70px 0; background: var(--kj-sky); }
.kj .kj-packs::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 40px;
  background: var(--kj-cream); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.kj-packs__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 34px; align-items: center; }
.kj .kj-serif-caps { margin: 0 0 16px; font-size: 34px; line-height: 1.1; text-transform: uppercase; color: var(--kj-navy-2); }
.kj .kj-packs__copy > p:not(.kj-kicker) { margin-bottom: 26px; font-size: 14.5px; line-height: 1.7; }
.kj-packs__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kj-pack { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -26px rgba(22, 60, 132, .55); text-decoration: none; transition: transform .25s var(--kj-ease); }
.kj-pack:hover { transform: translateY(-4px); text-decoration: none; }
.kj-pack__ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #c9d9ea; }
.kj-pack__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kj-pack__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.kj-pack__title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--kj-ink); }
.kj-pack__dur { margin-top: 4px; font-size: 12px; color: var(--kj-body); }
.kj-pack__line { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--kj-body); }
.kj-pack__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.kj-pack__price b { display: block; font-size: 17px; font-weight: 700; color: var(--kj-orange); line-height: 1.2; }
.kj-pack__price small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--kj-body); }
.kj-pack__go { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kj-sun); color: var(--kj-navy-2); font-size: 13px; }
.kj-pack:hover .kj-pack__go { background: var(--kj-orange); color: #fff; }
.kj-packs__none { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: 16px; background: #fff; }
.kj-packs__none strong { font-size: 16px; color: var(--kj-ink); }

/* =====================================================================
   7. What our travellers say - three cards
   ===================================================================== */
.kj .kj-stories { padding: 70px 0 60px; }
.kj .kj-stories .kj-kicker { color: var(--kj-orange); }
.kj .kj-serif { margin: 0 0 26px; font-size: 36px; line-height: 1.15; color: var(--kj-navy-2); text-transform: none; }
.kj-stories__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kj .kj-story { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 22px 18px; border: 1px solid var(--kj-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 32px -26px rgba(22, 60, 132, .4); }
/* style.css draws every blockquote as a navy slab of italic white text */
.kj .kj-story blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 13.5px; font-style: normal; line-height: 1.7; color: #3d4757; }
.kj-story blockquote::before { content: "\201C"; margin-right: 2px; font-family: Georgia, serif; font-size: 26px; line-height: 0; vertical-align: -8px; color: var(--kj-orange); }
.kj-story__stars { font-size: 17px; letter-spacing: 2px; color: var(--kj-sun-dk); }
.kj-story figcaption { display: flex; align-items: center; gap: 12px; }
.kj-story__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff3d4; color: var(--kj-orange-dk); font-size: 16px; font-weight: 700; }
.kj-story figcaption strong { display: block; font-size: 14px; font-weight: 700; color: var(--kj-navy-2); }
.kj-story figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--kj-body); }

/* =====================================================================
   8. Closing band - the sunset beach, the words on the right
   ===================================================================== */
.kj .kj-cta { min-height: 440px; display: flex; align-items: center; padding: 70px 0; background: #f7c99a url(/img/kids/cta-sunset.jpg) 30% 60% / cover no-repeat; isolation: isolate; }
.kj .kj-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(270deg, rgba(255, 250, 242, .92) 0%, rgba(255, 250, 242, .78) 34%, rgba(255, 250, 242, .1) 58%, rgba(255, 250, 242, 0) 70%);
}
.kj .kj-cta > .container { display: flex; justify-content: flex-end; }
.kj-cta__copy { position: relative; max-width: 470px; }
.kj .kj-cta h2 { margin: 0 0 14px; font-size: 56px; line-height: 1.02; color: var(--kj-navy); transform: rotate(-3deg); }
.kj .kj-cta__copy > p { margin-bottom: 24px; font-size: 15px; line-height: 1.7; color: #33405a; }
.kj-cta__sun { width: 60px; height: 60px; left: -76px; top: 0; }
.kj-cta__plane { width: 50px; height: 36px; right: -10px; top: -36px; transform: rotate(-12deg); }
.kj-cta__heart { width: 30px; height: 28px; right: 40px; bottom: -34px; }

/* =====================================================================
   Laptops and tablets
   ===================================================================== */
@media (max-width: 1199px) {
  .kj .kj-hero h1 { font-size: 62px; }
  .kj .kj-spark h2 { font-size: 46px; }
  .kj .kj-exp__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .kj-packs__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 991px) {
  .kj .kj-hero { min-height: 520px; padding: 60px 0 110px; background-position: 78% 40%; }
  .kj .kj-hero::before { background: linear-gradient(90deg, rgba(255, 250, 242, .95) 0%, rgba(255, 250, 242, .82) 48%, rgba(255, 250, 242, .2) 76%); }
  .kj .kj-hero__script { font-size: 32px; right: 10px; }
  .kj .kj-promise__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .kj-promise__row li:nth-child(4) { border-left: 0; }
  .kj-spark__grid { grid-template-columns: 1fr; gap: 30px; }
  .kj-dests__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kj-stories__row { grid-template-columns: 1fr; }
  .kj .kj-cta::before { background: linear-gradient(270deg, rgba(255, 250, 242, .92) 0%, rgba(255, 250, 242, .8) 55%, rgba(255, 250, 242, .3) 100%); }
}

/* =====================================================================
   Phones - a step smaller, rails with dots
   ===================================================================== */
@media (max-width: 575px) {
  .kj section { padding: 44px 0; }
  .kj-btn { min-height: 40px; padding: 0 18px; font-size: 12.5px; gap: 8px; }
  .kj-tail { display: none; }
  .kj-kicker { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 8px; }
  .kj .kj-kicker--h { font-size: 11.5px !important; letter-spacing: .14em !important; }

  .kj .kj-hero { min-height: 0; padding: 70px 0 100px; background-position: 88% 40%; }
  .kj .kj-hero::before { background: linear-gradient(180deg, rgba(255, 250, 242, .55) 0%, rgba(255, 250, 242, .9) 46%, rgba(255, 250, 242, .95) 100%); }
  .kj .kj-hero h1 { font-size: 46px; }
  .kj-hero__dash { right: -34px; width: 28px; height: 28px; }
  .kj .kj-hero__lead { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
  .kj-hero__sun { width: 48px; height: 48px; right: 0; top: -44px; }
  .kj .kj-hero__script { top: -56px; right: 6px; font-size: 24px; }
  .kj-hero__plane { display: none; }

  .kj .kj-promise__row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -60px; padding: 16px 8px; border-radius: 22px; row-gap: 14px; }
  .kj-promise__row li { padding: 2px 8px; }
  .kj-promise__row li + li { border-left: 0; }
  .kj-promise__row li:nth-child(even) { border-left: 1px solid var(--kj-line); }
  .kj-promise__row li:last-child { grid-column: 1 / -1; border-left: 0; }
  .kj-promise__row i, .kj-promise__row svg { font-size: 24px; }
  .kj-promise__row strong { font-size: 12.5px; }
  .kj-promise__row span { font-size: 11px; }

  .kj .kj-spark h2 { font-size: 36px; }
  .kj .kj-spark__copy > p:not(.kj-kicker) { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
  .kj-spark__collage { height: 300px; }
  .kj-blob--a { height: 230px; }
  .kj-blob--b { height: 150px; }
  .kj-blob--c { height: 150px; }
  .kj .kj-blob { border-width: 4px; }

  .kj-head { margin-bottom: 16px; }
  .kj-link { font-size: 12px; }
  .kj-dests__row, .kj-packs__row {
    display: flex; gap: 12px;
    margin: 0 -15px; padding: 2px 15px 10px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 15px; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .kj-dests__row::-webkit-scrollbar, .kj-packs__row::-webkit-scrollbar { display: none; }
  .kj-dest { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; }
  .kj .kj-dest__txt strong { font-size: 19px; }
  .kj-dest__txt { left: 12px; right: 12px; bottom: 50px; }
  .kj-dest__txt span { font-size: 10.5px; }
  .kj-dest__go { width: 30px; height: 30px; right: 12px; bottom: 12px; font-size: 11px; }
  .kj-pack { flex: 0 0 82%; scroll-snap-align: start; }

  .kj .kj-exp__row { gap: 18px 10px; margin-top: 20px; }
  .kj-exp__item { padding: 0 6px 12px; border-radius: 20px 20px 14px 14px; }
  .kj-exp__ph { border-width: 3px; margin-bottom: 10px; }
  .kj-exp__item strong { font-size: 11px; }
  .kj-exp__cloud, .kj-exp__plane { display: none; }

  .kj .kj-serif-caps { font-size: 26px; }
  .kj .kj-serif { font-size: 26px; margin-bottom: 18px; }
  .kj .kj-story blockquote { font-size: 12.5px; line-height: 1.6; }

  .kj .kj-cta { min-height: 0; padding: 56px 0; background-position: 30% 60%; }
  .kj .kj-cta::before { background: rgba(255, 250, 242, .78); }
  .kj .kj-cta h2 { font-size: 38px; }
  .kj .kj-cta__copy > p { font-size: 13.5px; line-height: 1.6; }
  .kj-cta__sun { display: none; }
}

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

/* the banner breadcrumb - "Home / Holidays / Kids Friendly Journeys" - as every
   designed style page shows it (the designer, 2026-10-13) */
.kj .kj-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--kj-body);
}
.kj .kj-crumbs a { color: var(--kj-ink); text-decoration: none; }
.kj .kj-crumbs a:hover { color: var(--kj-orange); }
.kj .kj-crumbs a + a::before, .kj .kj-crumbs span::before { content: "/"; margin-right: 8px; color: rgba(29, 42, 68, .35); }
@media (max-width: 575px) {
  .kj .kj-crumbs { margin-bottom: 12px; font-size: 11.5px; }
}

/* the banner as tall as its words (the designer, 2026-10-14: "faltu ke
   spaces ... htaao"): 56px above the breadcrumb, 64px from the button to
   the promise card, which overlaps the banner by 78px */
@media (min-width: 768px) {
  .kj .kj-hero { min-height: 0; padding: 56px 0 142px; }
}