/* ===========================================================================
   Booked Wild — /who-we-serve/experience-providers/

   Same family as the other Who We Serve child pages, composed for this brief:
   an empathy section built around five numbered pains, two "shift" cards, the
   wild/tamed contrast set as a literal two-sided panel, six ticked outcomes,
   a four-step problem→outcome process, and a photographic closing band.

   No FAQ section — the supplied document has none, so none is invented.
   Page-scoped throughout; no shared stylesheet is modified.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.hero h1 { max-width: 16ch; }
.hero__lede { max-width: 62ch; }
.hero .btn--ghost, .hero .btn--ghost:hover { color: var(--white); }
.hero__img { object-position: 52% 46%; }
/* A left-to-right layer over the shared top-to-bottom one holds the copy column
   down while the trail stays readable on the right. */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(6,26,17,.80) 0%, rgba(6,26,17,.62) 46%,
                           rgba(6,26,17,.22) 74%, rgba(6,26,17,0) 100%),
    linear-gradient(180deg, rgba(6,26,17,.64) 0%, rgba(6,26,17,.26) 42%,
                            rgba(6,26,17,.42) 66%, rgba(6,26,17,.90) 100%);
}

/* ---- empathy ------------------------------------------------------------- */
.emphead { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 60px; align-items: center; }
.emphead__media { margin: 0; border-radius: var(--r-card); overflow: hidden; }
.emphead__media img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.emp__turn {
  margin: 46px 0 0; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.28;
  letter-spacing: -0.025em; font-weight: 700; color: var(--ink); max-width: 30ch;
}
.pains {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px;
}
/* six tiles fill the two tracks evenly, so nothing needs to span */
.pain {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.pain__n { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 25px; line-height: 1.1; color: var(--accent-mid); }
.pain__t { margin: 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.68; color: var(--body); }
/* The sixth tile is the section's call to action rather than invented copy —
   same grid cell, same numbered rhythm, but an arrow for its marker and a
   button, so it reads as actionable rather than as a sixth complaint. */
.pain--cta { align-items: start; }
.pain--cta .pain__n { color: var(--accent); font-family: 'Karla', sans-serif; font-size: 22px; font-weight: 700; }
.pain--cta .pain__t { font-weight: 600; color: var(--ink); }
.pain--cta .btn { margin-top: 16px; }

.emp__close {
  margin: 44px 0 0; padding-top: 30px; border-top: 3px solid var(--accent-mid);
  font-size: clamp(20px, 1.9vw, 29px); line-height: 1.3; letter-spacing: -0.025em;
  font-weight: 700; color: var(--ink);
}

/* ---- the stakes ---------------------------------------------------------- */
.shifts { margin-top: 54px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.shift {
  background: var(--card); border: 1px solid rgba(159,220,169,.18);
  border-radius: var(--r-card); padding: 34px 34px 36px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.shift:hover { border-color: rgba(159,220,169,.42); transform: translateY(-3px); }
.shift__n {
  margin: 0 0 12px; font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-soft);
}
.shift__t { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.18; letter-spacing: -0.03em; font-weight: 800; color: var(--white); }
.shift__b { margin: 16px 0 0; font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.68; color: rgba(242,246,238,.82); }
.stk__close {
  margin: 44px 0 0; padding-top: 28px; border-top: 3px solid var(--accent-mid);
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.32; letter-spacing: -0.025em;
  font-weight: 700; color: var(--white);
}

/* ---- the wild and the tamed --------------------------------------------- */
/* The copy is a literal opposition, so it is set as one — two halves of a
   single panel rather than two unrelated cards. */
.wt {
  margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  border-radius: var(--r-card); overflow: hidden;
}
.wt__side { padding: 36px 38px 40px; }
.wt__side--tamed { background: rgba(10, 31, 20, 0.34); }
.wt__side--wild  { background: var(--white); }
.wt__lbl {
  margin: 0 0 14px; font-family: 'Karla', sans-serif;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.wt__side--tamed .wt__lbl { color: rgba(242,246,238,.62); }
.wt__side--wild  .wt__lbl { color: var(--accent); }
.wt__b { margin: 0; font-family: 'Karla', sans-serif; font-size: 17px; line-height: 1.62; }
.wt__side--tamed .wt__b { color: rgba(242,246,238,.86); }
.wt__side--wild  .wt__b { color: var(--ink); font-weight: 600; }

/* Sat in a 74ch column while the panel above and the outcomes below both span
   the section, which read as three different widths. */
.prz__lede {
  margin: 44px 0 0; font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.7;
  color: rgba(242,246,238,.9); max-width: none;
}
.outs {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px;
}
.out {
  display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 0 16px;
  padding: 20px 0; border-top: 1px solid rgba(242,246,238,.20);
}
.out__tick {
  width: 21px; height: 21px; border-radius: 50%; margin-top: 3px;
  background: var(--accent-soft); display: grid; place-items: center;
}
.out__tick svg { width: 11px; height: 11px; display: block; }
.out__tick path { stroke: #0A1F14; }
.out__t { margin: 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.66; color: rgba(242,246,238,.92); }
.prz__close {
  margin: 42px 0 0; padding-top: 28px; border-top: 3px solid var(--accent-soft);
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.32; letter-spacing: -0.025em;
  font-weight: 700; color: var(--white);
}

/* ---- the process --------------------------------------------------------- */
.steps { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  border-top: 4px solid var(--accent); padding: 30px 28px 32px;
  display: flex; flex-direction: column;
}
.step__n { margin: 0 0 12px; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 26px; line-height: 1; color: var(--accent-mid); }
.step__t { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.step__b { margin: 12px 0 0; font-family: 'Karla', sans-serif; font-size: 15.5px; line-height: 1.64; color: var(--body); }
.prc__note {
  margin: 38px 0 0; font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.68;
  color: var(--body); max-width: 74ch; font-style: italic;
}
#process .actions { margin-top: 30px; }

/* ---- closing band -------------------------------------------------------- */
.closx { position: relative; overflow: hidden; background: var(--ink-2); padding: 104px var(--pad); }
.closx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.closx__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,31,20,.92) 0%, rgba(10,31,20,.78) 46%, rgba(10,31,20,.40) 100%),
    linear-gradient(180deg, rgba(10,31,20,.52) 0%, rgba(10,31,20,.34) 44%, rgba(10,31,20,.66) 100%);
}
.closx__inner { position: relative; max-width: var(--max); margin: 0 auto; }
.closx .rule { background: var(--accent-mid); }
.closx__h {
  margin: 0; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02;
  letter-spacing: -0.04em; font-weight: 800; color: var(--white); max-width: 20ch;
}
.closx__b {
  margin: 24px 0 0; font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.68;
  color: rgba(242,246,238,.9); max-width: 54ch;
}
.closx .actions { margin-top: 34px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .emphead { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .emphead__media img { aspect-ratio: 16 / 9; }
  .pains { grid-template-columns: minmax(0,1fr); gap: 0; }
  .pains li:last-child { grid-column: auto; }
  .shifts { grid-template-columns: minmax(0,1fr); }
  .wt { grid-template-columns: minmax(0,1fr); }
  .outs { grid-template-columns: minmax(0,1fr); gap: 0; }
}

@media (max-width: 768px) {
  .steps { grid-template-columns: minmax(0,1fr); }
  .shift, .step { padding: 28px 26px 30px; }
  .wt__side { padding: 28px 26px 30px; }
  .closx { padding: 84px var(--pad); }
  .closx__scrim {
    background: linear-gradient(180deg, rgba(10,31,20,.74) 0%, rgba(10,31,20,.84) 52%, rgba(10,31,20,.92) 100%);
  }
}

@media (max-width: 560px) {
  .pain { grid-template-columns: 38px minmax(0,1fr); gap: 0 12px; }
  .pain__n { font-size: 21px; }
  .emphead__media img { aspect-ratio: 4 / 3; }
}