/* =====================================================================
   Beyond Journey - the designed travel-style pages
   ---------------------------------------------------------------------
   One stylesheet for every travel-style page built from one of the
   designer's mock-ups, each a theme of it:
     .jr--wild  /wildlife-journeys   Pages/WildlifeJourneys.cshtml
     .jr--love  /honeymoon-holidays  Pages/HoneymoonHolidays.cshtml
   The pages share their bones - banner, promise strip, destination
   cards, experiences, featured itineraries from the database, traveller
   stories, closing band - and differ in colour and photographs, which
   are the tokens below. A new style page is a new theme block and a
   view, not a new stylesheet.
   Built to the site's rules (2026-10-13):
   - the mock-up's layout and colours, as the Spiritual Journeys page
     keeps its mock-up's maroon and gold;
   - the site's own type: Poppins at 400/500/600, the hero at About's
     sizes (40 / 34 / 28 / 26px), section titles 26 / 23 / 20px - a
     mock-up's serif never survives review (see css/bj-spiritual.css);
   - words under every card photo, never on it; icons beside their words;
   - "View all" as a button, never a bare link; traveller stories as cards
     side by side, never a slider (the designer, on the wildlife page);
   - on a phone, rails of cards with dots (js/bj-mobrail.js) rather than
     long stacks, and buttons only as wide as their label.
   ===================================================================== */

/* the defaults are the wildlife theme: forest green and sand */
.jr {
  --jr-deep: #1e3b2b;
  --jr-deep-2: #2a5139;
  --jr-em: #2f6b45;
  --jr-accent: #e2b05a;
  --jr-accent-hover: #d49c3d;
  --jr-accent-ink: #8c621b;      /* sand dark enough for small text on a light ground */
  --jr-accent-50: #faf2e1;
  --jr-canvas: #f7f4ec;
  --jr-hair: #e7e2d6;
  --jr-ink: #1b2a22;
  --jr-body: #5a6377;
  --jr-sec: 72px;              /* every section's top and bottom */
  --jr-head: 32px;             /* a section head to its content */
  --jr-gap: 20px;              /* card gutter */
  --jr-r: 16px;                /* card radius */
  --jr-ease: cubic-bezier(.2, .7, .2, 1);
  --jr-shadow: 0 2px 4px rgba(var(--jr-shadow-rgb), .04), 0 12px 28px -18px rgba(var(--jr-shadow-rgb), .35);
  --jr-deep-3: #16301f;
  --jr-on-accent: #1b2a22;      /* type on an accent button */
  --jr-hero-em: #e2b05a;        /* the second half of a title on a photograph */
  --jr-ph: #dfe5dc;             /* a photo's ground while it loads */
  --jr-hair-2: #d9d1bf;
  --jr-veil: 17, 34, 24;        /* photo veils (rgb) */
  --jr-shade: 8, 18, 12;        /* text shadows on photos (rgb) */
  --jr-shadow-rgb: 27, 42, 34;  /* card shadows (rgb) */
  --jr-accent-rgb: 212, 156, 61;
  /* the page.s two photographs and how each is framed */
  --jr-hero-img: url(/img/wildlife/hero.jpg);
  --jr-hero-pos: 62% 45%;
  --jr-hero-pos-phone: 70% 50%;
  --jr-cta-img: url(/img/wildlife/cta.jpg);
  --jr-cta-pos: 50% 62%;
  --jr-cta-pos-phone: 70% 60%;
  /* a photo across the whole band under a veil that is light past the copy;
     a theme can instead set the photo on the right and the veil solid on the left */
  --jr-hero-size: cover;
  --jr-hero-veil: linear-gradient(90deg, rgba(var(--jr-veil), .74) 0%, rgba(var(--jr-veil), .46) 42%, rgba(var(--jr-veil), .06) 78%, rgba(var(--jr-veil), 0) 100%);
  --jr-cta-size: cover;
  --jr-cta-veil: linear-gradient(90deg, rgba(var(--jr-veil), .78) 0%, rgba(var(--jr-veil), .5) 44%, rgba(var(--jr-veil), .08) 85%);
  background: var(--jr-canvas);
  color: var(--jr-body);
  font-family: 'Poppins', sans-serif;
}


/* the honeymoon theme: terracotta and blush on cream, deep green for the
   second button - the mock-up.s palette */
.jr.jr--love {
  --jr-deep: #24392f;
  --jr-deep-2: #2e4a3d;
  --jr-deep-3: #1a2b23;
  --jr-em: #b4513a;
  --jr-accent: #c65d43;
  --jr-accent-hover: #ae4b33;
  --jr-accent-ink: #a5462f;
  --jr-accent-50: #fbece6;
  --jr-accent-rgb: 198, 93, 67;
  --jr-on-accent: #fff;
  --jr-hero-em: #f6c2a6;
  --jr-canvas: #fbf6f1;
  --jr-hair: #eee2d8;
  --jr-hair-2: #e2cfc1;
  --jr-ink: #2a2124;
  --jr-ph: #efe3da;
  --jr-veil: 40, 22, 20;
  --jr-shade: 24, 12, 10;
  --jr-shadow-rgb: 60, 34, 28;
  --jr-hero-img: url(/img/honeymoon/hero-santorini.jpg);
  --jr-hero-pos: 50% 42%;
  --jr-hero-pos-phone: 80% 50%;
  --jr-cta-img: url("/img/hotels/Plan Your Honeymoon.jpg");
  --jr-cta-pos: 50% 50%;
  --jr-cta-pos-phone: 64% 50%;
}

/* the senior theme: deep green and warm gold on cream - the mock-up's palette */
.jr.jr--senior {
  --jr-deep: #1f3a2c;
  --jr-deep-2: #2a4b39;
  --jr-deep-3: #172d22;
  --jr-em: #9a6d1f;
  --jr-accent: #d9a650;
  --jr-accent-hover: #c99238;
  --jr-accent-ink: #8a611a;
  --jr-accent-50: #f8efdc;
  --jr-accent-rgb: 205, 152, 62;
  --jr-on-accent: #1f2a22;
  --jr-hero-em: #e6b862;
  --jr-canvas: #f8f5ee;
  --jr-hair: #e8e1d3;
  --jr-hair-2: #d8ccb6;
  --jr-ink: #1d2721;
  --jr-ph: #e4e3d8;
  --jr-veil: 31, 58, 44;
  --jr-shade: 10, 20, 14;
  --jr-shadow-rgb: 30, 40, 32;
  /* both photographs across the whole band, as the mock-up has them (the
     split banner tried first was "my own design" - the designer, 2026-10-13) */
  --jr-hero-img: url(/img/senior/hero-cruise.jpg);
  --jr-hero-pos: 50% 40%;
  --jr-hero-pos-phone: 80% 50%;
  --jr-cta-img: url(/img/senior/cta.jpg);
  --jr-cta-pos: 50% 42%;
  --jr-cta-pos-phone: 62% 50%;
}

/* style.css pads every <section> 72/80px; each band here sets its own */
.jr section { padding: var(--jr-sec) 0; }

.jr h1, .jr h2, .jr h3 { color: var(--jr-ink); letter-spacing: -.02em; }
.jr h2 { font-size: 26px; line-height: 1.22; font-weight: 600; margin: 0; }
.jr h2 em { font-style: normal; color: var(--jr-em); }

/* Font Awesome swaps each <i> for an <svg>; the disc stays on the wrapper */
.jr-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--jr-accent-50);
  color: var(--jr-deep);
  font-size: 18px;
}
.jr-ico svg, .jr-ico i { width: 1em; height: 1em; }
.jr-ico--sm { width: 40px; height: 40px; font-size: 15px; }
.jr-ico--line {
  width: 40px; height: 40px; font-size: 15px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(var(--jr-accent-rgb), .55);
  color: var(--jr-accent);
}

.jr-kicker {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jr-accent-ink);
}
.jr-kicker--light { color: var(--jr-accent); }

.jr-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--jr-deep);
  text-decoration: underline; text-decoration-color: rgba(var(--jr-veil), .3); text-underline-offset: 5px;
}
.jr-link i, .jr-link svg { font-size: 11px; transition: transform .2s var(--jr-ease); }
.jr-link:hover { color: var(--jr-em); text-decoration-color: currentColor; }
.jr-link:hover i, .jr-link:hover svg { transform: translateX(3px); }

/* ---- buttons: About's 44px pills, in the mock-up's sand ----------- */
.jr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--jr-ease), box-shadow .2s var(--jr-ease), background-color .2s var(--jr-ease), border-color .2s var(--jr-ease);
}
.jr-btn i, .jr-btn svg { font-size: 12px; }
.jr-btn--accent { background: var(--jr-accent); color: var(--jr-on-accent) !important; box-shadow: 0 10px 22px -10px rgba(var(--jr-accent-rgb), .7); }
.jr-btn--accent:hover { background: var(--jr-accent-hover); transform: translateY(-2px); }
.jr-btn--ghost {
  background: rgba(255, 255, 255, .08); color: #fff !important; border-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jr-btn--ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
/* outlined, for the "View all" buttons on a light ground */
.jr-btn--line { background: transparent; color: var(--jr-deep) !important; border-color: var(--jr-deep); }
.jr-btn--line:hover { background: var(--jr-deep); color: #fff !important; transform: translateY(-2px); }
.jr-btn--sm { min-height: 38px; padding: 0 16px; font-size: 12.5px; gap: 8px; }

/* ---- section heads ------------------------------------------------ */
.jr-head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 40px; align-items: end;
  margin-bottom: var(--jr-head);
}
/* the mock-up's short sand rule under each section title */
.jr-head h2::after, .jr-more__copy h2::after, .jr-impact__copy h2::after {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 3px;
  background: var(--jr-accent); margin-top: 14px;
}
.jr .jr-head__side p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; }
.jr-head__side--end { justify-self: end; }

/* =====================================================================
   1. Banner - About's hero language over the tiger
   ===================================================================== */
.jr .jr-hero {
  position: relative; isolation: isolate;
  min-height: 560px; display: flex; align-items: center;
  padding: 72px 0 88px;
  background: var(--jr-deep) var(--jr-hero-img) var(--jr-hero-pos) / var(--jr-hero-size) no-repeat;
  color: #fff;
}
.jr .jr-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* light, as the owner keeps asking of banners: the copy edge only */
  background: var(--jr-hero-veil);
}
.jr .jr-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--jr-veil), 0), rgba(var(--jr-veil), .32));
}
.jr-hero h1, .jr-hero__lead, .jr-hero__crumbs { text-shadow: 0 2px 14px rgba(var(--jr-shade), .5); }
.jr-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.jr-hero__crumbs a { color: rgba(255, 255, 255, .86); }
.jr-hero__crumbs a:hover { color: #fff; }
.jr-hero__crumbs a + a::before, .jr-hero__crumbs span::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.jr-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jr-hero__kicker i, .jr-hero__kicker svg { color: var(--jr-accent); font-size: 12px; }
.jr .jr-hero h1 {
  color: #fff; font-size: 40px; line-height: 1.12; font-weight: 600;
  max-width: 640px; margin: 18px 0 14px;
}
.jr .jr-hero h1 em { font-style: normal; color: var(--jr-hero-em); }
.jr .jr-hero__lead { max-width: 520px; margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.jr-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* the photograph.s caption, under the buttons: at the banner.s corner it
   sat under the floating call / WhatsApp / chat column */
.jr .jr-hero__place {
  margin: 40px 0 0;
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.jr-hero__place i, .jr-hero__place svg { color: var(--jr-accent); font-size: 11px; }

/* =====================================================================
   2. The promise strip - four cells, icon beside the words
   ===================================================================== */
.jr .jr-strip { background: #fff; padding: 26px 0; border-bottom: 1px solid var(--jr-hair); }
.jr .jr-strip__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
.jr-strip__row li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jr-strip__row li + li { border-left: 1px solid var(--jr-hair); padding-left: 20px; }
.jr-strip__row div { min-width: 0; }
.jr-strip__row strong { display: block; font-size: 14px; font-weight: 600; color: var(--jr-ink); line-height: 1.3; }
.jr-strip__row div span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; }

/* =====================================================================
   3. India's finest parks - photo, then a white panel with the name
   ===================================================================== */
.jr-parks__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.jr-park {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; min-width: 0;
  padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--jr-hair); border-radius: var(--jr-r); overflow: hidden;
  box-shadow: var(--jr-shadow);
  transition: transform .25s var(--jr-ease), box-shadow .25s var(--jr-ease), border-color .25s var(--jr-ease);
}
.jr-park__ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--jr-ph); }
.jr-park__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr--wild .jr-park:nth-child(1) img { object-position: 41% 50%; }
.jr--wild .jr-park:nth-child(2) img { object-position: 50% 50%; }
.jr--wild .jr-park:nth-child(3) img { object-position: 58% 50%; }
.jr--wild .jr-park:nth-child(4) img { object-position: 62% 45%; }
.jr--wild .jr-park:nth-child(5) img { object-position: 38% 50%; }
.jr-park__body { display: flex; align-items: center; gap: 10px; padding: 14px 14px 16px; flex: 1; }
.jr-park__txt { flex: 1; min-width: 0; }
.jr-park__txt strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); transition: color .2s; }
.jr-park__txt span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--jr-body); }
.jr-park__go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--jr-hair); color: var(--jr-deep); font-size: 12px;
  transition: background .2s, color .2s, border-color .2s;
}
.jr-park__go svg, .jr-park__go i { width: 1em; height: 1em; }
.jr-park:hover, .jr-park:focus-visible { transform: translateY(-3px); border-color: var(--jr-hair-2); box-shadow: 0 18px 34px -20px rgba(var(--jr-shadow-rgb), .45); }
.jr-park:hover img { transform: scale(1.05); }
.jr-park:hover .jr-park__txt strong { color: var(--jr-em); }
.jr-park:hover .jr-park__go { background: var(--jr-deep); border-color: var(--jr-deep); color: #fff; }

/* =====================================================================
   4. More than a safari - photo beside six experiences
   ===================================================================== */
.jr .jr-more { background: #fff; }
.jr-more__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.jr .jr-more__ph { margin: 0; height: 100%; }
/* a set height: a portrait photograph would otherwise stand as tall as it is wide-scaled (775px) */
.jr-more__ph img { display: block; width: 100%; height: 460px; object-fit: cover; border-radius: 18px; }
.jr--love .jr-more__ph img { object-position: 50% 78%; }
.jr .jr-more__lead { margin: 16px 0 24px; font-size: 13.5px; line-height: 1.7; }
.jr .jr-more__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.jr-more__list li {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--jr-hair); border-radius: 12px; background: var(--jr-canvas);
}
.jr-more__list div { min-width: 0; }
.jr-more__list strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--jr-ink); line-height: 1.3; }
.jr-more__list div span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; }

/* =====================================================================
   5. Curated itineraries - the site's package card in this page's colours
   ===================================================================== */
.jr-trips__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jr-trip {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--jr-hair); border-radius: var(--jr-r); overflow: hidden;
  box-shadow: var(--jr-shadow);
  transition: transform .25s var(--jr-ease), box-shadow .25s var(--jr-ease);
}
.jr-trip:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(var(--jr-shadow-rgb), .45); }
.jr-trip__ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--jr-ph); }
.jr-trip__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr-trip:hover .jr-trip__ph img { transform: scale(1.05); }
.jr-trip__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.jr-trip__dur {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--jr-accent-50); color: var(--jr-deep);
  font-size: 11.5px; font-weight: 500;
}
.jr-trip__dur i, .jr-trip__dur svg { color: var(--jr-accent-ink); font-size: 11px; }
.jr .jr-trip h3 { margin: 12px 0 8px; font-size: 16px; font-weight: 600; line-height: 1.35; text-transform: none; }
.jr-trip h3 a { color: var(--jr-ink); }
.jr-trip h3 a:hover { color: var(--jr-em); }
.jr .jr-trip__place, .jr .jr-trip__stays {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--jr-body);
}
.jr-trip__place i, .jr-trip__place svg, .jr-trip__stays i, .jr-trip__stays svg { flex: 0 0 auto; width: 12px; color: var(--jr-accent-ink); font-size: 11px; }
.jr-trip__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--jr-hair);
}
.jr-trip__body > p:last-of-type { margin-bottom: 14px; }
.jr-trip__price small { display: block; font-size: 11px; color: var(--jr-body); }
.jr-trip__price strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 600; color: var(--jr-ink); line-height: 1.2; }

.jr-trips__none {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: var(--jr-r);
  background: #fff; border: 1px solid var(--jr-hair);
}
.jr-trips__none div { flex: 1; min-width: 0; }
.jr-trips__none strong { display: block; font-size: 15px; font-weight: 600; color: var(--jr-ink); }
.jr-trips__none div span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.55; }

/* =====================================================================
   6. Responsible travel - words, then a forest card beside the elephants
   ===================================================================== */
.jr .jr-impact { background: #fff; }
.jr-impact__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.jr .jr-impact__copy p:not(.jr-kicker) { margin: 16px 0 24px; font-size: 13.5px; line-height: 1.7; max-width: 460px; }
.jr-impact__card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 320px; border-radius: 18px; overflow: hidden;
  background: var(--jr-deep); box-shadow: 0 24px 48px -28px rgba(var(--jr-shadow-rgb), .6);
}
.jr .jr-impact__list {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  list-style: none; margin: 0; padding: 30px 26px;
}
.jr-impact__list li { display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #fff; }
.jr .jr-impact__ph { margin: 0; }
.jr-impact__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }

/* =====================================================================
   7. Traveller stories - up to three cards side by side, no slider
   (2026-10-13, the designer: "slider nhi chaiye")
   ===================================================================== */
.jr .jr-stories {
  background: radial-gradient(120% 140% at 85% 0%, var(--jr-deep-2) 0%, var(--jr-deep) 46%, var(--jr-deep-3) 100%);
  color: #fff;
}
.jr-stories__head { margin-bottom: 28px; }
.jr .jr-stories h2 { color: #fff; }
.jr .jr-stories h2 em { color: var(--jr-hero-em); }
.jr-stories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jr-gap); }
.jr .jr-story {
  display: flex; flex-direction: column; min-width: 0;
  margin: 0; padding: 26px 24px 22px; border-radius: var(--jr-r);
  background: #fff; color: var(--jr-body);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .6);
}
.jr-story__mark { display: block; height: 30px; font-family: Georgia, 'Times New Roman', serif; font-size: 56px; line-height: 1; color: var(--jr-accent); }
/* style.css draws every blockquote as a navy slab of italic white text */
.jr .jr-story blockquote {
  flex: 1; margin: 6px 0 18px; padding: 0; border: 0; background: none;
  font-size: 13.5px; font-style: normal; line-height: 1.75; color: #3d4757;
}
.jr-story figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--jr-hair); }
.jr-story__initial {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--jr-deep); color: var(--jr-accent); font-size: 17px; font-weight: 600;
}
.jr-story figcaption > span:last-child { min-width: 0; }
.jr-story figcaption strong { display: block; font-size: 14px; font-weight: 600; color: var(--jr-ink); }
.jr-story figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--jr-body); }

/* =====================================================================
   8. Closing band - golden morning light, words on the left
   ===================================================================== */
.jr .jr-cta {
  position: relative; isolation: isolate;
  padding: 100px 0;
  background: var(--jr-deep) var(--jr-cta-img) var(--jr-cta-pos) / var(--jr-cta-size) no-repeat;
  color: #fff;
}
.jr .jr-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--jr-cta-veil);
}
.jr .jr-cta h2 { color: #fff; font-size: 28px; max-width: 520px; text-shadow: 0 2px 14px rgba(var(--jr-shade), .5); }
.jr .jr-cta h2 em { color: var(--jr-hero-em); }
.jr .jr-cta p { max-width: 480px; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(var(--jr-shade), .5); }
.jr-cta__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* =====================================================================
   Laptops and tablets
   ===================================================================== */
@media (max-width: 1199px) {
  .jr-parks__row { gap: 14px; }
  .jr-park__txt strong { font-size: 13.5px; }
  .jr-more__grid, .jr-impact__grid { gap: 40px; }
}

@media (max-width: 991px) {
  .jr { --jr-sec: 56px; --jr-head: 26px; }
  .jr .jr-hero { min-height: 500px; padding: 60px 0 80px; }
  .jr .jr-hero h1 { font-size: 34px; }
  .jr h2 { font-size: 23px; }
  .jr-head--split { grid-template-columns: 1fr; gap: 12px; }
  .jr-head__side--end { justify-self: start; }
  .jr .jr-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .jr-strip__row li + li { border-left: 0; padding-left: 0; }
  .jr-parks__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-more__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr-more__ph img { height: 340px; }
  .jr-trips__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-impact__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr .jr-cta { padding: 80px 0; }
  .jr .jr-cta h2 { font-size: 23px; }
}

@media (max-width: 767px) {
  .jr-stories__grid { grid-template-columns: 1fr; gap: 12px; }
  .jr .jr-hero { min-height: 0; }
  .jr .jr-hero h1 { font-size: 28px; }
  .jr .jr-hero { background-size: cover; }
  .jr .jr-hero::before { background: linear-gradient(90deg, rgba(var(--jr-veil), .7) 0%, rgba(var(--jr-veil), .45) 100%); }
}

/* =====================================================================
   Phones - a step smaller, rails with dots (the designer's phone rules)
   ===================================================================== */
@media (max-width: 575px) {
  .jr { --jr-sec: 42px; --jr-head: 20px; --jr-r: 14px; }
  .jr h2 { font-size: 20px; }
  .jr-head h2::after, .jr-more__copy h2::after, .jr-impact__copy h2::after { width: 36px; margin-top: 10px; }
  .jr-kicker { font-size: 10.5px; margin-bottom: 6px; }
  .jr .jr-head__side p { font-size: 12.5px; line-height: 1.6; margin-bottom: 8px; }
  .jr-link { font-size: 12.5px; }

  .jr .jr-hero { padding: 48px 0 70px; background-position: var(--jr-hero-pos-phone); }
  .jr .jr-hero h1 { font-size: 26px; margin: 14px 0 10px; }
  .jr .jr-hero__lead { font-size: 13.5px; line-height: 1.6; }
  .jr-hero__crumbs { margin-bottom: 14px; }
  .jr-hero__cta { margin-top: 20px; gap: 8px; }
  .jr-hero__cta .jr-btn { flex: 0 0 auto; }
  /* the site.s phone scale for a standing button (css/bj-phone-buttons.css): 12px, ~36px tall;
     "Explore Wildlife Journeys" drops a word so the pair stays on one line */
  .jr-btn { min-height: 36px; padding: 0 16px; font-size: 12px; gap: 8px; }
  .jr-btn i, .jr-btn svg { font-size: 11px; }
  .jr-btn--sm { min-height: 34px; padding: 0 14px; font-size: 11.5px; }
  .jr-tail { display: none; }
  .jr .jr-hero__place { margin-top: 22px; font-size: 10.5px; }

  .jr .jr-strip { padding: 18px 0; }
  .jr .jr-strip__row { gap: 14px 10px; }
  .jr-strip__row li { gap: 10px; align-items: flex-start; }
  .jr-strip__row .jr-ico { width: 36px; height: 36px; font-size: 14px; }
  .jr-strip__row strong { font-size: 12px; }
  .jr-strip__row div span { font-size: 11px; line-height: 1.4; }

  /* the parks and the itineraries page sideways; bj-mobrail adds the dots */
  .jr-parks__row, .jr-trips__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;
  }
  .jr-parks__row::-webkit-scrollbar, .jr-trips__row::-webkit-scrollbar { display: none; }
  .jr-park { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; box-shadow: none; }
  .jr-park__ph { aspect-ratio: 1 / 1; }
  .jr-park__body { padding: 10px 10px 12px; gap: 6px; }
  .jr-park__txt strong { font-size: 12.5px; }
  .jr-park__txt span { font-size: 10.5px; }
  .jr-park__go { width: 26px; height: 26px; font-size: 10px; }
  .jr-park:hover { transform: none; }

  .jr-more__ph img { height: 220px; border-radius: 14px; }
  .jr .jr-more__lead { margin: 12px 0 16px; font-size: 12.5px; line-height: 1.6; }
  .jr .jr-more__list { gap: 8px; }
  .jr-more__list li { gap: 8px; padding: 9px 10px; align-items: flex-start; }
  .jr-more__list .jr-ico--sm { width: 30px; height: 30px; font-size: 12px; }
  .jr-more__list strong { font-size: 12px; }
  .jr-more__list div span { font-size: 10.5px; }

  .jr-trip { flex: 0 0 100%; scroll-snap-align: start; box-shadow: none; }
  .jr-trip:hover { transform: none; }
  .jr-trip__body { padding: 14px; }
  .jr .jr-trip h3 { font-size: 14.5px; margin: 10px 0 6px; }
  .jr .jr-trip__place, .jr .jr-trip__stays { font-size: 12px; }
  .jr-trip__price strong { font-size: 16px; }
  .jr-trips__none { flex-wrap: wrap; padding: 16px; gap: 12px; }

  .jr .jr-impact__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-impact__card { grid-template-columns: 1fr; min-height: 0; }
  .jr .jr-impact__ph { order: -1; height: 190px; }
  .jr .jr-impact__list { padding: 20px 18px; gap: 12px; }
  .jr-impact__list li { font-size: 12.5px; gap: 12px; }
  .jr-impact__list .jr-ico--line { width: 34px; height: 34px; font-size: 13px; }

  .jr-stories__head { margin-bottom: 18px; }
  .jr .jr-story { padding: 18px 16px 16px; }
  .jr-story__mark { height: 24px; font-size: 46px; }
  .jr .jr-story blockquote { margin-bottom: 14px; font-size: 12.5px; line-height: 1.65; }
  .jr-story figcaption { padding-top: 12px; }
  .jr-story__initial { width: 38px; height: 38px; font-size: 15px; }
  .jr-story figcaption strong { font-size: 13px; }
  .jr-story figcaption small { font-size: 11px; }

  .jr .jr-cta { padding: 56px 0 64px; background-position: var(--jr-cta-pos-phone); }
  .jr .jr-cta { background-size: cover; }
  .jr .jr-cta::before { background: linear-gradient(90deg, rgba(var(--jr-veil), .78) 0%, rgba(var(--jr-veil), .55) 100%); }
  .jr .jr-cta h2 { font-size: 20px; }
  .jr .jr-cta p { font-size: 13px; line-height: 1.6; }
  .jr-cta__acts { gap: 8px; margin-top: 20px; }
  .jr-cta__acts .jr-btn { flex: 0 0 auto; }
}

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

/* =====================================================================
   Parts the honeymoon page adds (2026-10-13) - any theme may use them
   ===================================================================== */

/* destination cards as links (the wildlife page's are dialog buttons) */
a.jr-park { text-decoration: none; }
a.jr-park:hover { text-decoration: none; }

/* the price is per adult, as the listing says it */
.jr-trip__price small + strong + small { margin-top: 1px; }

