/* =========================================================================
   addictions.css — Interior template, Addictions section
   The Beekeeper House

   One stylesheet for all five Addictions pages. The sitemap asks for the
   same layout and design on every page in the section, so the template is
   written once here and each page supplies only its own content.

   Nothing in this file invents a colour, size or space value: every
   declaration resolves to a token from variables.css, and the chrome
   (header, nav, buttons, form, footer, contact float) is the shared
   components.css layer untouched.

   The homepage's section styles live in pages/home.css and stay there —
   they are scroll-driven and built around a full-screen opening, which an
   interior page does not have. What is shared is the vocabulary, not the
   implementation: cream ground, deep-water headings, Lora over Lato, the
   comb motif, gold kept to roughly 4% of any composition.
   ========================================================================= */


/* =========================================================================
   Page opening
   Shorter than the homepage hero on purpose. The homepage earns a full
   screen of photography because it has nothing to say yet; an interior
   page is already an answer to a question, so it states its title and
   moves on. Roughly two-thirds of a viewport, floored so it cannot
   collapse on a short landscape screen.

   ---- Why the floor is a px value and not just a vh ----
   This is a flex box with a min-height, which means the height is
   max(floor, content). For most pages the floor won, but four of the
   forty-two carry a standfirst long enough to beat it — behavioural-
   addiction and prescription-drug-addiction run to five lines — and those
   pages opened 121px taller than the rest. Clicking between two pages in
   the same menu made the banner jump, which is the one thing a masthead
   must never do.

   Measured across all forty-two interior pages, the tallest opening is
   580px of content at 1920 (where the H1 is at its 64px step) and 545px
   from 1024 to 1280. With 112px of padding that is 692px, so the floor is
   700px: above anything the copy can reach, which puts the height back in
   the hands of the viewport where it belongs. Every page is now identical
   at a given window size.

   Two consequences to keep in mind when editing this:
     - The floor has to stay ahead of the copy. Add a sixth line to any
       standfirst and the bounce comes back; raise the floor with it.
     - Below 1024 the same trick does not work. The tallest mobile opening
       is 651px of content at 390 wide, and a floor above that would be
       88% of a phone screen — a banner you cannot see past. There the
       height still follows the copy; the padding is trimmed instead so the
       spread is smaller than it was.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .page-hero {
  position: relative;
  display: flex;
  /* Top-aligned, and that is the whole point of it.
     Centring looked like the way to steady this, but it does the opposite:
     the block is a different height on every page — the standfirst runs
     from 102 to 349 characters — and centring a taller block starts it
     higher. So the eyebrow and H1 landed at a different y on every page and
     the masthead appeared to jump as you moved between them.
     Anchored to the top, the first line starts at exactly padding-top on
     all forty-two pages. The band is already a fixed floor, so the copy
     simply runs further down the frame on the longer pages, which is what
     should vary — not where the page begins. */
  align-items: flex-start;
  /* A floor, not a fixed height — and the floor is set ABOVE the tallest
     opening on the site rather than below it.
     A fixed height was the wrong fix: with overflow hidden and the content
     centred, any page whose copy ran taller than the box lost the top of its
     H1 behind the header. alcohol-rehab was clipped by 33px.
     Measured, the tallest opening is a four-line title over a four-line
     standfirst (client-testimonials, why-us-clients-choose-us) at ~575px.
     The floor therefore clears that with room to spare, which means every
     page hits the floor exactly — identical at a given window size — and no
     page can ever be cropped. */
  min-height: 60vh;
  /* The header is fixed and floats over the top of this band, so the top
     padding has to clear it or the eyebrow — the first line on the page —
     disappears underneath. It is measured off the header's own token plus
     its 16px inset, not a guessed number, so the two stay in step if the
     header height ever changes. The bottom keeps the smaller value: the
     block is centred in what is left, which reads level once the header's
     strip is discounted. */
  padding-block: calc(var(--header-height) + var(--space-4)) var(--space-6);
  overflow: hidden;
  background-color: var(--color-deep-water);
  color: var(--text-inverse);
  isolation: isolate;
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-inner .page-hero {
    min-height: max(760px, 68vh);
    padding-block: calc(var(--header-height) + var(--space-5)) var(--space-7);
  }
}

.bk-w.bk-scope.bk-inner .page-hero__media,
.bk-w.bk-scope.bk-inner .page-hero__media picture,
.bk-w.bk-scope.bk-inner .page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk-w.bk-scope.bk-inner .page-hero__media { z-index: -2; }

/* Mirrored. On three of the banners the subject sits in the left half,
   directly under the headline; flipping the frame moves it across to the
   right and leaves the type on open ground. Only safe because none of these
   frames contains text or anything else that would read as reversed. */
.bk-w.bk-scope.bk-inner .page-hero--flip .page-hero__media img { transform: scaleX(-1); }

/* Two washes, not one. A flat overlay at the strength the headline needs
   kills the photograph outright; a gradient keeps the top of the frame
   legible under the solid header and lets the image survive lower down,
   where the type sits over the heaviest part of it. */
.bk-w.bk-scope.bk-inner .page-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(21, 41, 60, 0.72) 0%,
      rgba(21, 41, 60, 0.38) 38%,
      rgba(21, 41, 60, 0.78) 100%);
}

/* ---- A heavier wash, for a bright frame ----
   The gradient above is tuned to the frames the site mostly uses: a subject
   against foliage, middling in tone, where 0.38 through the middle is
   enough. It is not enough under a white-painted fence in full sun, which
   is what the left half of the Addiction Treatment banner is.

   Measured rather than eyeballed. Sampling the composited banner behind the
   text block and comparing it with the cream the type is set in, the five
   Addictions banners run 7.1 to 8.8 to 1 — except that one, which came out
   at 4.6. Same wash, same type, a third of the contrast, purely because of
   what is behind it.

   0.56 through the middle puts it at 6.4 mean and 3.4 at the single
   brightest pixel under the type, which is a better worst case than any of
   the other four including the reference page. Going further — 0.62 reads
   as 7.2 mean — starts to flatten the photograph into a navy rectangle, and
   the point of a photographic banner is that it is photographic.

   Per page rather than site-wide, because raising the floor everywhere
   would darken four banners that already measure fine and would change the
   reference page, which is settled. */
.bk-w.bk-scope.bk-inner .page-hero--wash-deep .page-hero__wash {
  background:
    linear-gradient(to bottom,
      rgba(21, 41, 60, 0.80) 0%,
      rgba(21, 41, 60, 0.56) 38%,
      rgba(21, 41, 60, 0.84) 100%);
}

.bk-w.bk-scope.bk-inner .page-hero__inner { width: 100%; }

.bk-w.bk-scope.bk-inner .page-hero__title {
  margin-top: var(--space-3);
  max-width: 20ch;
  color: var(--text-inverse);
}

.bk-w.bk-scope.bk-inner .page-hero .eyebrow { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .page-hero__standfirst {
  margin-top: var(--space-4);
  /* Wider than the reading measure on purpose. This is the element that
     varies most between pages, and every line it saves is a line the banner
     does not have to grow to hold. */
  max-width: 72ch;
  font-size: var(--fs-lead);
  line-height: var(--leading-body);
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-inner .page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- Centred banner ----
   Opt-in, per page. The default banner sets its type on the container's left
   edge, which is what lines the headline up with the breadcrumb and the
   first section below it — so centring is not something to do site-wide
   without redrawing that relationship on all 40 pages.

   Centred on the X axis — the horizontal one — which means vertically
   centred in the banner. The type does not move sideways at all: it keeps
   the container's left edge, the same indent the breadcrumb and every
   section below it start from.

   Two earlier readings of "centred" were wrong and are worth recording so
   they are not tried again. Centring the text itself gave the eyebrow,
   headline, standfirst and buttons four different left edges. Shrink-
   wrapping the group and centring that kept the edges straight but pushed
   the whole block into the middle of the photograph, away from the indent
   the rest of the page is built on.

   So the only axis that moves is the vertical one: the block sits on the
   banner's horizontal centre line, at the left indent. */
/* The banner pads 132px at the top to clear the fixed header and 64 at the
   foot, so a block hung off flex-start sits 28px above the true middle.
   Matching the two paddings puts the block on the banner's own centre line
   rather than on the middle of what is left after the header's allowance —
   and it is safe to drop the top pad here because a centred block of this
   depth starts around 160px down, well clear of the header it was
   protecting against. */
/* Sits below the centre line rather than on it. Dead-centre was measured
   and correct, and it still read high: the banner's lower half is the
   quieter part of the photograph and the breadcrumb bar closes the frame
   underneath, so type on the true middle leaves more air below it than
   above. The extra top padding pushes the block down about a fifth of the
   remaining space, which is where it looks centred. */
.bk-w.bk-scope.bk-inner .page-hero--centred {
  align-items: center;
  padding-top: calc(var(--space-7) + var(--space-8));
}

.bk-w.bk-scope.bk-inner .page-hero--centred .page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.bk-w.bk-scope.bk-inner .page-hero--centred .page-hero__actions { justify-content: flex-start; }


/* =========================================================================
   Breadcrumb
   Sits on the cream directly under the photograph, where it reads as the
   first line of the page rather than as furniture over the image.
   ========================================================================= */

/* A step down from --space-4. One line of small type in a 73px bar was the
   tallest piece of furniture at the top of the page and the one with least
   to say; at --space-3 it is 57px and reads as a caption over the sub-nav
   rather than as a band of its own. The crumbs are still a 41px target,
   which is what stops this going down another step. */
.bk-w.bk-scope.bk-inner .crumbs {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
  background-color: var(--bg-page);
}

.bk-w.bk-scope.bk-inner .crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
}

.bk-w.bk-scope.bk-inner .crumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .crumbs__list li + li::before {
  content: "\203A";
  color: var(--color-morning-blue);
}

.bk-w.bk-scope.bk-inner .crumbs a {
  color: var(--color-beekeeper-blue);
  text-decoration: none;
}

.bk-w.bk-scope.bk-inner .crumbs a:hover { text-decoration: underline; }

.bk-w.bk-scope.bk-inner .crumbs [aria-current="page"] { color: var(--text-primary); }


/* =========================================================================
   In-page navigation
   The live pages carry a tab strip above the body — "What is…", "Symptoms",
   "Treatment", "Why Beekeeper House", "FAQs". Tabs hide content behind a
   control; here the same labels become anchors to sections that are all
   present in the document, so the page prints, searches and deep-links
   properly. Sticky, so it stays available on a long page.
   ========================================================================= */

/* The seam above it is the breadcrumb's hairline and a step of tone, and
   nothing else. It has been three things now — a printed pattern band, a
   gradient strip, then a cast shadow on the inside of this edge — and each
   one was a way of drawing the join rather than letting the two planes sit
   next to each other. The folio note in home.css got there first: on a pale
   ground a hairline separates and a shadow smudges. So: deeper cream than
   the bar above, the hairline that bar already carries, and no third thing.

   Deliberately no box-shadow. If a seam is ever wanted here again, the thing
   to reach for is tone or a rule, not elevation. */
.bk-w.bk-scope.bk-inner .subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--bg-alt);
  border-bottom: 1px solid var(--border-hairline);
}

/* No padding here, deliberately. This carried `padding-block: var(--space-3)`
   for a long time and never once applied it: global.css resets `ul[class]`,
   which at 0-1-1 outranks a single class, so the declaration was quietly
   zeroed and the bar has always been 46px rather than the 78px it claimed.
   46px is the better bar, so the fix is to stop saying the other thing.

   The height comes from the links' own padding instead, which is where it
   should come from anyway — that is what keeps each one a 45px target. */
