/* ===========================================================================
   Booked Wild — the Direct Booking Guarantee landing page

   Loaded after services.css and offer.css. Everything the page can take from
   those it does: .hdr, .hero, .sec, .wrap, .btn, .ohead, .split, .core, .stat,
   .why3, .whyus, .terms and the shared contact block are all reused unchanged,
   so this page and /website-redesign-offer/ share one grid, one heading
   hierarchy and one rule treatment.

   This file adds only what the guarantee proposition needs and neither of the
   others had: the four-step payment sequence, the 10% figure, and a price that
   has to read as unfilled while £XX is still a placeholder.
   =========================================================================== */

/* ---- the price, still awaiting a real figure ---------------------------- *
   £XX is a placeholder in the approved copy. It is set in the same display
   face as a finished price but deliberately not in the accent colour, and it
   carries a dashed rule so nobody mistakes it for a live number. */
.price--tbc {
  /* identical metrics to .price in offer.css — same face, same clamp, same
     line-height and tracking — so the price sits in the established system
     rather than in a size used nowhere else. Only the colour and the dashed
     rule mark it provisional; both come off when the real figure lands and
     this becomes a plain .price. */
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: rgba(242, 246, 238, 0.5);
  border-bottom: 3px dashed rgba(159, 220, 169, 0.5);
  padding-bottom: 12px;
  display: inline-block;
  margin: 0;
}
.priceline {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.86);
  margin: 24px 0 0;
  max-width: 46ch;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 560px) {
  .price--tbc { border-bottom-width: 2px; }
  .priceline { margin-top: 20px; }
}

/* ---- section grounds and small utilities -------------------------------- *
   The page deepens toward the guarantee and comes back out again:
   cream -> ink -> ink-2 (the climax) -> cream -> field -> image close. These
   are classes rather than inline styles so the media queries above can still
   reach the elements they modify — an inline grid-template-columns outranks
   every media query in this file. */
.sec--ink2 { background: var(--ink-2); color: var(--cream); }
.sec--ink2 .eyebrow { color: var(--accent-soft); }
.sec--ink2 .h2, .sec--ink2 h2 { color: var(--white); }
.sec--ink2 .lede { color: rgba(242, 246, 238, 0.84); }

/* two supporting points rather than three, so they take half the width each
   and still collapse to one column on a phone */
.why3--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the close sits on a photograph, where the default ink .lede would vanish */
.close .lede { color: rgba(242, 246, 238, 0.92); }

.priceblock { margin-top: 56px; }
.priceblock .actions { margin-top: 32px; }

@media (max-width: 768px) {
  .why3--two { grid-template-columns: minmax(0, 1fr); }
  .priceblock { margin-top: 44px; }
}

/* ---- scrims for two bright photographs ---------------------------------- *
   The shared .hero__scrim / .close__scrim in services.css are tuned for darker
   images. Both photographs chosen here carry blown highlights exactly where the
   copy sits — the sky through the tent opening, the pale water behind the boat
   — and measured against their brightest patches the shared scrims left the h1
   at 2.51:1 and the close lede at 3.75:1, both under AA.

   Rather than flatten the whole picture, each gains a second horizontal wash
   under the text column only, so the left side carries the contrast and the
   right side of the photograph stays open. Both layers use the section's own
   scrim colour, so their alphas compose cleanly.

   These selectors are safe to write unscoped: this stylesheet loads on this
   page alone, and /website-redesign-offer/ never sees it. */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.50) 0%, rgba(6, 26, 17, 0.34) 48%, rgba(6, 26, 17, 0) 80%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.42) 42%,
      rgba(6, 26, 17, 0.56) 66%, rgba(6, 26, 17, 0.92) 100%);
}
.close__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 25, 15, 0.52) 0%, rgba(6, 25, 15, 0.36) 50%, rgba(6, 25, 15, 0) 82%),
    linear-gradient(180deg,
      rgba(6, 25, 15, 0.70) 0%, rgba(6, 25, 15, 0.48) 42%, rgba(6, 25, 15, 0.94) 100%);
}
/* stacked, the copy runs the full width, so the wash has to as well */
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.50) 0%, rgba(6, 26, 17, 0.42) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.42) 42%,
        rgba(6, 26, 17, 0.56) 66%, rgba(6, 26, 17, 0.92) 100%);
  }
  .close__scrim {
    background:
      linear-gradient(90deg, rgba(6, 25, 15, 0.52) 0%, rgba(6, 25, 15, 0.44) 100%),
      linear-gradient(180deg, rgba(6, 25, 15, 0.70) 0%, rgba(6, 25, 15, 0.48) 42%,
        rgba(6, 25, 15, 0.94) 100%);
  }
}