/* ---- "Crafted for love": words beside a three-photo collage -------- */
.jr .jr-craft { background: #fff; }
.jr-craft__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.jr .jr-craft__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 470px; font-size: 13.5px; line-height: 1.75; }
.jr-btn--deep { background: var(--jr-deep); color: #fff !important; }
.jr-btn--deep:hover { background: var(--jr-deep-2); transform: translateY(-2px); }
.jr-craft__collage {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
  gap: 14px; height: 420px;
}
.jr .jr-craft__collage figure { margin: 0; min-height: 0; border-radius: 14px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 18px 38px -22px rgba(var(--jr-shadow-rgb), .55); background: var(--jr-ph); }
.jr-craft__collage figure:first-child { grid-row: 1 / span 2; }
.jr-craft__collage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- why travel with us: four cards, icon beside the words --------- */
.jr .jr-why { background: var(--jr-canvas); }
.jr-why__head { margin-bottom: var(--jr-head); }
.jr .jr-why__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jr-gap); list-style: none; margin: 0; padding: 0; }
.jr-why__row li {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0;
  padding: 20px 18px; border-radius: var(--jr-r); background: #fff; border: 1px solid var(--jr-hair);
}
.jr-why__row div { min-width: 0; }
.jr-why__row strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); }
.jr-why__row div span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; }
.jr-why__row .jr-ico { color: var(--jr-accent-ink); }

/* ---- traveller stories on a light ground --------------------------- */
.jr .jr-stories.jr-stories--light { background: #fff; color: var(--jr-body); }
.jr .jr-stories--light h2 { color: var(--jr-ink); }
.jr .jr-stories--light h2 em { color: var(--jr-em); }
.jr .jr-stories--light .jr-kicker--light { color: var(--jr-accent-ink); }
.jr .jr-stories--light .jr-story { background: var(--jr-canvas); border: 1px solid var(--jr-hair); box-shadow: none; }
.jr .jr-stories--light .jr-story__initial { background: var(--jr-accent-50); color: var(--jr-accent-ink); }

/* ---- the closing band's promises, under its buttons ---------------- */
.jr .jr-cta__trust {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  list-style: none; margin: 30px 0 0; padding: 0;
}
.jr-cta__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(var(--jr-shade), .5); }
.jr-cta__trust i, .jr-cta__trust svg { color: var(--jr-hero-em); font-size: 13px; }
.jr-cta__trust a { color: #fff; }

@media (max-width: 1199px) {
  .jr-craft__grid { gap: 40px; }
  .jr-craft__collage { height: 380px; }
}

@media (max-width: 991px) {
  .jr-craft__grid { grid-template-columns: 1fr; gap: 28px; }
  .jr .jr-why__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .jr .jr-craft__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-craft__collage { height: 260px; gap: 8px; }
  .jr .jr-craft__collage figure { border-width: 4px; border-radius: 12px; }
  .jr .jr-why__row { gap: 10px; }
  .jr-why__row li { flex-direction: row; gap: 10px; padding: 14px 12px; }
  .jr-why__row .jr-ico { width: 34px; height: 34px; font-size: 13px; }
  .jr-why__row strong { font-size: 12.5px; }
  .jr-why__row div span { font-size: 11px; line-height: 1.45; }
  .jr .jr-cta__trust { margin-top: 20px; gap: 8px 16px; }
  .jr-cta__trust li { font-size: 11.5px; }
}

/* the closing band's kicker sits on a photograph: the title's light accent */
.jr .jr-cta .jr-kicker { color: var(--jr-hero-em); text-shadow: 0 1px 8px rgba(var(--jr-shade), .5); }

/* =====================================================================
   Parts the senior page adds (2026-10-13) - any theme may use them
   ===================================================================== */

/* the mock-up's short line under the banner title ("Comfortable. Carefree. Meaningful.") */
.jr .jr-hero__tag { margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; text-shadow: 0 2px 14px rgba(var(--jr-shade), .5); }

/* ---- "Your Comfort Is Our Priority": words beside six cards -------- */
.jr .jr-care { background: #fff; }
.jr-care__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.jr .jr-care__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr .jr-care__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.jr-care__row li {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 16px 14px; border-radius: 14px; background: var(--jr-canvas); border: 1px solid var(--jr-hair);
}
.jr-care__row div { min-width: 0; }
.jr-care__row strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); }
.jr-care__row div span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; }
.jr-care__row .jr-ico { color: var(--jr-deep); }

@media (max-width: 991px) {
  .jr-care__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
  .jr .jr-care__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .jr .jr-hero__tag { font-size: 15px; margin-bottom: 8px; }
  .jr .jr-care__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr .jr-care__row { gap: 8px; }
  .jr-care__row li { gap: 8px; padding: 12px 10px; align-items: flex-start; }
  .jr-care__row .jr-ico { width: 32px; height: 32px; font-size: 12px; }
  .jr-care__row strong { font-size: 12px; }
  .jr-care__row div span { font-size: 10.5px; }
}
.jr .jr-care__copy .jr-hero__cta { margin-top: 0; }

/* =====================================================================
   THE MOCK-UP'S OWN COMPONENTS (2026-10-13, the designer: "jo maine diya
   as it is waise hi bnao") - the honeymoon and senior pages are built
   from these, section for section as her mock-ups draw them. The
   wildlife page keeps the earlier set above.
   ===================================================================== */

/* the site's .container widths (Bootstrap's), for a photograph that
   bleeds out to the window's edge */
.jr { --jr-cw: 100%; }
@media (min-width: 576px) { .jr { --jr-cw: 540px; } }
@media (min-width: 768px) { .jr { --jr-cw: 720px; } }
@media (min-width: 992px) { .jr { --jr-cw: 960px; } }
@media (min-width: 1200px) { .jr { --jr-cw: 1140px; } }
@media (min-width: 1400px) { .jr { --jr-cw: 1320px; } }

/* ---- destination cards: the name on the photograph, over a dark foot,
   the arrow in a white ring (the mock-ups' cards) ------------------- */
.jr-park--over { position: relative; aspect-ratio: 4 / 5; border: 0; background: var(--jr-ph); }
.jr-park--over .jr-park__ph { position: absolute; inset: 0; aspect-ratio: auto; }
.jr-park--over .jr-park__ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 12, 0) 42%, rgba(8, 16, 12, .3) 64%, rgba(8, 16, 12, .86) 100%);
}
.jr-park--over .jr-park__body { position: absolute; left: 0; right: 0; bottom: 0; align-items: flex-end; padding: 16px 16px 18px; }
.jr-park--over .jr-park__txt strong { color: #fff; font-size: 15px; }
.jr-park--over .jr-park__txt span { color: rgba(255, 255, 255, .86); }
.jr-park--over .jr-park__go { border-color: rgba(255, 255, 255, .75); color: #fff; }
.jr-park--over:hover .jr-park__txt strong { color: #fff; }
.jr-park--over:hover .jr-park__go { background: #fff; border-color: #fff; color: var(--jr-deep); }

/* ---- experiences: the photograph out to the window's edge with an
   arched right side, round outlined icons in a row ------------------ */
.jr .jr-more--icons { overflow-x: clip; }
.jr-more--icons .jr-more__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.jr-more--icons .jr-more__ph {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2));
  width: calc(100% + var(--b)); margin-left: calc(-1 * var(--b)); height: 440px;
}
.jr-more--icons .jr-more__ph img { height: 100%; border-radius: 0 170px 170px 0; }
.jr .jr-more__icons { display: flex; flex-wrap: wrap; gap: 18px 8px; list-style: none; margin: 26px 0 0; padding: 0; }
.jr-more__icons li { flex: 1 1 0; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.jr-more__icons .jr-ico { width: 58px; height: 58px; background: #fff; border: 1.5px solid var(--jr-accent); color: var(--jr-accent-ink); font-size: 19px; }
.jr-more__icons li > span:last-child { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--jr-ink); }

/* ---- the package card: title, four facts in two columns, the price
   with "/ Person", a "Popular" tag on the top-selling ones ----------- */
.jr-trip--spec { position: relative; }
.jr-trip__badge {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  padding: 5px 11px; border-radius: 999px;
  background: var(--jr-accent); color: var(--jr-on-accent); font-size: 11px; font-weight: 600;
}
.jr .jr-trip--spec h3 { margin: 0 0 8px; }
.jr .jr-trip__spec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; list-style: none; margin: 0 0 14px; padding: 0; }
.jr-trip__spec li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--jr-body); }
.jr-trip__spec i, .jr-trip__spec svg { flex: 0 0 auto; width: 12px; margin-top: 2px; color: var(--jr-accent-ink); font-size: 11px; }
.jr-trip--spec .jr-trip__price strong { color: var(--jr-accent-ink); font-size: 19px; }
.jr-trip__price strong span { font-size: 11.5px; font-weight: 500; color: var(--jr-body); }
.jr-trips__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.jr-trips__row--4 .jr-trip__body { padding: 16px 16px 18px; }

/* ---- stories: a round portrait beside the words, the name and the
   place under, the stars at the right -------------------------------- */
.jr-stories--cards .jr-story { padding: 20px 20px 16px; }
.jr-story__top { display: flex; align-items: flex-start; gap: 14px; }
.jr-story__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--jr-accent-50); color: var(--jr-accent-ink); font-size: 18px; font-weight: 600;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--jr-hair);
}
.jr .jr-story__top blockquote {
  flex: 1; margin: 0; padding: 0; border: 0; background: none;
  font-size: 13px; font-style: normal; line-height: 1.7; color: #3d4757;
}
.jr-story__top blockquote::before { content: "\201C"; margin-right: 3px; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 0; vertical-align: -7px; color: var(--jr-accent); }
.jr-story__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--jr-hair); }
.jr-story__foot strong { display: block; font-size: 14px; font-weight: 600; color: var(--jr-ink); }
.jr-story__foot small { display: block; margin-top: 2px; font-size: 12px; color: var(--jr-body); }
.jr-stars { flex: 0 0 auto; font-size: 12px; letter-spacing: 1px; color: #f2b632; white-space: nowrap; }

/* ---- why us (honeymoon): four columns divided by hairlines, faint
   mountains along the foot --------------------------------------- */
.jr .jr-why--line { position: relative; isolation: isolate; background: var(--jr-canvas); }
.jr .jr-why--line::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1; opacity: .07;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 220' preserveAspectRatio='none'><path d='M0 220 L110 120 L210 175 L330 60 L450 150 L550 105 L700 18 L820 135 L930 85 L1060 165 L1180 95 L1300 155 L1400 105 L1400 220 Z' fill='%231f2a22'/></svg>") bottom center / 100% 100% no-repeat;
}
.jr .jr-why--line .jr-why__row { gap: 0; }
.jr-why--line .jr-why__row li { background: none; border: 0; border-radius: 0; padding: 6px 26px; }
.jr-why--line .jr-why__row li:first-child { padding-left: 0; }
.jr-why--line .jr-why__row li + li { border-left: 1px solid var(--jr-hair-2); }

/* ---- why us (senior): six white cards, the icon above the words --- */
.jr .jr-care--stack { background: var(--jr-canvas); }
.jr-care--stack .jr-care__row li { flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px; text-align: center; background: #fff; }
.jr-care--stack .jr-care__row .jr-ico { width: 48px; height: 48px; font-size: 18px; background: var(--jr-accent-50); }
.jr-care--stack .jr-care__row strong { font-size: 13.5px; }
.jr-care--stack .jr-care__row div span { font-size: 12px; }

/* ---- "crafted for love": a leaning polaroid, two smaller prints at the
   right, a torn paper tag in a hand-written face --------------------- */
.jr-craft__collage--tilt { position: relative; display: block; height: 450px; }
.jr .jr-craft__shot {
  position: absolute; margin: 0; padding: 8px; border-radius: 10px; background: #fff; border: 0;
  box-shadow: 0 26px 50px -26px rgba(var(--jr-shadow-rgb), .55), 0 2px 6px rgba(var(--jr-shadow-rgb), .08);
}
.jr-craft__shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.jr-craft__shot--big { left: 0; top: 14px; width: 60%; height: 410px; transform: rotate(-2.5deg); }
.jr-craft__shot--a { right: 0; top: 0; width: 37%; height: 200px; transform: rotate(2deg); }
.jr-craft__shot--b { right: 0; bottom: 0; width: 37%; height: 215px; transform: rotate(-1.5deg); }
.jr-craft__tag { position: absolute; left: 42%; bottom: 34px; z-index: 2; transform: rotate(-5deg); filter: drop-shadow(0 10px 18px rgba(var(--jr-shadow-rgb), .25)); }
.jr-craft__tag span {
  display: block; padding: 12px 26px 14px; background: #fff;
  clip-path: polygon(0 8%, 5% 0, 14% 6%, 25% 0, 36% 5%, 48% 0, 60% 6%, 72% 0, 84% 5%, 95% 0, 100% 8%, 100% 92%, 95% 100%, 84% 94%, 72% 100%, 60% 95%, 48% 100%, 36% 94%, 25% 100%, 14% 95%, 5% 100%, 0 92%);
  font-family: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  font-size: 22px; line-height: 1.15; color: var(--jr-em); text-align: center; white-space: nowrap;
}

/* ---- the mock-ups' line-drawn leaves in the corners of a section --- */
.jr-leaf { position: absolute; z-index: 0; width: 140px; height: 180px; color: var(--jr-em); opacity: .13; pointer-events: none; }
.jr-leaf--tl { left: 6px; top: 24px; }
.jr-leaf--tr { right: 6px; top: 24px; transform: scaleX(-1); }
.jr-leaf--br { right: 6px; bottom: 24px; transform: rotate(180deg); }
.jr-leaf--bl { left: 6px; bottom: 24px; transform: rotate(180deg) scaleX(-1); }
.jr section > .container { position: relative; z-index: 1; }

/* ---- the closing band's promises: ringed icons, four across ------- */
.jr .jr-cta__trust--ring {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  max-width: none; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.jr-cta__trust--ring li { gap: 12px; font-size: 13px; }
.jr-ico--ring { width: 40px; height: 40px; background: transparent; border: 1.5px solid var(--jr-hero-em); color: var(--jr-hero-em); font-size: 14px; }

@media (max-width: 1199px) {
  .jr-trips__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-craft__collage--tilt { height: 400px; }
  .jr-craft__shot--big { height: 360px; }
  .jr-craft__shot--a { height: 175px; }
  .jr-craft__shot--b { height: 190px; }
  .jr-why--line .jr-why__row li { padding: 6px 16px; }
}
@media (max-width: 991px) {
  .jr-more--icons .jr-more__grid { gap: 28px; }
  .jr-more--icons .jr-more__ph { width: 100%; margin-left: 0; height: 340px; }
  .jr-more--icons .jr-more__ph img { border-radius: 20px; }
  .jr-why--line .jr-why__row li { padding: 10px 0; }
  .jr-why--line .jr-why__row li + li { border-left: 0; }
  .jr .jr-cta__trust--ring { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .jr-leaf { width: 90px; height: 115px; }
  .jr-craft__collage--tilt { height: 320px; }
  .jr-craft__shot--big { height: 290px; }
  .jr-craft__shot--a { height: 140px; }
  .jr-craft__shot--b { height: 150px; }
  .jr-craft__tag span { font-size: 17px; padding: 9px 18px 10px; }
}
@media (max-width: 575px) {
  .jr-more--icons .jr-more__ph { height: 220px; }
  .jr .jr-more__icons { gap: 14px 6px; margin-top: 18px; }
  .jr-more__icons li { min-width: 30%; gap: 7px; }
  .jr-more__icons .jr-ico { width: 46px; height: 46px; font-size: 15px; }
  .jr-more__icons li > span:last-child { font-size: 11px; }
  .jr-trips__row--4 .jr-trip__body { padding: 14px; }
  .jr-trip__spec li { font-size: 11.5px; }
  .jr-trip--spec .jr-trip__price strong { font-size: 16px; }
  .jr-story__avatar { width: 44px; height: 44px; font-size: 15px; }
  .jr .jr-story__top blockquote { font-size: 12.5px; line-height: 1.6; }
  .jr-craft__collage--tilt { height: 270px; }
  .jr-craft__shot--big { height: 240px; padding: 5px; }
  .jr-craft__shot--a { height: 112px; padding: 4px; }
  .jr-craft__shot--b { height: 124px; padding: 4px; }
  .jr-craft__tag { bottom: 22px; }
  .jr-craft__tag span { font-size: 14px; padding: 7px 14px 8px; }
  .jr .jr-cta__trust--ring { gap: 12px 10px; margin-top: 26px; padding-top: 18px; }
  .jr-cta__trust--ring li { gap: 8px; font-size: 11.5px; }
  .jr-ico--ring { width: 32px; height: 32px; font-size: 12px; }
}

/* four cards across: the price and its "/ Person" on one line, a compact
   button; between 1200 and 1399px the card is too narrow for two columns
   of facts, so they stand in one */
.jr-trips__row--4 .jr-trip__price strong { white-space: nowrap; }
.jr-trips__row--4 .jr-trip__foot .jr-btn--sm { padding: 0 13px; font-size: 12px; gap: 6px; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .jr-trips__row--4 .jr-trip--spec .jr-trip__price strong { font-size: 17px; }
  .jr .jr-trips__row--4 .jr-trip__spec { grid-template-columns: 1fr; gap: 6px; }
}

/* 1200-1399px: the card is 238px inside - "/ Person" goes under the figure
   so the button keeps its place beside it */
@media (min-width: 1200px) and (max-width: 1399px) {
  .jr-trips__row--4 .jr-trip__price strong { white-space: normal; }
  .jr-trips__row--4 .jr-trip__price strong span { display: block; margin-top: 1px; }
}
/* under 992px the experiences photo stands above the words, as every other
   two-column block does (the icons variant's own column rule outranked the
   base one) */
@media (max-width: 991px) {
  .jr-more--icons .jr-more__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  /* "On request" (the strong without a "/ Person" span) on one line beside the button */
  .jr-trips__row--4 .jr-trip__price strong:not(:has(span)) { font-size: 14px; white-space: nowrap; }
  .jr-trips__row--4 .jr-trip__foot .jr-btn--sm { padding: 0 11px; }
}

/* =====================================================================
   The group theme (2026-10-13): the site's own navy and orange on cream -
   the mock-up's palette - and the parts its sections add
   ===================================================================== */
.jr.jr--group {
  --jr-deep: #17233e;
  --jr-deep-2: #22315a;
  --jr-deep-3: #111a30;
  --jr-em: #17233e;
  --jr-accent: #f5761a;
  --jr-accent-hover: #dd660f;
  --jr-accent-ink: #d9640d;
  --jr-accent-50: #fff1e6;
  --jr-accent-rgb: 245, 118, 26;
  --jr-on-accent: #fff;
  --jr-hero-em: #ffffff;
  --jr-canvas: #faf7f2;
  --jr-hair: #ece6dc;
  --jr-hair-2: #dcd3c4;
  --jr-ink: #17233e;
  --jr-ph: #e6e8ee;
  --jr-veil: 20, 30, 50;
  --jr-shade: 8, 14, 28;
  --jr-shadow-rgb: 23, 35, 62;
  --jr-hero-img: url(/img/group/hero-bled.jpg);
  --jr-hero-pos: 50% 38%;
  --jr-hero-pos-phone: 78% 50%;
  --jr-cta-img: url(/img/group/cta-sunset.jpg);
  --jr-cta-pos: 50% 70%;
  --jr-cta-pos-phone: 50% 50%;
}
/* the title is set in white and the lead sits in the clear, as the mock-up
   draws it over the lake */
.jr--group .jr-hero__lead { max-width: 420px; }

/* the promise strip as a floating card over the banner's foot, one line
   each, ringed icons */
.jr .jr-strip--ring { padding: 0; border: 0; background: transparent; }
.jr .jr-strip--ring .jr-strip__row {
  margin-top: -34px; padding: 18px 26px; border-radius: 16px;
  background: #fff; box-shadow: 0 18px 40px -22px rgba(var(--jr-shadow-rgb), .45);
  position: relative; z-index: 2;
}
.jr-strip--ring .jr-strip__row li + li { border-left: 1px solid var(--jr-hair); }
.jr-strip--ring .jr-ico { width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--jr-accent); color: var(--jr-accent-ink); font-size: 16px; }
.jr-strip--ring .jr-strip__row strong { font-size: 13.5px; }

/* why travel with us: the six ringed icons in a 3x2 grid, the photo out to
   the window's edge on the left with a straight right side */
.jr-more--why .jr-more__ph img { border-radius: 0 20px 20px 0; }
.jr .jr-more__icons--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; margin-top: 22px; }
.jr-more__icons--grid li { min-width: 0; }

/* the package card the group mock-up draws: three lines, the button
   centred under them */
.jr-trips__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.jr .jr-trip__spec--lines { grid-template-columns: 1fr; gap: 7px; }
.jr-trip__spec--lines li { font-size: 12.5px; }
.jr-trip__foot--centre { flex-direction: column; align-items: stretch; gap: 10px; border-top: 0; padding-top: 4px; }
.jr-trip__foot--centre .jr-trip__price { display: flex; align-items: baseline; gap: 8px; }
.jr-trip__foot--centre .jr-trip__price small { font-size: 11.5px; }
.jr-trip__foot--centre .jr-trip__price strong { margin: 0; }
.jr-trip__foot--centre .jr-btn { align-self: center; min-width: 150px; }

/* the group travel experience: words beside three photo cards, each with
   its caption in a white foot */
.jr-craft--trio .jr-craft__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; }
.jr .jr-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.jr-trio li { background: #fff; border: 1px solid var(--jr-hair); border-radius: 14px; overflow: hidden; box-shadow: var(--jr-shadow); }
.jr .jr-trio figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--jr-ph); }
.jr-trio img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-trio strong { display: block; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--jr-ink); }

@media (max-width: 1199px) {
  .jr-trips__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .jr .jr-strip--ring .jr-strip__row { margin-top: -24px; padding: 14px 18px; }
  .jr-strip--ring .jr-strip__row li + li { border-left: 0; }
  .jr-more--why .jr-more__ph img { border-radius: 20px; }
  .jr-craft--trio .jr-craft__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 575px) {
  .jr .jr-strip--ring .jr-strip__row { margin-top: -18px; padding: 12px; gap: 12px 8px; }
  .jr-strip--ring .jr-ico { width: 34px; height: 34px; font-size: 13px; }
  .jr-strip--ring .jr-strip__row strong { font-size: 12px; }
  .jr .jr-more__icons--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; margin-top: 16px; }
  .jr-trips__row--3 .jr-trip { flex: 0 0 100%; }
  .jr .jr-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .jr-trio strong { padding: 8px 7px; font-size: 10.5px; line-height: 1.3; }
}

/* =====================================================================
   The beach theme (2026-10-13, Pages/BeachIslandHolidays.cshtml): navy
   and sand on cream - the mock-up's palette - and the parts its
   sections add. Built as the designer drew it: a light banner with the
   photograph fading in from the right, a torn-edged photo, the
   destinations named on their photographs, a cloud-shaped snorkelling
   photo, small package cards with a round arrow, five promises in a
   row, line-drawn palm fronds in the corners, and rounded-square buttons.
   ===================================================================== */
