/* ===========================================================================
   Booked Wild — /direct-booking-guarantee/ (The Website Redesign offer)

   Loaded after services.css and offer.css. Everything the page can take from
   those it takes: .hdr, .hero, .sec, .wrap, .btn, .ohead, .split, .core, .stat,
   .aud, .incl, .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 the few things neither of those already provides.
   =========================================================================== */

/* ---- section grounds ----------------------------------------------------- *
   The page alternates cream and dark so no two adjacent sections read as one
   block: hero image -> cream -> ink -> cream -> ink-2 -> cream -> field ->
   ink -> image close. */
.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); }

/* .core is the statement treatment: same face as the headings, a step down,
   marked off by a hairline. Defined for cream in offer.css; these are the dark
   grounds it also has to sit on here. */
.sec--dark .core,
.sec--ink2 .core,
.sec--field .core {
  color: var(--white);
  border-top-color: rgba(159, 220, 169, 0.35);
}

/* the close sits on a photograph, where the default ink .lede would vanish */
.close .lede { color: rgba(242, 246, 238, 0.92); }
/* The source document links "book a free strategy call" inline. services.css
   styles links in the dark accent green, which is built for cream grounds — on
   this photograph it measured 1.47:1. This is the same cream-on-accent-rule
   treatment the contact block already uses for the same phrase on dark. */
.close .lede a {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
  padding-bottom: 1px;
}
.close .lede a:hover {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

/* ---- hero: the offer line leads --------------------------------------- *
   The offer line is now the H1 and "You could be fully booked and still losing
   money." sits above it as the supporting line. .eyebrow is built for a two- or
   three-word label — uppercase at .2em tracking — which a whole sentence cannot
   carry, so the hero's supporting line takes sentence case and normal tracking.
   It sits below the H1 rather than above it, so its margin is on top. It stays
   plainly subordinate: ~20px against a 95px H1. */
.hero__kicker {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin: 22px 0 0;
  max-width: 40ch;
}
/* balanced so the offer name never leaves a one-word last line. The tracking
   override the all-caps version needed is gone — title case is what the display
   face's own -.045em is cut for. */
.hero h1 { text-wrap: balance; }

/* ---- "The Solution": copy beside a tall photograph ---------------------- *
   The Real Problem above it is cream, with a 4:3 landscape image on the right
   and plain body copy. This is its opposite on every axis — dark ground, a 3:4
   portrait on the left, and the first sentence lifted into the .core statement
   treatment — so the two never read as one long stretch of text.
   .offerx comes from offer.css; only the side it sits on is new. */
.offerx--media-left { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
.offerx--media-left .offerx__media { grid-column: 1; grid-row: 1; }
.offerx--media-left .offerx__copy  { grid-column: 2; grid-row: 1; }
/* the statement sits directly under the heading, so it drops the hairline the
   .core treatment carries when it closes a section instead */
.solution__lead { margin-top: 26px; padding-top: 0; border-top: 0; }
.solution__body { margin-top: 22px; }

/* .offerx__media carries aspect-ratio: 3/4, which at a 502px column made the
   image 670px tall against 302px of copy — the image, not the content, was
   setting the section height and leaving 368px empty below the text.

   Scoped to this section and to the two-column layout only, so The Real
   Problem, /website-redesign-offer/ and the stacked breakpoints are untouched:
   the row stretches, the media stops declaring an aspect ratio and takes its
   height from the grid instead, and the copy centres against it. The photograph
   is portrait, so it is cropped rather than squashed — object-fit was already
   cover, it just now has a landscape box to fill. */
@media (min-width: 1025px) {
  #solution .offerx { align-items: stretch; }
  #solution .offerx__media {
    aspect-ratio: auto;
    min-height: 400px;   /* keeps the image substantial when the copy is short */
  }
  /* Taken out of flow deliberately. With aspect-ratio off and the image still
     in flow, height:100% resolves against an auto-height parent and the image
     falls back to its natural 2:3 — which made the section taller still, at
     753px. Absolute positioning leaves the box with no in-flow content, so its
     height comes from the stretched row and the image simply fills it. */
  #solution .offerx__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 42%;
  }
  #solution .offerx__copy { align-self: center; }
}

/* ---- heading beside content --------------------------------------------- *
   Used where a section is a heading and one block of copy. Keeping the rule and
   heading together in the first child is what stops the rule drifting into its
   own column — the .sec__head trap this page has hit before. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 56px;
  align-items: start;
}
.duo .core { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- "Who it's for": heading beside an accent-topped panel --------------- *
   The same dark --card surface with a 4px accent top border that
   /website-redesign-offer/ uses for its own "Who it's for" cards. */
.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;
}

/* ---- three feature cards ------------------------------------------------- *
   .aud from offer.css, at three across instead of four. Its .aud__name is set
   for two- and three-word labels; these three points are full sentences, so the
   name steps down a size in this variant only. */
.aud--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aud--three .aud__name { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.24; }

/* ---- the 30-years heading, at its natural measure ------------------------ *
   .h2 carries max-width:20ch from services.css, which held the previous heading
   here to 811px of a 1360px container and stranded a third of the band empty.
   The type size is unchanged — only the measure opens up. */
.ohead--full { max-width: none; }
.ohead--full h2 { max-width: none; text-wrap: balance; }
/* the statement under it runs the full band too, rather than stopping short */
.usp-lead { max-width: none; }
/* the experience claim is the proof point in this section, so it carries the
   weight inside the sentence rather than being pulled out into a figure that
   would need words the copy does not have */
.usp-lead strong {
  color: var(--accent-soft);
  font-size: 1.34em;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* the three supporting ideas as panels rather than plain paragraphs, using the
   same accent top rule the .aud cards carry so the two read as one system */
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 0; padding: 0;
  list-style: none;
}
.proof li {
  background: rgba(10, 31, 20, 0.32);
  border: 1px solid rgba(159, 220, 169, 0.26);
  border-top: 3px solid var(--accent-mid);
  border-radius: var(--r-card);
  padding: 30px 28px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.94);
}

/* ---- scrims for two bright photographs ---------------------------------- *
   The shared .hero__scrim / .close__scrim in services.css are tuned for darker
   images. Both photographs used 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.

   Safe to write unscoped: this stylesheet loads on this page alone. */
.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%);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .aud--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the proof panels stay three across into tablet, as the plain three-column
     supporting points they replaced always did */
  .proof { gap: 20px; }
  .proof li { padding: 26px 24px; }
}
@media (max-width: 1024px) {
  /* stacked, the copy leads and the photograph follows */
  .offerx--media-left { grid-template-columns: minmax(0, 1fr); }
  .offerx--media-left .offerx__media,
  .offerx--media-left .offerx__copy { grid-column: 1; grid-row: auto; }
  .offerx--media-left .offerx__copy { order: 1; }
  .offerx--media-left .offerx__media { order: 2; }
  .duo,
  .forwho { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .forwho__panel { padding: 36px 34px; }
}
@media (max-width: 768px) {
  .aud--three { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .proof li { padding: 24px 22px; }
  .hero__kicker { margin-top: 16px; }
  .forwho__panel { padding: 30px 26px; }
  /* stacked, the copy runs the full width, so the wash has to as well */
  .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%);
  }
}
@media (max-width: 560px) {
  .forwho__panel { padding: 26px 22px; }
}


/* ---- secondary hero button: hover and focus ----------------------------- *
   services.css carries a generic a:hover { color: var(--ink) } at specificity
   (0,1,1), which outranks .btn--ghost's own (0,1,0) white. Its :hover rule
   sets only a background, so on hover the label fell to dark green over a
   translucent white wash on a dark photograph — about 2.6:1.

   .btn--solid:hover already declares its colour explicitly; this does the
   same for the ghost variant, and adds the focus ring the keyboard state was
   missing. Scoped to this page's hero: the same gap exists wherever a ghost
   button sits on a dark ground, but fixing it centrally would change pages
   that are already approved. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}
.hero .btn--ghost:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}