/* ===========================================================================
   Booked Wild — /who-we-serve/lodges-log-cabins-resorts/

   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.

   This is the longest page on the site, so the job here is rhythm. Every
   section gets a different device rather than a different colour on the same
   card: an editorial ruled list, a two-column lead/body split, two full-width
   structural statements, a numbered spine, a layer diagram, a timeframe rail.
   Nothing on the page is a grid of identical cards except the one section where
   a grid is the honest shape — the seven components of a system.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   The h1 and the line above it are swapped: the category is the heading, the
   promise sits above it. That promise is a 51-character sentence, not a label,
   and the shared .eyebrow sets 14px uppercase at .2em tracking — which at that
   length reads as shouting and is genuinely hard to scan. So the kicker keeps
   the eyebrow's weight and colour but stays sentence case at a slightly larger
   size with normal tracking. */
/* The hero label now uses the shared .eyebrow class, so its type comes from
   services.css (Karla 600, 14px, .2em tracking; 13px at the narrowest step) —
   the same as every other Who We Serve child page. */
.hero h1 { max-width: 17ch; text-wrap: balance; }
.hero__lede { max-width: 54ch; }

/* ---- hero scrim ---------------------------------------------------------- *
   The photograph is a lit cabin at nightfall: already dark almost everywhere,
   with its bright values in the windows and the foreground snow. The shared
   scrim would have crushed it to black, so the vertical layer is lightened
   through the middle and only the foot is deepened, where the snow sits under
   the buttons. The horizontal wash weights the text column without touching the
   cabin 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.46) 0%, rgba(6, 26, 17, 0.30) 50%, rgba(6, 26, 17, 0) 88%),
    linear-gradient(180deg,
      rgba(6, 26, 17, 0.58) 0%, rgba(6, 26, 17, 0.20) 34%,
      rgba(6, 26, 17, 0.44) 66%, rgba(6, 26, 17, 0.86) 100%);
}
@media (max-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(6, 26, 17, 0.46) 0%, rgba(6, 26, 17, 0.40) 100%),
      linear-gradient(180deg, rgba(6, 26, 17, 0.58) 0%, rgba(6, 26, 17, 0.20) 34%,
        rgba(6, 26, 17, 0.44) 66%, rgba(6, 26, 17, 0.86) 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.
   Fixed page-scoped for both places this page puts one on a dark ground. */
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible,
.sec--field .btn--ghost:hover,
.sec--field .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #FFFFFF;
  color: var(--white);
}

/* ---- USP icons ----------------------------------------------------------- *
   Stroke-only, currentColor, no plate or circle behind them, so the bar keeps
   reading as four statements with a mark rather than four feature cards. */
.usp__item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.usp__icon { color: var(--accent-soft); flex: none; display: block; }

/* ---- section headings ---------------------------------------------------- *
   The shared .h2 caps its measure at 20ch, which suits the short headings the
   other pages use. Several of this page's are 48-63 characters and broke over
   four cramped lines at 63px while two thirds of the column sat empty. A wider
   measure plus balanced wrapping puts them on two or three even lines. */
.sec .h2 { max-width: 26ch; text-wrap: balance; }

/* ---- section openings with an image -------------------------------------- *
   Three sections open copy-left / image-right, so each one varies the thing
   that actually reads: the proportion of the two columns, the shape of the
   frame, and where the picture sits against the text. Tall portrait for the
   place itself, a wide landscape dropped to the baseline for the tiring work,
   a small square held centre for the craft of rebuilding. */