.jr.jr--beach {
  --jr-deep: #1d2d4f;
  --jr-deep-2: #2a3d64;
  --jr-deep-3: #142039;
  --jr-em: #1d2d4f;
  --jr-accent: #b8935a;
  --jr-accent-hover: #a37f48;
  --jr-accent-ink: #8d6a36;
  --jr-accent-50: #f5eee2;
  --jr-accent-rgb: 184, 147, 90;
  --jr-on-accent: #fff;
  --jr-hero-em: #fff;
  --jr-canvas: #faf7f1;
  --jr-hair: #ece5d8;
  --jr-hair-2: #dcd1be;
  --jr-ink: #1d2d4f;
  --jr-ph: #e2e9ee;
  --jr-veil: 18, 24, 40;
  --jr-shade: 10, 14, 26;
  --jr-shadow-rgb: 29, 45, 79;
  /* the /holiday tile's family photo, mirrored so the family sits right */
  --jr-hero-img: url(/img/beach/hero.jpg);
  --jr-hero-pos: 50% 30%;
  --jr-hero-pos-phone: 50% 32%;
  --jr-cta-img: url(/img/beach/cta.jpg);
  --jr-cta-pos: 50% 56%;
  --jr-cta-pos-phone: 58% 50%;
  --jr-cta-veil: linear-gradient(90deg, rgba(var(--jr-veil), .52) 0%, rgba(var(--jr-veil), .24) 42%, rgba(var(--jr-veil), 0) 75%);
}
/* the mock-up draws no rule under its titles, and rounded squares for buttons */
.jr--beach .jr-head h2::after, .jr--beach .jr-more__copy h2::after { display: none; }
.jr--beach .jr-kicker { font-weight: 600; letter-spacing: .2em; margin-bottom: 10px; }
.jr--beach .jr-btn { border-radius: 10px; }
.jr-btn--white { background: #fff; color: var(--jr-deep) !important; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.jr-btn--white:hover { background: var(--jr-accent-50); transform: translateY(-2px); }

/* line-drawn palm fronds, the base of the frond in the corner */
.jr--beach .jr-palm { width: 170px; height: 170px; color: #3f6f55; opacity: .2; }
.jr--beach .jr-leaf--tl.jr-palm { left: 0; top: 0; transform: rotate(90deg); }
.jr--beach .jr-leaf--tr.jr-palm { right: 0; top: 0; transform: rotate(180deg); }
.jr--beach .jr-leaf--br.jr-palm { right: 0; bottom: 0; transform: rotate(-90deg); }

/* ---- 1. the light banner: cream ground, the photograph on the right
   fading in, navy words, three promises with their icons on top ------- */
.jr .jr-hero--light {
  min-height: 540px; padding: 56px 0 64px;
  background: linear-gradient(90deg, #fbf7ef 0%, #fffdf9 60%, #fff 100%);
  color: var(--jr-body);
}
.jr .jr-hero--light::before {
  left: 42%;
  background: var(--jr-hero-img) var(--jr-hero-pos) / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 9%, rgba(0, 0, 0, .75) 20%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 9%, rgba(0, 0, 0, .75) 20%, #000 32%);
}
.jr .jr-hero--light::after { display: none; }
.jr-hero--light h1, .jr-hero--light .jr-hero__lead, .jr-hero--light .jr-hero__crumbs { text-shadow: none; }
.jr-hero--light .jr-hero__crumbs { color: var(--jr-body); }
.jr-hero--light .jr-hero__crumbs a { color: var(--jr-deep); }
.jr-hero--light .jr-hero__crumbs a:hover { color: var(--jr-accent-ink); }
.jr-hero--light .jr-hero__crumbs a + a::before, .jr-hero--light .jr-hero__crumbs span::before { color: var(--jr-hair-2); }
.jr .jr-hero--light h1 { color: var(--jr-ink); max-width: 520px; margin: 0 0 14px; }
.jr .jr-hero--light .jr-hero__lead { color: var(--jr-body); max-width: 440px; }
.jr .jr-hero__feats { display: flex; gap: 30px; list-style: none; margin: 34px 0 0; padding: 0; }
.jr-hero__feats li {
  width: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--jr-ink);
}
.jr-hero__feats .jr-ico {
  width: 50px; height: 50px; font-size: 18px;
  background: #fff; border: 1px solid var(--jr-hair-2); color: var(--jr-deep);
  box-shadow: 0 8px 18px -12px rgba(var(--jr-shadow-rgb), .45);
}

/* ---- 2. Dream Islands: words beside a photograph with a torn edge ---- */
.jr .jr-dream { position: relative; overflow-x: clip; background: #fff; padding: 60px 0; }
.jr-dream__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.jr .jr-dream__copy p:not(.jr-kicker) { margin: 16px 0 26px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr .jr-dream__ph { margin: 0; filter: drop-shadow(0 22px 28px rgba(var(--jr-shadow-rgb), .2)); }
.jr-dream__ph img {
  display: block; width: 100%; height: 360px; object-fit: cover; background: var(--jr-ph);
  /* a torn-paper edge: a rectangle pushed about by SVG noise */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='18' y='18' width='564' height='364' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='18' y='18' width='564' height='364' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}

/* ---- 3. four destinations, the name on the photograph and the arrow
   in a white disc; the section's title is the small sand kicker ------- */
.jr-head--small { align-items: center; margin-bottom: 20px; }
.jr .jr-head--small h2.jr-kicker { margin: 0; font-size: 12px; line-height: 1.4; letter-spacing: .2em; color: var(--jr-accent-ink); }
@media (min-width: 768px) {
  .jr-parks--four .jr-parks__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .jr-parks--four .jr-parks__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jr-park--over.jr-park--name { aspect-ratio: 20 / 21; }
.jr-park--name .jr-park__body { align-items: center; padding: 16px 18px; }
.jr-park--name .jr-park__txt strong { font-size: 18px; font-weight: 500; }
.jr-park--name .jr-park__go { width: 34px; height: 34px; background: #fff; border-color: #fff; color: var(--jr-ink); }
.jr-park--name:hover .jr-park__go { background: var(--jr-accent); border-color: var(--jr-accent); color: #fff; }

/* ---- 4. experiences: the snorkelling photo out to the window's left
   edge in a cloud-like outline, the six icons on a cream disc --------- */
.jr-more--blob .jr-more__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.jr-more--blob .jr-more__ph {
  height: 470px;
  /* past the container's 12px gutter too, so the photo meets the window edge */
  width: calc(100% + var(--b) + 12px); margin-left: calc(-1 * (var(--b) + 12px));
}
.jr-more--blob .jr-more__ph img {
  border-radius: 0; object-position: 50% 14%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 3C14 0 26 5 38 2C50-1 60 5 70 4C82 3 90 9 92 19C94 28 100 33 98 44C96 54 100 62 97 72C94 83 88 92 77 95C66 98 57 93 46 97C34 101 22 96 10 98C6 99 2 98 0 97Z'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 3C14 0 26 5 38 2C50-1 60 5 70 4C82 3 90 9 92 19C94 28 100 33 98 44C96 54 100 62 97 72C94 83 88 92 77 95C66 98 57 93 46 97C34 101 22 96 10 98C6 99 2 98 0 97Z'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr--beach .jr-more__icons .jr-ico { background: var(--jr-accent-50); border: 1px solid var(--jr-hair-2); color: var(--jr-deep); }

/* ---- 5. the package card the mock-up draws: photo, then the name and
   the length beside a round arrow ------------------------------------ */
.jr-trip--mini .jr-trip__ph { aspect-ratio: 2 / 1; }
.jr-trip--mini .jr-trip__body { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; }
.jr-trip__txt { flex: 1; min-width: 0; }
.jr .jr-trip--mini h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.jr-trip__txt span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--jr-body); }
.jr-trip__go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--jr-accent-50); color: var(--jr-deep) !important; font-size: 13px;
  transition: background-color .2s var(--jr-ease), color .2s var(--jr-ease);
}
.jr-trip__go svg, .jr-trip__go i { width: 1em; height: 1em; }
.jr-trip--mini:hover .jr-trip__go { background: var(--jr-deep); color: #fff !important; }

/* ---- 6. More than just a holiday: five promises in a row, a ringed
   icon beside each, hairlines between ------------------------------- */
.jr .jr-why--five { position: relative; overflow-x: clip; background: #f5efe4; padding: 52px 0; }
.jr-why--five .jr-why__head { margin-bottom: 26px; }
.jr .jr-why--five .jr-why__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.jr-why--five .jr-why__row li { align-items: center; gap: 12px; padding: 4px 18px; background: none; border: 0; border-radius: 0; }
.jr-why--five .jr-why__row li:first-child { padding-left: 0; }
.jr-why--five .jr-why__row li + li { border-left: 1px solid var(--jr-hair-2); }
.jr-why--five .jr-ico { width: 46px; height: 46px; font-size: 17px; background: #fff; border: 1px solid var(--jr-hair-2); color: var(--jr-deep); }
.jr-why--five .jr-why__row strong { font-size: 13px; font-weight: 500; line-height: 1.35; }

/* ---- 7. stories: the words, the stars, then a round portrait with the
   name and the place, on white cards ---------------------------------- */
.jr .jr-stories.jr-stories--quote { background: var(--jr-canvas); }
.jr .jr-stories--quote .jr-story { padding: 22px 22px 20px; background: #fff; border: 1px solid var(--jr-hair); box-shadow: var(--jr-shadow); }
.jr .jr-stories--quote .jr-story blockquote { flex: 1; margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.jr-stories--quote blockquote::before { content: "\201C"; margin-right: 2px; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 0; vertical-align: -6px; color: var(--jr-accent); }
.jr-stories--quote blockquote::after { content: "\201D"; margin-left: 1px; color: var(--jr-accent); }
.jr-stories--quote .jr-stars { display: block; margin-bottom: 16px; font-size: 16px; letter-spacing: 2px; }
.jr .jr-stories--quote .jr-story figcaption { border-top: 0; padding-top: 0; }
.jr-stories--quote .jr-story__avatar { width: 44px; height: 44px; font-size: 16px; }
.jr-story__who strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--jr-ink); }
.jr-story__who small { display: block; margin-top: 2px; font-size: 12px; color: var(--jr-body); }

@media (max-width: 1199px) {
  .jr-why--five .jr-why__row li { padding: 4px 12px; gap: 10px; }
  .jr-why--five .jr-ico { width: 40px; height: 40px; font-size: 15px; }
  .jr-why--five .jr-why__row strong { font-size: 12.5px; }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .jr .jr-hero--light::before { left: 46%; }
}
@media (max-width: 991px) {
  .jr .jr-hero--light { min-height: 460px; }
  .jr .jr-hero--light::before { left: 48%; }
  .jr .jr-hero--light .jr-hero__lead { max-width: 360px; }
  .jr .jr-hero__feats { gap: 18px; }
  .jr-dream__grid { grid-template-columns: 1fr; gap: 28px; }
  .jr-dream__ph img { height: 320px; }
  .jr-more--blob .jr-more__grid { grid-template-columns: 1fr; }
  .jr-more--blob .jr-more__ph { height: 340px; width: 100%; margin-left: 0; }
  .jr-more--blob .jr-more__ph img {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M6 8C18 0 30 6 42 3C56 0 66 6 78 4C90 3 98 12 97 26C96 38 100 48 98 60C96 74 99 86 88 93C78 99 66 94 54 97C40 100 28 95 16 97C6 98 1 90 2 78C3 66 0 56 2 44C4 32-1 18 6 8Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M6 8C18 0 30 6 42 3C56 0 66 6 78 4C90 3 98 12 97 26C96 38 100 48 98 60C96 74 99 86 88 93C78 99 66 94 54 97C40 100 28 95 16 97C6 98 1 90 2 78C3 66 0 56 2 44C4 32-1 18 6 8Z'/></svg>");
  }
  .jr .jr-why--five .jr-why__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .jr-why--five .jr-why__row li, .jr-why--five .jr-why__row li:first-child { padding: 0 10px 0 0; }
  .jr-why--five .jr-why__row li + li { border-left: 0; }
}
/* phones and small tablets: the photograph on top, fading into the words */
@media (max-width: 767px) {
  .jr .jr-hero--light { min-height: 0; padding: 290px 0 40px; }
  .jr .jr-hero--light::before {
    left: 0; right: 0; bottom: auto; height: 310px;
    background-position: var(--jr-hero-pos-phone);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  }
  .jr .jr-hero--light .jr-hero__lead { max-width: none; }
}
@media (max-width: 575px) {
  .jr--beach .jr-kicker { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 6px; }
  .jr--beach .jr-palm { width: 96px; height: 96px; }

  .jr .jr-hero--light { padding: 238px 0 34px; }
  .jr .jr-hero--light::before { height: 256px; }
  .jr .jr-hero--light h1 { font-size: 26px; margin-bottom: 10px; }
  .jr .jr-hero__feats { gap: 10px; margin-top: 22px; }
  .jr-hero__feats li { width: auto; flex: 1 1 0; gap: 7px; font-size: 11px; }
  .jr-hero__feats .jr-ico { width: 42px; height: 42px; font-size: 15px; }

  .jr .jr-dream { padding: 40px 0; }
  .jr .jr-dream__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-dream__grid { gap: 22px; }
  .jr-dream__ph img { height: 210px; }

  .jr .jr-head--small h2.jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr-park--over.jr-park--name { aspect-ratio: 1 / 1; }
  .jr-park--name .jr-park__body { padding: 10px 10px 12px 12px; }
  .jr-park--name .jr-park__txt strong { font-size: 14px; }
  .jr-park--name .jr-park__go { width: 28px; height: 28px; font-size: 10px; }

  .jr-more--blob .jr-more__ph { height: 240px; }

  .jr-trip--mini .jr-trip__body { padding: 12px 14px; gap: 10px; }
  .jr .jr-trip--mini h3 { font-size: 13.5px; }
  .jr-trip__txt span { font-size: 11.5px; }
  .jr-trip__go { width: 32px; height: 32px; font-size: 11px; }

  .jr .jr-why--five { padding: 40px 0; }
  .jr-why--five .jr-why__head { margin-bottom: 18px; }
  .jr .jr-why--five .jr-why__row { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .jr-why--five .jr-why__row li, .jr-why--five .jr-why__row li:first-child { padding: 0; gap: 9px; }
  .jr-why--five .jr-ico { width: 36px; height: 36px; font-size: 13px; }
  .jr-why--five .jr-why__row strong { font-size: 12px; }

  .jr .jr-stories--quote .jr-story { padding: 16px 16px 14px; }
  .jr .jr-stories--quote .jr-story blockquote { font-size: 12.5px; line-height: 1.6; }
  .jr-stories--quote .jr-stars { font-size: 14px; margin-bottom: 12px; }
  .jr-stories--quote .jr-story__avatar { width: 38px; height: 38px; font-size: 14px; }
  .jr-story__who strong { font-size: 13px; }
  .jr-story__who small { font-size: 11px; }
}

/* =====================================================================
   The family theme (2026-10-13): Pages/FamilyHolidays.cshtml at
   /family-holidays. The mock-up's palette - cream grounds, navy titles
   in one colour, deep-green buttons, orange stars - and the parts its
   sections add, each usable by any theme:
     .jr-hero--mist   a light banner, cream mist over the photo
     .jr-strip--stack the promise strip with the icon above the words
     .jr-duo          words beside one large rounded photograph
     .jr-ints/.jr-int interest cards: wide photo, white panel, pale disc
     .jr-ease         words beside four icon cells over painted hills
     .jr-says/.jr-say review cards with a photograph on top
     .jr-cta--row     the closing band's words left, one white button right
   It shares the beach page's .jr-park--name and .jr-btn--white, sized
   for this page under .jr--family.
   ===================================================================== */
.jr.jr--family {
  --jr-deep: #154535;
  --jr-deep-2: #1d5843;
  --jr-deep-3: #0f3328;
  --jr-em: #142238;
  --jr-accent: #f29a1f;
  --jr-accent-hover: #dd8812;
  --jr-accent-ink: #a5662a;
  --jr-accent-50: #fbf1e3;
  --jr-accent-rgb: 242, 154, 31;
  --jr-on-accent: #fff;
  --jr-hero-em: #f6c98e;
  --jr-canvas: #f8f5ef;
  --jr-hair: #ece7de;
  --jr-hair-2: #ddd5c8;
  --jr-ink: #142238;
  --jr-body: #565b6b;
  --jr-ph: #e8e6e0;
  --jr-veil: 14, 22, 34;
  --jr-shade: 6, 10, 18;
  --jr-shadow-rgb: 20, 34, 56;
  --jr-mist: 247, 244, 238;     /* the light banner's cream mist (rgb) */
  /* the tile's photograph, widened on its left with its own edge colours
     (img/family/hero.jpg) so the family stands clear of the words */
  --jr-hero-img: url(/img/family/hero.jpg);
  /* under 992px the banner stacks over the plain tile photo, at its own height */
  --jr-hero-stack-img: url(/img/travel-styles/family.jpg);
  --jr-hero-stack-h: 74.5vw;
  --jr-cta-img: url(/img/family/cta.jpg);
  --jr-cta-pos: 50% 44%;
  --jr-cta-pos-phone: 62% 44%;
  background: #fdfcfa;
}
/* the mock-up's titles are one colour, with no rule under them */
.jr--family .jr-head h2::after { display: none; }
/* her titles as she wrote them ("Journeys that bring you closer"), not style.css's capitalised h2 */
.jr--family h1, .jr--family h2 { text-transform: none; }
.jr--family .jr-btn--deep { box-shadow: 0 10px 22px -12px rgba(var(--jr-shadow-rgb), .55); }

/* ---- 1. the light banner ------------------------------------------ */
.jr .jr-hero--mist {
  min-height: 580px; padding: 60px 0 72px;
  background: rgb(var(--jr-mist)) var(--jr-hero-img) var(--jr-hero-mist-pos, right 35%) / var(--jr-hero-mist-size, auto 100%) no-repeat;
  color: var(--jr-ink);
}
.jr .jr-hero--mist::before {
  background: linear-gradient(90deg, rgb(var(--jr-mist)) 0%, rgb(var(--jr-mist)) 20%, rgba(var(--jr-mist), .9) 29%, rgba(var(--jr-mist), .5) 37%, rgba(var(--jr-mist), 0) 46%);
}
.jr .jr-hero--mist::after { display: none; }
.jr-hero--mist h1, .jr-hero--mist .jr-hero__lead, .jr-hero--mist .jr-hero__crumbs { text-shadow: 0 1px 12px rgba(var(--jr-mist), .9); }
.jr-hero--mist .jr-hero__crumbs { color: rgba(var(--jr-shadow-rgb), .5); }
.jr-hero--mist .jr-hero__crumbs a { color: var(--jr-body); }
.jr-hero--mist .jr-hero__crumbs a:hover { color: var(--jr-ink); }
.jr-hero--mist .jr-hero__crumbs a + a::before, .jr-hero--mist .jr-hero__crumbs span::before { color: rgba(var(--jr-shadow-rgb), .3); }
.jr .jr-hero--mist .jr-kicker { margin: 0; }
.jr .jr-hero--mist h1 { color: var(--jr-ink); max-width: 420px; margin: 10px 0 14px; }
.jr .jr-hero--mist .jr-hero__lead { max-width: 350px; color: var(--jr-body); }

/* ---- 2. the promise strip, the icon above the words --------------- */
.jr .jr-strip--stack { background: var(--jr-canvas); padding: 30px 0; border-bottom: 0; }
.jr-strip--stack .jr-strip__row li { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.jr-strip--stack .jr-strip__row li, .jr-strip--stack .jr-strip__row li + li { padding: 0 12px; }
.jr-strip--stack .jr-ico { width: auto; height: auto; background: none; color: var(--jr-ink); font-size: 26px; }
.jr-strip--stack .jr-strip__row div span { max-width: 210px; margin: 4px auto 0; }

/* ---- 3. words beside one large photograph ------------------------- */
.jr-duo__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.jr .jr-duo__copy h2 { max-width: 380px; }
.jr .jr-duo__copy p:not(.jr-kicker) { margin: 14px 0 24px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr .jr-duo__ph { margin: 0; }
.jr-duo__ph img {
  display: block; width: 100%; height: 400px; object-fit: cover; object-position: 50% 72%;
  border-radius: 18px; background: var(--jr-ph);
  box-shadow: 0 24px 48px -30px rgba(var(--jr-shadow-rgb), .5);
}

/* ---- 4. destinations four across, the name alone on the photo, the
   arrow in a white disc ------------------------------------------- */
.jr .jr-parks--family { padding-top: 24px; }
.jr-parks__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jr--family .jr-park--over.jr-park--name { aspect-ratio: 27 / 25; border-radius: 14px; }
.jr--family .jr-park--name .jr-park__ph::after { background: linear-gradient(180deg, rgba(8, 16, 12, 0) 52%, rgba(8, 16, 12, .6) 100%); }
.jr--family .jr-park--name .jr-park__body { align-items: center; padding: 14px 14px 14px 18px; }
.jr--family .jr-park--name .jr-park__txt strong { font-size: 16px; font-weight: 500; }
.jr--family .jr-park--name .jr-park__go { width: 34px; height: 34px; background: #fff; border-color: #fff; color: var(--jr-ink); }
.jr--family .jr-park--name:hover .jr-park__go { background: var(--jr-deep); border-color: var(--jr-deep); color: #fff; }

/* ---- 5. interest cards three across ------------------------------- */
.jr-head--centre { text-align: center; margin-bottom: var(--jr-head); }
.jr .jr-head--centre p:not(.jr-kicker) { margin: 10px auto 0; max-width: 560px; font-size: 13.5px; line-height: 1.7; }
.jr .jr-ints { padding-top: 24px; }
.jr-ints__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jr-int {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; min-width: 0; width: 100%;
  padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none;
  background: #fff; border: 1px solid var(--jr-hair); border-radius: 14px; overflow: hidden;
  box-shadow: var(--jr-shadow);
  transition: transform .25s var(--jr-ease), box-shadow .25s var(--jr-ease);
}
a.jr-int:hover, a.jr-int:focus { text-decoration: none; color: inherit; }
.jr-int__ph { display: block; width: 100%; aspect-ratio: 16 / 7.2; overflow: hidden; background: var(--jr-ph); }
.jr-int__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr-int__body { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px 16px; flex: 1; }
.jr-int__txt { flex: 1; min-width: 0; }
.jr-int__txt strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); }
.jr-int__txt span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--jr-body); }
.jr-int__go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #f3eee6; color: var(--jr-ink); font-size: 12px;
  transition: background .2s, color .2s;
}
.jr-int__go svg, .jr-int__go i { width: 1em; height: 1em; }
.jr-int:hover, .jr-int:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(var(--jr-shadow-rgb), .45); }
.jr-int:hover .jr-int__ph img { transform: scale(1.05); }
.jr-int:hover .jr-int__go { background: var(--jr-deep); color: #fff; }

/* ---- 6. "Travel made easy": four icon cells, painted hills and pines
   along the foot ---------------------------------------------------- */
.jr .jr-ease {
  position: relative; isolation: isolate;
  background: var(--jr-canvas);
  padding-bottom: calc(var(--jr-sec) + 8vw);
}
.jr .jr-ease::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 20.8vw; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path fill='%23e2e9e2' d='M0 300V178l96-42 84 30 118-78 126 74 92-36 136 62 124-84 146 88 112-42 124 58 134-74 112 48 96-32v150z'/><path fill='%23cfdcd1' d='M0 300V222l146-32 156 36 176-46 166 42 186-36 176 32 166-42 156 36 116-22v110z'/><path fill='%23bacdbf' d='M0 300v-52c160-26 330-26 480-8s300 22 480 0 330-26 480 6v54z'/><g fill='%23a3baa9'><polygon points='30,150 -6,300 66,300'/><polygon points='110,160 76,300 144,300'/><polygon points='195,190 169,300 221,300'/><polygon points='1270,180 1241,300 1299,300'/><polygon points='1350,160 1316,300 1384,300'/><polygon points='1430,170 1399,300 1461,300'/></g><g fill='%238aa593'><polygon points='70,110 24,300 116,300'/><polygon points='150,130 109,300 191,300'/><polygon points='1310,130 1269,300 1351,300'/><polygon points='1395,110 1349,300 1441,300'/></g></svg>") center bottom / 100% 100% no-repeat;
}
.jr-ease__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.jr .jr-ease__copy h2 { max-width: 380px; }
.jr .jr-ease__copy p:not(.jr-kicker) { margin: 14px 0 0; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr .jr-ease__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; list-style: none; margin: 0; padding: 0; }
.jr-ease__row li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jr-ease__row .jr-ico { width: 52px; height: 52px; background: var(--jr-deep); color: #fff; font-size: 19px; box-shadow: 0 0 0 4px rgba(21, 69, 53, .08); }
.jr-ease__row div { min-width: 0; }
.jr-ease__row strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); }
.jr-ease__row div span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; }

/* ---- 7. what families say: three cards, no slider ---------------- */
.jr-says__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.jr .jr-say {
  display: flex; flex-direction: column; min-width: 0; margin: 0;
  background: #fff; border: 1px solid var(--jr-hair); border-radius: 14px; overflow: hidden;
  box-shadow: var(--jr-shadow);
}
.jr-say__ph { display: block; aspect-ratio: 16 / 6.6; overflow: hidden; background: var(--jr-ph); }
.jr-say__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-say__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
/* style.css draws every blockquote as a navy slab of white text */
.jr .jr-say blockquote {
  flex: 1; margin: 0 0 12px; padding: 0; border: 0; background: none;
  font-size: 13px; font-style: normal; line-height: 1.7; color: #3d4757;
}
.jr-say .jr-stars { color: var(--jr-accent); font-size: 14px; letter-spacing: 2px; }
.jr-say figcaption { margin-top: 8px; }
.jr-say figcaption strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--jr-ink); }
.jr-say figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--jr-body); }

