/* ===========================================================================
   Booked Wild — /homepage-redesign/

   Loaded after services.css, offer.css and pageform.css, which already carry
   the header, grid, type scale, buttons, rule treatment, .sec grounds, .hero,
   .split, .steps, .incl and the whole contact-panel system. This page reuses
   all of it: the only things here are the handful of adjustments the approved
   copy needs and no existing page had.

   Everything is written unscoped because this stylesheet loads on this page
   alone — correcting a shared sheet would move pages already signed off.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   The h1 is the dominant first message, so it keeps the full hero measure
   rather than services.css's 22ch cap, which broke this particular headline
   into four short lines with a stub. */
.hero h1 { max-width: 18ch; text-wrap: balance; }
.hero__lede { max-width: 44ch; }

/* ---- hero scrim ---------------------------------------------------------- *
   The replacement photograph is a cabin at dusk — already dark almost
   everywhere, with the only bright values in the porch lights and windows,
   which sit right of the text column. The shared vertical wash is close to
   right on its own; it only needs a light horizontal lift on the left so the
   h1 clears AA comfortably over the lit doorway, and a deeper foot so the
   buttons stay legible against the meadow. 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.30) 0%, rgba(6, 26, 17, 0.20) 52%, rgba(6, 26, 17, 0) 90%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.34) 42%,
      rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 100%);
}
@media (max-width: 768px) {
  /* stacked, the copy runs the full width, so the wash has to as well */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.30) 0%, rgba(6, 26, 17, 0.26) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.62) 0%, rgba(6, 26, 17, 0.34) 42%,
        rgba(6, 26, 17, 0.50) 68%, rgba(6, 26, 17, 0.90) 100%);
  }
}

/* ---- the hero's ghost button --------------------------------------------- *
   services.css:242 sets a:hover{color:var(--ink)} at specificity (0,1,1),
   which outranks .btn--ghost{color:var(--white)} at (0,1,0), and
   .btn--ghost:hover on line 347 changes only the background — so the label
   turns dark ink over a dark photograph on hover. Fixed page-scoped and
   hero-scoped, identical to the rule already on /lodges-log-cabins/,
   /short-term-rentals/, /website-redesign-offer/ and /about-us/. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- "What you get" ------------------------------------------------------ *
   .steps from services.css is a four-column grid; there are three approved
   steps, so the row is rebalanced to thirds rather than leaving a gap where a
   fourth card would sit. */
.steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The closing line under the steps. Not a fourth step — it is the reassurance
   that follows them, so it reads as a statement on the section's own ground
   rather than as another card. */
.steps-note {
  font-family: 'Schibsted Grotesk', sans-serif;
  /* The approved sentence is 96 characters. At 28px over a 34ch measure it
     broke onto three lines with a short stub. The measure cap is removed so it
     can use the full 1360px band, and the size is tuned to the width the
     sentence actually needs rather than shrunk to force the fit — it sets one
     line from 1200px up, and wraps naturally below that. */
  font-size: clamp(20px, 1.62vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
  margin: 44px 0 0;
  max-width: none;
  text-wrap: balance;
}

/* ---- "What's included" --------------------------------------------------- *
   Eight items rather than the four /website-redesign-offer/ carries, so .incl
   runs three across here instead of stretching four cards over the full width. */
.incl--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The ninth cell closes the grid, which eight items leave one short. It reuses
   .incl's box so it belongs to the row, then inverts it — accent fill instead
   of the dark card, no tick — so it reads as the action rather than a ninth
   feature. */
/* .incl li is display:flex in offer.css, which would size this card's anchor to
   its text and leave it floating in a wider cell — so the cell becomes a plain
   block and the anchor fills it. */
.incl__cta {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.incl__cta a {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--accent);
  border: 1.5px solid var(--accent);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--white);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
/* services.css:242 a:hover{color:var(--ink)} would otherwise darken the label
   on hover, the same specificity trap as the ghost button */
.incl__cta a:hover,
.incl__cta a:focus-visible {
  background: #2F7B3F;
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-3px);
}
.incl__arrow { flex: none; font-size: 20px; line-height: 1; }

