/* =========================================================================
   pages/home.css — Home template only
   The Beekeeper House

   Section order is fixed by the narrative architecture:
   01 Sanctuary opening · 02 Who we are · 03 Whole-person approach
   04 The calm setting · 05 Paths to the programmes
   06 Credentials & recognition · 07 Enquiry
   ========================================================================= */

/* =========================================================================
   01 — Sanctuary opening
   Full-bleed grounds photography. One headline. No badges, no form,
   no urgency. The image holds the space.
   ========================================================================= */

.bk-w.bk-scope.bk-home .hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The full first screen. The header floats over it, so nothing is
     subtracted. svh, not vh: on mobile browsers vh includes the retracting
     toolbar, which would push the foot of the image below the fold on first
     paint. The floor keeps the headline from being crushed on a short window.
     Top padding clears the floating header. */
  min-height: max(520px, 100svh);
  padding-block: calc(var(--header-height) + var(--space-4))
                 var(--space-7);
  background-color: var(--color-deep-water);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .hero {
    padding-block: calc(var(--header-height) + var(--space-7)) var(--space-9);
  }
}

.bk-w.bk-scope.bk-home .hero__media {
  position: absolute;
  inset: 0;
}

.bk-w.bk-scope.bk-home .hero__media > picture,
.bk-w.bk-scope.bk-home .hero__media > picture > img {
  width: 100%;
  height: 100%;
}

.bk-w.bk-scope.bk-home .hero__media img { object-fit: cover; }

/* Deep-water scrims, not a filter — the photograph itself is untouched.
   Two layers: one rising from the foot of the frame, and one drawn around
   the centre, where the type now sits.

   The centre layer replaces a left-to-right gradient that was built for
   left-ranged copy. Centring the beats moved every line into the open,
   bright middle of this photograph, and the old scrim measured 2.50:1 on the
   subline and 2.98:1 on the standfirst there — both well under the 4.5 they
   need.

   Re-measured against this photograph at a 1280x760 stage, worst pixel
   behind each element (a harsher test than averaging the glyph line boxes):
   credential line 6.20:1, standfirst 6.40:1, headline 6.01:1, buttons
   7.49:1, the accreditation marks 4.49:1 (graphics need 3), scroll cue
   8.34:1.

   There is a floor. Scaling both layers to 0.75x measures 4.60:1 on the
   subline — still a pass, but with nothing left over. Do not lighten past
   that without darkening the image or enlarging the type, and re-measure if
   the photograph, its crop, the copy length, or the beats' alignment
   changes: all four move type to a different part of the frame. */
.bk-w.bk-scope.bk-home .hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(21, 41, 60, 0.56) 0%,
      rgba(21, 41, 60, 0.44) 55%,
      rgba(21, 41, 60, 0.16) 100%
    ),
    linear-gradient(
      to top,
      rgba(21, 41, 60, 0.68) 0%,
      rgba(21, 41, 60, 0.53) 40%,
      rgba(21, 41, 60, 0.34) 75%,
      rgba(21, 41, 60, 0.27) 100%
    );
}

.bk-w.bk-scope.bk-home .hero__inner { position: relative; }

/* A single measure shared by every line. A ch value would resolve against
   each element's own font size and give three different right edges; an
   absolute width keeps them flush, so the copy runs out to the headline
   rather than stacking up into a tall column. */
.bk-w.bk-scope.bk-home .hero__beat { max-width: 100%; }

@media (min-width: 640px)  { .bk-w.bk-scope.bk-home .hero__beat { max-width: 560px; } }
@media (min-width: 1024px) { .bk-w.bk-scope.bk-home .hero__beat { max-width: 780px; } }
@media (min-width: 1441px) { .bk-w.bk-scope.bk-home .hero__beat { max-width: 880px; } }

/* Static fallback. Without the stage the two beats are just two blocks in
   the flow, one after the other — the hero this replaces, with the seals
   added. Everything from here to the stage rules is what a visitor sees if
   the script never runs. */
.bk-w.bk-scope.bk-home .hero__beat + .hero__beat { margin-top: var(--space-5); }

.bk-w.bk-scope.bk-home .hero__cue { display: none; }

/* The two marks, at a size where the ring of text around each seal is still
   legible rather than a grey smudge. */
.bk-w.bk-scope.bk-home ul.hero__seals {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-home .hero__seals img {
  width: auto;
  height: 56px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .hero__seals img { height: 68px; }
}

/* Sizes come from the --fs-hero-* tokens, which sit one step down the scale
   from H1 / lead / body. See variables.css for why it is a step and not a
   literal 15%. */
.bk-w.bk-scope.bk-home .hero h1 {
  color: var(--color-beeswax-cream);
  font-size: var(--fs-hero-title);
}

/* The caption to the two marks above it, not a second paragraph. Set in the
   small letterspaced register the site uses for labels, so the seals and the
   sentence that names them read as one unit and the prose below is plainly
   the prose. Weight, case and tracking carry the hierarchy — deliberately
   not colour: pale honey would separate these two registers in one move, but
   the gold in this viewport is already spoken for by the primary button, and
   the budget note above the .hero__actions rule says not to spend more. */
.bk-w.bk-scope.bk-home .hero__line {
  max-width: 54ch;
  margin-top: var(--space-5);
  color: var(--color-beeswax-cream);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

/* 58ch, not the beat's full 780px. Centred copy is ragged on both edges, so
   the eye has no fixed left margin to return to and a long line is genuinely
   harder to track than the same line ranged left — the reference holds its
   centred paragraph to about 45 characters for the same reason.
   balance rather than pretty: this is four lines, which is inside the range
   balancers will touch, and it is what stops the last line coming in as a
   five-word orphan. */
.bk-w.bk-scope.bk-home .hero__intro {
  max-width: 52ch;
  margin-top: var(--space-5);
  color: var(--color-beeswax-cream);
  font-size: var(--fs-hero-intro);
  line-height: var(--leading-body);
  text-wrap: balance;
}

/* Two lines that carry roughly the same weight, rather than a full one and a
   two-word second. */
.bk-w.bk-scope.bk-home .hero h1 { text-wrap: balance; }

/* The hexagon mark under the headline. Sized off the gold rule above it —
   the rule opens the beat at 64px wide, the mark closes it at 64px tall, so
   the two ornaments bracket the headline at the same measure rather than
   competing. In the static fallback it hangs from the left edge with
   everything else; the stage rule below centres it. */
.bk-w.bk-scope.bk-home .hero__mark {
  display: block;
  width: auto;
  height: 64px;
  margin-top: var(--space-5);
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .hero__mark { height: 80px; }
}

/* Stacked on mobile, side by side once there is room — but sized to their
   labels rather than stretched.

   Gold budget: 1.63% of the viewport on desktop, comfortably inside the 4%
   cap. On a 375px phone the same button is 5.2% and the cap is exceeded —
   stretched full width it was 6.04%, so content-width and tighter padding
   recover most of it, but a 44px-tall primary CTA simply occupies more of a
   small screen. Shortening the label or dropping the hero to outline-only
   would bring it under; both were judged worse for the user than the
   overage. Do not add any further gold to this viewport. */
.bk-w.bk-scope.bk-home .hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 480px) {
  .bk-w.bk-scope.bk-home .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }
}

/* Gold appears once here, as a hairline rule beneath the headline —
   comfortably inside the 4% budget. */
.bk-w.bk-scope.bk-home .hero__rule {
  width: 64px;
  height: 2px;
  margin: 0 0 var(--space-5);
  background-color: var(--color-honey-gold);
  border: 0;
}

/* -------------------------------------------------------------------------
   01 — Scroll stage

   Everything below is gated on [data-hero-ready], which hero-scroll.js sets
   only once it has a stage worth running: script alive, pointer-scrolled
   document, and prefers-reduced-motion not asked for. Nothing here is load-
   bearing — strip the attribute and the static hero above is what remains.
   ------------------------------------------------------------------------- */

/* The runway. Its height is the scroll budget: 100svh of it is the screen
   the stage occupies, the remainder is how far the visitor travels before
   the section releases. 240svh gives about 1.4 screens of scroll, which is
   one unhurried gesture on a trackpad and two on a wheel.
   clip, not hidden: hidden would make this a scroll container and the
   sticky child would have nothing to stick to. */
.bk-w.bk-scope.bk-home [data-hero-ready] {
  display: block;
  height: 240svh;
  min-height: 0;
  padding-block: 0;
  overflow: clip;
}

.bk-w.bk-scope.bk-home [data-hero-ready] .hero__stage {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100svh;
  min-height: 520px;
  overflow: clip;
}

/* Centred, following the reference. The beats share one grid cell so the
   second arrives where the first left, rather than below it. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__inner {
  display: grid;
  justify-items: center;
  width: 100%;
  text-align: center;
}

/* align-self, because the two beats share a cell and the cell is as tall as
   the taller of them. Left to stretch, beat one's headline would hang from
   the top of beat two's height instead of sitting on the screen's middle,
   and the swap would look like a jump. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__beat {
  grid-area: 1 / 1;
  align-self: center;
  margin-top: 0;
}

/* The stage is fixed at one screen and both beats are centred on the same
   axis, so the swap is a crossfade with no jump in it. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__beat { opacity: 0; transition: opacity var(--dur-slow) var(--ease-calm); }

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="open"] .hero__beat--open,
.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body { opacity: 1; }

/* Beat two also takes visibility, because it holds two links and a link
   faded to zero is still in the tab order — a keyboard user would tab into
   a button they cannot see. The change is instant but delayed until the fade
   has finished, so it never clips the animation.
   Beat one is deliberately left on opacity alone. It holds the page's only
   H1, which is also this section's accessible name; visibility: hidden would
   take that out of the accessibility tree for anyone reading past the
   handover, and there is nothing focusable in it to justify the cost. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__beat--body {
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-calm),
              visibility 0s linear var(--dur-slow);
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body {
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-calm),
              visibility 0s linear 0s;
}

/* The rule draws itself in under the headline. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__rule {
  margin-inline: auto;
  width: 0;
  transition: width var(--dur-slow) var(--ease-calm) 120ms;
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="open"] .hero__rule { width: 64px; }

/* The mark arrives just behind the headline it closes, on the same delay the
   rule takes to draw in — so the beat lands as rule, words, mark rather than
   all at once. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__mark {
  margin-inline: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-calm) 160ms,
              transform var(--dur-slow) var(--ease-calm) 160ms;
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="open"] .hero__mark {
  opacity: 1;
  transform: none;
}

.bk-w.bk-scope.bk-home [data-hero-ready] .hero__seals { justify-content: center; }

/* Both carry a max-width, and a block narrower than its parent still sits at
   the parent's left edge — text-align does not move the box. In the static
   fallback that left edge is the right answer; here it is not. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__line,
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__intro { margin-inline: auto; }

/* Beat two arrives a line at a time rather than as one block — the seals
   first, then the sentence they evidence, then the paragraph, then the way
   in. 90ms apart: enough to read as a sequence, short enough that the whole
   beat has landed within half a second of the scroll that called it. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__beat--body > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-calm),
              transform var(--dur-slow) var(--ease-calm);
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body > * {
  opacity: 1;
  transform: none;
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body > :nth-child(2) { transition-delay:  90ms; }
.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body > :nth-child(3) { transition-delay: 180ms; }
.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="body"] .hero__beat--body > :nth-child(4) { transition-delay: 270ms; }

/* The buttons sit inside beat two, so they inherit the prose measure — and
   at 780px the pair is 28px too wide and breaks onto two lines. This is the
   reason the old markup kept them outside .hero__copy entirely: the measure
   exists to keep lines of prose readable, and imposing it on a row of
   buttons only forces a wrap. width: max-content lets the row size to the
   pair; the cap is the page margin, so it still wraps on a narrow screen. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__actions {
  justify-content: center;
  width: max-content;
  max-width: calc(100vw - 2 * var(--grid-margin));
  margin-inline: auto;
}

/* ---- Scroll cue ----
   Bottom centre.
   Shown in beat one only: once the copy has arrived it has done its job, and
   a standing invitation to scroll would be arguing with the buttons. */
.bk-w.bk-scope.bk-home [data-hero-ready] .hero__cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-calm);
}

@media (min-width: 1360px) {
  .bk-w.bk-scope.bk-home [data-hero-ready] .hero__cue { bottom: var(--space-6); }
}

.bk-w.bk-scope.bk-home [data-hero-ready][data-hero-beat="open"] .hero__cue { opacity: 1; }

.bk-w.bk-scope.bk-home .hero__cue-label {
  color: var(--color-beeswax-cream);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A hairline with a brighter length travelling down it. The track is cream
   at low alpha so the line reads on the photograph without becoming a rule;
   the travelling part is the only thing that moves. */
.bk-w.bk-scope.bk-home .hero__cue-line {
  position: relative;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background-color: rgba(250, 246, 238, 0.32);
}

.bk-w.bk-scope.bk-home .hero__cue-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -60%;
  height: 60%;
  background-color: var(--color-beeswax-cream);
  animation: hero-cue 2s var(--ease-calm) infinite;
}

@keyframes hero-cue {
  from { transform: translateY(0); }
  to   { transform: translateY(266%); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .hero__cue-line::after { animation: none; }
}

/* =========================================================================
   02 — Welcome
   ========================================================================= */

/* The bleeding film needs somewhere to go. clip rather than hidden: hidden
   would make this section a scroll container and break position: sticky for
   anything inside it.
   position: relative is also what the .bee-flourish watermark resolves
   against; each of the three blocks below takes a stacking position of its
   own so nothing disappears behind it. */
.bk-w.bk-scope.bk-home .about { position: relative; overflow-x: clip; }

/* Three stacked blocks rather than two side-by-side columns — the reference's
   arrangement: centred opening, film, coda. Each sizes itself, because the
   whole point is that they are not the same width. */

/* ---- Beat one: the opening ----
   Narrower than the film below it and centred on the page. 760px is about
   48 characters at desktop body size: short enough that a centred paragraph
   still tracks line to line, which is the width centred copy lives or dies
   on. */
.bk-w.bk-scope.bk-home .about__intro {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  text-align: center;
}

/* ---- Beat two: the film ----
   Wider than both blocks of copy either side of it, and wider than the
   container the rest of the page runs in: the film is the one element allowed
   to break it, which is what makes it the centre of the section. 1440 is the
   resting width — at 1040 the frame read as a thumbnail sat in a lot of cream
   and the section lost its focal point.
   The settle animation on top of this is unchanged: it still arrives at 22%
   over the resting size and drifts down to it.
   Full width below 1024: a phone has no room to give away. */
.bk-w.bk-scope.bk-home .about__media {
  position: relative;
  width: 100%;
  margin: var(--space-6) auto 0;
  padding-inline: var(--grid-margin);
}

/* Two caps, and the vw one is the load-bearing half. 1440 is the ceiling on a
   large screen. 80vw is what keeps the settle inside the window: the film
   arrives at 1.22, so a resting width above ~0.82vw peaks wider than the
   screen and runs off both edges on the way in. At 1440px flat that happened
   at every width below about 1750 — clip on .about hid the bleed, so it read
   as a frame bigger than the screen rather than as a scrollbar.
   80vw leaves the margin the overshoot needs and still rests far wider than
   the 1040 this was before. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .about__media { max-width: min(1440px, 80vw); }
}

/* ---- Beat three: the marks ----
   Back to the container the rest of the page uses, so the film stays the
   only thing that ever breaks it. The grid itself is the shared .marks
   component; this rule only places it. */
.bk-w.bk-scope.bk-home .about .marks {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding-inline: var(--grid-margin);
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .about__media { margin-top: var(--space-7); }
  .bk-w.bk-scope.bk-home .about .marks { margin-top: var(--space-8); }
}

/* 12px, the large step of the brand's 8px radius (4 / 8 / 12). The 16px
   used before is off the scale. */
.bk-w.bk-scope.bk-home .about__video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-deep-water);
  border-radius: 12px;
  box-shadow: var(--shadow-media);
}

/* ---- Settling on approach ----
   Gated on [data-settle-ready], which media-settle.js sets only once it is
   running and only when reduced motion has not been asked for. The resting
   state above is the real size, so nothing here can leave the film stuck
   oversized.

   `center top`, and this is the whole reason 40% is possible. Scaled from its
   middle the film grows both ways: at 1.4 that is 135px upward, which lands
   squarely on the button above it — and lands there at exactly the moment the
   film enters the bottom of the window, where both are on screen. Anchored to
   its top edge it grows down and sideways instead. Sideways is free, because
   the section clips. Downward is free too, because the only thing under the
   film is the marks row, and that is still hundreds of pixels below the fold
   while the film is oversized.

   The radius and the shadow scale with the box, so at 1.4 the 12px radius
   renders as 17px on the way in. That reads as the frame being closer rather
   than as a different frame, which is the intent.

   The transition is what carries the whole movement, in one go, once the
   script trips .is-settled. It replaces a scale driven frame by frame off the
   scroll position: that only moved while the wheel did, so on a notched mouse
   the film advanced in four or five visible steps and stalled between them.

   22%, not the 40% this ran at first. Paired with the narrower resting width
   above, that is what keeps the film off the screen edges throughout — at 40%
   it was 1681px in a 1280 window and read as a full-bleed banner.

   1600ms, at a decelerating ease, so the film drifts to rest rather than
   arriving. Shorter durations covered the same distance in a hurry, which is
   the opposite of what a frame settling into place should look like. */
.bk-w.bk-scope.bk-home [data-settle-ready] {
  transform: scale(1.22);
  transform-origin: center top;
  transition: transform 1600ms var(--ease-calm);
  will-change: transform;
}

.bk-w.bk-scope.bk-home [data-settle-ready].is-settled { transform: none; }

/* ---- Click-to-play facade ----
   A button, not a div with a handler: it is focusable, it announces itself,
   and Enter and Space work without any of that being reimplemented. */
.bk-w.bk-scope.bk-home .video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.bk-w.bk-scope.bk-home .video-facade__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The scrim is what the play mark sits on. Weighted to the centre so the
     photograph keeps its light at the edges. */
  filter: brightness(0.88);
  transition: filter var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  /* translateX of the glyph itself, not the disc: a play triangle reads as
     centred only when its optical centre is, which sits left of its bounds. */
  padding-left: 4px;
  transform: translate(-50%, -50%);
  background-color: rgba(250, 246, 238, 0.94);
  border-radius: 50%;
  color: var(--color-deep-water);
  transition: background-color var(--dur-calm) var(--ease-calm),
              box-shadow var(--dur-calm) var(--ease-calm);
}

/* Gold appears here and nowhere else in this section — a ring on hover, not
   a fill, which keeps it inside the 4% budget. */
.bk-w.bk-scope.bk-home .video-facade:hover .video-facade__play,
.bk-w.bk-scope.bk-home .video-facade:focus-visible .video-facade__play {
  background-color: var(--color-beeswax-cream);
  box-shadow: 0 0 0 3px var(--color-honey-gold);
}

.bk-w.bk-scope.bk-home .video-facade:hover .video-facade__poster { filter: brightness(0.8); }

.bk-w.bk-scope.bk-home .video-facade:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .video-facade__poster,
  .bk-w.bk-scope.bk-home .video-facade__play { transition: none; }
}

/* The embed carries width and height for CLS, but the frame itself is
   fluid — the ratio box above is what actually sizes it. */
.bk-w.bk-scope.bk-home .about__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bk-w.bk-scope.bk-home .about__standfirst {
  margin-top: var(--space-4);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

/* Centred with the block it divides, not hung from its left edge. */
.bk-w.bk-scope.bk-home .about__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* A flex row purely so the button centres on its own bounds. text-align does
   not reach it — the hex button is an inline-flex box with an SVG plate
   behind the label, and centring the text inside it is not the same as
   centring the box. */
.bk-w.bk-scope.bk-home .about__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* The watermark rides high rather than at the section's midpoint. This
   section is three blocks tall, and the component's default 50% put the mark
   squarely behind the film, where 18% of anything is invisible. 7% from the
   top sets it beside the opening instead — the one band of this section with
   ground to spare, now that the film runs the full width.
   `right 5%` is the same x as the component's `95%`. It has to be written
   the long way: the four-value syntax needs a keyword on both axes, and
   `95% top 7%` is invalid, so the whole declaration would be dropped. */
.bk-w.bk-scope.bk-home .about .bee-flourish { background-position: right 5% top 7%; }

/* =========================================================================
   02a — Conditions we treat
   ========================================================================= */

/* The band reads as a panel set into the page rather than a colour swap.
   Two inset layers do it: a wide vignette that pulls the four edges down,
   and a tight one along the top for the lip a recess casts.
   Ink, not black — it is deep water's own shade, so the band darkens
   towards its edges instead of greying out. */
.bk-w.bk-scope.bk-home .conditions {
  box-shadow:
    inset 0 0 90px rgba(21, 41, 60, 0.75),
    inset 0 18px 30px -18px rgba(21, 41, 60, 0.9);
}

.bk-w.bk-scope.bk-home .conditions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

/* ---- The section marks ----
   One rule for all four of the graphics that crown a section heading: the bee
   over Conditions and over the questions, the rocks over Programmes, the
   flower over Access. They were four different sizes set two different ways —
   69, 64, 104 and 69 tall, two of them sized by height and two by width, with
   gaps of 24, 16 and 24 under them. Nothing chose those numbers; they
   accumulated one section at a time.

   Sized by height, not width, because the four drawings are different shapes
   (194x240, 233x300, 360x360) and height is the dimension the eye reads as
   "how big is it" when they are stacked above headings down a page.

   72, and the ceiling is Programmes. That section's stage is one screen
   shared between the head and a programme band, and on a 1280x700 laptop it
   had 14px to spare — so every pixel this mark gains there comes off the
   photograph. 72 fits; 88 does not.

   Where each one sits is still the section's business: the bees hang from
   their column's left edge because those headings are left-ranged, the rocks
   and the flower centre because theirs are centred. Coherent means the same
   size and the same gap, not the same alignment regardless of the layout. */
.bk-w.bk-scope.bk-home .conditions__bee,
.bk-w.bk-scope.bk-home .faq__bee,
.bk-w.bk-scope.bk-home .programmes__mark,
.bk-w.bk-scope.bk-home .access__mark {
  display: block;
  width: auto;
  height: 72px;
  margin: 0 0 var(--space-4);
}

/* Copy left, index right, with real air between them.

   The split favours the index, and the air between the two is --space-8 where
   it used to be --space-9. Both numbers are paying for the same thing: the
   stage on the right is what the cards have to fan across, and at 0.85fr with
   128px between the columns it came out around 676px — three cards of 280
   overlapping in that left each one showing about half its width, which is
   what made them read as narrow. 0.72fr and 96px hand the stage roughly 60
   more pixels, which is what lets the cards below go wider without the fan
   closing up on itself.

   The copy column can afford it. It is a heading and one paragraph against a
   --measure of 68ch it never reaches; at 0.72fr it still sets to around 55
   characters a line, which is inside the comfortable range rather than at the
   top of it. The 128px gap was the most expensive whitespace on the page. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .conditions__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.bk-w.bk-scope.bk-home .conditions__intro { max-width: var(--measure); }

.bk-w.bk-scope.bk-home .conditions__intro .lead {
  margin-top: var(--space-4);
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-home .conditions__intro .link-underline { margin-top: var(--space-5); }

/* ---- The head ----
   Centred, and the bee centres with it. The shared mark rule above sets the
   size and the gap; where a mark sits stays the section's own business, and
   this heading is no longer ranged left. */
.bk-w.bk-scope.bk-home .faq__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.bk-w.bk-scope.bk-home .faq__bee { margin-inline: auto; }

.bk-w.bk-scope.bk-home .faq__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* ---- The questions ----
   Two columns of rounded cards, not a ruled index. The index shape was right
   when the list had half the width and the heading held the other half; with
   the heading above, the same rows would run to 1,200 characters of hairline.

   align-items: start is what makes two columns survive an accordion. Grid
   rows stretch their items by default, so opening one question would drag its
   neighbour's card to the same height and leave it a tall box with one line
   in it. Started, each card keeps its own height and only the opened one
   grows — which also means nothing below it moves sideways.

   Row-wise flow, not column-count. Balanced columns re-flow when a panel
   opens, and a question you did not touch changing column is a worse thing to
   watch than the space left beside the one you did. */
.bk-w.bk-scope.bk-home ul.faq__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home ul.faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One centred column while folded — a short stack of four, set to half the
   container, rather than the four abreast this was briefly.

   Four across put a quarter of the container behind each label, and these are
   uppercase with letter-spacing: the longest ran to five lines, which meant
   levelling every card to five and a folded row taller than the block it
   replaced. At half width every one of the four fits in two lines or fewer,
   so the cards can simply take their own height — which is what the stack in
   the reference does, and why it reads as a list of questions rather than a
   row of panels.

   Folded only. Ten of these in one column is a very long scroll, so the full
   set goes back to the two columns it is written for. Specificity carries it
   without !important — a type, a class and an attribute beats the type and
   class above — so the rule falls away on its own the moment faq.js drops the
   attribute. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home ul.faq__list[data-faq-collapsed] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
}