/* ---- 8. the closing band: words left, one white button right ------ */
.jr .jr-cta--row { padding: 110px 0; }
.jr-cta--row > .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.jr-cta--row .jr-cta__copy { min-width: 0; }
.jr .jr-cta--row .jr-kicker { color: rgba(255, 255, 255, .88); }
.jr .jr-cta--row h2 { max-width: 560px; }
.jr-cta--row .jr-cta__acts { flex: 0 0 auto; margin-top: 0; }
.jr--family .jr-btn--white { min-height: 50px; padding: 0 28px; background: #fff; color: var(--jr-ink) !important; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }
.jr--family .jr-btn--white:hover { background: var(--jr-canvas); transform: translateY(-2px); }

@media (max-width: 1199px) {
  .jr .jr-hero--mist::before {
    background: linear-gradient(90deg, rgb(var(--jr-mist)) 0%, rgb(var(--jr-mist)) 16%, rgba(var(--jr-mist), .9) 26%, rgba(var(--jr-mist), .45) 36%, rgba(var(--jr-mist), 0) 44%);
  }
  .jr .jr-hero--mist .jr-hero__lead { max-width: 320px; }
  .jr-duo__grid, .jr-ease__grid { gap: 40px; }
}
@media (max-width: 991px) {
  /* the banner stacks: the words on cream, the whole photograph under them */
  .jr .jr-hero--mist {
    display: block; min-height: 0;
    padding: 44px 0 calc(var(--jr-hero-stack-h) + 4px);
    background: rgb(var(--jr-mist)) var(--jr-hero-stack-img) center bottom / 100% auto no-repeat;
  }
  .jr .jr-hero--mist::before {
    background: linear-gradient(180deg, rgb(var(--jr-mist)) 0, rgb(var(--jr-mist)) calc(100% - var(--jr-hero-stack-h)), rgba(var(--jr-mist), 0) calc(100% - var(--jr-hero-stack-h) + 60px));
  }
  .jr .jr-hero--mist .jr-hero__lead { max-width: 460px; }
  .jr-duo__grid, .jr-ease__grid { grid-template-columns: 1fr; gap: 28px; }
  .jr-duo__ph img { height: 340px; }
  .jr-parks__row--4, .jr-ints__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr .jr-ease { padding-bottom: calc(var(--jr-sec) + 12vw); }
  .jr-cta--row > .container { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 767px) {
  .jr-says__grid { grid-template-columns: 1fr; gap: 14px; }
}
/* phones: a step smaller; destinations and interests as rails of two with dots */
@media (max-width: 575px) {
  .jr .jr-hero--mist { padding: 30px 0 calc(var(--jr-hero-stack-h) + 4px); }
  .jr .jr-hero--mist h1 { font-size: 26px; margin: 8px 0; }
  .jr .jr-hero--mist .jr-hero__lead { font-size: 13px; }
  .jr-strip--stack .jr-strip__row li, .jr-strip--stack .jr-strip__row li + li { padding: 0 4px; gap: 6px; }
  .jr-strip--stack .jr-ico { width: auto; height: auto; font-size: 20px; }

  .jr .jr-duo__copy p:not(.jr-kicker) { margin: 10px 0 16px; font-size: 12.5px; line-height: 1.6; }
  .jr-duo__ph img { height: 220px; border-radius: 14px; }

  .jr .jr-parks--family, .jr .jr-ints { padding-top: 10px; }
  .jr--family .jr-park--name .jr-park__body { padding: 10px 10px 10px 12px; }
  .jr--family .jr-park--name .jr-park__txt strong { font-size: 13px; }
  .jr--family .jr-park--name .jr-park__go { width: 28px; height: 28px; font-size: 10px; }

  .jr .jr-head--centre p:not(.jr-kicker) { font-size: 12.5px; line-height: 1.6; }
  .jr-ints__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;
  }
  .jr-ints__row::-webkit-scrollbar { display: none; }
  .jr-int { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; box-shadow: none; }
  .jr-int:hover { transform: none; }
  .jr-int__ph { aspect-ratio: 4 / 3; }
  .jr-int__body { align-items: flex-start; gap: 6px; padding: 10px 10px 12px; }
  .jr-int__txt strong { font-size: 12.5px; }
  .jr-int__txt span { font-size: 10.5px; }
  .jr-int__go { width: 26px; height: 26px; font-size: 10px; }

  .jr .jr-ease__copy p:not(.jr-kicker) { font-size: 12.5px; line-height: 1.6; }
  .jr .jr-ease__row { gap: 16px 12px; }
  .jr-ease__row li { gap: 10px; align-items: flex-start; }
  .jr-ease__row .jr-ico { width: 38px; height: 38px; font-size: 14px; }
  .jr-ease__row strong { font-size: 12.5px; }
  .jr-ease__row div span { font-size: 11px; line-height: 1.45; }

  .jr-say__body { padding: 14px 16px 16px; }
  .jr .jr-say blockquote { font-size: 12.5px; line-height: 1.6; }

  .jr .jr-cta--row { padding: 52px 0 58px; }
  .jr--family .jr-btn--white { min-height: 38px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-ints__row { scroll-behavior: auto; }
}

/* =====================================================================
   The self drive theme (2026-10-13): Pages/SelfDriveJourneys.cshtml at
   /self-drive-journeys. Navy titles, gold and deep-teal buttons on
   cream - the mock-up's palette. It reuses the family page's mist banner
   (.jr-hero--mist) and the beach page's small heads (.jr-head--small) and
   story cards (.jr-stories--quote), and adds, for any theme:
     .jr-strip--card  the promise strip as a white card over the banner
     .jr-duo--torn    the photo out to the window's left edge, torn right side
     .jr-joy          words and a handwritten line beside a torn photo and
                      four icons on coloured discs
     .jr-trip--over   a package card with its name on the photograph
     .jr-turn         a band over a winding road, three snapshots pinned on it
     .jr-cta__script  a handwritten line at the closing band's right
   ===================================================================== */
.jr.jr--drive {
  --jr-deep: #12464f;
  --jr-deep-2: #1a5862;
  --jr-deep-3: #0d343b;
  --jr-em: #1d2a44;
  --jr-accent: #ad7d3d;
  --jr-accent-hover: #966a30;
  --jr-accent-ink: #8a6230;
  --jr-accent-50: #f6eee2;
  --jr-accent-rgb: 173, 125, 61;
  --jr-on-accent: #fff;
  --jr-hero-em: #f1cf9a;
  --jr-canvas: #f7f3ec;
  --jr-hair: #ebe4d8;
  --jr-hair-2: #dbd0bf;
  --jr-ink: #1d2a44;
  --jr-body: #59606f;
  --jr-ph: #e5e3dc;
  --jr-veil: 14, 22, 34;
  --jr-shade: 6, 10, 18;
  --jr-shadow-rgb: 29, 42, 68;
  --jr-mist: 248, 245, 239;
  /* the tile's photograph mirrored: the car at the right, the lake under the words */
  --jr-hero-img: url(/img/drive/hero.jpg);
  --jr-hero-mist-pos: 62% 46%;
  --jr-hero-mist-size: cover;
  --jr-hero-stack-img: url(/img/drive/hero.jpg);
  --jr-hero-stack-h: 58.3vw;
  /* the closing photo mirrored too, so the van drives in at the right */
  --jr-cta-img: url(/img/drive/cta.jpg);
  --jr-cta-pos: 50% 72%;
  --jr-cta-pos-phone: 64% 72%;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  background: #fdfcf9;
}
/* the mock-up's titles: one colour, no rule under them, cased as she wrote them */
.jr--drive .jr-head h2::after { display: none; }
.jr--drive h1, .jr--drive h2:not(.jr-kicker) { text-transform: none; }
@media (min-width: 992px) {
  /* as tall as the words (the designer, 2026-10-14: "faltu space remove
     krdo"), with room under the button for the promise card that overlaps
     the banner's foot; the photograph framed higher so the shorter band
     keeps the mountains and both faces */
  .jr--drive .jr-hero--mist { min-height: 0; padding: 56px 0 128px; --jr-hero-mist-pos: 62% 24%; }
}
@media (min-width: 1600px) {
  /* wide screens enlarge the photograph more: frame it lower so his face clears the card */
  .jr--drive .jr-hero--mist { --jr-hero-mist-pos: 62% 30%; }
}

/* ---- 2. the promise strip as a white card over the banner ---------- */
.jr .jr-strip--card { position: relative; z-index: 3; padding: 0; background: transparent; border: 0; }
.jr .jr-strip--card .jr-strip__row {
  margin-top: -64px; padding: 22px 20px 20px; border-radius: 28px;
  background: #fff; box-shadow: 0 22px 46px -26px rgba(var(--jr-shadow-rgb), .45);
}
.jr-strip--card .jr-strip__row li { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.jr-strip--card .jr-strip__row li, .jr-strip--card .jr-strip__row li + li { padding: 0 12px; }
.jr-strip--card .jr-ico { width: auto; height: auto; background: none; color: var(--jr-accent-ink); font-size: 28px; }
.jr-strip--card .jr-strip__row strong { font-size: 13.5px; }
.jr-strip--card .jr-strip__row div span { max-width: 200px; margin: 3px auto 0; font-size: 12px; }

/* ---- 3. the photograph out to the window's left edge, torn at the
   right; a line-drawn compass and hills at the section's right ------- */
.jr .jr-duo--torn { position: relative; overflow-x: clip; }
.jr-duo--torn .jr-duo__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 60px; }
.jr-duo--torn .jr-duo__ph {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2 + 12px));
  width: calc(100% + var(--b)); margin-left: calc(-1 * var(--b));
  filter: drop-shadow(0 22px 28px rgba(var(--jr-shadow-rgb), .18));
}
.jr-duo--torn .jr-duo__ph img {
  height: 420px; border-radius: 0; box-shadow: none; object-position: 50% 55%;
  /* a brushed edge: small, uneven steps rather than teeth */
  clip-path: polygon(0 0, 96% 0, 97.5% 2%, 96.5% 5%, 98.5% 8%, 97% 11%, 98.8% 14%, 97.2% 18%, 98.4% 21%, 96.6% 25%, 98.6% 28%, 97.4% 32%, 99% 36%, 97.2% 39%, 98.2% 43%, 96.8% 46%, 98.8% 50%, 97.4% 54%, 98.6% 57%, 96.6% 61%, 98.4% 64%, 97% 68%, 98.9% 72%, 97.3% 75%, 98.3% 79%, 96.7% 83%, 98.5% 86%, 97.1% 90%, 98.2% 94%, 96.4% 97%, 97.4% 100%, 0 100%);
}
.jr-deco { position: absolute; z-index: 0; color: var(--jr-accent-ink); opacity: .22; pointer-events: none; }
.jr-deco--compass { right: 3%; top: 28px; width: 120px; height: 120px; }
.jr-deco--hills { right: 2%; bottom: 18px; width: 240px; height: 84px; }

/* ---- 4. destinations: name and line on the photograph -------------- */
.jr .jr-parks--drive { padding-top: 24px; }
.jr--drive .jr-park--over { aspect-ratio: 21 / 20; border-radius: 12px; }
.jr--drive .jr-park--over .jr-park__txt strong { font-size: 15px; }
.jr--drive .jr-park--over .jr-park__txt span { font-size: 12px; }

/* ---- 5. "More than just a drive" ----------------------------------- */
.jr .jr-joy { position: relative; overflow-x: clip; padding-top: 32px; }
.jr-joy__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.jr .jr-joy__copy { padding-top: 36px; }
.jr .jr-joy__copy p:not(.jr-kicker):not(.jr-joy__note) { margin: 14px 0 0; max-width: 430px; font-size: 13.5px; line-height: 1.75; }
.jr .jr-joy__note {
  margin: 28px 0 0 22px; max-width: 320px;
  font-family: var(--jr-script); font-size: 20px; line-height: 1.35; color: var(--jr-accent-ink);
  transform: rotate(-4deg); transform-origin: left center;
}
.jr-joy__note span { margin-right: 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; line-height: 0; vertical-align: -12px; }
.jr-joy__sketch { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 14px; color: var(--jr-accent-ink); opacity: .35; }
.jr .jr-joy__ph {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2 + 12px));
  width: calc(100% + var(--b)); margin: 0;
  filter: drop-shadow(0 22px 28px rgba(var(--jr-shadow-rgb), .18));
}
.jr-joy__ph img {
  display: block; width: 100%; height: 400px; object-fit: cover; object-position: 50% 50%; background: var(--jr-ph);
  clip-path: polygon(3.4% 0, 100% 0, 100% 100%, 2.8% 100%, 1.6% 97%, 3% 94%, 1.2% 90%, 2.6% 86%, 1% 83%, 2.9% 79%, 1.4% 75%, 2.7% 72%, 0.9% 68%, 2.4% 64%, 1.2% 61%, 3% 57%, 1.5% 54%, 2.6% 50%, 1% 46%, 2.8% 43%, 1.3% 39%, 2.5% 36%, 0.8% 32%, 2.6% 28%, 1.4% 25%, 3.1% 21%, 1.6% 18%, 2.7% 14%, 1.1% 11%, 2.9% 8%, 1.7% 5%, 3.2% 2%);
}
.jr .jr-joy__icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 26px 0 0; padding: 0; }
.jr-joy__icons li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0;
  padding: 0 10px; text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--jr-ink);
}
.jr-joy__icons li + li { border-left: 1px solid var(--jr-hair); }
.jr-joy__icons .jr-ico { width: 56px; height: 56px; background: var(--c); color: #fff; font-size: 20px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c); }

/* ---- 6. package cards with the name on the photograph -------------- */
a.jr-trip, a.jr-trip:hover { text-decoration: none; color: inherit; }
.jr-trip--over { position: relative; aspect-ratio: 11 / 8; border: 0; background: var(--jr-ph); }
.jr-trip--over .jr-trip__ph { position: absolute; inset: 0; aspect-ratio: auto; }
.jr-trip--over .jr-trip__ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 24, 0) 36%, rgba(8, 14, 24, .55) 62%, rgba(8, 14, 24, .9) 100%);
}
.jr-trip--over .jr-trip__body { position: absolute; left: 0; right: 0; bottom: 0; flex-direction: row; align-items: flex-end; gap: 12px; padding: 16px 16px 18px; }
.jr-trip--over .jr-trip__txt { flex: 1; min-width: 0; }
.jr-trip--over .jr-trip__txt strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.jr-trip--over .jr-trip__txt small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.jr-trip--over .jr-trip__txt span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.jr-trip--over .jr-trip__go { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--jr-ink) !important; font-size: 13px; }
.jr-trip--over .jr-trip__go svg, .jr-trip--over .jr-trip__go i { width: 1em; height: 1em; }
.jr-trip--over:hover .jr-trip__go { background: var(--jr-accent); color: #fff !important; }

/* ---- 7. "Every turn brings a new story": a band over the winding
   road, three snapshots pinned at the right --------------------------- */
.jr .jr-turn {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 70px 0;
  background: var(--jr-deep-3) url(/img/drive/turn.jpg) 50% 62% / cover no-repeat;
  color: #fff;
}
.jr .jr-turn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 24, 30, .9) 0%, rgba(10, 24, 30, .72) 40%, rgba(10, 24, 30, .3) 72%, rgba(10, 24, 30, .18) 100%);
}
.jr-turn__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.jr .jr-turn .jr-kicker { color: var(--jr-hero-em); }
.jr .jr-turn h2 { color: #fff; font-size: 28px; max-width: 420px; }
.jr .jr-turn__copy p:not(.jr-kicker) { margin: 14px 0 24px; max-width: 420px; font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.jr-turn__snaps { position: relative; height: 300px; }
.jr .jr-snap {
  position: absolute; top: 0; width: 34%; margin: 0; padding: 8px 8px 0;
  background: #fff; border-radius: 3px; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .65);
}
/* height: auto - the img height attribute would otherwise win over the aspect ratio */
.jr-snap img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.jr-snap figcaption { padding: 8px 4px 12px; font-family: var(--jr-script); font-size: 15px; line-height: 1.2; color: var(--jr-ink); text-align: center; white-space: nowrap; }
.jr-snap--a { left: 0; top: 26px; transform: rotate(-6deg); z-index: 1; }
.jr-snap--b { left: 34.5%; top: 0; transform: rotate(3deg); z-index: 2; }
.jr-snap--c { right: 0; top: 32px; transform: rotate(7deg); z-index: 3; }

/* ---- 9. the closing band's handwritten line (a <p>, so it must outrank .jr .jr-cta p) */
.jr .jr-cta--drive { padding: 96px 0 104px; }
.jr .jr-cta .jr-cta__script {
  position: absolute; right: 2%; top: 50%; margin: 0; max-width: none;
  font-family: var(--jr-script); font-size: 30px; line-height: 1.15; text-align: center;
  color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  transform: translateY(-50%) rotate(-8deg);
}

@media (max-width: 1199px) {
  .jr-duo--torn .jr-duo__ph img, .jr-joy__ph img { height: 360px; }
  .jr-turn__snaps { height: 260px; }
  .jr .jr-cta .jr-cta__script { font-size: 24px; }
}
@media (max-width: 991px) {
  .jr .jr-strip--card .jr-strip__row { margin-top: -36px; }
  .jr-duo--torn .jr-duo__grid, .jr-joy__grid, .jr-turn__grid { grid-template-columns: 1fr; gap: 28px; }
  .jr-duo--torn .jr-duo__ph, .jr .jr-joy__ph { width: auto; margin-left: 0; }
  .jr .jr-joy__copy { padding-top: 0; }
  .jr-deco--compass { width: 80px; height: 80px; top: 12px; }
  .jr-deco--hills { display: none; }
  .jr-turn__snaps { height: 300px; max-width: 560px; }
  /* the handwritten line leaves the photo's corner and follows the button */
  .jr .jr-cta .jr-cta__script { position: static; display: block; width: max-content; margin: 22px 4% 0 auto; transform: rotate(-6deg); }
}
@media (max-width: 575px) {
  .jr .jr-strip--card .jr-strip__row { margin-top: -26px; padding: 14px 8px; border-radius: 18px; gap: 14px 6px; }
  .jr-strip--card .jr-strip__row li, .jr-strip--card .jr-strip__row li + li { padding: 0 4px; gap: 6px; }
  .jr-strip--card .jr-ico { width: auto; height: auto; font-size: 20px; }
  .jr-strip--card .jr-strip__row strong { font-size: 12px; }
  .jr-strip--card .jr-strip__row div span { font-size: 10.5px; }

  .jr-duo--torn .jr-duo__ph img, .jr-joy__ph img { height: 220px; }
  .jr-deco--compass { width: 60px; height: 60px; }

  .jr--drive .jr-park--over { aspect-ratio: 4 / 5; }
  .jr--drive .jr-park--over .jr-park__txt strong { font-size: 13px; }
  .jr--drive .jr-park--over .jr-park__txt span { font-size: 10.5px; }

  .jr .jr-joy__note { font-size: 16px; margin: 18px 0 0 12px; }
  .jr-joy__note span { font-size: 26px; vertical-align: -9px; }
  .jr-joy__sketch { max-width: 220px; }
  .jr .jr-joy__icons { margin-top: 16px; }
  .jr-joy__icons li { padding: 0 4px; gap: 7px; font-size: 10.5px; }
  .jr-joy__icons .jr-ico { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--c); }

  .jr-trip--over .jr-trip__body { padding: 12px 12px 14px; }
  .jr-trip--over .jr-trip__txt strong { font-size: 14px; }
  .jr-trip--over .jr-trip__txt small, .jr-trip--over .jr-trip__txt span { font-size: 11px; }
  .jr-trip--over .jr-trip__go { width: 30px; height: 30px; font-size: 11px; }

  .jr .jr-turn { padding: 44px 0 50px; }
  .jr .jr-turn h2 { font-size: 20px; }
  .jr .jr-turn__copy p:not(.jr-kicker) { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-turn__snaps { height: 180px; }
  .jr .jr-snap { padding: 5px 5px 0; }
  .jr-snap figcaption { padding: 5px 2px 7px; font-size: 10px; white-space: normal; }

  .jr .jr-cta--drive { padding: 52px 0 46px; }
  .jr .jr-cta .jr-cta__script { font-size: 17px; margin-top: 16px; }
}

/* =====================================================================
   The rail theme (2026-10-13): Pages/RailHolidays.cshtml at
   /rail-holidays. Maroon buttons, a forest band and sand on cream - the
   mock-up's palette. It reuses the beach page's light banner
   (.jr-hero--light), small package cards (.jr-trip--mini) and story
   cards (.jr-stories--quote), and adds, for any theme:
     .jr-hero--wash      the light banner with its photograph across the band
     .jr-hero__script    a hand-written line under the banner title
     .jr-kicker--lines   a kicker between two rules; --trail, a rule after it
     .jr-promise         four promises on a white card over the banner's foot
     .jr-routes          words beside four tall destination cards
     .jr-ride            a forest band: words, a photograph, four promises
                         on a cream panel out to the window's edge
     .jr-head--rule      a centred kicker between rules, "View all" at the end
     .jr-stories--mount  stories over faint line-drawn mountains
     .jr-cta--rail       a two-colour title, a hand-written line at the right
   ===================================================================== */
.jr.jr--rail {
  --jr-deep: #7a1f2b;
  --jr-deep-2: #92293a;
  --jr-deep-3: #5c1520;
  --jr-em: #1e2433;
  --jr-accent: #d9ab5b;
  --jr-accent-hover: #c8973f;
  --jr-accent-ink: #976b20;
  --jr-accent-50: #f7eedc;
  --jr-accent-rgb: 217, 171, 91;
  --jr-on-accent: #3b2410;
  --jr-hero-em: #f3c08a;
  --jr-canvas: #fbf7f0;
  --jr-hair: #ece4d5;
  --jr-hair-2: #dccfb8;
  --jr-ink: #1e2433;
  --jr-ph: #e4e2d9;
  --jr-veil: 28, 20, 14;
  --jr-shade: 16, 10, 6;
  --jr-shadow-rgb: 52, 32, 20;
  --jr-forest: #1c3a2a;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  --jr-hero-img: url(/img/rail/hero-bernina.jpg);
  --jr-hero-pos: 62% 55%;
  --jr-hero-pos-phone: 72% 55%;
  --jr-cta-img: url(/img/rail/cta-brusio.jpg);
  --jr-cta-pos: 50% 46%;
  --jr-cta-pos-phone: 70% 50%;
  --jr-cta-veil: linear-gradient(90deg, rgba(var(--jr-veil), .72) 0%, rgba(var(--jr-veil), .44) 45%, rgba(var(--jr-veil), .1) 85%);
}
.jr--rail .jr-kicker { font-weight: 600; letter-spacing: .2em; }

/* a kicker between two short rules, or with one after it */
.jr .jr-kicker--lines, .jr .jr-kicker--trail { display: flex; align-items: center; gap: 14px; }
.jr-kicker--lines::before, .jr-kicker--lines::after, .jr-kicker--trail::after {
  content: ""; flex: 0 0 44px; height: 1px; background: currentColor; opacity: .55;
}

/* ---- 1. the banner: the photograph across the band, washed to cream
   behind the words, a hand-written line under the title -------------- */
.jr .jr-hero--wash { min-height: 600px; padding: 56px 0 132px; background: #fbf6ee; }
.jr .jr-hero--wash::before {
  left: 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .72) 28%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .72) 28%, #000 40%);
}
.jr .jr-hero--wash h1 { margin: 4px 0 0; }
.jr .jr-hero__script { margin: 0 0 14px; font-family: var(--jr-script); font-size: 26px; line-height: 1.35; color: var(--jr-deep); }
.jr .jr-hero--wash .jr-hero__lead { max-width: 430px; }

/* ---- 2. four promises on a white card over the banner's foot -------- */
.jr .jr-promise { position: relative; z-index: 2; padding: 0; background: transparent; }
.jr .jr-promise__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: -78px 0 0; padding: 26px 18px;
  background: #fff; border-radius: 24px; box-shadow: 0 26px 50px -28px rgba(var(--jr-shadow-rgb), .45);
}
.jr-promise__row li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0 18px; text-align: center; }
.jr-promise__row li + li { border-left: 1px solid var(--jr-hair); }
.jr-promise__ico { display: grid; place-items: center; height: 38px; margin-bottom: 4px; font-size: 26px; color: var(--jr-deep); }
.jr-promise__ico svg, .jr-promise__ico i { width: 1em; height: 1em; }
.jr-promise__row strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); }
.jr-promise__row li > span:last-child { max-width: 210px; font-size: 12px; line-height: 1.5; color: var(--jr-body); }

/* ---- 3. words beside four tall destination cards, the name (with a
   pin) and a line on the photograph, the arrow in a white disc -------- */
.jr .jr-routes { padding-top: 64px; }
.jr-routes__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2.22fr); gap: 36px; align-items: center; }
.jr .jr-routes__copy p:not(.jr-kicker) { margin: 14px 0 24px; font-size: 13.5px; line-height: 1.7; }
.jr-routes__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jr-park--over.jr-park--route { aspect-ratio: 2 / 3; }
.jr-park--route .jr-park__ph::after { background: linear-gradient(180deg, rgba(8, 16, 12, 0) 34%, rgba(8, 16, 12, .35) 58%, rgba(8, 16, 12, .9) 100%); }
.jr-park--route .jr-park__body { align-items: flex-end; gap: 8px; padding: 14px; }
.jr-park--route .jr-park__txt strong { font-size: 15px; line-height: 1.3; }
.jr-park--route .jr-park__txt strong svg, .jr-park--route .jr-park__txt strong i { width: .8em; margin-right: 3px; font-size: 13px; }
.jr-park--route .jr-park__txt > span { margin-top: 6px; font-size: 11.5px; line-height: 1.45; }
.jr-park--route .jr-park__go { width: 30px; height: 30px; background: #fff; border-color: #fff; color: var(--jr-ink); }
.jr-park--route:hover .jr-park__go { background: var(--jr-accent); border-color: var(--jr-accent); color: #fff; }

/* ---- 4. the forest band: words, the family at the window fading in
   from the words' side, four promises on a cream panel; gentle waves
   along its top and bottom edges ------------------------------------- */
.jr .jr-ride {
  padding: 0; background: var(--jr-forest); color: rgba(255, 255, 255, .86); overflow: hidden;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 4C18 0 34 6 52 3S84 0 100 4V96C82 100 66 94 48 97S16 100 0 96Z'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 4C18 0 34 6 52 3S84 0 100 4V96C82 100 66 94 48 97S16 100 0 96Z'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr-ride__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); min-height: 450px; }
.jr .jr-ride__copy { align-self: center; padding: 76px 36px 76px max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)); }
.jr .jr-ride__copy h2 { color: #fff; font-size: 28px; }
.jr .jr-ride__copy p:not(.jr-kicker) { margin: 14px 0 24px; max-width: 400px; font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.jr .jr-ride .jr-kicker--light { color: var(--jr-accent); }
.jr .jr-ride__ph { margin: 0; min-height: 0; }
.jr-ride__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}
.jr .jr-ride__list {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  list-style: none; margin: 0; padding: 44px max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)) 44px 30px;
  background: #fbf3e4;
}
.jr-ride__list li { display: flex; align-items: center; gap: 16px; min-width: 0; }
.jr-ride__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #f3e2c2; color: var(--jr-deep); font-size: 22px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--jr-hair-2);
}
.jr-ride__ico svg, .jr-ride__ico i { width: 1em; height: 1em; }
.jr-ride__list strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--jr-ink); }

/* ---- 5. the package head: a centred kicker between rules, "View all"
   at the end; the card's round arrow in sand -------------------------- */
.jr-head--rule { display: flex; align-items: center; gap: 18px; margin-bottom: var(--jr-head); }
.jr-head__line { flex: 1 1 auto; height: 1px; background: var(--jr-hair-2); }
.jr .jr-head--rule h2.jr-kicker { flex: 0 0 auto; margin: 0; font-size: 12.5px; line-height: 1.4; letter-spacing: .2em; color: var(--jr-accent-ink); }
.jr-head--rule .jr-btn { flex: 0 0 auto; margin-left: 4px; }
.jr--rail .jr-trip__go { background: var(--jr-accent); color: #fff !important; }
.jr--rail .jr-trip--mini:hover .jr-trip__go { background: var(--jr-deep); }

/* ---- 6. stories over faint line-drawn mountains, centred ----------- */
.jr .jr-stories--mount { position: relative; isolation: isolate; }
.jr .jr-stories--mount::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: -1; opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 220' preserveAspectRatio='none'><path d='M0 200L90 120L150 160L250 60L330 140L400 100L520 30L610 130L690 90L790 170L880 70L960 120L1060 40L1150 140L1230 90L1320 150L1400 110' fill='none' stroke='%23bba98a' stroke-width='1.4' vector-effect='non-scaling-stroke'/><path d='M0 216L120 160L220 190L340 120L470 185L600 140L720 195L860 130L990 180L1120 125L1250 185L1400 150' fill='none' stroke='%23bba98a' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") bottom center / 100% 100% no-repeat;
}
.jr-stories--mount .jr-stories__head { text-align: center; }
.jr .jr-stories--mount .jr-story { position: relative; padding-top: 24px; text-align: center; }
.jr .jr-stories--mount .jr-story blockquote { padding: 0 24px 0 34px; }
.jr-stories--mount blockquote::before { position: absolute; left: 18px; top: 12px; font-size: 46px; line-height: 1; vertical-align: 0; }
.jr-stories--mount .jr-story__who { justify-content: center; text-align: left; }

/* ---- 7. the closing band: the title's first line in a light sand, a
   hand-written line at the right ------------------------------------- */
.jr .jr-cta--rail h2 { font-size: 30px; line-height: 1.2; }
.jr .jr-cta--rail p.jr-kicker { max-width: none; margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: #fff; }
.jr .jr-cta p.jr-cta__hand {
  position: absolute; right: 12px; top: 26px; max-width: none; margin: 0;
  transform: rotate(-8deg);
  font-family: var(--jr-script); font-size: 34px; line-height: 1.25; color: #fff;
  text-shadow: 0 2px 14px rgba(var(--jr-shade), .6);
}

@media (max-width: 1199px) and (min-width: 992px) {
  .jr .jr-hero--wash::before { left: 34%; }
  .jr-park--route .jr-park__txt strong { font-size: 13.5px; }
}
@media (max-width: 991px) {
  .jr .jr-hero--wash { min-height: 520px; padding-bottom: 124px; }
  .jr .jr-hero--wash::before { left: 40%; }
  .jr .jr-hero--wash .jr-hero__lead { max-width: 340px; }
  .jr-routes__grid { grid-template-columns: 1fr; gap: 24px; }
  .jr-ride__grid { grid-template-columns: 1fr; min-height: 0; }
  .jr .jr-ride__copy { padding: 68px max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)) 28px; }
  .jr .jr-ride__ph { height: 320px; }
  .jr-ride__ph img { -webkit-mask-image: none; mask-image: none; }
  .jr .jr-ride__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)) 68px; }
  .jr .jr-cta p.jr-cta__hand { font-size: 26px; }
}
/* phones and small tablets: the photograph on top, fading into the words
   (as the beach banner does), the promise card two by two */
