/* ===========================================================================
   Booked Wild — /services/

   Loaded after services.css, which already carries everything this page is
   built from: .hero, .usp, .sec grounds, .svc-grid/.svc--major, .biz, .steps,
   .cases, .close and the contact panel. The approved copy update reuses all of
   it unchanged.

   Two things are new. The four services each carry a short line above their
   paragraph, which the .svc card had no slot for; and the page gains an FAQ
   accordion, which until now existed only in the page-scoped sheets for
   /lodges-log-cabins/ and /short-term-rentals/. Rather than move those rules
   into the shared services.css — which every page loads, and which would put
   already-approved pages at risk for no benefit — the accordion is brought
   here in the same page-scoped form the other two use.
   =========================================================================== */

/* ---- the short line on each service card --------------------------------- *
   Sits between the service name and its paragraph, in the same accent the card
   already uses for its step label, so the card gains a line without gaining a
   new colour. */
.svc__lead {
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--accent-mid);
  margin: 10px 0 0;
}
.svc--major .svc__lead + .svc__body { margin-top: 14px; }

/* ---- FAQs beside a photograph -------------------------------------------- *
   Eight questions down a 980px column left most of the band empty. The same
   accordion-and-image pairing already approved on /lodges-log-cabins/ and
   /short-term-rentals/ is used here, ported in the same page-scoped form. The
   accordion sets the section height and the image stretches to match it, so
   the picture balances the column rather than becoming a panel of its own. */
.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);
}
/* absolute, so the box takes its height from the stretched grid row; height:100%
   on the img alone would fall back to the file's own aspect ratio */
.faqx__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* ---- FAQ accordion -------------------------------------------------------- *
   Ported verbatim from the treatment already approved on /lodges-log-cabins/,
   so the three pages carrying FAQs look and behave identically. The open state
   lives on the button's aria-expanded and the panel's hidden attribute follows
   it, so the visual marker and assistive tech can never disagree. */
.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(18px, 1.5vw, 23px);
  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}, so the
   guard has to be explicit or every answer renders open */
.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;
}

@media (max-width: 1024px) {
  /* accordion first, photograph beneath — the questions are the point here */
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .faqx { margin-top: 40px; gap: 30px; }
  .faqx__media { aspect-ratio: 3 / 2; }
  .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; }
}

/* ---- the meadow band under the Visibility section ------------------------ *
   .band in services.css fades to cream at BOTH ends — its ::after lays
   rgba(242,246,238,.92) over the top 26% and the image is masked out entirely
   above 22%. That was right when the band sat between two cream sections. It
   now follows the field-green Visibility section, so those cream stops painted
   a hard white strip directly beneath solid green.

   The top of the band now carries the field green it follows and dissolves into
   the photograph; the bottom still resolves to cream for the section beneath.
   Scoped here so the shared rule is untouched. */
.band { background: linear-gradient(180deg, var(--field) 0%, var(--field) 10%, var(--cream) 48%); }
.band::after {
  background: linear-gradient(180deg,
    rgba(30, 107, 60, 0.96) 0%,
    rgba(30, 107, 60, 0.55) 14%,
    rgba(30, 107, 60, 0) 34%,
    rgba(242, 246, 238, 0) 72%,
    rgba(242, 246, 238, 0.92) 100%);
}

/* ---- the process/FAQ boundary -------------------------------------------- *
   .sec carries 120px top and bottom, so every section boundary is 240px. That
   reads as a break everywhere else on this page because the ground colour
   changes across it — dark to field, field to cream. Removing the dark Proof
   section left "Straightforward, start to finish." and the FAQs as the page's
   only same-ground pair, so those 240px became one unbroken run of cream with
   nothing in it.

   Where two cream sections abut, the boundary now carries one section's worth
   of padding rather than two: 60px each side. Conditional on the adjacency, so
   a colour change anywhere keeps the full 240px. */
.sec--cream + .sec--cream { padding-top: 60px; }
.sec--cream:has(+ .sec--cream) { padding-bottom: 60px; }

@media (max-width: 768px) {
  /* .sec drops to 80px a side here, so the collapsed boundary follows it down */
  .sec--cream + .sec--cream { padding-top: 40px; }
  .sec--cream:has(+ .sec--cream) { padding-bottom: 40px; }
}

/* ===========================================================================
   Services page — staged layout (2026-09-04)

   The page moved from one flat "Our Services" grid to the three large stages
   recovered on /services-test/ (Get Bookable / Get Found / Bring Guests Back).
   Everything those stages need — .sec__head, .sec__num, .svc-grid--major,
   --tiles and --compact — already lives in services.css and is reused as-is.
   Only two things are genuinely new here: an icon treatment for the USP bar,
   and a section head that can carry more than one paragraph.
   =========================================================================== */

/* ---- USP bar: icon-led rather than four plain text boxes ---------------- */
.usp__grid--icons .usp__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.usp__icon {
  color: var(--accent-soft);
  flex: none;
  display: block;
}
.usp__text { display: block; }

/* ---- section heads carrying two intro paragraphs ------------------------ */
.sec__ledes .lede + .lede { margin-top: 18px; }

/* ---- the booking form now sits inside the page flow --------------------- */
/* It replaces the old flat "Contact us" CTA block, so it needs the section
   rhythm the CTA band had rather than the page-end spacing it used before. */
main > .pgform { margin: 0; }

@media (max-width: 1024px) {
  .usp__grid--icons .usp__item { gap: 12px; }
}

/* ---- in-answer cross-reference link ------------------------------------ */
/* FAQ 4 points at the Who We Serve page. The site marks in-body links with a
   weight change plus a bottom rule rather than colour alone (see
   .pgform__lede a), so colour is never the only signal. */
.faq__a a {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1.5px solid var(--accent-mid);
  padding-bottom: 1px;
  text-decoration: none;
}
.faq__a a:hover,
.faq__a a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }