/* =====================================================================
   Beyond Journey — Golden Journeys (60+) landing page
   ---------------------------------------------------------------------
   The dedicated page behind the "Golden Journeys (60+)" item in the main
   nav. It is the only page on the site that does NOT wear the navy/orange
   brand skin: the programme is sold to a different reader (a senior
   traveller, or an adult child booking for a parent), and the approved
   design for it is a warm ivory / deep-olive / gold editorial page.
   The sitewide header and footer are untouched above and below it, so
   the colour shift is contained to this page's own content.

   TYPE — this page uses the site's own Inter/Poppins pair, not a display
   serif. It was first drawn with one, and the sizes and tracking below
   were re-set when it moved across: Inter needs tighter tracking and
   smaller display sizes to hold the same weight on the page.

   SCOPING — everything lives under .gjp and is prefixed .gj-. Nothing in
   here selects a bare element or a shared class, so loading this file on
   another page would change nothing. (The bj*- prefixes elsewhere in
   css/ are NOT unique to one page; this one is.)

   IMAGES — the design asks for two photographs of senior travellers that
   Beyond Journey does not own. The only people-photography in /img/ is
   the 403x156 slider thumbnails, far too small for either slot, so both
   are filled from the library's warmest high-resolution frames:
     /img/golden-journeys/hero.jpg       the Varanasi ghats
     /img/golden-journeys/departure.jpg  an aircraft at sunset
   Replace at those two paths when the real photographs are commissioned
   (a doorstep pick-up and an airport farewell) - no code has to change.
   The warm grade lives in CSS, not in the JPEGs, so a replacement is
   pulled into the palette automatically.
   ===================================================================== */

.gjp {
  /* ---- palette (sampled from the approved design) ---- */
  --gj-ivory:      #f7f2e9;   /* page ground */
  --gj-ivory-soft: #fbf7f0;   /* panels sitting on white */
  --gj-white:      #ffffff;
  --gj-ink:        #23301b;   /* headings — deep olive, not black */
  --gj-body:       #5b6053;   /* body copy */
  --gj-faint:      #85897b;   /* captions */
  --gj-line:       #ece5d8;   /* hairlines on ivory/white */
  --gj-gold:       #b08a3e;   /* accent type */
  --gj-gold-warm:  #c9a758;   /* buttons, active dots */
  --gj-amber:      #e3a03b;   /* the arrow badge on the hero CTA */
  --gj-band:       #3c4826;   /* closing expert band */
  --gj-btn:        #2b331c;   /* hero CTA body */

  /* The site's own pair, spelled exactly as css/bj-listing.css,
     bj-detail.css and bj-auth.css spell it - Inter for display, Poppins
     for everything else. This page loads no webfont of its own, so it
     resolves to whatever the rest of the site resolves to on the same
     device. (Worth knowing: neither family is actually delivered by this
     project - there is no @font-face and no Google Fonts link anywhere -
     so on a device without them installed the whole site, this page
     included, falls back to 'Segoe UI'/system-ui.) */
  --gj-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gj-ui:      'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gj-r:      22px;          /* card radius */
  --gj-r-sm:   14px;
  --gj-shadow: 0 24px 60px -30px rgba(35, 48, 27, .38);

  background: var(--gj-ivory);
  color: var(--gj-body);
  font-family: var(--gj-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;           /* the hero bleeds; never let it scroll */
}

/* The reset is written with :where() on purpose. style.css styles bare
   h1-h6 and p, so this page has to reset them - but a plain `.gjp h2`
   would be (0,1,1) and would then out-rank every `.gj-*` class rule
   below it, silently eating their margins. :where() contributes nothing
   to specificity, so these land at element level and any component rule
   wins. text-transform is the other thing style.css imposes: it
   Title-Cases every heading, which this page's sentence-case headlines
   must not inherit. */
:where(.gjp) h1,
:where(.gjp) h2,
:where(.gjp) h3 {
  font-family: var(--gj-display);
  color: var(--gj-ink);
  margin: 0;
  font-weight: 700;
  /* Inter needs to be tracked in hard at display sizes; the serif this
     page was first drawn with did not. */
  letter-spacing: -.025em;
  text-transform: none;
}

:where(.gjp) p { margin: 0; }
:where(.gjp) ul { list-style: none; margin: 0; padding: 0; }
:where(.gjp) img { max-width: 100%; }
:where(.gjp) li { list-style: none; }

/* one deliberately stronger rule: style.css Title-Cases headings from
   several places, and losing that fight would rewrite the headlines. */
.gjp h1, .gjp h2, .gjp h3, .gjp .gj-card__t { text-transform: none; }

.gjp a:focus-visible,
.gjp button:focus-visible {
  outline: 2px solid var(--gj-gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =====================================================================
   1. HERO
   The photograph is full-bleed; an ivory gradient laid over its left
   half is what makes the headline readable, so the scrim stops being a
   decoration and becomes load-bearing — keep it if you swap the image.
   ===================================================================== */

.gj-hero {
  position: relative;
  isolation: isolate;
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: 72px 0 150px;      /* the bottom room is for the care card */
  background: var(--gj-ivory);
}

.gj-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.gj-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 54%;
  /* The library's photographs are stock-cool; the page is warm ivory and
     gold. Grading them here rather than baking it into the JPEG means a
     replacement photograph dropped at the same path is unified too. */
  filter: saturate(.72) sepia(.34) contrast(1.06) brightness(1.04);
}

/* a whisper of gold over the whole frame, so photo and page share a light */
.gj-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(247, 242, 233, .3), rgba(176, 138, 62, .22));
  mix-blend-mode: multiply;
}