.intro { display: grid; align-items: start; gap: 64px; }
.intro__copy { min-width: 0; }
.intro__copy .rule { margin: 0 0 22px; }
.intro__copy .h2 { margin: 0; }
.intro__copy .lede { margin: 26px 0 0; }
.intro__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  box-shadow: 0 34px 80px rgba(12, 42, 28, 0.24);
}
.intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.intro--tall   { grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr); }
.intro--steps  { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
/* Each of these is one composition rather than an intro with a list beneath
   it: the picture spans both rows on the right while the heading and the
   content stack down the left. The list is a separate grid child rather than
   part of the copy block, so that when this collapses to one column the order
   reads heading, lede, picture, list — not the whole list before the image. */
.intro--tall, .intro--steps { grid-template-rows: auto auto; }

.intro--wide   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.intro--wide   .intro__media { aspect-ratio: 16 / 10; }

/* Both of these sections put the picture beside a tall column of content, so
   the frame takes its height from that content rather than from a ratio of its
   own: it spans both grid rows and stretches, and the photograph is positioned
   absolutely inside it so a percentage height always has something definite to
   resolve against. No fixed pixel height anywhere — move a line of copy and the
   picture follows. */
.intro--tall .intro__media,
.intro--steps .intro__media {
  position: relative;
  align-self: stretch;
  aspect-ratio: auto;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 0;
}
.intro--tall .intro__media img,
.intro--steps .intro__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* the sauna is a deep interior: keep the window and the bench, not the ceiling */
.intro--tall  .intro__media img { object-position: 50% 42%; }
/* the cabin sits at the foot of the pines, so a very tall frame holds the
   trunks above it — anchor low or the cabin drops out of the crop */
.intro--steps .intro__media img { object-position: 50% 60%; }

.intro--tall .intro__copy,  .intro--steps .intro__copy { grid-column: 1; grid-row: 1; }
.intro--tall .does { grid-column: 1; grid-row: 2; margin-top: 46px; }
.intro--steps .mech { grid-column: 1; grid-row: 2; margin-top: 46px; }

/* ---- what we do: an editorial ruled list, not cards ---------------------- */
.does { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 52px 0 0; padding: 0; list-style: none; }
.does li {
  border-top: 2px solid var(--line-2);
  padding: 26px 0 30px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: var(--body);
}

/* ---- empathy: lead left, detail right ------------------------------------ *
   The supplied paragraphs are split at a sentence boundary and set at two
   sizes. That is the whole device — no labels have been added, and no wording
   changed, because the section's force is in the sentences themselves. */
.tired { list-style: none; margin: 56px 0 0; padding: 0; }
.tired li {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid rgba(159, 220, 169, 0.26);
}
.tired li:last-child { border-bottom: 1px solid rgba(159, 220, 169, 0.26); }
.tired__lead {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(20px, 1.85vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.tired__body {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.62;
  color: rgba(242, 246, 238, 0.76);
  margin: 0;
}
.tired-intro { max-width: 68ch; }
.tired-cue {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--accent-soft);
  margin: 34px 0 0;
}

/* ---- the stakes: a diptych, not another list ----------------------------- *
   The two sections before this one both open with a heading and run a column
   of rows underneath. This one deliberately breaks that: the heading and the
   lede sit side by side on one baseline, the two shifts become facing panels in
   opposing colours, each carrying an oversized ghost numeral, and the closing
   line runs full width beneath them as the conclusion rather than as a
   separate band of its own. */
.stakes__head {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.66fr);
  gap: 24px 64px;
  align-items: end;
}
/* the shared 26ch cap put this 63-character heading on five lines once it was
   in a column rather than the full wrap, which stranded the lede in the corner.
   In this composition the column is the measure. */
.stakes__head .h2 { margin: 0; max-width: none; }
.stakes__head .lede { margin: 0; padding-bottom: 6px; }

.shifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.shiftp {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  padding: 44px 42px 46px;
}
.shiftp--one { background: var(--ink); color: var(--cream); }
.shiftp--two { background: var(--field); color: var(--cream); }
/* the numeral is scenery: large, low-contrast, clipped by the panel */
.shiftp__n {
  position: absolute;
  right: 20px; top: -18px;
  font-family: 'Chivo', sans-serif;
  font-size: 150px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(159, 220, 169, 0.14);
  margin: 0;
  pointer-events: none;
}
.shiftp__l {
  position: relative;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-soft);
  margin: 0 0 22px;
}
.shiftp__h {
  position: relative;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.shiftp__b {
  position: relative;
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.64;
  color: rgba(242, 246, 238, 0.8);
  margin: 22px 0 0;
}
/* The conclusion, carried on a rule rather than in a band of its own. It runs
   the full width of the section — the rule spans the panels above it and the
   statement is set large enough to use that width rather than sitting in a
   narrow measure with the rule stretching past it. */
.stakes__close {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(26px, 3.7vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--ink);
  margin: 56px 0 0;
  padding-top: 40px;
  border-top: 3px solid var(--accent);
  max-width: none;
  text-wrap: balance;
}

/* ---- the mechanism: a numbered spine ------------------------------------- */
.mech { list-style: none; margin: 56px 0 0; padding: 0; }
.mech li {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0 40px;
  padding: 0 0 44px 0;
}
.mech li:last-child { padding-bottom: 0; }
/* the spine runs behind the numbers and stops at the last one, so the list
   reads as a sequence rather than five separate blocks */
.mech li::before {
  content: "";
  position: absolute;
  left: 27px; top: 46px; bottom: -6px;
  width: 2px;
  background: var(--line-2);
}
.mech li:last-child::before { display: none; }
.mech__n {
  position: relative;
  z-index: 1;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
  background: var(--accent);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0;
}
.mech__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 10px 0 0;
}
.mech__d {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--accent);
  margin: 10px 0 0;
}
.mech__b {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.64;
  color: var(--body);
  margin: 14px 0 0;
  max-width: 72ch;
}