@media (max-width: 767px) {
  .jr .jr-hero--wash { min-height: 0; padding: 290px 0 84px; }
  .jr .jr-hero--wash::before {
    left: 0; right: 0; bottom: auto; height: 310px;
    background-position: var(--jr-hero-pos-phone);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  }
  .jr .jr-hero--wash .jr-hero__lead { max-width: none; }
  .jr .jr-promise__row { grid-template-columns: 1fr 1fr; row-gap: 18px; margin-top: -54px; }
  .jr-promise__row li:nth-child(3) { border-left: 0; }
  .jr .jr-cta p.jr-cta__hand { position: static; margin-top: 24px; transform: rotate(-5deg); text-align: right; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .jr-routes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .jr .jr-hero--wash { padding: 238px 0 66px; }
  .jr .jr-hero--wash::before { height: 256px; }
  .jr .jr-hero--wash h1 { font-size: 26px; }
  .jr .jr-hero__script { margin-bottom: 10px; font-size: 19px; }
  .jr-kicker--lines::before, .jr-kicker--lines::after, .jr-kicker--trail::after { flex-basis: 24px; }
  .jr .jr-kicker--lines, .jr .jr-kicker--trail { gap: 10px; }

  .jr .jr-promise__row { margin-top: -42px; padding: 16px 6px; border-radius: 16px; row-gap: 14px; }
  .jr-promise__row li { gap: 4px; padding: 0 8px; }
  .jr-promise__ico { height: 28px; margin-bottom: 2px; font-size: 20px; }
  .jr-promise__row strong { font-size: 12px; }
  .jr-promise__row li > span:last-child { font-size: 10.5px; line-height: 1.4; }

  .jr .jr-routes { padding-top: 42px; }
  .jr .jr-routes__copy p:not(.jr-kicker) { margin: 10px 0 16px; font-size: 12.5px; line-height: 1.6; }
  /* the destinations page sideways, two at a time; bj-mobrail adds the dots */
  .jr-routes__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;
  }
  .jr-routes__row::-webkit-scrollbar { display: none; }
  .jr-routes__row .jr-park { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; box-shadow: none; }
  .jr-park--route .jr-park__body { padding: 10px; gap: 6px; }
  .jr-park--route .jr-park__txt strong { font-size: 12.5px; }
  .jr-park--route .jr-park__txt > span { font-size: 10.5px; }
  .jr-park--route .jr-park__go { width: 26px; height: 26px; font-size: 10px; }

  .jr .jr-ride__copy { padding: 52px 15px 22px; }
  .jr .jr-ride__copy h2 { font-size: 20px; }
  .jr .jr-ride__copy p:not(.jr-kicker) { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr .jr-ride__ph { height: 220px; }
  .jr .jr-ride__list { gap: 14px 10px; padding: 22px 15px 52px; }
  .jr-ride__list li { gap: 10px; }
  .jr-ride__ico { width: 42px; height: 42px; font-size: 16px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--jr-hair-2); }
  .jr-ride__list strong { font-size: 11.5px; }

  .jr-head--rule { flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
  .jr-head--rule .jr-btn { margin-left: 0; }
  .jr-head__line { display: none; }
  .jr .jr-head--rule h2.jr-kicker { font-size: 10.5px; letter-spacing: .16em; }

  .jr .jr-stories--mount .jr-story { padding-top: 18px; }
  .jr-stories--mount blockquote::before { top: 8px; left: 12px; font-size: 36px; }
  .jr .jr-stories--mount .jr-story blockquote { padding: 0 14px 0 26px; }

  .jr .jr-cta--rail h2 { font-size: 21px; }
  .jr .jr-cta--rail p.jr-kicker { font-size: 10.5px; }
  .jr .jr-cta p.jr-cta__hand { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-routes__row { scroll-behavior: auto; }
}

/* =====================================================================
   The adventure theme (2026-10-13): Pages/AdventureJourneys.cshtml at
   /adventure-journeys. Navy and orange-red on warm cream - the mock-up's
   palette. It reuses the mist banner (.jr-hero--mist), the white promise
   card (.jr-strip--card), the stacked strip (.jr-strip--stack), the beach
   page's small heads and story cards, and adds, for any theme:
     .jr-hero__hand    a handwritten line in the banner's top-right corner
     .jr-strip--five   five promises in a row
     .jr-push          words beside .jr-blobs, photographs cut as soft blobs
     .jr-squiggle      a hand-drawn underline under a title
     .jr-rounds        experiences as round photographs, two-line captions
     .jr-trip--plan    a package card: photo, facts, "From ₹" and a round arrow
     .jr-strip--why    the stacked strip as a section with its own head
   ===================================================================== */
.jr.jr--adv {
  --jr-deep: #1a2140;
  --jr-deep-2: #262f55;
  --jr-deep-3: #121830;
  --jr-em: #c8440f;
  --jr-accent: #c54c18;
  --jr-accent-hover: #a93e12;
  --jr-accent-ink: #b8420f;
  --jr-accent-50: #fbece4;
  --jr-accent-rgb: 197, 76, 24;
  --jr-on-accent: #fff;
  --jr-hero-em: #f6b48e;
  --jr-canvas: #faf4ee;
  --jr-hair: #efe5dc;
  --jr-hair-2: #e1d2c4;
  --jr-ink: #1a2140;
  --jr-body: #556078;
  --jr-ph: #ebe4dc;
  --jr-veil: 16, 20, 36;
  --jr-shade: 8, 10, 20;
  --jr-shadow-rgb: 26, 33, 64;
  --jr-mist: 252, 247, 240;
  /* hikers walking into the sunrise, the glow under the words */
  --jr-hero-img: url(/img/adventure/hero.jpg);
  --jr-hero-mist-pos: 50% 80%;
  --jr-hero-mist-size: cover;
  --jr-hero-stack-img: url(/img/adventure/hero.jpg);
  --jr-hero-stack-h: 66.2vw;
  /* a hiker on a sunlit ridge, small in a wide morning landscape */
  --jr-cta-img: url(/img/adventure/cta.jpg);
  --jr-cta-pos: 50% 46%;
  --jr-cta-pos-phone: 56% 46%;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  background: #fefcfa;
}
/* the mock-up's titles: no rule under them, cased as she wrote them */
.jr--adv .jr-head h2::after { display: none; }
.jr--adv h1, .jr--adv h2:not(.jr-kicker) { text-transform: none; }
.jr--adv .jr-stars { color: #f59a0c; }

/* ---- 1. the banner: "Journeys" in orange-red, the short line under the
   title, a handwritten line in the top-right corner ------------------ */
@media (min-width: 992px) {
  .jr--adv .jr-hero--mist { min-height: 640px; padding-bottom: 120px; }
}
.jr--adv .jr-hero--mist h1 em { color: var(--jr-em); }
/* the title on one line (the designer, 2026-10-13: "ek hi line m") */
.jr--adv .jr-hero--mist h1 { max-width: none; }
.jr--adv .jr-hero--mist .jr-hero__tag { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--jr-ink); text-shadow: none; }
.jr--adv .jr-hero--mist .jr-hero__lead { max-width: 380px; }
.jr .jr-hero__hand {
  position: absolute; right: 2%; top: -14px; margin: 0;
  font-family: var(--jr-script); font-size: 28px; line-height: 1.12; text-align: center;
  color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  transform: rotate(-8deg);
}

/* ---- 2. five promises in the white card --------------------------- */
.jr .jr-strip--five .jr-strip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jr--adv .jr-strip--card .jr-ico { color: var(--jr-accent); }

/* ---- 3. "Journeys that push you further" --------------------------- */
.jr .jr-push { position: relative; overflow-x: clip; }
.jr-push__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; align-items: center; }
.jr .jr-push__copy h2 em { font-style: normal; color: var(--jr-em); }
.jr-squiggle { display: block; width: 110px; height: 14px; margin-top: 10px; color: var(--jr-accent); }
.jr .jr-push__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 430px; font-size: 13.5px; line-height: 1.75; }
.jr-blobs { position: relative; height: 460px; }
.jr-blobs::before {
  content: ""; position: absolute; left: 2%; top: 4%; width: 96%; height: 92%; z-index: 0;
  border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, rgba(var(--jr-accent-rgb), .12), rgba(var(--jr-accent-rgb), 0));
}
.jr .jr-blob {
  position: absolute; z-index: 1; margin: 0; overflow: hidden;
  background: var(--jr-ph); border: 5px solid #fff;
  box-shadow: 0 22px 40px -26px rgba(var(--jr-shadow-rgb), .55);
}
.jr-blob img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-blob--main { left: 0; top: 40px; width: 52%; height: 390px; border-radius: 48% 52% 40% 60% / 42% 46% 54% 58%; }
.jr-blob--main img { object-position: 45% 70%; }
.jr-blob--a { right: 0; top: 0; width: 44%; height: 150px; border-radius: 38% 62% 46% 54% / 55% 42% 58% 45%; }
.jr-blob--b { right: 6%; top: 158px; width: 41%; height: 132px; border-radius: 52% 48% 60% 40% / 46% 58% 42% 54%; }
.jr-blob--b img { object-position: 30% 50%; }
.jr-blob--c { right: 16%; top: 298px; width: 36%; height: 150px; border-radius: 44% 56% 50% 50% / 58% 44% 56% 42%; }
.jr .jr-blobs__hand {
  position: absolute; right: -6px; bottom: 26px; z-index: 2; margin: 0;
  font-family: var(--jr-script); font-size: 22px; line-height: 1.15; text-align: center;
  color: var(--jr-ink); transform: rotate(-10deg);
}
.jr-blobs__hand em { font-style: normal; color: var(--jr-em); }

/* ---- 4. destinations ----------------------------------------------- */
.jr .jr-parks--adv { padding-top: 16px; }
.jr--adv .jr-park--over { aspect-ratio: 4 / 3; border-radius: 12px; }
.jr--adv .jr-park--over .jr-park__txt strong { font-size: 16px; }
.jr--adv .jr-park--over .jr-park__txt span { font-size: 12px; }

/* ---- 5. experiences as round photographs --------------------------- */
.jr .jr-rounds { padding-top: 16px; }
.jr .jr-rounds__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.jr-round {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%;
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.jr-round__ph {
  display: block; width: 100%; max-width: 132px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: var(--jr-ph);
  box-shadow: 0 0 0 4px #fff, 0 14px 28px -16px rgba(var(--jr-shadow-rgb), .6);
  transition: transform .25s var(--jr-ease);
}
.jr-round__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-round__txt { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--jr-ink); transition: color .2s; }
.jr-round:hover .jr-round__ph, .jr-round:focus-visible .jr-round__ph { transform: translateY(-3px) scale(1.03); }
.jr-round:hover .jr-round__txt, .jr-round:focus-visible .jr-round__txt { color: var(--jr-em); }

/* ---- 6. the package card: facts, "From ₹" and a round arrow -------- */
.jr .jr-trips--adv { padding-top: 16px; }
.jr-trip--plan .jr-trip__ph { aspect-ratio: 16 / 8.6; }
.jr .jr-trip--plan h3 { margin: 0 0 10px; font-size: 15.5px; }
.jr .jr-trip--plan .jr-trip__spec { margin-bottom: 14px; }
.jr-trip--plan .jr-trip__spec li { font-size: 12px; }
.jr-trip--plan .jr-trip__foot { border-top: 0; padding-top: 4px; }
.jr-trip--plan .jr-trip__price strong { margin: 0; font-size: 18px; color: var(--jr-accent-ink); }
.jr-trip--plan .jr-trip__price small { margin-top: 1px; font-size: 11.5px; color: var(--jr-accent-ink); }
.jr-trip--plan .jr-trip__go {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--jr-accent); color: #fff !important; font-size: 13px;
  transition: background-color .2s var(--jr-ease), transform .2s var(--jr-ease);
}
.jr-trip--plan .jr-trip__go svg, .jr-trip--plan .jr-trip__go i { width: 1em; height: 1em; }
.jr-trip--plan .jr-trip__go:hover { background: var(--jr-accent-hover); transform: translateX(2px); }

/* ---- 7. why choose: the stacked strip with its own head ------------ */
.jr .jr-strip--why { position: relative; padding: 48px 0 52px; background: transparent; }
.jr .jr-strip--why .jr-strip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jr-strip--why .jr-head--small { margin-bottom: 26px; }
.jr-strip--why .jr-ico { color: var(--jr-accent); font-size: 30px; }
.jr-strip--why .jr-strip__row strong { font-size: 13px; font-weight: 500; line-height: 1.4; }
.jr-strip--why .jr-deco--hills { right: 2%; top: 10px; bottom: auto; }

/* ---- 8. stories ---------------------------------------------------- */
.jr--adv .jr-stories--quote .jr-head--small { margin-bottom: 22px; }

/* ---- 9. the closing band ------------------------------------------- */
.jr .jr-cta--adv { padding: 112px 0 104px; }
.jr .jr-cta--adv .jr-kicker { color: rgba(255, 255, 255, .9); }
.jr--adv .jr-btn--white { min-height: 48px; padding: 0 26px; }

@media (max-width: 1199px) {
  .jr-blobs { height: 420px; }
  .jr-blob--main { height: 350px; }
  .jr-blob--a { height: 136px; }
  .jr-blob--b { top: 146px; height: 120px; }
  .jr-blob--c { top: 274px; height: 136px; }
  .jr .jr-hero__hand { font-size: 24px; }
  .jr .jr-rounds__row { gap: 12px; }
}
@media (max-width: 991px) {
  .jr .jr-strip--five .jr-strip__row, .jr .jr-strip--why .jr-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .jr-push__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr .jr-rounds__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  /* the banner stacks: the handwritten line follows the button, in ink */
  .jr .jr-hero--mist .jr-hero__hand { position: static; display: block; width: max-content; margin: 18px 4% 0 auto; color: var(--jr-ink); text-shadow: none; transform: rotate(-6deg); }
  .jr--adv .jr-hero--mist .jr-hero__lead { max-width: 460px; }
}
@media (max-width: 575px) {
  .jr .jr-strip--five .jr-strip__row, .jr .jr-strip--why .jr-strip__row { gap: 14px 4px; }
  .jr .jr-strip--why { padding: 36px 0 40px; }
  .jr-strip--why .jr-ico { font-size: 22px; }
  .jr-strip--why .jr-strip__row strong { font-size: 11.5px; }
  .jr--adv .jr-hero--mist .jr-hero__tag { font-size: 15px; margin-bottom: 8px; }
  .jr .jr-hero--mist .jr-hero__hand { font-size: 17px; margin-top: 14px; }

  .jr .jr-push__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-blobs { height: 300px; }
  .jr .jr-blob { border-width: 3px; }
  .jr-blob--main { top: 24px; width: 54%; height: 250px; }
  .jr-blob--a { width: 44%; height: 96px; }
  .jr-blob--b { top: 102px; height: 86px; }
  .jr-blob--c { top: 194px; height: 96px; }
  /* inside the screen edge, clear of the call / WhatsApp column */
  .jr .jr-blobs__hand { right: 6%; bottom: -52px; font-size: 14px; }
  .jr-blobs { margin-bottom: 52px; }

  .jr--adv .jr-park--over { aspect-ratio: 4 / 5; }
  .jr--adv .jr-park--over .jr-park__txt strong { font-size: 13px; }
  .jr--adv .jr-park--over .jr-park__txt span { font-size: 10.5px; }

  .jr .jr-rounds__row { gap: 18px 8px; }
  .jr-round { gap: 8px; }
  .jr-round__ph { max-width: 96px; }
  .jr-round__txt { font-size: 11px; }

  .jr .jr-trip--plan h3 { font-size: 14px; }
  .jr-trip--plan .jr-trip__spec li { font-size: 11.5px; }
  .jr-trip--plan .jr-trip__price strong { font-size: 16px; }
  .jr-trip--plan .jr-trip__go { width: 32px; height: 32px; font-size: 11px; }

  .jr .jr-cta--adv { padding: 56px 0 60px; }
  .jr--adv .jr-btn--white { min-height: 38px; padding: 0 18px; }
}

/* =====================================================================
   The weekend theme (2026-10-13): Pages/WeekendGetaways.cshtml at
   /weekend-getaways. Navy titles and copper buttons on cream - the
   mock-up's palette. It reuses the rail page's washed banner
   (.jr-hero--light + .jr-hero--wash), the adventure page's hand-written
   corner line (.jr-hero__hand), the beach page's small heads
   (.jr-head--small) and four-across cards (.jr-parks--four), and adds,
   for any theme:
     .jr-arches        words beside four arched photographs
     .jr-stamp         a postage-stamp mark
     .jr-park--land    a landscape destination card, the arrow in a white disc
     .jr-exp           a torn-edged photograph with two polaroids, the words beside
     .jr-polaroid      a white-framed print, tilted
     .jr-trip--side    a package card: the photo at the left with a torn edge,
                       the length large, the state in italics
     .jr-cta--weekend  the closing band with three marks at its foot
   ===================================================================== */
.jr.jr--weekend {
  --jr-deep: #1d2b44;
  --jr-deep-2: #2a3b5a;
  --jr-deep-3: #141f33;
  --jr-em: #a8643a;
  --jr-accent: #a8643a;
  --jr-accent-hover: #93542e;
  --jr-accent-ink: #8d5230;
  --jr-accent-50: #f6ebe2;
  --jr-accent-rgb: 168, 100, 58;
  --jr-on-accent: #fff;
  --jr-hero-em: #f0c79b;
  --jr-canvas: #fbf7f1;
  --jr-hair: #ece3d7;
  --jr-hair-2: #dccdb9;
  --jr-ink: #1d2b44;
  --jr-ph: #e6e1d8;
  --jr-veil: 30, 22, 16;
  --jr-shade: 16, 10, 6;
  --jr-shadow-rgb: 50, 34, 24;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  /* the /holiday tile's terrace photo, mirrored so the friends sit right */
  --jr-hero-img: url(/img/weekend/hero.jpg);
  --jr-hero-pos: 30% 50%;
  --jr-hero-pos-phone: 62% 50%;
  --jr-cta-img: url(/img/weekend/cta-sunset-lake.jpg);
  --jr-cta-pos: 50% 42%;
  --jr-cta-pos-phone: 40% 55%;
  --jr-cta-veil: linear-gradient(90deg, rgba(var(--jr-veil), .66) 0%, rgba(var(--jr-veil), .36) 45%, rgba(var(--jr-veil), .06) 85%);
}
.jr--weekend .jr-kicker { font-weight: 600; letter-spacing: .22em; }
/* the mock-up draws no rule under its small heads */
.jr--weekend .jr-head h2::after { display: none; }
/* framing: the beach arch on the sand, the Nainital card clear of a power line */
.jr-arches__row a:nth-of-type(4) img { object-position: 74% 50%; }
.jr-parks--land .jr-parks__row > :nth-child(2) img { object-position: 100% 50%; }

/* ---- 1. the banner: "Getaways" in copper, a line under the title, the
   three promises as copper line icons between hairlines -------------- */
.jr--weekend .jr-hero--wash { min-height: 560px; padding-bottom: 64px; }
@media (min-width: 768px) {
  .jr--weekend .jr-hero--wash::before {
    left: 36%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
  }
}
.jr--weekend .jr-hero--light h1 { margin: 2px 0 0; }
.jr--weekend .jr-hero--light h1 em { font-style: normal; color: var(--jr-em); }
.jr--weekend .jr-hero--light .jr-hero__tag { margin: 12px 0 10px; font-size: 18px; font-weight: 500; color: var(--jr-ink); text-shadow: none; }
.jr--weekend .jr-hero__feats { gap: 0; margin-top: 30px; }
.jr--weekend .jr-hero__feats li { width: auto; max-width: 150px; padding: 0 20px; gap: 8px; }
.jr--weekend .jr-hero__feats li:first-child { padding-left: 0; }
.jr--weekend .jr-hero__feats li + li { border-left: 1px solid var(--jr-hair-2); }
.jr--weekend .jr-hero__feats .jr-ico { width: auto; height: 30px; background: none; border: 0; box-shadow: none; color: var(--jr-accent); font-size: 24px; }
.jr--weekend .jr-hero__hand { top: -8px; right: 2%; font-size: 30px; }

/* ---- 2. words beside four arched photographs, a postage-stamp mark and
   a leaf sprig ------------------------------------------------------- */
.jr .jr-arches { position: relative; overflow-x: clip; padding: 70px 0 64px; background: var(--jr-canvas); }
.jr-arches__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: 40px; align-items: center; }
.jr .jr-arches__copy { position: relative; }
.jr .jr-arches__copy p:not(.jr-kicker) { margin: 16px 0 22px; max-width: 420px; font-size: 13.5px; line-height: 1.75; }
.jr-stamp { position: absolute; right: -6px; top: -34px; width: 104px; height: 104px; color: var(--jr-accent); opacity: .45; transform: rotate(-12deg); font-family: 'Poppins', sans-serif; pointer-events: none; }
.jr-arches__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jr-arches__sprig { position: absolute; left: 22%; top: -64px; width: 56px; height: 74px; color: var(--jr-accent); opacity: .5; transform: rotate(-10deg); pointer-events: none; }
.jr-arch { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; color: inherit; text-decoration: none; }
.jr-arch:hover, .jr-arch:focus { color: inherit; text-decoration: none; }
.jr-arch__ph {
  display: block; width: 100%; aspect-ratio: 3 / 5; margin-bottom: 12px; border-radius: 999px; overflow: hidden;
  background: var(--jr-ph); box-shadow: 0 0 0 5px #fff, 0 18px 34px -20px rgba(var(--jr-shadow-rgb), .5);
}
.jr-arch__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr-arch:hover .jr-arch__ph img { transform: scale(1.06); }
.jr-arch strong { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--jr-ink); transition: color .2s; }
.jr-arch:hover strong { color: var(--jr-accent-ink); }
.jr-arch > span:last-child { max-width: 150px; font-size: 12px; line-height: 1.45; color: var(--jr-body); }

/* ---- 3. landscape destination cards, the name and a line on the
   photograph, the arrow in a white disc ------------------------------ */