.gj-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--gj-ivory) 0%,
      var(--gj-ivory) 24%,
      rgba(247, 242, 233, .94) 36%,
      rgba(247, 242, 233, .55) 48%,
      rgba(247, 242, 233, 0) 64%),
    linear-gradient(0deg, var(--gj-ivory) 0%, rgba(247, 242, 233, 0) 32%);
}

.gj-hero__copy { max-width: 620px; }

/* EVERY line in this column starts on the same left edge. That sounds
   obvious and it was the block's main fault: the note's icon used to sit
   in a centred 40px box, which pushed its text 54px in and made the hero
   look like it had a stray indent in the middle of it. */

.gj-hero__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gj-gold);
  margin-bottom: 14px;
}

.gj-hero__kicker span { margin: 0 4px; opacity: .6; }

.gj-hero__title {
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.08;
  margin-bottom: 16px;
}

.gj-hero__sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: #4d5347;
  line-height: 1.55;
  margin-bottom: 22px;
}

/* Who the programme is for. One sentence, set as one sentence: the gold
   opening is inline emphasis, NOT a block, or the line breaks in the
   middle of the clause and reads as a formatting accident. */
.gj-hero__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 500px;
  margin-bottom: 30px;
}

.gj-hero__note-ico {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  margin-top: 3px;        /* optical align with the first line of text */
  color: var(--gj-gold);
}

.gj-hero__note p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--gj-body);
}

.gj-hero__note strong {
  color: var(--gj-gold);
  font-weight: 700;
}

/* ---- the hero call to action ---- */
.gj-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 9px 9px 9px 30px;
  border-radius: 999px;
  background: var(--gj-btn);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px -18px rgba(35, 48, 27, .8);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.gj-cta:hover,
.gj-cta:focus {
  color: #fff;
  text-decoration: none;
  background: #202710;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px rgba(35, 48, 27, .9);
}

.gj-cta__ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gj-amber);
  color: #2b331c;
  display: grid;
  place-items: center;
  font-size: 14px;
}

/* Three plain credentials under the button. They exist because the hero
   asks a 70-year-old to trust us with their parent's holiday, and a
   headline alone does not earn that. Every line is something the rest of
   the site already says - nothing here is invented for effect. */