/* The overlay. Cream at 7% over deep water rather than a solid fill: the
   card has to read as a surface lifted off the band, and any opaque colour
   light enough to do that would be a new value in a palette that has none to
   spare. The hairline does the rest of the work. */
.bk-w.bk-scope.bk-home .faq__item {
  background-color: rgba(250, 246, 238, 0.07);
  border: 1px solid var(--border-hairline-inverse);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .faq__item:hover,
.bk-w.bk-scope.bk-home .faq__item[open] {
  background-color: rgba(250, 246, 238, 0.11);
  border-color: rgba(217, 188, 102, 0.45);
}

/* The row itself. list-style on the summary kills the default disclosure
   triangle in Firefox; ::-webkit-details-marker does the same in Safari. */
/* Two lines' worth of height whether the question needs two or one, so the
   closed cards are all the same height and the rows sit level.

   Deliberately NOT `align-items: stretch` on the grid, which is the obvious
   way to level a row and the wrong one here: stretch makes a row as tall as
   its tallest item, so the moment one question is opened its neighbour is
   dragged to the full height of the answer and becomes a very tall box with
   one line in it. Levelling the closed state on the row itself leaves the
   open state alone.

   Derived rather than typed: two line boxes plus the padding it already has.
   --fs-h6 goes to 18px above 1440 and this follows it without a second rule,
   which a hard-coded 80px would not. */
.bk-w.bk-scope.bk-home .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc((2 * var(--leading-tight) * 1em) + (2 * var(--space-3)));
  padding: var(--space-3) var(--space-4);
  list-style: none;
  color: var(--color-beeswax-cream);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .faq__q::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-home .faq__q:hover,
.bk-w.bk-scope.bk-home .faq__q:focus-visible { color: var(--color-pale-honey); }

/* Pale honey, not honey gold. Gold on deep water measures 4.42:1 and these
   labels are 16px — normal text by WCAG, which needs 4.5. Pale honey gives
   5.77:1 and clears it. */
.bk-w.bk-scope.bk-home .faq__item[open] > .faq__q { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-home .faq__q:focus-visible {
  outline: 2px solid var(--color-beeswax-cream);
  outline-offset: -2px;
}

/* A plus that loses its upright stroke when the row opens. Drawn in CSS so
   there is no icon to load and no second state to keep in sync. */
.bk-w.bk-scope.bk-home .faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.bk-w.bk-scope.bk-home .faq__mark::before,
.bk-w.bk-scope.bk-home .faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .faq__mark::after { transform: translateY(-50%) rotate(90deg); }

.bk-w.bk-scope.bk-home .faq__item[open] .faq__mark::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}

/* Indented to the question's left edge and stopping short of its right, so
   the answer reads as belonging to the question rather than as a second
   block that happens to sit under it. */
.bk-w.bk-scope.bk-home .faq__answer {
  padding: 0 var(--space-4) var(--space-4);
}

.bk-w.bk-scope.bk-home .faq__answer p {
  max-width: 56ch;
  margin: 0;
  color: var(--color-beeswax-cream);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

/* ---- The fold ----
   Ten questions two abreast is five rows of closed cards, which is a wall to
   scroll past before the page gets to the point. Four lead — conditions,
   programme, aftercare, cost, the four people actually arrive asking — and
   the remaining six fold away behind the control below.

   The collapse is applied by script, not by default. With the stylesheet
   alone every question is in the flow and readable, which is the safe way to
   be wrong: a reader without JavaScript sees more than intended rather than
   six answers they cannot reach. faq.js sets the attribute and unhides the
   button in the same breath, so the two are never out of step. */
.bk-w.bk-scope.bk-home .faq__list[data-faq-collapsed] > [data-faq-extra] { display: none; }

/* Staggered on the way in so the six arrive as a set rather than a slab.
   Capped at the sixth: the delay is there to give the eye something to
   follow, and past a beat or two it is just latency. */
.bk-w.bk-scope.bk-home .faq__list:not([data-faq-collapsed]) > [data-faq-extra] {
  animation: faq-open var(--dur-calm) var(--ease-calm) both;
}

.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(5) { animation-delay: 0ms; }
.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(6) { animation-delay: 40ms; }
.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(7) { animation-delay: 80ms; }
.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(8) { animation-delay: 120ms; }
.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(9) { animation-delay: 160ms; }
.bk-w.bk-scope.bk-home .faq__list > [data-faq-extra]:nth-child(10) { animation-delay: 200ms; }

/* A button wearing a link's clothes, so it needs the chrome taken off it —
   .link-underline was written for an <a> and resets none of this. */
.bk-w.bk-scope.bk-home .faq__all {
  display: inline-flex;
  margin-top: var(--space-6);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.bk-w.bk-scope.bk-home .faq__all[hidden] { display: none; }

/* One label at a time, chosen by the state the button reports. */
.bk-w.bk-scope.bk-home .faq__all-less { display: none; }
.bk-w.bk-scope.bk-home .faq__all[aria-expanded="true"] .faq__all-more { display: none; }
.bk-w.bk-scope.bk-home .faq__all[aria-expanded="true"] .faq__all-less { display: inline; }

/* Centred under the pair of columns, which is where the head is too. */
.bk-w.bk-scope.bk-home .faq .container { text-align: center; }
.bk-w.bk-scope.bk-home .faq__list,
.bk-w.bk-scope.bk-home .faq__q,
.bk-w.bk-scope.bk-home .faq__answer { text-align: left; }

/* A <details> element snaps open: the panel is in the layout or it is not,
   and there is no in-between state to animate. This fades the arrival so it
   is not a bare jump. */
.bk-w.bk-scope.bk-home .faq__item[open] .faq__answer {
  animation: faq-open var(--dur-calm) var(--ease-calm) both;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Where the browser supports it, the panel's height is animated as well, so
   the card glides open instead of jumping. interpolate-size is what makes
   `height: auto` an animatable value; content-visibility has to be in the
   list with allow-discrete or the content vanishes on the first frame of the
   close. The keyframe fade is dropped here — the transition covers it, and
   running both double-fades the copy. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .bk-w.bk-scope.bk-home .faq__item::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height var(--dur-slow) var(--ease-calm),
                opacity var(--dur-slow) var(--ease-calm),
                content-visibility var(--dur-slow) allow-discrete;
  }

  .bk-w.bk-scope.bk-home .faq__item[open]::details-content {
    height: auto;
    opacity: 1;
  }

  .bk-w.bk-scope.bk-home .faq__item[open] .faq__answer { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .faq__q,
  .bk-w.bk-scope.bk-home .faq__item,
  .bk-w.bk-scope.bk-home .faq__mark::before,
  .bk-w.bk-scope.bk-home .faq__mark::after { transition: none; }
  .bk-w.bk-scope.bk-home .faq__item[open] .faq__answer { animation: none; }
  .bk-w.bk-scope.bk-home .faq__item::details-content { transition: none; }
}



/* =========================================================================
   02a — The conditions arc

   The conditions drifting right to left along a shallow arc, the middle one
   upright and in front. Two states, and the base one is the static grid:
   with no JavaScript the cards are a plain responsive grid, every summary
   readable and every link reachable. The script adds `is-live` to the stage
   and only then does any of the positioning below apply.

   Every frame the script writes six custom properties per card — --d and the
   five values derived from it. The transform itself stays here, in CSS,
   because it is a visual decision, not a behavioural one: the script says
   where a card is on the arc, this file says what being there looks like.
   ========================================================================= */

/* ---- Static base: no script, or reduced motion ---- */
.bk-w.bk-scope.bk-home .conditions__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card itself. Cream on the deep water band, which is the same inversion
   the section already runs — cards read as objects set on the ground rather
   than as panels cut out of it.
   No photography: there is none for the conditions, and the brief bans
   both inventing assets and the stock imagery this subject attracts. The
   client's own petal pattern carries the face instead, at the weight it was
   drawn for — texture, not decoration. */
.bk-w.bk-scope.bk-home .condition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Deeper at the head than at the foot, so the type starts further down the
     face instead of sitting up against the top edge.

     Padding and not `margin-top: auto` on the rule, which would have been the
     cheaper trick: an auto margin splits the card's slack and every card has a
     different amount of it, so the gold rule would land at a different height
     on each one. Three of these are on screen at once and read as a set — the
     rules and the headings lining up across them is most of what makes them
     look like a set. A fixed inset moves all fifteen by the same amount and
     keeps that alignment. */
  padding: var(--space-7) var(--space-5) var(--space-5);
  background-color: var(--color-beeswax-cream);
  background-image: url("../../images/graphics/pattern3-beige.png");
  /* The tile is 600px of artwork. At anything near that the motif reads as a
     pattern the card is wearing; at 180 it goes back to being the texture it
     was drawn as, which is all a card face wants behind type. */
  background-size: 180px;
  background-repeat: repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-media);
}

/* The gold hairline is the card's only gold besides the arrow ring on hover:
   a stack of these on screen at once is exactly the sort of thing the 4%
   budget exists to stop, so it is one rule 40px wide, not a border.
   flex-shrink: 0 is load-bearing. A 2px flex item in a column that runs long
   is the first thing the browser takes back, and it goes to nothing before
   any of the copy gives up a pixel — so the rule vanished from exactly the
   cards whose summary ran longest, and only those. */
.bk-w.bk-scope.bk-home .condition-card::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 2px;
  margin-bottom: var(--space-4);
  background-color: var(--color-honey-gold);
}

/* Scoped to .conditions, like the arrow below and for the same reason:
   global.css sets `.section--inverse h3 { color: cream }`, which out-specifies
   a lone class — and this heading sits on a cream card. */
.bk-w.bk-scope.bk-home .conditions .condition-card__name {
  margin: 0 0 var(--space-3);
  color: var(--color-deep-water);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
}

/* A step up from --fs-small, and expressed as a step rather than as the next
   token along because the scale does not step evenly here. --fs-small is 14px
   until 1441 and 16 above it; --fs-body is 16 until 1024 and 18 above that.
   Moving the summary from one to the other would be a 29% jump on a laptop and
   a 12% one on a large screen — the same declaration reading as two different
   decisions depending on the window.

   1.125 is one notch of the scale's own ratio applied evenly, so the summary
   gains the same amount at every width: 15.75px at 1280, 18px at 1920. Small
   copy in a card that is mostly copy was sitting a size below where it wanted
   to be. */
.bk-w.bk-scope.bk-home .condition-card__summary {
  max-width: 34ch;
  margin: 0 0 var(--space-4);
  color: var(--color-deep-water);
  font-size: calc(var(--fs-small) * 1.125);
  line-height: var(--leading-body);
}

/* The same white disc the accordion's arrow used, and for the same reason.
   It sits last in the flow with `margin-top: auto` so every card agrees on
   where the affordance is however long the summary runs.
   ::after stretches it over the whole card — the card is the target, the disc
   is only what says so.
   Scoped to .conditions: `.section--inverse a { color: pale honey }` beats a
   lone class, and pale honey on the white disc is 1.9:1. */
.bk-w.bk-scope.bk-home .conditions .condition-card__link {
  display: inline-flex;
  /* Never shrunk and never squashed: `flex: 0 0 auto` alone still let the
     disc lose height when the column ran long, because a 44px minimum is
     only a minimum if something says so. It is also the touch target. */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin-top: auto;
  background-color: var(--color-white);
  border-radius: 50%;
  color: var(--color-deep-water);
  transition: transform var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm),
              box-shadow var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .condition-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.bk-w.bk-scope.bk-home .condition-card__link:hover {
  transform: translateX(4px);
  background-color: var(--color-beeswax-cream);
  box-shadow: 0 0 0 3px var(--color-honey-gold);
}

.bk-w.bk-scope.bk-home .condition-card__link:focus-visible {
  outline: 2px solid var(--color-beeswax-cream);
  outline-offset: 2px;
}

/* ---- Live: the arc ----
   The stage clips, so a card completes its shrink and tilt behind the edge
   rather than vanishing at a hard line. Height is fixed because the cards are
   out of flow once absolutely positioned and would otherwise collapse it. */
/* Both heights come from the script, which measures the tallest card at its
   live width rather than trusting a number typed here. Summaries of different
   lengths in a fixed box is how the gold rule and the arrow got squeezed out
   of the long ones; the box now fits the longest of them.
   The fallbacks are only for the frame before the first measurement. */
.bk-w.bk-scope.bk-home .conditions__stage.is-live {
  position: relative;
  /* The cards are stacked against each other with z-index up to 1000, which
     is a number that only means anything inside this stage. Without a
     stacking context of its own those values compete with the whole page —
     and the header sits at 100, so every card in the fan painted over the
     navigation as the section scrolled past it. isolate scopes them: the
     cards still order among themselves, and the stage as a whole takes its
     place in the page at one level, under the header where it belongs. */
  isolation: isolate;
  height: var(--stage-h, 440px);
  overflow: hidden;
  /* Pulled out into the column gap so the fan has room to sit whole. The
     script reads the width this produces and spreads the cards to fit it. */
  margin-inline: calc(-1 * var(--space-4));
}

.bk-w.bk-scope.bk-home .conditions__stage.is-live .conditions__cards {
  display: block;
  height: 100%;
  gap: 0;
}

/* --d is the card's signed distance from centre, in card slots: 0 dead
   centre, +1 one place to the right, -1 one place to the left. Everything
   below is a function of it, which is what keeps the movement one motion
   rather than five that happen to be synchronised.

   Transform order matters. translate(-50%, -50%) centres the card on the
   stage first; the arc offsets are applied in that frame, unscaled, because
   scale() comes after them; rotate() last so the tilt is about the card's own
   centre rather than the stage's. */
.bk-w.bk-scope.bk-home .conditions__stage.is-live .condition-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* The width is a custom property because the floor below is derived from it.
     Stating it twice per tier is how the two drift apart. */
  /* Left at 288 while the tiers above it came in, because this is the tier
     with the least room to give: the two-column split starts at 1024 and the
     stage is only about 590px there. Narrowing this one as well pushed the
     card to 264 x 488 — a ratio of 1.85, which is not a card, it is a column.
     The narrowing was asked for at the sizes where the cards are wide. */
  --card-w: 288px;
  --card-ratio: 1.32;

  width: var(--card-w);

  /* The portrait shape, held as a floor rather than left to the measurement.

     Widening a card sets its longest summary in fewer lines, so the measured
     height falls as the width rises and the stack goes square — which is the
     opposite of what widening was meant to achieve. This pins the proportion
     so the card gets wider AND stays tall.

     A ratio and not a stack of pixel heights, because the number that would
     have to be hand-tuned per tier is not stable: the type scale is fluid, so
     the same card measured 376 tall at 1280 and 499 at 1920. One ratio against
     the tier's own width covers every screen and cannot fall out of step with
     it.

     1.32, which is where this sat before the widening at the laptop sizes the
     shape was originally judged on. On a large screen the old card ran nearer
     1.78, but that was the fluid type overflowing a card too narrow for it
     rather than a proportion anybody chose — matching it at 360 wide would
     mean a 640px card.

     A floor and not a fixed height, because the measurement still has to be
     able to win. If a summary ever needs more room than the shape allows, it
     takes it; cropping the last line of a card is not a trade worth making for
     a proportion. measure() picks this up on its own — it reads offsetHeight
     with --card-h set to auto, and a min-height is already in that number, so
     nothing in the script needs to know this rule exists. */
  min-height: calc(var(--card-w) * var(--card-ratio));
  height: var(--card-h, 344px);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), 0)
    scale(var(--s, 1))
    rotate(calc(var(--r, 0) * 1deg));
  opacity: var(--o, 1);
  z-index: var(--z, 0);
  /* No transition. The drift is written frame by frame from the script, and
     a transition here would fight it — the brief asks for one even rate with
     nothing easing in or out of position. */
  will-change: transform, opacity;
}

/* The veil is what makes the cards to either side read as further back
   rather than merely smaller. Deep water, so they recede into the band's own
   colour instead of greying out. Pointer-events off: only the centre card is
   clickable in practice, and the veil must not be what decides that. */
.bk-w.bk-scope.bk-home .conditions__stage.is-live .condition-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-deep-water);
  border-radius: var(--radius-lg);
  opacity: var(--veil, 0);
  pointer-events: none;
}

/* ---- The controls ----
   The stepping pair, centred under the stage — the same centred pair the
   places rail takes further down the page, so the two rails are operated the
   same way. Hidden until the arc is live: the static grid has nothing to step
   through, since every card is already on screen.

   A sibling selector rather than :has() on the wrapper. The two would pick the
   same row, but a selector that is not understood should fail towards the arc
   being un-steppable rather than towards two dead buttons under a static grid.
   The stage and the row are siblings; use that. */
.bk-w.bk-scope.bk-home .conditions__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.bk-w.bk-scope.bk-home .conditions__stage.is-live ~ .conditions__controls { display: flex; }

/* The same 44px disc the places rail uses below, inverted for this band:
   cream hairline on deep water rather than the other way about. */
.bk-w.bk-scope.bk-home .conditions__step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border-hairline-inverse);
  border-radius: 50%;
  color: var(--color-beeswax-cream);
  cursor: pointer;
  transition: color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .conditions__step:hover {
  background-color: var(--color-honey-gold);
  border-color: var(--color-honey-gold);
  color: var(--color-deep-water);
}

.bk-w.bk-scope.bk-home .conditions__step:focus-visible {
  outline: 2px solid var(--color-beeswax-cream);
  outline-offset: 2px;
}

/* No disabled state and no end stop: the stack wraps, so next from the last
   card is the first card. A pair that never greys out is also a pair that
   never has to explain why. */

/* The play/pause control that used to sit at the left of this row is gone,
   along with its CSS-drawn two-bars/triangle icon. The drift is the resting
   state now and it restores itself a few seconds after the last step, so
   there is no state for a button to report and nothing for a reader to undo. */

/* The stage reaches further into the column gap — 48px each side rather than
   24. That is room the fan uses to sit whole: the script spreads the cards to
   whatever width it is given, so every pixel here comes back as a card that is
   not overlapping its neighbour quite so hard. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .conditions__stage.is-live { margin-inline: calc(-1 * var(--space-6)); }
}

/* 320, up from 288, and the height comes down with it rather than in spite of
   it: the card is sized by its longest summary, so a wider measure sets that
   summary in fewer lines. Mood Disorders ran 376px tall in a 280px card — a
   ratio of 1.34, which is what made these read as narrow — and runs 352 at 320,
   a ratio of 1.10. Wider and shorter at once, for the price of one number.

   320 and not more. The summary is capped at 34ch, which lands around 276px,
   and a 340px card has exactly that much room inside its padding — past there
   the text stops widening, the height stops falling, and the extra width is
   spent on margin the card does not need.

   1200 and not 1024, which is where this used to sit. The two-column split
   starts at 1024 and the stage is only about 590px wide there; a 320px card in
   that leaves each neighbour showing under a third of itself, which is a
   thicker stack of paper rather than a fan. At 288 the same stage shows nearer
   two fifths. The wide card waits for the width that earns it. */
@media (min-width: 1200px) {
  .bk-w.bk-scope.bk-home .conditions__stage.is-live .condition-card { --card-w: 296px; }
}

/* A third step, because the type scale does not hold still. --fs-small is 14px
   at 1280 and 16px at 1600, so a card frozen at 320 is not a constant measure —
   it is 23 characters a line on the laptop and 20 on the large screen, and the
   summary that set in nine lines sets in eleven. The card gets taller as the
   screen gets bigger, which is the narrowness this whole tier exists to fix,
   coming back by another route.

   So the width steps with the type rather than against it. The card is sized
   in px and not in ch because ch here would resolve against the card's own
   inherited font rather than the summary's, which is a different number and a
   quieter bug than simply stating the two widths. */
@media (min-width: 1440px) {
  .bk-w.bk-scope.bk-home .conditions__stage.is-live .condition-card { --card-w: 328px; }
}

/* The arc is a desktop-and-up idea: below 640 there is not enough width for a
   centre card and two neighbours, and a single card drifting on its own is
   just a card that will not hold still. The static grid is the better answer
   at that size, so the script is told not to go live. */
@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .condition-card__link { transition: none; }
  .bk-w.bk-scope.bk-home .condition-card__link:hover { transform: none; }
}

/* =========================================================================
   03 — Our Thailand Rehab Programmes
   ========================================================================= */

/* The card row is shorter than the band of overlaid panels it replaces, so
   the section can sit a step tighter and still breathe. */
/* clip, not hidden: hidden would make this section a scroll container, and
   the sticky stage inside it would then have nothing to stick to. It stays
   declared sticky and silently scrolls with the page instead — which is
   exactly what happened here the first time. clip holds the pattern's bleed
   without creating a scrollport. */
/* No padding of its own: the stage inside is a full screen and does its own
   framing, so a step top and bottom only added dead cream either side of it.
   clip, not hidden: hidden would make this a scroll container and the sticky
   stage would have nothing to stick to. */
.bk-w.bk-scope.bk-home .programmes {
  position: relative;
  padding-block: 0;
  overflow: clip;
}

/* The cream-deep field carries the pattern across the whole section rather
   than one graphic bled off a corner. A ::before, not an <img>, because a
   tiled ground is presentation and an image element would be one more thing
   in the document with nothing to say.

   Tiled at 720px — three times the size the corner graphic ran at, so the
   motif reads as a surface rather than a texture — and at 0.5, which on
   artwork this pale lands well under the 6% the guidelines cap a supporting
   graphic at. It never crosses a paragraph at strength: the copy sits on
   the stage above it.

   0.61, a tenth up on the 0.55 it opened at — the motif was reading as a
   faint tint rather than a surface. */
.bk-w.bk-scope.bk-home .programmes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/graphics/pattern3-tile.png");
  background-repeat: repeat;
  background-size: 720px auto;
  opacity: 0.61;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .bk-w.bk-scope.bk-home .programmes::before { background-size: 480px auto; }
}

/* Centred and stacked — heading, rule, standfirst — the same shape the
   Centre section opens with, so the two read as siblings. It was heading
   left and standfirst right, which is a fine arrangement for a head that
   stands alone at the top of a section but not for one sharing a screen
   with a band: two columns of introduction above one horizontal band gave
   the stage three axes to hold. */
.bk-w.bk-scope.bk-home .programmes__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-5);
  text-align: center;
}

/* Sized by height, since the mark is taller than it is wide and a width-led
   rule would make it enormous. Held modest: it sits above an H2 and a rule,
   and the three together have to leave the stage room for a programme.

   Size and gap now come from the shared section-mark rule further up. What
   remains true here is why that rule caps at 72: this stage is one screen
   divided between the head and a programme band, and the ornament is the
   part of the head that can lose height without losing meaning. */

/* --space-3 above the standfirst, not --space-4. The shared section mark is
   72px where this one used to be 64, and on a 1280x700 laptop the stage had
   14px of slack — so the 8 the mark gained put the band 2px past the screen.
   The 8 comes back off the gap inside the head rather than off the
   photograph: this section's whole point is that the programme is the larger
   half, and the intro is the part that can afford it. */
.bk-w.bk-scope.bk-home .programmes__head .lead {
  max-width: 68ch;
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}

.bk-w.bk-scope.bk-home .programmes__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) 0 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* ---- Programme spreads ----
   One programme to a horizontal band: photograph one side, name and
   description the other, sides alternating. On a wide screen the three do
   not stack — the runway below pins one band to the screen at a time and the
   scroll moves between them.

   Two earlier arrangements are worth naming, because their failure modes are
   what this shape avoids. Full-bleed tiles with the title reversed over the
   foot of each photograph measured 1.43:1 over the shrine frame, and the
   only fix was a wash heavy enough to hide the picture. A tall interleaved
   column ran the images at half the viewport and left two thirds of every
   screen empty. Nothing sits on a photograph here: the type is deep water on
   cream-deep at 8.7:1 throughout.
   ------------------------------------------------------------------------- */

/* `margin: 0 auto`, not `margin: 0`. This carries .container as well, and
   the shorthand was overwriting its `margin-inline: auto` — ul.spreads
   out-specifies .container, so the list kept its 1280px cap but lost the
   centring and sat against the left edge of anything wider. The band inside
   then centred itself on the list rather than on the page. */
.bk-w.bk-scope.bk-home ul.spreads {
  display: grid;
  gap: var(--space-7);
  margin: 0 auto;
  padding-inline: var(--grid-margin);   /* .container supplies the rest */
  list-style: none;
}

.bk-w.bk-scope.bk-home .spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  /* Both columns sized to their content and the pair centred, so the slack
     falls outside the band rather than inside it. Sized as fractions of the
     container so the pair keeps its proportions as the page narrows: at a
     1280 container the frame is 630px and the column beside it 470px. */
  .bk-w.bk-scope.bk-home .spread {
    grid-template-columns: minmax(0, 52%) minmax(0, 32%);
    justify-content: center;
    gap: var(--space-5);
    align-items: center;
  }

  /* Every second band turns over. Explicit placement rather than `order`,
     because order moves the boxes without moving the reading order, and the
     reading order here is right — the photograph belongs to the name that
     follows it. */
  .bk-w.bk-scope.bk-home .spread:nth-child(even) { grid-template-columns: minmax(0, 32%) minmax(0, 52%); }
  .bk-w.bk-scope.bk-home .spread:nth-child(even) .spread__media { grid-column: 2; grid-row: 1; }
  .bk-w.bk-scope.bk-home .spread:nth-child(even) .spread__text  { grid-column: 1; grid-row: 1; }
}

.bk-w.bk-scope.bk-home .spread__media {
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-deep-water);
  box-shadow: var(--shadow-media);
}

.bk-w.bk-scope.bk-home .spread__media picture { display: block; }

/* 4:3. The sources are 3:2 landscape, so this is the gentlest crop that
   still gives the frame some height. */
.bk-w.bk-scope.bk-home .spread__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bk-w.bk-scope.bk-home .spread__text { max-width: 46ch; }

.bk-w.bk-scope.bk-home .spread__title {
  margin: 0;
  font-size: var(--fs-h3);
  text-wrap: balance;
}

.bk-w.bk-scope.bk-home .spread__copy {
  margin: var(--space-4) 0 0;
  line-height: var(--leading-body);
}

.bk-w.bk-scope.bk-home .spread__text .link-underline { margin-top: var(--space-3); }

/* ---- The stage ----
   Gated on [data-programmes-ready], which programmes-stage.js sets only once
   it is running, only above 900px, and only when reduced motion has not been
   asked for. Until then the runway is not a runway and the three bands are
   three blocks in the flow — which is also what a visitor with JavaScript
   off gets. Nothing here may become the only way to reach the copy. */

.bk-w.bk-scope.bk-home .programmes__progress { display: none; }

@media (min-width: 900px) {
  /* The scroll budget. 100svh of it is the screen the stage holds; the rest
     is how far the visitor travels through the three. 300svh gives each band
     about two thirds of a screen of scroll — one unhurried gesture each. */
  .bk-w.bk-scope.bk-home [data-programmes-ready] { height: 300svh; }

  .bk-w.bk-scope.bk-home [data-programmes-ready] .programmes__stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    min-height: 560px;
    overflow: clip;
  }

  /* The three bands share one cell, so the next arrives where the last left
     rather than below it. */
  .bk-w.bk-scope.bk-home [data-programmes-ready] ul.spreads { gap: 0; }

  /* The head and a band now share one screen, so the photograph can no
     longer take whatever height its ratio asks for. Capped in svh and left
     to object-fit: cover, which trims the frame top and bottom rather than
     letting it push the title off the stage. At 900px this costs the frame
     55px of its 469; on a 700px laptop it is what makes the pair fit at
     all.

     54, up from 46. The head gave back 56px above and this spends it, plus
     the slack the stage was already centring away: the band goes 414 → 486
     on a 900px screen while the head drops to 308, so the programme now
     holds about three fifths of the stage instead of half. It is the reason
     anyone is on this screen — it should be the larger half.
     Not higher than 54: the head plus the band plus a hair of breathing
     room has to survive a 700px laptop, and 54svh is where that stops
     being true. */
  .bk-w.bk-scope.bk-home [data-programmes-ready] .spread__media img { max-height: 54svh; }

  .bk-w.bk-scope.bk-home [data-programmes-ready] .spread {
    grid-area: 1 / 1;
    opacity: 0;
    /* visibility, not opacity alone: every band holds a link, and a link
       faded to zero is still in the tab order. Instant, but delayed until
       the fade has finished so it never clips the animation. */
    visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease-calm),
                visibility 0s linear var(--dur-slow);
  }

  .bk-w.bk-scope.bk-home [data-programmes-ready] .spread.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-slow) var(--ease-calm),
                visibility 0s linear 0s;
  }

  /* ---- Position line ----
     A hairline down the right-hand margin with the distance travelled filled
     in. Deep water rather than gold: chrome reporting a position, not an
     accent, and the section already spends its gold on the rules.
     The floor keeps a stub visible at the very top, so the line reads as a
     track with a marker on it rather than appearing from nothing. */
  .bk-w.bk-scope.bk-home [data-programmes-ready] .programmes__progress {
    position: absolute;
    top: 50%;
    /* Outside the container's margin, not on it. The band is centred and
       fills most of the width, so a line on the container line would sit
       within 30px of the copy and read as part of it. */
    right: var(--space-4);
    display: block;
    width: 2px;
    height: 40%;
    transform: translateY(-50%);
    background-color: var(--border-hairline);
  }

  .bk-w.bk-scope.bk-home .programmes__bar {
    display: block;
    width: 100%;
    height: max(6%, calc(var(--programmes-progress, 0) * 100%));
    background-color: var(--color-deep-water);
  }
}

/* =========================================================================
   04 — Our Thailand Rehab Centre

   Was a tab set over one full-bleed photograph, dimmed by a scrim heavy
   enough to carry white type over it. That arrangement cost twice: it showed
   one facility at a time, and the scrim that made the type legible was the
   same thing stopping you seeing the place.

   It is an index now. Cream ground, five frames at full brightness, all
   visible at once, each captioned under its own picture. Nothing to operate
   and nothing dimmed.
   ========================================================================= */

/* Tighter than the standard section rhythm. The live section is 529px with
   a single photograph in it; this one carries five, so the padding gives
   back what the extra pictures take. */
.bk-w.bk-scope.bk-home .centre {
  background-color: var(--bg-page);
  padding-block: var(--space-6);
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .centre { padding-block: var(--space-6); }
}

/* Centred introduction over a scrolling rail, following the reference. */
.bk-w.bk-scope.bk-home .centre__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bk-w.bk-scope.bk-home .centre__intro h2 { margin-top: var(--space-3); }

.bk-w.bk-scope.bk-home .centre__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

.bk-w.bk-scope.bk-home .centre__lede {
  max-width: 72ch;
  margin-top: var(--space-5);
}

.bk-w.bk-scope.bk-home .centre__lede p { margin: 0; }

.bk-w.bk-scope.bk-home .centre__actions { margin-top: var(--space-5); }

/* ---- The five places ----
   A horizontal rail, not a grid, but held to the container and paged three
   at a time rather than bled off the right edge. */
.bk-w.bk-scope.bk-home .places-rail {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}


.bk-w.bk-scope.bk-home ul.places {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* the buttons and the bar are the affordance */
  -ms-overflow-style: none;
  /* Room for the card shadow and the focus ring, which the scroll container
     would otherwise clip. */
  padding-block: 6px;
}

.bk-w.bk-scope.bk-home .places::-webkit-scrollbar { display: none; }

.bk-w.bk-scope.bk-home .places:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Fractional widths, so the view always ends on a whole card: one at a time
   on a phone, two on a tablet, three on a desktop. The subtraction is the
   gaps — n cards carry n-1 of them. */
.bk-w.bk-scope.bk-home .place {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: start;
}

@media (min-width: 640px)  { .bk-w.bk-scope.bk-home .place { width: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 1024px) { .bk-w.bk-scope.bk-home .place { width: calc((100% - 2 * var(--space-4)) / 3); } }

/* One card: the photograph flush to three edges and a white plate carrying
   the name beneath it — the reference's arrangement. White is what the
   guidelines reserve for cards, and this is one.
   overflow: hidden on the card, not the picture, so the radius clips both
   the image and the hover scale in one place. */
.bk-w.bk-scope.bk-home .place__figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.bk-w.bk-scope.bk-home .place__figure picture { display: block; }

/* 10:9 — near square, and the reference's proportion. It is a fifth taller
   than the 4:3 it replaces: at the 384px card a 1280 container gives, the
   picture goes from 288px to 346px.
   3:2 was the original and is wrong here for the same reason only more so:
   a 256px letterbox with a plate under it made the card wider than it was
   tall, which reads as a banner rather than a card. */
.bk-w.bk-scope.bk-home .place__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 9;
  object-fit: cover;
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .place:hover .place__figure img { transform: scale(1.03); }

/* The plate. Grows to fill any height the tallest card in the row takes, so
   a name that wraps does not leave its card short. */
.bk-w.bk-scope.bk-home .place__body {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding: var(--space-4);
}

/* Deep water on white measures 12.6:1. */
.bk-w.bk-scope.bk-home .place__name {
  color: var(--color-deep-water);
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

/* ---- Rail controls ----
   One row under the cards: the two buttons with the position bar between
   them, centred. Off the photographs, so the discs can be a filled deep
   water that reads on the cream at a glance — over the pictures they were
   cream on cream wherever a light frame passed under them. It also gives
   every width the same controls; the old overlay was desktop-only, because
   a disc over a 264px phone card covered a fifth of it. */
.bk-w.bk-scope.bk-home .places-rail__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.bk-w.bk-scope.bk-home .places-rail__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: var(--color-deep-water);
  border: 0;
  border-radius: 50%;
  color: var(--color-beeswax-cream);
  cursor: pointer;
  transition: background-color var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .places-rail__btn:hover:not(:disabled) {
  background-color: var(--color-beekeeper-blue);
}

/* Disabled at the ends rather than hidden. Hidden kept it out of the tab
   order, which was the point, but in a centred row it also moved the bar
   every time you reached an end. Disabled does both jobs: out of the tab
   order, announced as unavailable, and still occupying its space. */
.bk-w.bk-scope.bk-home .places-rail__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Position bar ----
   A hairline with the visible share of the rail filled in. Deep water rather
   than gold: this is chrome reporting a position, not an accent, and the
   section already spends its gold on the rule above. */

@media (prefers-reduced-motion: reduce) {
}

.bk-w.bk-scope.bk-home .places-rail__btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .place__figure img,
  .bk-w.bk-scope.bk-home .place:hover .place__figure img { transition: none; transform: none; }
}

/* =========================================================================
   06 — Why Choose Us

   Tabs, not five stacked blocks. The five claims are alternatives rather
   than a sequence — a reader takes the one that matters to them — so
   showing one at a time is both truer to the content and a fifth of the
   height the current site spends on it.
   ========================================================================= */

/* Page cream, and it is the Pledge band's removal that decides it. That band
   was the dark thing separating Programmes from this section; with it gone,
   cream-deep here would put two cream-deep grounds against each other and
   the seam between Programmes and Why would disappear.

   So the run alternates on its own from Centre down: cream, cream-deep,
   cream, cream-deep, navy — Centre, Programmes, Why, Access, FAQ. Access
   takes the cream-deep this section gives up (see its --alt class), which
   also keeps the two patterned bands, Programmes and Access, on the same
   ground as each other with a plain one between them. */
/* A step tighter than the section rhythm gives it. The five claims are one
   block now rather than a feature plus a tab set, so the section carries a
   third less content than the padding was chosen for — at --space-8 top and
   bottom it read as a short block adrift in a tall band. */
.bk-w.bk-scope.bk-home .why {
  position: relative;
  /* --space-6, and this is the ceiling rather than a preference. The band's
     content is 790px once the padding is taken off, and 790 of that is the
     head, the stamp row and a panel whose height the longest claim's copy
     fixes at 435 — none of which compresses. Against a 900px window that
     leaves 110px to divide between the two ends, so 55 a side is the most
     this section can carry and still open and close inside one screen.
     48 is the step on the scale under that, and it is half again what the
     band had. */
  padding-block: var(--space-6);
  background-color: var(--bg-page);
  overflow: hidden;
}

/* No tiled ground here. This band carried Pattern 3 in black at 0.05 —
   matched to Programmes' beige and Access's blue on luminance rather than on
   the number — and it has been taken out at the client's request. The
   grounds either side are what separate it now.

   Programmes and Access keep theirs, so the family reads as two patterned
   bands with a plain one between them rather than three of a kind. */

/* .why .container stays position: relative — the panels are positioned
   against it, not against the ground that used to be here. */
.bk-w.bk-scope.bk-home .why .container { position: relative; }

/* Wider than the page's 1280 for this section alone. Everything here is a
   set of five side by side and a photograph beside a column of type — both
   want width — and on a 1900px screen the 1280 cap left 300px of empty
   ground either side while the middle carried all of it at once. The head's
   own measures still cap the reading line, so widening the container spreads
   the composition without stretching a paragraph.

   1520, not the full width: past that the tab labels drift too far apart to
   read as one set, and the page needs a margin. */
@media (min-width: 1400px) {
  .bk-w.bk-scope.bk-home .why .container { max-width: 1520px; }
}

/* The same centred arrangement the Centre section uses: eyebrow, heading,
   gold rule, standfirst. Mirrored deliberately rather than re-invented — two
   section openers on one page that are almost but not quite the same read as
   an accident.
   Measures and margins are the Centre's values too, so the two blocks set to
   the same rhythm. */
.bk-w.bk-scope.bk-home .why__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-5);
  text-align: center;
}

.bk-w.bk-scope.bk-home .why__intro h2 { margin-top: 0; }
/* The long line that sat under the heading — "Why choose The Beekeeper House
   for addiction treatment in Thailand" — has been removed at the client's
   request, and .why__intro .eyebrow with it. The head is heading, rule,
   standfirst now: three objects rather than four, and the one that was
   saying the same thing as the H2 is the one that went. */

.bk-w.bk-scope.bk-home .why__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* 72ch, as in the Centre section. The 54ch cap tried earlier is what made
   the centred version feel tall and thin: it broke this standfirst into
   three short lines stacked down the middle of the page. */
.bk-w.bk-scope.bk-home .why__lede {
  max-width: 72ch;
  margin-top: var(--space-4);
}

.bk-w.bk-scope.bk-home .why__lede p {
  margin: 0;
  text-wrap: pretty;
}

/* ---- The lead claim ----
   Standalone above the tabs: it is the answer to the section's own question,
   it names the accrediting bodies, and it runs to two paragraphs where the
   others run to one.

   The photograph leads and the copy sits in the narrower column beside it,
   centred on the image rather than hung from its top edge. Before, the copy
   column was the wider of the two and both were top-aligned, so the block
   read as a caption with a picture attached rather than the other way
   round. */
/* ---- The index and the claim ----
   The section used to run head, then a centred row of stamps, then a
   left/right panel: three blocks down the page, each organised on a
   different axis, with the stamps floating in the middle attached to
   neither of the other two.

   It is one composition now — an index on the left, the claim it opens on
   the right. The stamps stop being ornament stranded between two things and
   become the thing that chooses; the panel stops being a block that appears
   from nowhere and becomes the answer to a visible question. Two columns,
   one axis, and the centred head above them reads as the section's opener
   rather than as a third arrangement.

   Below 1024 there is not room to set the two beside each other, so the
   index sits above the claim in the reading order it already has. */
.bk-w.bk-scope.bk-home .why__reasons {
  position: relative;
  display: grid;
  gap: var(--space-5);
}

/* The index runs across the top rather than down the left. As a 280px rail
   the stamps could never be bigger than a thumbnail — five rows of anything
   taller ran the column past 600px and made the index, not the claim, the
   tallest thing in the section. Across the top each one gets a fifth of the
   full width, which is room for the drawing to actually be seen, and the
   whole index costs one row of height instead of five. */
/* --space-3 between the stamp row and the panel it opens. The panel is the
   part of this section a reader is here for — the claim, the photograph and
   the copy — and at --space-5 the index above it was holding its own patch
   of the page as if it were a second subject. Pulling the panel up under the
   row's rule subordinates the stamps to it: they read as the thing you
   choose with, and the panel as the thing you came to read. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .why__reasons { gap: var(--space-3); }
}

/* ---- The stamps ----
   Five equal tracks, so the set spans the container's whole width and the
   stamps land on the page's own rhythm rather than huddling in the middle.
   The titles that sat under them have been removed at the client's request,
   which makes the artwork the entire index — so it is sized to be looked at,
   and the row is ruled along its foot so the set still reads as attached to
   the panel it opens rather than floating above it.

   Under 1024 the same five wrap in a centred row: five equal tracks on a
   phone would be 60px each. */
.bk-w.bk-scope.bk-home .why__stamps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
}

/* The stamp is the whole target. Unselected ones sit back so the current
   claim's reads as chosen without needing a box around it — the artwork is
   busy enough already. */
.bk-w.bk-scope.bk-home .why__stamp {
  position: relative;
  display: block;
  padding: 0 0 var(--space-3);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* 0.7, not 0.55. Multiplied into the ground the artwork has already lost
     its paper, and at 55% on top of that the four unselected drawings read
     as dusty rather than as set back. The gold underline and the selected
     stamp's full strength carry the state; the others only need to be a
     step quieter, not faded. */
  opacity: 0.7;
  transition: opacity var(--dur-calm) var(--ease-calm);
}

/* The artwork is 251x300, so sizing by height keeps it from setting its own
   width and lets the five sit on a shared baseline whatever their drawings
   do. */
/* multiply, so the scanned paper sinks into the ground it sits on. Each of
   the five was cut out with its own slightly different off-white behind it,
   so on the section's cream they read as five pale rectangles of subtly
   mismatched stock — the untidiest thing in the composition, and not
   something opacity could fix, because fading a rectangle leaves a fainter
   rectangle. Multiplied against the cream the paper drops out and the ink
   stays, which is also what lets the drawings hold up at 55%. */
.bk-w.bk-scope.bk-home .why__stamp-art {
  display: block;
  width: auto;
  height: 64px;
  margin-inline: auto;
  mix-blend-mode: multiply;
}

/* Five across at every width, rather than a wrapping row. Wrapping put two
   and two and then a single stamp stranded on its own line, which reads as a
   set with something missing. One row of five is the same shape everywhere;
   only the scale changes.

   The set now runs 01 to 05 — the client supplied the 04 that was absent, so
   the row no longer reads 01 02 03 05 06. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-home .why__stamps { gap: var(--space-4); }
  .bk-w.bk-scope.bk-home .why__stamp { padding: 0 var(--space-3) var(--space-4); }
  .bk-w.bk-scope.bk-home .why__stamp-art { height: 96px; }
}

/* Five equal tracks from 1024, and the artwork at 140 — up from 104, and
   from the 112 it ran at before any of this. With the titles gone the
   drawing is all the index has to say, so it gets the height the labels
   were using. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .why__stamps { gap: var(--space-5); }
  /* --space-4 under the artwork, down from --space-5: the same reasoning as
     the gap below the row. Less air inside the index, so it reads as one
     compact band rather than five roomy panels. */
  .bk-w.bk-scope.bk-home .why__stamp { padding: 0 var(--space-3) var(--space-4); }
  /* 122, down from 140 — an eighth off. Large enough that the drawings can
     still be read as drawings, which was the point of taking them up from
     104, but no longer large enough to compete with the photograph below
     for first look. */
  .bk-w.bk-scope.bk-home .why__stamp-art { height: 122px; }
}

.bk-w.bk-scope.bk-home .why__stamp:hover { opacity: 0.9; }

/* Underlined in gold on the row's own rule, rather than outlined. A ring
   around a perforated edge reads as a second border on the artwork, and the
   underline is what tells you the set is a control at all now that there are
   no titles to say so.

   Sized to the stamp, not to the cell. As an inset shadow the mark ran the
   full 247px track under a stamp 102px wide — two and a half times the width
   of the thing it was pointing at, which read as a highlighted column rather
   than as a marked stamp. 112 is one uniform width for all five: a shade
   wider than the artwork, so it frames rather than underscores, and the same
   on every tab whatever its drawing does. */
.bk-w.bk-scope.bk-home .why__stamp[aria-selected="true"] { opacity: 1; }

.bk-w.bk-scope.bk-home .why__stamp[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;      /* covers the row's own hairline along this stretch */
  width: min(100%, 112px);
  height: 3px;
  transform: translateX(-50%);
  background-color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-home .why__stamp:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .why__stamp { transition: none; }
}

/* ---- Panels ----
   The layout the accreditation block had before it became one of the five:
   photograph on the left, copy in the narrower column beside it, centred on
   the image rather than hung from its top edge. The copy still comes first
   in the document, which is the order that matters to a screen reader.
   position: relative so both stay over the .bee-flourish watermark. */
.bk-w.bk-scope.bk-home .why__panels {
  position: relative;
  display: grid;
}

.bk-w.bk-scope.bk-home .why__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-calm) var(--ease-calm),
              visibility 0s linear var(--dur-calm);
}

.bk-w.bk-scope.bk-home .why__panel.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-calm) var(--ease-calm),
              visibility 0s linear 0s;
}

/* The copy column, not the photograph, is what sets this panel's height —
   it runs 529px against the figure's 475. So the width goes to the copy:
   a 1.05 ratio and a narrower gutter give the text about 100px more measure,
   which is a line off the heading and two off the body. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home .why__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* --space-6, down from --space-7. The panel gave up 328px to the index
       beside it, and the gutter is the cheapest place to find some of that
       back — 16px of it goes straight into the copy's measure. */
    gap: var(--space-5);
    /* stretch, not center. The copy runs 494px and the 4:3 frame only 323,
       so centring the photograph left 85px of empty cream above it and 85
       below — a hole in the middle of the composition, in the one place the
       eye lands first. Filling the row makes the panel a clean rectangle and
       gives the photograph the presence it should have had; object-fit
       crops it rather than distorting it. */
    align-items: stretch;
  }

  .bk-w.bk-scope.bk-home .why__figure { grid-column: 1; grid-row: 1; }
  .bk-w.bk-scope.bk-home .why__copy   { grid-column: 2; grid-row: 1; }

  /* The frame takes the row's height instead of setting its own from a
     ratio. All five panels share one grid cell, so that height is the
     tallest panel's and every photograph is cropped identically — choosing
     a stamp never changes the shape of the picture. */
  .bk-w.bk-scope.bk-home .why__figure { height: 100%; }

  .bk-w.bk-scope.bk-home .why__figure img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* Centred, with the frame hung from the top — which gives a shared top edge
     anyway on the claim that matters. All five panels share a cell sized by
     the tallest of them, and the tallest is the accreditation copy, so on the
     panel that opens by default the copy fills the cell and its heading lands
     level with the photograph's top edge.

     Top-aligning the copy outright was worse: on the four shorter claims it
     drove all the slack into one corner and left a 210px hole under the text.
     Centred, that same slack splits above and below and reads as margin. */
  .bk-w.bk-scope.bk-home .why__copy { align-self: center; }
}

/* Once the index is out of the way and the panel has the container's whole
   width, the photograph takes the larger share. 1.4 to 1 rather than 1.05:
   the copy is capped at 68 characters whatever column it is given, so an
   even split just parked the surplus as empty ground beside the paragraph.
   Spending it on the frame is what turns the picture horizontal — it is the
   copy's height that sets the frame's, so a wider column at the same height
   is a wider ratio. */
/* height: 100% against an indefinite row resolves to auto, so the frame was
   quietly falling back to the file's own 3:2 and setting the panel's height
   from it — 616px, against copy that only ran 435. It was the picture
   deciding how tall the section was, which is why the section ran 243px past
   the window. Capped in svh instead: the frame takes the copy's height or
   the window's share of it, whichever is smaller, so it can never be the
   thing that overflows. The ratio falls out of that, around 1.9:1 on a wide
   screen. Applied from 900 rather than 1200 — the fallback is there at every
   width the panel has two columns, whether or not it is binding today. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home .why__figure {
    align-self: start;
    max-height: 46svh;
  }
}

@media (min-width: 1200px) {
  .bk-w.bk-scope.bk-home .why__panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.bk-w.bk-scope.bk-home .why__panel:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 8px;
}

.bk-w.bk-scope.bk-home .why__figure {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-media);
}

/* The 4:3 here is a floor, not what these frames end up at — the panel is a
   grid row and the copy beside it sets the height, so in practice the figure
   comes out nearer 1.8 and `cover` takes the difference off the top and bottom
   of the photograph.

   Which is why these need a focal point, the same way the team portraits do.
   At the default 50% the crop is symmetrical, and a subject who is not in the
   middle of their own frame loses whichever end they are nearer: the clinical
   photograph has the nurse standing at the very foot of the shot with her
   hands raised in a wai, and a centred crop cut both away. --focus lets each
   picture say where its subject actually is. */
.bk-w.bk-scope.bk-home .why__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* Below 900 the panel is one column and the copy had nothing holding it in,
   so the body ran the full width of the container — around 95 characters a
   line. Inert above 900, where the grid column is already narrower than
   this. */
.bk-w.bk-scope.bk-home .why__copy { max-width: 68ch; }

.bk-w.bk-scope.bk-home .why__copy h3 { margin: 0 0 var(--space-5); }

.bk-w.bk-scope.bk-home .why__copy p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

.bk-w.bk-scope.bk-home .why__copy p + p { margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .why__panel { transition: none; }
}

/* =========================================================================
   06a — Our Team
   ========================================================================= */

/* --space-5, down from --space-7. The scale's generous end is what makes this
   page calm and it is not the thing to trim for its own sake — but that 64px
   was sizing a gap between a paragraph and a photograph, and there is a
   button in it now. Measured from the lead, the run to the faces is 32 + the
   button + 48, which is more air than the 64 it replaces and none of it
   empty. */
.bk-w.bk-scope.bk-home .team__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-5);
  text-align: center;
}

/* No margin-top on the heading: the --space-3 that used to sit here was the
   gap under an "Our people" eyebrow, and with the eyebrow gone — it only
   ever restated the "Our Team" heading a line below it — that space became
   a dent in the top of the band. */

.bk-w.bk-scope.bk-home .team__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

.bk-w.bk-scope.bk-home .team__lead {
  max-width: 62ch;
  margin-top: var(--space-5);
}

/* Positioned, so the thumbprint's inset: 0 resolves against this band rather
   than against the page. */
.bk-w.bk-scope.bk-home .team { position: relative; }

/* The thumbprint watermark, hung top-right the way the bee flourish is hung
   in the welcome band. Its own rule rather than a shared component: the bees
   are one specific piece of artwork with a position tuned to the sections
   that carry them, and this is a different graphic on a different ground.

   It is the supporting set's own thumbprint, which matters for a band of
   faces — a fingerprint behind five portraits is the one ornament here that
   means something rather than just filling a corner.

   Thumbprint 3, exported from the supporting graphics at 900px. Not the
   thumbprint1-beige.png already sitting in this folder: that one is a crop
   of the outer ridges with the core cut away, so at watermark weight it
   reads as a set of loose arcs rather than as a print. 3 is the whole oval,
   loop and all, which is the only version that survives being this quiet.

   0.62, against the bees' 0.18, and the two are closer than they look. The
   artwork is #E2DDCC and this band is #F2EBDD, a difference of sixteen
   points where the bees sit on cream with twenty-five to play with. Carrying
   the bees' opacity across would have put about three points of tone on the
   ground, which is nothing at all — a watermark nobody can see is just a
   download. 0.62 lands it near ten: present, and still quiet enough that the
   lead paragraph crosses it without a fight.

   24% and square, where the bees take 34%. This one is square against their
   773 x 550, so the same width would have stood half again as tall. */
.bk-w.bk-scope.bk-home .team__thumbprint {
  position: absolute;
  inset: 0;
  background-image: url("../../images/graphics/thumbprint3-beige.png");
  background-repeat: no-repeat;
  background-position: right 4% top 6%;
  background-size: 24% auto;
  opacity: 0.62;
  pointer-events: none;
}

/* The watermark is a positioned element, so unpositioned siblings would paint
   underneath it — the heading would sit behind its own ornament. Giving the
   three content blocks a position puts them back on top, which is the same
   debt .about and .press pay their own flourishes. It is also what keeps the
   print behind the photographs rather than washed across them. */
.bk-w.bk-scope.bk-home .team__head,
.bk-w.bk-scope.bk-home .team__strip,
.bk-w.bk-scope.bk-home .team__actions { position: relative; }

/* The band keeps its bottom padding now. It was zeroed while the tiles ran
   full-bleed — the section's --space-7 was leaving a strip of cream under
   the last row that read as a stray line against the band below — but the
   strip is inside the container and rounded at its corners these days, so
   there is a margin down both sides already and a matching one underneath is
   what the shape asks for. The button lives in that space. */

/* The strip runs wider than the text column it sits under, and it has to.

   Type and container do not scale together on this page. Past 1441 the
   tokens step up — caption 12 to 14, h5 18 to 20, small 14 to 16 — while
   --container-max stays at 1280 whatever the screen. So the names and titles
   grew by a sixth and the tile they sit in grew by nothing, and on a wide
   monitor the text was eating the photograph. That is not a wrapping problem
   to be padded away, it is the frame failing to keep up with its contents.

   1600 rather than 1280, which at --grid-margin leaves 1536 of picture and
   307px tiles against the 243 they started at. That is comfortably past what
   the type step alone asked for — 307/243 is 1.26 where 14/12 is 1.17 — and
   deliberately so: the tiles are the content here and the titles read as an
   annotation on a photograph rather than a caption competing with one.

   No media query. Below 1280 .container is already narrower than this and a
   max-width it never reaches changes nothing; the strip only starts pulling
   away from the column at the point the column stops growing. Breaking the
   band of faces out past the measure is a normal editorial move and the
   heading above it stays centred on the narrower column either way. */
.bk-w.bk-scope.bk-home .team__strip { max-width: 1600px; }

/* Separate frames, not one surface. The tiles used to butt together with no
   gutter and the strip carried a single radius over the lot, which read as one
   photograph cut into pieces — six faces sharing an edge, and no way to tell
   where one person's tile stopped and the next began. They are framed pictures
   hung in a row now: each takes its own radius, its own hairline and its own
   ground, and the gutter between them is what does the separating.

   The radius moves with it. On the strip it existed to round the block's four
   outer corners without any tile knowing it was on the end; with a gutter
   there is no block to round, so every tile rounds its own four and the rule
   gets simpler rather than more complicated. */
.bk-w.bk-scope.bk-home .team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Six people divide evenly by two and by three, so every tier below is a whole
   number of full rows and no row ever ends on a gap. That is why the spans and
   the per-row aspect ratios this replaces are gone: they existed to close the
   wrapped row that five tiles always left open, and six does not leave one. */
@media (min-width: 600px) { .bk-w.bk-scope.bk-home .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bk-w.bk-scope.bk-home .team__grid { grid-template-columns: repeat(3, 1fr); } }

/* All six abreast, and not before. The constraint is not the photograph, it is
   Carin's title — "Counselling Psychologist, Programme Development and
   Quality" is fifty-eight characters of uppercase, and it sets the floor for
   the whole row.

   1560, where the five-across row this replaces managed 1200. Six columns of
   the 1496px strip are about 232px each once the gutters are taken out, which
   is more than the 227 the five-across tier gave — the strip is wider than the
   container the old rule measured against, and that is where the room comes
   from. Below this the block is two rows of three, which is a better answer
   than six tiles too narrow to carry a title. */
@media (min-width: 1560px) {
  .bk-w.bk-scope.bk-home .team__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Centred between the lead and the faces, at --space-6 under it — far enough
   off the strip that it reads as part of the opening rather than as a label
   stuck to the first photograph. */
.bk-w.bk-scope.bk-home .team__actions {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

/* 4:5 while the tiles are wide. Two of these photographs are only 613 and
   683 pixels tall, and a taller frame at three-across would have asked them
   to cover 800 — upscaling a face, which is the one thing on a page nobody
   forgives.

   The frame itself is a hairline and a radius, which is all it needs to be.
   The tiles sit on --bg-alt and the photographs run to their own edges, so
   what separates one from the next is the gutter; the hairline is only there
   to stop a pale photograph — Tum's, against blown-out foliage — from
   bleeding into that ground and losing its corner. Deliberately not a shadow:
   six lifted cards in a row is a lot of weight for a band that is meant to
   read as calm, and the page spends its shadow budget on the media frames. */
.bk-w.bk-scope.bk-home .team__member {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);

  /* A local motion scale, slower than the page's own. --dur-calm is 320ms and
     --dur-slow 460, which are the right numbers for a button or a panel — a
     thing that acknowledges a click and gets out of the way. This is not that.
     Four properties move at once here across a large photograph, and at button
     speed the whole tile changes character faster than the eye can follow it,
     which reads as a flinch rather than as a reveal.

     Two values, because the photograph should still lag the type slightly: the
     copy is what the reader came for and the picture settles behind it. That
     relationship was already in the old pair (460 against 320) and this keeps
     it at the new pace. */
  --team-dur: 560ms;
  --team-dur-photo: 720ms;
}

/* Six across makes each tile narrow, and 4:5 on a narrow tile is nearly a
   square — which reads as a thumbnail rather than a portrait. 2:3 restores
   the proportion the reference has, and it is affordable here precisely
   because the tile is narrow: at 232 wide the frame is 348 tall, which the
   shortest source still covers without being enlarged. */
@media (min-width: 1560px) { .bk-w.bk-scope.bk-home .team__member { aspect-ratio: 2 / 3; } }

.bk-w.bk-scope.bk-home .team__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-person, set inline: every one of these is framed differently —
     Robert sits left of centre, Paritat slightly right — and a single
     object-position would have cropped somebody's head. */
  object-position: var(--focus, 50% 30%);
  /* filter belongs in this list and was missing from it. The hover state
     drains the colour out of the photograph, and with only `transform` named
     here that change had no duration at all — the picture snapped to
     monochrome in a single frame while the wash over it faded in over 320ms.
     Two halves of one effect running at different speeds is most of what made
     this feel abrupt, and no amount of lengthening the other durations would
     have fixed it. */
  transition: transform var(--team-dur-photo) var(--ease-calm),
              filter var(--team-dur-photo) var(--ease-calm);
}

/* The gradient. Always present and always carrying the name; it deepens and
   rises to make room for the biography. Deep water rather than plain black,
   because the palette has a dark and it is not black.

   Two layers in one element, which is why this is background-image and
   background-color rather than the `background` shorthand it used to be. The
   image is the gradient and it never changes; the colour is a flat wash over
   the whole tile, transparent at rest and brought up on hover. A colour paints
   behind an image, so the wash fills the top of the frame — where the gradient
   has nothing — and the two compose at the bottom into near-solid deep water
   under the name.

   Not a second element, because there is nowhere to put one: ::before would
   paint under the photograph and ::after would paint over the text, and the
   text has to stay on top of whatever is doing the darkening. */
.bk-w.bk-scope.bk-home .team__shade {
  position: absolute;
  inset: 0;
  background-color: rgba(34, 64, 94, 0);
  background-image: linear-gradient(
    to top,
    rgba(34, 64, 94, 0.92) 0%,
    rgba(34, 64, 94, 0.72) 18%,
    rgba(34, 64, 94, 0.18) 42%,
    rgba(34, 64, 94, 0) 62%
  );
  transition: opacity var(--team-dur) var(--ease-calm),
              background-color var(--team-dur) var(--ease-calm);
}

/* Anchored at the bottom, but given a floor so the block is the same height
   in every tile. Without it the box is only as tall as its contents, and
   because the job titles run to one, two or three lines the names ended up
   at three different heights across one row of faces — Carin's title is the
   long one, and hers alone sat a line higher than everybody else's.

   min-height plus a top-aligned column fixes the name instead of the base:
   the block still grows upward from the bottom edge, but the first line
   inside it always starts at the same y. Under a short title that leaves
   empty space at the bottom of the box, which costs nothing — there is
   nothing there but the gradient. */
.bk-w.bk-scope.bk-home .team__text {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 8.5rem;
  padding: var(--space-5);
  color: var(--color-beeswax-cream);
}

/* Tighter padding once the row goes six abreast, and a floor sized to a
   two-line title rather than to the longest one there is.

   1560 and not 1200: this tunes for a narrow tile, and the narrow tile now
   arrives with the six-across row rather than the five-across one. Between
   1200 and 1560 the block is two rows of three and the tiles are near enough
   500px — applying a wrap fix for a 240px tile there would tighten the one
   place that has room to spare.

   The padding is not cosmetic here — it decides the wrap. At --space-5 the
   text column in a 236px tile is 172px, and Carin's title breaks to five
   lines; at --space-4 it is 188px and the same title sets in three. The
   difference between those two is a name floating half a tile up and a name
   sitting where the other five sit.

   7rem, not the 10 this carried before. The floor exists to stop names
   landing at different heights across one row, and a two-line title covers
   five of the six — Carin's three-line one still lifts hers by a line, which
   is the reference behaviour and reads as one person with a long job rather
   than as a row that will not line up.

   Placed after the rule it overrides rather than up with the aspect-ratio,
   for the reason noted on .team__role below: both selectors are a single
   class, a media query adds no specificity, and up there this lost silently
   — which is exactly what it had been doing. */
@media (min-width: 1560px) {
  .bk-w.bk-scope.bk-home .team__text {
    min-height: 7rem;
    padding: var(--space-4);
  }
}

.bk-w.bk-scope.bk-home .team__name {
  color: var(--color-beeswax-cream);
  font-size: var(--fs-h5);
  line-height: var(--leading-tight);
}

/* text-wrap: balance so a title that does wrap wraps evenly rather than
   leaving one orphaned word on the last line — with five of these side by
   side the ragged edges were most of the untidiness. */
.bk-w.bk-scope.bk-home .team__role {
  margin-top: var(--space-2);
  color: var(--color-pale-honey);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

/* The tracking comes off the role once the tiles go six abreast. At 0.08em
   Carin's title runs to a fifth line in a tile this narrow; at 0.05em it holds
   to three. A line of a job title is worth more than the extra letter-spacing,
   and small caps still read as small caps at most of the tracking.

   0.05em rather than the 0.04em an earlier six-across tier took: the tile is
   about 236px here against that tier's 202px, so there is room to give some of
   it back.

   Placed after the rule it overrides rather than up with the other 1560
   declarations: both selectors are a single class, so this is settled by
   source order, and up there it lost silently. */
@media (min-width: 1560px) {
  .bk-w.bk-scope.bk-home .team__role { letter-spacing: 0.05em; }
}

.bk-w.bk-scope.bk-home .team__bio {
  margin-top: var(--space-3);
  color: var(--color-beeswax-cream);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

/* ---------- The reveal ---------- */

/* Only where there is a pointer to hover with. On a touch screen there is no
   hover state to enter and a biography behind one would be unreachable, so
   below this query every biography is simply visible and nothing is gated. */
@media (hover: hover) {
  /* The lift is here to carry the motion, and it is not decoration.
     max-height animates 0 to 16em, but 16em is a ceiling sized for the longest
     biography rather than this one — most of them are nearer 6em, so the text
     has finished appearing about a third of the way through the transition and
     the remaining two thirds animate a clip edge below the last line, where
     nothing is happening. At 320ms that reads as brisk; at 560 it would read
     as a reveal that stops halfway and waits.

     opacity and transform have no such slack: they run 0 to 1 and 6px to 0
     exactly, over the whole duration, whatever the biography's length. So the
     perceived motion comes from those two and max-height is left to do nothing
     but open the box behind them. */
  .bk-w.bk-scope.bk-home .team__bio {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: max-height var(--team-dur) var(--ease-calm),
                opacity var(--team-dur) var(--ease-calm),
                transform var(--team-dur) var(--ease-calm),
                margin-top var(--team-dur) var(--ease-calm);
  }

  /* max-height and not height: the biographies are different lengths and
     none of them knows its own height in advance. 16em clears the longest
     of the five with room, and the overshoot costs nothing because the
     element is clipped. */
  .bk-w.bk-scope.bk-home .team__member:hover .team__bio,
  .bk-w.bk-scope.bk-home .team__member:focus-within .team__bio {
    max-height: 16em;
    margin-top: var(--space-3);
    opacity: 1;
    transform: translateY(0);
  }

  /* The picture eases in behind the deepening gradient. 1.04 and no more —
     this is a photograph of a person, not a hero banner.

     It also goes monochrome, which is the point of the whole hover state. The
     biography arrives as six or seven lines of cream and it lands wherever the
     photograph happens to be brightest — Carin's foliage, Tum's blown-out sky
     — so the name was setting on leaves and the title on a window. Draining
     the colour and dropping the brightness turns the photograph into texture,
     and the wash below turns the tile into one deep-water panel with type on
     it. The face is still legible through it; it is just no longer competing.

     brightness after grayscale, not before: the order is the order the filters
     run, and dimming first then desaturating leaves the bright patches bright
     relative to everything else, which is exactly the clutter being removed. */
  .bk-w.bk-scope.bk-home .team__member:hover .team__photo,
  .bk-w.bk-scope.bk-home .team__member:focus-within .team__photo {
    transform: scale(1.04);
    filter: grayscale(1) brightness(0.66);
  }

  /* Both numbers are set by the worst case rather than by eye, and the case
     that sets them is the role line — pale honey, not cream. Cream is the
     easy one: it clears 4.5:1 against anything this wash can produce. Pale
     honey on --fs-caption is small bold text, which WCAG still scores as
     normal text, so it needs the same 4.5:1 and it is the line that decides
     how dark this has to go.

     Worst case is a blown-out white pixel — Tum's sky, Carin's window. It
     survives the filter above as about 168 grey, and under this wash
     composites to roughly rgb(53, 79, 104): beeswax cream at 7.9:1, pale
     honey at 4.6:1. Every darker pixel in every photograph can only do better,
     so no tile in the row can fail however the light fell on the day.

     0.86 and brightness 0.66, rather than a heavier wash over a brighter
     photograph, because the wash is what flattens the picture and the
     brightness only dims it. Of the pairs that clear 4.6:1 this is among the
     lightest washes, so it is the one that leaves the most of the face. */
  .bk-w.bk-scope.bk-home .team__member:hover .team__shade,
  .bk-w.bk-scope.bk-home .team__member:focus-within .team__shade {
    opacity: 1;
    background-color: rgba(34, 64, 94, 0.86);
  }

  .bk-w.bk-scope.bk-home .team__member:not(:hover):not(:focus-within) .team__shade { opacity: 0.88; }
}

/* The photograph-less sixth tile is gone with the 3 x 2 grid that needed
   something in its last cell. `.btn--hex-ink` in components.css carries the
   way through to the rest of the team now, so there is no bespoke call to
   action here to style. */

/* The biography and the name are content and must survive the setting; only
   the scale and the fades are motion.

   The grayscale stays. Reduced motion is a request about movement, not about
   contrast, and the monochrome wash is what makes the biography readable —
   dropping it here would answer "less movement" with "less legible", which is
   the opposite of what the setting is for. Only the scale and the transitions
   go; the filter arrives at once instead of easing in. */
@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .team__photo,
  .bk-w.bk-scope.bk-home .team__shade,
  .bk-w.bk-scope.bk-home .team__bio { transition: none; }

  .bk-w.bk-scope.bk-home .team__member:hover .team__photo,
  .bk-w.bk-scope.bk-home .team__member:focus-within .team__photo { transform: none; }

  /* The lift goes too, and at rest rather than only on hover. Killing the
     transition alone would leave the biography sitting 6px low and jumping
     into place — a snap, which is the one thing this setting is asking not to
     see. Neutralised at both ends, it simply appears where it belongs. */
  .bk-w.bk-scope.bk-home .team__bio,
  .bk-w.bk-scope.bk-home .team__member:hover .team__bio,
  .bk-w.bk-scope.bk-home .team__member:focus-within .team__bio { transform: none; }
}

/* =========================================================================
   06e — Accessible to international clients
   ========================================================================= */

/* clip, not hidden: nothing sticky lives here, but the habit is worth
   keeping consistent across the page, and the photograph inside overshoots
   its own width while it settles. */
.bk-w.bk-scope.bk-home .access {
  position: relative;
  /* The other half of the band the rings stand in, and down a fifth from
     --space-9 with it. */
  padding-bottom: calc(var(--space-9) * 0.8);
  overflow: clip;
}

/* Pattern 5 from the client's set — the rings — set in the bottom-left
   corner of the band, which is to say exactly on the seam where this cream
   section meets the navy one below it. bottom: 0 is that seam: the mark's
   own baseline and the colour change are the same line, so it reads as
   sitting on the join rather than floating above it.

   It runs off the left edge on purpose. Whole and inset it was a circle
   placed in a corner; cut by the page edge it is a corner mark, which is
   what the brand's other single graphics do. `overflow: clip` on the section
   is what makes the bleed a crop rather than a scrollbar.

   A ::before rather than an <img>: decoration, and an image element would be
   one more thing in the document with nothing to say. */
.bk-w.bk-scope.bk-home .access::before {
  content: "";
  position: absolute;
  /* -140, deeper than the -88 it sat at when the mark was 340. Growing the
     circle pushed its right edge from 302 to 354 and straight into the
     heading column, which starts at x=335 on a 1900px screen. Taking the
     extra width off the left keeps the growth where it shows — the arc is
     taller and the visible span wider — without walking into the type. */
  left: -140px;
  bottom: 0;
  /* 340, and the ceiling is measured rather than picked. The mark rises from
     the seam, and the lowest thing it must stay under is the gold rule that
     closes the Our Location column. That rule sits 382px above the seam once
     the two floors below it are counted, so 340 leaves about 40px of daylight
     — at every width, because the gap is built from padding rather than from
     where the container happens to fall.
     At 400 it did not: the rings cleared the heading at 1900, where the
     centred container starts at x=335, and ran straight through it at 1440,
     where the same container starts at 105. A mark that overlaps the type on
     one screen and not the next is the opposite of arranged. */
  width: 442px;
  height: 442px;
  background-image: url("../../images/graphics/pattern5-blue.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
}

/* Narrow screens stack the two columns, so the thing the mark has to stay
   under is the Contact button rather than the gold rule — and there is only
   about 205px between that button and the seam once the floors came down a
   fifth. A 300px circle standing on the seam would run 107px into the
   button, so here it stands *through* it: bottom: -120px drops the lower
   third below the colour change, where `overflow: clip` takes it off, and
   only the 180px of upper arc shows. The mark stays wide without climbing.
   Cropped by the seam is still on the seam. */
@media (max-width: 899px) {
  .bk-w.bk-scope.bk-home .access::before {
    left: -70px;
    bottom: -120px;
    width: 300px;
    height: 300px;
  }
}

/* No tiled ground. The blue Pattern 3 that ran across this whole band has
   been removed at the client's request; Pattern 5 now sits in one corner of
   the Our Location block instead, which is a mark rather than a surface.
   Programmes keeps its beige tile, so the page still has one patterned band
   and the rest plain.

   The comment that stood here recorded how the 0.07 was arrived at, and it
   is worth keeping the finding even though the rule is gone: blue on this
   cream drops the section's luminance as far at 0.07 as the beige tile does
   at 0.55. Matching the two inks by number rather than by measured weight
   would have made this band a wall. */

/* ---- The opening photograph ----
   Wider than the container the copy below it runs in, the way the film in
   the About section is: the picture is what opens the band and the type
   follows under it.

   Two caps, and the vw one is the load-bearing half — the same lesson the
   film taught. The settle arrives at 1.22, so any resting width above about
   0.82vw peaks wider than the window and runs off both edges on the way in.
   `overflow: clip` on the section would hide that, which is worse than a
   scrollbar: it reads as a photograph mysteriously bigger than the screen.
   80vw leaves the overshoot its margin.

   The same cap as the film: min(1440px, 80vw). The two are the page's only
   elements allowed past the 1280 container, and they should break it by the
   same amount — at 1200 this one read as a smaller relative of the film
   rather than its counterpart at the other end of the page. */
.bk-w.bk-scope.bk-home .access__media {
  position: relative;
  width: 100%;
  /* The gap below is arithmetic, not taste. transform-origin is center top,
     so at 1.22 the frame grows downward by 22% of its height, and the block
     below has to start past where the bottom edge travels to — otherwise it
     sits under the photograph while it settles, with the type painting over
     the picture, because the figure comes first in the document.

     The frame is 2:1, so that overshoot is 11% of its width and it tracks
     the viewport all the way up to the 1440 cap. Hence the clamp rather than
     one number: 12vw covers the overshoot with a few pixels over, 160 is the ceiling (the widest the
     frame ever gets is 1376, which travels 151), and --space-7 is the floor
     so a phone gets a readable gap rather than the 41px its own maths asks
     for. Checked at 375, 768, 1023, 1440 and 1900. */
  margin: 0 auto clamp(var(--space-7), 12vw, 160px);
  padding-inline: var(--grid-margin);
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .access__media { max-width: min(1440px, 80vw); }
}

.bk-w.bk-scope.bk-home .access__media picture { display: block; }

/* 2:1, and the file is cut to 2:1 before it ships, so cover has nothing left
   to trim — the crop was made once, deliberately, against the photograph
   rather than per-viewport by the browser. aspect-ratio and object-fit stay
   as the guard: they hold the frame if the file is ever swapped for one of
   another shape, which is how this slot came to hold a 3:2 picture before. */
.bk-w.bk-scope.bk-home .access__media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-media);
}

/* Centred and stacked, the shape the Centre, Programmes and Why sections all
   open with, so this reads as another band of the same page rather than
   something imported. position: relative to sit over the tiled ground. */
.bk-w.bk-scope.bk-home .access__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* It opens the band now, above the photograph rather than under it, so it
     needs a gap below. Nothing extra for the settle: the frame grows down
     from its top edge, never up. */
  margin-bottom: var(--space-7);
  text-align: center;
}

/* Size and gap come from the shared section-mark rule. This one was the
   outlier at 104 — half again the rocks over Programmes — because it was set
   when this band had no neighbour to answer to. */

.bk-w.bk-scope.bk-home .access__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) 0 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

.bk-w.bk-scope.bk-home .access__head .lead {
  max-width: 78ch;
  margin: var(--space-5) 0 0;
}

/* Subject left, what there is to say about it right — the arrangement the
   reference runs its body bands in.

   Stacked below 900, where two columns would leave the heading one word to
   a line. No margin-top: the photograph's own 160px below it is the gap. */
.bk-w.bk-scope.bk-home .access__location {
  position: relative;
  display: grid;
  gap: var(--space-5);
  /* Part of the clear band the mark stands in. The rings rise from the
     section's bottom edge, and what they must not reach is the gold rule
     that closes the left column — so the distance from that rule down to the
     seam is the whole budget, and this is half of it. Both halves are down a
     fifth from --space-9. */
  padding-bottom: calc(var(--space-9) * 0.8);
  text-align: left;
}

/* Positioned, so both columns paint over the rings in the section's corner
   rather than under them. */
.bk-w.bk-scope.bk-home .access__location-head,
.bk-w.bk-scope.bk-home .access__location-body { position: relative; }

/* 0.8 to 1 with a --space-9 gutter. The heading is three words and the
   paragraph is forty, so an even split would have left the left column mostly
   empty; the wide gutter is what stops the two reading as one flowed block.
   start, not center — the heading and the paragraph begin on the same line,
   which is the only alignment holding the two columns together. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home .access__location {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: start;
  }
}

.bk-w.bk-scope.bk-home .access__location h3 { margin: var(--space-3) 0 0; }

/* Left-aligned now the stack is not centred, and the margin runs from the
   heading rather than from the centre line. */
.bk-w.bk-scope.bk-home .access__location .access__rule { margin: var(--space-4) 0 0; }

/* The column alone gives it 604px, which measures 71 characters — past the
   60-to-70 this body size is comfortable at, and the head above already runs
   long at 78. Capped, so the column can stay the width the composition wants
   without the line following it. */
.bk-w.bk-scope.bk-home .access__location p {
  max-width: 66ch;
  margin: 0;
}

.bk-w.bk-scope.bk-home .access__actions { margin-top: var(--space-6); }

/* The map link, closing the left column under the gold rule. --space-5 and
   not the --space-4 the rule takes above it: the rule is the heading's own
   underline and belongs to it, so the link has to sit further from the rule
   than the rule sits from the heading, or the three read as one stack and the
   rule stops closing anything.

   inline-flex from .link-underline already, so the rule below it is the width
   of the words rather than the width of the column — which is the whole
   reason this shape suits a column that is otherwise empty. */
.bk-w.bk-scope.bk-home .access__map { margin-top: var(--space-5); }

/* =========================================================================
   06d — Testimonials
   ========================================================================= */

/* --bg-alt, so the band separates from the cream press band above it and from
   the near-cream enquiry ground below. Three surfaces in a row that all read
   as one would have lost the seams the page uses instead of rules — and with
   the press band taking the seam under the navy questions, this one is the
   only thing keeping the last three bands apart. */
/* Cream, where this band held --bg-alt. Awards above it is the light band
   now, so the alternation shifted one place along the whole run and the
   reviews took the other half of it. */
.bk-w.bk-scope.bk-home .testimonials {
  position: relative;
  overflow: clip;
}

/* The bee pair from the client's supporting set. Different artwork from the
   flourish over the Welcome section — that one is the wide pair, this is the
   tall pair on the spiral — but given that component's geometry exactly, so
   the two marks sit on the page the same way instead of one being a framed
   box hanging off an edge.

   Those numbers are .bee-flourish's, not new ones: inset: 0 so the mark is
   placed inside the whole band rather than in a fixed rectangle, `right 5%
   top 7%` as .about sets it, and 0.18. The size is 18% and not the Welcome
   section's 34% for the reason the --tall modifier already records: this
   artwork is portrait, 376x760, so the same width would run it half again
   past the bottom of the section it sits in.

   A ::before, not an <img>: it is decoration, and an image element would be
   one more thing in the document with nothing to say. */
.bk-w.bk-scope.bk-home .testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/graphics/bee-element.png");
  background-repeat: no-repeat;
  /* `top -120px`, not the Welcome section's `top 7%`. That percentage is a
     share of the free space between the image and its box, and there is
     barely any here: at 18% this artwork paints 686px tall inside a 769px
     band, so 7% of the 83px left over moved it six pixels. It could not be
     raised while the value was a percentage.

     A negative length instead, which the four-value syntax allows. The mark
     lifts 120px and the section's `overflow: clip` takes the top off — which
     costs only the thin hanging thread above the bees, and puts the bees
     themselves alongside the heading rather than down among the cards. */
  background-position: right 5% top -120px;
  background-size: 18% auto;
  opacity: 0.18;
  pointer-events: none;
}

@media (max-width: 899px) {
  .bk-w.bk-scope.bk-home .testimonials::before {
    background-position: right 5% top -60px;
    background-size: 34% auto;
  }
}

/* Everything sits over the mark — the ::before is positioned, so unpositioned
   siblings would otherwise paint underneath it. */
.bk-w.bk-scope.bk-home .testimonials__head,
.bk-w.bk-scope.bk-home .testimonials__rail { position: relative; }

/* The centred opener the rest of the page uses: eyebrow, heading, gold rule.
   No section mark here — the four cards below are already the section's
   ornament, and a fifth graphic above them would be one thing too many. */
.bk-w.bk-scope.bk-home .testimonials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-6);
  text-align: center;
}

.bk-w.bk-scope.bk-home .testimonials__head h2 { margin-top: var(--space-3); }

.bk-w.bk-scope.bk-home .testimonials__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* ---- The rail ----
   One line, paged by the same two buttons the facilities row uses. Four cards
   stacked two-by-two ran the band to 877px; one line of them costs a single
   card's height, and the reviews that do not fit are a button away rather
   than a scroll away. */
/* Wider than the page's 1280 for this row alone, the way the Why band is.
   The cards are a set read across rather than a column of prose, so the
   measure that governs the rest of the page does not govern them — and on a
   1900px screen the 1280 cap left 300px of empty ground either side of a row
   whose whole job is to look like there is more of it. */
.bk-w.bk-scope.bk-home .testimonials__rail {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

@media (min-width: 1400px) {
  .bk-w.bk-scope.bk-home .testimonials__rail { max-width: 1560px; }
}

/* The card at the right-hand edge dissolves instead of being guillotined.

   A row that stops dead at the edge of its scrollport reads as a row that has
   ended; one that fades reads as a row that continues, and that is the whole
   job here — the two arrows say there is more, but they say it in a corner
   below the cards where nobody is looking. This says it in the place the eye
   already is.

   A mask and not an overlay. An absolutely positioned gradient would have to
   resolve against something, and the only positioned ancestor is the rail,
   which also contains the arrows — so it would have to be sized to the list by
   hand and kept in step with it. A mask belongs to the element's own box, does
   not scroll with the content inside it, and fades to whatever is behind
   rather than to a colour guessed at: the bee graphic runs under this band and
   a cream overlay would have punched a pale rectangle through it.

   --fade goes to zero when there is nothing left to scroll to. reviews.js
   already disables the forward arrow at the end of the track, so :has() reads
   that rather than measuring the scroll a second time. With the script off no
   arrow is ever disabled and the fade simply stays, which is the safe way to
   be wrong: it promises more of a row that can still be dragged. */
.bk-w.bk-scope.bk-home ul.reviews {
  --fade: 96px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 6px 0;                   /* room for the focus ring the scrollport would clip */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* the two buttons are the affordance */
  -ms-overflow-style: none;
  /* stretch, so every card in the row is the same height whatever its
     review runs to. The cost is that opening one lifts the whole line —
     which is the trade "make them the same height" asks for. */
  align-items: stretch;
}

.bk-w.bk-scope.bk-home ul.reviews::-webkit-scrollbar { display: none; }

/* Nothing more to the right, so nothing to promise. */
.bk-w.bk-scope.bk-home .testimonials__rail:has([data-reviews-next]:disabled) ul.reviews { --fade: 0px; }

.bk-w.bk-scope.bk-home .reviews__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* ---- The card ----
   Sized off the container rather than fixed, so a whole number of cards fills
   the row and none is left cut off at the right-hand edge. Three across from
   1024, two from 640, one below that; the arrows are what says there is more,
   not a sliver of a fourth card. */
/* The honey contour, and the first thing that makes these read as cards at
   all. The plate is --color-beeswax-cream and so is the band behind it, the
   same value twice, so until now the only thing separating one review from
   the next was the hairline between the name and the quote — three columns
   of text on an open ground rather than three cards.

   Honey gold, solid rather than tinted. Gold is held to roughly 4% of a
   composition and a 1px rule around three cards is a rounding error against
   that: the whole contour on a 380 x 300 card is about 0.7% of its own area.
   It is also the one colour on the page that says "this is worth reading"
   without saying anything, which is what a testimonial wants. */
.bk-w.bk-scope.bk-home .review {
  flex: 0 0 clamp(280px, 82vw, 380px);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-beeswax-cream);
  border: 1px solid var(--color-honey-gold);
  border-radius: var(--radius-md);
  text-align: left;
}

/* The two halves start on one line and the rule between them runs the height
   of the taller — which is what "on the same level" asks for. stretch, not
   start, or the rule would stop where the shorter column ended. */
.bk-w.bk-scope.bk-home .review__who,
.bk-w.bk-scope.bk-home .review__body { align-self: stretch; }

.bk-w.bk-scope.bk-home .review__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The separator. A border on the body rather than a middle column, so it
   cannot fall out of step with the gap on either side of it. */
.bk-w.bk-scope.bk-home .review__body {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-home .review__mark {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-3);
  color: var(--color-honey-gold);
}

/* Below 560 the card is 308px wide, and holding the two columns there left
   the quotation 101px — about twelve characters a line. So the rule turns
   horizontal: identity above, review below, still separated, still in that
   order. The mark moves alongside the name rather than above it, which keeps
   the header to two lines instead of four. */
@media (max-width: 559px) {
  .bk-w.bk-scope.bk-home .review { grid-template-columns: minmax(0, 1fr); }

  .bk-w.bk-scope.bk-home .review__who {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
  }

  .bk-w.bk-scope.bk-home .review__mark { grid-row: 1 / 3; margin-bottom: 0; }
  .bk-w.bk-scope.bk-home .review__name { grid-column: 2; }
  .bk-w.bk-scope.bk-home .review__when { grid-column: 2; margin-top: 0; }
  .bk-w.bk-scope.bk-home .review__stars { grid-column: 1 / -1; margin-top: var(--space-3); }

  .bk-w.bk-scope.bk-home .review__body {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid var(--border-hairline);
  }
}

.bk-w.bk-scope.bk-home .review__mark svg { display: block; width: 100%; height: 100%; }

.bk-w.bk-scope.bk-home .review__name {
  margin: 0;
  font-weight: 700;
  line-height: var(--leading-tight);
}

.bk-w.bk-scope.bk-home .review__when {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  opacity: 0.7;
}

.bk-w.bk-scope.bk-home .review__stars {
  margin: var(--space-3) 0 0;
  color: var(--color-honey-gold);
  font-size: var(--fs-h6);
  letter-spacing: 0.14em;
}

/* Clamped, not truncated. The whole review is in the document — a crawler and
   a reader with the script off get every word — and the button lifts the
   clamp rather than fetching anything. Nine lines, up from six — half again
   as much of each review before anyone has to ask for the rest, which is
   what the wider card can now carry. */
/* The clamp cuts the text; max-height moves the box. The two have to be
   separate because -webkit-line-clamp is not an animatable property — toggling
   it alone is why this used to snap open — and because dropping the clamp for
   a plain max-height would lose the ellipsis that says the sentence continues.

   reviews.js drives the max-height: it measures the quote and sets the exact
   px target, so the box travels the distance the text actually needs rather
   than racing to an overshoot and arriving early. It also holds the clamp off
   until a collapse has finished, or the text would jump back to nine lines
   while the box was still on its way down.

   overflow stays hidden when open. The script clears max-height once the
   transition ends, so there is nothing left to clip. */
