/* =====================================================================
   Beyond Journey Care Promise - the seven steps on the home page
   ---------------------------------------------------------------------
   The owner's brief (2026-09-18): the home page opens with the Golden
   Journeys hero, the Care Promise sits over its foot in place of the
   "Included on every Golden Journey" card, and the holiday search banner
   follows beneath. Seven steps, one card each, laid out in TWO rows.

   The hero and the white card shell are the Golden Journeys page's own
   (css/bj-golden.css, .gjp / .gj-*) - the block the brief points at - so
   the two read as one programme. Everything below is the seven cards,
   scoped to .bjc-*. It sits inside .gjp, so the golden palette variables
   (--gj-*) are in scope.
   ===================================================================== */

.bjc { padding-bottom: 40px; }

/* the white card the seven sit in */
.bjc-card { padding: 38px 34px 34px; }

/* ---------------------------------------------------------------
   The heading
   --------------------------------------------------------------- */
.bjc-head { text-align: center; max-width: 620px; margin: 0 auto 34px; }

.bjc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gj-gold);
}
.bjc-eyebrow::before,
.bjc-eyebrow::after {
  content: ""; width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gj-gold-warm));
}
.bjc-eyebrow::after { background: linear-gradient(90deg, var(--gj-gold-warm), transparent); }

.bjc-title {
  margin: 0 0 10px;
  font-family: var(--gj-display);
  font-size: 32px; font-weight: 700; line-height: 1.16; letter-spacing: -.025em;
  color: var(--gj-ink); text-transform: none;
}
.bjc-sub { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gj-faint); }

/* ---------------------------------------------------------------
   The two rows
   ---------------------------------------------------------------
   Seven cards will not divide into equal columns, so the grid is
   twenty-four narrow columns: the first four cards span six each and
   fill the top row, and the fifth is placed at column four, which puts
   the last three centred beneath them. Every card is the same width.

   css/style.css puts `font-size: 16px; margin-bottom: 10px` on every
   `ol li` and `display: inline-block` on every `ul li`, so the items and
   the chips below restate what they need.
   --------------------------------------------------------------- */
.bjc-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 16px;
}
.bjc-steps > li {
  grid-column: span 6;
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin: 0; padding: 26px 18px 24px;
  font-size: inherit; text-align: center;
  background: var(--gj-white);
  border: 1px solid var(--gj-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(35, 48, 27, .04);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
/* the second row, centred under the first */
.bjc-steps > li:nth-child(5) { grid-column: 4 / span 6; }

.bjc-steps > li:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 138, 62, .34);
  box-shadow: 0 18px 36px -22px rgba(35, 48, 27, .45);
}