/* ===========================================================================
   1. The guarantee as a process, not a second stat card
   ---------------------------------------------------------------------------
   "Why it matters" directly above is a big figure inside a rounded --card
   panel. The guarantee section was the same shape again — figure, card, dark
   ground — so the two read as one long block with a heading in the middle.

   So the guarantee stops being a card and becomes a diagram: a connected track
   of four numbered nodes carrying the sequence, closing on a --field green
   result panel. Different structure, different surface colour, different
   silhouette — the break between the two sections is now obvious at a glance.
   =========================================================================== */
.track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: track;
}
/* Each step draws its own connector to the next one, rather than one long line
   behind the whole row: a single line spanning the container overshot the last
   node by a column width and left a rule dangling into empty space. Per-step
   connectors stop where the sequence stops, at any column count. */
.track li { position: relative; padding-top: 68px; }
.track li::after {
  content: "";
  position: absolute;
  top: 21px; left: 44px; right: -28px;   /* node edge, across the 28px gap */
  height: 2px;
  background: rgba(159, 220, 169, 0.3);
}
.track li:last-child::after { display: none; }
.track li::before {
  counter-increment: track;
  content: "0" counter(track);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  /* opaque, so each node masks the line it sits on */
  background: var(--ink-2);
  border: 2px solid var(--accent-mid);
  display: grid; place-items: center;
  font-family: 'Chivo', sans-serif; font-weight: 900;
  font-size: 14px; letter-spacing: -0.02em;
  color: var(--accent-mid);
}
/* the last node is the payment: filled, because the sequence completes there */
.track li:last-child::before {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.track p {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.28; letter-spacing: -0.02em; font-weight: 700;
  color: var(--white);
  margin: 0;
}

/* the result the track arrives at — field green rather than the --card used by
   .stat above, so the two panels never read as the same component */
.result {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: 56px;
  align-items: center;
  margin-top: 60px;
  padding: 48px 52px;
  background: var(--field);
  border-radius: var(--r-card);
}
.result__fig {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(64px, 8.5vw, 132px);
  line-height: 0.84; letter-spacing: -0.05em; font-weight: 800;
  color: var(--white);
  margin: 0;
}
.result__body {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.94);
  margin: 0;
}

/* ===========================================================================
   2. "Who it's for" as a composition rather than a paragraph
   ---------------------------------------------------------------------------
   One supplied sentence, so the panel treatment does the work: the same dark
   --card surface with a 4px accent top border that /website-redesign-offer/
   uses for its own "Who it's for" cards, set beside the heading so the section
   fills its width without inventing a single word.
   =========================================================================== */
.forwho {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: center;
  margin-top: 8px;
}
.forwho__panel {
  background: var(--card);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-card);
  padding: 44px 46px;
  box-shadow: 0 26px 60px rgba(12, 42, 28, 0.16);
}
.forwho__panel p {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.26; letter-spacing: -0.025em; font-weight: 700;
  color: var(--white);
  margin: 0;
}

/* ===========================================================================
   3. The 30-years heading, at its natural measure
   ---------------------------------------------------------------------------
   .h2 carries max-width:20ch from services.css, which held this heading to
   811px of a 1360px container and stranded a third of the band empty. The type
   size is unchanged — only the measure opens up, and balancing evens the wrap.
   =========================================================================== */
.ohead--full { max-width: none; }
/* no cap at all: at 32ch this still broke into three lines with a 327px stub.
   Released to the full container it settles into two lines at 1123px and
   1341px of 1360px — fewer lines, both near-full, same 63px type. */
.ohead--full h2 { max-width: none; text-wrap: balance; }

/* ---- responsive for the three above -------------------------------------- */
@media (max-width: 1100px) {
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; }
  /* wrapped into two rows, a connector would point off the end of each row, so
     the numbers carry the order on their own here */
  .track li::after { display: none; }
  .track li { padding-top: 60px; }
}
@media (max-width: 1024px) {
  .result { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 40px 38px; }
  .forwho { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .forwho__panel { padding: 36px 34px; }
}
@media (max-width: 768px) {
  /* stacked, the track runs top to bottom and the line comes back vertically,
     so 01 -> 04 still reads as a sequence rather than four loose labels */
  .track { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 44px; }
  .track li { padding: 6px 0 6px 66px; }
  .track li::before { top: 0; }
  /* the connector turns vertical and runs node-to-node down the column */
  .track li::after {
    display: block;
    top: 44px; bottom: -26px; left: 21px; right: auto;
    width: 2px; height: auto;
  }
  .track li:last-child::after { display: none; }
  .result { margin-top: 44px; padding: 32px 26px; }
  .forwho__panel { padding: 30px 26px; }
}
@media (max-width: 560px) {
  .result { padding: 28px 22px; }
  .forwho__panel { padding: 26px 22px; }
}