/* ===========================================================================
   Booked Wild — /how-we-work/

   Loaded after services.css and offer.css, which already carry the header,
   grid, type scale, buttons, rule treatment, .sec grounds, .hero, .steps,
   .close and the contact panel. This page reuses all of it.

   This is the most content-heavy page on the site: five methods, each with
   three things that go right and three that go wrong, every one of them
   carrying a rationale. Printed as bullets it would be a wall. So the page
   is built on one repeated idea — a method opens with an oversized number and
   its own paragraph, then splits into two columns that are told apart by
   surface rather than by colour-coding: what good looks like sits on light
   cards, what gaps look like sits on the dark card green. Nothing red, nothing
   orange; the palette is the site's own.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.hero h1 { max-width: 19ch; text-wrap: balance; }
.hero__lede { max-width: 54ch; }

/* ---- hero scrim ---------------------------------------------------------- *
   An aerial of a road through a valley: bright golds across the whole frame,
   with no naturally dark corner to sit type on. Measured under the real glyph
   rects the shared vertical wash alone left the h1 and lede short, so a
   horizontal wash carries the text column and fades out by 88%, leaving the
   road and the river open on the right. Both layers use the same scrim colour,
   so their alphas compose cleanly: 1-(1-av)(1-ah). */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.46) 46%, rgba(6, 26, 17, 0) 88%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.46) 42%,
      rgba(6, 26, 17, 0.58) 66%, rgba(6, 26, 17, 0.92) 100%);
}
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.54) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.74) 0%, rgba(6, 26, 17, 0.46) 42%,
        rgba(6, 26, 17, 0.58) 66%, rgba(6, 26, 17, 0.92) 100%);
  }
}

/* ---- the hero's ghost button --------------------------------------------- *
   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 turns dark ink over a dark photograph.
   Fixed page-scoped, identical to the rule already on the other pages. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- the method overture ------------------------------------------------- *
   The five names set once, large, before the page starts explaining them —
   so the reader knows the shape of what follows before the detail begins. */
.overture__line {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--white);
  margin: 26px 0 0;
  max-width: 18ch;
}
.overture__line em {
  font-style: normal;
  color: var(--accent-soft);
}
.overture__sub {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.66;
  color: rgba(242, 246, 238, 0.88);
  margin: 30px 0 0;
  max-width: 58ch;
}
/* the five names as a row of markers under the statement */
.overture__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.overture__keys li {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(242, 246, 238, 0.82);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(159, 220, 169, 0.34);
}

/* ---- a method ------------------------------------------------------------ */
.meth__head {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
.meth__n {
  font-family: 'Chivo', sans-serif;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: var(--accent);
  opacity: 0.34;
  margin: 0;
}
.meth__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.meth__intro {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.66;
  color: var(--body);
  margin: 20px 0 0;
  max-width: 74ch;
}
.sec--dark .meth__name, .sec--field .meth__name { color: var(--white); }
.sec--dark .meth__intro, .sec--field .meth__intro { color: rgba(242, 246, 238, 0.88); }
.sec--dark .meth__n, .sec--field .meth__n { color: var(--accent-soft); opacity: 0.42; }

/* the two columns. Side by side on desktop; below 1024 they stack in reading
   order — good first, then gaps — rather than becoming two narrow columns. */
.meth__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  margin: 48px 0 0;
  align-items: start;
}
.col__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px;
}
.col__label::before {
  content: "";
  width: 26px; height: 2px;
  flex: none;
}
.col--good .col__label { color: var(--field); }
.col--good .col__label::before { background: var(--accent); }
.col--gaps .col__label { color: var(--muted); }
.col--gaps .col__label::before { background: var(--line-2); }
.sec--dark .col--good .col__label,
.sec--field .col--good .col__label { color: var(--accent-soft); }
.sec--dark .col--gaps .col__label,
.sec--field .col--gaps .col__label { color: rgba(242, 246, 238, 0.6); }

.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

/* One card shape, two surfaces. Good sits on white with an accent edge; gaps
   sit on the dark card green with a muted edge. The difference is legible at a
   glance and holds on every ground the page uses, so no colour-coding beyond
   the palette is needed. */