.bk-w.bk-scope.bk-home .review__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
  margin: 0;
  transition: max-height var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .review.is-open .review__quote { -webkit-line-clamp: none; }

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .review__quote { transition: none; }
}
.bk-w.bk-scope.bk-home .review__quote p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.bk-w.bk-scope.bk-home .review__quote p + p { margin-top: var(--space-3); }

/* The quietest control the system has, which is right for a disclosure that
   only ever adds more of what is already on screen. */
.bk-w.bk-scope.bk-home .review__toggle {
  display: inline-flex;
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-beekeeper-blue);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 471, and the number is built rather than chosen. The identity column is
   fixed at 118 and stays there — it is the part that was already right — so
   every pixel added to the card goes to the quotation: 64 of padding + 118 of
   identity + 24 of gutter + 265 of text. 265 against the 183 it had is +45%,
   which is the width asked for, and at nine lines that is 45% more review on
   screen before anyone has to click.

   Two and a half cards fit the 1216 container at that width rather than a
   clean three. The half is not an accident to fix: a card cut by the right
   edge is the plainest thing a rail can do to say the row continues. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-home .review { flex-basis: min(540px, calc((100% - var(--space-4)) / 2)); }
}

/* 540, up from 471. Built the same way and for the same reason: the identity
   column is fixed at 118 and stays there, so the 69 goes entirely to the
   quotation — 64 padding + 118 identity + 24 gutter + 334 text, against the
   265 it had.

   Width only. The clamp is nine lines whatever the card measures, so a wider
   card holds more words per line rather than more lines — the row's height
   does not move. */
@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .review { flex-basis: 540px; }
}

/* ---- Two centred, the rest held to the right ----
   Three-and-a-bit cards spanning the full container gave the row no centre:
   the eye had nowhere to land, and the fourth card cut by the edge read as a
   layout that had run out of room rather than a set that continues. Two cards
   centred on the screen is a composition — a pair, with the remainder pushed
   off to the right and dissolved rather than cropped.

   Full-bleed, so the ones behind fade out against the open band instead of
   against the edge of a 1560px well. The rail's own max-width and margin are
   what centred the row before; the centring is the track's padding now.

   1280 and not 1024. The pair is 1104 wide and needs room beyond it for the
   peek to be worth having; below this the two cards alone fill the screen and
   the existing full-width row is the better answer. */
@media (min-width: 1280px) {
  .bk-w.bk-scope.bk-home .testimonials {
    /* Two cards and the gutter between them. The one measurement the padding,
       the snap and the mask are all derived from, so they cannot drift. */
    --pair-w: calc(2 * 540px + var(--space-4));
    --peek-fade: 200px;
  }

  .bk-w.bk-scope.bk-home .testimonials__rail {
    max-width: none;
    padding-inline: 0;
  }

  .bk-w.bk-scope.bk-home ul.reviews {
    /* Symmetric, so the last pair lands centred at the end of the scroll the
       same way the first pair does at the start — and the step between them
       stays a whole card, which is what reviews.js pages by. */
    padding-inline: calc(50% - var(--pair-w) / 2);

    /* The snapport, moved to the pair rather than the scrollport. Cards snap
       to `start`, and start means the start of the snapport — without this it
       is the padding edge, and snapping would yank the first card out of the
       centred pair and pin it to the far left of the screen. */
    scroll-padding-inline: calc(50% - var(--pair-w) / 2);

    /* Opaque across the pair, fading over a fixed distance either side of it.
       Fixed rather than running to the screen edge: tied to the edge, the fade
       stretches with the monitor and a 2560 screen ghosts the third card into
       nothing. 200px reads the same at every width. */
    -webkit-mask-image: linear-gradient(to right,
      transparent calc(50% - var(--pair-w) / 2 - var(--peek-fade)),
      #000        calc(50% - var(--pair-w) / 2),
      #000        calc(50% + var(--pair-w) / 2),
      transparent calc(50% + var(--pair-w) / 2 + var(--peek-fade)));
    mask-image: linear-gradient(to right,
      transparent calc(50% - var(--pair-w) / 2 - var(--peek-fade)),
      #000        calc(50% - var(--pair-w) / 2),
      #000        calc(50% + var(--pair-w) / 2),
      transparent calc(50% + var(--pair-w) / 2 + var(--peek-fade)));
  }

  /* The --fade override above belongs to the single-sided mask and has nothing
     to set here. At the end of the row the space to the right is the track's
     own padding, which is empty — but the cards scrolled off to the left still
     need their edge, so the mask stays whole. */
  .bk-w.bk-scope.bk-home .testimonials__rail:has([data-reviews-next]:disabled) ul.reviews {
    -webkit-mask-image: linear-gradient(to right,
      transparent calc(50% - var(--pair-w) / 2 - var(--peek-fade)),
      #000        calc(50% - var(--pair-w) / 2),
      #000        calc(50% + var(--pair-w) / 2),
      transparent calc(50% + var(--pair-w) / 2 + var(--peek-fade)));
    mask-image: linear-gradient(to right,
      transparent calc(50% - var(--pair-w) / 2 - var(--peek-fade)),
      #000        calc(50% - var(--pair-w) / 2),
      #000        calc(50% + var(--pair-w) / 2),
      transparent calc(50% + var(--pair-w) / 2 + var(--peek-fade)));
  }
}

.bk-w.bk-scope.bk-home .review__toggle-less { display: none; }
.bk-w.bk-scope.bk-home .review.is-open .review__toggle-more { display: none; }
.bk-w.bk-scope.bk-home .review.is-open .review__toggle-less { display: inline; }

/* =========================================================================
   06b — In The Media
   ========================================================================= */

/* The same centred opener as the reviews above: eyebrow, heading, gold rule.
   Repeated rather than shared because .testimonials__head carries a
   margin-bottom tuned to the cards under it, and the logos here want more
   air than the cards do. */
.bk-w.bk-scope.bk-home .media__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-7);
  text-align: center;
}

.bk-w.bk-scope.bk-home .media__head h2 { margin-top: var(--space-3); }

.bk-w.bk-scope.bk-home .media__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* `.press`, not `.media`. The section wore `media` and global.css defines a
   generic `.media` image-frame utility — overflow: hidden, a 16px radius and
   background-color: var(--bg-alt) — so a full-bleed band had been silently
   inheriting an image frame's ground for as long as it has existed. Renaming
   the section is what lets it hold a ground of its own in the sequence. The
   `media__*` children keep their names: nothing collides with those.

   No tiled motif here any more. Pattern 1 ran behind this band from the
   start, on the reasoning that the comb needed something to sit on — but the
   comb is itself a field of eleven repeating shapes, and a repeating rosette
   behind it gave the eye two patterns at the same scale competing for the
   same ground. Dropping the opacity quietened that without settling it. The
   band keeps position: relative: the head and the stage are positioned over
   it and still resolve against this box. */
/* A photograph of the place, thrown out of focus, with a cream veil over it.

   overflow: clip because the background overhangs its box: the layer is scaled
   up so the blur's falloff lands outside the frame, and without the clip that
   overhang would paint over the bands either side.

   80px top and bottom: --space-7 plus --space-3, which is the rhythm-2 tier's
   own 64 with a third of the added 32 kept back. A band with a photographic
   ground does want more margin than a flat one — the ground is doing work now
   and crowding it makes the comb look stuck to the edges — but --space-8 spent
   96 on that and it was more air than the argument justified.

   Composed from two tokens rather than written as 80px because the scale has
   no named step between 64 and 96, and the system's rule is an 8px base with
   even values. 64 + 16 lands on the grid; a bare 80 would read as someone
   ignoring the scale rather than adding within it. */
.bk-w.bk-scope.bk-home .press {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--space-7) + var(--space-3));
}

/* The photograph under a cream wash, built the way .enquiry builds its own
   ground so the two photographic bands on this page are one treatment rather
   than two inventions.

   A ::before rather than a ::after, and that is a correctness point rather
   than tidiness: a pseudo-element is a child, and among positioned children
   with no z-index the last one in tree order wins. ::after comes after
   .media__head and .media__stage, so anything drawn there paints over the comb
   and the article instead of behind them.

   0.90 of --color-beeswax-cream, the enquiry band's own figure. That number
   was sampled rather than chosen — the photograph drawn to a canvas under the
   section's cover mapping, every pixel under every line of type read and
   composited with the wash — and it came out at 7.96:1 for deep water and
   5.33:1 for beekeeper blue, the lighter ink that runs out of contrast first.

   This photograph is the same kind of subject the figure was measured against
   — dark foliage rather than the pale roof that stood here before — so the
   0.90 is being asked to do the work it was sampled for rather than coasting
   on an easier picture. The comb's hairlines are what actually need it: 1.2px
   at 45% blue cannot hold its own against a tree line.

   5px of blur, which the enquiry band does not have. Light enough that the
   deck, the chairs and the path are all still readable as themselves, heavy
   enough to take the fizz off a photograph that is mostly leaves — foliage at
   full sharpness under a pale wash reads as noise behind type, and this band
   sets a heading and eleven hairline hexagons over it.

   scale(1.03) goes with it and is not a free choice: a blur has no pixels
   past the edge of its source to sample, so the layer fades to transparent
   for roughly its own radius all the way round and would leave four pale
   borders. 1.03 of a 1600px band is 48px of overhang against a 5px falloff,
   and overflow: clip keeps it off the sections either side. */
.bk-w.bk-scope.bk-home .press::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 246, 238, 0.90), rgba(250, 246, 238, 0.90)),
    url("../../images/photography/garden-seating-deck.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(5px);
  transform: scale(1.03);
  pointer-events: none;
}
/* Positioned, so the head and the cards paint over the tile rather than
   under it — the same move .access__location-head makes over the rings. */
.bk-w.bk-scope.bk-home .media__head,
.bk-w.bk-scope.bk-home .media__stage { position: relative; }

/* Two columns: the comb on the left, the article it opens on the right. The
   comb is the narrower of the two — it is an index, and the reading happens
   beside it. Stacks below 900, where side-by-side would leave both halves
   too narrow to be either. */
.bk-w.bk-scope.bk-home .media__stage {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  /* The comb takes the larger share. It is eleven marks that have to be
     legible at a glance, where the panel is one column of text that reads
     fine narrower — so the width goes where it does more work. */
  .bk-w.bk-scope.bk-home .media__stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* ---------- The comb ---------- */

/* Pointy-top cells, tessellated 4 / 3 / 4. The arithmetic, once, here:
   a pointy-top hexagon of width W is W * 2/√3 tall (1.1547), rows sit at
   three-quarters of that height so the points interlock rather than stack,
   and the middle row is pushed half a cell across to fall into the notches
   of the row above. Eleven cells make a hexagon of hexagons — four across
   the top and bottom, three through the middle.

   Height is 2.5 cells, not 3: three rows overlap by a quarter each.

   Sized from its column rather than from the viewport. The cell width used
   to be a clamp on vw, which could not know how much room the grid had
   actually given the comb — it settled on 124px while the column was 510
   wide and left the marks smaller than they needed to be. The comb now
   fills its column and the cells take their size from it, so the marks are
   always as large as the layout allows.

   aspect-ratio carries the geometry: four cells across by 2.5 cells down,
   which is 4 : (2.5 × 1.1547) = 4 : 2.8868. */
/* The defs carry no artwork, only shapes for clip-path to point at. Taken out
   of the flow outright so it cannot occupy a line of the stage. */
.bk-w.bk-scope.bk-home .comb__defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Pointy-top cells, tessellated 4 / 3 / 4. The arithmetic, once, here:
   a pointy-top hexagon of width W is W * 2/√3 tall (1.1547), rows sit at
   three-quarters of that height so the points interlock rather than stack,
   and the middle row is pushed half a cell across to fall into the notches
   of the row above. Eleven cells make a hexagon of hexagons — four across
   the top and bottom, three through the middle.

   Height is 2.5 cells, not 3: three rows overlap by a quarter each, which is
   the 4 : (2.5 × 1.1547) = 4 : 2.8868 below. Eleven divides into 4/3/4
   exactly, so there is no twelfth cell to leave empty here. */
.bk-w.bk-scope.bk-home .comb {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 4 / 2.8868;
  margin-inline: auto;
}

/* One rule for all eleven, in percentages of the comb so nothing needs
   recomputing when it resizes. A cell is a quarter of the width; its height
   is 1.1547 / 2.8868 = 40% of the comb; and a row sits three-quarters of a
   cell height down, which is 30% of the comb. --c is the column, --o marks
   the offset row, --r is the row. Hand-placing eleven cells would have been
   eleven chances to mistype a coordinate. */
.bk-w.bk-scope.bk-home .comb__cell {
  position: absolute;
  left: calc((var(--c) + (var(--o) * 0.5)) * 25%);
  top: calc(var(--r) * 30%);
  width: 25%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  /* One line colour for all eleven. This began as four — deep, blue, morning
     and gold, cycling by cell — on the reasoning that a flat comb would be
     dull. In practice the opposite: a hexagon's every edge is shared with a
     neighbour, so four tones meant most of the interior seams had two
     different colours running alongside each other, and the comb read as a
     patchwork of unrelated tiles rather than as one drawn object. Honeycomb
     is one material. So is this now, and gold is kept back for the one cell
     that is actually open — where it says something. */
  background-color: rgba(51, 96, 143, 0.45);
  clip-path: url("#comb-hex");
  cursor: pointer;
  transition: background-color var(--dur-calm) var(--ease-calm);
}

/* The cell is drawn as two clipped hexagons, not as a bordered box: a
   clip-path has no border to give it. The outer hexagon is the line colour
   and the inner one is the ground, so what shows between them is the stroke
   — which is how the brand mark is drawn, fine even line weights, engraved
   rather than printed.

   scale(), not inset(). The inner hexagon has to stay a regular hexagon for
   the stroke to keep one weight the whole way round, and insetting a box by
   an equal number of pixels on all four sides does not do that: the cell is
   w by 1.1547w, so taking 4px off both axes leaves a box of a different
   ratio, and the hexagon clipped out of it is squashed. The stroke came out
   thinner on the raking edges than on the flat ones and pinched at all six
   points, which is most of why the outline looked crude at any size.

   A scale transform is similar by definition. The gap it opens is the same
   perpendicular distance on all six edges and the corners mitre properly —
   an actual stroke rather than the gap between two mismatched shapes. It
   also animates on the compositor, where inset could not. */
.bk-w.bk-scope.bk-home .comb__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-beeswax-cream);
  clip-path: url("#comb-hex");
  /* 0.985, down from 0.976 — a 1.2px stroke where it was 1.9px. Every cell
     draws its line inside its own hexagon, so at the nine interior seams two
     cells lay their strokes alongside each other and the lattice comes out
     twice as heavy there as it does around the comb's outer boundary. That
     went unnoticed while the lattice was the only line in the cell. Against
     a middle ring drawn at a true 1.4px it read as scaffolding, so the
     doubled seams are now 2.4px and the whole comb is one weight of line. */
  transform: scale(0.985);
  transform-origin: center;
  transition: transform var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm);
}

/* The second ring, and the reason the comb now reads as the mark rather than
   as graph paper. The brand mark is three cells each holding two concentric
   rings around a centre; the comb had only ever drawn the outer one, so it
   was the right shape repeated eleven times and none of the construction.
   This is the middle ring: the same hexagon set in from the lattice far
   enough that the gap between the two is unmistakably a gap — 0.88 against
   the lattice's 0.985, which at a 155px cell leaves about 8px of clear cream
   all the way round — with the publication's mark as the centre inside it.

   Morning blue, and not a tone chosen by eye: the palette assigns morning
   blue to middle rings and beekeeper blue to outer ones, which is exactly
   the two positions this cell now has.

   Drawn as one keyhole polygon rather than as another pair of stacked
   hexagons, because there are only two pseudo-elements and the ground above
   has already spent one. The path traces the outer hexagon clockwise, runs
   up the seam to the inner hexagon's top point, and traces that one
   anticlockwise; opposite windings under the nonzero fill rule punch the
   middle out, and the seam is a slit of zero width with the same fill on
   both sides, so nothing of it shows. The two hexagons are the same shape at
   0.88 and 0.862, which — a regular hexagon having one apothem — is a true
   even stroke of about 1.4px, the same weight the lattice reads at along its
   doubled interior seams. Engraved rather than printed, and the same
   hairline whatever the comb is sized to. */
.bk-w.bk-scope.bk-home .comb__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(107, 147, 189, 0.72);
  clip-path: url("#comb-ring");
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm);
}

/* 72 × 42. A hexagon only offers its full width across the band between the
   quarter marks — above and below that the sides rake in to the points — so
   the usable box in a pointy-top cell is the full width by half the height.

   Both numbers clear the middle ring, not the lattice, because a ring only
   reads as a ring if there is air inside it. Inside a hexagon of 0.862 the
   cell, 72 × 42 sits with about 10px of clearance at the corners, which is
   the least that still looks deliberate. */
.bk-w.bk-scope.bk-home .comb__logo {
  position: relative;
  z-index: 1;
  max-width: 72%;
  max-height: 42%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  /* 0.72, up from 0.62. The strokes around these marks used to be four
     saturated colours and the marks had to be held down to keep the comb
     from shouting; against one soft hairline they can carry their own
     weight, and at 0.62 the lighter mastheads had started to disappear. */
  opacity: 0.72;
  transition: filter var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm);
}

/* Eleven absolutely positioned siblings that share their edges, so painting
   order decides whose stroke survives at every seam: each cell was drawn
   over by the ones after it in the document, and the selected cell — the
   first in the comb — lost the whole of its right-hand side to the two that
   follow it. Lifting the live cell out of the stack is what lets a thicker
   stroke actually read as thicker the whole way round. */
.bk-w.bk-scope.bk-home .comb__cell:hover,
.bk-w.bk-scope.bk-home .comb__cell:focus-visible { z-index: 2; }

.bk-w.bk-scope.bk-home .comb__cell[aria-selected="true"] { z-index: 3; }

/* Hover and keyboard focus preview a cell without selecting it: the stroke
   deepens and thickens and the mark comes up, but the colour is held back
   for the cell actually chosen. */
.bk-w.bk-scope.bk-home .comb__cell:hover,
.bk-w.bk-scope.bk-home .comb__cell:focus-visible { background-color: var(--color-beekeeper-blue); }

.bk-w.bk-scope.bk-home .comb__cell:hover::before,
.bk-w.bk-scope.bk-home .comb__cell:focus-visible::before { transform: scale(0.978); }

/* The middle ring opens outward under the pointer — 1.03, about 2px of
   travel — and deepens to the outer ring's own blue. Outward rather than
   inward because the two rings are closing on each other either way and a
   ring that grows towards its lattice reads as the cell waking up, where one
   that shrinks onto the mark reads as it tightening. */
.bk-w.bk-scope.bk-home .comb__cell:hover::after,
.bk-w.bk-scope.bk-home .comb__cell:focus-visible::after {
  background-color: rgba(51, 96, 143, 0.75);
  transform: scale(1.03);
}

.bk-w.bk-scope.bk-home .comb__cell:hover .comb__logo,
.bk-w.bk-scope.bk-home .comb__cell:focus-visible .comb__logo { opacity: 0.92; }

.bk-w.bk-scope.bk-home .comb__cell:focus-visible {
  outline: 2px solid var(--color-deep-water);
  outline-offset: 2px;
}

/* The open cell, and the only colour in the comb. Gold stroke and a pale
   honey ground, and the only mark left in its own colours — with the other
   ten held to one quiet blue hairline there is nothing competing with it,
   which is the whole reason for flattening them.

   Pale honey rather than white. White read as a hole punched in the comb:
   the brightest thing in the band was the one cell the eye was meant to take
   as filled, and it lifted so far off the cream that it stopped belonging to
   the lattice around it. The palette keeps pale honey as gold's support
   tint, which is exactly the job here — it fills without shouting, and it
   puts the open cell in the same family as the gold ring holding it. */
/* A cell that has been opened stays opened-looking for the rest of the visit.

   The comb is eleven separate articles and nothing about it says which ones
   you have already been to — so a reader clicks three, loses track, and stops.
   Colouring a cell on first tap turns the comb into something with a finish
   line: the blue ones are the ones left. media-comb.js keeps the record in
   sessionStorage, so it survives a reload and is gone by the next visit, which
   is the right lifetime for a nudge rather than a setting.

   Pale honey for visited, honey gold for the one actually open. Both are in
   the gold family so the comb fills in as one colour rather than two, and the
   open cell is still the strongest thing in the field. */
.bk-w.bk-scope.bk-home .comb__cell.is-visited { background-color: var(--color-honey-gold); }

.bk-w.bk-scope.bk-home .comb__cell.is-visited::before {
  transform: scale(0.966);
  background-color: var(--color-pale-honey);
}

.bk-w.bk-scope.bk-home .comb__cell.is-visited::after { background-color: transparent; }

.bk-w.bk-scope.bk-home .comb__cell.is-visited .comb__logo {
  filter: grayscale(0);
  opacity: 1;
}

/* Gold edges beat blue ones at a shared seam. Eleven cells share their edges
   and painting order decides whose stroke survives, so a visited cell has to
   sit above the ones it has not been introduced to yet — otherwise its gold
   runs out halfway along the side it shares with an unvisited neighbour. */
.bk-w.bk-scope.bk-home .comb__cell.is-visited { z-index: 1; }

.bk-w.bk-scope.bk-home .comb__cell[aria-selected="true"] { background-color: var(--color-honey-gold); }

/* The open cell fills with honey gold outright, where a visited one is only
   tinted with pale honey. Ground and lattice the same value, so it reads as a
   solid gold cell against the comb rather than as another outlined one. */
.bk-w.bk-scope.bk-home .comb__cell[aria-selected="true"]::before {
  transform: scale(0.966);
  background-color: var(--color-honey-gold);
}

/* The open cell drops its middle ring. Blue inside a honey cell fought the
   ground, and the obvious fix — redrawing the ring in gold — does not
   survive contact with the numbers: honey gold on pale honey is 1.3:1, and a
   1.4px hairline at that contrast is not a line, it is a rumour.

   So the ring goes, and the cell says something the other ten cannot: they
   are drawn, this one is filled. Two rings and a centre against one flat
   plane is a plainer difference than any change of colour, and it still
   holds the comb's line weight at its edge. */
