/* ===========================================================================
   Booked Wild — /who-we-serve/short-term-rentals/

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

   Sibling to /who-we-serve/lodges-log-cabins-resorts/ and deliberately of the
   same family — same palette, same type, same section rhythm, same FAQ pairing.
   What differs is driven by the content: the STR page has five USPs rather than
   four, four named capabilities rather than a ruled list of sentences, and a
   six-part operating system whose descriptions are long enough to want a
   different device from the Lodges page's numbered spine. So the mechanism here
   runs as full-width rows led by an oversized numeral rather than circles on a
   thread, and the operating-system framing is carried by the section itself.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   Two sentences, and the second is the promise, so the measure is set to let
   them break naturally rather than balancing into an even block that hides
   where one sentence ends and the next begins. */
.hero h1 { max-width: 20ch; }
.hero__lede { max-width: 58ch; }

/* ---- hero scrim ---------------------------------------------------------- *
   A stone cottage in open countryside: bright sky along the top, mid-green
   fields where the text sits. The vertical layer is weighted at the head to
   hold the sky down and at the foot for the buttons; the horizontal wash
   carries the text column without dulling the cottage on the right. Both layers
   use the same scrim colour, so their alphas compose: 1-(1-av)(1-ah). */
.hero__scrim {
  background:
    linear-gradient(90deg,
      rgba(6, 26, 17, 0.52) 0%, rgba(6, 26, 17, 0.34) 52%, rgba(6, 26, 17, 0) 90%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.68) 0%, rgba(6, 26, 17, 0.34) 40%,
      rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 100%);
}
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.52) 0%, rgba(6, 26, 17, 0.44) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.68) 0%, rgba(6, 26, 17, 0.34) 40%,
        rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 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 turns dark ink over a dark photograph. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible,
.rentx .btn--ghost:hover,
.rentx .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- section headings ---------------------------------------------------- */
.sec .h2 { max-width: 26ch; text-wrap: balance; }

/* ---- USP bar: five points, not four -------------------------------------- *
   The shared .usp__grid is a four-column track. Five points at that width would
   leave a widow on a second row, so this page runs five across and steps down
   5 -> 3 -> 2 -> 1. Icons are stroke-only in accent-soft, no plate behind them,
   the same restraint as the Lodges bar. */
.usp__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.usp__item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.usp__icon { color: var(--accent-soft); flex: none; display: block; }

/* ---- section openings with an image -------------------------------------- *
   The picture takes its height from the copy beside it rather than from a ratio
   of its own, so the column never ends short of the text. Absolute positioning
   inside gives the percentage height something definite to resolve against. */
.intro { display: grid; align-items: start; gap: 60px; }
.intro__copy { min-width: 0; }
.intro__copy .rule { margin: 0 0 22px; }
.intro__copy .h2 { margin: 0; }
.intro__media {
  position: relative;
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.24);
  min-height: 0;
}
.intro__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
.intro--why { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }

/* ---- why operators stay: lead, then the turn ----------------------------- */
.why__lead {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.82);
  margin: 26px 0 0;
}
/* the paragraph that turns the section — set apart on a rule rather than
   running on as a third paragraph of the same weight */
.why__turn {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.26;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--white);
  margin: 30px 0 0;
  padding-top: 28px;
  border-top: 2px solid rgba(159, 220, 169, 0.34);
}

/* ---- the four capabilities ----------------------------------------------- *
   Named things rather than sentences, so they get a name and a description in a
   two-by-two block — not the Lodges page's single ruled list, and not cards
   floating on their own ground. The accent edge does the separating. */
.caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 56px;
  list-style: none;
  padding: 0;
  margin: 52px 0 0;
}
.caps li { border-left: 3px solid var(--accent-mid); padding: 4px 0 6px 26px; }
.caps__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.caps__b {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.62;
  color: var(--body);
  margin: 12px 0 0;
}

/* ---- the operating system ------------------------------------------------ *
   Six components with long descriptions. The Lodges page threads its five steps
   on a spine of small circles; that would crowd here, so each component is a
   full-width row led by an oversized numeral in the margin, separated by rules.
   Reads as a specification rather than a journey — which is what an operating
   system is. */