.jr .jr-parks--land { padding-top: 56px; background: #fff; }
.jr-park--over.jr-park--land { aspect-ratio: 5 / 3.4; }
.jr-park--land .jr-park__body { align-items: flex-end; padding: 14px 16px; }
.jr-park--land .jr-park__txt strong { font-size: 17px; font-weight: 600; }
.jr-park--land .jr-park__txt > span { margin-top: 3px; font-size: 11.5px; line-height: 1.4; }
.jr-park--land .jr-park__go { width: 32px; height: 32px; background: #fff; border-color: #fff; color: var(--jr-ink); }
.jr-park--land:hover .jr-park__go { background: var(--jr-accent); border-color: var(--jr-accent); color: #fff; }

/* ---- 4. the experiences: a photograph out to the window's left edge
   with a torn right edge, two polaroids pinned over its foot, the words
   and four icons between hairlines beside it ------------------------- */
.jr .jr-exp { overflow-x: clip; padding: 64px 0 70px; background: #fff; }
.jr-exp__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.jr .jr-exp__art { position: relative; padding-bottom: 44px; }
.jr .jr-exp__ph {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2));
  width: calc(100% + var(--b) + 12px); height: 400px; margin: 0 0 0 calc(-1 * (var(--b) + 12px));
}
.jr-exp__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; background: var(--jr-ph);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='11'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='16' width='620' height='368' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='11'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='16' width='620' height='368' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr .jr-polaroid {
  position: absolute; z-index: 2; margin: 0; padding: 8px 8px 26px;
  background: #fff; border-radius: 4px; box-shadow: 0 18px 34px -16px rgba(var(--jr-shadow-rgb), .55);
}
.jr-polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-polaroid--a { left: 0; bottom: 0; width: 34%; height: 172px; transform: rotate(-7deg); }
.jr-polaroid--b { left: 29%; bottom: -12px; width: 32%; height: 160px; transform: rotate(5deg); }
.jr .jr-exp__copy h2 { margin-bottom: 28px; }
.jr .jr-exp__icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.jr-exp__icons li {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 0 10px;
  text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--jr-ink);
}
.jr-exp__icons li + li { border-left: 1px solid var(--jr-hair); }
.jr-exp__icons .jr-ico { width: 56px; height: 56px; background: var(--jr-accent-50); color: var(--jr-accent); font-size: 22px; }

/* ---- 5. the itinerary card: the photo at the left with a torn edge,
   the length large, the state in italics, a round copper arrow -------- */
.jr .jr-trip--side { flex-direction: row; min-height: 150px; }
.jr-trip--side .jr-trip__ph {
  flex: 0 0 48%; aspect-ratio: auto;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.04 .06' numOctaves='3' seed='5'/><feDisplacementMap in='SourceGraphic' scale='16' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-30' y='-30' width='318' height='260' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.04 .06' numOctaves='3' seed='5'/><feDisplacementMap in='SourceGraphic' scale='16' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-30' y='-30' width='318' height='260' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr-trip--side .jr-trip__body { position: relative; justify-content: center; padding: 18px 16px 16px 14px; }
.jr-trip__days { display: block; font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--jr-ink); }
.jr-trip__where { display: block; margin-top: 2px; font-size: 14px; font-style: italic; line-height: 1.3; color: var(--jr-ink); }
.jr .jr-trip--side h3 { margin: 12px 44px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.jr-trip--side h3 a { color: var(--jr-body); }
.jr-trip--side .jr-trip__go { position: absolute; right: 14px; bottom: 14px; width: 32px; height: 32px; font-size: 12px; background: var(--jr-accent); color: #fff !important; }
.jr-trip--side:hover .jr-trip__go { background: var(--jr-deep); }

/* ---- 6. the closing band: three marks at its foot, white icons between
   hairlines ----------------------------------------------------------- */
.jr .jr-cta--weekend { padding: 96px 0 116px; }
.jr .jr-cta--weekend h2 { font-size: 32px; line-height: 1.18; }
.jr .jr-cta__marks { position: absolute; right: 12px; bottom: -76px; display: flex; list-style: none; margin: 0; padding: 0; }
.jr-cta__marks li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 22px;
  font-size: 12px; font-weight: 500; color: #fff; text-shadow: 0 1px 8px rgba(var(--jr-shade), .6);
}
.jr-cta__marks li + li { border-left: 1px solid rgba(255, 255, 255, .35); }
.jr-cta__marks .jr-ico { width: auto; height: 34px; background: none; color: #fff; font-size: 26px; }

@media (max-width: 1199px) {
  .jr-arches__grid { gap: 28px; }
  .jr-arches__row { gap: 12px; }
  .jr-arch strong { font-size: 14px; }
  .jr-exp__icons li { padding: 0 6px; font-size: 12px; }
}
@media (max-width: 991px) {
  .jr-arches__grid { grid-template-columns: 1fr; gap: 56px; }
  .jr-stamp { right: 0; top: -20px; }
  .jr-exp__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr .jr-exp__ph { width: 100%; height: 320px; margin: 0; }
  .jr .jr-cta__marks { position: static; margin-top: 34px; }
  .jr-cta__marks li:first-child { padding-left: 0; }
}
@media (max-width: 767px) {
  .jr--weekend .jr-hero--wash { padding-bottom: 44px; }
  .jr--weekend .jr-hero__hand { top: -250px; right: 4%; font-size: 22px; }
}
@media (max-width: 575px) {
  .jr--weekend .jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr--weekend .jr-hero--light .jr-hero__tag { margin: 8px 0 8px; font-size: 15px; }
  .jr--weekend .jr-hero__feats { margin-top: 22px; }
  .jr--weekend .jr-hero__feats li { flex: 1 1 0; max-width: none; padding: 0 8px; font-size: 10.5px; }
  .jr--weekend .jr-hero__feats .jr-ico { height: 24px; font-size: 19px; }
  .jr--weekend .jr-hero__hand { top: -214px; font-size: 18px; }

  .jr .jr-arches { padding: 46px 0 42px; }
  .jr .jr-arches__copy p:not(.jr-kicker) { margin: 10px 0 16px; font-size: 12.5px; line-height: 1.6; }
  .jr-stamp { width: 66px; height: 66px; top: -18px; }
  .jr-arches__grid { gap: 30px; }
  .jr-arches__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .jr-arches__sprig { display: none; }
  .jr-arch__ph { aspect-ratio: 3 / 4; margin-bottom: 8px; box-shadow: 0 0 0 4px #fff, 0 12px 24px -16px rgba(var(--jr-shadow-rgb), .5); }
  .jr-arch strong { font-size: 12.5px; }
  .jr-arch > span:last-child { font-size: 10.5px; }

  .jr .jr-parks--land { padding-top: 42px; }
  .jr-park--over.jr-park--land { aspect-ratio: 1 / 1; }
  .jr-park--land .jr-park__body { padding: 10px; gap: 6px; }
  .jr-park--land .jr-park__txt strong { font-size: 13.5px; }
  .jr-park--land .jr-park__txt > span { font-size: 10.5px; }
  .jr-park--land .jr-park__go { width: 26px; height: 26px; font-size: 10px; }

  .jr .jr-exp { padding: 44px 0 48px; }
  .jr .jr-exp__art { padding-bottom: 34px; }
  .jr .jr-exp__ph { height: 220px; }
  .jr-polaroid--a { height: 112px; width: 38%; padding: 5px 5px 16px; }
  .jr-polaroid--b { height: 104px; width: 36%; left: 33%; padding: 5px 5px 16px; }
  .jr .jr-exp__copy h2 { margin-bottom: 18px; }
  .jr-exp__icons li { gap: 7px; padding: 0 4px; font-size: 10.5px; }
  .jr-exp__icons .jr-ico { width: 42px; height: 42px; font-size: 16px; }

  .jr .jr-trip--side { min-height: 130px; }
  .jr-trip--side .jr-trip__body { padding: 12px 12px 12px 10px; }
  .jr-trip__days { font-size: 18px; }
  .jr-trip__where { font-size: 12.5px; }
  .jr .jr-trip--side h3 { margin-top: 8px; font-size: 11.5px; }
  .jr-trip--side .jr-trip__go { right: 10px; bottom: 10px; width: 28px; height: 28px; font-size: 10px; }

  .jr .jr-cta--weekend { padding: 56px 0 52px; }
  .jr .jr-cta--weekend h2 { font-size: 22px; }
  .jr .jr-cta__marks { margin-top: 26px; }
  .jr-cta__marks li { gap: 6px; padding: 0 12px; font-size: 10.5px; }
  .jr-cta__marks .jr-ico { height: 26px; font-size: 20px; }
}

/* =====================================================================
   WILDLIFE AND HONEYMOON, AS THEIR MOCK-UPS DRAW THEM (2026-10-13,
   second pass - the designer: "wildlife, honeymoon ke jo pages bane h wo
   ese nhi h jo maine aapko designs provide kiye the ... same as it is
   bnao"). Everything here is scoped to .jr--wild / .jr--love or uses new
   class names (jr-more--fade, jr-trip--capped, jr-stories--band,
   jr-story--wide), so no other style page changes.
   ===================================================================== */

/* the banner: no breadcrumb, the kicker as plain spaced letters */
.jr--wild .jr-hero__kicker,
.jr--love .jr-hero__kicker {
  padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--jr-hero-em);
}
.jr--wild .jr .jr-hero h1, .jr--wild.jr .jr-hero h1 { max-width: 520px; }
.jr.jr--wild { --jr-cta-img: url(/img/wildlife/cta-savanna.jpg); --jr-cta-pos: 50% 52%; --jr-cta-pos-phone: 40% 50%; }
.jr--wild .jr-hero::before { background: linear-gradient(90deg, rgba(10, 20, 14, .82) 0%, rgba(10, 20, 14, .55) 40%, rgba(10, 20, 14, .1) 72%, rgba(10, 20, 14, 0) 100%); }

/* the wildlife strip: dark icons on a pale disc, as drawn */
.jr--wild .jr-strip .jr-ico { background: #f1ede2; color: var(--jr-deep); }

/* ---- an experiences photo that runs to the window's edge and fades into
   the page on its right, the section on the page's beige ------------- */
.jr .jr-more--fade { background: var(--jr-canvas); }
.jr-more--fade .jr-more__ph img {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}
.jr--wild .jr-more--fade .jr-more__ph img { object-position: 30% 50%; }
.jr--wild .jr-more__icons .jr-ico { border-color: var(--jr-deep); color: var(--jr-deep); }

/* ---- the itinerary card the wildlife mock-up draws: the nights and the
   name on the photograph, three short facts under it, the button -------- */
.jr-trip--capped .jr-trip__ph { position: relative; aspect-ratio: 16 / 10; }
.jr-trip--capped .jr-trip__ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 10, 0) 45%, rgba(8, 14, 10, .35) 66%, rgba(8, 14, 10, .85) 100%);
}
.jr-trip__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.jr-trip__nights { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.jr-trip__nights i, .jr-trip__nights svg { color: var(--jr-accent); font-size: 12px; }
.jr-trip__name { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.jr-trip--capped .jr-trip__body { padding: 14px 16px 18px; gap: 14px; }
.jr .jr-trip__chips { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--jr-hair); }
.jr-trip__chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--jr-body); }
.jr-trip__chips i, .jr-trip__chips svg { color: var(--jr-accent-ink); font-size: 11px; }
.jr-trip--capped .jr-btn { align-self: flex-start; margin-top: auto; }

/* ---- responsible travel: a forest panel with a slanted edge laid over
   the elephants, as drawn -------------------------------------------- */
.jr--wild .jr-impact__card { position: relative; display: block; min-height: 340px; background: var(--jr-ph); }
.jr--wild .jr-impact__ph { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; }
.jr--wild .jr .jr-impact__list, .jr--wild.jr .jr-impact__list {
  position: relative; z-index: 1; width: 56%; min-height: 340px; padding: 30px 60px 30px 28px;
  background: var(--jr-deep); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}

/* ---- stories: the band over the forest at dusk, each story a wide white
   card with the words left and the traveller right, all on show ------- */
.jr .jr-stories.jr-stories--band { background: var(--jr-deep) url(/img/wildlife/stories-forest.jpg) 50% 40% / cover no-repeat; isolation: isolate; }
.jr .jr-stories--band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 14, .55) 0%, rgba(10, 20, 14, .72) 100%); }
.jr .jr-stories__list { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.jr .jr-story.jr-story--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 26px; }
.jr-story--wide .jr-story__mark { height: auto; font-size: 54px; line-height: .6; align-self: start; }
.jr .jr-story--wide blockquote { margin: 0; }
.jr-story--wide figcaption { padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--jr-hair); white-space: nowrap; }

@media (max-width: 991px) {
  .jr-more--fade .jr-more__ph img { -webkit-mask-image: none; mask-image: none; border-radius: 20px; }
  .jr .jr-story.jr-story--wide { grid-template-columns: auto minmax(0, 1fr); }
  .jr-story--wide figcaption { grid-column: 2; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--jr-hair); white-space: normal; }
}
@media (max-width: 767px) {
  .jr--wild .jr-impact__card { min-height: 0; background: var(--jr-deep); }
  .jr--wild .jr-impact__ph { position: static; width: 100%; height: 200px; }
  .jr--wild .jr .jr-impact__list, .jr--wild.jr .jr-impact__list { width: 100%; min-height: 0; padding: 20px 18px; clip-path: none; }
}
@media (max-width: 575px) {
  .jr--wild .jr-hero__kicker, .jr--love .jr-hero__kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr-trip__name { font-size: 15px; }
  .jr-trip__chips li { font-size: 11.5px; }
  .jr .jr-story.jr-story--wide { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
  .jr-story--wide .jr-story__mark { font-size: 42px; }
  .jr-story--wide figcaption { grid-column: auto; }
}

/* =====================================================================
   The luxury theme (2026-10-13): Pages/LuxuryBespokeJourneys.cshtml at
   /luxury-bespoke-journeys. Copper and warm brown on cream, navy words -
   the mock-up's palette. It reuses the mist banner, the five-promise
   card, the round experiences, the stacked why strip and the beach page's
   small heads, and adds, for any theme:
     .jr-unique         words beside .jr-frames: two framed photographs
                        tilted on a gold brush stroke, a third out to the
                        window's right edge
     .jr-rounds--lines  hairlines between the round experiences
     .jr-park--panel    a destination card: photo on top, name and line under
     .jr-bespoke        a band: the photo at the left fading into cream,
                        the words at the right
   ===================================================================== */
.jr.jr--lux {
  --jr-deep: #1b2238;
  --jr-deep-2: #283152;
  --jr-deep-3: #12182a;
  --jr-em: #8b4a1f;
  --jr-accent: #9e5a29;
  --jr-accent-hover: #864a1f;
  --jr-accent-ink: #7a3a12;
  --jr-accent-50: #f6ebe0;
  --jr-accent-rgb: 158, 90, 41;
  --jr-on-accent: #fff;
  --jr-hero-em: #e9c39b;
  --jr-canvas: #f8f3ec;
  --jr-hair: #ece3d7;
  --jr-hair-2: #dccdbb;
  --jr-ink: #1b2238;
  --jr-body: #4f5669;
  --jr-ph: #e9e2d8;
  --jr-veil: 20, 22, 34;
  --jr-shade: 10, 10, 18;
  --jr-shadow-rgb: 27, 34, 56;
  --jr-mist: 249, 245, 239;
  /* the tile's photograph mirrored: the couple at the right, the sea under the words */
  --jr-hero-img: url(/img/luxury/hero.jpg);
  /* at its own height on the right, the cream mist over its left edge */
  --jr-hero-mist-pos: right 50%;
  --jr-hero-mist-size: auto 100%;
  --jr-hero-stack-img: url(/img/luxury/hero.jpg);
  --jr-hero-stack-h: 58.3vw;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  --jr-olive: #6b7d4f;
  background: #fbf8f3;
}
/* the mock-up's titles: no rule under them, cased as she wrote them */
.jr--lux .jr-head h2::after { display: none; }
.jr--lux h1, .jr--lux h2:not(.jr-kicker) { text-transform: none; }

/* ---- 1. the banner -------------------------------------------------- */
@media (min-width: 992px) {
  .jr--lux .jr-hero--mist { min-height: 640px; padding-bottom: 120px; }
}
.jr--lux .jr-hero--mist h1 em { color: var(--jr-em); }
.jr--lux .jr-hero--mist .jr-hero__tag { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--jr-ink); text-shadow: none; }
.jr--lux .jr-hero--mist .jr-hero__lead { max-width: 410px; }
.jr--lux .jr-hero--mist .jr-kicker { letter-spacing: .1em; }
@media (min-width: 992px) {
  .jr--lux .jr-hero--mist::before {
    background: linear-gradient(90deg, rgb(var(--jr-mist)) 0%, rgb(var(--jr-mist)) 24%, rgba(var(--jr-mist), .85) 32%, rgba(var(--jr-mist), .4) 40%, rgba(var(--jr-mist), 0) 48%);
  }
}
.jr--lux .jr-hero .jr-leaf--bl { left: 0; bottom: 90px; color: var(--jr-olive); opacity: .28; }

/* ---- 2. the five promises in copper -------------------------------- */
.jr--lux .jr-strip--card .jr-ico { color: var(--jr-accent); }
.jr--lux .jr-strip--card .jr-strip__row strong { font-size: 13px; }

/* ---- 3. "Where every journey is unique" ---------------------------- */
.jr .jr-unique { position: relative; overflow-x: clip; background: var(--jr-canvas); }
.jr-unique__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.jr .jr-unique__copy h2 em { font-style: normal; color: var(--jr-em); }
.jr .jr-unique__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr-frames { position: relative; height: 430px; }
.jr .jr-frames__bg {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2 + 12px));
  position: absolute; top: -20px; bottom: -20px; right: calc(-1 * var(--b)); width: calc(48% + var(--b));
  margin: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.jr-frames__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.jr-frames__brush { position: absolute; left: 6%; top: 18%; z-index: 0; width: 78%; height: 46%; }
.jr .jr-frame {
  position: absolute; z-index: 1; margin: 0; padding: 8px; background: #fff;
  box-shadow: 0 24px 44px -24px rgba(var(--jr-shadow-rgb), .55);
}
.jr-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-frame--a { left: 4%; top: 8px; width: 50%; height: 220px; transform: rotate(-3deg); }
.jr-frame--b { left: 16%; top: 196px; width: 50%; height: 210px; transform: rotate(2.5deg); z-index: 2; }
.jr .jr-frames__leaf { left: -2%; bottom: 0; z-index: 3; width: 90px; height: 116px; color: var(--jr-olive); opacity: .5; transform: rotate(-30deg); }
.jr .jr-frames__hand {
  position: absolute; right: 0; top: 0; z-index: 3; margin: 0;
  font-family: var(--jr-script); font-size: 22px; line-height: 1.25; text-align: center;
  color: var(--jr-ink); transform: rotate(-8deg);
}

/* ---- 4. the round experiences with hairlines between --------------- */
.jr .jr-rounds--lines .jr-rounds__row { gap: 0; }
.jr-rounds--lines .jr-rounds__row li { padding: 0 10px; }
.jr-rounds--lines .jr-rounds__row li + li { border-left: 1px solid var(--jr-hair); }
.jr-rounds--lines .jr-round__ph { max-width: 140px; }
a.jr-round, a.jr-round:hover, a.jr-round:focus { text-decoration: none; color: inherit; }
.jr--lux .jr-round__txt { font-weight: 500; }

/* ---- 5. destination cards: photo on top, words in a white panel ---- */
.jr .jr-parks--lux { padding-top: 12px; }
.jr-park--panel { border-radius: 8px; }
.jr-park--panel .jr-park__ph { aspect-ratio: 16 / 9; }
.jr-park--panel .jr-park__body { padding: 12px 14px 14px; }
.jr-park--panel .jr-park__txt strong { font-size: 16px; font-weight: 600; color: var(--jr-em); }
.jr-park--panel .jr-park__txt span { font-size: 12px; }