/* ---- Direct Booking OS: a layer sitting on a base ------------------------ *
   The one grid on the page, because seven components of one system is honestly
   a grid. What stops it reading as a card wall is the base beneath it: the
   platforms the layer sits on top of, drawn as a single wide bar. */
.oslayer { margin: 52px 0 0; }
.oslayer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.oslayer__item {
  background: var(--card);
  border: 1px solid rgba(159, 220, 169, 0.22);
  border-radius: var(--r-md);
  padding: 24px 22px 26px;
}
.oslayer__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}
.oslayer__b {
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(242, 246, 238, 0.74);
  margin: 10px 0 0;
}
/* The eighth cell. Filled accent rather than the components' dark card, so it
   reads as the one thing on the grid you can act on — at any column count, and
   whether it lands beside the seventh component or under it. */
.oslayer__cta { display: flex; }
.oslayer__cta a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: 24px 22px 26px;
  text-decoration: none;
  color: var(--white);
  transition: background .2s ease, transform .2s ease;
}
.oslayer__cta a:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }
.oslayer__cta a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.oslayer__ctaT {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.oslayer__ctaArrow { flex: none; display: grid; place-items: center; }

/* the join between the layer and the platforms it sits above */
.oslayer__join {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-soft);
}
.oslayer__join::before,
.oslayer__join::after { content: ""; height: 1px; background: rgba(159, 220, 169, 0.3); flex: 1; }
.oslayer__base {
  border: 1px dashed rgba(159, 220, 169, 0.42);
  border-radius: var(--r-md);
  padding: 22px 26px;
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.5;
  color: rgba(242, 246, 238, 0.8);
  text-align: center;
}
.oslayer__close {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(21px, 2.1vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--white);
  margin: 44px 0 0;
  padding-top: 34px;
  border-top: 1px solid rgba(159, 220, 169, 0.26);
  max-width: 26ch;
}

/* ---- engagement: the timeframe is the rail ------------------------------- *
   Deliberately not the mechanism's device. There the number leads; here the
   timeframe does, because the question this section answers is "how long". */
.phase { list-style: none; margin: 56px 0 0; padding: 0; }
.phase li {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  gap: 18px 56px;
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--line-2);
}
.phase li:last-child { border-bottom: 1px solid var(--line-2); }
.phase__when {
  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(--accent);
  margin: 0;
}
.phase__step {
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 12px;
}
.phase__t {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.phase__b {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.64;
  color: var(--body);
  margin: 12px 0 0;
  max-width: 70ch;
}

/* ---- the conversion moment ----------------------------------------------- *
   Was a centred heading and a button on flat green, which for the page's main
   conversion point read as an afterthought. It is now a photographic band —
   embers rather than another cabin, so it warms the page without repeating the
   hero — with the heading at display scale, left-aligned against the light, and
   the call to action as a large pill rather than a standard .btn. */
.nowx { position: relative; overflow: hidden; background: var(--ink-2); }
.nowx__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.nowx__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 26, 17, 0.90) 0%, rgba(6, 26, 17, 0.72) 46%, 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%);
}
.nowx__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 132px var(--pad);
}
.nowx__rule { width: 68px; height: 4px; border-radius: 2px; background: var(--accent-mid); margin-bottom: 30px; }
.nowx__h {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  max-width: 14ch;
}
.nowx__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  padding: 20px 30px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nowx__cta svg { transition: transform .22s ease; }
.nowx__cta:hover { background: var(--accent); color: var(--white); transform: translateY(-2px); }
.nowx__cta:hover svg { transform: translateX(4px); }
.nowx__cta:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 4px; }