.osx { list-style: none; margin: 56px 0 0; padding: 0; }
.osx li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 44px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid rgba(159, 220, 169, 0.26);
}
.osx li:last-child { border-bottom: 1px solid rgba(159, 220, 169, 0.26); }
.osx__n {
  font-family: 'Chivo', sans-serif;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 900;
  color: rgba(159, 220, 169, 0.42);
  margin: 0;
}
.osx__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
}
.osx__b {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.64;
  color: rgba(242, 246, 238, 0.78);
  margin: 14px 0 0;
  max-width: 74ch;
}
/* the line that frames the whole section — the point of the six components,
   carried on the accent rather than left to float as its own section */
.osx__close {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(23px, 2.7vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--white);
  margin: 54px 0 0;
  padding-top: 40px;
  border-top: 3px solid var(--accent-mid);
  max-width: 30ch;
  text-wrap: balance;
}

/* ---- don't pay rent forever: the transition into the FAQs ---------------- */
.rentx { position: relative; overflow: hidden; background: var(--ink-2); }
.rentx__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
}
.rentx__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 26, 17, 0.90) 0%, rgba(6, 26, 17, 0.74) 48%, rgba(6, 26, 17, 0.38) 100%),
    linear-gradient(180deg, rgba(6, 26, 17, 0.44) 0%, rgba(6, 26, 17, 0.32) 50%, rgba(6, 26, 17, 0.64) 100%);
}
.rentx__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 122px var(--pad);
}
.rentx__rule { width: 68px; height: 4px; border-radius: 2px; background: var(--accent-mid); margin-bottom: 30px; }
.rentx__h {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(36px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  max-width: 16ch;
}
.rentx__p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.86);
  margin: 26px 0 0;
  max-width: 62ch;
}
.rentx .actions { margin-top: 40px; }

/* ---- FAQs beside a photograph -------------------------------------------- *
   The pairing already approved across /services/, /who-we-serve/,
   /how-we-work/ and the Lodges page, ported here in the same page-scoped form. */
.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);
}
/* the pendants and the window are the subject and they sit high in the frame,
   so the crop is anchored above centre rather than on the table in front */
.faqx__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
}

/* ---- FAQ accordion -------------------------------------------------------- *
   The treatment approved across the site. The open state lives on the button's
   aria-expanded and the panel's hidden attribute follows it, so the 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(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: 1200px) {
  .usp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 30px; }
}
@media (max-width: 1024px) {
  /* copy above picture, and the frame takes a controlled ratio again rather
     than stretching to a column that no longer exists beside it */
  .intro, .intro--why { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .intro__media { align-self: auto; aspect-ratio: 16 / 10; }
  .caps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 10; }
  .rentx__inner { padding: 100px var(--pad); }
  .osx li { grid-template-columns: 96px minmax(0, 1fr); gap: 0 30px; }
}
@media (max-width: 768px) {
  .usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp__item { gap: 12px; }
  /* the numeral moves above the title rather than squeezing a margin column
     down to something that fits neither */
  .osx li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 0; }
  .osx__n { font-size: 40px; margin-bottom: 12px; }
  .osx__close { margin-top: 40px; padding-top: 30px; }
  .intro__media { aspect-ratio: 3 / 2; }
  .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; }
  .rentx__inner { padding: 86px var(--pad); }
  .caps li { padding-left: 20px; }
  /* the copy spans the full width once stacked, so the left-heavy scrim would
     bury the photograph entirely; even it out and lift it just enough to let
     the coastline read while keeping white text well clear of AA */
  .rentx__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.70) 0%, rgba(6, 26, 17, 0.64) 55%, rgba(6, 26, 17, 0.56) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.22) 0%, rgba(6, 26, 17, 0.14) 50%, rgba(6, 26, 17, 0.44) 100%);
  }
}
@media (max-width: 560px) {
  .usp__grid { grid-template-columns: minmax(0, 1fr); }
  .intro__media { aspect-ratio: 4 / 3; }
  .hero h1 { max-width: none; }
  .rentx__h { max-width: none; }
  .rentx__inner { padding: 72px var(--pad); }
  .osx__close { max-width: none; }
}