/* Three icons here cost about 60px of width and pushed the third claim
   onto a second line, leaving it stranded under the other two. Dots cost
   nothing, fit on one line, and stop the row competing with the heart
   icon directly above it. */
.gj-hero__cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 22px;
  max-width: 620px;
}

.gj-hero__cred > li {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #6a6f5d;
}

/* Dots only while the row genuinely fits on one line. The moment it
   wraps, the separator leads the new line - so the phone rules below
   drop the dots and stack the claims instead. */
.gj-hero__cred > li + li::before {
  content: "\2022";
  margin-right: 14px;
  color: var(--gj-gold-warm);
  font-weight: 400;
}

/* =====================================================================
   2. CARE CARD — the five things we actually do, lifted over the hero
   ===================================================================== */

.gj-care { position: relative; z-index: 2; margin-top: -110px; }

.gj-care__card {
  background: var(--gj-white);
  border-radius: var(--gj-r);
  box-shadow: var(--gj-shadow);
  /* no bottom padding: the comfort strip below is a flush footer that
     runs to the card's own edges */
  padding: 30px 28px 0;
  overflow: hidden;
}

.gj-care__eyebrow {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gj-gold);
  margin-bottom: 26px;
}

.gj-care__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  /* The five cells used to be separated by hairlines. They fought the
     rounded hover chip - a straight rule cutting through a curved tint
     reads as a rendering fault - and five vertical rules across a white
     card made the section look like a table of charges rather than a
     list of things we do. The icons already mark the columns. */
}

.gj-care__row > li {
  text-align: center;
  padding: 16px 12px 20px;
  border-radius: 16px;
  transition: background .22s ease, transform .22s ease;
}

.gj-care__row > li:hover { background: #fbf8f2; transform: translateY(-3px); }

.gj-care__ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 8px 16px -12px rgba(35, 48, 27, .5);
}

/* Each service keeps its own tint so the row reads as five things rather
   than one thing five times - but every tint now sits in the page's own
   warm range. The set this replaces ran sage, gold, SKY BLUE, INDIGO and
   mint: on an ivory, olive and gold page those two cool circles were the
   loudest objects in the section and belonged to a different design.
   Five warm hues, all held near L90 so none steps forward. */
.gj-care__ico--home { background: #e2e9d6; color: #4f6a33; }  /* sage       */
.gj-care__ico--bag  { background: #f4e6c3; color: #96721c; }  /* gold       */
.gj-care__ico--air  { background: #f1dfd2; color: #a2603a; }  /* terracotta */
.gj-care__ico--aide { background: #dfe6de; color: #46664f; }  /* eucalyptus */
.gj-care__ico--call { background: #ece2d3; color: #8a6b3a; }  /* sand       */

/* min-height is two lines of this type. Four of the five titles wrap to
   two lines and one does not; without it that column's description
   started higher than its neighbours' and the row's baseline sagged. */
.gj-care__t {
  font-family: var(--gj-ui);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--gj-ink);
  line-height: 1.32;
  min-height: 2.64em;
  margin-bottom: 9px;
}

.gj-care__d {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gj-faint);
  /* evens out the rag so no description ends on a single orphaned word */
  text-wrap: balance;
}

/* ---- the four smaller comforts ----
   Previously a bordered rounded box sitting inside a bordered rounded
   card - a box in a box. It is now the card's own footer: bled out to
   the card edges with negative margins, tinted rather than outlined, and
   held off the row above by one hairline instead of four sides. */
.gj-care__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 22px -28px 0;
  padding: 0 12px;
  background: #faf7f0;
  border-top: 1px solid var(--gj-line);
}

.gj-care__strip > li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4d5347;
  text-align: left;
}

.gj-care__strip i,
.gj-care__strip svg { color: var(--gj-gold); font-size: 14px; flex: 0 0 auto; }

/* =====================================================================
   3. PEACE OF MIND — the promise made to the person who books, not the
   person who travels
   ===================================================================== */

.gj-peace { padding: 64px 0 0; }

.gj-peace__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--gj-ivory-soft);
  border: 1px solid var(--gj-line);
  border-radius: var(--gj-r);
  overflow: hidden;
  box-shadow: 0 18px 48px -34px rgba(35, 48, 27, .5);
}