/* ---- "Why we're doing this" ---------------------------------------------- *
   The approved copy holds the left; a before/after of a real redesign holds the
   right. The ground stays .whyus — the field-green band with a faint photograph
   behind it that /website-redesign-offer/ and /lodges-log-cabins/ already use —
   so the section gains a visual without leaving the design system. */
.reason-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 72px;
  align-items: center;
  margin-top: 44px;
}
.reason { max-width: 48ch; }
.reason__lead {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--white);
  margin: 34px 0 0;
}
.reason__body {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.66;
  color: rgba(242, 246, 238, 0.92);
  margin: 20px 0 0;
}

/* ---- the before/after ---------------------------------------------------- *
   Two browser windows rather than two bare screenshots. The Before sits back —
   smaller, cooler, lower contrast, behind — and the After comes forward at full
   size and full colour with the heavier shadow, so the eye lands on the result
   first and reads backwards to the starting point. The overlap and the two
   labels carry "this became that" on their own. */
.ba {
  /* the bottom padding absorbs the After's negative top margin, so the band
     below the comparison matches the space above it */
  padding: 8px 0 78px 0;
}
.ba__win {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(242, 246, 238, 0.28);
}
/* the browser bar: three dots on a tinted strip, no invented chrome beyond it */
.ba__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: #E9EFE4;
  border-bottom: 1px solid #D3E0CE;
}
.ba__chrome i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C3D3BF;
}
.ba__win img {
  display: block;
  width: 100%;
  height: auto;
}
.ba__label {
  position: absolute;
  z-index: 3;
  top: 10px; left: 12px;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(12, 42, 28, 0.86);
  color: rgba(242, 246, 238, 0.92);
}
.ba__label--after { background: var(--accent); color: var(--white); }

/* Before: set back and to the left, behind the After */
.ba__win--before {
  width: 62%;
  margin-left: 0;
  filter: saturate(0.72) brightness(0.94);
  box-shadow: 0 14px 34px rgba(6, 20, 13, 0.28);
  z-index: 1;
}
/* After: larger, forward, full colour, and overlapping the Before's lower right */
.ba__win--after {
  width: 74%;
  margin-left: auto;
  margin-top: -14%;
  border-color: rgba(242, 246, 238, 0.5);
  box-shadow: 0 34px 74px rgba(6, 20, 13, 0.46);
  z-index: 2;
}
/* ---- testimonials -------------------------------------------------------- *
   Proof, not review widgets: no stars, no avatars, no card chrome borrowed from
   a plugin. Three columns on the site's own cream, each a quote set at reading
   size over the page ground with a heavy accent rule down its left edge, and
   the attribution beneath a hairline. The middle one takes the dark card so the
   row has a centre of gravity rather than three identical panels.

   The cards stretch to the tallest quote rather than being clamped to a fixed
   height — the three quotes differ by about eighty words and truncating any of
   them was not an option — so the attribution is pushed to the bottom with
   margin-top:auto and the baselines line up regardless. */
.tmos {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.tmo {
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}
/* the centre card carries the dark ground, so the row reads as one composition */
.tmo:nth-child(2) {
  background: var(--card);
  border-color: var(--card);
  border-left-color: var(--accent-mid);
}
.tmo__quote { margin: 0; }
.tmo__quote p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.22vw, 17.5px);
  line-height: 1.68;
  color: var(--body);
  margin: 0;
}
.tmo:nth-child(2) .tmo__quote p { color: rgba(242, 246, 238, 0.9); }

.tmo__who {
  margin-top: auto;             /* attributions align across uneven quotes */
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tmo:nth-child(2) .tmo__who { border-top-color: rgba(159, 220, 169, 0.32); }
.tmo__name {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ink);
}
.tmo:nth-child(2) .tmo__name { color: var(--white); }
.tmo__role {
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--field);
}
.tmo:nth-child(2) .tmo__role { color: var(--accent-soft); }

