/* ===========================================================================
   Booked Wild — /who-we-serve/tour-operators/

   Loaded after services.css and offer.css, which carry the header, grid, type
   scale, buttons, rule treatment, .sec grounds, .hero, .usp and the contact
   panel. Same family as the Lodges and Short-term Rentals child pages — same
   palette, type and section rhythm — but the composition follows this content:
   five long key takeaways rather than a four-across USP strip, a squeeze
   section whose five pain points want numbering rather than prose, and a
   five-surface system whose first surface is the entry point and so leads at
   full width rather than sitting in a row of five identical cards.

   The FAQ accordion is the site's existing pattern, carried over verbatim from
   strpage.css so both child pages behave and read identically.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   One long sentence, so the measure is set to break it across three lines at
   desktop rather than letting it run the full column width. */
.hero h1 { max-width: 19ch; }
.hero__lede { max-width: 60ch; }

/* A trekking line crossing a bright green meadow: the sky and the upper slope
   are light, and the walkers sit low-right. The horizontal layer carries the
   text column, the vertical one holds the sky down and seats the buttons. Both
   layers share the scrim colour so their alphas compose: 1-(1-av)(1-ah). */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.60) 0%, rgba(6, 26, 17, 0.40) 54%, rgba(6, 26, 17, 0.06) 92%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.32) 42%,
      rgba(6, 26, 17, 0.48) 70%, rgba(6, 26, 17, 0.88) 100%);
}
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.56) 0%, rgba(6, 26, 17, 0.48) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.32) 42%,
        rgba(6, 26, 17, 0.48) 70%, rgba(6, 26, 17, 0.88) 100%);
  }
}

/* ---- ghost buttons over photography -------------------------------------- *
   services.css:242 a:hover{color:var(--ink)} at (0,1,1) outranks
   .btn--ghost{color:var(--white)} at (0,1,0), and .btn--ghost:hover changes
   only the background — so the label would turn dark ink over a dark photo. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible,
.whynow .btn--ghost:hover,
.whynow .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- key takeaways ------------------------------------------------------- *
   These are full sentences, not the short claims the four-across .usp strip was
   built for, so they run as two columns of icon-led rows instead. Five items
   means the last row is short; the grid is ordered so that lands on the left. */
.kt__h { max-width: 30ch; }
/* Five across on desktop so it reads as the page's USP bar in one sweep. The
   takeaways are full sentences, so at this width the icon sits above the text
   rather than beside it — beside would leave the copy about 200px to wrap in. */
.kt__grid {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 26px;
}
.kt__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 20px;
  border-top: 2px solid rgba(159, 220, 169, 0.5);
}
.kt__icon { color: var(--accent-soft); flex: none; display: block; }
.kt__t {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.58;
  color: rgba(242, 246, 238, 0.86);
}

/* ---- the squeeze --------------------------------------------------------- */
.sq__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.sq__copy .lede { margin-top: 24px; }
.sq__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  margin: 0;
  aspect-ratio: 3 / 2;
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.20);
}
.sq__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  display: block;
}
/* the five pain points: numbered so they read as a list to scan, not prose */
/* Five points over two rows. A plain two-column grid put the fifth item alone
   on the left and left the bottom-right corner empty, so the track count is six
   and the items span it 2-2-2 / 3-3: three across the top, two across the
   bottom, both rows filling the full width. */
.sq {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 46px;
}
.sq li:nth-child(-n+3) { grid-column: span 2; }
.sq li:nth-child(n+4)  { grid-column: span 3; }
.sq li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line-2);
}
.sq li p {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--body);
}
.sq__n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: 'Chivo', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  margin-top: 1px;
}
.sq__close {
  margin: 44px 0 0;
  padding-top: 30px;
  border-top: 3px solid var(--accent-mid);
  max-width: 40ch;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.26;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}

/* ---- the real problem ---------------------------------------------------- *
   Borrowed ground versus owned infrastructure is the turn of the whole page,
   so the pull line gets the weight and the paragraphs stay out of its way. */
.rp {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 72px;
  align-items: start;
}
.rp__head { position: sticky; top: 112px; }
.rp__body .lede + .lede { margin-top: 22px; }
.rp__pull {
  margin: 34px 0;
  padding: 28px 0 0;
  border-top: 3px solid var(--accent-mid);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--white);
  max-width: 22ch;
}
.rp__goal {
  margin: 30px 0 0;
  padding: 22px 26px;
  border-left: 3px solid var(--accent-soft);
  background: rgba(159, 220, 169, 0.08);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.66;
  color: rgba(242, 246, 238, 0.9);
}

/* ---- how it happens: the five surfaces ----------------------------------- *
   01 is the entry point every other surface is scoped against, so it leads at
   full width; 02-05 pair off beneath it. Five identical cards would have made
   them look interchangeable, which is the opposite of what the copy says. */
.hi__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
}
.hi__ledes .lede + .lede { margin-top: 18px; }
/* Six tiles on one grid — the five surfaces plus the conclusion — so every card
   shares the same dimensions, padding, radius and alignment. Three across by two
   down on desktop; the statement carries its weight through the dark ground
   rather than through scale, so no tile dominates by being bigger. */