.pt {
  border-radius: var(--r-md);
  padding: 24px 26px 22px;
  border-left: 4px solid transparent;
}
.col--good .pt {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}
.col--gaps .pt {
  background: var(--card);
  border: 1px solid var(--card);
  border-left: 4px solid var(--line-2);
}
.pt__p {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.col--gaps .pt__p { color: var(--white); }
/* the detail sentence Pitch carries under its points; the other four methods
   go straight from point to rationale */
.pt__d {
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--body);
  margin: 12px 0 0;
}
.col--gaps .pt__d { color: rgba(242, 246, 238, 0.82); }
/* the rationale is supporting information, so it is deliberately quieter than
   the point above it: smaller, lighter, and set behind a hairline */
.pt__r {
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--muted);
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.col--gaps .pt__r {
  color: rgba(242, 246, 238, 0.62);
  border-top-color: rgba(159, 220, 169, 0.22);
}
.pt__r b {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--accent);
  display: block;
  margin-bottom: 5px;
}
.col--gaps .pt__r b { color: var(--accent-mid); }

/* ---- the four gap patterns ----------------------------------------------- *
   Not another card grid: an editorial two-column list on the field green, each
   pattern led by its number so 01-04 carries the scan. */
.pats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px 64px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.pat__n {
  font-family: 'Chivo', sans-serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  font-weight: 900;
  color: var(--accent-soft);
  margin: 0 0 12px;
}
.pat__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  padding-top: 18px;
  border-top: 2px solid rgba(159, 220, 169, 0.34);
}
.pat__b {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.64;
  color: rgba(242, 246, 238, 0.86);
  margin: 14px 0 0;
}
.pats-close {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--white);
  margin: 58px 0 0;
  max-width: 44ch;
}

/* ---- FAQs beside a photograph -------------------------------------------- *
   Six questions down a 980px column left the right-hand half of the band empty.
   The same accordion-and-image pairing already approved on /services/,
   /who-we-serve/, /lodges-log-cabins/ and /short-term-rentals/ is used here, in
   the same page-scoped form and the same 1.12/0.88 split — which at 1440 leaves
   the accordion 726px, wide enough that .faq__a's 76ch measure is set by the
   type rather than clipped by the column.

   align-items:stretch, so the accordion sets the height and the picture rises
   to meet it. The section therefore gains no height at all from the image; the
   min-height only stops the frame collapsing to a letterbox if a future edit
   ever shortens the questions. */
.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 */
/* The frame measures 570x660 here against a 1400x1470 file, so cover scales to
   fill the height and trims 9% of the width — the whole vertical story (smoke,
   roof, cabin, walker, dog) survives, and 50% 50% is the measured centre. */
.faqx__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ---- FAQ accordion -------------------------------------------------------- *
   The treatment already approved on /lodges-log-cabins/, /short-term-rentals/,
   /services/ and /who-we-serve/, brought here page-scoped in the same form. */
.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} */
.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: 1024px) {
  /* two narrow text columns would be unreadable here, so the method stacks in
     reading order: heading, intro, what good looks like, then the gaps */
  .meth__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .pats { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 44px; }
  .overture__line { max-width: none; }
  /* accordion first, photograph beneath — the questions are the point here, and
     two narrow columns would leave neither legible */
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 9; }
  /* A landscape frame can only show 54% of this file's height, and centring it
     cut the walker off at the chest. Dropped to the foot of the frame, the band
     is 0.44-0.97 — roof, log wall, walker and dog, whole and self-contained.
     The woodsmoke is the price; a half-figure would have been worse. */
  .faqx__media img { object-position: 50% 94%; }
}
@media (max-width: 768px) {
  /* the number moves above the name rather than holding a 132px margin column
     that no longer fits */
  .meth__head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .meth__n { font-size: 34px; margin-bottom: 12px; }
  .meth__intro { margin-top: 16px; }
  .pt { padding: 22px 20px 20px; }
  .pats-close { margin-top: 44px; font-size: 21px; }
  .overture__keys { gap: 8px; margin-top: 30px; }
  .overture__keys li { font-size: 13px; padding: 8px 14px; }
  .faqx { margin-top: 40px; gap: 30px; }
  /* 16:9 at 390 is only 195px tall; 3:2 shows 64% of the height in 207px, which
     holds the roof, the walker and the dog without making the section a scroll */
  .faqx__media { aspect-ratio: 3 / 2; }
  .faqx__media img { object-position: 50% 93%; }
  .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; }
}