.bk-w.bk-scope.bk-home .comb__cell[aria-selected="true"]::after { background-color: transparent; }

.bk-w.bk-scope.bk-home .comb__cell[aria-selected="true"] .comb__logo {
  filter: grayscale(0);
  opacity: 1;
}

/* ---------- The panel ---------- */

/* Every panel in one grid cell, stacked, so the block is as tall as the
   longest of them and opening a different article never moves the comb.

   A card, now that there is a photograph behind it, and .enquiry__form's card
   to the value: the same 0.88 cream, the same neutral hairline, the same
   --radius-lg and --shadow-card. It wore a honey border for a spell, which
   tied it to the testimonial cards but made it the only plate on the page
   that announced itself; matching the form is the quieter answer and puts the
   two photographic bands in the same voice.

   0.88 rather than flat cream, so the wash and the card are not two different
   creams meeting at an edge — a hair of the ground shows through the plate the
   way it does through the form below.

   Styled on the container rather than on .media__panel: all eleven share one
   grid cell, so a plate on each would be eleven plates stacked on top of one
   another, and the card would resize as articles of different lengths came
   and went. The honey hairline is the testimonial cards', so the two places on
   the page where somebody else does the talking are framed the same way. */
.bk-w.bk-scope.bk-home .media__panels {
  display: grid;
  padding: var(--space-6);
  background-color: rgba(250, 246, 238, 0.88);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.bk-w.bk-scope.bk-home .media__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .media__panel.is-current {
  visibility: visible;
  opacity: 1;
}

.bk-w.bk-scope.bk-home .media__panel:focus-visible {
  outline: 2px solid var(--color-deep-water);
  outline-offset: 6px;
}

.bk-w.bk-scope.bk-home .media__outlet {
  display: block;
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bk-w.bk-scope.bk-home .media__headline {
  margin-top: var(--space-3);
  color: var(--color-deep-water);
  font-size: var(--fs-h4);
  line-height: var(--leading-display);
}

.bk-w.bk-scope.bk-home .media__excerpt {
  margin-top: var(--space-4);
  max-width: 54ch;
  color: var(--color-ink);
}

/* Ink and small caps, the system's quiet control — not the gold it wants to
   be, which measures 2.42:1 on this ground and fails at this size. */
.bk-w.bk-scope.bk-home .media__read {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  color: var(--color-deep-water);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-underline-offset: 0.18em;
}

.bk-w.bk-scope.bk-home .media__read svg { flex: 0 0 auto; }

.bk-w.bk-scope.bk-home .media__read:hover { text-decoration-thickness: 2px; }

/* The comb is the control and the panel is its output, so both need to work
   without the fade. Only the crossfade and the stroke growth are motion. */
@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .comb__cell,
  .bk-w.bk-scope.bk-home .comb__cell::before,
  .bk-w.bk-scope.bk-home .comb__cell::after,
  .bk-w.bk-scope.bk-home .comb__logo,
  .bk-w.bk-scope.bk-home .media__panel { transition: none; }
}

/* =========================================================================
   06c — Our Awards
   ========================================================================= */

/* --space-6 both ends, against the --space-7 the rhythm-2 tier hands this
   section by default. The band has one job the others do not: it has to
   close inside a screen, and the two ends are 128px of that budget before a
   word of it has been laid out. */
.bk-w.bk-scope.bk-home .awards { padding-block: var(--space-6); }

/* The cards, under a centred opener. This carried a two-column split for a
   while — opener left, evidence right — which gave the band an axis to read
   down but put the section's own name off to one side, where no other section
   on the page keeps it. The title went back to the top and the standfirst
   followed it, so there is nothing left to sit beside the cards.

   No max-width of its own any more. The band widened to 1600 to feed badges
   that were being starved by a narrow right-hand column; with the cards
   holding the full container that pressure is gone, and the badge box at 536
   is still wider than the 429 the Healthcare Asia lockup draws at its 200px
   height. Nothing shrinks, and the cards stop looking stranded in a row far
   wider than the words above them. */

/* Centred at every width, and full width with it. The title crowns the band
   the way every other section's does; it came down into the left-hand column
   for a spell when the split went in, which made this the one section on the
   page whose name did not sit over what it names.

   No eyebrow over the heading now. "Recognition" said what "Our Awards" was
   about to say, one line earlier and in smaller type. */
.bk-w.bk-scope.bk-home .awards__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-6);
  text-align: center;
}



.bk-w.bk-scope.bk-home .awards__head h2 { margin-top: var(--space-3); }

.bk-w.bk-scope.bk-home .awards__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-3) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}



/* Run wide. This started at 62ch, which is the right measure for a column of
   prose and the wrong one here: at that width the lead broke to seven lines
   and was the tallest thing in a band that has to close inside a screen.
   Let out to the container it holds to three, and the height it gives back
   is most of what this section needed to lose.

   The usual objection to a long measure — that the eye loses the start of
   the next line — is weakest on a paragraph this short and this isolated.
   Three lines, centred, with nothing above or below to confuse them for. */
/* 84ch, not the 68 the design system holds editorial blocks to. That rule is
   the right default and this is the documented exception: a centred standfirst
   with nothing either side of it does not lose the reader on the return sweep
   the way a column of body copy would.

   84 is the middle of a range that has been walked from both ends. At 68 the
   paragraph set in five lines and was the tallest thing in the band; at 108 it
   came down to three, which bought the height back but stretched the lines to
   1128px — wide enough that the block read as a strip of text rather than a
   paragraph. 84 gives 877px and four lines, which is the shape that looks
   like something written rather than something fitted. */
.bk-w.bk-scope.bk-home .awards__lead {
  max-width: 84ch;
  margin-top: var(--space-4);
  color: var(--color-beeswax-cream);
}

/* And back to a reading measure once there is a column to put it in. 108ch
   was a workaround: at 62ch and full width this paragraph broke to seven
   lines and was the tallest thing in a band that has to close inside a
   screen, so it was let out sideways to buy the height back. In two columns
   that trade is off — the cards are taking up the height now — and the lead
   can sit at the measure prose actually wants. */
/* Two, equal, side by side. Stacks below 900 on the same breakpoint the press
   stage uses, where two columns would leave each award too narrow to hold a
   badge beside a paragraph. */
.bk-w.bk-scope.bk-home .awards__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-home .awards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The gutter between the cards closes to --space-5 once they are sharing the
   band with the opener. Every pixel spent between them is a pixel off both
   badges, and 32 is still a clear division between two plates that each carry
   their own border. */
@media (min-width: 1280px) {
  .bk-w.bk-scope.bk-home .awards__list { gap: var(--space-5); }
}

/* The same cream-at-7%-over-deep-water plate the FAQ items take, so the two
   inverse bands on the page build their surfaces the same way rather than
   each inventing one. */
.bk-w.bk-scope.bk-home .award {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  background-color: rgba(250, 246, 238, 0.07);
  border: 1px solid var(--border-hairline-inverse);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: background-color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm);
}

/* The whole card is the control, not the six words of link under it.

   A "Read more" set in --fs-small is a 90px target on a card of forty
   thousand square pixels, and everything a reader might reasonably press —
   the badge, the award's name, the category it was won in — did nothing at
   all. The card looked interactive and was not, which is worse than looking
   inert.

   The button keeps being the button: this stretches its hit area over the
   card with an overlay rather than wrapping the card in a second control, so
   there is still one thing here to tab to, one aria-expanded, and one
   accessible name. Anything else means either a button inside a button or a
   div with a click handler and a keyboard story to invent.

   Only while closed. Open, the overlay would sit across the citation and a
   reader could not select the text they had just asked to see — so it is
   withdrawn on open and the underlying button takes the press back. */
.bk-w.bk-scope.bk-home .award:not(.is-open) { cursor: pointer; }

.bk-w.bk-scope.bk-home .award:not(.is-open) .award__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Honey on approach. At rest the cards take the same cream hairline the FAQ
   plates take, so the band stays quiet; under the pointer the edge turns
   gold and the plate lifts a little out of the navy. No translate: the reveal
   animation owns .award's transform and this would fight it, and the system
   is a flat one — the colour is the affordance.

   :focus-within and not :focus, so tabbing to the button lights the card it
   belongs to rather than leaving the focus ring floating in the middle of an
   unchanged plate. */
.bk-w.bk-scope.bk-home .award:hover,
.bk-w.bk-scope.bk-home .award:focus-within,
.bk-w.bk-scope.bk-home .award.is-open {
  background-color: rgba(250, 246, 238, 0.11);
  border-color: var(--color-honey-gold);
}

/* 200px, where this was 150 and then 170. The number was never a preference:
   under about 140px tall the Healthcare Asia lockup — outlined type around a
   laurel drawn in hairlines — stops being a legible mark and becomes a grey
   smudge, and a badge nobody can read is not evidence. It sat near that floor
   because the band was one full-width column and every pixel of height was
   dear, then rose when the two-column arrangement gave the badges a column of
   their own.

   At a 1600 container the constraint stops binding altogether. The badge box
   is 432 wide, so the lockup is limited by height rather than width for the
   first time and draws its full 429 x 200; the square GHP badge fills the box
   at 200 x 200. */
.bk-w.bk-scope.bk-home .award__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: var(--space-4);
}

.bk-w.bk-scope.bk-home .award__badge img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The card turns on its side in the two-column band: badge left, citation
   right, both centred on one line.

   320 for the badge is the lockup's floor plus a little, not a taste — at
   that width Healthcare Asia draws 149 tall inside the 150px box and GHP's
   square badge fills the box outright. The citation takes what is left.

   Written here, after the rules it overrides, and not up with the
   .awards__list declarations where it reads more naturally. Both selectors
   are a single class and a media query adds no specificity, so this is
   settled purely by source order: up there the base `display: flex` below it
   won and the cards stayed stacked. Third time this file has set that trap —
   .team__text and .team__role carry the same note. */

/* The card stays vertical — badge over citation — at every width. It was laid
   on its side for a spell to buy the badge width inside a narrow column, and
   it did, but a badge is the thing worth looking at here and a card that
   stands it on top and centres the citation under it is the shape that says
   so. The width comes out of the opening column instead.

   The `@media (min-width: 1280px) {` that used to open here went with that
   layout, but its opening brace did not: it was left behind with nothing to
   close it, so every rule from this point to the end of the file — the rest of
   Awards, the whole of the enquiry band, and anything appended later — was
   swallowed into a query that only fired at 1280px and wider. Below that the
   enquiry form had no styling at all. Removed, not closed; there is no longer
   a rule here that wants a breakpoint. */

/* The awarding body and year, in the eyebrow's voice: it is a label over the
   thing won, not a heading in its own right.

   Gold again, the band being dark again. It measures 4.50:1 against deep
   water — which clears AA, but only just, and only on this ground: the same
   gold was 2.4:1 while the band was --bg-alt, which is why it went blue for
   that spell. Worth knowing the margin is thin if the ground ever moves. */
.bk-w.bk-scope.bk-home .award__body-name {
  color: var(--color-honey-gold);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The category is the claim, so it takes the heading. h5 rather than h4: it
   sits under a section h2 with no h3 between, and at h4 it would have
   out-weighed the section's own title at the two-column width. */
/* Two lines' worth of height whether the citation needs two or one, so the
   Read more under it sits at the same height in both cards. The GHP award
   runs to two lines and Healthcare Asia's to one, which put one control a
   full line above the other across the gutter — the pair reads as two cards
   set slightly wrong rather than as a matched set.

   Reserved on the title rather than pushed down with margin-top: auto on the
   button. Auto would hold the two level while both are closed and then drop
   the closed card's control to the foot of whichever card is open, which is
   a stranger thing to watch than the misalignment it fixes.

   2.5em is two lines of --leading-display at the title's own size; em, so it
   tracks --fs-h5 across the breakpoints without being restated. */
.bk-w.bk-scope.bk-home .award__title {
  min-height: 2.5em;
  margin-top: var(--space-3);
  font-size: var(--fs-h5);
}

/* --fs-small, the size the FAQ answers take: this is the second paragraph in
   a band that already has a lead, and at body size the two would compete.

   Closed, not clipped. This was a two-line clamp, which left each card
   showing an opening clause that broke mid-sentence — enough text to start
   reading and not enough to finish, which is the one outcome worse than
   either showing all of it or none. The badge and the category are what
   anybody stops here for; the citation is for whoever wants it.

   max-height and not display: none — the height has to be animatable, and
   the paragraph has to stay in the document for crawlers. 24em clears the
   longer of the two with room, and the overshoot costs nothing because the
   element is clipped. Same collapse the team biographies use. */
.bk-w.bk-scope.bk-home .award__copy {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--color-beeswax-cream);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  /* visibility on a zero-length transition, delayed until the collapse has
     finished, so the text leaves the accessibility tree when it is closed.
     Clipped-but-present text would have been read out by a screen reader
     while the button next to it said aria-expanded="false" — the reviews and
     the team biographies can leave this alone because neither announces a
     state; this one does, and the two have to agree. */
  transition: max-height var(--dur-calm) var(--ease-calm),
              margin-top var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm),
              visibility 0s linear var(--dur-calm);
  visibility: hidden;
}

.bk-w.bk-scope.bk-home .award.is-open .award__copy {
  max-height: 24em;
  margin-top: var(--space-3);
  opacity: 1;
  visibility: visible;
  transition: max-height var(--dur-calm) var(--ease-calm),
              margin-top var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm),
              visibility 0s linear 0s;
}

/* The reviews' toggle, in the same blue: one control and one contract, so
   the page has a single way of opening a closed paragraph rather than two. */
.bk-w.bk-scope.bk-home .award__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-pale-honey);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A chevron that turns over when the citation opens. The label alone already
   says which way this goes — "Read more" against "Read less" — but it says it
   in words a reader has to stop and read, and the two are near enough in
   shape to be mistaken for each other at a glance. A mark that points down
   when there is more below and up when there is not is the same information
   at no reading cost.

   Drawn from two borders rather than set as a glyph: the arrow characters
   that would do this are inconsistently drawn across fonts and none of them
   rotates. This one is two lines at 45 degrees, and the open state is the
   same shape turned through 180.

   translateY trims the optical centre — a chevron made this way hangs from
   the corner of its box rather than sitting on the text's midline. */
.bk-w.bk-scope.bk-home .award__toggle::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.12em);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .award.is-open .award__toggle::before {
  transform: rotate(-135deg) translateY(-0.12em);
}

.bk-w.bk-scope.bk-home .award__toggle:focus-visible {
  outline: 2px solid var(--color-beeswax-cream);
  outline-offset: 3px;
}

.bk-w.bk-scope.bk-home .award__toggle-less { display: none; }
.bk-w.bk-scope.bk-home .award.is-open .award__toggle-more { display: none; }
.bk-w.bk-scope.bk-home .award.is-open .award__toggle-less { display: inline; }

/* In the opening column with the sentence it belongs to, not centred under
   the cards. --space-5 rather than --space-4: it is the last thing in a block
   of prose now rather than a footer hung off a grid, and it needs the gap
   that says so. */
.bk-w.bk-scope.bk-home .awards__all {
  display: block;
  width: fit-content;
  margin: var(--space-5) auto 0;
}

/* ---------- The arrival ---------- */

/* Everything below is gated on [data-awards-ready], which awards.js sets
   only when the script has run and reduced motion has not been asked for.
   Nothing here describes the band's resting state — that is the finished
   state, written above — so if the attribute never arrives the section is
   simply present, which is the only safe default for a reveal.

   Four things move, in the order they are read: the opener, then each card,
   then the way out. --i carries the position in that queue and one delay
   calculation serves all of them; hand-written delays would be four numbers
   to keep in step every time something is added. */
.bk-w.bk-scope.bk-home [data-awards-ready] .awards__head,
.bk-w.bk-scope.bk-home [data-awards-ready] .award,
.bk-w.bk-scope.bk-home [data-awards-ready] .awards__all {
  opacity: 0;
  /* 20px. Far enough to read as arriving from somewhere, short enough that
     nothing appears to fly — this is a band about institutional recognition
     and it should enter like one. */
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-calm),
              transform var(--dur-slow) var(--ease-calm);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}

.bk-w.bk-scope.bk-home [data-awards-ready] .awards__list > :nth-child(1) { --i: 1; }
.bk-w.bk-scope.bk-home [data-awards-ready] .awards__list > :nth-child(2) { --i: 2; }
.bk-w.bk-scope.bk-home [data-awards-ready] .awards__all { --i: 3; }

/* The badge lands last and lands differently: it rises with its card and
   then settles the final fraction of its size on its own, 140ms behind. A
   winner's badge is the one thing in the section that should look placed
   rather than moved. --i inherits from the card, so the stagger between the
   two badges comes free.

   0.94 and no less. The marks are fine-lined — the Healthcare Asia lockup is
   outlined type — and scaling them up from anything smaller resamples those
   hairlines into a blur for the length of the transition. */
.bk-w.bk-scope.bk-home [data-awards-ready] .award__badge img {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-slow) var(--ease-calm),
              transform var(--dur-slow) var(--ease-calm);
  transition-delay: calc(var(--i, 0) * 90ms + 140ms);
}

.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .awards__head,
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .award,
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .awards__all,
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .award__badge img {
  opacity: 1;
  transform: none;
}

/* Dropped once the movement is over: a permanent will-change on four
   elements asks the compositor to hold layers for the life of the page in
   exchange for one transition. */
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .awards__head,
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .award,
.bk-w.bk-scope.bk-home [data-awards-ready].is-revealed .awards__all { will-change: auto; }

/* =========================================================================
   07 — Enquiry
   ========================================================================= */

/* The band closes the page on the gong, the way the live site does. Built
   like the Pledge band — media, scrim, content — rather than a background
   image on the section, because an <img> under object-fit gives the same
   result with a real intrinsic size and a webp source.

   The padding is a third of what the section rhythm gives, because the whole
   point of the rebuild is that this band fits a screen; see the note on
   .enquiry__inner for where the rest of the height went. */
.bk-w.bk-scope.bk-home .enquiry {
  position: relative;
  /* --space-7, up from --space-5. Removing the cream card took 118px out of
     this band, so doubling the padding spends about half of it back as air at
     the two ends and the section still closes inside a 900px window. */
  padding-block: var(--space-7);
  overflow: clip;
}

.bk-w.bk-scope.bk-home .enquiry__media { position: absolute; inset: 0; }

.bk-w.bk-scope.bk-home .enquiry__media picture,
.bk-w.bk-scope.bk-home .enquiry__media img { width: 100%; height: 100%; }

.bk-w.bk-scope.bk-home .enquiry__media img { object-fit: cover; }

/* Washed, not scrimmed. The gong band needed a dark overlay and therefore a
   cream card under the form; the card was the bulk. Reverse it: pull the
   photograph almost all the way up to the page's own cream and the form can
   stand on the ground with nothing behind it, which is the shape of the
   reference (rakxawellness.com/contact).

   0.90 of --color-beeswax-cream. Sampled the way the dark version was — the
   photograph drawn to a canvas under the section's own object-fit: cover
   mapping, every pixel under every line of type read at 3px intervals and
   composited with the wash. Worst points: 7.96:1 for deep water (the
   headings, labels, region tags and the privacy note) and 5.33:1 for
   beekeeper blue (the phone numbers and the email link), against the 4.5
   body copy needs.

   The blue is the one that governs — it is a lighter ink than deep water, so
   it runs out of contrast first, and 5.33 is the number to watch. There is
   room to drop the wash if the gardens should show more, but re-measure
   before going below about 0.85: the darkest ground under any of this type
   is already 222/255 in the green channel, and the trunks on the right of
   the photograph are a great deal darker than that. */
.bk-w.bk-scope.bk-home .enquiry__wash {
  position: absolute;
  inset: 0;
  background-color: rgba(250, 246, 238, 0.90);
}

/* Two columns, and this is where the 510px came from. Stacked, the band ran
   1410px against a 900px window: a full-width header, a full-width gap, then
   the form and the numbers side by side underneath. Setting the header and
   the numbers beside the form costs the section nothing in height — the
   band is now as tall as its taller column instead of the sum of both. */
.bk-w.bk-scope.bk-home .enquiry__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-home .enquiry__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* ---- The journey column ----
   The live site's three "Treatment For" items. A list, because that is what
   three parallel routes into the same service are. */
.bk-w.bk-scope.bk-home .journey {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-home .journey__item + .journey__item { margin-top: var(--space-5); }

/* The arrow is drawn with a border rather than a glyph or a file: one
   character of furniture per item does not deserve an asset, and a text
   arrow would be read out by a screen reader as content. */
.bk-w.bk-scope.bk-home .journey__item h3 {
  position: relative;
  margin: 0;
  padding-left: var(--space-6);
  font-size: var(--fs-h5);
}

.bk-w.bk-scope.bk-home .journey__item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 20px;
  height: 1px;
  background-color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-home .journey__item h3::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--color-honey-gold);
  border-right: 1px solid var(--color-honey-gold);
  transform: translateY(-50%) rotate(45deg);
}

.bk-w.bk-scope.bk-home .journey__item p {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

/* ---- The frame ----
   The form stood directly on the washed photograph, on the reasoning that a
   pale ground lets it sit on the page with nothing under it. That holds right
   up until the fields themselves are white boxes: eight of them scattered
   over a photograph read as eight separate objects, and nothing says where
   the form begins or ends.

   Cream at 88%, not solid. The wash beneath is the section's one piece of
   warmth and a flat panel would cover it; at 88 the gardens still come
   through the frame, faintly, and the white controls still have a ground to
   sit on that is unmistakably not the photograph. */
.bk-w.bk-scope.bk-home .enquiry__form {
  padding: var(--space-5);
  background-color: rgba(250, 246, 238, 0.88);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .bk-w.bk-scope.bk-home .enquiry__form { padding: var(--space-6); }
}

/* The form's own heading, which the original gives it. */
.bk-w.bk-scope.bk-home .enquiry__form-title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h4);
}

/* The asterisk on the four fields the original marks as required. */
.bk-w.bk-scope.bk-home .form__required { color: var(--color-honey-gold); }

