/* ===========================================================================
   Booked Wild — the Website Redesign offer landing page

   Loaded after services.css and using its tokens. The chrome, buttons, hero,
   sections and footer all come from there untouched. This file adds the
   composition pieces a priced landing page needs.

   Note on headings: services.css's .sec__head is a two-column grid built for a
   heading beside an intro. Used with a rule, a heading and body copy as direct
   children it scatters them across columns — which is why the accent rule sat
   away from the heading it belongs to. .ohead below is the stacked form: rule,
   heading, supporting copy, all on one left edge.
   =========================================================================== */

/* ---- the section head: rule, heading, copy, one left edge --------------- */
.ohead { max-width: 62ch; }
.ohead .rule { margin: 0 0 22px; }
.ohead h2 { margin: 0; }
.ohead .lede { margin: 26px 0 0; }
.ohead .lede + .lede { margin-top: 18px; }
.ohead--wide { max-width: 78ch; }

/* ---- editorial split: image beside copy --------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}
/* The container owns the box and the image fills it absolutely. Sizing the
   image with height:100% inside a parent whose own height came from that image
   is circular: it lays out at the right size but paints nothing. */
.split__media {
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.22);
}
.split__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* image second in the DOM, first on screen — so the copy still reads first
   when the columns stack on a phone */
.split--media-left .split__media { grid-column: 1; grid-row: 1; }
.split--media-left .split__copy { grid-column: 2; grid-row: 1; }

/* the core proposition closes the split section, marked off by a hairline —
   same Schibsted Grotesk as every other heading, a step below .h2 */
.core {
  margin: 34px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line-2);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.24;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}

/* ---- the offer: price, heading and points against a tall image ---------- */
.offerx {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 72px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}
.offerx__media {
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.34);
}
.offerx__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The price is typeset rather than badged: the section's own eyebrow, then the
   figure at display size in the same face as the headings. */
.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: var(--accent-soft);
  margin: 0 0 24px;
}

.offer-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.offer-points li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(242, 246, 238, 0.2);
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.86);
}
.offer-points li:last-child { border-bottom: 1px solid rgba(242, 246, 238, 0.2); }
.offer-points b {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-mid); margin-top: 9px;
}

/* ---- the commission figure ---------------------------------------------- */
.stat {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: center;
  margin-top: 56px;
  padding: 52px 56px;
  background: var(--card);
  border: 1px solid rgba(159, 220, 169, 0.2);
  border-radius: var(--r-card);
}
.stat__fig {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(58px, 8vw, 122px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: var(--accent-soft);
  margin: 0;
}
.stat__cap {
  font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: rgba(242, 246, 238, 0.6);
  margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(159, 220, 169, 0.3);
}
.stat__body {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62; color: rgba(242, 246, 238, 0.88);
  margin: 0;
}
.stat__body + .stat__body { margin-top: 18px; }

/* ---- who it's for: four cards ------------------------------------------- */
.aud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 0; padding: 0;
  list-style: none;
}
.aud li {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--r-card);
  border-top: 4px solid var(--accent);
  padding: 28px 26px 30px;
  color: var(--cream);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.aud li:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(12, 42, 28, 0.26); }
.aud__n {
  font-family: 'Chivo', sans-serif; font-weight: 900;
  font-size: 46px; line-height: 0.8; letter-spacing: -0.05em;
  color: var(--accent-mid); opacity: 0.55; margin: 0 0 16px;
}
.aud__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.16; letter-spacing: -0.025em; font-weight: 700;
  color: var(--white); margin: 0;
}

/* ---- why us: three supporting points on the page's own grid ------------- */
.why3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 56px 0 0; padding: 0;
  list-style: none;
}
.why3 li {
  border-top: 2px solid rgba(159, 220, 169, 0.5);
  padding-top: 22px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.9);
}

/* ---- why us: the meadow band behind the green ---------------------------- */
.whyus { position: relative; overflow: hidden; }
.whyus__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.16;
}
.whyus__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30, 107, 60, 0.96) 0%, rgba(30, 107, 60, 0.86) 100%);
}
.whyus > .wrap { position: relative; }

/* ---- what's included ---------------------------------------------------- */
.incl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 52px 0 0; padding: 0;
  list-style: none;
}
.incl li {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--card);
  border: 1px solid rgba(159, 220, 169, 0.18);
  border-radius: var(--r-card);
  padding: 30px 32px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25; letter-spacing: -0.02em; font-weight: 700;
  color: var(--white);
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.incl li:hover { border-color: rgba(159, 220, 169, 0.42); transform: translateY(-3px); }
.incl__tick {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; margin-top: 2px;
}
.incl__tick svg { width: 15px; height: 15px; display: block; }

/* ---- the closing price + terms ------------------------------------------ */
.offer-price {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.2; letter-spacing: -0.03em; font-weight: 800;
  color: var(--white); margin: 32px 0 0; max-width: 26ch;
}
.offer-price em { font-style: normal; color: var(--accent-soft); }
.terms {
  font-family: 'Karla', sans-serif;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(242, 246, 238, 0.62);
  max-width: 62ch; margin: 32px 0 0; padding-top: 24px;
  border-top: 1px solid rgba(242, 246, 238, 0.18);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why3 { gap: 26px; }
  .offerx { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* stacked, the portrait crop would run half a screen tall — hold it to a
     landscape band so the offer copy stays the focus */
  .offerx__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* stacked, the copy leads and the image follows, whichever side it sat on */
  .split--media-left .split__media,
  .split--media-left .split__copy { grid-column: 1; grid-row: auto; }
  .split--media-left .split__copy { order: 1; }
  .split--media-left .split__media { order: 2; }
  .split__media { aspect-ratio: 16 / 9; }
  .stat { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 40px 38px; }
  .stat__cap { margin-top: 14px; padding-top: 14px; }
}
@media (max-width: 768px) {
  .aud { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .aud li { padding: 24px 22px 26px; }
  .aud__n { margin-bottom: 12px; font-size: 38px; }
  .why3 { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 40px; }
  .core { margin-top: 28px; padding-top: 24px; }
  .incl { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .incl li { padding: 26px 26px; }
  .stat { padding: 32px 26px; margin-top: 40px; }
  .split { gap: 32px; }
  .offerx { gap: 36px; }
  .offer-points { margin-top: 32px; }
  .offer-points li { padding: 18px 0; }
  .whyus__bg { opacity: 0.12; }
}
@media (max-width: 560px) {
  .price-tag { font-size: 13px; padding: 8px 16px; gap: 8px; }
  .price-tag b { font-size: 19px; }
  .stat { padding: 28px 22px; }
  .incl li { padding: 22px 20px; gap: 13px; }
  .incl__tick { width: 26px; height: 26px; }
  .incl__tick svg { width: 13px; height: 13px; }
  .terms { margin-top: 26px; padding-top: 20px; }
  .split__media { aspect-ratio: 3 / 2; }
  .offerx__media { aspect-ratio: 3 / 2; }
}

/* ---- Who We Serve child-page hero eyebrow -------------------------------
   The approved standard for the individual Who We Serve pages is Karla 600 at
   14px on every device. services.css steps .hero .eyebrow down to 13px below
   560px for the rest of the site, so these pages opt out via a class rather
   than each carrying its own override. Same specificity as the shared rule
   (0,2,0) and this sheet loads after it, so source order settles it — no
   !important, and no other page's eyebrow is affected. */
.hero .eyebrow--wws { font-size: 14px; }