.gj-peace__copy { padding: 44px 38px; align-self: center; }

.gj-peace__h { font-size: clamp(24px, 2.6vw, 33px); line-height: 1.2; }

/* The second line was drawn as a gold italic. Inter ships no true italic
   in a normal install, and a browser-slanted grotesque looks like a
   mistake - so the line is carried by colour and weight instead. */
.gj-peace__h em {
  display: block;
  font-style: normal;
  color: var(--gj-gold);
}

.gj-peace__lead {
  margin: 18px 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gj-body);
}

.gj-peace__list > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  color: #4d5347;
}

.gj-peace__list i,
.gj-peace__list svg { color: var(--gj-gold); font-size: 16px; margin-top: 3px; flex: 0 0 auto; }

.gj-peace__media { position: relative; min-height: 320px; }

.gj-peace__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(.86) sepia(.18) contrast(1.04);
}

/* softens the seam where the ivory panel meets the photograph */
.gj-peace__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    var(--gj-ivory-soft) 0%, rgba(251, 247, 240, 0) 14%);
}

.gj-trust {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  width: 190px;
  background: #fff;
  border-radius: var(--gj-r-sm);
  padding: 14px 16px;
  box-shadow: 0 16px 36px -18px rgba(35, 48, 27, .55);
}

.gj-trust__row { display: flex; align-items: center; gap: 10px; }
.gj-trust__row i,
.gj-trust__row svg { color: var(--gj-gold); font-size: 19px; flex: 0 0 auto; }

.gj-trust__lbl {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gj-faint);
}

.gj-trust__lbl b { display: block; font-size: 14px; color: var(--gj-ink); }

.gj-trust__hr { height: 1px; background: var(--gj-line); margin: 12px 0; }

.gj-trust__stars { color: var(--gj-gold-warm); font-size: 12px; letter-spacing: 1px; }
.gj-trust__score { font-size: 13px; font-weight: 700; color: var(--gj-ink); }
.gj-trust__src   { font-size: 11px; color: var(--gj-faint); margin-top: 3px; }

/* =====================================================================
   4. DESTINATIONS
   ===================================================================== */

.gj-dest { padding: 52px 0 0; }

.gj-eyebrow {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gj-gold);
  margin-bottom: 10px;
}

.gj-dest__h { text-align: center; font-size: clamp(23px, 2.8vw, 34px); }

/* a short gold rule under the section heading - the one ornament on the
   page, and the thing that stops five stacked white cards reading as a
   spreadsheet */
.gj-dest__h::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--gj-gold-warm);
  border-radius: 2px;
}

.gj-dest__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 14px) / 6);
  gap: 14px;
  margin-top: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.gj-dest__track::-webkit-scrollbar { display: none; }

.gj-card {
  position: relative;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 5 / 7;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 16px 34px -24px rgba(35, 48, 27, .7);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gj-card:hover,
.gj-card:focus { transform: translateY(-4px); text-decoration: none; }

.gj-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.gj-card:hover img,
.gj-card:focus img { transform: scale(1.07); }

/* an inset hairline instead of a border, so the 1px never breaks the
   radius or nudges the grid track */
.gj-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  pointer-events: none;
}

.gj-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18, 24, 12, 0) 30%,
    rgba(18, 24, 12, .5) 55%,
    rgba(18, 24, 12, .92) 100%);
}

.gj-card__body {
  display: block;
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
}

.gj-card__t {
  display: block;
  font-family: var(--gj-display);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}

.gj-card__s {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  margin: 4px 0 10px;
}

.gj-card__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 4px 4px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
}

.gj-card__go-ico {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  font-size: 9px;
}