/* ---- Fitting the panel to a screen ----
   Scoped to .enquiry__form, not written into .form. The same component
   serves the contact page, where nothing is competing for the height and the
   roomier default is right; this band is the one place the form has to share
   a screen with a heading, a phone list and the section's own padding.

   Where the 234px came from, against the form's 938:
     the eight controls, 48px min-height but rendering 59 on the
     --fs-body of a wide screen, down to 46 — still two above the 44
     the touch target needs                                    -52
     the message box, five rows down to three                  -93
     the gap between fields, --space-4 to --space-3            -32
     the privacy note's own padding, --space-4 to --space-3    -16
     the two gaps above the note and the button                -16
   None of it removes a field, shortens a label, or touches the copy. */
.bk-w.bk-scope.bk-home .enquiry__form .form { max-width: none; }

.bk-w.bk-scope.bk-home .enquiry__form .form__grid { gap: var(--space-3); }

.bk-w.bk-scope.bk-home .enquiry__form .form__control {
  min-height: 44px;
  padding-block: 11px;
}

.bk-w.bk-scope.bk-home .enquiry__form .form__privacy {
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.bk-w.bk-scope.bk-home .enquiry__form .form__actions {
  margin-top: var(--space-5);
  text-align: center;
}

/* ---- The reference's manner, in this site's parts ----
   rakxawellness.com/contact sets its labels as small letterspaced capitals,
   its controls as hairline outlines on the page ground rather than filled
   boxes, and centres a single outlined button under the lot. All three are
   things this design system already owns — the eyebrow's capitals, the
   hairline border token, the hex button — so this is the reference's
   arrangement rather than its styling.

   Scoped here and not into .form: the contact page's copy of this form sits
   on plain cream with nothing else competing, where the filled controls and
   the solid gold button are the right weight. */
.bk-w.bk-scope.bk-home .enquiry__form .form__label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The (optional) marker stays sentence case — capitalised it reads as part
   of the label rather than as an aside about it. */
.bk-w.bk-scope.bk-home .enquiry__form .form__optional { text-transform: none; letter-spacing: 0; }

/* Hairline on the ground, not a white box with a blue edge. The wash behind
   is pale enough that a 1px rule is all the definition a field needs, and
   eight filled boxes were most of what made the block look heavy. */
.bk-w.bk-scope.bk-home .enquiry__form .form__control {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: var(--border-hairline);
}

.bk-w.bk-scope.bk-home .enquiry__form .form__control:hover { border-color: var(--color-beekeeper-blue); }

.bk-w.bk-scope.bk-home .enquiry__form .form__control:focus-visible {
  background-color: var(--color-white);
}

/* Centred and sized to its label, as in the reference, rather than a
   full-width gold bar. */
.bk-w.bk-scope.bk-home .enquiry__form .form__actions .btn {
  display: inline-flex;
  width: auto;
}

.bk-w.bk-scope.bk-home .enquiry__aside h3 { margin-bottom: var(--space-4); }

.bk-w.bk-scope.bk-home .enquiry__numbers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-home .enquiry__numbers li + li {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-home .enquiry__numbers a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-h5);
  font-weight: 700;
  text-decoration: none;
}

.bk-w.bk-scope.bk-home .enquiry__numbers a:hover { text-decoration: underline; }

.bk-w.bk-scope.bk-home .enquiry__region {
  min-width: 88px;
  color: var(--color-deep-water);
  opacity: 0.75;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bk-w.bk-scope.bk-home .enquiry__email {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-home .enquiry__email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-h5);
  font-weight: 700;
  word-break: break-word;
}

.bk-w.bk-scope.bk-home .enquiry__hours {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  opacity: 0.85;
}

/* =========================================================================
   06g — From our writing
   The article index, set as a book spread.

   The card version of this band filed two pieces of medically reviewed
   long-form writing next to every other content-marketing tile on the web. A
   spread says what a teaser cannot: a verso carrying the title and the house
   seal, a recto carrying the actual opening paragraphs, and a reader who has
   started the article before deciding whether to read it.

   One spread is open at a time. The rest sit alongside at low opacity and come
   forward when scrolled to.
   ========================================================================= */

.bk-w.bk-scope.bk-home .insights {
  --insight-gap: clamp(var(--space-3), 2vh, var(--space-4));

  /* The open book. Two pages, so it wants width — but it also has to leave
     room either side for the neighbours to show, which is the whole signal
     that there is more than one article here. At 1200 on a 1440 screen that
     peek is about 100px a side, which is enough to read as a page and not
     enough to compete with the one being read.

     The height is the other half of it: each page comes out around 560 by 640,
     which is portrait, which is the shape of a page in a book. At the previous
     452 they were square, and a square page reads as a panel.

     1120 and not 1200, which is where this started. At 1200 the arithmetic
     leaves 120px a side for the neighbour, the edge mask eats most of it, and
     the peek disappeared altogether — which loses the one thing that says
     there is a second article at all. 1120 is still a third wider than the
     book was and keeps a readable sliver of the next page. */
  --folio-w: min(1120px, 90vw);

  /* What the fixed header actually covers here: the 64px bar plus the 16px it
     is inset from the top of the window.

     Not --header-height, which is 100px. That token is measured in the open
     state over the hero, where the logo is at its largest; this band is far
     enough down the page that the header is always solid and 20px shorter.
     Reserving the hero's number cost the book 20px of height and, because the
     reservation is what the centring is measured from, sat the whole stack
     10px below the middle of the space it actually has. */
  --insights-clear: calc(var(--space-3) + 64px);

  /* Breathing room over the heading, on top of the clearance. Small, and
     deliberately so: the clearance below it is already 80px of empty ground,
     and anything generous here reads as the band starting late rather than as
     air above a heading. */
  --insights-head-pad: var(--space-3);

  /* And the gap under the book, to the band that follows. This is the one
     asymmetry in the section and it is on purpose.

     Balanced padding was the wrong target. The two are only level when the
     section is pinned with the header lying over its top edge — the moment
     you can see the seam where the band above ends, the 80px clearance reads
     as part of the gap above the heading, and the heading sat 108px down with
     the book finishing 28px off the next section. Top-heavy and crowded at the
     foot, which is not what the clearance is for.

     So the foot gets its own measure, roughly the clearance and the head
     padding together, and the two ends read as a matched pair with the seam in
     view. That is the state the section is actually read in. */
  --insights-foot-pad: clamp(var(--space-6), 7vh, var(--space-8));

  /* The room the track keeps above and below the spread so the scrollport does
     not clip the focus ring. Declared on the section rather than on the track
     because it is part of the section's vertical budget: it is 20px of the
     131 the book is measured against, and reading it from one place is what
     stops the two drifting apart. */
  --insights-rail-pad: 10px;

  /* The book takes what the screen has left, between a floor and a ceiling.
     The floor stops it collapsing on a short laptop; the ceiling stops a page
     on a tall monitor growing taller than a column of text can be read
     comfortably down.

     Everything above the book comes out of the budget by name rather than as
     one rounded constant: the clearance, the head padding, and 131px for the
     heading, the rule under it, its margin, and the rail padding at both ends
     of the track. Written out, a change to any one of them moves the book
     instead of silently overflowing the section — which is what the old 210px
     did.

     --insights-foot-pad is NOT in the budget, and that is the point. Charged
     against the book it would cost 60-odd px of page to buy the gap under it,
     which is paying for the same space twice. Left out, the foot padding
     pushes the section past 100vh instead — so the book keeps its height, the
     whole of it is still on screen when the top of the band is, and the gap
     below simply runs on into the scroll. --space-4 stands in for it here, as
     the margin that keeps the foot of the book off the fold.

     At a 900px window the book comes out around 649 against the 590 it had
     before the section was rebuilt. */
  --folio-h: clamp(
    506px,
    calc(100vh - var(--insights-clear) - var(--insights-head-pad)
         - var(--space-4) - 131px),
    902px);

  /* At least full screen. min-height and not height: the stacked mobile spread
     is taller than a phone viewport and has to be free to run past it, and on
     a desktop the foot padding now takes the section a little past 100vh too.

     The clearance is padding rather than a margin or a shifted centre —
     padding-top moves the heading down past the fixed bar, so the heading is
     clear of it at the position the band is actually read from. flex-start
     rather than centre: with the foot padding outside the budget there is no
     slack left to centre, and centring what does not need centring only moved
     the stack around as the arithmetic drifted. The padding decides where the
     contents sit, which is easier to reason about and easier to change. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  padding-block: calc(var(--insights-clear) + var(--insights-head-pad))
                 var(--insights-foot-pad);
}

/* Wider once there is room for it. At 1120 on a 1900px screen the book left
   390px of empty ground either side, which on a band that is now the whole
   screen reads as a small object in a large room. */
@media (min-width: 1600px) {
  .bk-w.bk-scope.bk-home .insights { --folio-w: min(1320px, 78vw); }
}

.bk-w.bk-scope.bk-home .insights__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(var(--space-5), 4vh, var(--space-6));
  text-align: center;
}

.bk-w.bk-scope.bk-home .insights__head h2 { margin-top: 0; }

.bk-w.bk-scope.bk-home .insights__rule {
  width: 64px;
  height: 1px;
  margin: var(--space-4) auto 0;
  background-color: var(--color-honey-gold);
  border: 0;
}

/* ---- The rail ----
   Full-bleed rather than inside the container: the spreads either side of the
   open one are meant to run to the edges of the screen and fade there, which a
   1280px well would have cut off square. */
.bk-w.bk-scope.bk-home .insights__rail {
  position: relative;
  width: 100%;
}

/* Centre-snapped, not start-snapped. The open spread sits in the middle of the
   screen with its neighbours showing on both sides, so the padding either end
   is half the viewport less half a spread — that is what lets the first and
   last items reach the centre at all. Without it the first spread could never
   be centred, because there would be nothing to its left to scroll past.

   Masked at both edges for the same reason the reviews rail is masked at one:
   a row that stops dead reads as a row that has ended. */
.bk-w.bk-scope.bk-home ul.insights__track {
  /* Trimmed from a 120px ceiling: at the width the book grew to, a fade that
     deep swallowed the whole of the neighbouring page and the row looked like
     it held one article. */
  --fade: clamp(16px, 3vw, 72px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                                      #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                              #000 calc(100% - var(--fade)), transparent 100%);
  display: flex;
  align-items: stretch;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  margin: 0;
  /* Half the scrollport less half a spread: the run-up the first spread needs
     in order to reach the centre at all, since there is nothing to its left to
     scroll past. The matching one on the right lets the last spread get there
     too.

     The selector is `ul.insights__track` and not `.insights__track`, which is
     the whole reason this works. global.css resets `ul[class]` to padding 0,
     and an attribute selector plus a type beats a single class — so a plain
     `.insights__track` lost the padding outright and the spread sat pinned to
     the left edge of the screen with no clue as to why. Naming the type ties
     the specificity and lets source order decide, which is exactly what
     `ul.reviews` further up this file is doing, and for the same reason. */
  padding-top: var(--insights-rail-pad);
  padding-bottom: var(--insights-rail-pad);
  padding-left: calc(50% - (var(--folio-w) / 2));
  padding-right: calc(50% - (var(--folio-w) / 2));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bk-w.bk-scope.bk-home ul.insights__track::-webkit-scrollbar { display: none; }

/* ---- Turning the page ----
   Sat on the outer edges of the open book, vertically centred, half on the
   paper and half on the ground behind it. A row of arrows under the spread
   would have cost the band another 80px of height and put the control a long
   way from the thing it controls; here it is on the edge it turns.

   Centred exactly on the book's edge: half the rail, less half a spread, less
   half a button. The same arithmetic as the track's padding, which is what
   puts the open spread in the middle in the first place.

   The disabled one goes rather than greying out. These are absolutely
   positioned, so removing one shifts nothing — and with two articles that
   leaves a single arrow pointing at the one you have not read, which says more
   than a pair with one of them dimmed. `disabled` has already taken it out of
   the tab order; this is only the visual half. */
.bk-w.bk-scope.bk-home .folio-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  transform: translateY(-50%);
  background-color: var(--color-deep-water);
  border: 0;
  border-radius: 50%;
  color: var(--color-beeswax-cream);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(34, 64, 94, 0.22);
  transition: background-color var(--dur-calm) var(--ease-calm),
              opacity var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .folio-nav--prev { left: calc(50% - (var(--folio-w) / 2) - 26px); }
.bk-w.bk-scope.bk-home .folio-nav--next { right: calc(50% - (var(--folio-w) / 2) - 26px); }

.bk-w.bk-scope.bk-home .folio-nav:hover { background-color: var(--color-beekeeper-blue); }

.bk-w.bk-scope.bk-home .folio-nav:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.bk-w.bk-scope.bk-home .folio-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Under this the book is a single stacked column filling most of the screen,
   there is no edge left to hang a button off, and the rail is being swiped
   rather than clicked. */
@media (max-width: 767px) {
  .bk-w.bk-scope.bk-home .folio-nav { display: none; }
}

/* ---- The spread ----
   Everything that is not the open article is pushed back rather than hidden:
   still legible, still scrollable to, but plainly not the thing being read.
   The scale is small on purpose — at 0.9 the type in the closed spreads went
   blurry enough to look broken rather than distant. */
.bk-w.bk-scope.bk-home .folio {
  flex: 0 0 var(--folio-w);
  scroll-snap-align: center;
  opacity: 0.3;
  transform: scale(0.965);
  transform-origin: center;
  transition: opacity var(--dur-slow) var(--ease-calm),
              transform var(--dur-slow) var(--ease-calm);
}

.bk-w.bk-scope.bk-home .folio.is-open {
  opacity: 1;
  transform: none;
}

/* With the script off nothing ever gets .is-open, and a band of permanently
   dimmed articles would be worse than no effect at all. This is the safe way
   to be wrong: without JS every spread is simply at full strength. */
.bk-w.bk-scope.bk-home .no-js .folio,
.bk-w.bk-scope.bk-home .insights__track:not(.is-live) .folio { opacity: 1; transform: none; }

/* ---- The book ----
   No shadow, and this time the name matches the rule.

   It went from --shadow-media to a five-layer ramp to a tight two-layer one,
   each round softer than the last, and the note above it has said "no shadow
   at all" throughout while two layers sat in the declaration. The trouble was
   never the hardness or the reach: this is a large pale rectangle on a pale
   ground, and any shadow under it reads as a grey band across the bottom of
   the section rather than as paper lifted off a table. The hairline border is
   what separates the book from the band, and it does the job without putting
   a tint anywhere.

   The gutter gradient stays. That one is inside the book and is what says the
   two pages are one sheet folded, which is a different claim entirely. */
.bk-w.bk-scope.bk-home .folio__book {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--folio-h);
  background-color: var(--color-beeswax-cream);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The binding. A soft gradient across the gutter rather than a drawn line: a
   1px rule down the middle reads as two boxes side by side, and the thing that
   actually says "book" is the paper curving into the fold and taking the light
   with it. Symmetrical, so neither page looks like the one on top. */
.bk-w.bk-scope.bk-home .folio__book::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 56px;
  transform: translateX(-50%);
  background-image: linear-gradient(to right,
    rgba(34, 64, 94, 0) 0%,
    rgba(34, 64, 94, 0.045) 38%,
    rgba(34, 64, 94, 0.11) 50%,
    rgba(34, 64, 94, 0.045) 62%,
    rgba(34, 64, 94, 0) 100%);
  pointer-events: none;
}

/* min-height: 0, which is the whole reason the pages stay inside the covers.

   A grid item's min-height is `auto`, meaning it refuses to shrink below its
   own content — so the recto, whose content is a full article, was 484px tall
   inside a 452px book and the bottom of both pages was being cut off by the
   book's overflow. Zeroing it lets the row height win, which is what the text
   mask and the fade at the foot of the page are measured against. */
.bk-w.bk-scope.bk-home .folio__page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: clamp(var(--space-4), 3.4vh, var(--space-6));
}

/* ---- Verso: the cover ---- */
/* No separate ground. This page was --color-cream-deep, which is the exact
   value the section behind it takes, so the left half of the book was
   invisible — the title and the seal appeared to be floating on the band while
   only the recto looked like paper. Both pages are the one sheet now, which is
   also what an open book actually is; the fold is the gutter gradient's job,
   not a change of colour, and the cream-deep ground behind the whole thing is
   what makes the paper read as paper. */
/* Start-aligned, with the imprint pushed to the foot by its own auto margin —
   not space-between. space-between splits the free space evenly above and
   below the seal, so on a tall page the mark drifted into the dead middle of
   the cover with a gulf between it and the title it belongs to. A colophon
   sits under the title block, not halfway down the page. All the slack goes
   below it now, and the imprint still holds the bottom edge. */
.bk-w.bk-scope.bk-home .folio__page--cover {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.bk-w.bk-scope.bk-home .folio__page--cover .folio__imprint { margin-top: auto; }

.bk-w.bk-scope.bk-home .folio__kicker {
  margin: 0;
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

.bk-w.bk-scope.bk-home .folio__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h3);
  line-height: var(--leading-display);
}

.bk-w.bk-scope.bk-home .folio__link {
  color: var(--color-deep-water);
  text-decoration: none;
}

.bk-w.bk-scope.bk-home .folio__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* The gold rule under the title, drawn by the subtitle rather than an <hr>:
   one element fewer for a line that only ever appears in one place. */
.bk-w.bk-scope.bk-home .folio__sub {
  max-width: 34ch;
  margin: var(--space-3) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-honey-gold);
  color: var(--color-deep-water);
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-style: italic;
  line-height: 1.45;
  opacity: 0.86;
}

/* The house mark, sitting under the title block — where a colophon sits on a
   real title page. Sized off the page rather than fixed so it stays in
   proportion as the spread narrows. The top margin is the gap to the subtitle
   above it and the only thing setting its height on the page now that the
   cover no longer distributes its slack. */
.bk-w.bk-scope.bk-home .folio__seal {
  display: block;
  width: clamp(76px, 9vw, 116px);
  margin-block: clamp(var(--space-5), 5vh, var(--space-7)) var(--space-4);
}

.bk-w.bk-scope.bk-home .folio__seal img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-w.bk-scope.bk-home .folio__imprint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: var(--color-deep-water);
  opacity: 0.66;
  font-size: var(--fs-caption);
  line-height: var(--leading-tight);
}

/* ---- Recto: where the article starts ---- */
.bk-w.bk-scope.bk-home .folio__page--text { text-align: left; }

/* The running head. Small caps at the top of the page, the way a printed book
   repeats its title above the text block. */
.bk-w.bk-scope.bk-home .folio__runhead {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--color-deep-water);
  opacity: 0.5;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The text block, faded out at the foot.

   The mask is doing the honest thing here: the article does not stop at the
   bottom of this page, it carries on, and text that simply ends at a hard edge
   claims otherwise. It also means the copy never has to be cut to a line
   count — whatever does not fit dissolves, and the link underneath is the way
   on. */
.bk-w.bk-scope.bk-home .folio__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  color: var(--color-deep-water);
  font-size: var(--fs-small);
  line-height: 1.72;
  text-align: justify;
  hyphens: auto;
}

.bk-w.bk-scope.bk-home .folio__body p { margin: 0 0 var(--space-3); }

/* The drop cap. Three lines of the body, in the display face — the one piece
   of typesetting that says "this is a printed page" without any texture or
   ornament being involved. */
.bk-w.bk-scope.bk-home .folio__body > p:first-child::first-letter {
  float: left;
  margin: 0.04em var(--space-2) 0 0;
  color: var(--color-deep-water);
  font-family: var(--font-display);
  font-size: 3.1em;
  font-weight: 600;
  line-height: 0.86;
}

.bk-w.bk-scope.bk-home .folio__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-home .folio__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-h6);
  font-weight: 700;
  text-decoration: none;
}

.bk-w.bk-scope.bk-home .folio__more span { transition: transform var(--dur-calm) var(--ease-calm); }
.bk-w.bk-scope.bk-home .folio__more:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.bk-w.bk-scope.bk-home .folio__more:hover span { transform: translateX(4px); }

.bk-w.bk-scope.bk-home .folio__time {
  color: var(--color-deep-water);
  opacity: 0.6;
  font-size: var(--fs-caption);
}

/* A closed spread is not a destination. Its links stay in the document for
   crawlers and keep working the moment it opens, but they are out of the tab
   order while they are dimmed — tabbing into a 30%-opacity page that is half
   off the side of the screen is a trap, not a shortcut. insights.js sets
   inert, which removes them from the tree; this is the visual half of it. */
.bk-w.bk-scope.bk-home .folio:not(.is-open) .folio__link,
.bk-w.bk-scope.bk-home .folio:not(.is-open) .folio__more { cursor: default; }

/* ---- One column ----
   A two-page spread needs width that a phone does not have, so below this the
   pages stack: cover over text, one column, and the fold runs across instead
   of down. The book is still a book, just a taller one. */
@media (max-width: 767px) {
  .bk-w.bk-scope.bk-home .insights { --folio-w: min(420px, 86vw); }

  /* height: auto, and this is the one that bit. The desktop book is pinned to
     --folio-h so the text mask has a fixed edge to fade against; stacked, the
     pages have to be free to take the height they need. Left on the fixed
     value the book collapsed to a 2px sliver on a phone — the pages carry
     min-height: 0, so there was nothing to hold it open. */
  .bk-w.bk-scope.bk-home .folio__book {
    grid-template-columns: 1fr;
    height: auto;
  }

  /* The fold, as a rule on the seam rather than a gradient down the middle.
     The gutter gradient is positioned at 50% of the book, which on two stacked
     pages of unequal height is not where the pages actually meet — it would
     have drawn a shadow across the middle of the cover. A hairline on the
     boundary itself cannot be in the wrong place. */
  .bk-w.bk-scope.bk-home .folio__book::after { display: none; }

  .bk-w.bk-scope.bk-home .folio__page--cover { border-bottom: 1px solid var(--border-hairline); }

  /* Capped and faded, same as the desktop page but against a height taken from
     the screen rather than from the book.

     This ran unmasked for a while, on the reasoning that a stacked page grows
     to fit its text so there is nothing to fade against. That was true until
     the copy grew to fill a 820px desktop page — at which point the phone was
     rendering five full paragraphs inline and the band came to 2010px, which
     is an enormous scroll for what is meant to be a glance at two articles.
     The fade is the honest thing here anyway: the article does not stop, and
     the link underneath is the way on. */
  .bk-w.bk-scope.bk-home .folio__body {
    max-height: 44vh;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-home .folio,
  .bk-w.bk-scope.bk-home .folio__more span { transition: none; }
}