/* ---- 6. "Bespoke by design": the photo fading into cream ----------- */
.jr .jr-bespoke { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; background: #f3e8dc; }
.jr .jr-bespoke::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: 62%;
  background: var(--jr-ph) url(/img/luxury/band.jpg) 50% 55% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
/* the gold brush stroke where the photo meets the cream */
.jr .jr-bespoke::after {
  content: ""; position: absolute; left: 52%; top: -10%; z-index: -1; width: 90px; height: 120%;
  border-radius: 50%; transform: rotate(12deg); filter: blur(2px);
  background: linear-gradient(180deg, rgba(216, 176, 106, 0), rgba(216, 176, 106, .55) 30%, rgba(231, 201, 143, .35) 70%, rgba(216, 176, 106, 0));
}
.jr-bespoke__copy { position: relative; margin-left: auto; max-width: 460px; }
.jr .jr-bespoke h2 { color: var(--jr-em); }
.jr .jr-bespoke__copy p:not(.jr-kicker) { margin: 14px 0 22px; font-size: 13.5px; line-height: 1.7; }

/* ---- 7. why choose: on cream, leaves at the corners ---------------- */
.jr.jr--lux .jr-strip--why { background: var(--jr-canvas); }
.jr--lux .jr-strip--why .jr-leaf { color: var(--jr-olive); opacity: .3; }

@media (max-width: 1199px) {
  .jr-frames { height: 400px; }
  .jr-frame--a { height: 200px; }
  .jr-frame--b { top: 180px; height: 196px; }
  .jr .jr-frames__hand { font-size: 19px; }
}
@media (max-width: 991px) {
  .jr-unique__grid { grid-template-columns: 1fr; gap: 28px; }
  .jr .jr-frames__bg { top: 0; bottom: 0; right: 0; width: 46%; }
  .jr-rounds--lines .jr-rounds__row li:nth-child(3n+1) { border-left: 0; }
  /* the band stacks: the photo over the words, fading into the cream */
  .jr .jr-bespoke { padding: 0 0 48px; }
  .jr .jr-bespoke::before {
    position: relative; display: block; width: 100%; height: 56vw; margin-bottom: -24px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
            mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .jr .jr-bespoke::after { display: none; }
  .jr-bespoke__copy { margin-left: 0; max-width: none; }
}
@media (max-width: 575px) {
  .jr--lux .jr-hero--mist .jr-hero__tag { font-size: 15px; margin-bottom: 8px; }
  .jr--lux .jr-strip--card .jr-strip__row strong { font-size: 11.5px; }
  .jr .jr-unique__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-frames { height: 290px; }
  .jr .jr-frame { padding: 5px; }
  .jr-frame--a { left: 0; width: 60%; height: 140px; }
  .jr-frame--b { left: 12%; top: 128px; width: 60%; height: 136px; }
  /* the top-right corner, over the sky - the call / WhatsApp column covers the bottom-right */
  .jr .jr-frames__hand { top: -4px; right: 2%; font-size: 15px; }
  .jr--lux .jr-strip--why .jr-leaf { width: 70px; height: 90px; opacity: .18; }
  .jr .jr-frames__leaf { width: 60px; height: 78px; }
  .jr-rounds--lines .jr-rounds__row li { padding: 0 4px; }
  .jr-rounds--lines .jr-round__ph { max-width: 96px; }
  .jr-park--panel .jr-park__ph { aspect-ratio: 4 / 3; }
  .jr-park--panel .jr-park__body { padding: 10px; }
  .jr-park--panel .jr-park__txt strong { font-size: 13.5px; }
  .jr-park--panel .jr-park__txt span { font-size: 10.5px; }
  .jr .jr-bespoke__copy p:not(.jr-kicker) { font-size: 12.5px; line-height: 1.6; }
}

/* =====================================================================
   The food theme (2026-10-13): Pages/FoodCulinaryJourneys.cshtml at
   /food-culinary-journeys. Forest-green titles, rust buttons and gold on
   cream - the mock-up's palette. It reuses the rail page's washed banner
   (.jr-hero--light + .jr-hero--wash) and white promise card (.jr-promise),
   the beach page's small heads (.jr-head--small) and four-across cards
   (.jr-parks--four), and adds, for any theme:
     .jr-promise--five  the promise card with five promises
     .jr-flav           words beside three torn-edged photographs and a note
     .jr-tastes         a forest band of round photographs ringed in gold
     .jr-btn--light     an outlined button on a dark ground
     .jr-park--dish     a destination card: photo, then the name in the accent
     .jr-split          a closing split: torn-edged photo, words on cream
   ===================================================================== */
.jr.jr--food {
  --jr-deep: #1f3d2b;
  --jr-deep-2: #2a4f39;
  --jr-deep-3: #16301f;
  --jr-em: #b5512a;
  --jr-accent: #b5512a;
  --jr-accent-hover: #9c4321;
  --jr-accent-ink: #9a4423;
  --jr-accent-50: #f7e8df;
  --jr-accent-rgb: 181, 81, 42;
  --jr-on-accent: #fff;
  --jr-hero-em: #f2c19c;
  --jr-canvas: #fbf6ee;
  --jr-hair: #ece2d4;
  --jr-hair-2: #dccdb6;
  --jr-ink: #1d3a28;
  --jr-ph: #e6e2d8;
  --jr-veil: 26, 30, 20;
  --jr-shade: 12, 14, 8;
  --jr-shadow-rgb: 46, 40, 26;
  --jr-forest: #213f2c;
  --jr-gold: #d4a957;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  /* the /holiday tile's terrace dinner: the chef and the hill view at the right */
  --jr-hero-img: url(/img/travel-styles/food-culinary.jpg);
  --jr-hero-pos: 100% 45%;
  --jr-hero-pos-phone: 72% 45%;
}
.jr--food .jr-kicker { font-weight: 600; letter-spacing: .22em; }
.jr--food .jr-head h2::after { display: none; }

/* ---- 1. the banner: "Journeys" in rust, a bold line under the title -- */
@media (min-width: 768px) {
  .jr--food .jr-hero--wash::before {
    left: 38%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
  }
}
.jr--food .jr-hero--light h1 { margin: 2px 0 0; }
.jr--food .jr-hero--light h1 em { font-style: normal; color: var(--jr-em); }
.jr--food .jr-hero--light .jr-hero__tag { margin: 12px 0 10px; font-size: 17px; font-weight: 600; color: var(--jr-ink); text-shadow: none; }
.jr--food .jr-hero--wash .jr-hero__lead { max-width: 450px; }

/* ---- 2. five promises on the white card ---------------------------- */
.jr .jr-promise--five .jr-promise__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jr-promise--five .jr-promise__row li { padding: 0 12px; }
.jr-promise--five .jr-promise__row strong { font-size: 13.5px; }
.jr-promise--five .jr-promise__row li > span:last-child { font-size: 11.5px; }

/* ---- 3. "A Journey of Flavours & Cultures": a hand-written line over
   the title; three torn-edged photographs and a paper note ------------ */
.jr .jr-flav { position: relative; overflow-x: clip; padding: 72px 0 70px; background: var(--jr-canvas); }
.jr-flav__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: center; }
.jr .jr-flav__script { margin: 0 0 2px; font-family: var(--jr-script); font-size: 34px; line-height: 1.2; color: var(--jr-accent); }
.jr .jr-flav__copy h2 { font-size: 28px; }
.jr .jr-flav__copy p:not(.jr-flav__script) { margin: 16px 0 24px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr-flav__collage { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; height: 430px; }
.jr .jr-flav__shot { margin: 0; min-height: 0; filter: drop-shadow(0 16px 22px rgba(var(--jr-shadow-rgb), .2)); }
.jr-flav__shot--big { grid-row: 1 / span 2; }
.jr-flav__shot img {
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--jr-ph);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='3'/><feDisplacementMap in='SourceGraphic' scale='24' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='16' y='16' width='568' height='368' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='3'/><feDisplacementMap in='SourceGraphic' scale='24' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='16' y='16' width='568' height='368' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr-flav__shot--big img { object-position: 50% 45%; }
.jr-flav__note { position: absolute; right: -8px; top: 22px; z-index: 2; transform: rotate(7deg); filter: drop-shadow(0 10px 16px rgba(var(--jr-shadow-rgb), .25)); pointer-events: none; }
.jr-flav__note span {
  display: block; padding: 12px 18px 14px; background: #fbf3e2;
  clip-path: polygon(0 8%, 6% 0, 18% 5%, 32% 0, 46% 6%, 60% 0, 74% 5%, 88% 0, 100% 7%, 97% 50%, 100% 93%, 88% 100%, 74% 95%, 60% 100%, 46% 94%, 32% 100%, 18% 95%, 6% 100%, 0 92%, 3% 50%);
  font-family: var(--jr-script); font-size: 18px; line-height: 1.25; color: var(--jr-ink); text-align: center;
}
.jr-flav__sprig { position: absolute; left: 4px; bottom: 26px; width: 110px; height: 140px; color: var(--jr-deep); opacity: .22; transform: rotate(-24deg); pointer-events: none; }

/* ---- 4. the forest band: five round photographs ringed in gold ------ */
.jr .jr-tastes { padding: 50px 0 58px; background: var(--jr-forest); color: #fff; }
.jr-tastes__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.jr .jr-tastes__head h2.jr-kicker { margin: 0; font-size: 12.5px; line-height: 1.4; letter-spacing: .22em; color: var(--jr-gold); }
.jr-btn--light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .6); }
.jr-btn--light:hover { background: #fff; color: var(--jr-deep) !important; transform: translateY(-2px); }
.jr-tastes__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.jr-taste {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #fff; text-align: center;
}
.jr-taste__ph {
  display: block; width: 100%; max-width: 170px; aspect-ratio: 1 / 1; margin-bottom: 14px; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px var(--jr-forest), 0 0 0 6px var(--jr-gold);
}
.jr-taste__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr-taste:hover .jr-taste__ph img, .jr-taste:focus-visible .jr-taste__ph img { transform: scale(1.06); }
.jr-taste:nth-child(1) .jr-taste__ph img { object-position: 30% 45%; }
.jr-taste strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.jr-taste > span:last-child { max-width: 170px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* ---- 5. destination cards: photo, then the name in rust and two lines - */
.jr .jr-parks--dish { padding-top: 56px; background: #fff; }
.jr-park--dish .jr-park__ph { aspect-ratio: 16 / 10; }
.jr-park--dish .jr-park__body { padding: 14px 16px 18px; }
.jr-park--dish .jr-park__txt strong { font-size: 18px; color: var(--jr-accent); }
.jr-park--dish .jr-park__txt span { margin-top: 4px; font-size: 12.5px; }

/* ---- 6. the closing split: a photograph out to the window's left edge
   with a torn right edge, the words on cream ------------------------- */
.jr .jr-split { position: relative; overflow-x: clip; padding: 0; background: #f8f0e3; }
.jr-split__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; min-height: 440px; }
.jr .jr-split__ph {
  --b: max(0px, calc((100vw - var(--jr-cw)) / 2));
  align-self: stretch; min-height: 440px;
  width: calc(100% + var(--b) + 12px); margin: 0 0 0 calc(-1 * (var(--b) + 12px));
}
.jr-split__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--jr-ph);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='9'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='-40' width='620' height='480' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='9'/><feDisplacementMap in='SourceGraphic' scale='26' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='-40' y='-40' width='620' height='480' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr .jr-split__copy { padding: 60px 0; }
.jr .jr-split__copy h2 { font-size: 30px; }
.jr .jr-split__copy p:not(.jr-kicker) { margin: 14px 0 26px; max-width: 430px; font-size: 13.5px; line-height: 1.75; }
.jr-split__sprig { position: absolute; right: 8px; top: 10px; width: 110px; height: 140px; color: var(--jr-deep); opacity: .28; transform: rotate(200deg); pointer-events: none; }

@media (max-width: 1199px) {
  .jr-promise--five .jr-promise__row li { padding: 0 8px; }
  .jr-promise--five .jr-promise__row strong { font-size: 12.5px; }
  .jr-flav__collage { height: 390px; }
  .jr-tastes__row { gap: 14px; }
  .jr-taste strong { font-size: 13.5px; }
}
@media (max-width: 991px) {
  .jr .jr-promise--five .jr-promise__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .jr-promise--five .jr-promise__row li:nth-child(4) { border-left: 0; }
  .jr-flav__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr-flav__collage { height: 380px; }
  .jr-tastes__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .jr-split__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .jr .jr-split__ph { width: 100%; min-height: 0; height: 320px; margin: 0; }
  .jr .jr-split__copy { padding: 32px 0 60px; }
}
@media (max-width: 767px) {
  .jr .jr-promise--five .jr-promise__row { grid-template-columns: 1fr 1fr; }
  .jr-promise--five .jr-promise__row li:nth-child(4) { border-left: 1px solid var(--jr-hair); }
  .jr-promise--five .jr-promise__row li:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 575px) {
  .jr--food .jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr--food .jr-hero--light .jr-hero__tag { margin: 8px 0 8px; font-size: 14.5px; }
  .jr-promise--five .jr-promise__row li { padding: 0 6px; }
  .jr-promise--five .jr-promise__row strong { font-size: 12px; }
  .jr-promise--five .jr-promise__row li > span:last-child { font-size: 10.5px; }

  .jr .jr-flav { padding: 46px 0 44px; }
  .jr .jr-flav__script { font-size: 24px; }
  .jr .jr-flav__copy h2 { font-size: 21px; }
  .jr .jr-flav__copy p:not(.jr-flav__script) { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-flav__collage { height: 280px; gap: 8px; }
  .jr-flav__note { right: -4px; top: 8px; }
  .jr-flav__note span { padding: 8px 12px 10px; font-size: 12.5px; }
  .jr-flav__sprig { display: none; }

  .jr .jr-tastes { padding: 40px 0 44px; }
  .jr-tastes__head { flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .jr .jr-tastes__head h2.jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  /* the five rounds page sideways, two and a half at a time; bj-mobrail adds the dots */
  .jr-tastes__row {
    display: flex; gap: 14px;
    margin: 0 -15px; padding: 6px 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;
  }
  .jr-tastes__row::-webkit-scrollbar { display: none; }
  .jr-taste { flex: 0 0 calc(40% - 8px); scroll-snap-align: start; }
  .jr-taste__ph { margin-bottom: 10px; box-shadow: 0 0 0 3px var(--jr-forest), 0 0 0 5px var(--jr-gold); }
  .jr-taste strong { font-size: 12.5px; }
  .jr-taste > span:last-child { font-size: 10.5px; }

  .jr .jr-parks--dish { padding-top: 42px; }
  .jr-park--dish .jr-park__ph { aspect-ratio: 4 / 3; }
  .jr-park--dish .jr-park__body { padding: 10px 12px 12px; }
  .jr-park--dish .jr-park__txt strong { font-size: 15px; }
  .jr-park--dish .jr-park__txt span { font-size: 11px; }

  .jr .jr-split__ph { height: 220px; }
  .jr .jr-split__copy { padding: 24px 0 46px; }
  .jr .jr-split__copy h2 { font-size: 21px; }
  .jr .jr-split__copy p:not(.jr-kicker) { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr-split__sprig { width: 70px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-tastes__row { scroll-behavior: auto; }
}

/* =====================================================================
   CELEBRATIONS JOURNEYS (2026-10-13): Pages/CelebrationJourneys.cshtml at
   /celebration-journeys, the designer's mock-up as drawn ("same as it is
   design krdena"). Olive buttons, copper words, cream grounds and soft
   green washes with painted leaf sprigs. Everything is scoped to .jr--cel
   or named jr-cel-; it reuses the light banner (.jr-hero--mist), the
   promise card (.jr-strip--card .jr-strip--five) and the round photos
   (.jr-rounds / .jr-round) through scoped overrides only.
     .jr-cel-sprig     a painted leaf sprig (#jr-cel-sprig in the view)
     .jr-cel-moments   words beside three pinned prints and a script note
     .jr-cel-dests     destination cards: photo, then the name and a line
     .jr-cel-cta       the closing band: photo left, words on a green wash
   ===================================================================== */
.jr.jr--cel {
  --jr-deep: #2f4a33;
  --jr-deep-2: #3b5a3f;
  --jr-deep-3: #22372a;
  --jr-em: #a9552b;              /* copper: the second colour of a title */
  --jr-accent: #5b6a35;          /* olive buttons */
  --jr-accent-hover: #4b592b;
  --jr-accent-ink: #9a4f27;      /* copper kickers and icons */
  --jr-accent-50: #f3ead9;
  --jr-accent-rgb: 91, 106, 53;
  --jr-on-accent: #fff;
  --jr-hero-em: #e9b98c;
  --jr-canvas: #faf5ec;
  --jr-hair: #ebe2d2;
  --jr-hair-2: #dccfb8;
  --jr-ink: #1f3527;
  --jr-ph: #ece5d6;
  --jr-veil: 34, 30, 20;
  --jr-shade: 20, 16, 10;
  --jr-shadow-rgb: 60, 48, 30;
  --jr-mist: 250, 245, 236;      /* the banner's cream */
  --jr-sage: 228, 232, 214;      /* the painted green washes (rgb) */
  --jr-blush: 247, 225, 206;     /* the painted peach washes (rgb) */
  --jr-sprig: #8c9d6b;
  --jr-place: #8c4a22;           /* the destination names */
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  /* the site's own celebration photograph, at its own size on the right */
  --jr-hero-img: url(/img/travel-styles/celebration.jpg);
  --jr-hero-mist-pos: right 50%;
  --jr-hero-mist-size: auto 100%;
  --jr-hero-stack-img: url(/img/travel-styles/celebration.jpg);
  --jr-hero-stack-h: 58.4vw;
  background: var(--jr-canvas);
}
/* her titles: no rule under them, cased as she wrote them */
.jr--cel .jr-head h2::after { display: none; }
.jr--cel h1, .jr--cel h2:not(.jr-kicker) { text-transform: none; }

.jr-cel-sprig { position: absolute; pointer-events: none; fill: currentColor; color: var(--jr-sprig); }

/* ---- 1. the banner: words on cream, the photograph misting in ------- */
.jr--cel .jr-hero--mist .jr-kicker { max-width: 330px; line-height: 1.7; }
.jr--cel .jr-hero--mist .jr-hero__crumbs { margin-bottom: 12px; }
.jr--cel .jr-hero--mist h1 { max-width: 380px; }
.jr--cel .jr-hero--mist h1 em { color: var(--jr-em); }
.jr--cel .jr-hero--mist .jr-hero__tag { max-width: 340px; margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--jr-ink); text-shadow: none; }
.jr--cel .jr-hero--mist .jr-hero__lead { max-width: 340px; }
.jr-cel-sprig--hero { z-index: -1; left: -30px; top: 16px; width: 110px; height: 184px; transform: rotate(14deg); opacity: .55; }
@media (min-width: 1200px) {
  /* the photograph near its own size; the mist covers only its first 140px */
  .jr--cel .jr-hero--mist { height: 560px; min-height: 0; padding: 24px 0 92px; }
  .jr--cel .jr-hero--mist::before {
    background: linear-gradient(90deg, rgb(var(--jr-mist)) 0, rgb(var(--jr-mist)) calc(100% - 960px), rgba(var(--jr-mist), .55) calc(100% - 900px), rgba(var(--jr-mist), 0) calc(100% - 820px));
  }
}
@media (min-width: 1400px) {
  .jr--cel .jr-hero--mist { height: 580px; padding: 30px 0 96px; }
  .jr--cel .jr-hero--mist::before {
    background: linear-gradient(90deg, rgb(var(--jr-mist)) 0, rgb(var(--jr-mist)) calc(100% - 994px), rgba(var(--jr-mist), .55) calc(100% - 934px), rgba(var(--jr-mist), 0) calc(100% - 854px));
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* too narrow for words beside the photo: stacked, as below 992px */
  .jr--cel .jr-hero--mist {
    display: block; min-height: 0;
    padding: 44px 0 calc(var(--jr-hero-stack-h) + 4px);
    background: rgb(var(--jr-mist)) var(--jr-hero-stack-img) center bottom / 100% auto no-repeat;
  }
  .jr--cel .jr-hero--mist::before {
    background: linear-gradient(180deg, rgb(var(--jr-mist)) 0, rgb(var(--jr-mist)) calc(100% - var(--jr-hero-stack-h)), rgba(var(--jr-mist), 0) calc(100% - var(--jr-hero-stack-h) + 60px));
  }
  .jr--cel .jr-hero--mist .jr-hero__lead { max-width: 460px; }
}

/* ---- 2. the five occasions on the white card ----------------------- */
.jr--cel .jr-strip--card .jr-strip__row { border-radius: 22px; padding: 24px 16px 22px; }
.jr--cel .jr-strip--card .jr-ico svg { width: 38px; height: 38px; }
.jr--cel .jr-strip--card .jr-strip__row strong { font-size: 13px; }
.jr--cel .jr-strip--card .jr-strip__row div span { max-width: 180px; font-size: 11.5px; }

/* ---- 3. unforgettable moments: words beside three pinned prints ---- */
.jr .jr-cel-moments { position: relative; overflow-x: clip; padding-top: 56px; }
.jr-cel-moments__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.jr .jr-cel-moments__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 430px; font-size: 13.5px; line-height: 1.75; }
.jr-cel-prints { position: relative; height: 430px; }
.jr-cel-prints__wash {
  position: absolute; z-index: 0; top: 30px; bottom: 6px; right: -18vw; width: calc(36% + 18vw);
  border-radius: 46% 0 0 38% / 40% 0 0 48%;
  background: rgb(var(--jr-sage));
}
.jr .jr-cel-print { position: absolute; margin: 0; padding: 7px; background: #fff; box-shadow: 0 20px 36px -20px rgba(var(--jr-shadow-rgb), .6); }
.jr-cel-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-cel-print--a { z-index: 1; left: 0; top: 40px; width: 50%; height: 330px; transform: rotate(-3.5deg); }
.jr-cel-print--a img { object-position: 32% 50%; }
.jr-cel-print--b { z-index: 2; left: 45%; top: 0; width: 31%; height: 188px; transform: rotate(4deg); }
.jr-cel-print--c { z-index: 3; left: 44%; top: 196px; width: 31%; height: 196px; transform: rotate(-2.5deg); }
.jr-cel-print--c img { object-position: 60% 50%; }
.jr .jr-cel-prints__note {
  position: absolute; z-index: 2; right: -56px; top: 96px; margin: 0;
  font-family: var(--jr-script); font-size: 18px; line-height: 1.45; color: var(--jr-ink);
  transform: rotate(-9deg); transform-origin: left top;
}
.jr-cel-prints__note span { color: var(--jr-em); }
.jr-cel-sprig--left { left: -26px; top: 46%; width: 100px; height: 168px; transform: rotate(18deg); opacity: .5; }
.jr-cel-sprig--right { right: -10px; top: 14px; width: 86px; height: 144px; transform: rotate(-24deg) scaleX(-1); opacity: .6; }

/* ---- 4. signature experiences: round photos on painted washes ------- */
.jr .jr-cel-exp { padding-top: 40px; }
.jr--cel .jr-rounds__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.jr--cel .jr-rounds__row li { position: relative; display: flex; justify-content: center; }
.jr--cel .jr-rounds__row li::before {
  content: ""; position: absolute; z-index: 0; top: -8px; left: 50%;
  width: 196px; height: 172px; margin-left: -112px;
  border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
  background: rgb(var(--jr-sage)); transform: rotate(-12deg);
}
.jr--cel .jr-rounds__row li:nth-child(even)::before { margin-left: -84px; background: rgb(var(--jr-blush)); transform: rotate(10deg); }
.jr--cel .jr-round { position: relative; z-index: 1; }
.jr--cel .jr-round__ph { max-width: 164px; box-shadow: 0 0 0 5px #fff, 0 16px 30px -18px rgba(var(--jr-shadow-rgb), .6); }
.jr--cel .jr-round__txt { font-size: 13.5px; font-weight: 500; }
.jr-cel-sprig--round { z-index: 2; top: 92px; right: 2px; width: 44px; height: 74px; transform: rotate(26deg); opacity: .85; }
.jr--cel .jr-rounds__row li:nth-child(even) .jr-cel-sprig--round { right: auto; left: 2px; transform: rotate(-26deg) scaleX(-1); }

/* ---- 5. destinations: photo on top, the name and a line under it --- */
.jr .jr-cel-dests { padding-top: 24px; }
.jr-cel-dests__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jr .jr-cel-dest {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border-radius: 8px; overflow: hidden; box-shadow: var(--jr-shadow);
  color: inherit; text-decoration: none;
  transition: transform .25s var(--jr-ease), box-shadow .25s var(--jr-ease);
}
.jr-cel-dest__ph { display: block; aspect-ratio: 16 / 10.4; overflow: hidden; background: var(--jr-ph); }
.jr-cel-dest__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--jr-ease); }
.jr-cel-dest__body { display: block; padding: 12px 16px 18px; }
.jr-cel-dest__body strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--jr-place); }
.jr-cel-dest__body span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--jr-body); }
.jr .jr-cel-dest:hover, .jr .jr-cel-dest:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(var(--jr-shadow-rgb), .5); }
.jr-cel-dest:hover img { transform: scale(1.05); }

/* ---- 6. the closing band: the photograph out to the window's left
   edge, misting into a green wash with the words ------------------- */
.jr .jr-cel-cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  padding: 0; background: rgb(var(--jr-sage));
}
.jr .jr-cel-cta__ph { position: relative; margin: 0; min-height: 420px; }
.jr-cel-cta__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 62%; transform: scaleX(-1); }
.jr-cel-cta__ph::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 26%; background: linear-gradient(90deg, rgba(var(--jr-sage), 0), rgb(var(--jr-sage))); }
.jr .jr-cel-cta__copy { position: relative; align-self: center; padding: 64px max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)) 64px 24px; }
.jr--cel .jr-cel-cta h2 { font-size: 28px; line-height: 1.2; }
.jr .jr-cel-cta__copy p:not(.jr-kicker) { margin: 14px 0 24px; max-width: 360px; font-size: 13.5px; line-height: 1.7; }
.jr-cel-sprig--cta { right: 6px; top: 8px; width: 90px; height: 150px; transform: rotate(-20deg) scaleX(-1); opacity: .5; }

@media (max-width: 1199px) {
  .jr-cel-sprig--hero { display: none; }
  .jr-cel-print--a { height: 300px; }
  .jr-cel-print--b { height: 170px; }
  .jr-cel-print--c { top: 178px; height: 178px; }
  .jr .jr-cel-prints__note { right: -40px; font-size: 16px; }
  .jr--cel .jr-round__ph { max-width: 140px; }
  .jr--cel .jr-rounds__row li::before { width: 168px; height: 148px; margin-left: -96px; }
  .jr--cel .jr-rounds__row li:nth-child(even)::before { margin-left: -72px; }
  .jr-cel-sprig--round { top: 78px; }
}
@media (max-width: 991px) {
  .jr--cel .jr-strip--five .jr-strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; }
  .jr--cel .jr-strip--five .jr-strip__row li { flex: 0 0 33.333%; }
  .jr--cel .jr-strip--five .jr-strip__row li:nth-child(4) { border-left: 0; }

  .jr-cel-moments__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr-cel-prints { max-width: 620px; }
  .jr-cel-prints__wash { right: -15px; width: 42%; }
  .jr .jr-cel-prints__note { right: 0; }

  .jr--cel .jr-rounds__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 0; }
  .jr--cel .jr-rounds__row li { flex: 0 0 33.333%; }

  .jr-cel-dests__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .jr .jr-cel-cta { grid-template-columns: minmax(0, 1fr); }
  .jr .jr-cel-cta__ph { min-height: 300px; }
  .jr-cel-cta__ph::after { top: auto; left: 0; width: auto; height: 24%; background: linear-gradient(180deg, rgba(var(--jr-sage), 0), rgb(var(--jr-sage))); }
  .jr .jr-cel-cta__copy { padding: 8px 15px 48px; }
  .jr .jr-cel-cta__copy { padding-left: max(15px, calc((100vw - var(--jr-cw)) / 2 + 12px)); }
}
/* phones: a step smaller; the destinations as a rail of two with dots */
@media (max-width: 575px) {
  .jr--cel .jr-hero--mist .jr-kicker { font-size: 10.5px; letter-spacing: .12em; }
  .jr--cel .jr-hero--mist .jr-hero__tag { font-size: 15px; margin-bottom: 8px; }
  .jr--cel .jr-strip--card .jr-strip__row { padding: 18px 6px 16px; border-radius: 18px; }
  .jr--cel .jr-strip--card .jr-ico svg { width: 30px; height: 30px; }
  .jr--cel .jr-strip--card .jr-strip__row strong { font-size: 11.5px; }
  .jr--cel .jr-strip--card .jr-strip__row div span { font-size: 10.5px; }

  .jr .jr-cel-moments { padding-top: 56px; }
  .jr .jr-cel-moments__copy p:not(.jr-kicker) { margin: 12px 0 18px; font-size: 12.5px; line-height: 1.65; }
  .jr-cel-prints { height: 350px; }
  .jr .jr-cel-print { padding: 5px; }
  .jr-cel-print--a { top: 26px; width: 54%; height: 220px; }
  .jr-cel-print--b { left: 50%; width: 40%; height: 118px; }
  .jr-cel-print--c { left: 49%; top: 126px; width: 40%; height: 122px; }
  .jr .jr-cel-prints__note { top: auto; bottom: -6px; right: auto; left: 36%; font-size: 14px; line-height: 1.35; transform: rotate(-6deg); }
  .jr-cel-prints__wash { top: 60px; width: 52%; }
  .jr-cel-sprig--left, .jr-cel-sprig--right { display: none; }

  .jr--cel .jr-rounds__row { gap: 20px 0; }
  .jr--cel .jr-round__ph { max-width: 96px; box-shadow: 0 0 0 3px #fff, 0 10px 20px -12px rgba(var(--jr-shadow-rgb), .6); }
  .jr--cel .jr-round__txt { font-size: 11px; }
  .jr--cel .jr-rounds__row li::before { top: -4px; width: 112px; height: 98px; margin-left: -64px; }
  .jr--cel .jr-rounds__row li:nth-child(even)::before { margin-left: -48px; }
  .jr-cel-sprig--round { top: 54px; width: 28px; height: 46px; right: 4px; }
  .jr--cel .jr-rounds__row li:nth-child(even) .jr-cel-sprig--round { left: 4px; }

  .jr-cel-dests__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;
  }
  .jr-cel-dests__row::-webkit-scrollbar { display: none; }
  .jr .jr-cel-dest { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; box-shadow: none; border: 1px solid var(--jr-hair); }
  .jr .jr-cel-dest:hover { transform: none; }
  .jr-cel-dest__body { padding: 10px 10px 12px; }
  .jr-cel-dest__body strong { font-size: 14px; }
  .jr-cel-dest__body span { font-size: 11px; }

  .jr .jr-cel-cta__ph { min-height: 240px; }
  .jr--cel .jr-cel-cta h2 { font-size: 22px; }
  .jr .jr-cel-cta__copy p:not(.jr-kicker) { margin: 10px 0 18px; font-size: 12.5px; }
  .jr-cel-sprig--cta { width: 60px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-cel-dests__row { scroll-behavior: auto; }
}

/* =====================================================================
   The safari theme (2026-10-13): Pages/WildlifeJourneys.cshtml at
   /wildlife-journeys, rebuilt to the designer's second mock-up (the
   first build's .jr--wild rules above stay for what other pages share).
   Forest green and rust on cream. It reuses the washed banner and the
   promise card (rail, food), the leaning prints (.jr-craft__collage--tilt,
   honeymoon), the round photographs (.jr-tastes, food), the landscape
   destination cards (.jr-park--land, weekend) and the closing split
   (.jr-split, food), and adds, for any theme:
     .jr-craft--wild    the prints on a brushed ground, a hand-written line beside
     .jr-tastes--light  the round photographs on a light ground, six across,
                        hairlines between them, no ring
     .jr-split--deep    the closing split with its words on forest green
   ===================================================================== */
.jr.jr--safari {
  --jr-deep: #1f3a2a;
  --jr-deep-2: #2a4d38;
  --jr-deep-3: #162b1f;
  --jr-em: #b0532b;
  --jr-accent: #b0532b;
  --jr-accent-hover: #974422;
  --jr-accent-ink: #984624;
  --jr-accent-50: #f6e7de;
  --jr-accent-rgb: 176, 83, 43;
  --jr-on-accent: #fff;
  --jr-hero-em: #f0c39d;
  --jr-canvas: #faf6ee;
  --jr-hair: #ebe2d3;
  --jr-hair-2: #dacbb3;
  --jr-ink: #1d3627;
  --jr-ph: #e4e2d6;
  --jr-veil: 24, 30, 20;
  --jr-shade: 10, 14, 8;
  --jr-shadow-rgb: 40, 38, 24;
  --jr-forest: #1f3a2a;
  --jr-gold: #d4a957;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  /* the /holiday tile's safari photo, mirrored so the jeep sits at the right */
  --jr-hero-img: url(/img/wildlife/hero-jeep.jpg);
  --jr-hero-pos: 100% 50%;
  --jr-hero-pos-phone: 76% 50%;
}
.jr--safari .jr-kicker { font-weight: 600; letter-spacing: .22em; }
.jr--safari .jr-head h2::after { display: none; }

/* ---- 1. the banner: "Journeys" in rust, two bold lines under the title */
@media (min-width: 768px) {
  .jr--safari .jr-hero--wash::before {
    left: 38%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 24%);
  }
}
.jr--safari .jr-hero--light h1 { margin: 2px 0 0; }
.jr--safari .jr-hero--light h1 em { font-style: normal; color: var(--jr-em); }
.jr--safari .jr-hero--light .jr-hero__tag { margin: 12px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--jr-ink); text-shadow: none; }
.jr--safari .jr-hero--wash .jr-hero__lead { max-width: 450px; }
/* the banner's kicker: one line on a desktop, no wider than the words
   under it so it ends before the photograph; below 1200px two lines,
   broken at a dot (never one word left alone on the second line) */