/* ---- the step label ---- */
.bjc-step {
  display: inline-block; margin: 0 0 16px; padding: 4px 11px;
  border-radius: 999px;
  background: #f7f2e7;
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gj-gold);
  transition: background-color .26s ease, color .26s ease;
}
.bjc-steps > li:hover .bjc-step { background: var(--gj-gold); color: #fff; }

/* ---- the icon ---- */
.bjc-ico {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 0 16px; border-radius: 50%;
  font-size: 22px;
  transition: transform .26s ease;
}
.bjc-ico i, .bjc-ico svg { width: 1em; height: 1em; }
.bjc-steps > li:hover .bjc-ico { transform: scale(1.06); }

/* the same family of tints the Golden Journeys card uses, two more added */
.bjc-ico--home { background: #e2e9d6; color: #4f6a33; }   /* sage        */
.bjc-ico--bag  { background: #f4e6c3; color: #96721c; }   /* gold        */
.bjc-ico--air  { background: #f1dfd2; color: #a2603a; }   /* terracotta  */
.bjc-ico--meet { background: #dde7ea; color: #3f6672; }   /* slate blue  */
.bjc-ico--care { background: #dfe6de; color: #46664f; }   /* eucalyptus  */
.bjc-ico--news { background: #ece2d3; color: #8a6b3a; }   /* sand        */
.bjc-ico--back { background: #ecdcd8; color: #94564a; }   /* clay        */

/* ---- the words ---- */
.bjc-t {
  margin: 0 0 9px;
  font-family: var(--gj-ui);
  font-size: 15px; font-weight: 700; line-height: 1.34;
  color: var(--gj-ink);
}
.bjc-d {
  margin: 0;
  font-size: 12.5px; line-height: 1.62; color: var(--gj-faint);
  text-wrap: balance;
}

/* step 6 lists what the family hears about; chips read faster than a
   sentence of commas and keep the card near its neighbours' height */
.bjc-chips {
  list-style: none; margin: 1px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
}
.bjc-chips > li {
  display: inline-block; margin: 0; padding: 3px 9px;
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
  color: #7a6a4a; background: #faf6ec; border: 1px solid #efe6d3;
  border-radius: 999px;
}

/* ---------------------------------------------------------------
   Widths
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
  .bjc-card { padding: 32px 22px 28px; }
  .bjc-steps { gap: 12px; }
  .bjc-steps > li { padding: 22px 12px 20px; }
  .bjc-ico { width: 56px; height: 56px; font-size: 20px; }
  .bjc-t { font-size: 14px; }
  .bjc-d { font-size: 12px; }
}

@media (max-width: 991px) {
  /* three, three and one: twelve columns, four each, the last centred */
  .bjc-steps { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .bjc-steps > li { grid-column: span 4; }
  .bjc-steps > li:nth-child(5) { grid-column: span 4; }
  .bjc-steps > li:nth-child(7) { grid-column: 5 / span 4; }
  .bjc-title { font-size: 27px; }
  .bjc-head { margin-bottom: 26px; }
}

@media (max-width: 767px) {
  /* two by two, the seventh centred under them */
  .bjc { padding-bottom: 30px; }
  .bjc-card { padding: 26px 16px 22px; border-radius: 18px; }
  .bjc-head { margin-bottom: 22px; }
  .bjc-title { font-size: 22px; }
  .bjc-sub { font-size: 13px; }

  .bjc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .bjc-steps > li { grid-column: span 2; padding: 20px 12px 18px; }
  .bjc-steps > li:nth-child(5) { grid-column: span 2; }
  .bjc-steps > li:nth-child(7) { grid-column: 2 / span 2; }
  .bjc-ico { width: 52px; height: 52px; margin-bottom: 13px; font-size: 19px; }
  .bjc-step { margin-bottom: 13px; }
  .bjc-t { font-size: 13.5px; }
}

@media (max-width: 479px) {
  /* one under another - two of these cards side by side on a small
     phone leaves four words to a line */
  .bjc-steps { grid-template-columns: minmax(0, 1fr); }
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bjc-steps > li, .bjc-ico, .bjc-step { transition: none; }
  .bjc-steps > li:hover { transform: none; }
  .bjc-steps > li:hover .bjc-ico { transform: none; }
}

/* =====================================================================
   Making the block part of THIS page (2026-09-18, second pass)
   ---------------------------------------------------------------------
   The designer: the banner and the cards do not match the rest of the
   home page, the banner's typeface is different, and everything is too
   large. All three are true, and measurable:

     - TYPEFACE. css/style.css:26 sets the whole site in Poppins. The
       Golden Journeys page sets --gj-display to Inter for its display
       type, so the banner's headline was the one thing on the home page
       in another face.
     - SIZE. That headline is clamp(34px, 4.5vw, 58px) - up to 58px on a
       desktop, where this page's own banner is 34px and every section
       heading on it is 26px.
     - COLOUR. Deep olive and gold against a page of navy and orange.

   The warm photograph, the ivory ground and the tinted icons stay, since
   they are what the brief points at. Everything here is scoped to .bjc,
   so the Golden Journeys page itself is untouched.
   ===================================================================== */
.bjc {
  /* the site's face, for the headings inside this block too */
  --gj-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* the site's ink and accent in place of olive and gold */
  --gj-ink: #17233e;          /* headings - the navy every other heading uses */
  --gj-body: #4a5470;
  --gj-faint: #7b8395;
  --gj-gold: #d9600d;         /* accent type - orange at 4.6:1 on white */
  --gj-gold-warm: #f5761a;
  --gj-btn: #f5761a;          /* the hero button, as the site's buttons are */
  --gj-amber: #17233e;        /* its arrow disc */
}

/* ---- the banner, to this page's scale ---- */
.bjc .gj-hero { min-height: 520px; padding: 56px 0 142px; }
.bjc .gj-hero__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px;
}
.bjc .gj-hero__title {
  /* 34px: exactly this page's own banner heading */
  font-size: 34px; line-height: 1.18; letter-spacing: -.02em; margin-bottom: 12px;
}
.bjc .gj-hero__sub { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.bjc .gj-hero__note { margin-bottom: 22px; }
.bjc .gj-hero__note p { font-size: 13.5px; }
.bjc .gj-cta { padding: 8px 8px 8px 24px; font-size: 14px; gap: 14px; }
.bjc .gj-hero__cred { margin-top: 20px; }
.bjc .gj-hero__cred > li { font-size: 12.5px; font-weight: 500; }

/* ---- the card, to this page's scale ---- */
.bjc-card { padding: 32px 30px 30px; }
.bjc-head { margin-bottom: 28px; }
.bjc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; }
.bjc-title {
  /* 26px: every section heading on this page */
  font-size: 26px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 8px;
}
.bjc-sub { font-size: 13.5px; }

.bjc-steps > li { padding: 24px 16px 22px; }
.bjc-step { font-size: 9.5px; letter-spacing: .12em; margin-bottom: 14px; }
.bjc-ico { width: 56px; height: 56px; font-size: 20px; margin-bottom: 14px; }
.bjc-t { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.bjc-d { font-size: 12px; line-height: 1.6; }
.bjc-chips > li { font-size: 10px; padding: 3px 8px; }

@media (max-width: 991px) {
  .bjc .gj-hero { min-height: 440px; padding: 44px 0 132px; }
  .bjc .gj-hero__title { font-size: 30px; }
  .bjc .gj-hero__sub { font-size: 14px; }
  .bjc-title { font-size: 22px; }
}
@media (max-width: 767px) {
  /* this page drops its own banner heading to 23px here */
  .bjc .gj-hero { min-height: 0; padding: 36px 0 120px; }
  .bjc .gj-hero__title { font-size: 23px; line-height: 1.25; }
  .bjc .gj-hero__sub { font-size: 12.5px; line-height: 1.55; }
  .bjc .gj-hero__note p { font-size: 12.5px; }
  .bjc .gj-cta { font-size: 13px; }
  .bjc-title { font-size: 18px; }
  .bjc-sub { font-size: 12.5px; }
  .bjc-t { font-size: 13px; }
  .bjc-d { font-size: 11.5px; }
}

/* =====================================================================
   The banner, rebuilt (2026-09-19)
   ---------------------------------------------------------------------
   Two faults, both real:

     - A SHADOW DOWN THE LEFT. .gj-hero__media::after lays a
       linear-gradient(200deg, ivory, gold) over the photograph with
       mix-blend-mode: multiply. 200deg points at the bottom-left, so the
       gold end multiplied into the ivory and darkened that whole edge.
       The layer is off here.

     - THE BANNER ITSELF. The Golden Journeys scrim washes the left 24%
       to solid ivory and only lets the photograph appear past 64%, so
       two fifths of the banner was an empty cream panel with text
       floating in it, and the picture - already desaturated by a sepia
       filter - barely read at all.

   It is now drawn the way this site draws every other banner (the home
   page's own "Travel In Style", the listing hero, the package hero): the
   photograph full width and ungraded, a navy wash over it that is
   heaviest where the words sit, and the type in white. The white promise
   card still overlaps its foot.
   ===================================================================== */
.bjc .gj-hero { background: var(--gj-ink); }

/* the photograph, as it was taken */
.bjc .gj-hero__media::after { display: none; }
.bjc .gj-hero__media img { filter: none; object-position: 62% 46%; }

/* the wash: heavy on the reading side, light over the picture, with a
   little weight top and bottom so the header and the card's edge land
   on something rather than on bare photograph */
.bjc .gj-hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(23, 35, 62, .93) 0%,
      rgba(23, 35, 62, .86) 32%,
      rgba(23, 35, 62, .58) 56%,
      rgba(23, 35, 62, .34) 78%,
      rgba(23, 35, 62, .26) 100%),
    linear-gradient(180deg,
      rgba(16, 26, 48, .45) 0%,
      rgba(23, 35, 62, 0) 26%,
      rgba(23, 35, 62, 0) 68%,
      rgba(16, 26, 48, .5) 100%);
}

/* ---- the type, in white ---- */
.bjc .gj-hero__kicker { color: var(--gj-gold-warm); }
.bjc .gj-hero__title { color: #fff; }
.bjc .gj-hero__sub { color: rgba(255, 255, 255, .84); }

.bjc .gj-hero__note {
  align-items: center;
  padding: 11px 16px 11px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bjc .gj-hero__note-ico {
  margin-top: 0; font-size: 15px; color: #fff;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--gj-gold-warm);
}
.bjc .gj-hero__note p { color: rgba(255, 255, 255, .84); margin: 0; }
.bjc .gj-hero__note strong { color: #fff; font-weight: 600; }

.bjc .gj-cta { box-shadow: 0 16px 32px -14px rgba(185, 79, 8, .85); }
.bjc .gj-cta:hover, .bjc .gj-cta:focus { background: #d9600d; }
.bjc .gj-cta__ico { background: rgba(255, 255, 255, .22); color: #fff; width: 34px; height: 34px; }

.bjc .gj-hero__cred > li { color: rgba(255, 255, 255, .74); }
.bjc .gj-hero__cred > li + li::before { color: var(--gj-gold-warm); }

@media (max-width: 767px) {
  /* a phone reads the words over the middle of the picture, so the wash
     runs top to bottom instead of left to right */
  .bjc .gj-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(16, 26, 48, .82) 0%,
        rgba(23, 35, 62, .74) 45%,
        rgba(16, 26, 48, .8) 100%);
  }
  .bjc .gj-hero__media img { object-position: 70% 42%; }
}

/* =====================================================================
   The seven, laid out sideways (2026-09-19)
   ---------------------------------------------------------------------
   The designer: the cards do not look right and they eat too much room.
   Both come from the same thing - each card stacked its step label, a
   62px icon, the title and the description one under another, so a card
   ran ~230px tall and two rows of them took ~470px of the page before
   the holiday search banner even began.

   Turned on their side - the icon beside the words rather than above
   them - the same content sits in about 120px, so the block loses
   roughly a third of its height and reads as a list of seven things
   rather than seven posters. The boxes go with it: a soft cream panel
   and a hairline in place of the white card and its shadow, since seven
   framed boxes inside one framed card was a box in a box.
   ===================================================================== */
.bjc-steps { gap: 12px; }

.bjc-steps > li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 13px;
  align-items: start;
  text-align: left;
  padding: 15px 15px 15px 14px;
  background: #fbf8f2;
  border: 1px solid #f0ece2;
  border-radius: 14px;
  box-shadow: none;
}
.bjc-steps > li:hover {
  transform: none;
  background: #fff;
  border-color: rgba(245, 118, 26, .3);
  box-shadow: 0 10px 24px -16px rgba(23, 35, 62, .4);
}

/* the icon holds the left column for the whole card */
.bjc-ico {
  grid-column: 1; grid-row: 1 / -1;
  width: 48px; height: 48px; margin: 0;
  border-radius: 13px;                 /* a rounded square reads tidier in a row */
  font-size: 18px;
}
.bjc-steps > li:hover .bjc-ico { transform: none; }

.bjc-step {
  grid-column: 2; justify-self: start;
  margin: 0 0 5px; padding: 2px 8px;
  font-size: 9px; letter-spacing: .1em;
}
.bjc-t { grid-column: 2; margin: 0 0 4px; font-size: 13.5px; line-height: 1.35; }
.bjc-d { grid-column: 2; margin: 0; font-size: 11.5px; line-height: 1.55; text-wrap: initial; }
.bjc-chips { grid-column: 2; justify-content: flex-start; margin-top: 5px; gap: 4px; }
.bjc-chips > li { font-size: 9.5px; padding: 2px 7px; }

/* the card around them can come in now that each row is shallow */
.bjc-card { padding: 28px 26px 26px; }
.bjc-head { margin-bottom: 22px; }
.bjc { padding-bottom: 34px; }

@media (max-width: 1199px) {
  .bjc-steps { gap: 10px; }
  .bjc-steps > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 11px; padding: 13px 12px; }
  .bjc-ico { width: 44px; height: 44px; font-size: 17px; }
  .bjc-t { font-size: 13px; }
  .bjc-d { font-size: 11px; }
}
@media (max-width: 991px) {
  /* two up, the seventh across the foot */
  .bjc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) { grid-column: auto; }
  .bjc-steps > li:nth-child(7) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .bjc-steps { grid-template-columns: minmax(0, 1fr); }
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) { grid-column: 1 / -1; }
  .bjc-card { padding: 22px 14px 20px; }
}

/* The description runs the card's full width instead of being indented
   past the icon: the left column under a 48px icon was dead space, and
   the narrower text column was pushing every description onto an extra
   line or two. The icon now holds only the step label and the title. */
.bjc-steps > li {
  grid-template-areas:
    "ico step"
    "ico t"
    "d   d";
  align-items: center;
  row-gap: 0;
}
.bjc-ico { grid-area: ico; grid-row: 1 / 3; align-self: center; }
.bjc-step { grid-area: step; align-self: end; margin-bottom: 4px; }
.bjc-t { grid-area: t; align-self: start; margin: 0; }
.bjc-d { grid-area: d; margin: 9px 0 0; }
.bjc-chips { grid-area: d; margin: 9px 0 0; }

/* =====================================================================
   The holiday search, in the banner's right-hand column (2026-09-19)
   ---------------------------------------------------------------------
   The designer: the top of the page has empty space to the right of the
   words, so put the search form there, stacked. The card is the same one
   that used to sit in the banner below - same markup, same ids, same
   handlers - laid out downwards instead of across, and the SEARCH button
   is a block at its foot rather than a pill hung off the bottom edge.
   ===================================================================== */
.bjc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 368px;
  gap: 48px;
  align-items: center;
}
.bjc .gj-hero__copy { max-width: 560px; }

.bjc-search { position: relative; z-index: 5; }
.bjc-search .hp-card {
  width: 100%; max-width: none; margin: 0;
  padding: 20px; border-radius: 18px;
}
.bjc-search .hp-card__title { font-size: 15px; margin-bottom: 14px; }

/* the three fields, one under another */
.bjc-search .hp-grid { flex-direction: column; }
.bjc-search .hp-field { border-right: 0; border-bottom: 1px solid #e7e6e1; padding: 11px 14px; }
.bjc-search .hp-field:last-child { border-bottom: 0; }

/* the button belongs inside the card now that there is room below the
   fields; hung off the bottom edge it would have overlapped the promise
   card that follows */
.bjc-search .hp-search-btn {
  position: static; transform: none;
  display: block; width: 100%; margin: 14px 0 0;
  padding: 13px 20px; font-size: 15px;
}
.bjc-search .hp-search-btn:hover { transform: translateY(-1px); }

@media (max-width: 1199px) {
  .bjc-hero__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
}
@media (max-width: 991px) {
  /* the form drops under the words */
  .bjc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bjc .gj-hero__copy { max-width: none; }
  .bjc-search { max-width: 460px; }
}
@media (max-width: 767px) {
  .bjc-search { max-width: none; }
  .bjc-search .hp-card { padding: 16px; }
}

/* the words column is narrower now that the form sits beside it, and the
   three claims were wrapping with a separator dot leading the new line */
.bjc .gj-hero__cred { gap: 5px 11px; }
.bjc .gj-hero__cred > li { font-size: 12px; }
.bjc .gj-hero__cred > li + li::before { margin-right: 11px; }

/* the SEARCH button: a small centred pill, not a full-width block */
.bjc-search .hp-search-btn {
  display: block; width: fit-content;
  margin: 16px auto 2px;
  padding: 11px 34px;
  font-size: 14px; letter-spacing: .4px;
}

/* =====================================================================
   The panel's dropdowns, and the card that ate them (2026-09-21)
   ---------------------------------------------------------------------
   .gj-hero is isolation: isolate, so everything inside it - the
   travellers panel at z-index 1000, the destination list at 1200 - is
   sealed into the hero's own stacking context, and .gj-care (position:
   relative, z-index: 2, margin-top: -110px) paints over the whole of
   it. The promise card's top edge lands 66px under the search card, so
   a dropdown opening downwards had its last 30-60px drawn BEHIND the
   white card - the APPLY button, the last suggestions - and unclickable
   there, since the card also takes the hit test.

   No z-index on the hero fixes that: lifting the hero over .gj-care
   drags the hero's photograph across the promise card's top edge. So
   the fix is geometric. The travellers panel opens upwards, over the
   two fields above it, and the destination list is capped to the room
   that actually exists between the field and the card.
   ===================================================================== */
.bjc-search .hp-drop {
  top: auto;
  bottom: 100%;
  margin: 0 0 8px;
}

/* the field is the first one, so its list has to open downwards; 260px
   is the ~283px gap to the promise card at the tightest width (the form
   stacked under the words) with room to spare. The list scrolls - it
   already did, at 330px. */
.bjc-search .bjty {
  max-height: 260px;
}

/* =====================================================================
   The seven, as picture-then-words (2026-09-19)
   ---------------------------------------------------------------------
   The designer wants each step drawn as an image with the content under
   it. Beyond Journey owns no photography of a pick-up at the door, a
   representative with a trolley or an airport hand-over - the only
   people in wwwroot/img are the 403x156 testimonial thumbnails - so the
   seven pictures are DRAWN, one scene per step, in wwwroot/img/care:

       step-1  a car waiting at the front door
       step-2  a representative pushing the luggage trolley
       step-3  documents and boarding at the check-in desk
       step-4  a name board held up as they arrive
       step-5  a steadying arm, and the training behind it
       step-6  the updates landing on the family's phone
       step-7  their own front door, open and lit

   They are SVG, not photographs, for three reasons: the repository takes
   no new binary media (see CLAUDE.md), vector stays sharp at every card
   width, and all seven together weigh about 16 KB. Each one is 600x260
   with its own tint painted in, drawn in the page's navy and orange, and
   the bottom centre of every scene is left plain because the step's icon
   overlaps it. If real photographs of these seven moments ever exist,
   swap the extension below - 600x260 or larger, same landscape shape.
   ===================================================================== */
.bjc-steps > li {
  display: block;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background: #fff;
  border-color: #eceae4;
}
.bjc-steps > li:hover { background: #fff; }

/* the picture: a photograph if one is there, the step's own tint if not */
.bjc-steps > li::before {
  content: "";
  display: block;
  height: 116px;
  background-color: #e9e6df;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.bjc-steps > li:nth-child(1)::before { background-color: #e2e9d6; background-image: url("/img/care/step-1.svg"); }
.bjc-steps > li:nth-child(2)::before { background-color: #f4e6c3; background-image: url("/img/care/step-2.svg"); }
.bjc-steps > li:nth-child(3)::before { background-color: #f1dfd2; background-image: url("/img/care/step-3.svg"); }
.bjc-steps > li:nth-child(4)::before { background-color: #dde7ea; background-image: url("/img/care/step-4.svg"); }
.bjc-steps > li:nth-child(5)::before { background-color: #dfe6de; background-image: url("/img/care/step-5.svg"); }
.bjc-steps > li:nth-child(6)::before { background-color: #ece2d3; background-image: url("/img/care/step-6.svg"); }
.bjc-steps > li:nth-child(7)::before { background-color: #ecdcd8; background-image: url("/img/care/step-7.svg"); }

/* the icon rides the picture's lower edge, in a white collar so it reads
   against a photograph as well as against a flat tint */
.bjc-ico {
  position: relative; z-index: 1;
  grid-area: auto; grid-row: auto;
  width: 52px; height: 52px;
  margin: -26px auto 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 6px 14px -8px rgba(23, 35, 62, .5);
  font-size: 19px;
}

/* the words, under the picture */
.bjc-step {
  grid-area: auto; justify-self: auto;
  margin: 0 0 8px;
}
.bjc-t { grid-area: auto; margin: 0 0 6px; padding: 0 14px; }
.bjc-d { grid-area: auto; margin: 0; padding: 0 14px 18px; }
.bjc-chips { grid-area: auto; justify-content: center; margin: 0; padding: 0 12px 16px; }

@media (max-width: 1199px) {
  .bjc-steps > li::before { height: 104px; }
}
@media (max-width: 767px) {
  /* one per row here, so the picture can be wider and shallower */
  .bjc-steps > li::before { height: 150px; }
}

/* The step label sat between the picture and the icon, and the icon's
   negative margin pulled up over it. It belongs on the picture anyway -
   a small white pill in the corner, which reads over a photograph as
   well as over a tint. */
.bjc-steps { align-items: stretch; }
.bjc-steps > li { position: relative; }
.bjc-step {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  margin: 0; padding: 3px 9px;
  background: rgba(255, 255, 255, .94);
  color: var(--gj-gold);
  box-shadow: 0 2px 8px -4px rgba(23, 35, 62, .5);
}
.bjc-steps > li:hover .bjc-step { background: var(--gj-gold); color: #fff; }

/* =====================================================================
   The four figures, at the foot of the promise card (2026-09-19)
   ---------------------------------------------------------------------
   They used to sit in a band of their own below the banner. Under the
   seven steps they close the card the way the Golden Journeys card
   closes with its own strip, and they read as the proof the promises
   above ask you to take.

   Bled out to the card's edges with negative margins and tinted rather
   than outlined, so it is the card's own footer and not another box
   inside it.
   ===================================================================== */
.bjc-stats {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 26px -26px -26px; padding: 0;
  background: #faf7f1;
  border-top: 1px solid #f0ece2;
  border-radius: 0 0 var(--gj-r) var(--gj-r);
  overflow: hidden;
}
.bjc-stats > li {
  display: block; margin: 0; padding: 20px 14px;
  font-size: inherit; text-align: center;
  position: relative;
}
.bjc-stats > li + li::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 1px; background: #ece7db;
}
.bjc-stats__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 auto 9px; border-radius: 50%;
  background: #fff; color: var(--gj-gold-warm);
  border: 1px solid #f0e6d5;
  font-size: 14px;
}
.bjc-stats strong {
  display: block;
  font-family: var(--gj-display);
  font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
  color: var(--gj-ink);
}
.bjc-stats span {
  display: block; margin-top: 2px;
  font-size: 11.5px; line-height: 1.4; color: var(--gj-faint);
}

@media (max-width: 1199px) {
  .bjc-stats { margin: 22px -26px -26px; }
  .bjc-stats > li { padding: 17px 10px; }
  .bjc-stats strong { font-size: 17px; }
}
@media (max-width: 767px) {
  /* two by two, with a hairline between the rows */
  .bjc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px -14px -20px; }
  .bjc-stats > li { padding: 15px 8px; }
  .bjc-stats > li:nth-child(odd)::before { display: none; }
  .bjc-stats > li:nth-child(n + 3) { border-top: 1px solid #ece7db; }
  .bjc-stats strong { font-size: 16px; }
  .bjc-stats span { font-size: 11px; }
  .bjc-stats__ico { width: 30px; height: 30px; font-size: 13px; margin-bottom: 7px; }
}

/* ---------------------------------------------------------------------
   The figures again: a navy footer, not a pale one
   ---------------------------------------------------------------------
   Cream on white gave the strip nothing to stand on - the icons in their
   outlined white discs washed out altogether and the whole row read as
   an afterthought. In the page's navy it becomes the card's base, it
   answers the banner at the top of the block, and the four figures carry
   in white with their captions under them.
   --------------------------------------------------------------------- */
.bjc-stats {
  background: var(--gj-ink);
  border-top: 0;
}
.bjc-stats > li { padding: 22px 14px; }
.bjc-stats > li + li::before { background: rgba(255, 255, 255, .14); top: 24px; bottom: 24px; }

.bjc-stats__ico {
  width: 36px; height: 36px; margin-bottom: 10px;
  background: rgba(245, 118, 26, .16);
  border: 0;
  color: var(--gj-gold-warm);
  font-size: 15px;
}
.bjc-stats strong { color: #fff; font-size: 21px; }
.bjc-stats span { color: rgba(255, 255, 255, .62); font-size: 11.5px; margin-top: 3px; }

@media (max-width: 767px) {
  .bjc-stats > li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .bjc-stats strong { font-size: 18px; }
}
/* an orange tint over navy mixes to a muddy brown disc; a plain white
   veil under the orange glyph stays clean */
.bjc-stats__ico { background: rgba(255, 255, 255, .09); }
.bjc-stats__ico { color: #ffa050; font-size: 16px; }

/* The caption rule above is `.bjc-stats span`, and the icon is a span
   too - at (0,1,1) it was beating .bjc-stats__ico at (0,1,0) and
   painting the glyph caption-grey. Naming both wins it back. This is the
   same unqualified-span trap that has bitten .bjh-call and .bjft__ico. */
.bjc-stats span.bjc-stats__ico { color: #ffa050; }

/* ---------------------------------------------------------------------
   The figures, icon beside the words
   ---------------------------------------------------------------------
   The icon sat above the number, which made each figure three lines
   tall. Beside it, the number and its caption stack against the icon and
   the whole strip comes down to two lines. The pair is centred as a
   group in its column, so the four still read as a row.
   --------------------------------------------------------------------- */
.bjc-stats > li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 13px;
  padding: 19px 12px;
  text-align: left;
}
.bjc-stats span.bjc-stats__ico {
  grid-column: 1; grid-row: 1 / 3;
  align-self: center; margin: 0;
  width: 42px; height: 42px; font-size: 17px;
}
.bjc-stats strong { grid-column: 2; grid-row: 1; }
.bjc-stats > li > span:last-child { grid-column: 2; grid-row: 2; margin-top: 1px; }

@media (max-width: 767px) {
  .bjc-stats > li { column-gap: 10px; padding: 15px 8px; }
  .bjc-stats span.bjc-stats__ico { width: 36px; height: 36px; font-size: 15px; }
}

@media (max-width: 767px) {
  /* Two up, the figure now sits beside its icon and a half-width cell is
     too narrow for it: "633+ Packages" and "45+ Destinations" both broke
     across two lines. One per row, left-aligned against the icon. */
  .bjc-stats { grid-template-columns: minmax(0, 1fr); }
  .bjc-stats > li { justify-content: start; padding: 13px 18px; }
  .bjc-stats > li + li::before {
    left: 18px; right: 18px; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .bjc-stats > li:nth-child(n + 3) { border-top: 0; }
}

/* ---------------------------------------------------------------------
   The figures' icons: white, and no disc behind them
   ---------------------------------------------------------------------
   The tinted disc was a second shape competing with the number beside
   it. Without it the glyph can carry at 22px in plain white, which reads
   as part of the figure rather than as a badge next to it. The width is
   fixed so the four numbers still start on the same line as each other.
   --------------------------------------------------------------------- */
.bjc-stats span.bjc-stats__ico {
  width: 26px; height: auto;
  background: none; border: 0; border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-size: 22px;
}
.bjc-stats > li { column-gap: 12px; }

@media (max-width: 767px) {
  .bjc-stats span.bjc-stats__ico { width: 24px; height: auto; font-size: 19px; }
}