.gj-card:hover .gj-card__go { background: rgba(255, 255, 255, .16); }

/* ---- scroll indicator ---- */
.gj-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.gj-dots[hidden] { display: none; }

.gj-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ded7c8;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.gj-dots button[aria-current="true"] { width: 22px; background: var(--gj-gold-warm); }

.gj-dest__all { text-align: center; margin-top: 18px; }

.gj-dest__all a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gj-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 138, 62, .35);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.gj-dest__all a:hover,
.gj-dest__all a:focus {
  color: #8d6d2c;
  border-color: #8d6d2c;
  text-decoration: none;
  gap: 12px;
}

/* =====================================================================
   5. PROMISE STRIP
   ===================================================================== */

.gj-promise { padding: 44px 0 0; }

.gj-promise__card {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  background: var(--gj-white);
  border-radius: 18px;
  box-shadow: 0 18px 44px -32px rgba(35, 48, 27, .55);
  padding: 24px 22px;
}

.gj-promise__card > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 20px;
  border-left: 1px solid var(--gj-line);
}

.gj-promise__card > li:first-child { border-left: 0; }

.gj-promise__card > li > i,
.gj-promise__card > li > svg {
  color: var(--gj-gold); font-size: 22px; margin-top: 2px; flex: 0 0 auto;
}

.gj-promise__lead h3 { font-size: 19px; line-height: 1.25; }

.gj-promise__t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gj-ink);
  line-height: 1.25;
  margin-bottom: 5px;
}

.gj-promise__d { font-size: 12.5px; line-height: 1.45; color: var(--gj-faint); }


/* =====================================================================
   4b. HOW IT WORKS — the one dark band
   The page was seven white cards on ivory in a row. This section is the
   break in that rhythm as much as it is the content, so the colour is
   load-bearing: do not lighten it back to a card.
   ===================================================================== */

.gj-steps {
  margin-top: 64px;
  padding: 56px 0 60px;
  background: var(--gj-band);
  color: rgba(255, 255, 255, .78);
}

.gj-eyebrow--dark { color: var(--gj-gold-warm); }

.gj-steps__h {
  text-align: center;
  color: #fff;
  font-size: clamp(23px, 2.8vw, 34px);
  margin-bottom: 44px;
}

.gj-steps__h::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--gj-gold-warm);
  border-radius: 2px;
}

.gj-steps__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: none;
}

.gj-steps__step {
  position: relative;
  padding: 0 18px;
  text-align: center;
}

/* the rule that joins the numbers. It is drawn from the centre of one
   marker to the centre of the next, and the first step has none, so the
   line never runs off either end of the row. */
.gj-steps__step::before {
  content: "";
  position: absolute;
  top: 21px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}

.gj-steps__step:first-child::before { display: none; }

.gj-steps__no {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gj-gold-warm);
  color: #2b331c;
  font-family: var(--gj-display);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--gj-band);
}

.gj-steps__step h3 {
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

/* Sized and lifted for the reader this page is written for: 13px at 72%
   white on olive is fine for a 30-year-old designer and thin for a
   70-year-old on a phone in daylight. */
.gj-steps__step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .86);
}

/* =====================================================================
   5b. FAQ
   <details>/<summary>, so it works with JavaScript switched off and the
   browser's own find-in-page can reach a closed answer.
   ===================================================================== */

.gj-faq { padding: 68px 0 0; }

/* Questions on the right, the reason to ring on the left. The column is
   held to 340px because it is a panel, not a paragraph - any wider and
   the note below the heading turns into a block of body copy competing
   with the questions. */
.gj-faq__wrap {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
}

/* It follows the reader down. The list is the taller column by some way,
   so without this the phone number scrolls off while they are still
   opening questions - which is the exact moment it is worth having. */
.gj-faq__aside {
  position: sticky;
  top: calc(var(--bjh-pinned, 88px) + 28px);
}

.gj-eyebrow--left { text-align: left; }