.surfs {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  /* every tile the same height, not just every tile within a row */
  grid-auto-rows: 1fr;
}
.surf {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px 32px 34px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1),
              box-shadow .25s ease;
}
.surf:hover {
  border-color: var(--accent-mid);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(12, 42, 28, 0.10);
}
.surf--statement {
  background: var(--ink);
  border-color: var(--ink);
  justify-content: center;
}
.surf--statement:hover { border-color: var(--accent); }
.surf__n {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: .45;
  margin: 0 0 14px;
}
.surf__name {
  margin: 0;
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
/* the descriptor after the dash is the PDF's own subtitle, kept inline so the
   heading line reads exactly as supplied but with secondary weight and colour */
.surf__sub {
  font-family: 'Karla', sans-serif;
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.surf__b {
  margin: 14px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.62;
  color: var(--body);
}
.surf--statement p {
  margin: 0;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.32;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--white);
}

/* ---- why now ------------------------------------------------------------- */
.whynow { position: relative; overflow: hidden; background: var(--ink-2); }
.whynow__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.whynow__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.88) 0%, rgba(6, 26, 17, 0.72) 52%, rgba(6, 26, 17, 0.34) 100%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.42) 0%, rgba(6, 26, 17, 0.30) 50%, rgba(6, 26, 17, 0.62) 100%);
}
.whynow__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--pad);
}
.whynow__rule {
  width: 68px; height: 4px; border-radius: 2px;
  background: var(--accent-mid);
  margin-bottom: 26px;
}
.whynow .eyebrow { color: var(--accent-soft); }
.whynow__h {
  margin: 14px 0 0;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--white);
  max-width: 16ch;
}
.whynow__p {
  margin: 26px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.9);
  max-width: 62ch;
}
.whynow__final {
  margin: 34px 0 0;
  padding-top: 28px;
  border-top: 3px solid var(--accent-mid);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--white);
  max-width: 24ch;
}
.whynow .actions { margin-top: 36px; }

/* ---- FAQs ---------------------------------------------------------------- *
   The site's existing accordion, carried over so both Who We Serve child pages
   behave identically. Answers stay in the DOM; only [hidden] toggles. */
.faqx {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 64px;
  align-items: stretch;
  margin-top: 52px;
}
.faqx .faq { margin-top: 0; max-width: none; }
.faqx__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  margin: 0;
  min-height: 420px;
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.22);
}
.faqx__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}
.faq { max-width: 980px; margin: 52px 0 0; }
.faq__row { border-top: 1px solid var(--line-2); }
.faq__row:last-child { border-bottom: 1px solid var(--line-2); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17.5px, 1.4vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.faq__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq__q:hover .faq__icon { border-color: var(--accent); color: var(--ink); }
.faq__q:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: -3px; }
.faq__icon::before { content: "+"; }
.faq__q[aria-expanded="true"] .faq__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.faq__q[aria-expanded="true"] .faq__icon::before { content: "\2212"; }
/* authored display rules outrank the UA's [hidden]{display:none} */
.faq__a { padding: 0 0 30px; max-width: 76ch; }
.faq__a[hidden] { display: none; }
.faq__a p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.66;
  color: var(--body);
  margin: 0;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .kt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; }
}
@media (max-width: 1200px) {
  .rp { gap: 52px; }
  .surfs { gap: 18px; }
  .surf { padding: 28px 28px 30px; }
}
@media (max-width: 1024px) {
  .kt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  .sq__head { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sq__media { aspect-ratio: 16 / 10; }
  /* back to a plain two-track grid: six items over three even rows */
  .sq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 44px; }
  .sq li:nth-child(-n+3), .sq li:nth-child(n+4) { grid-column: auto; }
  .sq li:last-child { grid-column: 1 / -1; }
  /* six tiles over three even rows */
  .surfs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rp__head { position: static; }
  .hi__head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .surfs { margin-top: 48px; }
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .faqx__media { min-height: 0; aspect-ratio: 3 / 2; }
  .whynow__inner { padding: 100px var(--pad); }
}
@media (max-width: 768px) {
  /* one column, and the icon moves back beside the text so a stacked bar of
     five sentences does not run the length of the screen */
  .kt__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 38px; }
  .kt__item { flex-direction: row; align-items: flex-start; gap: 18px; padding-top: 22px; }
  .kt__icon { margin-top: 1px; }
  .sq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sq li:last-child { grid-column: auto; }
  .surfs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .surf { padding: 28px 26px 30px; }
  .surf__n { font-size: 30px; }
  .sq__close { margin-top: 34px; padding-top: 24px; }
  .faqx { margin-top: 40px; gap: 30px; }
  .faq { margin-top: 40px; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 30px; height: 30px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
  .whynow__inner { padding: 86px var(--pad); }
  .rp__pull { max-width: none; }
}
@media (max-width: 560px) {
  .sq__media { aspect-ratio: 4 / 3; }
  .hero h1 { max-width: none; }
  .whynow__h, .whynow__final { max-width: none; }
  .surf--statement p { max-width: none; }
  .kt__h { max-width: none; }
}