@media (max-width: 1024px) {
  /* two columns would strand the third, so the quotes get their full measure
     in a single column rather than being squeezed into thirds */
  .tmos { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 44px; }
  .tmo { padding: 32px 30px 30px; }
  .tmo__who { padding-top: 20px; }
}
@media (max-width: 560px) {
  .tmo { padding: 28px 24px 26px; }
}

/* ---- the landing-page form ----------------------------------------------- *
   pageform.css already styles this panel; the only difference is that all four
   approved fields are required, so the optional-field styling never appears,
   and the send button carries the approved CTA wording, which is longer than
   "Send message" and must not wrap awkwardly on a phone. */
.pgform__send { text-align: center; }

@media (max-width: 1024px) {
  .reason-split { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
  .reason { max-width: none; }
  .incl--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* nine cells over two columns leaves the CTA stranded alone on a fifth row,
     so it spans the full width there and reads as a deliberate closing bar
     rather than an orphan */
  .incl__cta { grid-column: 1 / -1; }
  .incl__cta a { justify-content: center; gap: 12px; }
  .steps--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero h1 { max-width: none; }
  /* overlapping two windows inside 390px would shrink both past legibility, so
     the comparison becomes a straight Before -> After stack at full width with
     the arrow turned to point down it */
  .ba { padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .ba__win--before,
  .ba__win--after { width: 100%; margin: 0; }
  .ba__win--before { filter: saturate(0.8) brightness(0.96); }
  .steps--three,
  .incl--three { grid-template-columns: minmax(0, 1fr); }
  .steps-note { margin-top: 32px; font-size: 20px; max-width: none; }
}

/* ===========================================================================
   "Does your homepage tick these boxes?" (2026-09-04)

   Sits directly under "Why your homepage matters" and shares its cream ground,
   so the boundary between the two collapses — the checklist reads as the second
   beat of that argument rather than a new part of the page. The tick is the one
   already used by "What's included" further down, recoloured for a light ground.
   =========================================================================== */

/* two cream sections in a row would otherwise stack 120px + 120px of padding */
.sec--joined { padding-top: 0; }

.chk {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.chk li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.chk li:hover { border-color: var(--accent-mid); transform: translateY(-2px); }
.chk__tick {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; margin-top: 1px;
}
.chk__tick svg { width: 13px; height: 13px; display: block; }
.chk__t {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--body);
}
.chk__t b {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chk__s { color: var(--muted); }

.chk__close {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 3px solid var(--accent-mid);
  max-width: 46ch;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 768px) {
  .chk { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 36px; }
  .chk li { padding: 20px 22px; gap: 14px; }
  .chk__close { margin-top: 28px; padding-top: 22px; }
}


/* ---- "Like what you see?" two-column head ---------------------------------
   The heading and its paragraph used to sit alone at 78ch, leaving the right
   half of a full-width dark band empty. They now share the section's existing
   .split component with a screenshot of a finished accommodation site, which is
   what the paragraph is describing. .split already stacks copy-first at 1024px,
   so tablet and mobile need nothing extra. */
.incl__split { margin: 0 0 8px; }
/* the copy column is ~640px at 1440, narrower than the 78ch cap, so the cap
   never applies here; reset it anyway so the column governs the measure */
.incl__split .ohead--wide { max-width: none; }
/* .split__media is 4/3 by default. This is a UI screenshot rather than a photo,
   so it keeps its own 8:5 proportions and nothing is cropped off the design. */
.incl__media { aspect-ratio: 8 / 5; }
@media (max-width: 1024px) {
  .incl__media { aspect-ratio: 8 / 5; }
  .incl__split { margin-bottom: 0; }
}

/* ---- "Does your homepage tick these boxes?" width -------------------------
   The checklist grid uses the full .wrap width while the heading was capped at
   78ch and the closing line at 46ch, so the section read as three disconnected
   bands with the rule and the accent border stopping half way. Both now span
   the grid, and the closing line's accent border runs its full width. Left
   edges already aligned; this only releases the right-hand cap. */
#checklist .ohead,
#checklist .ohead--wide,
#checklist .h2,
#checklist .chk__close { max-width: none; }