/* ---- FAQs beside a photograph -------------------------------------------- *
   The pairing already approved on /services/, /who-we-serve/ and
   /how-we-work/, 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);
}
/* 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 subject
   sits low-left in the frame — the man, the mug and the stove — so the crop is
   pulled down and left off centre to keep him rather than the empty timber wall
   above him at every breakpoint. */
.faqx__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 72%;
  display: block;
}

/* ---- FAQ accordion -------------------------------------------------------- *
   Ported verbatim from the treatment approved on /how-we-work/ so every page
   carrying FAQs behaves identically. 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}, 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;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .oslayer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* every image-led opening stacks copy above picture, and the frames flatten
     so a portrait crop does not become a tower on a narrow column */
  .intro, .intro--tall, .intro--wide, .intro--steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }
  /* Stacked, the frames stop stretching and take a controlled ratio again —
     otherwise the desktop rule keeps them spanning a second column that no
     longer exists, which is both a tower of an image and a source of overflow. */
  .intro--tall .intro__copy,  .intro--tall .intro__media,  .intro--tall .does,
  .intro--steps .intro__copy, .intro--steps .intro__media, .intro--steps .mech {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }
  .intro--tall .intro__media, .intro--steps .intro__media { aspect-ratio: 16 / 10; }
  .intro--tall .intro__media img  { object-position: 50% 46%; }
  .intro--steps .intro__media img { object-position: 50% 62%; }
  .intro--tall .does, .intro--steps .mech { margin-top: 0; }
  /* the diptych stacks; the numerals shrink with the panels */
  .stakes__head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .stakes__head .lede { padding-bottom: 0; }
  .shifts { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 44px; }
  .shiftp { padding: 36px 32px 38px; }
  .shiftp__n { font-size: 116px; right: 16px; top: -14px; }
  .stakes__close { margin-top: 44px; padding-top: 32px; }
  .nowx__inner { padding: 108px var(--pad); }
  /* 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 / 10; }
  .faqx__media img { object-position: 38% 62%; }
  .does { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* lead above detail rather than two narrow columns */
  .tired li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .phase li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .phase__when { font-size: 22px; }
  .oslayer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .intro { gap: 28px; }
  .intro--tall .intro__media, .intro--steps .intro__media { aspect-ratio: 3 / 2; }
  .intro--wide .intro__media { aspect-ratio: 3 / 2; }
  .shiftp { padding: 30px 24px 32px; }
  .shiftp__n { font-size: 96px; }
  .nowx__inner { padding: 92px var(--pad); }
  .nowx__cta { padding: 17px 24px; }
  .usp__item { gap: 12px; }
  .mech li { grid-template-columns: 60px minmax(0, 1fr); gap: 0 22px; padding-bottom: 36px; }
  .mech li::before { left: 21px; top: 44px; }
  .mech__n { width: 44px; height: 44px; font-size: 17px; }
  .mech__t { margin-top: 4px; }
  .shift { padding-top: 34px; margin-top: 44px; }
  .shift + .shift { margin-top: 46px; }
  .oslayer__base { padding: 20px; }
  .faqx { margin-top: 40px; gap: 30px; }
  .faqx__media { aspect-ratio: 4 / 3; }
  .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; }
}
@media (max-width: 560px) {
  .oslayer__grid { grid-template-columns: minmax(0, 1fr); }
  .intro--tall .intro__media, .intro--wide .intro__media, .intro--steps .intro__media { aspect-ratio: 4 / 3; }
  .shiftp__n { font-size: 78px; top: -10px; }
  .nowx__inner { padding: 76px var(--pad); }
  .nowx__h { max-width: none; }
  /* full-width tap target at the foot of the page's main conversion point */
  .nowx__cta { width: 100%; justify-content: space-between; }
  .stakes__close { padding-top: 26px; margin-top: 36px; max-width: none; }
  .tired li { padding: 26px 0; }
  .phase li { padding: 26px 0; }
  .does li { padding: 22px 0 24px; }
  .hero h1 { max-width: none; }
  .oslayer__close { margin-top: 34px; padding-top: 26px; }
}