.bk-w.bk-scope.bk-inner .subnav__list {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

/* The bar scrolls when it does not fit, and the scrollbar is hidden — which
   is right on a phone, where a part-shown item is the affordance, and wrong
   on a desktop window, where it just reads as a cut-off word. An eight-item
   bar measured 1167px of content against 1117px of well at 1200: "Enquire"
   was clipped mid-word for anyone whose window was a little under the design
   width, or who browses zoomed.

   Seven gaps at 32px are 224px of that content. Taking them to 24px below
   the width where the bar is known to fit buys back 56px and settles it,
   without touching the spacing at the size the design was drawn at. */
@media (max-width: 1279px) {
  .bk-w.bk-scope.bk-inner .subnav__list { gap: var(--space-4); }
}

.bk-w.bk-scope.bk-inner .subnav__list::-webkit-scrollbar { display: none; }

.bk-w.bk-scope.bk-inner .subnav__list a {
  display: inline-block;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-calm) var(--ease-calm),
              color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .subnav__list a:hover {
  border-bottom-color: var(--color-honey-gold);
  color: var(--color-beekeeper-blue);
}

/* Anchored sections must clear both the sticky sub-nav and the header. */
.bk-w.bk-scope.bk-inner :target { scroll-margin-top: var(--space-9); }


/* =========================================================================
   Standard interior section head
   ========================================================================= */

.bk-w.bk-scope.bk-inner .sec-head { max-width: var(--measure); }
.bk-w.bk-scope.bk-inner .sec-head h2 { margin-top: var(--space-3); }
.bk-w.bk-scope.bk-inner .sec-head p { margin-top: var(--space-4); }

/* One of the brand drawings crowning a section heading — the flower over
   Symptoms here, the same device as the bee over Conditions and the rocks
   over Programmes on the homepage.

   72px tall with a --space-4 gap, which is not a choice made here: it is the
   figure home.css settled all four of its marks on, and the note there
   explains why it is height and not width (the drawings are 194x240,
   233x300 and 360x360 — different shapes, and height is what the eye reads
   as "how big is it" when they are stacked above headings down a page).
   Copied so the interior marks and the homepage marks are one size.

   Alignment is the section's business, per that same note: these heads are
   ranged left, so the mark hangs from the column's left edge rather than
   centring the way the homepage's do under their centred heads. */
/* =========================================================================
   The standalone sub-heading
   A heading that starts a new block partway down a section — not the
   section's own title, but a divider between two things inside it.

   It was set with a plain margin, which gave it the same air above as
   below: the eye read it as floating between the block that ended and the
   one starting, belonging to neither. A division has to be asymmetric.
   128px above and 32px below, so it binds downward to the list it names
   and breaks upward from whatever it follows.

   The mark is what fills the space the division opens. Deliberately small
   — 48px against the 72px of a section head — because this is a sub-level
   and the graphic should say so. It is also why this is a component rather
   than a blanket rule: 193 of the site's 202 .sec-head blocks carry no
   mark, and the nine that do are load-bearing. Putting a gold graphic on
   every heading would spend the whole gold budget on decoration and leave
   nothing to mark the places that matter.
   ========================================================================= */

/* 128px above a subhead was a section's worth of air inside a section. On a
   band carrying two of them — the Reset Bali's "What Is Included" and
   "A Typical Day" — that was 256px of nothing, and it read as the section
   having ended twice. 64px still separates a sub-block clearly; it is the
   same figure the band uses for its own top and bottom padding, so a
   subhead now divides at the same weight the section does, not twice it. */
.bk-w.bk-scope.bk-inner .subhead {
  margin-top: var(--space-7);
  margin-bottom: var(--space-5);
}

/* A subhead that opens a second list inside the same column is not starting a
   new part of the band — it is the other half of one panel. The section-sized
   top margin above pushed the pair 128px apart, which read as two unrelated
   things floating in a column and left the copy beside them sitting next to a
   gap. Paired, they group. */
.bk-w.bk-scope.bk-inner .subhead--list-pair { margin-top: var(--space-6); }

/* ---- A subsection set as a panel ----
   The brief files "Diagnosis and Timing" as an H3 under the PTSD symptoms.
   As a .subhead over prose it arrived as a grey tail after the list: 128px
   of air, a heading, then a paragraph holding half the width — and widening
   the paragraph is not available, because past the measure a line gets
   harder to read, not fuller.

   The copy is the brief's and stays the brief's word for word, so the design
   is in the container rather than in the writing. An inset panel makes the
   subsection an object on the page instead of the leftover under one, and
   ranging the heading against the prose fills the width the paragraph alone
   could not.

   The card treatment is the one .reveal__card and .enquiry-card already
   carry — hairline, large radius, white, the card shadow — so it arrives as
   something the page contains rather than as a new kind of thing. White
   also lifts it off the pattern tile this section is laid on. */
.bk-w.bk-scope.bk-inner .subpanel {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

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

/* 1 / 1.4 rather than an even split: the heading is three words and needs
   nothing like half the panel, and the prose column lands at the measure
   with the cap below holding it there. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .subpanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-7);
    align-items: start;
  }
}

/* ---- The same ranging, without the card ----
   Where the subsection has a band to itself the panel is redundant: a white
   card inside a full-width ground is a plane on a plane, and on deep water
   it would fight the band rather than sit in it. The grid and the measure
   are what is wanted there, not the chrome. */
.bk-w.bk-scope.bk-inner .subpanel--bare {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.bk-w.bk-scope.bk-inner .subpanel__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.bk-w.bk-scope.bk-inner .subpanel__body { max-width: var(--measure); }

.bk-w.bk-scope.bk-inner .subpanel__body > p + p { margin-top: var(--space-4); }

.bk-w.bk-scope.bk-inner .subhead__mark {
  display: block;
  width: auto;
  height: 48px;
  margin: var(--space-9) 0 var(--space-3);
  opacity: 0.9;
}

/* Whichever comes first owns the break. With a mark above it the heading
   sits tight under the graphic, or the 128px would open twice and leave
   the mark stranded at the top of the gap. */
.bk-w.bk-scope.bk-inner .subhead__mark + .subhead { margin-top: 0; }

/* Bound to the block beneath it: a .detail__list--joined opens with 96px
   of its own margin, which would reinstate the symmetry this just fixed.

   Its rule goes too. That border exists to separate the list from a card
   grid above it, and the list's first item already draws its own — with a
   subhead in between, both were painting and the section showed two
   parallel hairlines 32px apart. */
.bk-w.bk-scope.bk-inner .subhead + .detail__list--joined {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bk-w.bk-scope.bk-inner .section--inverse .subhead { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .sec-head__mark {
  display: block;
  width: auto;
  height: 72px;
  margin: 0 0 var(--space-4);
}

/* Centred head, centred mark. */
.bk-w.bk-scope.bk-inner .sec-head--centre .sec-head__mark { margin-inline: auto; }

.bk-w.bk-scope.bk-inner .sec-head--centre {
  margin-inline: auto;
  text-align: center;
}

/* A second head inside a section rather than a section of its own. The card
   grid and the detail it indexes used to be two sections, which put a full
   section's padding and a second H2 between a control and the thing it
   controls — they read as unrelated, and on addiction-treatment the two H2s
   were the same six words. Merged, the detail block keeps its own label but
   steps down to an H3 and sits closer, so it reads as the continuation of
   the grid above it. */
.bk-w.bk-scope.bk-inner .sec-head--sub {
  margin-top: var(--space-7);
  scroll-margin-top: var(--space-9);
}

.bk-w.bk-scope.bk-inner .sec-head--sub h3 { margin-top: var(--space-2); }

/* The comb, reduced to a rule with a single cell in it. Used to close a
   section head where a bare heading would sit too flat. */
.bk-w.bk-scope.bk-inner .comb-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.bk-w.bk-scope.bk-inner .comb-rule::before,
.bk-w.bk-scope.bk-inner .comb-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .sec-head:not(.sec-head--centre) .comb-rule::before { display: none; }

.bk-w.bk-scope.bk-inner .comb-rule__cell {
  width: 14px;
  height: 16px;
  flex: none;
  background-color: var(--color-honey-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.bk-w.bk-scope.bk-inner .section--inverse .comb-rule::before,
.bk-w.bk-scope.bk-inner .section--inverse .comb-rule::after {
  background-color: var(--border-hairline-inverse);
}


/* =========================================================================
   Intro
   ========================================================================= */

.bk-w.bk-scope.bk-inner .intro__body { max-width: var(--measure); }

/* Copy that follows a section head directly. .sec-head carries no bottom
   margin and .intro__body no top one, so the two sat flush.

   space-4 because that is what the bands with real copy on these same
   pages already set inline on this exact pair. Matching it means the gap
   stays put when approved copy replaces a placeholder, instead of the
   section shifting the day the words land. The inline declarations still
   win over this rule; it only covers the pairs that set nothing. */
.bk-w.bk-scope.bk-inner .sec-head + .intro__body { margin-top: var(--space-4); }

/* ---- Prose across the full well ----
   A standalone block of two paragraphs at the reading measure leaves most
   of the container empty to its right, which is what makes a section look
   like it stopped early.

   Two columns rather than a longer line: widening the measure itself would
   push past 90 characters, and a 90-character line is harder to read, not
   fuller. Split in two, each column keeps a proper measure and the block
   fills the well.

   break-inside: avoid so a paragraph is never cut across the gutter — with
   two paragraphs that puts one in each column, which is the arrangement
   this is for. */
.bk-w.bk-scope.bk-inner .intro__body--wide { max-width: none; }

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .intro__body--wide {
    columns: 2;
    column-gap: var(--space-7);
  }

  .bk-w.bk-scope.bk-inner .intro__body--wide > p {
    break-inside: avoid;
    margin-top: 0;
  }

  .bk-w.bk-scope.bk-inner .intro__body--wide > p + p { margin-top: 0; }

  /* A heading inside the block is the block's title, not the first item in
     its first column — left in the flow it sat in column one and pushed
     that column's prose 64px below the other's. */
  .bk-w.bk-scope.bk-inner .intro__body--wide > h3 {
    column-span: all;
    margin-bottom: var(--space-4);
  }
}

.bk-w.bk-scope.bk-inner .intro__body .lead { color: var(--text-primary); }


/* =========================================================================
   Icon chip
   The client's brand pictograms. They arrived as two families — half drawn
   on a baked-in cream disc, half free-standing — so the discs were keyed
   out and the disc is drawn here instead. One mark, any ground.

   Sized in ems off the chip so a single width change scales both.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .icon-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-beeswax-cream);
}

/* The <picture> is sized as well as the <img>. It is a wrapper with no
   intrinsic size, so a percentage height on the image inside it resolves
   against nothing and the whole mark collapses to 0x0 — the same reason
   global.css sizes <picture> on every cover frame in the system. */
.bk-w.bk-scope.bk-inner .icon-chip picture {
  width: 62%;
  height: 62%;
}

.bk-w.bk-scope.bk-inner .icon-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The disc colour follows the ground the chip actually sits on, not the
   section it happens to be in: most of these are inside white cards that
   sit on a cream section, and keying off the section painted a white disc
   onto a white card, which left the mark floating with no chip at all.

   Cream is therefore the default (white cards), and the two places that sit
   directly on the cream ground ask for white. */
.bk-w.bk-scope.bk-inner .journey-list .icon-chip,
.bk-w.bk-scope.bk-inner .holistic__item .icon-chip,
.bk-w.bk-scope.bk-inner .linkout .icon-chip,
.bk-w.bk-scope.bk-inner .notice .icon-chip,
.bk-w.bk-scope.bk-inner .icon-chip--on-cream { background-color: var(--color-white); }

/* On deep water, a wash rather than a solid: a row of cream discs on a dark
   band is more light than that section's composition can carry. */
.bk-w.bk-scope.bk-inner .section--inverse .icon-chip {
  background-color: rgba(250, 246, 238, 0.10);
}

/* Unless the chip is inside a white card that happens to be in a dark
   section, which is what .treats__cell and .prog are. The rule above
   assumes the disc sits on the navy; on white it resolves to a 10% cream
   wash over white — invisible — so those icons lost their circle entirely
   and floated on the card. The ground is what decides, not the band. */
.bk-w.bk-scope.bk-inner .section--inverse .treats__cell .icon-chip,
.bk-w.bk-scope.bk-inner .section--inverse .prog .icon-chip {
  background-color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-inner .icon-chip--lg { width: 72px; height: 72px; }


/* =========================================================================
   "…We Treat" index
   The list of conditions each page names. A comb of cells rather than a
   bulleted list: this is the one place on the page where the mark's
   geometry does real work, because the set is genuinely a grid of like
   things.

   Where the source gives a description for an item the cell is a link to
   its own block further down; where it gives only a name — the Addiction
   Treatment page's illicit-drug list, for instance — the cell is inert
   text, because a link to nothing is worse than no link.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .treats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .bk-w.bk-scope.bk-inner .treats__grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
  }
}

.bk-w.bk-scope.bk-inner .treats__cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-decoration: none;
  /* The nineteen medications include "Dextroamphetamine" and
     "Methylphenidate", and at 390px the grid falls to two 164px columns.
     A word wider than its cell does not stay in it: it ran past the padding
     and pushed the whole document 8px sideways, so the page scrolled
     horizontally on a phone.

     `anywhere` rather than `break-word` on purpose. Only `anywhere` feeds
     back into intrinsic sizing, which is what a grid track measured from
     min-content actually reads; `break-word` would have wrapped the glyphs
     and left the track just as wide. It costs nothing when the word fits,
     which is every other label on the site. */
  overflow-wrap: anywhere;
  transition: border-color var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner a.treats__cell:hover {
  border-color: var(--color-beekeeper-blue);
  background-color: var(--bg-alt);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner a.treats__cell:hover { transform: none; }
}

/* The single cell of the mark, at bullet size. Blue by default; the gold
   one is reserved for the hover state, which keeps the gold count on a
   twenty-cell grid at zero until someone reaches for it. */
.bk-w.bk-scope.bk-inner .treats__cell::before {
  content: "";
  flex: none;
  width: 16px;
  height: 18px;
  background-color: var(--color-morning-blue);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner a.treats__cell:hover::before { background-color: var(--color-honey-gold); }

/* ---- Feature variant ----
   Used where the set is four named groups rather than a long index of
   substances. Four items have room to be cards; nineteen medications do
   not, and giving those a pictogram apiece would mean repeating ten icons
   across them, which says nothing. So the icons appear here only.

   The hexagon bullet comes off — the mark is doing that job now. */
.bk-w.bk-scope.bk-inner .treats__grid--feature {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}

.bk-w.bk-scope.bk-inner .treats__cell--feature {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  box-shadow: var(--shadow-card);
}

.bk-w.bk-scope.bk-inner .treats__cell--feature::before { display: none; }

/* ---- On deep water ----
   The cell is a white card and stays one: against navy it reads as a tile
   lifted off the ground, which is the same thing it is doing on cream.

   The colour has to be restated all the same. `.section--inverse a` is the
   site-wide rule that turns links pale honey on a dark ground, and at 0-2-0
   it outranks `.treats__cell`'s own 0-1-0 colour — so the label came out
   pale honey on white, which is close to unreadable and was invisible in
   the source, where both declarations look correct. Hover keeps the tint it
   has on cream; the card is white either way, so nothing about the
   interaction depends on the band behind it. */
.bk-w.bk-scope.bk-inner .section--inverse a.treats__cell,
.bk-w.bk-scope.bk-inner .section--inverse a.treats__cell:hover { color: var(--text-primary); }


/* =========================================================================
   The definition band
   "What is <condition>?" — the one section on an Addictions page whose job
   is to say what the thing actually is, before the page starts talking
   about treating it.

   It arrived as a .detail__list with a single item in it, which is the
   wrong component for one entry: that pattern earns its hairlines by
   repetition, and with nothing to separate you get a lone label in a wide
   empty column and two rules around a paragraph.

   The first rebuild went the other way and overcorrected — the clinical
   sentence blown up to display size with a numbered three-column index
   under it. Set large, a definition is still a definition; it carries no
   idea worth that much type, and the columns underneath read as a generic
   row of value propositions. Both versions were the same mistake in
   opposite directions: asking text alone to hold the page's only dark
   band.

   So the band holds a photograph instead. It bleeds off the left edge of
   the screen and runs the full height of the section, top rule to bottom
   rule, with the copy in a well on the right whose outer edge lines up
   with the container every other section sits in. The photograph does the
   work of making the band worth its ground, and the copy goes back to
   being copy — a heading, the comb rule the template already closes heads
   with, and two paragraphs at a comfortable measure.

   Deliberately not the .split pattern used twice elsewhere on this page.
   That one is a rounded, shadowed frame inside the container, which reads
   as a picture placed on the page. This bleeds to the edges and is cropped
   by the band, which reads as the page opening onto something — a
   different gesture, which is the point of using it here.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .condition {
  /* The section's own padding is not used: the media has to reach the top
     and bottom rules of the band, and padding on the section would hold it
     off them. Each half carries its own instead, which is also why this
     does not take the .section class. */
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
}

.bk-w.bk-scope.bk-inner .condition__copy {
  padding-block: var(--space-7);
  padding-inline: var(--grid-margin);
}

/* The head is a real .sec-head, not a lookalike. Beyond inheriting the
   template's own head spacing, that is what gives .comb-rule its
   left-aligned form: the rule that hides the leading hairline is written as
   `.sec-head:not(.sec-head--centre) .comb-rule::before`, so outside a
   sec-head the comb came out with a line on both sides and the cell
   floating in the middle of the column — the centred form, under a
   left-aligned heading. */
.bk-w.bk-scope.bk-inner .condition__copy .sec-head { max-width: none; }

.bk-w.bk-scope.bk-inner .condition__copy p {
  max-width: var(--measure);
  margin-top: var(--space-4);
  /* A shade back from full-strength cream. At 100% on deep water the body
     copy has the same weight as the heading above it and the two compete;
     this reads as clearly secondary and still measures 7.8:1. */
  color: rgba(250, 246, 238, 0.86);
}

/* ---- The photograph ----
   Stacked, it sits above the copy as a letterbox. A portrait crop here
   would take most of a phone screen before a word of the section had been
   read — the image is setting a tone, not being examined. */
.bk-w.bk-scope.bk-inner .condition__media {
  overflow: hidden;
}

.bk-w.bk-scope.bk-inner .condition__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* The same --focus hook .split__media img carries. This frame takes its
     height from the copy column beside it, so how much of a portrait
     photograph is cropped away is not knowable from here — a figure whose
     subject sits off the middle sets its own focus inline. Default centred,
     which is what every band that does not set it was already getting. */
  object-position: var(--focus, 50% 50%);
}

@media (min-width: 1000px) {
  /* ---- Lining the band's copy up with the section above it ----

     The band is full-bleed and the section above is a .split inside the
     1280px container, so nothing about the two is shared and the copy
     landed wherever the proportions happened to put it — 20px inside the
     image above it, which is close enough to look like a miss rather than
     a decision.

     The fix is to derive the copy well from the container rather than
     guess at it. Reproduced below is exactly the arithmetic .container and
     .split--wide perform between them:

       well      the container's inner width — its max width or the screen,
                 whichever is smaller, less a grid margin each side
       copy      1.05fr of that well once the 64px gutter is taken out,
                 which is the width .split--wide gives its media column
       gutter    the distance from the container's inner right edge to the
                 screen edge, which is the empty third track

     Give the copy the same width as the image above and hang it off the
     same right edge, and its left edge has nowhere to land except exactly
     under that image's left edge. It is not a nudged number — the two
     cannot come apart, at any width, because they are the same
     calculation.

     No viewport units in any of it, and that is deliberate: 50vw less half
     the container was the obvious way to find the gutter and it put the
     copy half a scrollbar proud of everything else, because vw counts the
     classic scrollbar and the container is laid out inside it. A
     percentage on a grid track resolves against this section's content
     box, which is the same width the container measures itself against.

     Below the container's max width the gutter subtraction goes negative
     and max() falls back to one grid margin — correct, because there the
     container runs edge to edge and its inner edge is one margin in. */
  .bk-w.bk-scope.bk-inner .condition {
    --cond-well: calc(min(100%, var(--container-max)) - 2 * var(--grid-margin));
    --cond-copy: calc((var(--cond-well) - var(--space-7)) * 1.05 / 2.05);

    display: grid;
    grid-template-columns:
      /* the photograph, bleeding from the screen's left edge */
      minmax(0, 1fr)
      /* the same gutter the split above puts between copy and image */
      var(--space-7)
      /* the copy well: the width of that image, so the edges coincide */
      var(--cond-copy)
      /* the empty track out to the screen edge */
      max(var(--grid-margin), calc((100% - var(--container-max)) / 2 + var(--grid-margin)));
    align-items: stretch;
    /* The band's depth. The copy is what sets the row height, and at this
       measure two paragraphs do not come to much — without a floor the
       photograph gets a letterbox crop and stops reading as a view of the
       grounds. */
    min-height: 34rem;
  }

  /* Column two is the gutter and column four is the margin; both stay
     empty, so the two real children are placed explicitly. */
  .bk-w.bk-scope.bk-inner .condition__media { grid-column: 1; }
  .bk-w.bk-scope.bk-inner .condition__copy { grid-column: 3; }

  /* The photograph fills its column rather than holding a ratio, and the
     way it does that is by coming out of the flow.

     `height: 100%` on the image was the obvious way and it silently did
     nothing: the figure's own height is auto, so there is no definite
     height for the percentage to resolve against, and the image fell back
     to its intrinsic 900x1125 — 935px tall in a band whose copy needed
     about 590. The section inherited that, and the "spread" was a very
     tall photograph with a short column of text stranded beside it.

     Positioned, the image contributes no height at all, so the row is
     sized by the copy alone and align-items: stretch gives the figure that
     height to fill. object-fit then does the cropping. */
  /* Two corners, not four. The photograph bleeds off the left edge of the
     screen, so its left corners are outside the viewport and rounding them
     would spend a radius where nobody can see it. The two that meet the
     copy get --radius-lg, the same 16px every card, frame and carousel
     stage on the site uses, so the edge reads as part of the same system
     rather than a cut.

     Logical properties rather than the four-value shorthand: these two are
     "the inline-end pair" — the side the text is on — which is what the
     rule actually means, and it stays true if the document direction ever
     flips. overflow: hidden is already on this element from the base rule
     above, which is what makes the radius clip the image inside it. */
  .bk-w.bk-scope.bk-inner .condition__media {
    position: relative;
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
  }

  .bk-w.bk-scope.bk-inner .condition__media img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  /* No horizontal padding: the well's own box is the measure now, and the
     gutter beside it is a grid track. Padding here would push the text off
     the alignment the tracks were written to produce. */
  .bk-w.bk-scope.bk-inner .condition__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-8);
    padding-inline: 0;
  }
}


/* =========================================================================
   Bleed
   The same gesture as .condition, mirrored, and with no ground of its own.

   Named .bleed, not .spread, because home.css already has a .spread with
   .spread__copy and .spread__media of its own — a centred pair of columns,
   nothing like this. No page loads both stylesheets today, so the clash
   was silent; it would have surfaced the first time anyone put this band
   on the home page or merged the two files.

   .condition bleeds its photograph off the LEFT edge and paints the band
   deep water, because that is what the Addictions template needs. Two
   bands on our-approach wanted the same "the page opens onto something"
   reading with the picture on the RIGHT, on the creams — and one of them
   carries a card grid underneath that still has to sit in the container.
   Neither is a .condition, so this is the mirror of it.

   A plain <div> inside an ordinary <section>, deliberately. The ground
   stays on the section, so ground alternation and check.py rule 2 go on
   reading the section's own class. A .condition--light modifier would have
   hidden a light band behind a class the checker treats as standing
   outside the alternation entirely.

   The column arithmetic is .condition's, reversed, and for the reason set
   out there it uses no viewport units: vw counts the classic scrollbar
   while the container is laid out inside it, so a vw-derived gutter lands
   half a scrollbar proud of every other section on the page.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .bleed { display: grid; gap: var(--space-6); }

.bk-w.bk-scope.bk-inner .bleed__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.bk-w.bk-scope.bk-inner .bleed__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .bleed {
    --bleed-well: calc(min(100%, var(--container-max)) - 2 * var(--grid-margin));
    /* 1 of the 1 / 1.05 .split--wide divides its row into, so this copy
       column is the same width as the copy column of every split on the
       page and its left edge lands on the container's. */
    --bleed-copy: calc((var(--bleed-well) - var(--space-7)) / 2.05);

    gap: 0;
    grid-template-columns:
      /* out to the screen's left edge, matching the container's margin */
      max(var(--grid-margin), calc((100% - var(--container-max)) / 2 + var(--grid-margin)))
      /* the copy well */
      var(--bleed-copy)
      /* the gutter the splits use between copy and image */
      var(--space-7)
      /* the photograph, bleeding to the screen's right edge */
      minmax(0, 1fr);
    align-items: stretch;
    /* The copy sets the row height and two paragraphs do not come to much;
       without a floor the photograph takes a letterbox crop. .condition's
       number, so the two gestures read at the same scale. */
    min-height: 34rem;
  }

  /* ---- More of the well to the copy ----
     The default splits the well near evenly, which suits a band of two or
     three paragraphs. Where the copy runs to a subhead and five — #eastern
     and #integrative on our-approach — an even split sets it in a column
     so narrow the band grows very tall, and the photograph grows with it
     until it is the loudest thing on the page. Two thirds to the copy
     brings the text back to a readable block and takes the picture down
     with it; the fourth track is minmax(0, 1fr), so the image simply
     yields whatever the copy takes. */
  .bk-w.bk-scope.bk-inner .bleed--wide-copy {
    --bleed-copy: calc((var(--bleed-well) - var(--space-7)) * 1.35 / 2.05);
  }

  /* Tracks one and three are empty, so both children are placed. */
  .bk-w.bk-scope.bk-inner .bleed__copy {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-7);
  }

  /* Two corners, not four: the right pair is off the screen. Logical
     properties — this is the inline-start pair, the side the text is on. */
  .bk-w.bk-scope.bk-inner .bleed__media {
    grid-column: 4;
    position: relative;
    border-radius: 0;
    border-start-start-radius: var(--radius-lg);
    border-end-start-radius: var(--radius-lg);
  }

  /* Out of the flow, so the row is sized by the copy and stretch gives the
     figure that height to fill — the trap .condition documents at length. */
  .bk-w.bk-scope.bk-inner .bleed__media img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}


/* =========================================================================
   Condition detail blocks
   One per item the source describes. Alternating hairlines rather than
   cards: twenty boxed panels in a column reads as a spreadsheet, and the
   copy here is prose, not data.
   ========================================================================= */

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

/* The descriptions now sit under the card grid that indexes them, inside
   the same band. They need more air than a plain margin — otherwise the
   first hairline reads as the bottom edge of the last card — so the gap
   opens up and a rule marks where the index stops and the reading starts. */
.bk-w.bk-scope.bk-inner .detail__list--joined {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

/* On the cream-deep ground of that band the hairlines need to be a shade
   stronger than they are on the page ground, or they disappear. */
.bk-w.bk-scope.bk-inner .section--alt .detail__item { border-top-color: rgba(34, 64, 94, 0.14); }
.bk-w.bk-scope.bk-inner .section--alt .detail__item:last-child { border-bottom-color: rgba(34, 64, 94, 0.14); }

.bk-w.bk-scope.bk-inner .detail__item {
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: var(--space-9);
}

.bk-w.bk-scope.bk-inner .detail__item:last-child { border-bottom: 1px solid var(--border-hairline); }

/* The name column is set in the display face at h3 size, so 22ch of it is a
   lot of ink, and the longest of these names — "Communicating Before
   Treatment Begins" — fills all four lines of it edge to edge. Against a
   48px gutter the body copy then starts while the heading is still going,
   and the two columns read as one crowded block.

   64px, and the column comes in to 20ch. Narrower on purpose: it makes the
   name wrap earlier and more evenly rather than running to the very edge of
   its track, which is what put it in the reader's way. The pair costs about
   30px of the body measure, which these paragraphs have to spare. */
/* ---- Titles, not labels ----
   The two-column treatment assumes the name is a label: two or three words
   naming a topic, with the prose beside it. The library's entries are
   article titles running 78 to 90 characters, and in a 25ch column
   "Cost of Alcohol Rehab in Thailand: A Clear, Line-by-Line 2026 Price
   Breakdown" comes out as eight lines of display type in a gutter.

   Stacked, the title gets the full measure and sits above its standfirst,
   which is how a list of articles reads everywhere else. */
.bk-w.bk-scope.bk-inner .detail__list--stacked .detail__item { display: block; }

.bk-w.bk-scope.bk-inner .detail__list--stacked .detail__name { max-width: 46ch; }

.bk-w.bk-scope.bk-inner .detail__list--stacked .detail__body { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .detail__item {
    display: grid;
    /* 16ch was too tight once the folio came off: the longest of these
       names, "Expert Clinicians, at PhD and Master's level", broke to five
       lines of one and two words, which reads as a column of fragments
       rather than as a heading.

       25ch, measured across the 25 multi-word names on the site: it is the
       width where the worst of them ("Eye Movement Desensitization and
       Reprocessing") comes down from three lines to two, and the average
       falls from 1.8 lines to 1.48 — about three words to the line. Wider
       buys almost nothing (28ch and 31ch leave the worst case at two lines
       too) and every centimetre of it comes off the body measure.

       The 96px gutter stays. That was the fix for the copy crowding the
       name, and it is not what is wrong here. */
    grid-template-columns: minmax(0, 25ch) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.bk-w.bk-scope.bk-inner .detail__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--text-primary);
}

/* The index number, set small and gold, is the section's whole gold
   allowance. It reads as an engraved folio rather than as decoration. */
/* The folio is off. It counted something nobody is counting — these lists
   are named ideas, not a ranking or a sequence to be worked through — and
   at h3 size beside a wrapping name it was reading as part of the heading.
   Hidden rather than cut from the markup, so the numbering can come back
   on any list that turns out to need it. */
.bk-w.bk-scope.bk-inner .detail__num { display: none; }

.bk-w.bk-scope.bk-inner .detail__num--keep {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-inner .detail__body {
  margin-top: var(--space-4);
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .detail__body { margin-top: 0; }
}

/* ---- The fold ----
   detail-more.js opens the list on its first item's first block and folds
   everything after it. The control is .link-underline, which the system
   already reserves for the foot of an index — which is what this is. Only
   the button reset is needed here.

   It sits under the block rather than inside it: the list is ruled prose and
   a control between two rules would read as another item in it. Tight to the
   teaser, because the fade above has to run straight into it — a full step
   of air between them and the gradient stops reading as "continues below"
   and starts reading as a paragraph that has simply gone pale. */
.bk-w.bk-scope.bk-inner .detail__more {
  margin-top: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}


/* The teaser's one visible block fades out rather than stopping flat.

   A mask, not a gradient overlay: an overlay has to be painted the colour of
   the ground behind it, and these lists appear on both creams depending on
   whether the section carries --alt. A mask takes the text away and leaves
   whatever is behind it, so it is right on either ground.

   The ramp starts at 55% so most of the block is at full strength and only
   the last line or two dissolve — fading the whole thing makes the copy read
   as broken rather than as continuing. The clamp is what guarantees there is
   something to fade: a two-line opening paragraph would otherwise be fully
   visible with a gradient over it and nothing behind, which promises more
   and shows none. */
.bk-w.bk-scope.bk-inner .detail__list--folded .detail__item--teaser .detail__body > :first-child {
  max-height: 11em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

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

/* The block closes on the last item's bottom rule, and while the tail is
   folded that item is off screen — so it was ending on an open edge. Folded,
   the teaser is the last thing on screen, so the closing rule goes to it.
   :last-child cannot see a fold, which is why this is a class. */
.bk-w.bk-scope.bk-inner .detail__list--folded .detail__item--teaser {
  border-bottom: 1px solid var(--border-hairline);
}

/* A folded item, both ways round.

   hidden="until-found" is content-visibility, not display — the UA sheet
   exempts it from `[hidden] { display: none }` on purpose, so the element
   keeps its box and everything that is not content keeps its height. Left
   alone, seventeen folded items on prescription-drug-addiction stacked up
   as seventeen empty 97px gaps: their own padding and rules, drawn around
   nothing. Stripping those is what actually closes the fold.

   The second rule is the fallback path, and it has to be written as a
   negation rather than as a bare [hidden]: `.detail__item` is display: grid
   from 900px up, which outweighs the UA's display: none, so without this a
   folded item on a browser with no until-found support would simply still
   be on the page. detail-more.js sets a bare hidden there, so the two
   selectors never both apply. */
.bk-w.bk-scope.bk-inner .detail__item[hidden] {
  padding-block: 0;
  border-block: 0;
}

.bk-w.bk-scope.bk-inner .detail__item[hidden]:not([hidden="until-found"]) {
  display: none;
}

/* ---- Opening the fold ----
   The items arrived and left in a single frame, because the hidden state
   is the `hidden` attribute and display is a discrete property with
   nothing to interpolate. Same mechanism as the nav panel: declare display
   in both states and put it in the transition list with allow-discrete, so
   the row stays rendered for the length of the close.

   opacity and transform only — both composited, so opening a nineteen-item
   list does not relayout the page nineteen times.

   Deliberately not staggered. On a list this long a per-item delay means
   the last row is still arriving a second after the control was pressed,
   and the reader has already started reading the first. They move
   together.

   The teaser's own tail blocks are hidden by the same script with the same
   attribute, so they are named here too and open with the rows. */
/* Both hidden states, not just one. detail-more.js hides with
   hidden="until-found" wherever the browser supports it — which is every
   current Chrome and Edge — and the first version of this rule excluded
   that exact value with :not([hidden="until-found"]). The animation was
   therefore correct and unreachable: it only ever applied on the fallback
   path. That is why the fold kept snapping.

   until-found does not hide with display: none, it hides with
   content-visibility: hidden, so that is the discrete property to carry
   here. Both are listed, because which one applies depends on the
   browser, and neither costs anything when it is not the one in use. */
.bk-w.bk-scope.bk-inner .detail__item,
.bk-w.bk-scope.bk-inner .detail__item--teaser .detail__body > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm),
              content-visibility var(--dur-calm) allow-discrete,
              display var(--dur-calm) allow-discrete;
}

.bk-w.bk-scope.bk-inner .detail__item[hidden],
.bk-w.bk-scope.bk-inner .detail__item--teaser .detail__body > [hidden] {
  opacity: 0;
  transform: translateY(-8px);
}

@starting-style {
  .bk-w.bk-scope.bk-inner .detail__item:not([hidden]),
  .bk-w.bk-scope.bk-inner .detail__item--teaser .detail__body > :not([hidden]) {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .detail__item,
  .bk-w.bk-scope.bk-inner .detail__item--teaser .detail__body > * { transition: none; }
}

/* ---- The list on deep water ----
   Ruled prose is the one component that has to be re-pitched for a dark
   ground rather than inheriting it. Three things name a colour outright:
   the rules between entries, the entry name, and the rule the fold moves
   onto the teaser.

   .detail__name is the reason this block exists. It sets
   `color: var(--text-primary)` on the flex row, which is more specific than
   `.section--inverse h3`, so the heading stayed ink-on-navy while the body
   text around it inherited correctly — a heading that had disappeared while
   its own paragraph was perfectly readable.

   The body takes the same 0.86 cream as .condition__copy and the FAQ, so
   the three dark-ground prose blocks on the site all sit a shade back from
   their headings rather than each choosing their own weight. The gold folio
   number is left alone: it is legible on either ground and it is the only
   gold in the section either way. */
.bk-w.bk-scope.bk-inner .section--inverse .detail__item,
.bk-w.bk-scope.bk-inner .section--inverse .detail__item:last-child,
.bk-w.bk-scope.bk-inner .section--inverse .detail__list--joined,
.bk-w.bk-scope.bk-inner .section--inverse .detail__list--folded .detail__item--teaser {
  border-color: var(--border-hairline-inverse);
}

.bk-w.bk-scope.bk-inner .section--inverse .detail__name { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .section--inverse .detail__body { color: rgba(250, 246, 238, 0.86); }


/* =========================================================================
   Symptom cards
   The same list, but each one opens. Built on <details>/<summary>, so it
   works with the keyboard, works with the script off, and is announced as
   expandable without any ARIA of our own.

   The copy moves into a narrow column on the left and the cards take the
   space it frees. Below 1000px it all stacks, copy first.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .symptoms {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* Where the right column is a hive, the two sides are read together
     rather than in sequence, so they centre on each other. align-items on
     the grid is start, which is right for a list that continues down the
     page and wrong for a comb: on the longest of these the copy ran to two
     full paragraphs while the comb kept its fixed height, and the hexagons
     sat level with the first line with the rest of the column empty beside
     them.

     Evening the split at the same time: 0.72fr was giving the copy about
     52 characters to the line, a narrow and very vertical column next to a
     block that is mostly air. A 1:1 split widens it toward a proper
     measure and costs the hive nothing, because that is capped at 520px
     and pinned to the right either way. */
  .bk-w.bk-scope.bk-inner .symptoms:has(.hive) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  /* The hive's own top margin is for the stacked case, where it separates
     the comb from the copy above it. Side by side there is nothing above
     it, and the margin is counted into the box being centred — so it threw
     the alignment out by half its value, 24px. */
  .bk-w.bk-scope.bk-inner .symptoms:has(.hive) .hive { margin-top: 0; }

  /* The same reasoning, asked for by name rather than inferred from the
     contents. Where the right column is a short list and the left runs to
     two paragraphs, start-alignment puts the list's heading up beside the
     eyebrow with the whole column empty below it, and the two halves read as
     unrelated. Centred, the list sits against the passage it belongs to.

     Opt-in, because it is wrong for the common case: a list that continues
     down the page should start where the copy starts. */
  .bk-w.bk-scope.bk-inner .symptoms--centre { align-items: center; }
}

/* ---- Six, three abreast ----
   auto-fit lays six members out as four and two at desktop width, which
   leaves two empty cells beside the last pair and reads as a section that
   ran out of people. Three and three fills both rows, and the wider column
   gives the portraits more size at the same time.

   Opt-in: our-team.html carries a different number and is right as it is. */
/* .crew.crew--3up, not .crew--3up. The base .crew rule is 1,861 lines
   further down this file and at the same 0-1-0 weight, so source order was
   deciding it: three columns applied at 1024 where auto-fit happened to
   agree, and silently lost at 1280 where it mattered. Restated at 0-2-0 so
   it cannot be outranked by position — the specificity trap the layout
   rules call out. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .crew.crew--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-w.bk-scope.bk-inner .crew.crew--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A two or three person band, centred rather than stretched.
   These bands lost their photograph column, and a crew left at full container
   width answers that by making two cards 590px wide — a portrait blown up to
   fill space rather than sized to be looked at. Capping the measure keeps the
   card at the size it is everywhere else on the page and puts the band's
   weight in the middle, under the centred heading.

   Stated at 0-2-0 like .crew--3up above, and for the same reason: the base
   .crew rule sets grid-template-columns further down this file at equal
   weight, so source order would otherwise decide it. */
.bk-w.bk-scope.bk-inner .crew--centred { margin-inline: auto; }
.bk-w.bk-scope.bk-inner .crew.crew--2up.crew--centred { max-width: 46rem; }
.bk-w.bk-scope.bk-inner .crew.crew--3up.crew--centred { max-width: 64rem; }

/* The control under a centred band sits with it. Two of these bands author
   their own link and two get a fold toggle built by detail-more.js, which
   appends it as a sibling of the grid — so the generated control is matched
   on the band having a centred head rather than on a class of its own. */
.bk-w.bk-scope.bk-inner .band-action {
  margin-top: var(--space-6);
  text-align: center;
}

.bk-w.bk-scope.bk-inner .section--screen:has(.sec-head--centre) .detail__more {
  display: flex;
  margin-inline: auto;
  width: fit-content;
}

/* ---- A band that holds the screen ----
   Four of the team bands are asked to stand as a screen each. min-height
   rather than height: the fold is open on some of them and the cards grow
   with the viewport, and a fixed height would either clip the extra row or
   force a scrollbar inside the band.

   svh, not vh: on a phone vh is the tallest the viewport ever gets, so a
   100vh band is cut off by the browser's own chrome on arrival and only
   fits once the address bar has collapsed. svh is the smallest state, so
   the band fits on landing and simply has room to spare afterwards.

   align-content centres the band's own content in whatever height it ends
   up with. It does not clip when the content is taller — the grid grows
   past min-height and the rows stay in flow. */
.bk-w.bk-scope.bk-inner .section--screen {
  display: grid;
  align-content: center;
  min-height: 100svh;
  /* Small, deliberately. align-content is already centring the content in a
     full-screen box, so the leftover height *is* the padding and it adapts to
     the viewport. Keeping the section's usual 64px on top of that was pushing
     bands that otherwise fit to about 1.1 screens. */
  padding-block: var(--space-4);
}

.bk-w.bk-scope.bk-inner .section--screen .crew { margin-top: var(--space-5); }

/* The portrait is the only part of a crew card whose height is a free
   choice, so it is the part that decides whether the band fits. At the
   component's 4:5 a 352px card is 440px of photograph before a word of the
   bio, which is what carried these bands over a screen once the big picture
   beside them was removed.

   Sized against the viewport rather than the card, so the band scales with
   the window instead of being tuned to one. Clamped at both ends: below
   160px a portrait stops being a portrait, and above 300px the row starts
   pushing the bios off a laptop screen again. aspect-ratio has to be
   released explicitly or it keeps winning over the height.

   The floor is what binds on a short window, and below about 700px of
   viewport the longest-bio bands still run a little over a screen — the
   bio is real content and there is nothing left to take off it. min-height
   lets them grow rather than clipping, which is the right failure. */
.bk-w.bk-scope.bk-inner .section--screen .crew__photo {
  aspect-ratio: auto;
  height: clamp(160px, 26svh, 300px);
}

/* ---- The same band on a phone ----
   Below 700px the crew grid is a single column, so the four across that make
   one screen on a laptop become four stacked cards and about two and a half
   screens. Two is what a phone has room for.

   Done here rather than in the fold script: data-fold is read once at load,
   so a responsive count would mean re-running the fold on resize and keeping
   aria-controls in step with it. detail-more.js already toggles --folded on
   the grid for exactly this kind of state-dependent styling, so the rule can
   hang off that instead and the script stays as it is. Opening the fold
   removes the class, which reveals these two along with the rest; closing it
   puts them back. */
@media (max-width: 699px) {
  .bk-w.bk-scope.bk-inner .section--screen .crew--folded .crew__member:nth-child(n+3) { display: none; }

  /* The card turns on its side. Stacked, each person is a full-width frame
     with the name and bio under it — about 470px of screen, so two fill a
     phone and the band still runs past it.

     Shrinking the frame does not fix that: .crew__photo is width:100% with
     a fixed height, so taking height off a 343px-wide frame turns a
     portrait into a 2:1 letterbox and crops the head it exists to show.
     Laid out as a row the photograph keeps its 4:5 and the bio uses the
     space beside it instead of below, which is about half the height per
     person and lets three fit where two did.

     Subgrid is dropped here on purpose: it exists to line the four bands up
     across a row, and on a single-column grid there is no row to line up
     with.

     A float, not a grid. Laying this out as "photo name / photo role /
     photo bio" places correctly but sizes wrong: the portrait spans all
     three rows, and grid hands a spanning item's height to the first track,
     so row one became 140px, the name stretched to fill it, and a hole
     opened above the role. Row sizes of auto and align-content did not
     move it. Floating the portrait sidesteps track sizing altogether — the
     three lines simply flow beside it and then under it, which is the
     behaviour the layout wanted. Each member is a grid item of .crew and so
     establishes its own formatting context, so the float cannot escape into
     the next person's card. */
  .bk-w.bk-scope.bk-inner .section--screen .crew__member {
    display: block;
    grid-row: auto;
  }

  .bk-w.bk-scope.bk-inner .section--screen .crew__photo {
    float: left;
    width: 112px;
    height: auto;
    aspect-ratio: 4 / 5;
    margin-right: var(--space-4);
  }

  .bk-w.bk-scope.bk-inner .section--screen .crew__name { margin-top: 0; }

  .bk-w.bk-scope.bk-inner .section--screen .crew { gap: var(--space-5); }
}


/* ---- A row of controls, centred under left-ranged copy ----
   A single button ranged left under a full-width block of copy or a grid of
   cards sits in the bottom-left corner with the rest of the band empty
   beside it, and reads as something left behind rather than as the
   section's own control.

   Only the controls centre. The heading and the copy keep their alignment,
   so this is a control group finding its middle, not a block changing its
   mind halfway down — which is the alignment fault the layout rules name. */
.bk-w.bk-scope.bk-inner .actions--centred { justify-content: center; }

/* ---- A set of peers, on a grid ----
   Four links of the same rank but different label lengths. As a centred
   flex row each line centres on its own and every button is sized to its
   own text, so no two edges in the block line up and a set of four reads
   as scattered — worst at the wrap, where a two-button row sits staggered
   over the row above it.

   Equal grid columns make every button the same width, which gives the set
   two clean vertical edges and one consistent rhythm. Capped and centred as
   a block rather than run to the container, because at full width each of
   four short labels would sit in a 580px plate.

   .page-hero__actions.actions--grid at 0-2-0: the flex display it is
   overriding is 0-1-0 and sits 1,000 lines earlier, so matching weight
   would leave this to source order. */
.bk-w.bk-scope.bk-inner .page-hero__actions.actions--grid {
  display: grid;
  gap: var(--space-3);
}

/* One column until there is genuinely room for two. The longest of the four
   labels ("Why seek treatment in Thailand") needs 477px including the
   button's padding and arrow, so a pair wants ~980px between them. Opening
   the second column at 700px, as this first did, gave each button 307px and
   put all four labels onto two lines — tidy edges, cramped controls.

   Capped and centred so a single column does not stretch one short label
   across the whole container. */
.bk-w.bk-scope.bk-inner .page-hero__actions.actions--grid {
  max-width: 34rem;
  margin-inline: auto;
}

/* width: fit-content, not a rem cap. A fixed cap has to be sized for the
   longest label in the set, and these sets differ — four long country
   names on one page, two short ones ("See our centre") on another. 68rem
   suited the first and stretched the second across the band.

   Sized to content, the grid is as wide as it needs to be and no wider,
   while `1fr` tracks in an indefinite container still resolve to the
   widest item, so both columns stay equal. One rule fits both sets, and a
   longer label in future needs no new number.

   grid-auto-rows so both rows match even if a label does wrap at some
   width — a set of peers reading as two different heights is the same
   untidiness this grid exists to remove. */
/* Two columns only where two columns fit, decided by the container rather
   than by the viewport.

   The viewport was the wrong thing to ask. These sets sit inside whatever
   column the section gives them — .intro__body at the reading measure on
   most pages, .whyus__copy or .split__copy where the band is already split
   in two — and a 1440px window can still hand this grid 634px. Two tracks
   of 305px then put "Why seek treatment in Thailand" onto three lines and
   made a 99px button out of a 56px one, on twenty-seven pages.

   auto-fit with a floor asks the container instead. Measured, not guessed:
   the longest label in the build is "More about our residential programme"
   at 436px unwrapped, and the hexagon's padding-inline is 64px a side —
   128px, not 64. So a track needs 564px to hold one line. 36rem, with a
   little over. Sets with shorter labels get the same track and simply carry
   more air, which is the right trade: a set of peers at one height beats a
   set sized individually. Wide container: two tracks, one line
   each. Narrow: one full-width track, still one line. The three-line button
   has nowhere left to happen.

   The cap is what stops auto-fit reaching for a third track in a full-width
   band and leaving four buttons as 3 + 1. It is two tracks plus the gap. */
@media (min-width: 1100px) {
  .bk-w.bk-scope.bk-inner .page-hero__actions.actions--grid {
    grid-template-columns: repeat(auto-fit, minmax(min(36rem, 100%), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-4);
    width: fit-content;
    max-width: min(100%, 74rem);
  }
}

.bk-w.bk-scope.bk-inner .actions--grid .btn { width: 100%; }

/* ---- Two long labels, one row ----
   "More about our residential programme" and "More about our aftercare
   programme" are the brief's words verbatim, so the labels cannot be cut
   to fit. Measured: at 1280 the pair is 564 + 551 + 16 = 1131 inside a
   1200px container and sits on one row. Above 1600 the fluid type steps
   up, the pair becomes 616 + 602 + 16 = 1234, and it wraps — so the set
   read as one row on a laptop and two on a large monitor, which is the
   width most people reviewing the page are on.

   The 34px it needs back comes from the hexagon's own padding, not from
   the type: 48px a side instead of 64 gives 1168 + 16, which clears 1200
   with room. nowrap then states the intent outright rather than leaving it
   to a measurement that a future label change could invalidate silently.

   Only above 1100px. Below that one row is genuinely wrong and the base
   flex wrap is what should happen. */
@media (min-width: 1100px) {
  .bk-w.bk-scope.bk-inner .page-hero__actions.actions--pair { flex-wrap: nowrap; }
  .bk-w.bk-scope.bk-inner .actions--pair .btn--hex { padding-inline: var(--space-6); }
}


/* =========================================================================
   Clinical outcomes
   A headline figure, then three measures beside each other. Built for the
   mental health pages, where the brief supplies real assessment data
   (PHQ-9, GAD-7, CORE-10) and asks for stat panels rather than paragraphs.

   THE SOURCE LINE IS PART OF THE COMPONENT, NOT DECORATION. These are
   clinical outcome claims: "97% improved" without the cohort, the measure
   and the date range beneath it is a different and much stronger claim than
   the one the data supports. .stat__source is quiet but never hidden, and
   any panel built from this component keeps it.

   Figures take pale honey on deep water — the one place on the site where a
   number is the thing being read, so it gets the accent rather than the
   body colour.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .stat-lead {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-pale-honey);
}

/* Straight after the section head there is nothing above to divide it from,
   and .sec-head has already drawn its comb rule — the two landed 64px apart
   and read as a double line. The margin still holds them apart; the second
   rule was the only thing doing no work. */
.bk-w.bk-scope.bk-inner .sec-head + .stat-lead {
  padding-top: 0;
  border-top: 0;
}

/* The label spans both columns so the figure and the clause that completes it
   sit side by side: "7 in 10" is the grammatical subject of the sentence
   beside it, and with the heading between them the sentence read as a
   lowercase fragment starting at "clients who arrive".

   align-items: center, not start. One line of display type beside a
   three-line paragraph left a void under the figure that read as a column
   someone forgot to fill; centred, the number sits against its own sentence. */
@media (min-width: 800px) {
  .bk-w.bk-scope.bk-inner .stat-lead {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: var(--space-7);
    row-gap: var(--space-4);
    align-items: center;
  }

  .bk-w.bk-scope.bk-inner .stat-lead__label { grid-column: 1 / -1; }
}

.bk-w.bk-scope.bk-inner .stat-lead__label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.bk-w.bk-scope.bk-inner .stat-lead__figure {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .stats {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

@media (min-width: 800px) {
  .bk-w.bk-scope.bk-inner .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

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

.bk-w.bk-scope.bk-inner .section--inverse .stat { border-top-color: var(--border-hairline-inverse); }

/* .stat .stat__figure, not .stat__figure. The figure is a <p> inside .stat,
   and `.stat p` below sets --fs-small at 0-1-1 against this rule's 0-1-0 —
   so the number rendered at 14px, smaller than the 18px label beneath it,
   and the one element the panel exists to show was the quietest thing in it.
   The specificity trap the layout rules warn about, again. */
.bk-w.bk-scope.bk-inner .stat .stat__figure {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
}

/* The accent only works on deep water. Measured against the two creams, pale
   honey is 1.72:1 and 1.56:1 and honey gold 2.24:1 and 2.04:1 — all of them
   under the 3:1 floor for large text, so a figure set in gold on cream is a
   number you cannot read. Deep water is 9.02:1 there; the gold rule above
   each stat carries the accent instead. */
.bk-w.bk-scope.bk-inner .section--inverse .stat-lead__figure,
.bk-w.bk-scope.bk-inner .section--inverse .stat__figure { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .stat__name {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
}

.bk-w.bk-scope.bk-inner .stat p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}

/* The cohort, the instrument and the dates. Held back so the figure reads
   first, but on the page and legible — see the note at the head of this
   block for why this is not optional. */
.bk-w.bk-scope.bk-inner .stat__source {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  opacity: 0.78;
}


/* ---- Ungrouped cards, abreast ----
   .symptoms__cards is a single column, which is right when the cards sit in
   the narrow half of a two-column band. Where the brief gives no categories
   the cards have no group to sit in and the block takes the full width
   instead — and six full-width bars stacked down the page is a lot of
   furniture for six short labels.

   Three abreast closes six into two full rows. Stated at 0-2-0 because the
   single-column rule it overrides is 0-1-0 and sits earlier in this file. */
/* The same opening .symptom-groups takes. .symptoms__cards has no top margin
   because its usual home is the right-hand column of a two-column band, where
   it starts level with the copy beside it. Standing on its own under a block
   of text it needs the gap, and without it the first row of cards sat hard
   against the last line of the paragraph. */
.bk-w.bk-scope.bk-inner .symptoms__cards.symptoms__cards--abreast { margin-top: var(--space-6); }

@media (min-width: 700px) {
  .bk-w.bk-scope.bk-inner .symptoms__cards.symptoms__cards--abreast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .bk-w.bk-scope.bk-inner .symptoms__cards.symptoms__cards--abreast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Two across, for a set three does not divide ----
   Three columns are right for a set of three, six or nine and wrong for
   fourteen: the last row holds two and the block ends on a hole, which is
   exactly the fault .holistic__grid--2x2 exists to fix for sets of four.
   The fourteen psychotherapy approaches are the same shape of problem, and
   two divides fourteen exactly.

   Named --2up to match the opt-out check.py already recognises, so the
   arrangement and the checker agree about what is deliberate. */
@media (min-width: 1080px) {
  .bk-w.bk-scope.bk-inner .symptoms__cards.symptoms__cards--abreast.symptoms__cards--2up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================================
   A list organised by class
   Nineteen medication names in one flowing row of chips had no structure and
   no even ending: eight, eight and three, with the short last row reading as
   a hole. Nineteen is prime, so no column count divides it either.

   The brief groups them itself — its opening sentence names five classes and
   the list runs in exactly that order — so the set is read by class instead:
   the name on the left, its medications beside it. Five short rows, each one
   full, and a reader looking for one tablet scans five labels rather than
   nineteen names.

   The label is said once over the set it names, which is the same reasoning
   .signs__group carries a few hundred lines up.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .classlist {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.bk-w.bk-scope.bk-inner .classlist__row {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 800px) {
  .bk-w.bk-scope.bk-inner .classlist__row {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

.bk-w.bk-scope.bk-inner .classlist__row + .classlist__row {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .classlist__name {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--text-primary);
}

/* The chips already carry their own top margin for the standalone case; in a
   row they sit level with the label beside them. */
.bk-w.bk-scope.bk-inner .classlist__row .taglist { margin-top: 0; }


/* =========================================================================
   Paired link-outs
   Two sections that were each an eyebrow, a heading and one button, 298px
   of band apiece with nothing to fill the width they opened. They are the
   same kind of thing — a pointer to a fuller page elsewhere — so they read
   better as a pair than as two thin bands in sequence.

   Side by side they fill one band instead of two, and the gold rule above
   each is the mark .holistic__item and .notice already carry, so the pair
   belongs to the page rather than arriving as a new object.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .linkouts {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 800px) {
  .bk-w.bk-scope.bk-inner .linkouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

.bk-w.bk-scope.bk-inner .linkout {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-pale-honey);
}

.bk-w.bk-scope.bk-inner .linkout .icon-chip { margin-bottom: var(--space-4); }

.bk-w.bk-scope.bk-inner .linkout h2 {
  margin-top: var(--space-2);
  font-size: var(--fs-h3);
}

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

/* ---- Articles, which are titles rather than actions ----
   The library column points at published articles, and their titles run to
   80 characters. As .btn--arrow they came out uppercase, centred and bold,
   four lines deep: right for "Find out more", wrong for a sentence. Caps
   strip the word shapes a reader scans by, and centring a four-line block
   leaves both edges ragged. A sweep of the site found these were the only
   three quiet buttons carrying a sentence — every other one is a two- or
   three-word action.

   So they are rows, not buttons. Title case in the display face the
   headings use, ranged left, with the arrow held out at the right margin
   where it reads as a destination rather than a control. Ruled top and
   bottom, which is how every other list of like things on this page is set.

   The box is right and was right before — what was wrong inside it was the
   type. .btn--arrow sets a label uppercase, centred and bold, which is
   correct for "Visit our library" and unreadable at 80 characters. Ruled
   rows fixed the type but introduced a worse fault: a hairline row next to
   the bordered button in the column beside it put two visual languages side
   by side in one band.

   So: the button's box, a title's typography. Transparent on a blue
   hairline at --radius-md, filling blue on hover — the treatment
   .btn--quiet carries, down to the token — with the label ranged left in
   title case and set in the display face, because that is what a title
   needs and a two-or-three-word action does not. The two columns now differ
   only in the size their content forces, which is the honest difference. */
.bk-w.bk-scope.bk-inner .linkout__reads {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.bk-w.bk-scope.bk-inner .linkout__read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-beekeeper-blue);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--color-beekeeper-blue);
  text-decoration: none;
  transition: background-color var(--dur-calm) var(--ease-calm),
              color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .linkout__read:hover {
  background-color: var(--color-beekeeper-blue);
  color: var(--color-white);
}

/* The glyph .btn--arrow uses, inheriting its colour the same way, so the
   card and the button beside it are the same object at two sizes. `flex:
   none` so it cannot shrink against a title that wraps to two lines. */
.bk-w.bk-scope.bk-inner .linkout__read::after {
  content: "\2192";
  flex: none;
  font-size: var(--fs-button);
  line-height: 1;
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .linkout__read:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .linkout__read::after,
  .bk-w.bk-scope.bk-inner .linkout__read:hover::after { transition: none; transform: none; }
}


/* =========================================================================
   A media frame that stands on its own
   .split__media is a column's partner: it crops to 4/5 and takes its height
   from the copy beside it. This is for the other case — a figure dropped
   into a column that has run out of copy before the column beside it has
   run out of list, where the picture should keep its own proportions and
   simply fill what is left.

   Same radius and shadow, because it is the same object; only the sizing
   differs.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .media-frame {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-media);
}

.bk-w.bk-scope.bk-inner .media-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- The figure taking up the slack ----
   Dropped in at its own proportions the picture only balanced the column
   beside it at the one width where its height happened to match: level at
   1280, but 108px short at 1600 and 140px at 1024, because the list reflows
   and a fixed ratio does not.

   Stretching the column to its neighbour and letting the figure have what
   the copy leaves makes the two finish level at every width. object-fit
   crops rather than distorts, and the min-height stops a long list from
   squeezing the picture into a letterbox.

   Opt-in, like .holistic__grid--2x2 — most columns in this grid have no
   figure and should keep sizing to their content. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms > .symptoms__fill {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* flex-basis 0, not auto. On auto the figure's own height counted toward
     the column's natural height, so above 1280 the column became the taller
     of the two and stretching could not help — the picture was setting the
     height it was supposed to be absorbing. At 0 it contributes nothing,
     the list decides the row, and the figure takes what is left. */
  .bk-w.bk-scope.bk-inner .symptoms > .symptoms__fill .media-frame {
    flex: 1 1 0;
    min-height: 200px;
  }

  /* <picture> is display:block globally but height:auto, and a percentage
     height resolves against its parent's — so `height: 100%` on the image
     had nothing definite to measure and quietly fell back to auto. The
     frame stretched to the column, the picture inside it did not, and the
     figure carried a band of empty cream under the photograph: 782px of
     frame around 551px of image at 1024. Giving the wrapper the height
     passes a real number down to the image. */
  .bk-w.bk-scope.bk-inner .symptoms > .symptoms__fill .media-frame picture {
    display: block;
    height: 100%;
  }

  /* object-position, with the same --focus hook the other four cropping
     components already carry. It was missing here, and `cover` without it
     is locked to the centre of the frame — which is only right when the
     subject happens to be centred.

     Found on in-the-media #podcasts: talk-chairs-hero is 1800x1012 and the
     two chairs sit between x=770 and x=1500, well right of the middle. The
     frame resolves to 569x527, a ratio of 1.08 against the source's 1.78,
     so cover keeps a 1093px-wide window — centred, that is x=353 to 1447,
     and roughly 50px of the right-hand chair is cut off the edge.

     The default is 50% 50%, which is exactly what the browser was already
     doing, so this changes nothing on any of the forty frames in the build
     until one of them sets --focus. */
  .bk-w.bk-scope.bk-inner .symptoms > .symptoms__fill .media-frame img {
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
  }
}


/* =========================================================================
   Symptom groups, three abreast
   Thirteen cards in the right-hand column of .symptoms ran far longer than
   the copy beside them, so the left half of the band sat empty for the
   whole length of the stack — two full screens of nothing next to the
   Psychological and Behavioural groups.

   The three groups are peers and roughly the same length (5 / 4 / 4), so
   they read across rather than down. That uses the full width, brings the
   section to about a third of its height, and lets the copy above it take
   the measure it wants instead of being squeezed into a narrow column.

   One column below 1080px: at three abreast each card would be under 300px,
   and the longer names ("Continued use despite harm") would wrap to three
   lines inside a control that is meant to be scanned.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .symptom-groups {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 1080px) {
  .bk-w.bk-scope.bk-inner .symptom-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* align-content: start so a shorter group sits up against its heading
   rather than distributing its cards down the full row height. */
.bk-w.bk-scope.bk-inner .symptom-group {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

/* The heading opens the column; .subhead's 128px top margin is for the
   stacked case and would push each column off its neighbours here. */
.bk-w.bk-scope.bk-inner .symptom-group .subhead {
  margin-top: 0;
  margin-bottom: 0;
}


/* =========================================================================
   Standing notice
   A safety note is the one block a reader may reach mid-crisis, so it sits
   high on the page rather than sinking to the foot. That put it at the
   reading measure in a full-width band, where it left the right half empty
   and read as a stray paragraph rather than as a notice.

   Given the whole width, with the heading ranged against the copy, it reads
   as a standing notice instead — and there is no empty half to explain.

   The gold rule above is the one .holistic__item already carries, which is
   what ties this to the rest of the page rather than introducing a new
   object; the icon marks it at a glance for anyone scanning for help.
   ========================================================================= */
.bk-w.bk-scope.bk-inner .notice {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-pale-honey);
}

/* 0.8/1.2 gave the copy 76 characters to the line. The heading beside it is
   four words and needs nothing like that much room, so the split evens out
   until the paragraph lands near the project measure. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .notice {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-7);
    align-items: start;
  }
}

.bk-w.bk-scope.bk-inner .notice__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bk-w.bk-scope.bk-inner .notice__head h3 { font-size: var(--fs-h4); }

/* ---- The key, where the notice explains a set of measures ----
   On the outcomes note the left column carried four words of heading against
   a right column running to a paragraph, a disclosure and a source line, so
   most of it was empty. The pages cite GAD-7, PHQ-9 and CORE-10 as bare
   acronyms and nowhere say what they are or what score counts as clinical —
   which is the one thing a block headed "how to read these figures" owes the
   reader. The key answers it in the space that was already there, rather
   than padding the column with decoration.

   Hairline above each term, not around the set: these are footnotes to the
   figures above, and a bordered box here would read as a second notice
   competing with the band it sits inside. */
/* ---- The same rows, standing on their own ----
   .key-list is this component outside a notice. The shape — hairline, small
   uppercase label, body under it, nothing boxed — is the quietest way the
   system has to set two or three labelled facts, which is what a column of
   contact routes is.

   Written as a shared selector rather than a copy: one set of rules, two
   names, so a change to the row treatment cannot drift between them. The
   name matters because .notice__key inside no notice is a lie to the next
   person reading the markup. */
.bk-w.bk-scope.bk-inner .notice__key,
.bk-w.bk-scope.bk-inner .key-list {
  display: grid;
  gap: var(--space-4);
}

.bk-w.bk-scope.bk-inner .notice__key > div,
.bk-w.bk-scope.bk-inner .key-list > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .notice__key dt,
.bk-w.bk-scope.bk-inner .key-list dt {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .notice__key dd,
.bk-w.bk-scope.bk-inner .key-list dd {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  opacity: 0.85;
}

.bk-w.bk-scope.bk-inner .section--inverse .notice__key dt,
.bk-w.bk-scope.bk-inner .section--inverse .key-list dt { color: var(--color-pale-honey); }
.bk-w.bk-scope.bk-inner .section--inverse .notice__key > div,
.bk-w.bk-scope.bk-inner .section--inverse .key-list > div { border-top-color: var(--border-hairline-inverse); }

/* The hairline is the whole structure, so on the cream-deep ground it needs
   the same shade .detail__item takes there or it drops out of the band. */
.bk-w.bk-scope.bk-inner .section--alt .key-list > div { border-top-color: rgba(34, 64, 94, 0.14); }

/* ---- The note behind a disclosure ----
   An explanatory note is read by the few who want it and skimmed past by
   everyone else, so on the outcomes band it sits closed: heading, mark, and
   the source line. Opening it is the reader's choice.

   The source line stays outside the disclosure on purpose. The figures above
   it are clinical claims, and a percentage without its cohort and date range
   is a stronger claim than the data supports — that line qualifies them, so
   it cannot be behind a click. Everything a reader opts into reading can be.

   .notice itself is the two-column band; with a single <details> inside it
   there is nothing to range against, so the columns move to .notice__reveal
   and the band goes back to a block. */
.bk-w.bk-scope.bk-inner .notice--reveal {
  display: block;
  /* The band's own 32px becomes 24, because the summary adds 8 above the
     heading to make the target. The rule still sits 32px off the text. */
  padding-top: var(--space-4);
}

/* A heading on its own is a 25px target, which is half the 44px floor and
   the whole control here. The padding is the hit area, not decoration. */
.bk-w.bk-scope.bk-inner .notice__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}

.bk-w.bk-scope.bk-inner .notice__summary::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-inner .notice__summary h3 {
  margin: 0;
  font-size: var(--fs-h4);
}

.bk-w.bk-scope.bk-inner .notice__summary:hover h3 { color: var(--color-beekeeper-blue); }

/* The gap above the revealed body is padding, not margin, and has to be.
   disclosure.js animates height and the block padding together — margin is
   not in the keyframes, so a margin here would survive the collapse and
   leave 24px of the movement as the snap the module exists to remove. */
.bk-w.bk-scope.bk-inner .notice__reveal {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

/* The same split .notice carries, at the same breakpoint: the key ranged
   against the copy, rather than the key stacked above it in a half-width
   column with the other half empty. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .notice__reveal {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-7);
    align-items: start;
  }
}

/* .faqs__mark's plus-to-minus is driven by .faqs__item[open]; this disclosure
   is the band itself, not a FAQ row, so it needs its own open state. Scoped
   to the direct summary so the method disclosure nested inside keeps its. */
.bk-w.bk-scope.bk-inner .notice__disclosure[open] > .notice__summary .faqs__mark::after {
  transform: rotate(0deg);
}

/* The attribution, not the notice. Small and held back so it reads as a
   footnote to the block rather than as a second paragraph of it. */
.bk-w.bk-scope.bk-inner .notice__meta {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  opacity: 0.8;
}

/* A disclosure inside a notice band is a footnote, not a section of its own.
   Base .faqs__q is set at --fs-h4 for FAQ sections, which outshouts the
   note's own h3 sitting beside it; and .faqs__item only draws a top border,
   closed by `.faqs__list li:last-child` — there is no list here, so it needs
   its own bottom rule. Scoped at 0-2-0 so it beats the base 0-1-0 rules
   outright rather than depending on which one comes later in the file. */
.bk-w.bk-scope.bk-inner .notice .faqs__item {
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .notice .faqs__q {
  padding-block: var(--space-3);
  font-size: var(--fs-h5);
}

.bk-w.bk-scope.bk-inner .section--inverse .notice { border-top-color: var(--border-hairline-inverse); }


/* ---- An even split, where the left column is prose ----
   0.72fr is sized for copy that introduces a block of cards: a short lead,
   then the cards do the talking. The programme sections put two full
   paragraphs there instead, and at 409px that is about 48 characters to the
   line — a column so narrow it ran taller than the list beside it and made
   the section longer than the stacked version it replaced.

   An even split gives the copy ~68 characters, which is the project measure,
   and costs the list nothing: these right-hand columns are chips, and chips
   reflow to whatever width they are given.

   Opt-in, not .symptoms:has(.taglist) — three other pages pair this grid
   with a taglist and are correctly set the way they are. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- A titled list in the right column ----
   The programme sections pair a paragraph or two with a list of what the
   week includes, and the list needs a heading of its own because the H2
   above it names the programme, not the list.

   .subhead carries a 128px top margin to open a gap after whatever block it
   follows. At the top of a grid column it follows nothing, and all that
   margin did was start the right column half a screen below the left. The
   grid's own gap already separates the two when they stack, so zero is
   right at every width rather than only on the wide one. */
.bk-w.bk-scope.bk-inner .symptoms .subhead:first-child { margin-top: 0; }

.bk-w.bk-scope.bk-inner .symptoms__cards {
  display: grid;
  gap: var(--space-4);
}

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

/* Two columns of three finished well above the copy beside them and left a
   350px hole underneath. Stacked, the six cards run to roughly the depth of
   the text, and each head becomes a full-width tap target. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms__cards { grid-template-columns: minmax(0, 1fr); }
}

/* The card moves on three properties at once — lift, shadow and border —
   so they share one duration and one ease. disclosure.js animates the body's
   height on the same pair, which is what makes the card and the thing
   inside it read as one movement rather than two.

   translateZ(0) is not a hack for its own sake: without it the lift is
   composited per frame against the shadow underneath, and on the long
   stacked column that shows up as the shadow edge crawling. */
.bk-w.bk-scope.bk-inner .symptom {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  transform: translateZ(0);
  transition: box-shadow var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .symptom:hover {
  border-color: rgba(34, 64, 94, 0.22);
  box-shadow: var(--shadow-media);
  transform: translate3d(0, -2px, 0);
}

/* Open, the card stops lifting. A raised card reads as "press me", and an
   open one has already been pressed — it settles back down and holds the
   deeper shadow instead, which says "this is the one you are reading". */
.bk-w.bk-scope.bk-inner .symptom[open] {
  border-color: rgba(34, 64, 94, 0.22);
  box-shadow: var(--shadow-media);
  transform: translateZ(0);
}

/* The whole head is the control, so the target is the card and not a word
   inside it. list-style none on both selectors: Safari needs the -webkit
   one, everything else takes the standard property. */
.bk-w.bk-scope.bk-inner .symptom__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.bk-w.bk-scope.bk-inner .symptom__head::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-inner .symptom__stamp {
  width: 46px;
  height: auto;
  border-radius: var(--radius-sm);
  /* The stamps are the section's one warm note and they are small. A hair
     of contrast off them at rest, restored as the card comes forward, lets
     them mark the open card without adding a colour to the design. */
  filter: saturate(0.82);
  transition: filter var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .symptom:hover .symptom__stamp,
.bk-w.bk-scope.bk-inner .symptom[open] .symptom__stamp { filter: saturate(1); }

.bk-w.bk-scope.bk-inner .symptom__name {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* The affordance. A ring with a plus in it reads as "this opens" in a way a
   bare chevron does not, and it rotates to a minus rather than swapping
   glyph so the change is continuous. */
.bk-w.bk-scope.bk-inner .symptom__sign {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-morning-blue);
  border-radius: 50%;
  transition: background-color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .symptom__sign::before,
.bk-w.bk-scope.bk-inner .symptom__sign::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto 7px;
  height: 1.5px;
  background-color: var(--color-beekeeper-blue);
  transition: transform var(--dur-calm) var(--ease-calm),
              background-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .symptom__sign::after { transform: rotate(90deg); }
.bk-w.bk-scope.bk-inner .symptom[open] .symptom__sign::after { transform: rotate(0deg); }

.bk-w.bk-scope.bk-inner .symptom:hover .symptom__sign,
.bk-w.bk-scope.bk-inner .symptom[open] .symptom__sign {
  background-color: var(--color-deep-water);
  border-color: var(--color-deep-water);
}

.bk-w.bk-scope.bk-inner .symptom:hover .symptom__sign::before,
.bk-w.bk-scope.bk-inner .symptom:hover .symptom__sign::after,
.bk-w.bk-scope.bk-inner .symptom[open] .symptom__sign::before,
.bk-w.bk-scope.bk-inner .symptom[open] .symptom__sign::after {
  background-color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-inner .symptom__body {
  padding: 0 var(--space-4) var(--space-4);
  /* Indented to clear the stamp, so the answer lines up with the question. */
  padding-left: calc(var(--space-4) + 46px + var(--space-3));
  font-size: var(--fs-small);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .symptom,
  .bk-w.bk-scope.bk-inner .symptom:hover,
  .bk-w.bk-scope.bk-inner .symptom[open] { transition: none; transform: none; }

  .bk-w.bk-scope.bk-inner .symptom__stamp { transition: none; }
}


/* =========================================================================
   Signs and symptoms
   ========================================================================= */

.bk-w.bk-scope.bk-inner .signs__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

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

/* One column, for the arrangement where the list has already been given a
   column of its own beside the copy. Two columns inside one column of a
   two-column grid is half a container per item, which breaks the longer
   symptoms into four ragged lines. */
@media (min-width: 720px) {
  .bk-w.bk-scope.bk-inner .signs__grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Filled column-first ----
   The default grid fills along the row, which is right when the item count
   is even. An odd count leaves the last item alone with an empty cell beside
   it — the same ragged-row fault the three-column grids are checked for.

   Filling down instead puts the spare item at the foot of the first column,
   where a column simply being one item longer than its neighbour reads as a
   list rather than as a hole.

   grid-template-rows has to be stated because grid-auto-flow: column with no
   row track defined lays everything out in a single row. The count is
   ceil(items / 2), and CSS cannot count children — so it comes in on
   --fold-rows, set on the element where the number differs. Three is the
   default because five pathways is the common case; a three-item list sets
   --fold-rows: 2. Get it wrong and the spare items wrap into a third
   column, which is visible immediately. */
@media (min-width: 720px) {
  .bk-w.bk-scope.bk-inner .signs__grid--down {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--fold-rows, 3), auto);
  }

  /* Folded, it goes back to filling along the row.

     Column-first and a fold do not combine. A folded entry is still a grid
     item, so it still takes a cell: with three rows declared and two entries
     showing, the two sit one above the other down the first column and the
     right half of the band is empty, while the three hidden ones push on
     into implicit columns three, four and five. Row-first puts the two
     showing side by side and lets the hidden ones collapse out of the way.

     The cost is honest and worth naming: opening re-flows the set from
     two-across to three-down-then-two, so an entry moves. The alternative
     was leaving the folded state visibly broken. */
  .bk-w.bk-scope.bk-inner .signs__grid--down.signs__grid--folded {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* Level with the heading beside it. The grid's default top margin exists
   to clear the copy it normally sits under; in the side-by-side
   arrangement there is nothing above it to clear, and the offset just made
   the two columns start at different heights. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms .signs__grid { margin-top: 0; }
}

.bk-w.bk-scope.bk-inner .signs__item {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .signs__item::before {
  content: "";
  flex: none;
  width: 14px;
  height: 16px;
  margin-top: 0.45em;
  background-color: var(--color-honey-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.bk-w.bk-scope.bk-inner .signs__item strong { display: block; }

/* ---- A folded run of prose ----
   The grid fold above takes short labelled entries. This takes paragraphs:
   put `.fold` and `data-fold="N"` on a wrapper and detail-more.js keeps the
   first N and puts the rest behind "Read more".

   It exists because a section whose copy runs to four paragraphs beside a
   flush photograph is one and a half screens tall before the reader has
   decided whether they want it. Folding the tail also shortens the picture,
   which is sized from the copy — on #programme that took a 1000px-wide
   source off a 1.40x upscale and back inside its own resolution.

   Same two problems as every fold on this site. hidden="until-found" hides
   with content-visibility rather than display, so the paragraph keeps its
   box and its margins go on pushing the ones below it apart — hence the
   margin reset. And the bare-[hidden] fallback needs its own rule, which
   here is only the UA's display: none restated for clarity; a <p> is not
   display: flex, so unlike .signs__item it would have worked anyway. */
.bk-w.bk-scope.bk-inner .fold > [hidden] {
  margin-block: 0;
}

.bk-w.bk-scope.bk-inner .fold > [hidden]:not([hidden="until-found"]) {
  display: none;
}

/* Opening it. opacity and transform only — both composited — plus the two
   discrete properties carried with allow-discrete so the paragraph stays
   rendered for the length of the close rather than vanishing in one frame.
   Both hidden values are named: writing this against a bare [hidden] alone
   makes the animation correct and unreachable wherever until-found is
   supported, which is the mistake already recorded against .detail__item. */
.bk-w.bk-scope.bk-inner .fold > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm),
              content-visibility var(--dur-calm) allow-discrete,
              display var(--dur-calm) allow-discrete;
}

.bk-w.bk-scope.bk-inner .fold > [hidden] {
  opacity: 0;
  transform: translateY(-8px);
}

@starting-style {
  .bk-w.bk-scope.bk-inner .fold > :not([hidden]) {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .fold > * { transition: none; }
}

/* ---- A band's closing row ----
   A section that ends with a line of copy and the action it leads to was
   setting them as two blocks stacked at the left, each at the reading
   measure, with 519px of the well empty beside them. Three left-ranged
   things in a column under a full-width grid reads as a section that ran
   out rather than one that finished.

   The copy takes the measure it needs and the action sits at the end of the
   same line, so the row spans the well and the button lands where the eye
   leaves the sentence. One column below 900px, where there is no width to
   share and stacking is the honest arrangement. */
.bk-w.bk-scope.bk-inner .band-foot {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.bk-w.bk-scope.bk-inner .band-foot > :last-child { margin: 0; }

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .band-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-7);
  }
}

/* ---- Measuring a fold ----
   detail-more.js animates a fold by measuring the box either side of the
   change. It cannot do that while a transition is in flight: every fold on
   this site carries content-visibility on allow-discrete so its rows stay
   rendered while they fade, which means the element goes on reporting its
   old height for the length of the fade. The measurement came back equal
   to the height it started from, the movement was skipped as a no-op, and
   the collapse then landed in one frame when the discrete property
   flipped — the abrupt close the client reported.

   So the script suppresses transitions, reads the true resting height,
   puts the list back and releases. This class is only ever present inside
   a single task, between a mutation and its revert; it never survives to
   a paint, so there is no state in which a reader sees motion disabled.

   !important, and it has to be. It is overruling the component's own
   transition shorthand on the same elements, and it must win against
   every one of them — .signs__item, .crew__member, .progs__item, the
   prose fold — without naming them. A utility that must beat all comers
   for the length of one function is the case the keyword is for. */
.bk-w.bk-scope.bk-inner .is-measuring,
.bk-w.bk-scope.bk-inner .is-measuring * {
  transition: none !important;
}

/* ---- A folded signs grid ----
   Set by detail-more.js when the list carries data-fold. Same two problems
   the detail list has, same two answers.

   hidden="until-found" is content-visibility rather than display, so a
   folded entry keeps its box: its padding and its rule go on being drawn
   around nothing. Strip both, or the fold closes onto a stack of empty
   ruled gaps instead of closing.

   The second selector is the no-support path, and it has to be a negation:
   .signs__item is display: flex, which outweighs the UA's display: none,
   so a bare [hidden] would leave the entry on the page. detail-more.js
   sets a bare hidden there, so the two never both apply. */
.bk-w.bk-scope.bk-inner .signs__item[hidden] {
  padding-block: 0;
  border-block: 0;
}

.bk-w.bk-scope.bk-inner .signs__item[hidden]:not([hidden="until-found"]) {
  display: none;
}

/* Zeroing the entries is not enough on a grid. A folded entry is still a
   grid item, so it still occupies a row, and the row gap either side of it
   survives even when the row itself measures 0. Folding six of eight
   entries left the rows flat and three 24px gaps stacked underneath them —
   72px of dead ground between the last entry and the control.

   row-gap only. The column gap is holding the two columns apart and is
   wanted. The rows do not lose their separation either: every .signs__item
   carries a border-top, which is what actually divides them — the gap was
   breathing room around a rule, not the rule.

   It transitions with the entries. Without it the gaps snap back the
   instant the class comes off, and the rows arrive into a grid that has
   already finished growing. */
.bk-w.bk-scope.bk-inner .signs__grid--folded { row-gap: 0; }

/* row-gap is NOT transitioned, and that is deliberate. detail-more.js
   animates the list's own height across the fold, and it measures the
   target by reading getBoundingClientRect() straight after the class
   change. A row-gap still easing toward 0 at that moment reports the old
   gap, so the animation was aiming at a height the list never reaches and
   snapping onto the real one at the end — the shudder. One thing animates
   the geometry now: the height. The gap simply steps, inside it. */

/* ---- Opening the fold ----
   The entries appeared and vanished in a single frame, because the hidden
   state is the `hidden` attribute and display is discrete — there is
   nothing between "there" and "not there" to interpolate. Same mechanism
   the detail list uses above: declare the property in both states and put
   it in the transition list with allow-discrete, so the row stays rendered
   for the length of the close.

   Both hidden values are named, and that is the whole trick. detail-more.js
   sets hidden="until-found" wherever the browser supports it, which hides
   with content-visibility rather than display. Writing this against a bare
   [hidden] alone would make the animation correct and unreachable on every
   current Chrome and Edge — the mistake already recorded against the detail
   list. So both discrete properties are carried.

   opacity and transform only: both composited, so opening six entries does
   not relayout the section six times. Not staggered — on a short list a
   per-item delay reads as a queue rather than as one movement. */
.bk-w.bk-scope.bk-inner .signs__grid[data-fold] .signs__item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm),
              content-visibility var(--dur-calm) allow-discrete,
              display var(--dur-calm) allow-discrete;
}

.bk-w.bk-scope.bk-inner .signs__grid[data-fold] .signs__item[hidden] {
  opacity: 0;
  transform: translateY(-8px);
}

@starting-style {
  .bk-w.bk-scope.bk-inner .signs__grid[data-fold] .signs__item:not([hidden]) {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .signs__grid[data-fold],
  .bk-w.bk-scope.bk-inner .signs__grid[data-fold] .signs__item { transition: none; }
}

/* No fade on this one, deliberately, and it is worth saying why because the
   detail list two hundred lines up does fade.

   That fade is over a clamped paragraph: the sentence is cut mid-flow, and
   the mask is what says "this continues" rather than "this stopped". Here
   every entry is whole. Masking complete, readable text would make it
   harder to read in order to signal something the control underneath
   already states in words. And the grid is two columns, so a mask on the
   last cell fades one half of a row and not the other.

   The list ends on a complete row and the control follows it. */


/* =========================================================================
   Reveal cards
   A list where each item is a card that opens: the marked hexagon, the
   thing being named, and a control that swings the rest of the sentence
   out underneath it.

   WHERE THE TEXT FOR THE TWO STATES COMES FROM

   Nowhere new. Most of these items are written "Withdrawal symptoms such
   as dizziness, hostility and aggression" — a thing, then its instances —
   so the card face takes the thing and the body takes the instances. The
   words are the source's own, in the source's own order; the only decision
   is where the line falls between face and body.

   That is also the limit of it. Where an item has no second clause there
   is nothing to reveal, and rather than write one the card simply does not
   open: .reveal__card--static is the same card with no control and no
   hover lift. One flat card in a grid of openable ones reads as "this one
   has nothing more to say", which is true, and is a great deal better than
   a control that opens onto a repeat of the line above it.

   The mark is the site's own hexagon at chip size with the item's number
   in it. Deliberately not a pictogram: eight symptoms of prescription drug
   dependence do not map onto eight brand icons, and picking the nearest
   one for each would be decoration standing where meaning should be — the
   thing the icon set is used carefully everywhere else to avoid.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .reveal {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

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

.bk-w.bk-scope.bk-inner .reveal__card {
  height: 100%;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  transform: translateZ(0);
  transition: box-shadow var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner details.reveal__card:hover {
  border-color: rgba(34, 64, 94, 0.22);
  box-shadow: var(--shadow-media);
  transform: translate3d(0, -2px, 0);
}

/* Open, the card settles back down and keeps the deeper shadow. A raised
   card reads as "press me"; an open one has already been pressed. */
.bk-w.bk-scope.bk-inner details.reveal__card[open] {
  border-color: rgba(34, 64, 94, 0.22);
  box-shadow: var(--shadow-media);
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner details.reveal__card:hover { transform: translateZ(0); }
}

/* The whole head is the control, so the target is the card, not a word
   inside it. list-style on both selectors — Safari needs the -webkit one. */
.bk-w.bk-scope.bk-inner .reveal__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  list-style: none;
}

.bk-w.bk-scope.bk-inner details .reveal__head { cursor: pointer; }
.bk-w.bk-scope.bk-inner .reveal__head::-webkit-details-marker { display: none; }

/* The hexagon at chip size, carrying the folio. Same clip-path as the
   bullet on every other list here, so it reads as that mark grown up
   rather than as a new shape. */
.bk-w.bk-scope.bk-inner .reveal__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  background-color: var(--color-honey-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-deep-water);
}

.bk-w.bk-scope.bk-inner .reveal__name {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* A plus that becomes a minus, drawn from two bars so the change is a
   rotation rather than a swapped glyph. Same device as the FAQ mark. */
.bk-w.bk-scope.bk-inner .reveal__sign {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.bk-w.bk-scope.bk-inner .reveal__sign::before,
.bk-w.bk-scope.bk-inner .reveal__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background-color: var(--color-beekeeper-blue);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .reveal__sign::after { transform: rotate(90deg); }
.bk-w.bk-scope.bk-inner details.reveal__card[open] .reveal__sign::after { transform: rotate(0deg); }

.bk-w.bk-scope.bk-inner .reveal__body {
  padding: 0 var(--space-4) var(--space-4);
  /* Indented past the mark so the revealed text hangs off the name above
     it rather than starting under the hexagon. */
  padding-left: calc(var(--space-4) + 34px + var(--space-3));
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-secondary, var(--text-primary));
}

/* The card that has nothing to open. No control, no hover, and the head
   keeps its full padding so it sits at the same height as a closed card
   beside it. */
.bk-w.bk-scope.bk-inner .reveal__card--static .reveal__head { grid-template-columns: auto 1fr; }

/* =========================================================================
   Signs as cards
   The same list, given the symptom card's treatment and laid out three
   across rather than stacked. Used where there are exactly six — three by
   two fills the grid with no orphan row, which a five or a seven would not.

   Deliberately not <details>. The opening cards on the Alcohol page work
   because that page writes its symptoms as "<strong>Name</strong> then the
   description", so there is a summary to show and a body to open. These six
   are single sentences with no label in front of them; turning them into
   disclosures would mean either inventing six headings or building a
   control that opens onto the same words it is already showing.

   So the card carries the whole sentence and the stamp, and the
   interactivity is left to the sections on this page that have something
   real to disclose.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .signs__cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

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

@media (min-width: 960px) {
  .bk-w.bk-scope.bk-inner .signs__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bk-w.bk-scope.bk-inner .signs__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* The stamp keeps the size and the held-back saturation it has on the
   Alcohol page, so the two treatments read as the same family. There is no
   hover here to restore it on — these cards are not controls — so it is set
   a little closer to full strength instead. */
.bk-w.bk-scope.bk-inner .signs__card img {
  width: 46px;
  height: auto;
  border-radius: var(--radius-sm);
  filter: saturate(0.88);
}

.bk-w.bk-scope.bk-inner .signs__card span {
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .section--inverse .signs__item { border-top-color: var(--border-hairline-inverse); }


/* =========================================================================
   Split block
   A prose section with nothing in its right half. The measure caps the
   copy at 68ch whatever the container, so on a wide screen these ran as a
   column of text against half a screen of empty cream. A photograph fills
   it without crowding the reading: the text column keeps its own measure,
   and the picture takes the space that was doing nothing.

   One column below 1000px — stacking a portrait under the copy is better
   than squeezing both into half a phone.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* ---- Short copy beside a tall frame ----
     align-items: start is right when the copy is the taller column, which is
     most of them: both columns begin on the same line and the frame sits in
     the opening paragraph's shoulder.

     It is wrong when the copy is the shorter one. A two-paragraph band next
     to a 551px portrait put 220px of nothing under the text, and the band
     read as a section someone had not finished writing. Centred, the same
     gap falls either side of the copy and becomes margin instead of a hole.

     Opt-in per band rather than a change to .split, because it is a
     judgement about the length of one block of copy — the same reasoning
     .split--flush is applied by. */
  .bk-w.bk-scope.bk-inner .split--balanced { align-items: center; }
}

/* ---- The opening statement ----
   A page whose intro is one paragraph. It was a photograph beside that one
   line, which left a 427px hole under it; then it was the bare paragraph
   centred, which closed the hole and read as a band someone had forgotten to
   finish — no mark, no rule, nothing to say it was deliberate.

   Centring it under a drawing did not fix that either: the band still read
   as an announcement with nothing to announce. So it is ranged left with the
   mark beside it. A statement with something in the other half of the well
   is a composition; a line of centred type on its own is a gap with words in
   it.

   The type stays one step up at --fs-lead, and no heading is fabricated for
   it — the hero directly above is already the page's title.

   The device is bee-flourish, which was sitting unused in the graphics pack
   and is the only horizontal one in it — a tall mark here would rebuild the
   same height problem the photograph had. It is decorative and says nothing
   the copy does not, so it is aria-hidden with an empty alt. */
.bk-w.bk-scope.bk-inner .intro-statement {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .intro-statement {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
    gap: var(--space-7);
  }
}

.bk-w.bk-scope.bk-inner .intro-statement__copy { max-width: var(--measure); }

/* Capped in px, not by the column. The flourish is 773x550 line work and
   stops reading as a drawing much past this; the column is free to be wider
   on a large screen without the mark growing with it. */
.bk-w.bk-scope.bk-inner .intro-statement__mark {
  width: 100%;
  max-width: 300px;
  height: auto;
  justify-self: end;
}

@media (max-width: 899px) {
  .bk-w.bk-scope.bk-inner .intro-statement__mark { justify-self: start; max-width: 220px; }
}

.bk-w.bk-scope.bk-inner .split__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-media);
}

.bk-w.bk-scope.bk-inner .split__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Same --focus hook the home page uses. A .split--flush frame takes the
     copy's height, so its ratio is whatever the column makes it and the
     crop is not knowable from here — a figure whose subject sits off the
     middle sets its own focus inline.

     --zoom is the companion for the case --focus cannot help with: where
     the frame's ratio is close enough to the photograph's that cover crops
     almost nothing, so there is no overflow to aim. Default 1, inert. */
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}

/* Landscape variant. Where the copy is short enough that a tall portrait
   would tower over it, the frame goes 5:4 and takes more of the row. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.bk-w.bk-scope.bk-inner .split--wide .split__media img { aspect-ratio: 5 / 4; }

/* ---- Flush columns ----
   A .split holds its frame to a fixed ratio, so the frame's depth is set by
   the column's width and has nothing to do with the copy beside it. Most of
   the time the two land within a few dozen pixels of each other, and that
   is the worst possible outcome: on this page the 5:4 frame finished 34px
   above the last line of copy and the 4:5 one finished 22px below it.
   Near-miss reads as carelessness in a way that a deliberate offset does
   not — the eye finds the edge, finds it nearly level, and sees a mistake.

   This variant drops the ratio and lets the frame take the copy's height
   exactly, so both columns close on one line. Same technique as the
   definition band above: the image comes out of the flow so it contributes
   no height of its own, the row is sized by the copy, and stretch hands the
   frame that height to fill.

   Opt-in rather than the default for .split, and the reason is copy length.
   The 34 .split__copy blocks on this site run from 293 characters to 3261 —
   an eleven-fold spread. Flush is right where the copy is around the depth
   the frame already wanted; at the long end it would draw a 440px column
   1400px tall, which is not a photograph any more, and at the short end a
   letterbox. Applying it is a judgement about a particular block, so it is
   asked for per block. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .split--flush { align-items: stretch; }

  .bk-w.bk-scope.bk-inner .split--flush .split__media { position: relative; }

  .bk-w.bk-scope.bk-inner .split--flush .split__media img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* ---- Mirrored: photograph left, copy right ----
   The left–right alternation down a page is the thing that stops a run of
   splits reading as one long template, and until now every .split put its
   photograph on the right, so four sections in a row opened with the same
   gesture.

   Only the placement is mirrored, not the document order — same reasoning
   as .centre-grid--media-left below. The copy carries the section's own
   heading, and a heading that follows its photograph reads backwards to a
   screen reader and in a no-CSS render. Explicit grid columns move the
   picture; `order` or a reversed source would move the meaning with it.

   The columns swap proportions as well as sides. A .split is 1fr / 0.62fr
   — copy wide, picture narrow — and simply flipping the sides would put the
   narrow column on the left, where it reads as a thumbnail propping up a
   paragraph rather than as a facing page. Mirroring the ratio keeps the
   picture the same size it would have been on the right.

   Below 1000px this does nothing: the grid is already one column and
   document order takes over, copy first, which is where a phone wants the
   heading anyway. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .split--media-left {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  }

  .bk-w.bk-scope.bk-inner .split--media-left.split--wide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .bk-w.bk-scope.bk-inner .split--media-left .split__copy  { grid-column: 2; grid-row: 1; }
  .bk-w.bk-scope.bk-inner .split--media-left .split__media { grid-column: 1; grid-row: 1; }
}

/* The copy already carries the measure, so it must not also be centred by
   the grid — it stays hard left against the column edge. */
.bk-w.bk-scope.bk-inner .split__copy { max-width: var(--measure); }


/* =========================================================================
   Programme cards
   Detox, Residential, Aftercare — the three the source lists at the foot of
   every Addictions page, in its own words on each page.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .progs__grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 800px) {
  .bk-w.bk-scope.bk-inner .progs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bk-w.bk-scope.bk-inner .prog {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* ---- A folded card grid ----
   Same fold as the lists, but a card has more to collapse. hidden with
   until-found is content-visibility, not display: the contents stop being
   rendered while the box itself survives — and a .prog box is padding, a
   hairline, a radius, white fill and a card shadow. Left alone, folding
   three partners left three empty white cards sitting in the grid.

   Everything that draws the card goes, so the hidden ones take no height
   and cast nothing. The second rule is the no-support path, where the UA's
   display: none has to beat .prog's own display: flex. */
.bk-w.bk-scope.bk-inner .progs__grid[data-fold] .prog[hidden] {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.bk-w.bk-scope.bk-inner .progs__grid[data-fold] .prog[hidden]:not([hidden="until-found"]) {
  display: none;
}

/* The rows are flat while folded, but their gaps are not — see the signs
   grid for the same trap. */
.bk-w.bk-scope.bk-inner .progs__grid--folded { row-gap: 0; }

.bk-w.bk-scope.bk-inner .prog .icon-chip { margin-bottom: var(--space-4); }

.bk-w.bk-scope.bk-inner .prog__step {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .prog h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  font-weight: 500;
}

.bk-w.bk-scope.bk-inner .prog p {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}

/* ---- On deep water ----
   Same trap as `.treats__cell` higher up, and it bit for the same reason.
   A .prog is a white card whatever band it sits in, but the site-wide
   inverse rules colour by *section*, not by ground: `.section--inverse`
   (0-1-0) turns the body copy cream and `.section--inverse h3` (0-1-1)
   turns the card name cream. Inside a white card that is cream on white —
   a card you can see and cannot read.

   Restated here at 0-2-0 and 0-2-1 so the ground decides the colour. It
   went unnoticed because treatment-for-a-client is the only page that puts
   .progs__grid on an inverse band, and because both declarations look
   correct in their own file. */
.bk-w.bk-scope.bk-inner .section--inverse .prog { color: var(--text-primary); }
.bk-w.bk-scope.bk-inner .section--inverse .prog h3 { color: var(--text-primary); }
.bk-w.bk-scope.bk-inner .section--inverse .prog a { color: var(--color-beekeeper-blue); }

/* ---- A web address inside the copy ----
   The continuing care partners are outside practices, and their address is
   the one piece of a card that is a string to be read and typed rather than
   prose. It was briefly the button's own label, which does not work: a
   domain is a single unbreakable word, so the button could not shrink below
   it and the three longest — brightwellpsychology.com.au at 408px inside a
   320px card — hung out over the card edge. The label is short and constant
   now, and the address sits here instead, where a line that is too long for
   the measure simply wraps like any other text.

   Not a link: the whole card already carries one, and a second anchor to the
   same place is one more stop for anyone tabbing through six of them. */
.bk-w.bk-scope.bk-inner .prog__domain {
  display: inline-block;
  overflow-wrap: anywhere;
  color: var(--color-beekeeper-blue);
}

/* ---- The control, held to the foot of the card ----
   The three cards are grid items in one row, so they are already the same
   height; what was not the same was where the button sat inside them,
   because each card's copy is a different length. `.prog__link` below asks
   for `margin-top: auto` to push itself down, and that declaration was
   doing nothing at all: `.prog p` above is 0-1-1 and `.prog__link` is
   0-1-0, so the 16px won and the buttons landed 25px apart.

   Restated here at 0-2-1 so it outranks the rule that was beating it. The
   classic specificity trap — the source said one thing, the computed value
   said another, and nothing looked wrong in either file on its own. */
.bk-w.bk-scope.bk-inner .prog .prog__link { margin-top: auto; }

.bk-w.bk-scope.bk-inner .prog__link {
  margin-top: auto;
  padding-top: var(--space-4);
}


/* =========================================================================
   Why choose us
   Inverse ground, photograph alongside. This is the one full-width dark
   band on the page, which is what keeps the cream reading as the default.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .whyus__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .whyus__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
  }
}

.bk-w.bk-scope.bk-inner .whyus__copy { max-width: var(--measure); }
.bk-w.bk-scope.bk-inner .whyus__copy p + p { margin-top: var(--space-4); }

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

/* ---- Out of the copy column ----
   Seven reasons stacked inside the copy ran that column to nearly twice the
   height of the photograph beside it, and the last four sat against an
   empty right half — the section got longer and emptier at the same time.

   Across the full width in two columns it closes roughly level with the
   frame and fills the space the picture was already leaving. The list is
   rendered after .whyus__grid rather than inside it, so it spans the
   container on its own terms instead of needing a column span.

   Two columns, not three: these are sentences rather than labels, and at a
   third of the container the longer ones break to four lines and the rows
   stop reading as a list. */
.bk-w.bk-scope.bk-inner .whyus__list--wide { margin-top: var(--space-5); }

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .whyus__list--wide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

/* ---- Without the rules ----
   A hairline above every item is right where the list is one column: the
   rules read as a ruled column and each line is clearly its own. Across two
   columns of uneven items they stop reading as rules and start reading as a
   broken table — seven of them, ending on a single ruled item in the left
   column with nothing opposite it, because seven is odd.

   So the ruling comes off and the gold mark carries each item on its own,
   with a full step of air between rows instead. Nothing else changes: same
   marks, same measure, same two columns.

   Written with both classes on the selector, not just the modifier. On one
   class this is 0-1-1, exactly the same weight as the `.whyus__list li`
   rule that sets the border above it, and that one is later in the file —
   so the border stayed and the rule looked correct in the source while
   doing nothing. Same trap as the programme-card button. */
.bk-w.bk-scope.bk-inner .whyus__list--wide.whyus__list li {
  border-top: 0;
  padding-block: 0;
  margin-bottom: var(--space-5);
  align-items: baseline;
}

.bk-w.bk-scope.bk-inner .whyus__list--wide li::before { margin-top: 0; }

/* The sub-heading the source runs over this list. It sits outside
   .whyus__copy, so it needs the measure and the space the copy column gives
   its own headings. */
.bk-w.bk-scope.bk-inner .whyus__sub {
  margin-top: var(--space-7);
  font-size: var(--fs-h5);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .section--inverse .whyus__sub { color: var(--color-pale-honey); }

/* The hairline is the item's own top border, so on a pale ground it needs
   the pale-ground colour — .whyus__list only ever appeared on deep water
   before this and hard-codes the inverse one. */
.bk-w.bk-scope.bk-inner .section:not(.section--inverse) .whyus__list li {
  border-top-color: var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .section:not(.section--inverse) .whyus__list li::before {
  background-color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-inner .whyus__list li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline-inverse);
  font-size: var(--fs-small);
}

.bk-w.bk-scope.bk-inner .whyus__list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 16px;
  margin-top: 0.45em;
  background-color: var(--color-pale-honey);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.bk-w.bk-scope.bk-inner .whyus__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-media);
}

.bk-w.bk-scope.bk-inner .whyus__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  /* A 4:5 frame around a 4:5 photograph crops nothing, so --focus alone has
     nothing to move — a figure whose subject sits in one corner with dead
     ground in the rest needs the crop made before it can be aimed. --zoom
     makes it. Default 1, so this is inert everywhere it is not asked for,
     and the transform means no figure changes height. */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}


/* =========================================================================
   Brand furniture
   The supporting graphics from the brand pack, used as page furniture
   rather than as another row of pictograms. Both are decorative and both
   are drawn with CSS backgrounds, so they carry no markup and nothing for
   a screen reader to announce.

   Kept deliberately faint. These are a watermark under the type, not an
   illustration beside it: at full strength the thumbprint competes with
   the headline it sits behind, and the pattern turns a quiet band into
   wallpaper.
   ========================================================================= */

/* A single ridged thumbprint, bled off the edge of a section. Sized in vw
   so it scales with the band rather than sitting as a fixed blob. */
.bk-w.bk-scope.bk-inner .has-thumb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Big enough to pass behind the photograph rather than sit politely beside
   it — roughly twice the old size, anchored off the right edge so the mark
   is cropped by the viewport and reads as a detail of something larger.
   z-index -1 keeps it under the figure; .has-thumb owns the stacking
   context, so it cannot escape the band. */
.bk-w.bk-scope.bk-inner .has-thumb::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -14%;
  width: clamp(420px, 54vw, 880px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: url("../../images/graphics/mark-rings-blue.webp");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* Four marks from the brand pack, dealt round the pages. All line work —
   ridges and concentric rings — because a solid silhouette at this scale
   reads as a blot rather than as texture. */
.bk-w.bk-scope.bk-inner .has-thumb--2::before { background-image: url("../../images/graphics/mark-ridge1-blue.webp"); }
.bk-w.bk-scope.bk-inner .has-thumb--3::before { background-image: url("../../images/graphics/mark-ridge3-blue.webp"); }
.bk-w.bk-scope.bk-inner .has-thumb--4::before { background-image: url("../../images/graphics/mark-ridge5-blue.webp"); }

/* On deep water the blue mark disappears, so each one has a cream cut, held
   back a little: a light mark on a dark ground reads much stronger than the
   same mark the other way round. */
.bk-w.bk-scope.bk-inner .section--inverse.has-thumb::before,
.bk-w.bk-scope.bk-inner .callout.has-thumb::before {
  background-image: url("../../images/graphics/mark-rings-cream.webp");
  opacity: 0.055;
}

/* The fifth mark, and the only one that is not line work: the brand's own
   ridged thumbprint, solid rather than drawn. It is a heavier object than
   the four above, so it takes a lower opacity to sit at the same weight
   behind a photograph. Cream cut on deep water like the rest. */
.bk-w.bk-scope.bk-inner .has-thumb--print::before {
  background-image: url("../../images/graphics/thumbprint4-blue.webp");
  opacity: 0.05;
}

.bk-w.bk-scope.bk-inner .section--inverse.has-thumb--print::before {
  background-image: url("../../images/graphics/thumbprint2-cream.webp");
  opacity: 0.045;
}

.bk-w.bk-scope.bk-inner .section--inverse.has-thumb--2::before { background-image: url("../../images/graphics/mark-ridge1-cream.webp"); }
.bk-w.bk-scope.bk-inner .section--inverse.has-thumb--3::before { background-image: url("../../images/graphics/mark-ridge3-cream.webp"); }
.bk-w.bk-scope.bk-inner .section--inverse.has-thumb--4::before { background-image: url("../../images/graphics/mark-ridge5-cream.webp"); }

@media (max-width: 639px) {
  .bk-w.bk-scope.bk-inner .has-thumb::before { display: none; }
}

/* The repeating floral-comb pattern as a rule between sections. A band
   rather than a field: eight pixels of it reads as brand, a screenful of
   it reads as a placeholder texture. */
/* Not placed anywhere at present. The one job it had was dividing the
   breadcrumb from the sub-nav, and at 22% it was a flat grey stripe at a
   glance — doing a divider's job without looking like a divider. That seam
   is depth now; see the shadow on .subnav above.

   The declaration is kept whole rather than deleted because the band is a
   brand element and this is the only record of how it is made. The markup
   is still on every interior page, so the hiding has to be said here. */
.bk-w.bk-scope.bk-inner .pattern-rule {
  display: none;

  height: 10px;
  background-image: url("../../images/graphics/pattern2-blue.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  opacity: 0.22;
}


/* =========================================================================
   Patterned ground
   The tiled motif the homepage runs behind its Programmes band, brought
   onto an interior section. Every number here is copied from
   .programmes::before in home.css rather than re-derived — same tile, same
   720px (480px under 1024px), same 0.61 — because the point is that the two
   surfaces match, and a value chosen independently would drift the moment
   either one was touched.

   A ::before rather than a background on the section itself: the section
   keeps whatever ground its own class gives it, and the pattern lays over
   that. It also keeps the motif out of the document, which is right for
   something with nothing to say.

   The stacking is the one thing done differently, and it has to be. On the
   homepage the band's content sits in a positioned .programmes__stage, so
   it paints after the absolutely positioned ::before and lands on top of
   it. An interior section's content is a plain static .container, and a
   positioned pseudo-element paints above static in-flow siblings — so the
   pattern would have been laid over the copy at 0.61 rather than under it.
   isolation + z-index: -1 puts it behind the content and still in front of
   the section's own background; isolate is what stops the -1 dropping it
   clean through to the page ground. Same pairing as .quoteband below. */
.bk-w.bk-scope.bk-inner .has-pattern {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: the tile runs to the section's edges and nothing
     inside needs to scroll. */
  overflow: clip;
}

.bk-w.bk-scope.bk-inner .has-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../../images/graphics/pattern3-tile.png");
  background-repeat: repeat;
  background-size: 720px auto;
  pointer-events: none;

  /* ---- Opacity follows the ground ----
     The tile's ink measures rgb(230, 225, 208) — darker than either cream,
     so how strong the motif looks is a function of what is behind it, not
     of this number alone:

       ink vs cream-deep  rgb(242,235,221)  ->  delta 12, 10, 13
       ink vs page cream  rgb(250,246,238)  ->  delta 20, 21, 30

     Copying the homepage's 0.61 onto a section of page cream therefore
     drew the pattern at roughly twice the contrast it has on the homepage,
     even though the declaration was identical. Matching the number is not
     the same as matching the surface.

     0.30 is 0.61 scaled by the ratio of those deltas — the value at which
     the ink lands the same distance from page cream as it does from
     cream-deep at 0.61. Per channel the answer is 0.37 / 0.29 / 0.26; they
     disagree because the ink-to-ground vector is a slightly different hue
     against each cream, so the tint cannot be matched exactly by opacity.
     The mean holds the strength, which is what reads. */
  opacity: 0.3;
}

/* On cream-deep the homepage's own value is correct, so a section carrying
   --alt gets it back. Keyed to the ground rather than set per page: the
   pattern then stays right if this class is put on a section of either
   colour, instead of needing someone to remember which number goes where. */
.bk-w.bk-scope.bk-inner .has-pattern.section--alt::before { opacity: 0.61; }

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


/* =========================================================================
   Quote band
   A line lifted out of the page's own copy, set large on deep water. Its
   job is structural as much as editorial: it breaks a run of pale text
   sections so the eye gets a beat, and it arrives early enough that the
   page has moved once before the reader is halfway down it.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .quoteband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-8);
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
}

/* Ranged right, with the flourish on the left — the two have swapped sides.

   margin-inline-start: auto puts the block against the container's inner
   right edge; text-align: right then sets every line flush to that edge.
   The block alone was not enough: left-aligned type inside a right-hand
   block leaves a ragged right margin, so the two lines ended in different
   places and the quote read as floating rather than as ranged to anything.

   The hanging quote mark below survives this, which is worth knowing
   because it looks like it should not. It is absolutely positioned with no
   offsets, so it takes its static position — and a static position follows
   text-align. It lands before the first character of the first line
   wherever that line happens to start. */
.bk-w.bk-scope.bk-inner .quoteband__text {
  max-width: 30ch;
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--leading-display);
  color: var(--text-inverse);
  text-align: right;
  text-wrap: balance;
}

/* The bee flourish rather than the ring watermark. It needs its own rule:
   the marks elsewhere are square and this is 773x550, so it takes the
   source's own ratio instead of aspect-ratio 1 and would otherwise be
   squashed. Gold on deep water carries at a higher opacity than the blue
   marks do on cream, so it sits at 0.2 rather than 0.06 — still a
   watermark, but one you can actually see.

   Sized on the viewport rather than on the band, and centred, which means
   the flourish is larger than the band is deep and the top and bottom of it
   are cropped by the band's own edges. That is deliberate: at a size that
   fits inside the band the drawing is too small to carry it, and the two
   bees are big enough here to be read as bees rather than as texture.

   Fitting it to the band and nudging it down was tried, on the reasoning
   that a cropped bee reads as a mistake. It does not — at 0.2 opacity, on
   this ground, the crop reads as a detail of something larger passing
   behind the band, which is what a watermark is for. It came back. */
.bk-w.bk-scope.bk-inner .quoteband::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  /* On the page grid, and sized off it — which is the whole of the
     arrangement fix.

     Both of these were measured against the viewport before: left at 7% of
     the band and width at 40vw. On a 1905px screen that put the flourish's
     left edge 211px outside the container, floating in the outer margin
     aligned to nothing, and left a 429px hole between it and the quote. The
     two objects were pinned to opposite edges of a band that kept getting
     wider between them.

     Now the left edge lands exactly on the container's inner edge — the
     same line the heading of every section above and below it starts on —
     and the width is a little over half the container's well rather than a
     share of the window. So the gap between flourish and quote is a
     proportion of the well and stops growing once the container has stopped
     growing. Same max() arithmetic as elsewhere on this page, and no
     viewport unit, so the classic scrollbar does not shift it. */
  --qb-well: calc(min(100%, var(--container-max)) - 2 * var(--grid-margin));

  left: max(
    var(--grid-margin),
    calc((100% - var(--container-max)) / 2 + var(--grid-margin))
  );
  width: max(300px, calc(var(--qb-well) * 0.52));
  aspect-ratio: 773 / 550;
  /* Mirrored with the move. The drawing is not symmetrical: both bees head
     one way and the swirl trails behind them, so carried across unchanged
     it pointed off the left edge and away from the quote. Flipped, it runs
     back into the band and towards the type, which is the direction the
     composition wants. scaleX after the translate so the vertical centring
     is unaffected. */
  transform: translateY(-50%) scaleX(-1);
  background-image: url("../../images/graphics/bee-flourish.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
}

/* ---- The other bee ----
   The flourish above is a horizontal drawing — two bees trailing a swirl —
   and it is also the band's only ornament, so a second page carrying the
   same quote band gets the same picture in the same place at the same size.

   This variant uses the pendant instead: the same two bees, but facing each
   other over a vertical spine of loops. Because it is tall rather than
   wide it is set against the band's height instead of the container's
   width, which also stops it reaching across into the quote.

   No mirroring here. The flourish is flipped because it is asymmetrical and
   points the wrong way otherwise; the pendant is symmetrical about its own
   spine and has no direction to correct. */
.bk-w.bk-scope.bk-inner .quoteband--element::before {
  width: auto;
  height: 160%;
  aspect-ratio: 386 / 750;
  transform: translateY(-50%);
  background-image: url("../../images/graphics/bee-element.png");
  opacity: 0.16;
}

@media (max-width: 639px) {
  .bk-w.bk-scope.bk-inner .quoteband::before { display: none; }
}

/* The opening quote mark is drawn rather than typed, so it can hang off the
   measure without pushing the line and without being read aloud. */
.bk-w.bk-scope.bk-inner .quoteband__text::before {
  content: "\201C";
  position: absolute;
  margin-left: -0.62em;
  color: var(--color-honey-gold);
  opacity: 0.55;
}


/* =========================================================================
   Pull quote / positioning line
   The "South East Asia's leading treatment centre" line the source sets as
   a band between sections.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .pullline {
  padding-block: var(--space-6);
  background-color: var(--bg-alt);
  text-align: center;
}

.bk-w.bk-scope.bk-inner .pullline p {
  margin-inline: auto;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--leading-display);
  color: var(--color-deep-water);
}


/* =========================================================================
   Holistic wellness strip
   Six named practices on the Behavioural Addiction page, each with a line
   of copy. A plain grid — they are peers, and nothing here ranks them.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .holistic__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

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

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-inner .holistic__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Four cards, two by two ----
   The default grid goes to three columns at 1024, which is right for three,
   five or six cards and wrong for exactly four: the fourth drops to a row
   of its own and the block ends on a ragged 3 + 1 with two empty cells.

   Two by two fills both rows, and it is the more compact of the two in the
   way that matters — the same four cards in half the columns means each
   paragraph gets roughly a third more measure, so it sets in fewer lines
   and the block comes out shorter than the ragged version it replaces.

   Opt-in rather than counting children with :has, because a four-item grid
   is not always a four-square idea: two rows of two reads as a matrix, and
   on a set that is really a list of four that pairing is an implication
   nobody meant. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-inner .holistic__grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-inner .holistic__grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
  }
}

.bk-w.bk-scope.bk-inner .holistic__item {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-pale-honey);
}

/* ---- A folded holistic grid ----
   The lightest of the folds to write, because the item is only a top rule
   and the padding under it — no card, no fill, no shadow. Both go, and the
   row gaps with them, or the folded half sits as a stack of honey rules
   over nothing. */
.bk-w.bk-scope.bk-inner .holistic__grid[data-fold] .holistic__item[hidden] {
  padding-top: 0;
  border-top: 0;
}

.bk-w.bk-scope.bk-inner .holistic__grid[data-fold] .holistic__item[hidden]:not([hidden="until-found"]) {
  display: none;
}

.bk-w.bk-scope.bk-inner .holistic__grid--folded { row-gap: 0; }

/* Inside a split column the grid is one column. The two- and three-across
   rules are written against the viewport, so a .holistic__grid dropped into
   a 562px copy column still tried for two tracks and gave each item 265px —
   a label and a sentence on four ragged lines. One track at the column's own
   measure is the honest arrangement when the band is already split in two. */
.bk-w.bk-scope.bk-inner .split__copy .holistic__grid { grid-template-columns: minmax(0, 1fr); }

/* ---- Breathing room back between the rows that are still showing ----
   Zeroing row-gap is what stops a folded grid leaving the gaps of its
   flattened rows behind. But row-gap does not know which rows are flat: on a
   fold that keeps two rows it closed the gap between those two as well, and
   the honey rule of the second row landed hard against the last line of the
   first. That is the "too packed" look, and it is mine.

   The gap comes back as a margin on the items still being rendered, which
   the hidden ones cannot contribute. Visible rows breathe; flattened rows
   add nothing. The last visible row carries it too, which simply sits as
   space above the control. */
.bk-w.bk-scope.bk-inner .signs__grid--folded > .signs__item:not([hidden]),
.bk-w.bk-scope.bk-inner .progs__grid--folded > .prog:not([hidden]),
.bk-w.bk-scope.bk-inner .holistic__grid--folded > .holistic__item:not([hidden]) {
  margin-bottom: var(--space-5);
}

.bk-w.bk-scope.bk-inner .crew--folded > .crew__member:not([hidden]) {
  margin-bottom: var(--space-7);
}

/* Award seals, above the citation they belong to. Sized by height rather
   than width because the two on file are different shapes — one a 600px
   square seal, one a 1500x700 landscape lockup — and matching their widths
   would make the square one twice the visual weight of the other. A common
   height is what makes a row of mixed marks read as a set. */
/* No plate. A navy plate was tried to rescue the Healthcare Asia mark,
   which is white artwork on a transparent ground and therefore invisible
   on the cream — but it only turned an invisible logo into an empty navy
   rectangle, which reads as broken rather than as absent. That file is
   hairline outline artwork: 10.5% ink coverage at 1500x700, so at the
   0.126 scale a card needs, every stroke lands under one pixel and the
   mark disappears whatever colour sits behind it. It needs a solid-fill
   version from the awards body; no amount of CSS recovers it.

   88px, not 64, for the marks that do render: these are detailed seals
   with several lines of type inside them, and at 64 that type was
   unreadable — its own kind of not being seen. */
.bk-w.bk-scope.bk-inner .award__logo {
  display: block;
  width: auto;
  height: 88px;
  max-width: 100%;
  margin-bottom: var(--space-4);
  object-fit: contain;
  object-position: left center;
}

/* The third award has no mark on file. It holds the row open so the three
   headings stay level, and must stay invisible doing it. */
.bk-w.bk-scope.bk-inner .award__logo--placeholder {
  background-color: transparent;
  padding: 0;
}

.bk-w.bk-scope.bk-inner .holistic__item .icon-chip { margin-bottom: var(--space-3); }

/* h4 as well as h3: where this grid sits under a .subhead of its own — "The
   House", on the aftercare page — the cards are that heading's children and
   have to be a level below it. The styling is the card's, not the level's. */
.bk-w.bk-scope.bk-inner .holistic__item :is(h3, h4) {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
}

.bk-w.bk-scope.bk-inner .holistic__item p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}


/* =========================================================================
   Facilities strip
   The centre, shown rather than asserted. Three across on desktop, two on
   a tablet, one on a phone — the frames stay 4:3 throughout so the band
   reads as one set rather than a ragged mosaic.
   ========================================================================= */

/* ---- Carousel ----
   One frame at full size over a rail of the others, dimmed. The rail is
   doing two jobs at once — it is the progress indicator and it is the way
   across — which is why the thumbnails are buttons rather than dots: a dot
   tells you where you are, a thumbnail also tells you what is next.

   Everything below the [data-carousel-ready] guard only applies once the
   script has run. Without it the markup is six figures in a column, which
   is what the .shots grid already styles, so the no-JS page stays sensible
   instead of collapsing to a single photograph with no way out of it. */

/* Words on the left, photograph on the right. Below 1000px they stack,
   copy first, which is the document order anyway. */
.bk-w.bk-scope.bk-inner .centre-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .centre-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-7);
    /* Centred against the carousel as a whole — frame, caption, rail and
       controls — so the copy sits level with the middle of the picture
       block rather than riding at the top of it. */
    align-items: center;
  }

  .bk-w.bk-scope.bk-inner .centre-grid .sec-head { grid-column: 1; grid-row: 1; }
  .bk-w.bk-scope.bk-inner .centre-grid .carousel { grid-column: 2; grid-row: 1; margin-top: 0; }
}

/* ---- Mirrored: photograph left, copy right ----
   Only the placement is mirrored. The document order is not, and that is
   the point of doing it with grid columns rather than by moving the markup:
   the heading stays ahead of the gallery it introduces, so a screen reader
   and a no-CSS render both still meet the section's own h2 — the one
   aria-labelledby points at — before six photographs of it.

   The photograph also takes the wider column here. Left and narrow, it read
   as a thumbnail propping up a paragraph; left and wider, the paragraph
   reads as a note on the place.

   1.43fr, up from the 1.15fr it started on. The first step to 1.3 was the
   controls leaving this column: they used to sit under the rail, so the
   photograph shared its height with a row of thumbnails and a row of
   buttons, and with the buttons gone to the other side the frame spent the
   freed height on width — it is a 16:9 box, so width is the only way it can
   get bigger. This step is a further 10% on the frame, asked for directly.

   1.43 / 0.57 is where 10% lands: the frame is a share of the well once the
   gutter is taken out, so 0.715 of it rather than 0.65 gives 749px -> 824px
   on a 1425px screen. The copy column pays for it, down to around 328px —
   which it can afford, being a heading and one short paragraph, but it is
   the reason this cannot keep going: another 10% would start breaking the
   paragraph into a column too narrow to read.

   Four rows, and the photograph spans all of them. The middle two hold the
   copy and the controls; the 1fr at either end is what centres that pair
   against the frame, which one row and align-items: center used to do for
   free before there were two things to centre.

   Below 1000px none of this applies: the grid collapses to a single column
   and document order takes over — copy, then gallery, then controls. That
   is the reason the nav is a child of this grid rather than of .sec-head.
   Nested in the copy it would have stacked between the words and the
   photograph, putting arrows above the thing they move. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .centre-grid--media-left {
    grid-template-columns: minmax(0, 1.43fr) minmax(0, 0.57fr);
    grid-template-areas:
      "media ."
      "media copy"
      "media nav"
      "media .";
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 0;
  }

  .bk-w.bk-scope.bk-inner .centre-grid--media-left .carousel { grid-area: media; }
  .bk-w.bk-scope.bk-inner .centre-grid--media-left .sec-head { grid-area: copy; }

  .bk-w.bk-scope.bk-inner .centre-grid--media-left .carousel__nav {
    grid-area: nav;
    /* Ranged left under the copy. margin-left: auto is the default, which
       pushed it to the far edge of the column, away from the text it now
       belongs to. */
    margin-left: 0;
    margin-top: var(--space-5);
  }
}

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

.bk-w.bk-scope.bk-inner .carousel__slide figure { margin: 0; }

.bk-w.bk-scope.bk-inner .carousel__slide picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--bg-alt);
  box-shadow: var(--shadow-media);
}

/* The frame stays a true 16:9 — it is the WIDTH that is capped, not the
   height. Setting a height and letting object-fit crop gave a 3.2:1
   letterbox instead of the ratio it claimed.
   At full container width 16:9 computes to 684px tall, and with the
   heading, caption, rail and controls the section ran past a screen. So the
   picture is held to whatever width makes 16:9 land at 41vh, and simply
   sits narrower than the text column on a wide window. Left-aligned, so its
   edge still lines up with the heading above it. */
.bk-w.bk-scope.bk-inner .carousel__slide picture {
  max-width: min(100%, calc(41vh * 16 / 9));
}

.bk-w.bk-scope.bk-inner .carousel__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bk-w.bk-scope.bk-inner .carousel__slide figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-beekeeper-blue);
}

/* The rail gets a line to itself, with the controls beneath it.
   Sharing one flex row with the nav left the thumbnails about 480px of a
   662px column, which was just short of the six and wrapped one onto a
   second row — a rail that is meant to read as a single strip of progress.
   Stacked, the thumbnails get the full column width whatever the nav does. */
.bk-w.bk-scope.bk-inner .carousel__foot {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* overflow-x belongs on the base, not only on .carousel--stage below. The
   stage variant got the guard because its thumbnails are larger, but the
   default rail overflows too — six 52px thumbs and five gaps do not fit a
   390px column either, and `access-my-super` is the one page carrying a
   plain .carousel, so it was the one page with 18px of horizontal page
   scroll at 390. The rail scrolls inside itself now whatever the variant;
   .carousel--stage keeps its own rule for the larger thumbs. */
.bk-w.bk-scope.bk-inner .carousel__thumbs {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bk-w.bk-scope.bk-inner .carousel__thumbs::-webkit-scrollbar { display: none; }

/* position: relative has no visual effect here and is not decoration — it
   is what keeps the button's own label inside the button.

   Each thumb carries a .visually-hidden span naming the photograph, and
   that utility is position: absolute. A <button> is not a positioned
   element, so the span's containing block was resolving past the rail
   entirely — which meant that when the rail became a scroll container in
   the stage variant, the six labels were the one thing it could not clip.
   They sat out at x=492 on a 390px screen and gave the document 102px of
   horizontal scroll: an invisible 1px label dragging the whole page
   sideways. Positioning the button contains them. */
.bk-w.bk-scope.bk-inner .carousel__thumb {
  position: relative;
  display: block;
  width: clamp(52px, 6vw, 86px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  /* Half strength, as asked: the rail reads as the quieter track under the
     frame, and the live one comes up to full. */
  opacity: 0.5;
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .carousel__thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.bk-w.bk-scope.bk-inner .carousel__thumb:hover { opacity: 0.8; }

.bk-w.bk-scope.bk-inner .carousel__thumb.is-current {
  opacity: 1;
  /* A gold rule under the live frame rather than a ring around it — the
     same mark the navigation uses for "you are here". */
  box-shadow: 0 3px 0 0 var(--color-honey-gold);
  transform: translateY(-2px);
}

.bk-w.bk-scope.bk-inner .carousel__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.bk-w.bk-scope.bk-inner .carousel__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-deep-water);
  cursor: pointer;
  transition: background-color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .carousel__btn:hover {
  background-color: var(--color-deep-water);
  border-color: var(--color-deep-water);
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-inner .carousel__count {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-beekeeper-blue);
  font-variant-numeric: tabular-nums;
}

/* ---- The controls on deep water ----
   The rail was only ever drawn for a cream ground and it shows: the count
   is beekeeper blue, which on deep water measures about 1.5:1 and is
   effectively invisible, and the buttons are solid white discs that hover
   to deep-water-on-cream — so on this ground they start as the loudest
   thing in the section and then vanish into it on hover.

   Reversed: the buttons are the ground with a cream hairline, and hovering
   fills them. Same gesture as the cream version, the other way up. */
.bk-w.bk-scope.bk-inner .section--inverse .carousel__count { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .section--inverse .carousel__btn {
  border-color: var(--border-hairline-inverse);
  background-color: transparent;
  color: var(--text-inverse);
}

.bk-w.bk-scope.bk-inner .section--inverse .carousel__btn:hover {
  background-color: var(--color-beeswax-cream);
  border-color: var(--color-beeswax-cream);
  color: var(--color-deep-water);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .carousel__thumb,
  .bk-w.bk-scope.bk-inner .carousel__thumb.is-current { transition: none; transform: none; }
}

/* =========================================================================
   Carousel — stage variant
   The same carousel, the same script, the same markup. What changes is the
   frame it is drawn in.

   Two columns, as the section always was, but the photograph takes the
   left-hand one and the wider share of it, and the copy is ranged left in
   the narrower column on the right. The default arrangement is the other
   way round, and on this section it read as a paragraph with a picture
   beside it rather than a place with a note about it.

   The full-screen version of this is gone. Handing the section a whole
   viewport meant the photograph was either edge-to-edge and 3:1, or 16:9
   and stranded in the middle of a field of navy, and the copy had to be
   centred above it to hold the composition together. Back in a column the
   frame is a plain 16:9, the copy is ranged left where the rest of the
   page's copy is, and nothing has to be sacrificed to fit a screen.

   What the variant still owns over the default: the frame is 16:9 rather
   than width-capped to 41vh, the caption is on the image in a gradient
   instead of underneath it in small blue type, and the thumbnails are
   large enough to read as rooms.
   ========================================================================= */

/* ---- The frame ----
   16:9, the full width of its column, corners rounded. No shadow: the
   ground is deep water and --shadow-media is mixed from the same blue, so
   it would cost a paint and show nothing.

   The ratio is on the <figure> rather than the <picture> because the
   caption is a sibling of the picture and is positioned against the
   figure. If the two were different boxes the scrim would not line up with
   the photograph it sits on. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Undoing the default frame: the width cap, the radius and the shadow all
   move to the figure above, which is now the thing being framed. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide picture {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  width: 100%;
}

/* The source photographs are 4:3, so a 16:9 frame crops them top and
   bottom. cover rather than contain: contain would show the whole 4:3
   original and letterbox it inside the frame, which puts bars round a
   picture in order to honour a ratio nobody can see. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide img {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* ---- The caption, on the image ----
   Six photographs of six different rooms, some pale, some dark. A caption
   on the cream underneath is legible but detached; a caption laid straight
   onto the photograph is attached but unreadable on half of them. The
   scrim buys both.

   The padding-block is lopsided on purpose: the gradient needs depth above
   the text to fade in over, or it reads as a bar rather than as light
   falling off. Underneath, the text only needs clearing from the edge. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding-block: var(--space-7) var(--space-4);
  padding-inline: var(--space-5);
  /* Five stops, weight at the bottom, worked back from the worst case
     rather than chosen by eye: the pale frames — the sala, the restaurant,
     the gym — put near-white directly under the text. Cream on a 0.82
     scrim over pure white measures 7.7:1, so the caption holds on any
     frame in the set. A shallower ramp measured 5.2:1, which passes but
     looks washed, and a washed caption reads as an accident. */
  background-image: linear-gradient(
    to top,
    rgba(21, 41, 60, 0.94) 0%,
    rgba(21, 41, 60, 0.82) 26%,
    rgba(21, 41, 60, 0.52) 58%,
    rgba(21, 41, 60, 0.18) 82%,
    rgba(21, 41, 60, 0) 100%
  );
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--leading-tight);
  /* The gradient is decoration; the text in it is not. Without this the
     caption inherits the frame's stacking and can sit under the scrim it
     is meant to sit on. */
  z-index: 1;
}

/* One gold stroke over the caption — the section's whole gold allowance
   besides the eyebrow and the comb cell. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide figcaption::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: var(--space-2);
  background-color: var(--color-honey-gold);
}

/* ---- The rail ----
   Two rows, thumbnails then controls, which is what the base .carousel__foot
   already does and for the reason its own note gives: six thumbnails and the
   nav do not fit one row at this column width. The base is left to do it.

   Larger thumbnails than the default 86px. Against a 16:9 frame this size
   the small ones read as a row of swatches; at this size they read as the
   other rooms, which is the job the rail is supposed to be doing. Sized so
   six plus their gaps still clear the column — overflow-x is the guard for
   the widths where they do not. */
.bk-w.bk-scope.bk-inner .carousel--stage .carousel__thumbs {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bk-w.bk-scope.bk-inner .carousel--stage .carousel__thumbs::-webkit-scrollbar { display: none; }

.bk-w.bk-scope.bk-inner .carousel--stage .carousel__thumb {
  flex: none;
  width: clamp(56px, 6.4vw, 92px);
}

/* On a phone the caption's display type over a 16:9 frame this narrow is
   most of the picture. It steps down and the scrim shallows with it. */
@media (max-width: 639px) {
  .bk-w.bk-scope.bk-inner .carousel--stage .carousel__slide figcaption {
    padding-block: var(--space-6) var(--space-3);
    font-size: var(--fs-h5);
  }
}

/* Controls to the left on a phone, not the right. The floating contact rail
   is position: fixed against the right edge, about 56px wide; right-aligned,
   the next arrow lands under the WhatsApp button. Left-aligned they sit
   under the head of the rail, clear of it. */
@media (max-width: 767px) {
  .bk-w.bk-scope.bk-inner .carousel--stage .carousel__nav {
    margin-left: 0;
    margin-right: auto;
  }
}

/* Three across, not four. At a 260px track the well fitted four tiles and
   each photograph came out about 280px wide — small enough that the pool,
   the sala and the gym all read as the same green rectangle, which is the
   opposite of what a gallery is for. A 380px floor gives three, and each
   frame is nearly half as big again.

   The 4:3 ratio is set here rather than left to the file. These are a mix
   of 900x675 and 900x1125 originals, so without it the row came out ragged
   and the captions sat at four different heights. */
.bk-w.bk-scope.bk-inner .shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-6);
}

/* =========================================================================
   The crew
   Named people with a face, a role and a line about them. The ruled list
   this replaces put each name in a narrow column beside its body, which is
   right for an index of topics and wrong for people: the photographs
   exist, and a face is the thing a reader is actually looking for on a
   team page.

   A card grid rather than a row: the seven bios run from eleven words to
   thirty, and in a single row the short ones leave a hole under them. In a
   grid each card closes on its own copy and the row heights even out.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  grid-auto-rows: auto auto auto auto;
  gap: var(--space-7) var(--space-5);
  margin-top: var(--space-7);
  list-style: none;
  padding: 0;
}

/* Subgrid, so the four bands line up across the row. The roles are not the
   same length — "Counselling Psychologist, Programme Development and
   Quality" runs to three lines where "Charge Nurse" takes one — and with
   each card owning its own flow that pushed one bio 41px below its
   neighbours and the row read as broken. Sharing the parent's rows means
   every photograph, name, role and bio starts on the same line regardless.

   Four explicit rows rather than subgrid on everything, because the number
   of bands is fixed by the markup and naming it is what lets a short role
   leave a gap instead of dragging the bio up into it. */
.bk-w.bk-scope.bk-inner .crew__member {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}

/* ---- A folded crew ----
   Six people is two rows of three, and on most pages that is the tallest
   block in the section. Folding to one row needs more care than the other
   grids because a member is a subgrid spanning four rows: hidden with
   until-found it keeps those four tracks, which collapse to nothing on
   their own — but the 64px row gap between the two member rows does not,
   and sat under the visible row as a band of dead space.

   The portrait is the other half of it. .crew__photo is sized by aspect
   ratio rather than by content, so it holds its height whether or not the
   content inside it is being rendered. */
.bk-w.bk-scope.bk-inner .crew[data-fold] .crew__member[hidden] { row-gap: 0; }

.bk-w.bk-scope.bk-inner .crew[data-fold] .crew__member[hidden] :is(.crew__photo, picture, img) {
  height: 0;
  min-height: 0;
}

.bk-w.bk-scope.bk-inner .crew[data-fold] .crew__member[hidden]:not([hidden="until-found"]) {
  display: none;
}

.bk-w.bk-scope.bk-inner .crew--folded { row-gap: 0; }

/* The seven portraits come from three different shoots: two landscape,
   five portrait, and every one a different ratio. A fixed 4:5 frame with
   cover is what stops the row reading as a contact sheet — and the focus
   sits above centre because a head is never in the middle of a portrait. */
.bk-w.bk-scope.bk-inner .crew__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focus, 50% 22%);
  border-radius: var(--radius-lg);
  background-color: var(--bg-alt);
}