.jr--safari .jr-hero .jr-kicker--split { font-size: 11px; letter-spacing: .12em; }
@media (max-width: 1199px) {
  .jr--safari .jr-hero .jr-kicker--split { font-size: 12px; letter-spacing: .2em; line-height: 1.7; }
  .jr-kicker--split .jr-kicker__dot { display: none; }
  .jr-kicker--split .jr-kicker__end { display: block; }
}
@media (max-width: 575px) {
  .jr--safari .jr-hero .jr-kicker--split { font-size: 10.5px; letter-spacing: .16em; }
}
/* tablets: the photograph starts further right, so the words stay on the cream */
@media (min-width: 992px) and (max-width: 1199px) {
  .jr--safari .jr-hero--wash::before { left: 46%; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .jr--safari .jr-hero--wash::before { left: 50%; }
  .jr--safari .jr-hero--wash .jr-hero__lead { max-width: 340px; }
}

/* ---- 3. "Discover the Extraordinary": the leaning prints on a brushed
   sand ground, a hand-written line at the right ---------------------- */
.jr .jr-craft--wild { position: relative; overflow-x: clip; padding: 78px 0 72px; background: var(--jr-canvas); }
@media (min-width: 992px) {
  .jr-craft--wild .jr-craft__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.jr .jr-craft--wild .jr-craft__copy h2 { font-size: 30px; }
.jr-craft--wild .jr-craft__collage--tilt { width: calc(100% - 118px); }
.jr-craft--wild .jr-craft__collage--tilt::before {
  content: ""; position: absolute; left: 4%; right: -6%; top: 8%; bottom: 0; z-index: 0; background: #e9dbc0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='4' seed='4'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='26' y='26' width='548' height='348' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='4' seed='4'/><feDisplacementMap in='SourceGraphic' scale='40' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='26' y='26' width='548' height='348' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.jr-craft--wild .jr-craft__shot { z-index: 1; }
.jr-craft--wild .jr-craft__shot--big img { object-position: 40% 50%; }
.jr .jr-craft__hand {
  position: absolute; left: calc(100% + 16px); top: 4%; z-index: 1; width: 112px; margin: 0;
  font-family: var(--jr-script); font-size: 20px; line-height: 1.3; color: var(--jr-ink); transform: rotate(-6deg);
}
.jr-craft__hand svg, .jr-craft__hand i { display: block; width: 1em; margin: 8px 0 0 50px; color: var(--jr-accent); font-size: 18px; }
.jr-craft__sprig { position: absolute; left: 4px; bottom: 30px; width: 110px; height: 140px; color: var(--jr-deep); opacity: .22; transform: rotate(-24deg); pointer-events: none; }

/* ---- 4. six round photographs on a light ground, hairlines between -- */
.jr .jr-tastes.jr-tastes--light { padding: 56px 0 60px; background: var(--jr-canvas); color: var(--jr-body); }
.jr .jr-tastes--light .jr-tastes__head h2.jr-kicker { color: var(--jr-accent-ink); }
.jr-tastes--light .jr-tastes__row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.jr-tastes--light .jr-taste { padding: 0 10px; color: var(--jr-ink); }
.jr-tastes--light .jr-taste + .jr-taste { border-left: 1px solid var(--jr-hair-2); }
.jr-tastes--light .jr-taste__ph { max-width: 150px; background: var(--jr-ph); box-shadow: 0 12px 24px -16px rgba(var(--jr-shadow-rgb), .55); }
.jr-tastes--light .jr-taste strong { font-size: 14px; color: var(--jr-ink); }
.jr-tastes--light .jr-taste > span:last-child { font-size: 11.5px; color: var(--jr-body); }
.jr--safari .jr-taste:nth-child(1) .jr-taste__ph img { object-position: 50% 30%; }

/* ---- 5. destination framing (the weekend page frames its second card for a power line) */
.jr--safari .jr-parks--land .jr-parks__row > :nth-child(2) img { object-position: 50% 62%; }

/* ---- 6. the closing split with its words on forest green ----------- */
.jr .jr-split.jr-split--deep { background: var(--jr-forest); color: rgba(255, 255, 255, .86); }
.jr .jr-split--deep .jr-split__copy h2 { color: #fff; }
.jr .jr-split--deep .jr-kicker { color: var(--jr-gold); }
.jr .jr-split--deep .jr-split__copy p:not(.jr-kicker) { color: rgba(255, 255, 255, .84); }
.jr-split--deep .jr-split__sprig { color: #fff; opacity: .18; }

@media (max-width: 1199px) {
  .jr-tastes--light .jr-taste { padding: 0 6px; }
  .jr-tastes--light .jr-taste strong { font-size: 13px; }
  .jr .jr-craft__hand { font-size: 17px; width: 96px; }
  .jr-craft--wild .jr-craft__collage--tilt { width: calc(100% - 100px); }
}
@media (max-width: 991px) {
  .jr-tastes--light .jr-tastes__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .jr-tastes--light .jr-taste:nth-child(4) { border-left: 0; }
}
@media (max-width: 767px) {
  .jr-craft--wild .jr-craft__collage--tilt { width: 100%; margin-bottom: 56px; }
  .jr .jr-craft__hand { left: auto; right: 0; top: auto; bottom: -58px; width: auto; text-align: right; font-size: 15px; }
  .jr-craft__hand svg, .jr-craft__hand i { display: inline-block; margin: 0 0 0 6px; font-size: 14px; }
  .jr .jr-craft__hand br { display: none; }
}
@media (max-width: 575px) {
  .jr--safari .jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr--safari .jr-hero--light .jr-hero__tag { margin: 8px 0 8px; font-size: 14.5px; }
  .jr .jr-craft--wild { padding: 46px 0 44px; }
  .jr .jr-craft--wild .jr-craft__copy h2 { font-size: 21px; }
  .jr-craft__sprig { display: none; }
  .jr .jr-tastes.jr-tastes--light { padding: 40px 0 44px; }
  .jr-tastes--light .jr-taste:nth-child(4) { border-left: 1px solid var(--jr-hair-2); }
  .jr-tastes--light .jr-taste strong { font-size: 12px; }
  .jr-tastes--light .jr-taste > span:last-child { font-size: 10.5px; }
}

/* =====================================================================
   The couple theme (2026-10-14): Pages/HoneymoonHolidays.cshtml at
   /honeymoon-holidays, rebuilt to the designer's third honeymoon mock-up
   ("ye page bhi as it is same ese hi design kro"). Plum buttons, berry
   accents and blush grounds - the mock-up's palette. The mock-up is the
   wildlife page's template (.jr--safari), so the page reuses its parts:
   the washed banner (.jr-hero--light + .jr-hero--wash), the five-promise
   card (.jr-promise--five), the leaning prints with a hand-written line
   (.jr-craft__collage--tilt, .jr-craft__hand), the round photographs on
   a light ground (.jr-tastes--light), the landscape destination cards
   (.jr-park--land) and the closing split (.jr-split). Everything below is
   scoped under .jr--couple or the new .jr-craft--couple / .jr-parks--couple.
   The first two honeymoon builds' .jr--love rules above are now unused.
   ===================================================================== */
.jr.jr--couple {
  --jr-deep: #6f2753;
  --jr-deep-2: #84315f;
  --jr-deep-3: #561d40;
  --jr-em: #a63a72;
  --jr-accent: #74295a;
  --jr-accent-hover: #5f2049;
  --jr-accent-ink: #74295a;
  --jr-accent-50: #f8e9ee;
  --jr-accent-rgb: 116, 41, 90;
  --jr-on-accent: #fff;
  --jr-hero-em: #f3b9d2;
  --jr-canvas: #fcf4f2;
  --jr-hair: #f0e0dd;
  --jr-hair-2: #e6cfcb;
  --jr-ink: #2a1c2c;
  --jr-body: #574e5c;
  --jr-ph: #f1e3e1;
  --jr-veil: 42, 24, 38;
  --jr-shade: 24, 12, 20;
  --jr-shadow-rgb: 70, 34, 56;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  --jr-leafy: #74805a;          /* the banner's leafy branches */
  /* the /holiday tile's photo, mirrored: the couple over Santorini at the right */
  --jr-hero-img: url(/img/honeymoon/hero-santorini.jpg);
  --jr-hero-pos: 100% 38%;
  --jr-hero-pos-phone: 82% 40%;
  background: #fffafa;
}
.jr--couple .jr-kicker { font-weight: 600; letter-spacing: .22em; }
.jr--couple .jr-head h2::after { display: none; }
.jr--couple h1, .jr--couple h2:not(.jr-kicker) { text-transform: none; }

/* ---- 1. the banner: blush behind the words, "Couple Holidays" in berry */
.jr--couple .jr-hero--wash { background: linear-gradient(90deg, #fbeeee 0%, #fcf2f0 45%, #fdf5f3 100%); }
@media (min-width: 768px) {
  .jr--couple .jr-hero--wash::before {
    left: 33%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .75) 24%, #000 32%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .75) 24%, #000 32%);
  }
}
.jr--couple .jr-hero--light h1 { margin: 6px 0 0; }
.jr--couple .jr-hero--light h1 em { font-style: normal; color: var(--jr-em); }
.jr--couple .jr-hero--light .jr-hero__tag { margin: 16px 0 12px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--jr-ink); text-shadow: none; }
.jr--couple .jr-hero--wash .jr-hero__lead { max-width: 430px; }
/* the leafy branches at the banner's left edge */
.jr--couple .jr-hero .jr-leaf { width: 104px; height: 134px; color: var(--jr-leafy); opacity: .42; }
.jr--couple .jr-hero .jr-leaf--tl { left: -26px; top: 6px; transform: rotate(-28deg); }
.jr--couple .jr-hero .jr-leaf--bl { left: -22px; top: auto; bottom: 96px; transform: rotate(206deg) scaleX(-1); }

/* ---- 2. five promises, thin plum line icons above the words -------- */
.jr--couple .jr-promise__ico { height: 44px; margin-bottom: 6px; font-size: 38px; color: var(--jr-accent); }

/* ---- 3. "Celebrate Love, Everywhere": three leaning prints, a
   hand-written line at the right, line-drawn leaves at the corners --- */
.jr .jr-craft--couple { position: relative; overflow-x: clip; padding: 84px 0 76px; background: var(--jr-canvas); }
@media (min-width: 992px) {
  .jr-craft--couple .jr-craft__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.jr .jr-craft--couple .jr-craft__copy h2 { font-size: 30px; }
.jr-craft--couple .jr-leaf { width: 150px; height: 194px; opacity: .2; }
.jr-craft--couple .jr-leaf--tl { left: -10px; top: 18px; transform: rotate(-20deg); }
.jr-craft--couple .jr-leaf--br { right: 0; bottom: 6px; }
/* the prints keep their shape at every width: the collage is sized by its own width */
.jr-craft--couple .jr-craft__collage--tilt { height: auto; aspect-ratio: 1.42 / 1; }
.jr-craft--couple .jr-craft__shot { border-radius: 3px; }
.jr-craft--couple .jr-craft__shot img { border-radius: 2px; }
.jr-craft--couple .jr-craft__shot--big { left: 1%; top: 7%; bottom: auto; width: 55%; height: auto; aspect-ratio: .94 / 1; padding: 9px 9px 26px; transform: rotate(-4deg); }
.jr-craft--couple .jr-craft__shot--big img { object-position: 52% 50%; }
.jr-craft--couple .jr-craft__shot--a { right: 1%; top: 0; bottom: auto; width: 43%; height: auto; aspect-ratio: 1.42 / 1; transform: rotate(4deg); }
.jr-craft--couple .jr-craft__shot--a img { object-position: 70% 50%; }
.jr-craft--couple .jr-craft__shot--b { right: 4%; top: auto; bottom: 1%; width: 45%; height: auto; aspect-ratio: 1.42 / 1; z-index: 2; transform: rotate(-2.5deg); }
/* the hand-written line beside the prints, each of its lines whole ("New Memories") */
@media (min-width: 768px) {
  .jr-craft--couple .jr-craft__collage--tilt { width: calc(100% - 158px); }
  .jr-craft--couple .jr-craft__hand { left: calc(100% + 20px); top: 8%; width: auto; white-space: nowrap; font-size: 21px; color: var(--jr-ink); transform: rotate(-9deg); }
  .jr-craft--couple .jr-craft__hand svg { margin: 10px 0 0 46px; font-size: 22px; color: var(--jr-em); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .jr-craft--couple .jr-craft__collage--tilt { width: calc(100% - 128px); }
  .jr-craft--couple .jr-craft__hand { left: calc(100% + 12px); font-size: 17px; }
  .jr-craft--couple .jr-craft__hand svg { margin-left: 36px; font-size: 18px; }
}

/* ---- 4. six round photographs between hairlines, on the page's white */
.jr.jr--couple .jr-tastes.jr-tastes--light { padding: 60px 0 56px; background: #fffafa; }
.jr--couple .jr-tastes--light .jr-taste__ph { box-shadow: 0 0 0 4px #fff, 0 14px 26px -16px rgba(var(--jr-shadow-rgb), .55); }

/* ---- 5. four destinations, the name and a line on the photograph, no arrow */
.jr .jr-parks.jr-parks--couple { padding: 20px 0 72px; background: #fffafa; }
.jr--couple .jr-park--over.jr-park--land { aspect-ratio: 5 / 4; border-radius: 6px; }
.jr--couple .jr-park--land .jr-park__ph::after { background: linear-gradient(180deg, rgba(20, 10, 18, 0) 46%, rgba(20, 10, 18, .32) 66%, rgba(20, 10, 18, .82) 100%); }
.jr--couple .jr-park--land .jr-park__txt strong { font-size: 18px; }
.jr--couple .jr-park--land .jr-park__txt > span { font-size: 12px; }
.jr--couple .jr-parks__row > :nth-child(1) img { object-position: 40% 50%; }

/* ---- 6. the closing split: the candlelit dinner, the words on blush -- */
.jr.jr--couple .jr-split { background: var(--jr-canvas); }
.jr--couple .jr-split__ph img { object-position: 41% 60%; }
.jr--couple .jr-split__copy h2 em { color: var(--jr-em); }
.jr--couple .jr-split__sprig { opacity: .22; }

@media (max-width: 1299px) {
  .jr--couple .jr-hero .jr-leaf { display: none; }
}
@media (max-width: 1199px) {
  .jr .jr-craft--couple .jr-craft__copy h2 { font-size: 27px; }
}
@media (max-width: 991px) {
  .jr-craft--couple .jr-craft__collage--tilt { max-width: 600px; }
}
@media (max-width: 991px) {
  .jr--couple .jr-split__sprig { display: none; }
}
@media (max-width: 767px) {
  .jr-craft--couple .jr-craft__collage--tilt { width: 100%; margin-bottom: 64px; }
  .jr-craft--couple .jr-leaf--br { display: none; }
  /* under the prints at the left, clear of the call / WhatsApp column at the right */
  .jr .jr-craft--couple .jr-craft__hand { left: 2%; right: 64px; bottom: -62px; text-align: left; transform: rotate(-4deg); }
  .jr--couple .jr-craft__hand svg { color: var(--jr-em); }
}
@media (max-width: 575px) {
  .jr--couple .jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr--couple .jr-hero--light .jr-hero__tag { margin: 10px 0 8px; font-size: 14.5px; }
  .jr--couple .jr-promise__ico { height: 30px; margin-bottom: 2px; font-size: 26px; }
  .jr .jr-craft--couple { padding: 46px 0 44px; }
  .jr .jr-craft--couple .jr-craft__copy h2 { font-size: 21px; }
  .jr-craft--couple .jr-leaf { display: none; }
  .jr-craft--couple .jr-craft__shot--big { padding: 5px 5px 16px; }
  .jr-craft--couple .jr-craft__shot--a, .jr-craft--couple .jr-craft__shot--b { padding: 4px; }
  .jr.jr--couple .jr-tastes.jr-tastes--light { padding: 40px 0 44px; }
  .jr .jr-parks.jr-parks--couple { padding: 8px 0 46px; }
  .jr--couple .jr-park--over.jr-park--land { aspect-ratio: 1 / 1; }
  .jr--couple .jr-park--land .jr-park__txt strong { font-size: 14px; }
  .jr--couple .jr-park--land .jr-park__txt > span { font-size: 10.5px; }
}
/* the heart under the hand-written line is an <svg>: give it a height too */
.jr-craft--couple .jr-craft__hand svg { height: 1em; }

/* =====================================================================
   BANNERS AS TALL AS THEIR WORDS (2026-10-14). The designer: "faltu ke
   spaces jis jis pages pe dikhe htaao ... upr niche kaafi space h or
   niche ki chiz dikh bhi nhi rhi h". No banner keeps a min-height taller
   than its words: 56px above the breadcrumb, 64px under the last button
   to whatever comes next (where the promise card overlaps the banner's
   foot, padding-bottom = 64 + that overlap), so the card shows on a
   laptop's first screen. Self Drive (.jr--drive, above) was the first.
   ===================================================================== */
@media (min-width: 768px) {
  /* the washed banners (honeymoon, rail, wildlife, food, weekend) and the
     beach banner (senior, group, kids, wellness and spiritual have their
     own stylesheets and the same rule in each) */
  .jr .jr-hero--wash, .jr--weekend .jr-hero--wash { min-height: 0; }
  .jr--beach .jr-hero--light { min-height: 0; }
  /* their promise card overlaps the banner by 78px */
  .jr--couple .jr-hero--wash, .jr--rail .jr-hero--wash, .jr--safari .jr-hero--wash, .jr--food .jr-hero--wash { padding-bottom: 142px; }
}
@media (min-width: 992px) {
  /* the promise card overlaps by 64px, as on Self Drive */
  .jr--adv .jr-hero--mist, .jr--lux .jr-hero--mist { min-height: 0; padding: 56px 0 128px; }
  /* the luxury photograph is sized by the band's height: keep it the
     640px it was drawn at, or its left edge comes out from under the mist */
  .jr--lux .jr-hero--mist { --jr-hero-mist-size: auto max(100%, 640px); }
}
@media (max-width: 991px) {
  /* stacked, the adventure banner's hand-written line sat in its own
     100px of cream between the button and the photograph: it goes onto
     the photograph's sky instead, white as on a desktop */
  .jr--adv .jr-hero--mist .jr-hero__hand {
    position: absolute; top: calc(100% + 64px); right: 5%; margin: 0;
    color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); transform: rotate(-8deg);
  }
}

/* =====================================================================
   The families theme (2026-10-14): Pages/FamilyHolidays.cshtml at
   /family-holidays, rebuilt to the designer's second family mock-up
   ("same as it is design kro plz"). Forest green and rust on cream - the
   mock-up's palette. The same template as the honeymoon and wildlife
   pages, so it reuses the washed banner, the stacked promise strip
   (.jr-strip--stack), the round experiences (.jr-tastes--light), the
   landscape destination cards (.jr-park--land), the adventure page's
   blob photographs (.jr-blob) and the closing split (.jr-split), and adds:
     .jr-hero--brush  the banner's photograph at the right, its left and
                      bottom edges brushed (tablets and up)
     .jr-fam-promise  six promises, a painted wash behind each line icon,
                      a hand-drawn wavy line along the band's foot
     .jr-fam-bond     three blob photographs, the words, a hand-written
                      note with doodles, line-drawn hills
     .jr-fam-tastes   the experiences cut as soft blobs, a titled head
     .jr-fam-dests    the destinations on a forest-green band
   The banner follows "BANNERS AS TALL AS THEIR WORDS" above: 56px over
   the breadcrumb, 64px under the buttons. The first family build's
   .jr--family rules above are now unused.
   ===================================================================== */
.jr.jr--families {
  --jr-deep: #2f4a33;
  --jr-deep-2: #3b5b40;
  --jr-deep-3: #233826;
  --jr-em: #b4532a;
  --jr-accent: #b4532a;
  --jr-accent-hover: #9a4420;
  --jr-accent-ink: #9a4622;
  --jr-accent-50: #f6e6da;
  --jr-accent-rgb: 180, 83, 42;
  --jr-on-accent: #fff;
  --jr-hero-em: #f2c19c;
  --jr-canvas: #f8f3ea;
  --jr-hair: #e9e0d0;
  --jr-hair-2: #d9ccb6;
  --jr-ink: #2c4530;
  --jr-body: #545c55;
  --jr-ph: #e7e3d8;
  --jr-veil: 30, 40, 28;
  --jr-shade: 12, 18, 10;
  --jr-shadow-rgb: 44, 52, 36;
  --jr-forest: #364d34;
  --jr-sage: #8a9a6c;
  --jr-script: 'Segoe Script', 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
  /* the /holiday tile's photograph: three generations walking by a lake */
  --jr-hero-img: url(/img/travel-styles/family.jpg);
  --jr-hero-pos: 50% 42%;
  --jr-hero-pos-phone: 55% 42%;
  background: #fcf9f3;
}
.jr--families .jr-kicker { font-weight: 600; letter-spacing: .22em; }
.jr--families .jr-head h2::after { display: none; }
.jr--families h1, .jr--families h2:not(.jr-kicker) { text-transform: none; }

/* ---- 1. the banner: "Holidays" in rust, the hand-written line under it,
   the photograph at the right with a brushed edge -------------------- */
.jr--families .jr-hero--wash { background: #faf6ee; }
.jr--families .jr-hero--light h1 { margin: 6px 0 0; }
.jr--families .jr-hero--light h1 em { font-style: normal; color: var(--jr-em); }
.jr--families .jr-hero__script { margin: 6px 0 14px; color: var(--jr-ink); }
.jr--families .jr-hero--wash .jr-hero__lead { max-width: 400px; }
.jr--families .jr-hero .jr-leaf { width: 104px; height: 134px; color: var(--jr-sage); opacity: .55; }
.jr--families .jr-hero .jr-leaf--tl { left: -26px; top: 6px; transform: rotate(-28deg); }
.jr--families .jr-hero .jr-leaf--bl { left: -22px; top: auto; bottom: 30px; transform: rotate(206deg) scaleX(-1); }
@media (min-width: 768px) {
  .jr--families .jr-hero--wash { padding: 56px 0 64px; }
  .jr--families .jr-hero--brush::before {
    left: 46%;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='5'/><feDisplacementMap in='SourceGraphic' scale='28' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='24' y='-40' width='620' height='420' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.03 .045' numOctaves='4' seed='5'/><feDisplacementMap in='SourceGraphic' scale='28' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='24' y='-40' width='620' height='420' filter='url(%23t)'/></svg>") 0 0 / 100% 100% no-repeat;
  }
}

/* ---- 2. six promises, a painted wash behind each line icon ---------- */
.jr .jr-strip--stack.jr-fam-promise { position: relative; padding: 34px 0 48px; background: var(--jr-canvas); }
.jr-fam-promise::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 18px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'><path d='M0 9C150 2 250 16 400 9S650 2 800 10s250 6 400-3' fill='none' stroke='%23b9a888' stroke-width='1.4'/></svg>") center / 100% 100% no-repeat;
}
.jr--families .jr-fam-promise .jr-strip__row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.jr--families .jr-fam-promise .jr-strip__row li + li { border-left: 1px solid var(--jr-hair-2); }
.jr--families .jr-fam-promise .jr-ico { position: relative; isolation: isolate; width: 62px; height: 52px; font-size: 34px; color: var(--jr-ink); }
.jr--families .jr-fam-promise .jr-ico::before {
  content: ""; position: absolute; inset: 4px -2px -2px 10px; z-index: -1;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  background: rgba(138, 154, 108, .24);
}
.jr--families .jr-fam-promise li:nth-child(even) .jr-ico::before { background: rgba(var(--jr-accent-rgb), .15); border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%; }
.jr--families .jr-fam-promise .jr-strip__row strong { font-size: 13.5px; }
.jr--families .jr-fam-promise .jr-strip__row div span { max-width: 170px; font-size: 12px; }

/* ---- 3. "Travel. Bond. Be Together.": three blob photographs, the
   words, a hand-written note at the right, hills at the foot --------- */
.jr .jr-fam-bond { position: relative; overflow-x: clip; padding: 76px 0 84px; background: #fcf9f3; }
.jr-fam-bond__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) 150px; gap: 44px; align-items: center; }
.jr .jr-fam-bond__copy h2 { font-size: 30px; }
.jr .jr-fam-bond__copy p:not(.jr-kicker) { margin: 16px 0 24px; max-width: 440px; font-size: 13.5px; line-height: 1.75; }
.jr-fam-blobs { position: relative; aspect-ratio: 1.12 / 1; }
.jr .jr-fam-blobs .jr-blob { border-width: 4px; }
.jr-fam-blob--top { left: 5%; top: 0; width: 92%; height: 55%; border-radius: 46% 54% 40% 60% / 58% 50% 50% 42%; }
.jr-fam-blob--top img { object-position: 50% 45%; }
.jr .jr-fam-blob--bl { left: 0; bottom: 3%; width: 49%; height: 43%; z-index: 2; border-radius: 52% 48% 44% 56% / 48% 56% 44% 52%; }
.jr-fam-blob--bl img { object-position: 50% 32%; }
.jr .jr-fam-blob--br { right: 0; bottom: 0; width: 53%; height: 47%; z-index: 2; border-radius: 44% 56% 54% 46% / 52% 44% 56% 48%; }
.jr-fam-note { position: relative; align-self: start; padding-top: 6px; color: var(--jr-ink); transform: rotate(-8deg); }
.jr-fam-note__doodle { display: block; width: 92px; height: 41px; margin: 0 0 10px 18px; opacity: .75; }
.jr .jr-fam-note p { margin: 0; font-family: var(--jr-script); font-size: 19px; line-height: 1.45; color: var(--jr-ink); white-space: nowrap; }
.jr-fam-note__heart { display: block; width: 22px; height: 22px; margin: 10px 0 0 92px; color: var(--jr-em); }
.jr-fam-hills { position: absolute; right: 3%; bottom: 14px; width: 270px; height: 100px; color: var(--jr-ink); opacity: .26; pointer-events: none; }
.jr-fam-bond .jr-leaf--tl { left: -8px; top: 30px; color: var(--jr-ink); opacity: .18; }

/* ---- 4. "Something for Everyone": six photographs cut as soft blobs */
.jr.jr--families .jr-tastes.jr-tastes--light { padding: 64px 0 60px; background: #fcf9f3; }
.jr--families .jr-fam-tastes .jr-tastes__head { margin-bottom: 30px; }
.jr .jr-fam-tastes .jr-tastes__head .jr-kicker { margin: 0 0 6px; color: var(--jr-ink); }
.jr .jr-fam-tastes .jr-tastes__head h2 { display: flex; align-items: center; gap: 18px; font-size: 28px; }
.jr .jr-fam-tastes .jr-tastes__head h2::after { content: ""; flex: 0 0 64px; height: 1.5px; background: currentColor; opacity: .45; }
.jr--families .jr-tastes--light .jr-taste + .jr-taste { border-left: 0; }
.jr--families .jr-tastes--light .jr-taste__ph {
  max-width: 168px; aspect-ratio: 1.12 / 1;
  border-radius: 46% 54% 42% 58% / 54% 46% 54% 46%;
  box-shadow: 0 12px 24px -16px rgba(var(--jr-shadow-rgb), .55);
}
.jr--families .jr-tastes--light .jr-taste:nth-child(2n) .jr-taste__ph { border-radius: 54% 46% 56% 44% / 46% 54% 44% 56%; }
.jr--families .jr-tastes--light .jr-taste:nth-child(3n) .jr-taste__ph { border-radius: 50% 50% 44% 56% / 58% 48% 52% 42%; }
a.jr-taste, a.jr-taste:hover, a.jr-taste:focus { text-decoration: none; }

/* ---- 5. the destinations on a forest-green band -------------------- */
.jr .jr-parks.jr-fam-dests { position: relative; overflow: hidden; padding: 44px 0 54px; background: var(--jr-forest); }
.jr .jr-fam-dests .jr-head--small h2.jr-kicker { color: #f3e9d2; }
.jr-fam-dests .jr-leaf--bl { left: -14px; bottom: 0; color: #c9d6a8; opacity: .22; }
.jr--families .jr-park--over.jr-park--land { border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.jr--families .jr-park--land .jr-park__txt strong { font-size: 18px; }
.jr--families .jr-park--land .jr-park__txt > span { font-size: 12px; }

/* ---- 6. the closing split: the beach at sunset, the words on cream -- */
.jr.jr--families .jr-split { background: var(--jr-canvas); }
.jr--families .jr-split__ph img { object-position: 42% 66%; }
.jr--families .jr-split__copy h2 em { color: var(--jr-em); }
.jr--families .jr-split__sprig { color: var(--jr-sage); opacity: .5; }

@media (max-width: 1299px) {
  .jr--families .jr-hero .jr-leaf { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .jr--families .jr-hero--brush::before { left: 50%; }
  .jr--families .jr-hero--wash .jr-hero__lead { max-width: 340px; }
}
@media (max-width: 1199px) {
  .jr-fam-bond__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .jr-fam-note { grid-column: 2; justify-self: end; margin-top: -10px; }
  .jr--families .jr-fam-promise .jr-strip__row strong { font-size: 12.5px; }
}
@media (max-width: 991px) {
  .jr--families .jr-fam-promise .jr-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .jr--families .jr-fam-promise .jr-strip__row li:nth-child(4) { border-left: 0; }
  .jr-fam-bond__grid { grid-template-columns: 1fr; gap: 30px; }
  .jr-fam-blobs { max-width: 560px; }
  .jr-fam-note { grid-column: auto; margin: 0 4% 0 0; }
  .jr-fam-hills { display: none; }
  .jr--families .jr-split__sprig { display: none; }
}
@media (max-width: 575px) {
  .jr--families .jr-kicker { font-size: 10.5px; letter-spacing: .16em; }
  .jr--families .jr-hero__script { margin: 4px 0 10px; font-size: 19px; }
  .jr .jr-strip--stack.jr-fam-promise { padding: 24px 0 38px; }
  .jr--families .jr-fam-promise .jr-ico { width: 46px; height: 40px; font-size: 26px; }
  .jr--families .jr-fam-promise .jr-strip__row strong { font-size: 11.5px; }
  .jr--families .jr-fam-promise .jr-strip__row div span { font-size: 10.5px; }
  .jr .jr-fam-bond { padding: 46px 0 24px; }
  .jr-fam-bond__grid { gap: 24px; }
  .jr .jr-fam-bond__copy h2 { font-size: 21px; }
  .jr .jr-fam-bond__copy p:not(.jr-kicker) { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.6; }
  .jr .jr-fam-blobs .jr-blob { border-width: 3px; }
  /* clear of the call / WhatsApp column at the right */
  .jr-fam-note { margin-right: 64px; }
  .jr .jr-fam-note p { font-size: 15px; }
  .jr-fam-note__doodle { width: 70px; height: 31px; }
  .jr-fam-note__heart { margin-left: 70px; }
  .jr-fam-bond .jr-leaf { display: none; }
  .jr.jr--families .jr-tastes.jr-tastes--light { padding: 40px 0 44px; }
  .jr .jr-fam-tastes .jr-tastes__head h2 { gap: 12px; font-size: 21px; }
  .jr .jr-fam-tastes .jr-tastes__head h2::after { flex-basis: 40px; }
  .jr--families .jr-tastes--light .jr-taste__ph { max-width: 120px; }
  .jr .jr-parks.jr-fam-dests { padding: 34px 0 40px; }
  .jr--families .jr-park--over.jr-park--land { aspect-ratio: 1 / 1; }
  .jr--families .jr-park--land .jr-park__txt strong { font-size: 14px; }
  .jr--families .jr-park--land .jr-park__txt > span { font-size: 10.5px; }
}

/* The hero's "Explore ..." button glides down the page to the page's own
   section, and the section stops clear of the sticky header (about 60px)
   instead of under it (2026-10-21; Family, Couple and Luxury used to go
   straight to a listing, the designer: "pehle listing pe mat le jao").
   Every travel-style page on this sheet gets it, so the older on-page
   buttons (#jrTrips, #jrPlaces, #jrTastes, #jrRoutes, #jrEscapes ...)
   land the same way. Less motion asked for: the jump without the glide. */
section[id^="jr"] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.jr-hero) { scroll-behavior: smooth; }
}