/* =====================================================================
   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: 5px 5px 5px 18px; font-size: 13.5px; gap: 10px; }
.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.
   ===================================================================== */
/* Warm dark behind and over the photograph, not navy (2026-09-25, the
   designer's call): a navy wash at .26 across the whole picture gave the
   pick-up scene a blue cast, and the card was "blue blue". Charcoal with
   a warm bias keeps the morning light in the photograph. */
.bjc .gj-hero { background: #1c1814; }

/* 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 is the Golden Journeys page's own (css/bj-golden.css, 1. HERO)
   with charcoal where that page has ivory - the designer's call,
   2026-09-25: solid under the headline, gone by 48% so the couple and
   the car stand in the photograph's true light, and the foot dissolving
   to the ground the care card lands on. */
.bjc .gj-hero__scrim {
  background:
    /* lighter than solid (2026-09-25, "bahut dark"): .76 under the
       headline lets the house and the foliage show through, and white
       type on it still passes; the note, the button and the chips carry
       their own backgrounds */
    linear-gradient(90deg,
      rgba(28, 24, 20, .76) 0%,
      rgba(28, 24, 20, .7) 20%,
      rgba(28, 24, 20, .52) 28%,
      rgba(28, 24, 20, .3) 35%,
      rgba(28, 24, 20, .12) 42%,
      rgba(28, 24, 20, 0) 48%),
    linear-gradient(0deg, rgba(28, 24, 20, .6) 0%, rgba(28, 24, 20, 0) 30%);
}

@media (max-width: 991px) {
  /* the copy column widens as the screen narrows, so the charcoal travels
     further right with it - the Golden Journeys tablet wash, in charcoal */
  .bjc .gj-hero__scrim {
    background:
      linear-gradient(90deg,
        rgba(28, 24, 20, .8) 0%, rgba(28, 24, 20, .72) 58%,
        rgba(28, 24, 20, .46) 78%, rgba(28, 24, 20, .1) 100%),
      linear-gradient(0deg, rgba(28, 24, 20, .6) 0%, rgba(28, 24, 20, 0) 30%);
  }
}

/* ---- 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: 30px; height: 30px; }

.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(28, 24, 20, .8) 0%,
        rgba(28, 24, 20, .72) 45%,
        rgba(28, 24, 20, .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.

   THE DRAWINGS ARE A STAND-IN. The owner wants photographs here, so each
   card asks for TWO layers: the photograph first and the drawing beneath
   it. A layer that 404s simply is not painted, so a card shows its
   photograph the moment the file exists and the drawing until then - no
   CSS change, no deploy of anything but the picture.

       drop in   wwwroot/img/care/step-1.jpg ... step-7.jpg
       shape     landscape, 600x260 or larger, same crop for all seven
       subject   1 a car at the front door        5 supported travel
                 2 a representative with trolley  6 updates on the phone
                 3 the check-in desk              7 their own door again
                 4 met on arrival

   Keep the bottom centre of the frame quiet - the step's icon sits over
   it - and mind CLAUDE.md on binary media: these belong in R2 once the
   bucket exists. Both pages that show the seven read this file, so a
   picture dropped in appears on the home page and on /golden-journeys.
   ===================================================================== */
.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.jpg"), url("/img/care/step-1.svg"); }
.bjc-steps > li:nth-child(2)::before { background-color: #f4e6c3; background-image: url("/img/care/step-2.jpg"), url("/img/care/step-2.svg"); }
.bjc-steps > li:nth-child(3)::before { background-color: #f1dfd2; background-image: url("/img/care/step-3.jpg"), url("/img/care/step-3.svg"); }
.bjc-steps > li:nth-child(4)::before { background-color: #dde7ea; background-image: url("/img/care/step-4.jpg"), url("/img/care/step-4.svg"); }
.bjc-steps > li:nth-child(5)::before { background-color: #dfe6de; background-image: url("/img/care/step-5.jpg"), url("/img/care/step-5.svg"); }
.bjc-steps > li:nth-child(6)::before { background-color: #ece2d3; background-image: url("/img/care/step-6.jpg"), url("/img/care/step-6.svg"); }
.bjc-steps > li:nth-child(7)::before { background-color: #ecdcd8; background-image: url("/img/care/step-7.jpg"), 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; }
}

/* =====================================================================
   The seven on a phone: two at a time, on a swipe rail (2026-09-22)
   ---------------------------------------------------------------------
   One card per row made this block 2105px on a 390px screen - 31% of the
   whole Golden Journeys page, two and a half screens of Care Promise
   before a visitor reaches anything else. Stacking them two to a row got
   that to 1199px; putting those two on a rail gets it to one row.

   The seven become a horizontal scroller with two cards in view and the
   rest a swipe away, snapping one card at a time. The picture comes down
   from 150px to 96px with it, because a 150px band on a ~164px card is
   more picture than card.

   THE TRADE, so nobody re-litigates it by accident: five of the seven
   steps are now behind an interaction. A promise nobody scrolls sideways
   to read is a promise not made, so the rail bleeds to the card's edges
   and a sliver of the third card shows at all times - that peek is the
   only thing telling a visitor there is more. If the peek ever goes, the
   affordance goes with it.

   This block sits at the end of the file deliberately: the rules it
   overrides are spread over three earlier @media blocks - including a
   max-width: 479px one that forces a single column - and several of the
   picture-then-words rules are unscoped, so anything earlier loses.
   Both pages that show the seven read this file, so the home page gets
   the same rail.
   ===================================================================== */
@media (max-width: 767px) {
  .bjc-steps {
    /* flex, not the grid above: the rail is one line that overflows */
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Each card ends where its own words end. Stretched to the tallest
       (step 6, whose seven chips run to five lines in a 134px column) the
       first two cards carried 120px of empty white below the text - a
       third of the card. The rail is still as tall as the tallest card,
       but the space under a short one is now the promise card's own
       background rather than a card with nothing in it. */
    align-items: flex-start;
    /* out to the card's edges (.bjc-card is padded 14px here) and back in
       again, so the rail scrolls edge to edge while the first card still
       lines up with the heading above it */
    margin: 0 -14px;
    padding: 4px 14px 12px;
    /* Without this, mandatory snapping aligns card one with the scrollport
       edge and eats the 14px padding, landing it a padding's width left of
       the heading above it. scroll-padding puts the snap line where the
       padding says the content starts. */
    scroll-padding: 0 14px;
  }

  /* Two in view plus a 24px sliver of the third. Track is 338px: two
     cards, one 10px gap between them and a 20px tail, so the card is
     (338 - 30) / 2 = 154 = 50% - 15px. The sliver is the whole
     affordance - see the note above before changing this number. */
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) {
    grid-column: auto;
    flex: 0 0 calc(50% - 15px);
    scroll-snap-align: start;
  }

  .bjc-steps > li::before,
  .bjc-steps > li:nth-child(7)::before { height: 96px; }

  /* no lift on touch: one axis of a scroller is clipped, so the raised
     card and its shadow would be cut off rather than lifted */
  .bjc-steps > li:hover { transform: none; box-shadow: 0 1px 2px rgba(35, 48, 27, .04); }

  /* the icon and its white collar shrink with the picture */
  .bjc-ico {
    width: 44px; height: 44px; font-size: 16px;
    margin: -22px auto 8px;
    box-shadow: 0 0 0 3px #fff, 0 5px 12px -8px rgba(23, 35, 62, .5);
  }

  .bjc-step { top: 8px; left: 8px; padding: 2px 7px; font-size: 9px; }

  /* tighter than the one-per-row type: the text column is ~144px here */
  .bjc-t { font-size: 13px; line-height: 1.3; padding: 0 10px; margin-bottom: 5px; }
  .bjc-d { font-size: 11.5px; line-height: 1.45; padding: 0 10px 14px; }

  /* Step 6 sets the height of the whole rail - top-aligned cards mean the
     tallest one decides it, and seven chips in a 134px column ran to five
     lines, 333px against 231px for a plain card. Tightening the chips is
     what shortens the rail and the white below it; it is not cosmetic. */
  .bjc-chips { gap: 4px; padding: 0 7px 12px; }
  .bjc-chips > li { font-size: 9.5px; padding: 2px 6px; line-height: 1.3; }

  /* A slim track, left visible on purpose. A rail with no scrollbar and
     no arrows reads as a row that happens to be cut off. */
  .bjc-steps { scrollbar-width: thin; scrollbar-color: var(--gj-gold-warm) #f0ebe0; }
  .bjc-steps::-webkit-scrollbar { height: 4px; }
  .bjc-steps::-webkit-scrollbar-track { background: #f0ebe0; border-radius: 999px; }
  .bjc-steps::-webkit-scrollbar-thumb { background: var(--gj-gold-warm); border-radius: 999px; }
}

/* =====================================================================
   Phone: exactly two cards in view, and the four figures on one row
   (2026-09-23, the designer looking at the home page on a phone)
   ---------------------------------------------------------------------
   Two decisions above are reversed here on the designer's call, so this
   block sits last and wins.

   THE RAIL. The 24px sliver of a third card was kept as the swipe
   affordance. The designer wants two whole cards and nothing peeking, so
   each card is now half the track less half the gap: two fill the view
   exactly, and the thin scrollbar under the rail is what says there is
   more.

   THE FIGURES. One per row was chosen because a half-width cell broke
   "634+ Packages" across two lines. Four across is wanted instead, so
   each cell stacks: icon, then the figure, then its caption, centred, and
   the figure is free to break after the number - "634+" over "Packages"
   reads as intended in a stack. Cells are divided by the same hairline
   the desktop strip uses, back on its side.
   ===================================================================== */
@media (max-width: 767px) {
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) { flex: 0 0 calc(50% - 7px); }
  /* the gap equals the rail padding, so the third card starts exactly at
     the clipped edge and not a pixel of it shows */
  .bjc-steps { gap: 14px; }

  .bjc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Each figure on one line and each caption on one line (owner,
     2026-09-30), smaller rather than broken - "634+" over "Packages" and
     "of Travel" over "Expertise" read as four stacks, not a row.

     The widest lines are "68+ Destinations" (8.3em, Poppins bold) and
     "Thoughtfully Curated" (10.6em, regular). In four equal quarters the
     captions would have to be ~7px. Instead each column is as wide as its
     own words (flex-basis auto) and the space left over is shared equally,
     so a divider still sits midway between two neighbours. At a caption
     of 1em and a figure of 1.25em the four columns need 39.4em; both sizes
     are set from the strip's width (cqi) against that, less the columns'
     padding and 3px of air a side, capped at 9.5px / 12px for the wider
     phones. A 390px phone gets ~8px / 10px.

     The package count comes from the database. Up to four digits
     ("1,250+ Packages") it still fits; past that, or for any longer word
     written here one day, a line wraps (min-width 0, overflow-wrap) - it
     never runs into the next column. */
  .bjc-stats { display: flex; container-type: inline-size; }
  .bjc-stats > li {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0; padding: 12px 3px 11px; text-align: center;
  }
  .bjc-stats > li + li::before {
    left: 0; right: auto; top: 16px; bottom: 16px;
    width: 1px; height: auto;
  }
  .bjc-stats > li:nth-child(n + 3) { border-top: 0; }
  .bjc-stats span.bjc-stats__ico { width: auto; height: auto; font-size: 14px; margin: 0 0 6px; }
  .bjc-stats strong {
    max-width: 100%;
    font-size: 9.5px; font-size: clamp(8.5px, calc((100cqi - 48px) / 32), 12px);
    line-height: 1.2; overflow-wrap: anywhere;
  }
  .bjc-stats > li > span:last-child {
    max-width: 100%;
    font-size: 7.5px; font-size: clamp(7px, calc((100cqi - 48px) / 40), 9.5px);
    line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere;
  }
}

/* The two cards in view are the same height and sit flush at the foot,
   and the arrows sit close under them. Top-aligned cards of different
   heights (214 to 264px on a 390px phone) read as misaligned side by
   side, and the rail was as tall as its tallest card, so the control
   landed 57px under the shorter ones. Stretched, every card is the
   height of the tallest, the bottoms line up, and the control follows at
   a fixed distance. */
@media (max-width: 767px) {
  .bjc-steps { align-items: stretch; padding-bottom: 8px; }
  .bjc-steps + .bjm-nav { margin-top: 6px; }
}


/* =====================================================================
   The home hero, composed (2026-09-23, the designer found the pieces
   scattered - first on a phone, then on the desktop too)
   ---------------------------------------------------------------------
   Kicker, title, line, note, button and three loose credential lines
   each sat on their own with uneven air between them. Same markup, one
   block: a 14-18px rhythm from top to bottom, the note as the glass card
   with the gold square it already is, the button at its own width, and
   the three credentials as three small tiles in a row - a tick over two
   short lines each - so they read as one strip rather than three stray
   sentences with dots between them. On a phone the wash lifts at the top
   so the photograph shows above the words.
   ===================================================================== */
.bjc .gj-hero__sub { margin-bottom: 16px; }
.bjc .gj-hero__note { margin-bottom: 18px; }

/* three tiles, one row - every width */
.bjc .gj-hero__cred {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px; max-width: 560px;
}
.bjc .gj-hero__cred > li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 12px 8px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; line-height: 1.35; font-weight: 500; text-align: center;
  color: rgba(255, 255, 255, .86);
}
.bjc .gj-hero__cred > li::before,
.bjc .gj-hero__cred > li + li::before {
  content: "\2713"; display: block; margin: 0 0 6px;
  font-size: 14px; font-weight: 700; color: var(--gj-gold-warm);
}

@media (max-width: 767px) {
  .bjc .gj-hero { padding: 30px 0 116px; }
  .bjc .gj-hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(28, 24, 20, .6) 0%,
        rgba(28, 24, 20, .78) 34%,
        rgba(28, 24, 20, .84) 70%,
        rgba(28, 24, 20, .9) 100%);
  }
  .bjc .gj-hero__media img { object-position: 64% 30%; }

  .bjc .gj-hero__kicker { font-size: 10.5px; margin-bottom: 10px; }
  .bjc .gj-hero__title { font-size: 28px; line-height: 1.15; margin-bottom: 8px; }
  .bjc .gj-hero__sub { font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }

  .bjc .gj-hero__note { gap: 10px; padding: 10px 12px; margin-bottom: 16px; border-radius: 12px; }
  .bjc .gj-hero__note-ico { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
  .bjc .gj-hero__note p { font-size: 12.5px; line-height: 1.45; }

  .bjc .gj-cta { font-size: 13px; }

  .bjc .gj-hero__cred { gap: 8px; margin-top: 16px; max-width: none; }
  .bjc .gj-hero__cred > li { padding: 10px 6px 9px; font-size: 11px; line-height: 1.3; }
  .bjc .gj-hero__cred > li::before,
  .bjc .gj-hero__cred > li + li::before { font-size: 13px; margin-bottom: 5px; }

  /* the form sits closer under the words */
  .bjc-hero__grid { gap: 22px; }
}

/* =====================================================================
   Seven across, and each card turns over (2026-09-24)
   ---------------------------------------------------------------------
   The designer: the block sits at half the screen, the seven should be
   one row across the whole of it, and each card should be a 3D card
   that shows only its heading until the cursor lands on it, then turns
   over to show the heading and the rest.

   THE WIDTH. The card sat in a Bootstrap .container - 1140 to 1320px -
   which on a wide monitor is half the screen with air either side. The
   container carries .bjc-wide now (both pages) and, above phone width,
   runs to the screen's edges less a gutter.

   THE ROW. Seven across from 1200px: a card is ~168px on a 1366 laptop
   and ~250px on a 1920 monitor, wide enough for a heading. Between 768
   and 1199 a seventh of the width is too narrow even for that, so the
   four-and-three of the original two rows returns there. The phone rail
   below 768 is untouched.

   THE TURN. The markup changed with it: each step is a .bjc-flip holding
   two .bjc-face plates stacked in the same grid cell, so the taller of
   the two sets the card's height and nothing is measured by hand. The
   front carries the picture (moved from li::before to its own ::before),
   the step label, the icon and the heading; the back carries the heading
   again and the words, on the step's own tint. Each face turns on its
   own - front 0 to 180, back -180 to 0, backface hidden - rather than the
   pair inside one preserve-3d parent, because that is the form that
   survives ancestors with overflow: hidden and stacking contexts, and
   both pages have those. The perspective sits on the list item, which
   has no box of its own any more: the box, the radius and the clipping
   moved to the faces, since a plate turning inside a clipped item loses
   its near edge mid-turn.

   A card also turns on keyboard focus (each item is tabbable) and, via
   :focus-within, on a tap on a touch tablet. With reduced motion the back
   fades in over the front instead of turning.
   ===================================================================== */

/* ---- the block, out to the screen's edges ---- */
@media (min-width: 768px) {
  .gj-care > .bjc-wide { max-width: none; padding-left: 28px; padding-right: 28px; }
}

/* ---- the picture lives on the front face now, at every width ---- */
.bjc-steps > li::before { display: none; }
/* 2026-10-09, the owner: no words over the photograph. The front face is
   white again; the photograph is a band across its top (this ::before)
   and the heading sits under it in navy. The per-step pictures are set
   on the band further down, with the dated file names. */
.bjc-face--front::before {
  content: "";
  display: block; flex: 0 0 auto; width: 100%; height: 132px;
  background-color: #e9e6df;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

@media (max-width: 1199px) { .bjc-face--front::before { height: 104px; } }
@media (max-width: 767px) {
  .bjc-face--front::before { height: 96px; }
  /* the phone: nothing turns, the two faces stack into the card as
     before, and the heading is not printed twice */
  .bjc-face--back .bjc-t { display: none; }
}

/* ---- seven in a row ---- */
@media (min-width: 1200px) {
  .bjc-steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
  .bjc-steps > li,
  .bjc-steps > li:nth-child(5),
  .bjc-steps > li:nth-child(7) { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* four and three, the three centred: the twenty-four-column trick from the first pass */
  .bjc-steps { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 12px; }
  .bjc-steps > li,
  .bjc-steps > li:nth-child(7) { grid-column: span 6; }
  .bjc-steps > li:nth-child(5) { grid-column: 4 / span 6; }
}

/* ---- the turn ---- */
@media (min-width: 768px) {
  .bjc-steps { align-items: stretch; }

  /* the item is the stage: no box of its own, just the perspective and a small lift */
  .bjc-steps > li {
    display: block; padding: 0; overflow: visible;
    background: none; border: 0; border-radius: 14px; box-shadow: none;
    perspective: 1100px;
    transition: transform .45s ease;
  }
  .bjc-steps > li:hover,
  .bjc-steps > li:focus-within {
    transform: translateY(-5px);
    background: none; border-color: transparent; box-shadow: none;
  }
  .bjc-steps > li:focus { outline: none; }
  .bjc-steps > li:focus-visible { outline: 2px solid var(--gj-gold-warm); outline-offset: 4px; }

  /* the two plates, in one cell */
  .bjc-flip { display: grid; height: 100%; }
  .bjc-face {
    grid-area: 1 / 1;
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eceae4;
    box-shadow: 0 1px 2px rgba(35, 48, 27, .04);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    transform: rotateY(0deg);
    transition: transform .7s cubic-bezier(.4, .1, .2, 1), box-shadow .45s ease;
  }
  .bjc-face--back {
    justify-content: center; text-align: center;
    padding: 22px 16px 24px;
    transform: rotateY(-180deg);
  }
  .bjc-steps > li:hover .bjc-face--front,
  .bjc-steps > li:focus-within .bjc-face--front { transform: rotateY(180deg); }
  .bjc-steps > li:hover .bjc-face--back,
  .bjc-steps > li:focus-within .bjc-face--back { transform: rotateY(0deg); }
  .bjc-steps > li:hover .bjc-face,
  .bjc-steps > li:focus-within .bjc-face { box-shadow: 0 18px 34px -18px rgba(23, 35, 62, .5); }

  /* the front: picture, label, icon, and the heading centred in what is left */
  .bjc-face--front .bjc-t { margin: auto 0; padding: 4px 12px 18px; }

  /* the back: a short orange rule, the heading, the words, on the step's tint */
  .bjc-face--back::before {
    content: ""; display: block; flex: 0 0 auto;
    width: 28px; height: 3px; margin: 0 0 12px; border-radius: 2px;
    background: var(--gj-gold-warm);
  }
  .bjc-face--back .bjc-t { margin: 0 0 8px; padding: 0; }
  .bjc-face--back .bjc-d { margin: 0; padding: 0; color: var(--gj-body); }
  .bjc-face--back .bjc-chips { margin: 2px 0 0; padding: 0; justify-content: center; }
  .bjc-face--back .bjc-chips > li { background: rgba(255, 255, 255, .72); border-color: rgba(23, 35, 62, .1); }

  .bjc-steps > li:nth-child(1) .bjc-face--back { background: #e2e9d6; border-color: #d3ddc2; }
  .bjc-steps > li:nth-child(2) .bjc-face--back { background: #f4e6c3; border-color: #e9d6a5; }
  .bjc-steps > li:nth-child(3) .bjc-face--back { background: #f1dfd2; border-color: #e6cbb8; }
  .bjc-steps > li:nth-child(4) .bjc-face--back { background: #dde7ea; border-color: #c9d8dd; }
  .bjc-steps > li:nth-child(5) .bjc-face--back { background: #dfe6de; border-color: #cbd6c9; }
  .bjc-steps > li:nth-child(6) .bjc-face--back { background: #ece2d3; border-color: #ddcfb9; }
  .bjc-steps > li:nth-child(7) .bjc-face--back { background: #ecdcd8; border-color: #dfc7c1; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .bjc-steps > li, .bjc-face { transition: opacity .25s ease; }
  .bjc-steps > li:hover, .bjc-steps > li:focus-within { transform: none; }
  .bjc-face, .bjc-face--back,
  .bjc-steps > li:hover .bjc-face--front, .bjc-steps > li:hover .bjc-face--back,
  .bjc-steps > li:focus-within .bjc-face--front, .bjc-steps > li:focus-within .bjc-face--back { transform: none; }
  .bjc-face--back { opacity: 0; }
  .bjc-steps > li:hover .bjc-face--back, .bjc-steps > li:focus-within .bjc-face--back { opacity: 1; }
}

/* =====================================================================
   The front of each card is the photograph (2026-09-24, later the same day)
   ---------------------------------------------------------------------
   The designer, on seeing the seven turn: no drawn pictures and no icon
   discs - each front should be a real photograph of the thing itself,
   filling the card, with the heading written on it.

   So the photograph fills the front face, a navy wash rises from its
   foot so the heading reads in white over any picture, and the step
   label keeps its corner. The icon discs are gone from the markup. The
   drawn SVGs in img/care stay on disk but nothing paints them now.

   THE PHOTOGRAPHS ARE STAND-INS, hot-linked from Unsplash under its free
   licence (commercial use, no attribution required; none of them is an
   Unsplash+ picture). They are NOT in the repository - CLAUDE.md takes
   no new binary media - and each is asked for behind /img/care/step-N.jpg,
   so a photograph of our own dropped in at that path (or served from R2
   once the bucket exists) replaces the stock picture with no CSS change.
   Use the same crop for all seven: they show at about 3:4 in the row of
   seven and about 5:2 on a phone, so keep the subject near the middle.

       1 an older man stepping into a car     5 two people arm in arm
       2 a trolley through the terminal       6 a couple on a video call
       3 the check-in counters                7 a sunlit front door
       4 walking out through arrivals
   ===================================================================== */
.bjc-face--front {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
}
.bjc-steps > li:nth-child(1) .bjc-face--front::before { background-image: url("/img/care/step-1.jpg?v=20260925"), url("https://images.unsplash.com/photo-1764173039712-da4632d1fa9d?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(2) .bjc-face--front::before { background-image: url("/img/care/step-2.jpg?v=20260925"), url("https://images.unsplash.com/photo-1769745280792-c9c16b553af0?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(3) .bjc-face--front::before { background-image: url("/img/care/step-3.jpg?v=20260925"), url("https://images.unsplash.com/photo-1730288278805-42d46b17438d?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(4) .bjc-face--front::before { background-image: url("/img/care/step-4.jpg?v=20260925"), url("https://images.unsplash.com/photo-1687992176093-6417a93fa3d0?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(5) .bjc-face--front::before { background-image: url("/img/care/step-5.jpg?v=20260925"), url("https://images.unsplash.com/photo-1771463572032-5f2b131f7ef8?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(6) .bjc-face--front::before { background-image: url("/img/care/step-6.jpg?v=20260925"), url("https://images.unsplash.com/photo-1758686254023-09e191043c88?auto=format&fit=crop&w=640&q=70"); }
.bjc-steps > li:nth-child(7) .bjc-face--front::before { background-image: url("/img/care/step-7.jpg?v=20260925"), url("https://images.unsplash.com/photo-1779597301229-6c83d3a14078?auto=format&fit=crop&w=640&q=70"); }

/* the heading, in navy under the photograph, centred in the room left */
.bjc-face--front .bjc-t {
  position: relative; z-index: 1;
  align-self: stretch;
  margin: auto 0; padding: 12px 12px 14px;
  color: #17233e; font-size: 14px; font-weight: 600; line-height: 1.35;
  text-align: center;
}

@media (min-width: 768px) {
  /* a portrait card: the picture decides the height unless the words on
     the back need more */
  .bjc-face--front { aspect-ratio: 3 / 4; }
}
@media (max-width: 1199px) {
  .bjc-face--front .bjc-t { font-size: 13px; padding: 10px 10px 12px; }
}
@media (max-width: 767px) {
  /* the phone: the photograph is the top of the card, the words follow */
  .bjc-face--front { min-height: 136px; }
  .bjc-face--front .bjc-t { font-size: 13px; line-height: 1.3; margin: auto 0; padding: 10px 10px 11px; }
  .bjc-face--back .bjc-d { padding-top: 10px; }
}



/* =====================================================================
   The search panel as a bar under the words (2026-09-25)
   ---------------------------------------------------------------------
   The designer wants the photograph seen. Beside the words the card -
   white, glass, or compact - always hid the right third of it, the
   representative and the car. So on a desktop the form leaves the right
   column and sits under the words, and the whole right half of the hero
   is photograph. The bar itself - one design for this page and /holiday
   - is css/bj-search-bar.css; this block only lays the hero out around
   it. The two menus the bar opens both open UPWARD (the travellers panel
   already did): downward they would be drawn behind the care card that
   rides over the hero's foot, as the comment above explains.
   ===================================================================== */
@media (min-width: 992px) {
  .bjc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
  /* the bar sat 6px off the care card's top edge; 166 leaves 30 */
  .bjc .gj-hero { padding-bottom: 166px; }
  .bjc .gj-hero__copy { max-width: 560px; }
  .bjc-search { max-width: none; }
  .bjc .bjc-search .bjty { top: auto; bottom: 100%; margin: 0 0 8px; }
}

/* =====================================================================
   Phone: no empty band under the words (2026-09-30)
   ---------------------------------------------------------------------
   The owner: there was wasted space inside the cards. The rail stretches
   every card to the tallest one (2026-09-23, so the two in view line up
   at the foot), and the words run from three lines to six, so a short
   card carried up to 68px of blank white under its text at 360px.

   Two changes, both phone only. The photograph now takes whatever height
   the card has spare: the words sit straight under it, and a card with
   less to say shows more picture instead of more white. And step 6's
   seven chips, which wrapped to five rows of pills and made it the
   tallest card of the seven, read as one centred sentence in the same
   type as the other six descriptions - which also lowers the height all
   the others are stretched to. Each item stays whole on its line.
   ===================================================================== */
@media (max-width: 767px) {
  .bjc-steps > li { display: flex; flex-direction: column; }
  .bjc-flip { flex: 1 1 auto; display: flex; flex-direction: column; }
  .bjc-face--front { flex: 1 0 auto; }
  .bjc-face--back { flex: 0 0 auto; }

  /* a notch smaller and 2px wider a side: step 5's sentence ran to six
     lines against three for most, and that spread is what the photographs
     make up, so it shows as headings at different heights in a pair */
  .bjc-face--back .bjc-d { font-size: 11px; line-height: 1.42; padding: 10px 8px 14px; }
  .bjc-face--back .bjc-chips {
    display: block; margin: 0; padding: 10px 8px 14px;
    text-align: center; text-wrap: balance;
    font-size: 11px; line-height: 1.42; color: var(--gj-faint);
  }
  .bjc-face--back .bjc-chips > li {
    display: inline; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0;
    font-size: inherit; font-weight: 400; line-height: inherit; color: inherit;
    white-space: nowrap;
  }
  .bjc-face--back .bjc-chips > li:not(:last-child)::after { content: ","; }
}

/* A tablet (768-991px): the four figures keep the desktop shape, icon
   beside the words, but at 21px "634+ Packages" and "68+ Destinations"
   broke over two lines in a 172px quarter while "40+ Years" did not, so
   the row read as four different heights (2026-09-30). 14.5px keeps the
   longest, "68+ Destinations", on one line at 768px with its icon. */
@media (min-width: 768px) and (max-width: 991px) {
  .bjc-stats > li { column-gap: 8px; padding: 18px 8px; }
  .bjc-stats span.bjc-stats__ico { width: 20px; font-size: 18px; }
  .bjc-stats strong { font-size: 14.5px; white-space: nowrap; }
  .bjc-stats > li > span:last-child { font-size: 10.5px; white-space: nowrap; }
}