.gj-faq__h {
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.15;
  /* in a 340px column this heading broke as "Questions families ask / us",
     leaving a two-letter orphan; balance breaks it across the middle */
  text-wrap: balance;
}

.gj-faq__h::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 16px 0 0;
  background: var(--gj-gold-warm);
  border-radius: 2px;
}

.gj-faq__note {
  margin: 20px 0 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gj-body);
}

/* The number used to be a small underlined link under six closed rows.
   Given a shape, it becomes the thing you do when the list has not
   answered you - which for this page is the whole point. */
.gj-faq__call {
  /* fit-content, not inline-flex: as inline boxes the call pill and the
     "full FAQ" link flowed onto the same line and the link read as a
     second button beside it. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background: var(--gj-white);
  border: 1px solid #e6dcc4;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gj-faq__call:hover,
.gj-faq__call:focus {
  text-decoration: none;
  border-color: var(--gj-gold-warm);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(35, 48, 27, .7);
}

.gj-faq__call-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(176, 138, 62, .12);
  color: var(--gj-gold);
  font-size: 15px;
  flex: 0 0 auto;
}

.gj-faq__call-txt { display: block; line-height: 1.25; }
.gj-faq__call-txt small { display: block; font-size: 11.5px; color: var(--gj-faint); }
.gj-faq__call-txt b { font-size: 16px; color: var(--gj-ink); }

.gj-faq__all {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gj-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 138, 62, .35);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.gj-faq__all:hover,
.gj-faq__all:focus {
  color: #8d6d2c;
  border-color: #8d6d2c;
  text-decoration: none;
  gap: 12px;
}

/* Six separate pill bars read as a settings screen. One bordered card
   with hairline-separated rows reads as a document, which is what a list
   of questions is. The measure is capped rather than run to the full
   1140px container: an answer set 110 characters wide is a paragraph
   nobody finishes. */
.gj-faq__list {
  background: var(--gj-white);
  border: 1px solid var(--gj-line);
  border-radius: var(--gj-r);
  overflow: hidden;
  box-shadow: 0 18px 44px -34px rgba(35, 48, 27, .5);
}

.gj-faq__item + .gj-faq__item { border-top: 1px solid #f1ece1; }

/* the open row is tinted, so the answer belongs to its question without
   needing a rule drawn between them */
.gj-faq__item[open] { background: #fbf8f2; }

.gj-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gj-ink);
  transition: background .18s ease, color .18s ease;
}

.gj-faq__item summary:hover { background: #fbf8f2; color: #1b2614; }

/* the default disclosure triangle, removed in both dialects */
.gj-faq__item summary::-webkit-details-marker { display: none; }
.gj-faq__item summary::marker { content: ""; }

/* A loose chevron floating at the right edge is not obviously a control.
   In a disc it is, and the disc is a 30px target rather than a 13px one -
   which on a page written for readers over sixty is the point. */
.gj-faq__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(176, 138, 62, .1);
  color: var(--gj-gold);
  font-size: 12px;
  transition: transform .25s ease, background .2s ease;
}

.gj-faq__item summary:hover .gj-faq__mark { background: rgba(176, 138, 62, .2); }
.gj-faq__item[open] .gj-faq__mark {
  transform: rotate(180deg);
  background: var(--gj-gold-warm);
  color: #fff;
}

.gj-faq__item > p {
  padding: 0 60px 20px 22px;
  /* the row is now ~700px wide; without a cap the answer sets at about
     95 characters a line, which is past the point people finish it */
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gj-body);
}

/* an answer may carry a link - keep it readable inside the tinted row */
.gj-faq__item > p a {
  color: var(--gj-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 138, 62, .4);
}