/* A card header, which the scale puts at H4 — 18px rising to 24px. This was
   set at H5 and so came in under every other card name on the site: .prog h3,
   the programme stage and the reveal cards are all --fs-h4 display 500. The
   name is the card's heading and the role beneath it is the sub-label; at H5
   the name sat only one step off its own caption. */
.bk-w.bk-scope.bk-inner .crew__name {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* The role is the one line that has to be scannable down the whole grid,
   so it takes the eyebrow's treatment rather than the body's. */
.bk-w.bk-scope.bk-inner .crew__role {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .crew__bio {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .section--inverse .crew__name,
.bk-w.bk-scope.bk-inner .section--inverse .crew__bio { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .section--inverse .crew__role { color: var(--color-pale-honey); }

/* The caption was inheriting at 14px and reading as a file name under the
   picture. These are the only words naming what is in each frame, so they
   are the gallery's copy, not its metadata. */
.bk-w.bk-scope.bk-inner .shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .shot picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--bg-alt);
}

.bk-w.bk-scope.bk-inner .shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .shot:hover img { transform: scale(1.03); }

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


/* =========================================================================
   Timetable
   A real table for a real schedule. The wrapper scrolls, not the page:
   a two-column grid at this measure is fine on a phone, but the wrapper
   is there so a longer activity string can never push the body sideways.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .timetable {
  margin-top: var(--space-6);
  overflow-x: auto;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

.bk-w.bk-scope.bk-inner .timetable table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.bk-w.bk-scope.bk-inner .timetable thead th {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-deep-water);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.bk-w.bk-scope.bk-inner .timetable tbody tr + tr { border-top: 1px solid var(--border-hairline); }

.bk-w.bk-scope.bk-inner .timetable th[scope="row"] {
  padding: var(--space-3) var(--space-4);
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
  font-weight: 700;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .timetable td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.bk-w.bk-scope.bk-inner .weekend {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

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

.bk-w.bk-scope.bk-inner .weekend__day {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-pale-honey);
}

.bk-w.bk-scope.bk-inner .weekend__day h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
}

.bk-w.bk-scope.bk-inner .weekend__day p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}


/* =========================================================================
   FAQ
   Native <details>, one open at a time via the name attribute. Same
   arrangement as the homepage set, rebuilt here for a cream ground.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .faqs__list {
  margin-top: var(--space-6);
  max-width: 90ch;
}

.bk-w.bk-scope.bk-inner .faqs__item {
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .faqs__list li:last-child .faqs__item {
  border-bottom: 1px solid var(--border-hairline);
}

/* ---- A disclosure that is not in a list ----
   Used where a subsection is a tail rather than a peer: on the mood
   disorders page, three conditions get a card each and a fourth block names
   four more in a paragraph. As a .subhead and a slab of prose it read as
   something left over after the cards — 128px of air above it, a heading,
   and a 500-character paragraph at full measure.

   Folded, it is a line the reader can open, which is what that content is.
   .faqs__item only draws its top rule; the bottom one comes from
   `.faqs__list li:last-child`, and a lone disclosure has no list to be last
   in, so it closes itself. */
.bk-w.bk-scope.bk-inner .faqs__item--lone {
  margin-top: var(--space-6);
  max-width: 90ch;
  border-bottom: 1px solid var(--border-hairline);
}

/* Where the label is also a heading in the document — a folded subsection
   rather than a question — the heading goes inside the summary and takes
   the summary's own setting. Left alone it arrives at --fs-h3 and outshouts
   the row it is sitting in. */
.bk-w.bk-scope.bk-inner .faqs__q h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.bk-w.bk-scope.bk-inner .faqs__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .faqs__q::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-inner .faqs__q:hover { color: var(--color-beekeeper-blue); }

/* A plus that becomes a minus. Drawn from two bars so it can rotate rather
   than swap glyph, which keeps the change continuous. */
.bk-w.bk-scope.bk-inner .faqs__mark {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.bk-w.bk-scope.bk-inner .faqs__mark::before,
.bk-w.bk-scope.bk-inner .faqs__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background-color: var(--color-honey-gold);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .faqs__mark::after { transform: rotate(90deg); }

.bk-w.bk-scope.bk-inner .faqs__item[open] .faqs__mark::after { transform: rotate(0deg); }

.bk-w.bk-scope.bk-inner .faqs__answer {
  padding-bottom: var(--space-5);
  max-width: var(--measure);
}

/* ---- On deep water ----
   Two pages close on their questions, and on both of them the alternation
   arrives at the FAQ wanting a dark ground. Everything in the block already
   inherits correctly except the three things that name a colour outright:
   the hairlines between rows, the question itself, and its hover.

   .faqs__q is a <summary>, not a heading, so .section--inverse h2/h3 never
   reached it and it stayed ink-on-ink. The hover moves to pale honey for
   the same reason the links do — beekeeper blue is a cream-ground colour
   and all but disappears here.

   The answer takes the same 0.86 cream as .condition__copy: at full
   strength the answer weighs as much as the question above it and the pair
   stop reading as question and answer. */
.bk-w.bk-scope.bk-inner .section--inverse .faqs__item,
.bk-w.bk-scope.bk-inner .section--inverse .faqs__list li:last-child .faqs__item {
  border-color: var(--border-hairline-inverse);
}

.bk-w.bk-scope.bk-inner .section--inverse .faqs__q { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .section--inverse .faqs__q:hover { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .section--inverse .faqs__answer { color: rgba(250, 246, 238, 0.86); }


/* =========================================================================
   Journey + enquiry
   The section every Addictions page closes on. Rebuilt for a flat interior
   ground: the homepage runs a photograph behind this and washes it out,
   which is a homepage gesture.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .close__grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .close__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-7);
    align-items: start;
  }
}

.bk-w.bk-scope.bk-inner .journey-list { margin-top: var(--space-5); }

.bk-w.bk-scope.bk-inner .journey-list li {
  display: flex;
  gap: var(--space-4);
}

.bk-w.bk-scope.bk-inner .journey-list li + li { margin-top: var(--space-5); }

.bk-w.bk-scope.bk-inner .journey-list h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.bk-w.bk-scope.bk-inner .journey-list p {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  max-width: 52ch;
}

.bk-w.bk-scope.bk-inner .enquiry-card {
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

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

.bk-w.bk-scope.bk-inner .enquiry-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
}

.bk-w.bk-scope.bk-inner .enquiry-card .form { margin-top: var(--space-5); }


/* =========================================================================
   Closing call
   ========================================================================= */

/* The closing band follows the "why us" section, which is also deep water.
   Two flat dark bands in a row read as one slab with a heading stranded in
   the middle of it, so this one takes a photograph and a heavy wash: enough
   to separate the two, not enough to compete with the type.

   The wash is a gradient of the same deep water rather than plain black —
   black over a green garden goes grey and muddy, and the page has no grey
   in it. Kept at 0.86/0.80 so the cream headline holds well clear of AA
   against every part of the frame underneath, including its lightest.

   Done as a CSS background rather than an <img>: it is decorative, and this
   way one rule covers all 42 interior pages without touching their markup.
   That rules out <picture>, so it ships as a hard-compressed JPEG — under
   this much wash the compression is invisible. */
.bk-w.bk-scope.bk-inner .callout {
  padding-block: var(--space-8);
  background-color: var(--bg-inverse);
  background-image:
    linear-gradient(rgba(21, 41, 60, 0.86), rgba(21, 41, 60, 0.80)),
    url("../../images/photography/callout-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-inverse);
  text-align: center;
}

/* Three frames, rotated across the site so the band is not the same
   photograph on all 42 pages. Each page keeps its own permanently — the
   variant is assigned from the filename, not at random — so a page looks
   the same every time you return to it. Only the image changes; the wash,
   the padding and the type are identical in all three.

   All three were chosen for being quiet: soft focus, no centred subject,
   nothing structural running through the left half where the heading and
   paragraph sit. */
.bk-w.bk-scope.bk-inner .callout--2 {
  background-image:
    linear-gradient(rgba(21, 41, 60, 0.86), rgba(21, 41, 60, 0.80)),
    url("../../images/photography/callout-bg-2.jpg");
}

.bk-w.bk-scope.bk-inner .callout--3 {
  background-image:
    linear-gradient(rgba(21, 41, 60, 0.86), rgba(21, 41, 60, 0.80)),
    url("../../images/photography/callout-bg-3.jpg");
}

/* The thumbprint watermark was carrying this band when it was flat. The
   photograph does that job now, and at 5% over a picture it only reads as
   dirt on the lens. */
.bk-w.bk-scope.bk-inner .callout.has-thumb::before { display: none; }

.bk-w.bk-scope.bk-inner .callout h2 { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .callout p {
  margin-inline: auto;
  margin-top: var(--space-4);
  max-width: 62ch;
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-inner .callout__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* The bee mark, small, centred above the heading. */
.bk-w.bk-scope.bk-inner .callout__mark {
  margin-inline: auto;
  margin-bottom: var(--space-4);
  width: 44px;
  height: auto;
  opacity: 0.9;
}

/* ---- Ranged left ----
   Centred is right for this block when it arrives on its own — it is the
   page signing off, and a centred mark over a centred line reads as a
   colophon. It is wrong directly under .section--inverse, which is the usual
   arrangement: that section is ranged left on the same deep water, so the
   two share a ground with no edge between them and read as one block that
   changes its mind about alignment halfway down.

   Same ground, same alignment. The mark keeps its own margin rather than
   inheriting the centre, so it still sits over the heading rather than
   drifting to the measure's middle.

   .callout--ranged exists because the adjacency selector alone made the
   alignment a side effect of the neighbouring section's colour, and that
   is too long a piece of string. Recolouring the section above this one
   from deep water to cream silently un-matched `.section--inverse +
   .callout` and dropped the whole block back to centred — the heading, the
   bee mark and the button all moved, from a change that never mentioned
   the callout. The class states the intent in the markup instead, so it
   holds whatever the section above happens to be painted. */
.bk-w.bk-scope.bk-inner .section--inverse + .callout,
.bk-w.bk-scope.bk-inner .callout--ranged {
  text-align: left;
}

.bk-w.bk-scope.bk-inner .section--inverse + .callout .callout__mark,
.bk-w.bk-scope.bk-inner .section--inverse + .callout p,
.bk-w.bk-scope.bk-inner .callout--ranged .callout__mark,
.bk-w.bk-scope.bk-inner .callout--ranged p {
  margin-inline: 0;
}

.bk-w.bk-scope.bk-inner .section--inverse + .callout .callout__actions,
.bk-w.bk-scope.bk-inner .callout--ranged .callout__actions {
  justify-content: flex-start;
}

/* =========================================================================
   Tag list
   A list of short labels — eleven named conditions, no descriptions.

   It arrived as a ruled list, which is the component for entries with
   something to read; given nouns it produces a ledger with eleven lines
   and one word on each. It was then tried as cards, which is the
   component for entries with a mark and a sentence; given nouns it
   produces eleven identical white boxes four rows deep, and the section
   stopped having a left and a right at all.

   The form that fits a set of short labels is a set of short labels: they
   wrap as a group rather than stacking as a column, so the block is about
   a third of the height, reads as one thing rather than eleven, and
   leaves the copy beside it looking like a companion instead of a stub.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms .taglist { margin-top: 0; }
}

/* ---- A folded tag list ----
   display: none, and deliberately not the content-visibility route the
   grids use. A tag is a chip: padding, a hairline, a radius and a white
   fill. Hidden with until-found it keeps every one of them and goes on
   being a flex item, so folding three chips left three empty pills and
   three flex gaps sitting in the row. There is nothing to collapse here the
   way a grid cell collapses.

   The cost is that the folded chips stop being findable by Ctrl-F. They are
   two- and three-word labels rather than prose, they are still in the DOM
   for search and for print, and an empty pill is a worse thing to ship. */
.bk-w.bk-scope.bk-inner .taglist[data-fold] > li[hidden] { display: none; }

.bk-w.bk-scope.bk-inner .taglist li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  background-color: var(--color-white);
  font-size: var(--fs-small);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* The comb cell, at bullet size — the same mark the ruled list uses, so
   the two forms read as the same family seen at different densities. */
.bk-w.bk-scope.bk-inner .taglist li::before {
  content: "";
  flex: none;
  width: 11px;
  height: 13px;
  background-color: var(--color-honey-gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.bk-w.bk-scope.bk-inner .section--inverse .taglist li {
  border-color: var(--border-hairline-inverse);
  background-color: transparent;
  color: var(--text-inverse);
}

/* =========================================================================
   Even rows
   auto-fit packs in as many columns as will fit, which is right for a
   nineteen-item index and wrong for a named set: seven groups came out
   five-and-two, six anxiety types five-and-one. A row of five followed by
   a row with three empty slots reads as a grid that ran out, not as a set.

   So a set states its own column count, chosen to leave the shortest
   possible tail — seven go four-and-three, six go three-and-three. The
   cap stays at the auto-fit minimum below it, so nothing is forced
   narrower than it can hold.
   ========================================================================= */

/* Two columns start earlier than three and four do. A set that states two is
   a set of four or six, and between 640 and 900 the auto-fit minimum gives
   it three — which lands a four-item set on 3 + 1, the worst split there is
   and the one this whole mechanism exists to avoid. Two columns of a 600px
   container is 300px each, comfortably above the 210px floor. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-inner .treats__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .treats__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-w.bk-scope.bk-inner .treats__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   The timetable, folded
   Fifteen rows of a weekday is reference material: worth having, not worth
   scrolling past to reach the rest of the page. It opens on its own
   control, and the summary says what is inside so the control is a
   sentence rather than a chevron.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .timetable--fold { margin-top: var(--space-5); }

.bk-w.bk-scope.bk-inner .timetable__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .timetable__toggle::-webkit-details-marker { display: none; }
.bk-w.bk-scope.bk-inner .timetable__toggle:hover { border-color: var(--color-beekeeper-blue); }

.bk-w.bk-scope.bk-inner .timetable__sign {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-morning-blue);
  border-radius: 50%;
}

.bk-w.bk-scope.bk-inner .timetable__sign::before,
.bk-w.bk-scope.bk-inner .timetable__sign::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto 6px;
  height: 1px;
  background-color: var(--color-morning-blue);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .timetable__sign::after { transform: rotate(90deg); }
.bk-w.bk-scope.bk-inner .timetable--fold[open] .timetable__sign::after { transform: rotate(0deg); }

.bk-w.bk-scope.bk-inner .timetable--fold[open] .timetable__toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bk-w.bk-scope.bk-inner .timetable--fold .timetable {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* =========================================================================
   The ruled list, folded
   A numbered entry whose name sits in a narrow column beside its body is
   right for an index someone scans for one of nineteen things. It is wrong
   for two or three named ideas: the number counts something nobody is
   counting, and "What to expect during a medically supervised alcohol
   detox" set in a 160px column comes out as six lines of display type
   beside a paragraph.

   Folded, the name is the control and runs the full width, so it stays on
   one line and the body opens under it.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .detail__item--fold { display: block; padding-block: 0; }

.bk-w.bk-scope.bk-inner .detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}

.bk-w.bk-scope.bk-inner .detail__head::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-inner .detail__head .detail__name {
  margin: 0;
  transition: color var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .detail__item--fold:hover .detail__name { color: var(--color-beekeeper-blue); }
.bk-w.bk-scope.bk-inner .section--inverse .detail__item--fold:hover .detail__name { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .detail__sign {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
}

.bk-w.bk-scope.bk-inner .detail__sign::before,
.bk-w.bk-scope.bk-inner .detail__sign::after {
  content: "";
  position: absolute;
  inset: 50% 6px auto 6px;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .detail__sign::after { transform: rotate(90deg); }
.bk-w.bk-scope.bk-inner .detail__item--fold[open] .detail__sign::after { transform: rotate(0deg); }

.bk-w.bk-scope.bk-inner .detail__item--fold .detail__body {
  max-width: var(--measure);
  margin-top: 0;
  padding-bottom: var(--space-5);
}

/* =========================================================================
   Grouped symptoms
   Twelve symptoms, each tagged Manic or Depressive, came out as the word
   "Manic" six times and "Depressive" six times down a two-column list. The
   label is the group, not the item: said once over the set it names, it
   stops being noise and starts being structure.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .signs__group + .signs__group { margin-top: var(--space-7); }

.bk-w.bk-scope.bk-inner .signs__group h3 {
  font-size: var(--fs-h4);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .section--inverse .signs__group h3 { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .signs__group .taglist { margin-top: var(--space-4); }

/* ---- Capped to the first five rows ----
   daystrip.js measures the fifth row's bottom edge into --cap and puts
   .is-clamped on the wrapper. Every row stays in the flow underneath, so
   the sixth is really there and really cut, and the mask has something to
   dissolve into rather than the table simply stopping.

   A mask rather than a gradient overlay: the table sits on white inside a
   hairline border on two different section grounds, and an overlay would
   have to know which. The mask takes the rows away and leaves whatever is
   behind them. */
/* The open and closed heights are both real numbers — daystrip.js measures
   the fifth row's bottom for one and the table's full height for the other
   — so max-height has two lengths to interpolate between and the fold can
   actually move. `none` would not work here: it is a keyword, and the
   table would jump to full height in a single frame while the mask faded
   over 320ms, which reads as a fault rather than as an opening.

   The mask ramp animates with it, from 82% to 100%, so the gradient lifts
   as the rows arrive rather than snapping off at the start. */
/* Neither height lives on the bare .timetable. Putting the open height
   there meant the element always carried a max-height and the clamp had to
   win an override on every paint; both states are explicit classes now, so
   the base rule describes the transition and nothing else and there is
   exactly one rule setting a height at any moment. */
.bk-w.bk-scope.bk-inner .timetable {
  transition: max-height var(--dur-slow) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .timetable.is-open {
  max-height: var(--full, none);
  overflow: hidden;
}

.bk-w.bk-scope.bk-inner .timetable.is-clamped {
  max-height: var(--cap, 20rem);
  overflow: hidden;
  /* The ramp starts at 82%, not two thirds. Lower and it eats the fourth
     row as well, so the reader is being asked to squint at rows that are
     meant to be read — the fade is a promise about row six, not a veil
     over rows four and five. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.bk-w.bk-scope.bk-inner .timetable__more {
  margin-top: var(--space-4);
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

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


/* =========================================================================
   The hive
   The small version of the homepage's press comb, for the lists that were
   a column of hairline rows with a gold hexagon on each. Those rows are
   readable but inert: seven sentences of equal weight, nothing to do, and
   the eye slides off them.

   The geometry is driven by --cols and --rows rather than hard-coded to one
   arrangement, because the two instances differ — seven cells go 4/3 and
   six go 3/3 — and hard-coding the homepage's eleven-cell ratio is exactly
   what stops that component being reusable.

   The arithmetic, in units of one cell's width:
     a pointy-top regular hexagon is 1.1547 tall
     rows overlap, so each new row adds 0.866 rather than a full height
     so the comb is cols wide and 1.1547 + (rows - 1) x 0.866 tall
   --unit holds that height, and every cell measure is a fraction of it.

   clip-path: polygon(), not the SVG clipPath the homepage uses. That one
   buys mitred corners and a true even ring, and it costs two <defs> inlined
   into the page. At this size the mitres are a pixel and the ring is a flat
   fill, so the polygon already in this file for the bullets does the job
   with no markup at all.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .hive {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

/* Held to the right-hand edge of its column, away from the heading.
   Padding alone could not do this and it is worth saying why: the comb is
   520px but the panel under it stretched to the full 737px column, so the
   panel hit the container's right edge while the comb still had 150px of
   room on its own. Inset any further and the text overflowed, not the
   hexagons.

   So the block is capped at the comb's own width and pushed right as one
   piece. The comb and the panel keep a common left edge — they are one
   unit, the cells and the thing they open — and that edge now sits about
   310px clear of the headline instead of 64px.

   Only where the two are side by side. Stacked on a narrow screen there is
   no heading to the left to move away from. */
@media (min-width: 1000px) {
  .bk-w.bk-scope.bk-inner .symptoms .hive {
    max-width: 520px;
    margin-left: auto;
  }
}

/* Side by side, balanced. Stacked was tried and put the panel a long way
   below the cell that opened it, with the comb's own row left half empty
   — the block grew tall and the cause and its effect stopped being in
   view at the same time.

   The two columns are weighted 1 : 1.15 rather than evenly. The comb is a
   fixed shape with a known width; the panel is running text and wants the
   larger share, and giving the text the remainder is what stops the
   hexagons shrinking to fit a column they do not need.

   align-items: center so a one-line entry sits against the middle of the
   comb rather than against its top edge, which is what made the earlier
   side-by-side version look unbalanced. */
/* One column: the comb is the first row and the panel it opens is the
   second, directly beneath it. Side by side was tried and put the answer
   to the right of the question at a width where both had to shrink to fit;
   stacked, the comb keeps its full size and the text lands where the eye
   already is — under the cell just clicked. */

.bk-w.bk-scope.bk-inner .hive__comb {
  --cols: 4;
  --rows: 2;
  --unit: calc(1.1547 + (var(--rows) - 1) * 0.866);
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: var(--cols) / var(--unit);
  margin-inline: 0;
}

/* The panels crossfade in one grid cell, so the block's height is whatever
   the longest of them needs. A floor stops the section jumping as the
   reader moves from a one-line entry to a four-line one. */
.bk-w.bk-scope.bk-inner .hive__panels { min-height: 6rem; }

.bk-w.bk-scope.bk-inner .hive__cell {
  position: absolute;
  left: calc((var(--c) + var(--o) * 0.5) * (100% / var(--cols)));
  top: calc(var(--r) * (0.866 / var(--unit)) * 100%);
  width: calc(100% / var(--cols));
  height: calc((1.1547 / var(--unit)) * 100%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background-color: var(--color-white);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  cursor: pointer;

  /* The cell fills its slot so neighbours meet along their edges and the
     rows interlock — points sitting in the notches of the row above,
     which is what makes it a comb rather than a grid of hexagons. The
     separating seam is a fraction of a cell, not a gap in the tiling. */
  transform: scale(0.985);
  transition: background-color var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-inner .hive__icon {
  width: 34%;
  max-width: 30px;
}

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

.bk-w.bk-scope.bk-inner .hive__label {
  max-width: 76%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .hive__cell:hover { transform: scale(1); }

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

.bk-w.bk-scope.bk-inner .hive__cell[aria-selected="true"] {
  transform: scale(1);
  background-color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-inner .hive__cell[aria-selected="true"] .hive__label { color: var(--color-deep-water); }

/* One grid cell, so the panels sit on top of each other and the block does
   not change height as the reader moves across the comb. */
.bk-w.bk-scope.bk-inner .hive__panels { display: grid; }

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

.bk-w.bk-scope.bk-inner .hive__panel.is-current { visibility: visible; opacity: 1; }

.bk-w.bk-scope.bk-inner .hive__panel h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: 700;
}

.bk-w.bk-scope.bk-inner .hive__panel p {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

/* Script off: every panel is in the flow and readable, and the comb above
   is decoration rather than a control nobody can operate. hive.js closes
   the set on init, so this is the state the markup ships in. */
.bk-w.bk-scope.bk-inner .hive:not([data-hive-ready]) .hive__panels {
  display: block;
}

.bk-w.bk-scope.bk-inner .hive:not([data-hive-ready]) .hive__panel {
  visibility: visible;
  opacity: 1;
}

.bk-w.bk-scope.bk-inner .hive:not([data-hive-ready]) .hive__panel + .hive__panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-inner .hive__cell,
  .bk-w.bk-scope.bk-inner .hive__panel { transition: none; }
}


/* =========================================================================
   Dot plot — a measure's intake average, its latest average, and the
   clinical line between them

   Three numbers per row, and the only one that means anything on its own is
   the distance between the first two. A bar chart would draw that distance
   as area growing from zero, which is the wrong shape: these are points on
   a fixed clinical scale, not quantities. So the scale is the track, the two
   averages are dots on it, and the span between them is the mark that
   carries the finding.

   The threshold is the third thing and it is not a value being compared —
   it is the line the scores are read against. It takes a rule rather than a
   dot so it cannot be mistaken for one of the two measurements.

   Every row is also written out in words underneath. The plot is a reading
   aid for a sentence that stands without it, which is what lets the track
   itself be aria-hidden rather than described twice.
   ========================================================================= */

.bk-w.bk-scope.bk-inner .dotplot {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.bk-w.bk-scope.bk-inner .dotplot__row + .dotplot__row {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .section--alt .dotplot__row + .dotplot__row { border-top-color: rgba(34, 64, 94, 0.14); }
.bk-w.bk-scope.bk-inner .section--inverse .dotplot__row + .dotplot__row { border-top-color: var(--border-hairline-inverse); }

.bk-w.bk-scope.bk-inner .dotplot__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__name { color: var(--text-inverse); }

.bk-w.bk-scope.bk-inner .dotplot__name span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__name span { color: var(--color-pale-honey); }

/* The track is the full scale, 0 to the instrument's maximum. Its height is
   set on the rule rather than the box so the dots can overhang it. */
.bk-w.bk-scope.bk-inner .dotplot__track {
  position: relative;
  height: 44px;
  margin-top: var(--space-5);
}

.bk-w.bk-scope.bk-inner .dotplot__track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-color: var(--border-hairline);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__track::before { background-color: var(--border-hairline-inverse); }

/* The distance travelled. Drawn under the dots, so the dots cap it. */
.bk-w.bk-scope.bk-inner .dotplot__span {
  position: absolute;
  top: 50%;
  left: min(var(--from), var(--to));
  width: max(calc(var(--from) - var(--to)), calc(var(--to) - var(--from)));
  height: 6px;
  transform: translateY(-50%);
  border-radius: 3px;
  background-color: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-inner .dotplot__dot {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  transform: translateY(-50%);
  border-radius: 50%;
}

/* Intake is the hollow dot and latest is the filled one: the filled one is
   where the client ended up, and that is the figure the row is about. */
.bk-w.bk-scope.bk-inner .dotplot__dot--from {
  left: var(--from);
  background-color: var(--bg-page);
  border: 2px solid var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .section--alt .dotplot__dot--from { background-color: var(--bg-alt); }

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__dot--from {
  background-color: var(--bg-inverse);
  border-color: var(--color-morning-blue);
}

.bk-w.bk-scope.bk-inner .dotplot__dot--to {
  left: var(--to);
  background-color: var(--color-deep-water);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__dot--to { background-color: var(--color-pale-honey); }

/* The clinical line. Full height of the track so it reads as a boundary
   crossing the scale rather than as a third measurement on it, and stacked
   ABOVE the dots: on CORE-10 the latest average and the threshold are two
   tenths of a point apart, and underneath the dot the line vanished at
   exactly the row where a reader most wants to see where it falls. */
/* Beekeeper blue rather than morning blue, which is decorative-only and
   lands at 2.6:1 on cream — under the 3:1 floor a non-text graphic needs.
   This line is the thing every score on the row is read against, so it has
   to be legible. On deep water the pale tone takes over. */
.bk-w.bk-scope.bk-inner .dotplot__tick {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--threshold);
  width: 2px;
  margin-left: -1px;
  background-image: linear-gradient(
    to bottom,
    var(--color-beekeeper-blue) 0 7px,
    transparent 7px 11px);
  background-size: 2px 11px;
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__tick {
  background-image: linear-gradient(
    to bottom,
    var(--color-morning-blue) 0 7px,
    transparent 7px 11px);
}

.bk-w.bk-scope.bk-inner .dotplot__read {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__read { color: rgba(250, 246, 238, 0.86); }

.bk-w.bk-scope.bk-inner .dotplot__read strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
}

.bk-w.bk-scope.bk-inner .dotplot__read span {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot__read span { color: var(--color-pale-honey); }

/* The key, once, above the rows. Reusing .dotplot__dot keeps the swatches
   and the plot in step: restyle one and the other follows. */
.bk-w.bk-scope.bk-inner .dotplot-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-inner .section--inverse .dotplot-key { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-inner .dotplot-key li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bk-w.bk-scope.bk-inner .dotplot-key .dotplot__dot,
.bk-w.bk-scope.bk-inner .dotplot-key .dotplot__tick {
  position: static;
  top: auto;
  bottom: auto;
  left: auto;
  width: 14px;
  height: 14px;
  margin: 0;
  transform: none;
  flex: 0 0 auto;
}

.bk-w.bk-scope.bk-inner .dotplot-key .dotplot__tick {
  width: 2px;
  height: 16px;
}

@media (min-width: 640px) {
  /* Name left, plot and reading right. Below this the three stack, because
     a 21-point scale squeezed beside a heading cannot show a 2-point
     difference at all. */
  .bk-w.bk-scope.bk-inner .dotplot__row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    column-gap: var(--space-6);
    align-items: center;
  }

  .bk-w.bk-scope.bk-inner .dotplot__track { margin-top: 0; }
  .bk-w.bk-scope.bk-inner .dotplot__read { grid-column: 2; }
}


/* =========================================================================
   Utilities
   The Beekeeper House

   The master design system (beekeeper_design-system-en.md, rule 2) bans
   inline `style="..."` outright. The build had 803 of them, and roughly
   700 were a single declaration: `margin-top: var(--space-N)`, the gap
   between a block and the one above it.

   This block is what they become. It is deliberately NOT a general-purpose
   utility framework — there is one axis here, the one the markup actually
   used, and nothing else gets added without the same evidence.

   Three things to know before using them.

   1. The class is written twice in each selector — `.space-above-5
      .space-above-5` — and that is not a typo. An inline style carries
      1-0-0-0 and beats everything; a single class carries 0-1-0 and does
      not. The first cut of this block used single classes and one of the
      21 silently came out 8px short: `.condition__copy p` is 0-1-1 and
      won. Doubling buys 0-2-0, which clears the contextual component
      rules, without reaching for !important — so a media query or a
      genuinely more specific rule can still override a utility when it
      has reason to. On a 44-page rollout the alternative is finding the
      next .condition__copy by eye, forty more times.

      They still live at the end of the file on purpose: 0-2-0 ties with
      plenty of component rules, and a tie is decided by source order.

   2. They are opt-in, and that is the whole reason a staged rollout is
      safe. Baking these values into the components instead would reach
      elements that never carried an inline style: .comb-rule alone has 69
      instances with no inline margin, and a component default would have
      moved every one of them by 32px. Nothing here applies until a class
      is written on an element.

   3. Check for redundancy before reaching for one. .page-hero__actions
      already sets margin-top: var(--space-6) in the component, so an
      inline `margin-top: var(--space-6)` on it is saying what the
      stylesheet already says — that attribute is deleted, not translated.
      One of the 21 on addiction-treatment.html was this case.
   ========================================================================= */

/* ---- Space above ----
   margin-top only. 803 inline declarations and not one of them set a
   bottom, a left or a right: this system spaces a block from the thing
   above it, so the utility does the same and does not invent three more
   directions nobody asked for. Named for the token, because the token is
   the vocabulary the rest of the stylesheet already speaks. */
.bk-w.bk-scope.bk-inner .space-above-0.space-above-0 { margin-top: 0; }
.bk-w.bk-scope.bk-inner .space-above-2.space-above-2 { margin-top: var(--space-2); }
.bk-w.bk-scope.bk-inner .space-above-3.space-above-3 { margin-top: var(--space-3); }
.bk-w.bk-scope.bk-inner .space-above-4.space-above-4 { margin-top: var(--space-4); }
.bk-w.bk-scope.bk-inner .space-above-5.space-above-5 { margin-top: var(--space-5); }
.bk-w.bk-scope.bk-inner .space-above-6.space-above-6 { margin-top: var(--space-6); }
.bk-w.bk-scope.bk-inner .space-above-7.space-above-7 { margin-top: var(--space-7); }
.bk-w.bk-scope.bk-inner .space-above-8.space-above-8 { margin-top: var(--space-8); }

/* ---- Title measure ----
   A cap in `ch` on a display heading, which is how the banners control
   where a long title breaks. Per-title tuning, so it cannot become a
   component default — "Addiction Treatment Thailand" wants a different
   cap from "Why Australians Choose Us".

   Only the values the build actually uses. Adding the rest of the number
   line would be inventing a scale rather than recording one; if a new
   title needs 25ch, add 25ch then. */
.bk-w.bk-scope.bk-inner .measure-10ch.measure-10ch { max-width: 10ch; }
.bk-w.bk-scope.bk-inner .measure-13ch.measure-13ch { max-width: 13ch; }
.bk-w.bk-scope.bk-inner .measure-14ch.measure-14ch { max-width: 14ch; }
.bk-w.bk-scope.bk-inner .measure-15ch.measure-15ch { max-width: 15ch; }
.bk-w.bk-scope.bk-inner .measure-16ch.measure-16ch { max-width: 16ch; }
.bk-w.bk-scope.bk-inner .measure-17ch.measure-17ch { max-width: 17ch; }
.bk-w.bk-scope.bk-inner .measure-18ch.measure-18ch { max-width: 18ch; }
.bk-w.bk-scope.bk-inner .measure-19ch.measure-19ch { max-width: 19ch; }
.bk-w.bk-scope.bk-inner .measure-20ch.measure-20ch { max-width: 20ch; }
.bk-w.bk-scope.bk-inner .measure-21ch.measure-21ch { max-width: 21ch; }
.bk-w.bk-scope.bk-inner .measure-22ch.measure-22ch { max-width: 22ch; }
.bk-w.bk-scope.bk-inner .measure-23ch.measure-23ch { max-width: 23ch; }
.bk-w.bk-scope.bk-inner .measure-24ch.measure-24ch { max-width: 24ch; }
.bk-w.bk-scope.bk-inner .measure-38ch.measure-38ch { max-width: 38ch; }

/* ---- Portrait focus ----
   --focus aims the crop on a portrait whose subject sits off-centre, and
   it was inline on 71 images. It reads like per-instance data that cannot
   leave the markup, but it is not: the value belongs to the photograph,
   not to the page, so the same face takes the same value on all 26 pages
   that show it.

   The catch, and the reason this is scoped to .crew__photo rather than
   keyed on the filename alone: robert, paritat and tum each carry TWO
   different values across the build, because the homepage crops them for
   a different frame. Scoping to the card component separates the two
   cleanly — inside .crew__photo there is exactly one value per face, and
   index.html does not use the class at all, so it is untouched.

   One block here retires 53 inline attributes across the site. The
   remaining 18 are one-off crops on scenery and stay where they are until
   something proves they repeat.

   Three faces only, and the list does not grow by guesswork. Carin, Beth
   and Mark also carry a --focus somewhere in the build, but ONLY on
   index.html's .team__photo, which is a different frame at a different
   ratio. Lifting those values into the card component looked like
   tidying and would have silently re-cropped about a hundred portraits
   across twenty-five pages against crops authored for a shape they are
   not in. A value earns a line here when it appears on .crew__photo
   itself, not when it appears anywhere.

   Tum is the other near-miss, and he is left out for a different reason:
   his crop appears on .crew__photo exactly once, on our-location, while
   the other twenty-five pages render him on the component default. One
   page in twenty-six is a local correction somebody made in place, not
   an established value for the face — promoting it would have moved him
   6% up on twenty-five pages nobody asked about. It stays inline where
   it is until somebody decides which of the two is right.

   The test, then, is not "does a value exist" but "is it already what
   this component does everywhere". Robert and Paritat are 26 of 26. */
.bk-w.bk-scope.bk-inner .crew__photo[src$="/robert.jpg"]  { --focus: 50% 34%; }
.bk-w.bk-scope.bk-inner .crew__photo[src$="/paritat.jpg"] { --focus: 50% 30%; }

/* ---- A wide-frame crew row ----
   .crew__photo is 4:5, which is right for the six-person band: two rows
   of three inside the 760px column of the two-column arrangement, where
   a card is 232px wide and the portrait is 290px tall.

   It is wrong for a three-person row at full width. Three cards across
   1216px are 379px each, and 4:5 on 379 is 474px of photograph — which
   is what took #leadership on our-team to 1118px against a 950px cap.
   Nothing else in that band is large enough to cut: the head is 141px,
   the three bios 236px, and narrowing the row to shrink the portraits
   reflows the bios taller than the saving, which is the trap that put
   the band in the two-column form in the first place.

   4:3 takes the portrait to 284px and the band to 928px. It is also the
   honest frame for the sources: robert.jpg is 1024x683, a landscape
   photograph, and a 4:5 crop discards well over half of it. This band
   shipped at 4:3 before a pass "corrected" it to the default; the cap is
   why it was 4:3, and that reason is now written down rather than
   inline on three img tags. */
.bk-w.bk-scope.bk-inner .crew--frame-wide .crew__photo { aspect-ratio: 4 / 3; }

/* ---- A three-row signs grid ----
   --fold-rows tells .signs__grid--down how many rows the folded state
   keeps, and it was being set inline. It is a discrete component variant
   with one value in use, not a free number, so it is a modifier. */
.bk-w.bk-scope.bk-inner .signs__grid--rows-3 { --fold-rows: 3; }

/* ---- A question list under a picture ----
   .faqs__list caps at 90ch, which is the right reading measure for a run
   of questions standing on its own. It is the wrong one when the band
   above it ends in a photograph.

   Measured on faq.html #treatment, at 1280 in a 1201px well: the head
   column ends at 601, the question list at 972, the photograph at 1233.
   Three right edges, none of them agreeing, and the list running on
   underneath the picture past the column it belongs to. That is the
   "disbalanced" the client marked — not the picture's position, which is
   already flush right, but the fact that nothing lines up with it.

   Dropping the cap gives the band two edges instead of four: everything
   starts at the container's left and everything finishes at its right.
   The questions themselves are short — the longest on the page is 58
   characters — so the measure was never doing any work on this row; it
   was sizing a rule, not a paragraph.

   Opt-in, because a question list with no picture above it still wants
   the 90ch measure. Only the two bands that carry a media frame take it. */
.bk-w.bk-scope.bk-inner .faqs__list--wide { max-width: none; }

/* ---- The attribution list on deep water ----
   .classlist__name sets color: var(--text-primary) — deep water — on the
   flex row, and there was no inverse rule to answer it. On
   client-testimonials #testimonials that put deep water on deep water:
   rgb(34,64,94) on rgb(34,64,94), a contrast ratio of 1:1. Five client
   attributions — MG, CZ, SQ, PR, RG — were rendering in the left column
   and were literally invisible. The client read the column as empty space
   and asked for numbers to fill it; the column was never empty.

   Pale honey rather than plain cream, matching .crew__role: this is an
   attribution beside a quotation, not body copy, and the accent is what
   tells the two apart at a glance. #D9BC66 on #22405E measures 5.52:1,
   which clears AA for normal text — the master system's contrast matrix
   lists it as the approved accent on dark.

   This is the same fault already recorded against .detail__name, and for
   the same reason: a component that names a colour outright needs an
   inverse rule, because `.section--inverse h3` cannot reach past it. Any
   new component that sets `color` on a text element needs one too. */
.bk-w.bk-scope.bk-inner .section--inverse .classlist__name { color: var(--color-pale-honey); }

/* ---- A prose pair weighted to its own copy ----
   .intro__body--wide is `columns: 2` with `break-inside: avoid`, which is
   right for the case it was written for: two paragraphs of roughly equal
   length, one to a column, filling the well. It has nothing to say about
   two paragraphs of unequal length, and in equal columns it cannot — a
   445-character paragraph beside a 574-character one sets 6 lines against
   8, and the right column hangs 61px below the left. The client's word for
   it was "bouncy", on why-seek-treatment-in-thailand #environment.

   The balanced-flow answer is worse than the fault. Dropping break-inside
   lets the multicol algorithm even the depths, but with 14 lines over two
   columns the only break that balances them falls one line into the second
   paragraph, so the first column ends on an orphan and the paragraph runs
   across the gutter.

   Weight the columns instead and each paragraph keeps its own column and
   its own integrity. The tracks are the share of the copy each one carries
   — 44% and 56% here, so 0.88fr and 1.12fr — which means lines per column
   is chars/width for both, and the two come out equal. 6.56 and 6.65 lines
   before rounding: 1.4% apart, so they round to the same 7 and the pair
   finishes level. A ratio is scale-invariant, so that holds at every width
   rather than only at the one where the heights happened to match.

   Opt-in on top of --wide, not a change to it: 25 blocks across the build
   use --wide as written, and most of them are the balanced pair it is for.
   `columns: auto` because a grid container is not a block container and
   would ignore column-count anyway — stated rather than left implied, so
   nobody reads this as a block that is both. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner .intro__body--wide.intro__body--weighted {
    columns: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}


/* ---- The lead press item, locked up ----
   in-the-media #articles opens on the Thaiger piece in a .notice, and the
   client marked it as unbalanced. The cause is vertical, not horizontal.
   .notice__head is a column, so the 88px outlet mark, its own 24px bottom
   margin and the head's 16px gap pushed the headline 128px down the left
   column while the right column — standfirst, then control — started at
   zero. Headline and standfirst on different lines, the mark alone with
   nothing beside it, and the control level with the middle of the column
   opposite.

   A row instead: the mark and the headline sit on one line, which puts the
   headline's first line level with the standfirst's and brings the two
   columns' feet within 50px of each other. It is also 41px shorter than
   the stack, which this band needs — twelve press cards folded to three
   already put it near the 950px cap.

   Only from 900, which is where .notice becomes two columns at all. Below
   it the notice is a single stack and the mark belongs above the headline,
   exactly as the twelve cards below it set theirs.

   flex: none because a flex item shrinks by default, and this mark is
   sized by height with an auto width — allowed to shrink it would squeeze
   its own aspect. The bottom margin belongs to the column stack and in a
   row only adds to the item's outer height.

   Scoped twice over. in-the-media is the only page in the build carrying
   id="articles", and .notice--lead is on nothing else anywhere, so neither
   the component nor the other .notice blocks on the site can be reached by
   accident. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner #articles .notice--lead .notice__head {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .bk-w.bk-scope.bk-inner #articles .notice--lead .notice__head .award__logo {
    flex: none;
    margin-bottom: 0;
  }
}

/* ---- The podcasts frame ----
   talk-chairs-hero is a 1.78 landscape standing in a 1.08 frame, so cover
   keeps a 1092px window out of 1800. Centred that is x=354..1446, which
   cuts the right-hand chair off at the frame edge.

   62%, not the 58% the arithmetic first gave. 58% puts the window at
   411..1503 against chairs ending near x=1500 — three pixels of margin,
   and the 1500 is read off the photograph by eye, so a 1% error in that
   reading clips the chair anyway. 62% gives x=439..1531: about 30px of
   air past the chair, the left chair at 770 still well inside, and the
   white pole at roughly x=1650 still out of frame.

   A rule rather than an inline style, for the reason the whole --focus
   block at the foot of this file gives: the value belongs to the
   photograph in this frame, and the master design system bans inline
   style attributes outright. Scoped to the one band — in-the-media.html
   is the only page in the build carrying id="podcasts". */
.bk-w.bk-scope.bk-inner #podcasts .symptoms__fill .media-frame img { --focus: 62% 50%; }


/* =========================================================================
   awards-accreditations.html — the client's feedback pass
   Every selector here is anchored to an id that exists on that page and
   on no other in the build (#accreditations, #aaci, #awards,
   #registrations), so none of it can reach another page by accident.
   ========================================================================= */

/* ---- The head and the lead as one row ----
   Client item 2: "organize better, more balanced." The band opened with a
   .sec-head at the 68ch measure across the full well — 612px of heading
   with 589px of nothing beside it — and under it the lead ran as
   .intro__body--wide. That block is `columns: 2` with break-inside: avoid
   on its paragraphs, which is right for a matched pair and cannot help an
   unmatched one: at 182 characters against 97 the left column set three
   lines and the right set two, and the right half of the block finished
   31px short with empty ground below it. Weighting the two tracks would
   have levelled that and left the heading's empty half untouched.

   Putting the head and the lead side by side answers both at once. The
   prose is a single column at the measure, so there are no column depths
   left to be unequal, and it fills the half the heading was leaving
   blank — rule 3, answered with the copy that was already there rather
   than with a photograph the band does not want. Calculated at 1280:
   568px a side, 168px of head against 177px of prose, and 107px shorter
   than the stack it replaces.

   One column until 900, where a 284px track would set the heading four
   words wide. */
@media (min-width: 900px) {
  .bk-w.bk-scope.bk-inner #accreditations .aa-lede {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
    align-items: start;
  }
}

/* ---- A notice whose mark and name band across the top ----
   The same client item. .notice is a 0.95/1.05 pair, and the AACI block
   filled the left column with a logo, a heading and the certificate key
   and the right with a paragraph and two buttons. Both columns started at
   the same y and nothing in them lined up after that, because the left
   opened with an 88px mark and the right opened with a line of body copy:
   the key's first row sat 153px below the paragraph's first line.

   The mark and the name are one object, so they come out of the column
   and run as a banner across both. Under it the key and the paragraph are
   the only two things left in the row, and they start together — which is
   what the client could see was missing.

   row-gap back to 24. .notice sets `gap: var(--space-7)` as a shorthand
   for the column, and at 64px the banner floated away from the row it
   introduces. Row only; the column gap stays where the component put it. */
.bk-w.bk-scope.bk-inner #accreditations .notice--banner { row-gap: var(--space-4); }

.bk-w.bk-scope.bk-inner #accreditations .notice--banner > .notice__banner,
.bk-w.bk-scope.bk-inner #accreditations .notice--banner > .page-hero__actions { grid-column: 1 / -1; }

/* The heading sits on the mark's line rather than under it, and keeps its
   own level now that it labels the whole block instead of one column.
   The logo's 24px bottom margin is spacing for a stack it is no longer
   in. */
.bk-w.bk-scope.bk-inner #accreditations .notice__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.bk-w.bk-scope.bk-inner #accreditations .notice__banner .award__logo { margin-bottom: 0; }

/* ---- Four shared bands across the award row ----
   Client item 4: "buttons are bouncy here." Three citations of very
   different lengths, each card flowing on its own, so every card's mark,
   title, body and control began at a different height and the controls
   landed wherever the copy above them happened to stop.

   This is the fault .crew__member already solves on this site and it is
   solved the same way: the card becomes a subgrid of the row it sits in,
   four bands named explicitly, so logo, title, body and control each
   start on one line across all three. Naming four rather than taking
   subgrid on everything is what lets the middle card — whose only
   destination is the inline link in its own paragraph — leave its fourth
   band empty instead of dragging anything up into it.

   row-gap: 0, because the spacing between the bands is already carried by
   each element's own margin: 24px under .award__logo, 8px over
   .holistic__item p, 24px over the control. The card reads exactly as it
   did; it simply stops drifting. The grid's own 32px row gap is untouched
   and still separates card rows.

   From 640, which is where the grid first puts more than one card on a
   row and so the first width at which there is anything to align. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-inner #awards .awards__row > .holistic__item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* ---- Reversed artwork on a light ground ----
   Client items 5 and 6. Three marks on this page are white-on-transparent
   and both bands that carry them are now cream: healthcare-asia-2025.png
   (white line art, 1500x700), ahpra-white.png (pure white greyscale,
   300x140) and bps.svg, which carries no -white in its name and fills
   every path with #f6f7f6 — white in all but name, and found by decoding
   the file rather than by reading it.

   brightness(0) is the exact mirror of the `brightness(0) invert(1)` this
   build already uses to lift a single-colour navy mark onto deep water,
   and it is safe for the reason that treatment states: a one-colour mark
   loses nothing when it is flattened, where a two-colour one would.

   The note that used to stand over .award__logo said the Healthcare Asia
   file could not be rescued because its strokes fall under a pixel at
   card scale. Measured rather than assumed: resampled to the 189x88 a
   card gives it, 9.5% of its pixels are still above half opacity and
   20% carry some ink. The mark renders. What it could not survive was
   being white on cream, which is what this fixes. */
.bk-w.bk-scope.bk-inner #awards .award__logo--ink,
.bk-w.bk-scope.bk-inner #registrations .award__logo--ink { filter: brightness(0); }

/* The opposite case, and the only mark in the set that is not reversed
   artwork: hcpc.png is navy on an opaque white plate. On cream it needs
   no flip, only the plate taken out from behind it, or it would sit in a
   white rectangle beside two marks that have none. White multiplied by
   the ground is the ground; the navy survives. */
.bk-w.bk-scope.bk-inner #registrations .award__logo--plateless { mix-blend-mode: multiply; }


/* ---- A grid of three, the odd one centred under the pair ----
   Client item 7, on why-us-clients-choose-us #international: "put Why
   Australians choose us button in the middle." The three country
   destinations are peers in .actions--grid, which resolves to two 576px
   tracks in a full-width band, so the third landed at the left of row two
   with the whole second track empty beside it — hard under the first
   button, reading as something left over rather than as the third of a set.

   None of the three modifiers already here does it, and the combinations
   were tried before this was written:

   - .actions--centred is `justify-content: center`, which on a grid centres
     the tracks inside the box. .actions--grid is already `width:
     fit-content`, so the box is exactly the tracks and there is nothing to
     centre; the item stays in column one.
   - dropping .actions--grid for the plain centred flex row does centre the
     wrapped item, but it also undoes the fault .actions--grid exists to
     fix: each button sized to its own label, so the two-button row sits
     staggered over the one below it.
   - .actions--pair is a nowrap rule for two items and has nothing to say
     about a third.

   So the last item spans both tracks and centres itself inside them at
   exactly one track's width. The width is not optional:
   `.actions--grid .btn` is `width: 100%`, and across a 1 / -1 span that
   resolves against the whole 1176px grid area — which would make the odd
   one out the widest button in the set, twice the width of the two it is
   meant to sit under. min(36rem, 100%) is the track floor, so it matches
   them, and the 100% branch covers the single-track case where the span is
   one column wide.

   Opt-in, not `.actions--grid:has(> :nth-child(3):last-child)`: a set of
   three is not always a 2 + 1 to be centred, and a page that wants its
   third button square under the first should keep it.

   Inside the media query only. Below 1100px the grid has no
   grid-template-columns at all, runs as a single column under a 34rem cap,
   and the three buttons are already stacked square — there is nothing to
   centre and `width` would be the only thing this rule changed. */
@media (min-width: 1100px) {
  .bk-w.bk-scope.bk-inner .page-hero__actions.actions--grid.actions--odd-centred > :last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(36rem, 100%);
  }
}


/* ---- Two more components that fold ----
   A fold is only as good as what the hidden entries stop costing. Both of
   these are grids, so a hidden child is still a grid item: it keeps its
   track and the gap either side of it even when it measures nothing, and
   .classlist__row and .symptom carry a good deal more than nothing — a
   32px padding and a hairline on one, a white card with a border, a
   radius and a shadow on the other. Folded without this, the medications
   list ends on two empty ruled bands and each symptom column on a stack
   of blank cards.

   display: none rather than the padding-and-border reset .progs__grid and
   .holistic__grid use, and that is a deliberate difference. Those two keep
   their boxes because detail-more.js gives them a `--folded` class the
   stylesheet can use to close the row gaps behind them; neither of these
   components is in that list, so the gaps would survive the reset and
   leave the dead ground the reset was meant to remove. Taking the item out
   of the grid altogether takes its track and both its gaps with it. The
   cost is honest and already paid elsewhere in this file: `.taglist
   [data-fold] > li[hidden]` does exactly this, and it means find-in-page
   cannot reveal a folded entry. The anchor map detail-more.js keeps still
   can, and every word is still in the markup.

   Both selectors need the attribute, so nothing folds that has not asked
   to: the other .classlist and .symptom blocks in the build carry no
   data-fold and cannot be reached by these rules. [hidden] unqualified on
   purpose — detail-more.js writes hidden="until-found" where the browser
   supports it and a bare hidden where it does not, and this has to hold
   in both. */
.bk-w.bk-scope.bk-inner .classlist[data-fold] > .classlist__row[hidden] { display: none; }
.bk-w.bk-scope.bk-inner .symptom-group[data-fold] > .symptom[hidden] { display: none; }


/* ---- A folded comb of substance names ----
   drug-addiction #what indexes ten drugs as .treats__cell inside the
   .condition copy well. That well resolves to two columns at every width
   the grid is ever asked for — a 200px track floor against 358px at 390
   and 590px at 1440 — so ten cells is five rows, 456px of grid, and 40% of
   a band that measured 1,139px. data-fold="4" keeps two whole rows.

   The reset the hidden cell needs is display: none, for exactly the reason
   .classlist[data-fold] and .symptom-group[data-fold] above give: this
   component is not in detail-more.js's GRIDS list, so no `--folded` class
   arrives to close the row gaps, and zeroing the cell's min-height,
   padding and border would leave three flattened tracks and three 24px
   gaps standing between the last drug and the control — the dead ground
   the reset exists to remove. Out of the grid, the cell takes its track
   and its gap with it, and the two rows that remain keep the same 24px
   between them they have when the fold is open. The cost is the one
   already accepted for .taglist, .classlist and .symptom-group:
   find-in-page cannot reveal a folded cell. Every name is still in the
   markup, and the ten pages the brief lists will make these cells links,
   at which point detail-more.js's anchor map reaches them too.

   The attribute is the opt-in, so the eight other .treats__grid blocks in
   the build — none of which carries data-fold — cannot be reached by this.
   [hidden] unqualified because detail-more.js writes hidden="until-found"
   where the browser supports it and a bare hidden where it does not. */
.bk-w.bk-scope.bk-inner .treats__grid[data-fold] > .treats__cell[hidden] { display: none; }


/* ---- Two stacks of symptom cards either side of one fold ----
   alcohol-rehab #symptoms. Thirteen cards in three named groups is a
   content floor no arrangement can get under the height cap: three
   columns is the fewest rows thirteen will take, five rows of 105px card
   plus three group headings is 680px, and the section's own padding is
   another 128. The groups fold.

   The fold is the house one rather than a new mechanism — .fold plus
   data-fold on a wrapper whose children are two .symptoms__cards stacks,
   which is exactly the shape psychotherapy-approaches #approaches already
   uses for the same reason. detail-more.js keeps the first stack and puts
   the second out on hidden="until-found", so the hidden cards cost
   nothing: a <div> has no border, no padding and no shadow to leave
   behind, which is why the stack is the thing folded and not the cards.
   Nothing here needs the --folded class the four grid components get.

   What the house pattern does need and does not have is the gap between
   the two stacks. On psychotherapy-approaches the second stack is
   .symptoms__cards--abreast, which carries its own 48px top margin; the
   plain single-column form carries none, and the note above its rule says
   so outright. Without this the first stack's last card and the second
   stack's first card meet with no space at all the moment the fold opens.

   One step, not the abreast rule's two: these are rows of one list that a
   fold happens to run through, and 24px is the gap .symptoms__cards keeps
   between its own rows, so the seam is invisible rather than merely
   present.

   The second selector is the half that matters while the fold is shut.
   `.fold > [hidden] { margin-block: 0 }` already exists for this and is
   the weaker rule — it cannot reach past a 0-4-0 selector — so the margin
   would have survived the hide and left 24px of dead ground under the
   control. Restated here at a weight that wins.

   Scoped to .symptom-group .fold, which exists in this build only where
   this page puts it: the other .fold blocks hold paragraphs, list items or
   abreast grids, and the other .symptom-group blocks hold no .fold. */
.bk-w.bk-scope.bk-inner .symptom-group .fold > .symptoms__cards + .symptoms__cards {
  margin-top: var(--space-4);
}

.bk-w.bk-scope.bk-inner .symptom-group .fold > .symptoms__cards[hidden] { margin-top: 0; }


/* ---- A set of five, five across ----
   The fifth member of the stated-column-count family above
   (.treats__grid--cols-2 / 3 / 4), written for the one split that family
   had no answer for.

   Five items is the worst case for the auto-fit default. Over a 1,216px
   container .treats__grid--feature's own minmax(210px, 1fr) does pack five
   224px tracks, which is the arrangement with no tail at all — but between
   about 1,024 and 1,218px it packs four, and four lands a five-item set on
   4 + 1, the longest tail there is. Stating three instead trades that for a
   permanent 3 + 2: the third slot of the second row stands empty at every
   width, and the second row costs a full 204px card plus its 24px gap.
   On executive-burnout #approach that was the whole of the band's 73px
   overshoot of the 950px cap.

   So state five where five fits and leave --cols-3 to hold everything
   below. A grid carrying both classes takes this one above the breakpoint
   and that one under it; both selectors are 0-1-0 and this file is the
   arbiter, exactly as --cols-3 already outranks --feature's auto-fit by
   standing later in it.

   1240px, not the 900px the three- and four-column rules use, and the
   figure is the component's own floor rather than a device width: five
   tracks and four 24px gaps need 1,146px of container to keep every track
   at or above the 210px auto-fit minimum, which a 1,240px viewport gives
   with 30px to spare (1,240 - 64 margin = 1,176; (1,176 - 96) / 5 = 216).
   One step down, at 1,239px, --cols-3 has the grid and its tracks are
   375px. Nothing is ever forced narrower than the component says it can
   hold.

   Additive and opt-in: no .treats__grid in the build carries this class
   except the one that asks for it. */
@media (min-width: 1240px) {
  .bk-w.bk-scope.bk-inner .treats__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ---- A folded grid of disclosure cards ----
   anxiety-treatment #symptoms carries fifteen .symptom cards three abreast
   — five rows, and 1,097px of band against the 950px cap. data-fold="6"
   keeps two whole rows and puts the other nine behind the control, which
   is rule 1.4 and needs no new mechanism. What it does need is this.

   detail-more.js hides a folded item with hidden="until-found" wherever
   the browser supports it, and that hides with content-visibility, not
   display. A .signs__item survives that because it is bare prose under a
   hairline, so the existing rules can strip its padding and its rule and
   leave nothing behind. A .symptom cannot: it is a chip — 1px border,
   16px radius, white fill, --shadow-card — and content-visibility skips
   only the contents, so every one of the nine folded cards would go on
   painting itself as an empty white pill, with its grid row and the 24px
   gap either side of it still in the layout. Nine empty pills and 78px of
   dead ground under two rows of real ones.

   display: none takes the cell out of the grid outright, so the rows and
   their gaps go with it. This is the same answer, for the same reason,
   that .taglist[data-fold] > li[hidden] already carries a few hundred
   lines up: there is nothing here to collapse the way a ruled row
   collapses. It is also why these cards do not fade — display is discrete
   and there is no box left to interpolate — but detail-more.js animates
   the grid's own height across the change, so the rows are revealed by
   the box opening rather than appearing on top of it.

   The cost is the one the taglist already accepted and is worth naming:
   a folded card stops being reachable by find-in-page. Every word stays
   in the DOM for search engines and for anyone reading the source, and
   the six visible signs are the teaser the fold is for.

   Scoped to a folded abreast grid, which exists nowhere else in the
   build: the other #symptoms bands carry no data-fold, and the other
   data-fold grids are .signs__grid, .crew or .taglist. Additive — no
   selector above this one changes. */
.bk-w.bk-scope.bk-inner #symptoms .symptoms__cards--abreast[data-fold] > .symptom[hidden] {
  display: none;
}

/* ---- A grouped fold control ----
   Measured on our-centre #team: the control sat at x=551 while the comb
   rule and the hexagon below it were both at 633, the container's centre.
   Eighty-two pixels out, because a per-list control is injected inside
   whichever column holds its list, and that column is offset.

   A group control is a child of the band instead, so it can take the same
   centre line as the two things under it. Block, not inline, or
   margin-inline: auto has nothing to centre. */
.bk-w.bk-scope.bk-inner .detail__more--group {
  display: block;
  margin-inline: auto;
}

/* Any fold control that stands directly above the comb rule is part of
   the house close and shares its centre line, grouped or not. Measured on
   why-uk-clients-choose-us #team, whose list is a roster rather than a
   crew: the control sat at x=78 against a comb rule and a button both at
   633. :has() keeps this to the close pattern — a control with a list
   under it, or one inside a column, is untouched. */
.bk-w.bk-scope.bk-inner .container > .detail__more:has(+ .comb-rule) {
  display: block;
  margin-inline: auto;
}