.gj-faq__item > p a:hover,
.gj-faq__item > p a:focus { color: #8d6d2c; border-color: #8d6d2c; text-decoration: none; }

/* =====================================================================
   6. CLOSING EXPERT BAND
   A plain band at the end of the page rather than a fixed overlay: the
   site already carries a floating expert pill and a call button in the
   header, and a third permanently-docked CTA would be one too many.
   ===================================================================== */

.gj-band {
  margin-top: 52px;
  background: var(--gj-band);
  padding: 20px 0;
}

/* The sitewide expert pill and WhatsApp buttons are fixed to the
   bottom-right of the viewport, and this band puts its one CTA in exactly
   that corner. The reserved gutter keeps them off each other. */
@media (min-width: 768px) {
  .gj-band__in { padding-right: 92px; }
}

.gj-band__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.gj-band__copy { display: flex; align-items: center; gap: 14px; }
.gj-band__copy > i,
.gj-band__copy > svg { color: var(--gj-gold-warm); font-size: 22px; flex: 0 0 auto; }
.gj-band__copy b { display: block; color: #fff; font-size: 18px; line-height: 1.3; }
.gj-band__copy span { font-size: 13.5px; color: rgba(255, 255, 255, .72); }

.gj-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--gj-gold-warm);
  color: #2b331c;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.gj-band__btn:hover,
.gj-band__btn:focus {
  background: #d8b667;
  color: #2b331c;
  text-decoration: none;
  transform: translateY(-2px);
}

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */

@media (max-width: 1199px) {
  .gj-dest__track { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
}

@media (max-width: 991px) {
  .gj-hero { min-height: 520px; padding: 56px 0 130px; }

  /* three then two: the joining rule is drawn per row, so it has to be
     cut at the start of every row, not just the first step. */
  .gj-steps__row { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .gj-steps__step:nth-child(3n + 1)::before { display: none; }

  .gj-hero__media img { object-position: 76% 30%; }
  /* The copy column keeps widening relative to the viewport as the screen
     narrows, so the ivory has to travel further right with it or the
     credentials line ends up unreadable on top of the photograph. */
  .gj-hero__scrim {
    background:
      linear-gradient(90deg,
        var(--gj-ivory) 0%, rgba(247, 242, 233, .96) 58%,
        rgba(247, 242, 233, .62) 78%, rgba(247, 242, 233, .1) 100%),
      linear-gradient(0deg, var(--gj-ivory) 0%, rgba(247, 242, 233, 0) 30%);
  }

  .gj-care__row { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }

  .gj-care__strip { grid-template-columns: repeat(2, 1fr); }
  .gj-care__strip > li:nth-child(n + 3) { border-top: 1px solid #ece5d8; }

  .gj-peace__card { grid-template-columns: 1fr; }
  .gj-peace__copy { padding: 34px 26px; order: 2; }
  .gj-peace__media { order: 1; min-height: 300px; }
  .gj-peace__media::before {
    background: linear-gradient(0deg,
      var(--gj-ivory-soft) 0%, rgba(251, 247, 240, 0) 18%);
  }

  .gj-dest__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); }

  .gj-promise__card { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .gj-promise__card > li:nth-child(odd) { border-left: 0; }
  .gj-promise__lead { grid-column: 1 / -1; }

  /* Stacked, and the panel stops following - a sticky element in a
     single column just pins a heading over the content below it. */
  .gj-faq__wrap { grid-template-columns: 1fr; gap: 28px; }
  .gj-faq__aside { position: static; max-width: 560px; }
}

@media (max-width: 767px) {
  .gjp { font-size: 14.5px; }

  .gj-steps { margin-top: 48px; padding: 44px 0 46px; }
  .gj-steps__h { margin-bottom: 32px; }
  /* one column: the rule now runs vertically between the markers */
  .gj-steps__row { grid-template-columns: 1fr; row-gap: 26px; }
  .gj-steps__step {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 0 16px;
    text-align: left;
    padding: 0;
  }
  .gj-steps__no { margin: 0; grid-row: span 2; }
  .gj-steps__step h3 { align-self: center; margin-bottom: 4px; }
  .gj-steps__step::before {
    top: 46px;
    bottom: -26px;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .gj-steps__step:first-child::before { display: block; }
  .gj-steps__step:last-child::before { display: none; }
  .gj-steps__step:nth-child(3n + 1)::before { display: block; }

  .gj-faq { padding-top: 46px; }
  .gj-faq__note { margin: 16px 0 20px; }
  .gj-faq__call { width: 100%; }
  .gj-faq__item summary { padding: 16px 15px; font-size: 15px; gap: 12px; }
  /* the desktop right inset exists to keep the answer clear of the disc;
     at phone width it is just a chunk of missing line */
  .gj-faq__item > p { padding: 0 15px 18px; font-size: 14.5px; }

  /* At phone width the text runs the full bleed, so the photograph steps
     back to a warm texture behind it rather than competing with it.
     Legibility over atmosphere - this page is read by people over sixty. */
  .gj-hero__scrim {
    background:
      linear-gradient(90deg,
        var(--gj-ivory) 0%, rgba(247, 242, 233, .96) 42%, rgba(247, 242, 233, .88) 100%),
      linear-gradient(0deg, var(--gj-ivory) 0%, rgba(247, 242, 233, 0) 46%);
  }

  .gj-hero__kicker { font-size: 11px; margin-bottom: 12px; }

  /* stacked, and the dots go: a wrapped dot-separated row starts its
     second line with a leading bullet, which reads as a typo. */
  .gj-hero__cred {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 20px;
  }
  .gj-hero__cred > li { font-size: 12.5px; }
  .gj-hero__cred > li + li::before { content: none; }
  .gj-dest__h::after { margin-top: 12px; }

  .gj-hero { min-height: 0; padding: 40px 0 120px; }
  .gj-hero__copy { max-width: none; }
  .gj-hero__note { max-width: none; }

  .gj-care { margin-top: -96px; }
  .gj-care__card { padding: 24px 16px 0; }
  .gj-care__eyebrow { margin-bottom: 18px; }

  /* One column, and the icon moves beside the words instead of above
     them. Five centred cards stacked on a phone is a very long scroll of
     short lines; as rows the eye runs down one left edge and each item is
     two lines deep instead of five. It also gives the type room to grow,
     which on a page written for readers over sixty matters more than the
     symmetry does. */
  .gj-care__row { grid-template-columns: 1fr; gap: 2px; }

  .gj-care__row > li {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 0 16px;
    align-items: start;
    text-align: left;
    padding: 12px 10px;
  }

  .gj-care__ico {
    width: 46px;
    height: 46px;
    margin: 0;
    font-size: 18px;
    grid-row: span 2;
  }

  /* The titles carry a hard <br> so they break evenly in the five
     centred columns. Beside the icon there is room for the whole phrase,
     and an arbitrary break in a left-aligned row just looks broken.
     The markup keeps a real space before each <br> precisely so that
     removing the break here does not weld the two words together. */
  .gj-care__t br { display: none; }
  .gj-care__t { min-height: 0; font-size: 15px; margin-bottom: 4px; }
  .gj-care__d { font-size: 13.5px; }

  .gj-care__strip { margin: 18px -16px 0; padding: 0 4px; }
  .gj-care__strip > li { justify-content: flex-start; padding: 13px 10px; }

  .gj-dest__track { grid-auto-columns: 62%; }

  .gj-promise__card { grid-template-columns: 1fr; }
  .gj-promise__card > li { border-left: 0; padding: 4px 6px; }

  .gj-band__in { flex-direction: column; text-align: center; }
  .gj-band__copy { flex-direction: column; gap: 8px; }
  .gj-band__btn { width: 100%; justify-content: center; }
}

@media (max-width: 479px) {
  .gj-care__strip { grid-template-columns: 1fr; }
  .gj-care__strip > li + li { border-top: 1px solid #ece5d8; }
  .gj-dest__track { grid-auto-columns: 74%; }
  .gj-trust { right: 14px; bottom: 14px; width: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .gjp *, .gjp *::before, .gjp *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}