/* =========================================================================
   components.css — Shared components
   The Beekeeper House

   Contact bar · Navigation · Mobile navigation · Buttons · Cards
   Accreditation row · Enquiry form · Footer
   ========================================================================= */

/* =========================================================================
   1. Site header — six top-level items maximum
   Two states. At the top of a page with a full-bleed hero it is transparent
   and floats over the photograph, legible against the hero's top scrim. Once
   the page scrolls past the hero it takes the cream ground, because deep
   water type over cream sections would otherwise be unreadable.
   Interior templates start in the solid state: add .site-header--solid.
   ========================================================================= */

/* A bar that floats clear of the window edges rather than one welded to the
   top of it. The inset is the whole difference: the page reads as something
   the header sits on rather than something it caps, and the hero photograph
   runs behind all four sides instead of three. */
.bk-w.bk-scope.bk-scope .site-header {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: 100;
  border-radius: var(--radius-lg);
  /* NOT overflow: hidden. The scrim below is a child and does need clipping
     to these corners, but clipping the header clips everything in it — and
     what is in it is nine dropdown menus that hang below the bar by design.
     With overflow hidden they were cut to a 7px white sliver poking out under
     whichever label was open, which reads as a stray underline crossing into
     the next item. The scrim inherits the radius instead, which rounds the
     one thing that needed it and leaves the panels alone. */
  background-color: transparent;
  transition: background-color var(--dur-calm) var(--ease-calm),
              box-shadow var(--dur-calm) var(--ease-calm);
}

/* The scrim belongs to the header, not to the hero, so it travels with it.
   Two reasons: the row stays legible wherever it happens to sit, and a
   template with a different opening image needs no separate tuning.

   It used to be a 160px gradient falling away below a full-width bar — the
   right answer when the header was welded to the top edge and the fade was
   what kept it from reading as a second bar. A floating bar has its own
   edges, so there is nothing to fade into: an even ink field fills the pill
   and the type sits on a surface of one weight rather than on the light end
   of a gradient. */
.bk-w.bk-scope.bk-scope .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(21, 41, 60, 0.58);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .site-header__inner {
  position: relative;
  z-index: 1;
}

/* A shadow rather than a bottom border. A border under a bar that no longer
   touches anything is a line drawn across the page for no reason; the shadow
   is what says the bar is above the content. Deep water tinted, like every
   other shadow in the system. */
.bk-w.bk-scope.bk-scope .site-header--solid {
  background-color: var(--bg-page);
  box-shadow: var(--shadow-card);
}

.bk-w.bk-scope.bk-scope .site-header--solid::before { opacity: 0; }

/* Full bleed rather than the 1280px container: the mark reads as anchored to
   the corner of the window, and the contact block to the opposite one. */
.bk-w.bk-scope.bk-scope .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding-inline: var(--grid-margin);
  padding-block: var(--space-2);
}

.bk-w.bk-scope.bk-scope .site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  text-decoration: none;
}

/* One size, in both header states. The mark used to grow over the photograph
   and shrink as the bar arrived; it now holds still and only its colour
   changes. The horizontal lockup is 3444x819 — a 4.2:1 wordmark, not the
   1.85:1 bird it replaces — so these are width-led: a wordmark has to be long
   enough to read, and the height follows the ratio. Served at 720px wide,
   nearly 4x this and never upscaled.
   No transition left on width or height, because neither moves any more. */
.bk-w.bk-scope.bk-scope .site-logo img {
  width: 190px;
  height: 45px;
  object-fit: contain;
}

/* Over the photograph the lockup is white — and that is now the only thing
   that changes between the two states. The wordmark is deep water, which all
   but disappears against the hero; the bird lockup got away with it because
   it was mostly gold.
   brightness(0) flattens the artwork to black and invert(1) lifts it to
   white, antialiasing intact: the same result as the supplied Whiteway file,
   but from one asset, so the colour and reversed marks can never drift
   apart. */
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .site-logo img {
  filter: brightness(0) invert(1);
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-scope .site-logo img {
    width: 250px;
    height: 59px;
  }
}

/* The desktop bar appears at 1360px, not at the 1024px breakpoint used
   everywhere else. Nine top-level items plus the mark and the contact block
   need 1342px before anything has to wrap or shrink; below that the
   full-screen panel carries the same nine items far more comfortably. Raise
   this back to 1024px if the navigation is ever cut to six. */
.bk-w.bk-scope.bk-scope .primary-nav { display: none; }

@media (min-width: 1360px) {
  .bk-w.bk-scope.bk-scope .primary-nav { display: block; }
}

.bk-w.bk-scope.bk-scope .primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1441px) {
  .bk-w.bk-scope.bk-scope .primary-nav__list { gap: var(--space-5); }
}

/* Nine top-level items is a lot of horizontal furniture; without this they
   wrap onto two lines and the bar doubles in height. */
.bk-w.bk-scope.bk-scope .primary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;   /* "Home" is narrower than the minimum target on its own */
  min-height: 44px;
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
}

.bk-w.bk-scope.bk-scope .primary-nav a:hover,
.bk-w.bk-scope.bk-scope .primary-nav a:focus-visible { color: var(--color-beekeeper-blue); }

/* ---- "You are here", in the bar ----
   This was a 2px inset shadow on the anchor. The anchor is 44px tall so that
   it meets the touch minimum, and its label is centred in that box — which
   put the marker eleven pixels below the text it was marking, reading as a
   stray rule rather than as an underline. It also only ever appeared on the
   sub-menu row, so the bar showed nothing at all while you were on a
   sub-page.

   Now: a 3px gold bar drawn under the label rather than under the box, on
   the section as well as on the page. current-page.js sets the section
   attribute; aria-current stays the authored source of truth for the page.
   Both together, because Library and Contact are their own section. */
.bk-w.bk-scope.bk-scope .primary-nav__list > li > a { position: relative; }

.bk-w.bk-scope.bk-scope .primary-nav__list > li > a[aria-current="page"],
.bk-w.bk-scope.bk-scope .primary-nav__list > li > a[data-nav-current-section] {
  color: var(--color-beekeeper-blue);
}

/* Two pixels, and lit from the middle: solid gold across the full width of
   the label was legible but loud — a rule under a word rather than a mark on
   it. Fading both ends out to nothing takes the hard stops off, which is
   what was making three solid pixels shout. */
.bk-w.bk-scope.bk-scope .primary-nav__list > li > a[aria-current="page"]::after,
.bk-w.bk-scope.bk-scope .primary-nav__list > li > a[data-nav-current-section]::after {
  content: "";
  position: absolute;
  right: 0;
  /* The anchor is 44px tall for the touch target and the label is centred
     in it, so this is measured from the box, not the text. At 9px the bar
     sat hard against the descenders; 4px drops it clear without letting it
     drift far enough to read as a rule under the row. */
  bottom: 4px;
  left: 0;
  height: 2px;
  background-image: linear-gradient(
    to right,
    rgba(201, 162, 39, 0) 0%,
    rgba(201, 162, 39, 0.9) 24%,
    rgba(201, 162, 39, 0.9) 76%,
    rgba(201, 162, 39, 0) 100%
  );
}

/* ---- Sub-menus ----
   The item is the positioning context and the hover target, so the panel
   hangs from the label and the pointer can travel into it without the item
   thinking it has been left. */
.bk-w.bk-scope.bk-scope .primary-nav__item { position: relative; }

.bk-w.bk-scope.bk-scope .primary-nav__item--parent {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* The panel sits clear of the bar by --space-2, which is right to look at
   and leaves an 8px strip belonging to neither the item nor the menu. The
   pointer crossing that strip on its way down fired mouseleave on the item,
   so the menu closed before anyone could reach a link inside it — the
   navigation looked like it simply did not work.

   This bridges the gap for hit-testing only; the panel still reads as a
   separate object. It has to live on the item rather than on the menu,
   because the menu scrolls and overflow clips a pseudo-element drawn
   outside its box. Present only while the item is hovered or holds focus,
   so there is no invisible strip over the hero the rest of the time —
   a pseudo-element counts as part of its originating element, so once the
   pointer is on the bridge the item is still hovered and the bridge stays. */
.bk-w.bk-scope.bk-scope .primary-nav__item--parent:hover::after,
.bk-w.bk-scope.bk-scope .primary-nav__item--parent:focus-within::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--space-2);
}

/* The disclosure. Small, because the label beside it is the thing being read
   — but it still carries the 44px target through padding rather than size,
   so it does not add height to a bar that is already tight. */
.bk-w.bk-scope.bk-scope .primary-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.bk-w.bk-scope.bk-scope .primary-nav__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* Rotated from a corner, and lifted by a quarter of its own height so the
     glyph sits on the label's optical centre rather than below it. */
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .primary-nav__toggle[aria-expanded="true"] .primary-nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}

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

/* White, as in the reference. This is the second thing on the site the
   guidelines let carry white — a panel lifted off the page is a card by
   another name. */
.bk-w.bk-scope.bk-scope .primary-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 240px;
  margin: var(--space-2) 0 0;   /* clear of the bar, so the panel reads as a panel */
  padding: var(--space-2) 0;
  background-color: var(--color-white);
  /* A definite edge, not just a shadow. A dropdown overlaps the page by
     design and this one crosses the hero headline, which is cream type on a
     photograph — white panel against cream letters with only a soft shadow
     between them is what made the two look joined. The hairline gives the
     panel a boundary to end on. */
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-media);
  list-style: none;

  /* Our Centre carries fourteen items — 761px of them, which is taller than
     a 700px window. Left uncapped its last rows fall off the bottom of the
     screen with no way to reach them. contain, so running out of menu does
     not start scrolling the page underneath it. */
  max-height: calc(100svh - var(--header-height) - var(--space-4));
  overflow-y: auto;
  overscroll-behavior: contain;

  /* ---- Opening ----
     The panel used to appear between one frame and the next, because the
     hidden state was the UA's [hidden] { display: none } and nothing here
     ever set display — a discrete swap has nothing to interpolate.

     Same mechanism as .contact-menu__panel below: declare display in both
     states and put it in the transition list with allow-discrete, so the
     panel stays rendered for the length of the close and display flips at
     the end rather than at the start. @starting-style gives the open
     direction its from-state; without it the panel would animate out but
     appear instantly on the way in.

     opacity and transform only. Both are composited, so this runs on the
     GPU at whatever the display refreshes at rather than relaying out the
     header six times a second. Deliberately not max-height: this element
     already uses max-height for the fourteen-item Our Centre panel, and
     animating height would fight that cap, its scroll container, and force
     layout on every frame.

     The drop is small — 6px and 2% — because the panel is hung directly
     under its own toggle. It reads as the panel settling out of the bar,
     which is the gesture; anything longer reads as a menu falling.

     A louder version was tried and reverted: 14px with a 6% scale, an
     overshoot curve, and the rows staggering in 20ms apart. It was more
     visible and it was worse — a navigation menu is furniture the reader
     is passing through on the way to something, and making it perform
     puts a beat between the intent and the link. The restraint is the
     point. */
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top left;
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm),
              display var(--dur-calm) allow-discrete;
}

.bk-w.bk-scope.bk-scope .primary-nav__menu[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}

@starting-style {
  .bk-w.bk-scope.bk-scope .primary-nav__menu:not([hidden]) {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

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

/* The last two sit close enough to the right edge that a 260px panel hung
   from their left would run off the window. The origin has to follow the
   pin: scaling one of these up from its top-left would walk the panel
   sideways as it settles, because the edge it is anchored by is the right. */
.bk-w.bk-scope.bk-scope .primary-nav__item--parent:nth-last-child(3) .primary-nav__menu,
.bk-w.bk-scope.bk-scope .primary-nav__item--parent:nth-last-child(2) .primary-nav__menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Deep water on white, 10.7:1. The row is the target, not the words, so the
   padding belongs to the anchor.

   The height comes from min-height rather than padding: at a full step of
   padding each row was 54px and five of them made a panel deep enough to
   reach the hero headline underneath. 44px is the touch minimum, so this is
   as tight as the row can honestly go — the panel loses a fifth of its
   height and nothing loses its target. */
.bk-w.bk-scope.bk-scope .primary-nav__menu a {
  display: flex;
  align-items: center;
  /* Ranged left. The rule for the bar above centres its labels, which is
     right for nine items sitting in a row and wrong for a stacked list —
     centred rows leave the eye no left edge to return to. This has to be
     said explicitly: the rule that sets it is `.primary-nav a`, so it
     reaches in here too. */
  justify-content: flex-start;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 400;
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.bk-w.bk-scope.bk-scope .primary-nav__menu a:hover,
.bk-w.bk-scope.bk-scope .primary-nav__menu a:focus-visible {
  background-color: var(--color-beeswax-cream);
  color: var(--color-beekeeper-blue);
}

/* The current row. It inherited the bar's marker — a gold line across the
   bottom of the row — which on a stacked list read as a divider between two
   items rather than as a mark on one of them, and at 2px of gold against
   white it barely read at all.

   A row is a horizontal thing, so its marker goes down the left edge where
   the eye returns anyway, and the row takes a ground of its own. Deeper
   cream than the hover state, so hovering the row you are already on does
   not make it look less current; held through :hover and :focus-visible for
   the same reason. */
.bk-w.bk-scope.bk-scope .primary-nav__menu a[aria-current="page"],
.bk-w.bk-scope.bk-scope .primary-nav__menu a[aria-current="page"]:hover,
.bk-w.bk-scope.bk-scope .primary-nav__menu a[aria-current="page"]:focus-visible {
  /* The ground carries it alone. This went from a 4px bar down the left edge
     to a gold underline to nothing at all, and nothing is right: in a panel
     of stacked rows the block of colour already says which row, and a mark
     on top of it was a second answer to a question that had been settled.
     Deeper cream than the hover state so hovering the row you are on cannot
     make it look less current, and the weight does the rest. */
  background-color: var(--color-cream-deep);
  color: var(--color-beekeeper-blue);   /* 6.4:1 on cream deep */
  font-weight: 700;
}

/* ---- The drugs under Drug Addiction ----
   Ten sub-pages, nested inside the Addictions panel rather than flown out
   beside it. The panel is a capped scroll container — max-height plus
   overflow-y:auto, so the fourteen-item Our Centre menu cannot run off the
   bottom of a short window — and an absolutely positioned flyout inside a
   scroll container is clipped by it. Nested also means one scroll, one tab
   order, and no second open/close state to keep in step with the first.

   The rail is what says these belong to the row above: a hairline down the
   left edge of the group, with the rows indented off it. Set in from the
   panel's own padding so the line sits under the parent label's text rather
   than under the panel edge.

   The rows are a step down in size and sit at the body weight, because a
   child that matches its parent reads as a sibling. Everything else — hover
   ground, current-row ground, the 44px target — is inherited from
   .primary-nav__menu a above, which already reaches in here. */
.bk-w.bk-scope.bk-scope .primary-nav__submenu {
  margin: 0 0 var(--space-2);
  padding: 0;
  border-left: 1px solid var(--border-hairline);
  margin-left: calc(var(--space-4) + var(--space-2));
  list-style: none;
}

.bk-w.bk-scope.bk-scope .primary-nav__submenu a {
  min-height: 36px;
  padding-block: var(--space-2);
  font-size: var(--fs-small);
}

/* The mobile drawer's copy of the same list. The drawer is a plain document
   flow with no scroll container of its own, so the rail and the indent carry
   the hierarchy on their own here.

   No type step down to go with them, unlike the desktop panel: the drawer
   only ever renders below the breakpoint where --fs-small and --fs-h5 are
   both 16px — the floor the system holds type to on a phone — so a smaller
   child size is not available to ask for. The rows inherit .mobile-nav__sub a
   and keep its 48px target. */
.bk-w.bk-scope.bk-scope .mobile-nav__subsub {
  margin: var(--space-2) 0 var(--space-2) var(--space-4);
  padding: 0;
  border-left: 1px solid var(--border-hairline);
  list-style: none;
}

/* ---- Folding the drug list ----
   nav-subtoggle.js wraps the Drug Addiction link and a chevron button in one
   row and starts the list folded. The link keeps the row's width and its own
   hover ground; the button is a square at the end with its own, so the two
   targets read as two. Same chevron as the bar's toggle, so the panel uses
   one sign for "there is more under here". */
.bk-w.bk-scope.bk-scope .nav-subrow {
  display: flex;
  align-items: stretch;
}

.bk-w.bk-scope.bk-scope .nav-subrow > a {
  flex: 1 1 auto;
  min-width: 0;
}

.bk-w.bk-scope.bk-scope .nav-subtoggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-deep-water);
  cursor: pointer;
}

.bk-w.bk-scope.bk-scope .nav-subtoggle:hover {
  background-color: var(--color-beeswax-cream);
  color: var(--color-beekeeper-blue);
}

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

.bk-w.bk-scope.bk-scope .nav-subtoggle__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .nav-subtoggle[aria-expanded="true"] .nav-subtoggle__chevron {
  transform: translateY(1px) rotate(-135deg);
}

/* The drawer's rows are 48px and its chevrons 10px; match both. */
.bk-w.bk-scope.bk-scope .mobile-nav__sub .nav-subtoggle {
  width: 48px;
  min-height: 48px;
}

.bk-w.bk-scope.bk-scope .mobile-nav__sub .nav-subtoggle__chevron {
  width: 10px;
  height: 10px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  transform: translateY(-3px) rotate(45deg);
}

.bk-w.bk-scope.bk-scope .mobile-nav__sub .nav-subtoggle[aria-expanded="true"] .nav-subtoggle__chevron {
  transform: translateY(2px) rotate(-135deg);
}

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

/* ---- Floating contact stack ----
   Phone, email and WhatsApp in the corner of the window. The three were in
   three places before — two of them in the header row, WhatsApp on its own —
   and reading as three unrelated offers rather than one way to get in touch.

   Bottom-right, and below the z-index of the header so an open navigation panel is never
   underneath it. */
.bk-w.bk-scope.bk-scope .contact-float {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 1360px) {
  .bk-w.bk-scope.bk-scope .contact-float { bottom: var(--space-4); }
}

.bk-w.bk-scope.bk-scope .contact-float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border-hairline-inverse);
  border-radius: 50%;
  background-color: var(--color-deep-water);
  color: var(--color-beeswax-cream);
  box-shadow: 0 4px 12px rgba(21, 41, 60, 0.3);
  cursor: pointer;
  transition: background-color var(--dur-calm) var(--ease-calm),
              color var(--dur-calm) var(--ease-calm),
              transform 0.2s ease, box-shadow 0.2s ease;
}

.bk-w.bk-scope.bk-scope .contact-float__btn:hover,
.bk-w.bk-scope.bk-scope .contact-float__btn:focus-visible {
  background-color: var(--color-white);
  color: var(--color-deep-water);
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(21, 41, 60, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-scope .contact-float__btn { transition: none; }
  .bk-w.bk-scope.bk-scope .contact-float__btn:hover,
  .bk-w.bk-scope.bk-scope .contact-float__btn:focus-visible { transform: none; }
}

/* ---- Regional number disclosure ----
   The panel keeps its cream ground: it opens over whatever the page happens
   to be showing behind the corner, so it cannot borrow a colour from it. */

.bk-w.bk-scope.bk-scope .contact-menu { position: relative; }

/* The panel is toggled by the hidden attribute, which resolves to
   display: none — a discrete value with no in-between, so on its own it can
   only appear and disappear in one frame.
   `display` is put in the transition list with allow-discrete, which keeps
   the element rendered for the length of the fade on the way out, and
   @starting-style gives it a state to animate from on the way in. Browsers
   without either simply show and hide it, as before.

   It opens up and to the left, from the bottom-right corner the button sits
   in — the only direction with room. The origin matches, so it reads as
   unfolding from the control rather than drifting into place. */
.bk-w.bk-scope.bk-scope .contact-menu--float .contact-menu__panel {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: 0;
  z-index: 10;
  /* Never wider than the window it opens into, on a phone held in one hand. */
  width: max-content;
  max-width: calc(100vw - var(--space-5));
  padding: var(--space-4);
  background-color: var(--color-beeswax-cream);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: bottom right;
  transition: opacity var(--dur-calm) var(--ease-calm),
              transform var(--dur-calm) var(--ease-calm),
              display var(--dur-calm) allow-discrete;
}

.bk-w.bk-scope.bk-scope .contact-menu__panel[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}

@starting-style {
  .bk-w.bk-scope.bk-scope .contact-menu--float .contact-menu__panel:not([hidden]) {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

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

/* Weight is already at 700, and Lato is loaded at 300/400/700 only — asking
   for 800 would get a synthesised, smeared face. The heading is given its
   extra presence with a step up in size and the darker ink instead. */
.bk-w.bk-scope.bk-scope .contact-menu__heading {
  margin-bottom: var(--space-3);
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.bk-w.bk-scope.bk-scope .contact-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-scope .contact-menu__list li + li { border-top: 1px solid var(--border-hairline); }

.bk-w.bk-scope.bk-scope .contact-menu__list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  text-decoration: none;
}

.bk-w.bk-scope.bk-scope .contact-menu__list a:hover { color: var(--color-beekeeper-blue); }

/* Region is spelled out, so neither colour nor the flag ever carries the
   meaning on its own. */
.bk-w.bk-scope.bk-scope .contact-menu__region {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bk-w.bk-scope.bk-scope .contact-menu__flag {
  font-size: var(--fs-h6);
  line-height: 1;
  letter-spacing: 0;
}

/* ---- Transparent state ----
   Over the hero photograph everything in the row switches to cream. It sits
   on the hero's top scrim, which is tuned to carry it at AA.

   `> li > a`, not `.primary-nav a`. The descendant form reverses every link
   in the navigation, and the sub-menu links live inside a white panel — they
   came out cream on white at 1.02:1, which is to say invisible. The child
   combinator confines this to the row itself; the panel is a light ground
   whatever state the bar is in, so its links keep the deep water they are
   given above. */

.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a,
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__toggle {
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a:hover,
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a:focus-visible,
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__toggle:hover {
  color: var(--color-pale-honey);
}

/* Over the photograph the label cannot go blue, so the gold bar carries the
   state on its own — thickened a step, because three pixels of gold that
   worked on cream is a small thing to find on a tree. */
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a[aria-current="page"],
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a[data-nav-current-section] {
  color: var(--color-white);
}

.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a[aria-current="page"]::after,
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .primary-nav__list > li > a[data-nav-current-section]::after {
  background-image: linear-gradient(
    to right,
    rgba(217, 188, 102, 0) 0%,
    rgba(217, 188, 102, 1) 24%,
    rgba(217, 188, 102, 1) 76%,
    rgba(217, 188, 102, 0) 100%
  );
}

.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) .nav-toggle {
  color: var(--color-beeswax-cream);
  border-color: rgba(250, 246, 238, 0.5);
}

/* The blue focus ring loses contrast against the photograph. */
.bk-w.bk-scope.bk-scope .site-header:not(.site-header--solid) :focus-visible {
  outline-color: var(--color-beeswax-cream);
}

/* =========================================================================
   3. Mobile navigation — full-screen panel, cream ground
   No hamburger animation gimmicks: the icon swaps, it does not morph.
   ========================================================================= */

.bk-w.bk-scope.bk-scope .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 1360px) {
  .bk-w.bk-scope.bk-scope .nav-toggle { display: none; }
}

.bk-w.bk-scope.bk-scope .nav-toggle__bars {
  display: block;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor;
}

.bk-w.bk-scope.bk-scope .mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bk-w.bk-scope.bk-scope .mobile-nav[hidden] { display: none; }

.bk-w.bk-scope.bk-scope .mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--grid-margin);
  border-bottom: 1px solid var(--border-hairline);
}

.bk-w.bk-scope.bk-scope .mobile-nav__body {
  padding: var(--space-5) var(--grid-margin) var(--space-8);
}

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

.bk-w.bk-scope.bk-scope .mobile-nav__list > li > a,
.bk-w.bk-scope.bk-scope .mobile-nav__group > summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
  color: var(--color-deep-water);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-decoration: none;
}

/* ---- Sub-menus, mobile ----
   <details>, not a scripted panel: keyboard operable, works with JavaScript
   off, and needs nothing from navigation.js — which is already busy trapping
   focus in the panel around it. The desktop bar uses a link plus a toggle
   because its label has to stay a link; here the whole row can be the
   control, because the section landing page is the first item inside. */
.bk-w.bk-scope.bk-scope .mobile-nav__group > summary {
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.bk-w.bk-scope.bk-scope .mobile-nav__group > summary::-webkit-details-marker { display: none; }

.bk-w.bk-scope.bk-scope .mobile-nav__group > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.bk-w.bk-scope.bk-scope .mobile-nav__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .mobile-nav__group[open] .mobile-nav__chevron {
  transform: translateY(2px) rotate(-135deg);
}

.bk-w.bk-scope.bk-scope .mobile-nav__sub {
  margin: 0;
  padding: var(--space-3) 0 var(--space-4);
  list-style: none;
}

/* Body face and a step down in size, so a sub-item cannot be mistaken for a
   section at a glance. Indented to the same measure the chevron sits at. */
.bk-w.bk-scope.bk-scope .mobile-nav__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: var(--space-4);
  color: var(--color-deep-water);
  font-size: var(--fs-h5);
  font-weight: 400;
  text-decoration: none;
}

.bk-w.bk-scope.bk-scope .mobile-nav__sub a:hover,
.bk-w.bk-scope.bk-scope .mobile-nav__sub a:focus-visible { color: var(--color-beekeeper-blue); }

/* ---- "You are here", mobile ----
   The panel had no current state of any kind: nine identical rows, and the
   one you were standing on looked like the other eight. Same marker as the
   desktop panel so the two read as one idea — a gold edge and a ground —
   rather than as two different conventions for the same fact. The section
   row is opened by current-page.js, so the marked sub-row is on screen with
   it. */
.bk-w.bk-scope.bk-scope .mobile-nav__list > li > a[data-nav-current-section],
.bk-w.bk-scope.bk-scope .mobile-nav__group > summary[data-nav-current-section] {
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-scope .mobile-nav__sub a[aria-current="page"] {
  background-color: var(--color-cream-deep);
  color: var(--color-beekeeper-blue);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-scope .primary-nav__chevron,
  .bk-w.bk-scope.bk-scope .mobile-nav__chevron { transition: none; }
}

.bk-w.bk-scope.bk-scope .mobile-nav__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-scope .mobile-nav__contact li + li { margin-top: var(--space-2); }

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

body.nav-open { overflow: hidden; }

/* =========================================================================
   4. Buttons
   Gold budget: one filled-gold CTA per viewport. Everything else is
   secondary (blue) or a quiet text link.
   ========================================================================= */

.bk-w.bk-scope.bk-scope .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* colour belongs here too: the hex variants change their label colour on
     hover, and without it the text flipped in one frame under a plate that
     was fading in over 320ms. */
  transition: background-color var(--dur-calm) var(--ease-calm),
              border-color var(--dur-calm) var(--ease-calm),
              color var(--dur-calm) var(--ease-calm);
}

/* Primary — gold fill. Label MUST be ink (6.11:1). Deep water on gold
   measures 4.23:1 and fails AA for normal text. Do not substitute. */
.bk-w.bk-scope.bk-scope .btn--primary {
  background-color: var(--cta-bg);
  color: var(--cta-text);
}

/* Hover inverts rather than tinting: the gold fill gives way to deep water
   with pale honey type (5.52:1). Applied to every primary button so the
   gesture is the same wherever one appears. */
.bk-w.bk-scope.bk-scope .btn--primary:hover {
  background-color: var(--color-deep-water);
  color: var(--color-pale-honey);
}

.bk-w.bk-scope.bk-scope .btn--secondary {
  background-color: var(--color-beekeeper-blue);
  color: var(--color-white);
}

.bk-w.bk-scope.bk-scope .btn--secondary:hover { background-color: var(--color-deep-water); }

.bk-w.bk-scope.bk-scope .btn--quiet {
  background-color: transparent;
  border-color: var(--color-beekeeper-blue);
  color: var(--color-beekeeper-blue);

  /* Narrower sides than .btn's 32px. That figure is drawn for the hexagon,
     whose angled ends eat horizontal space and need the label held clear of
     the points — the rule below says so itself. A rectangle has no points,
     so it was carrying 16px of padding it never needed.

     It is worth real width on the longest labels. "More about our medical
     detox programme" measured 523px against a 514px column at 1200 — it
     wrapped to two ragged lines for the sake of nine pixels. At 24px it
     comes in at 507 and stays on one line. */
  padding-inline: var(--space-4);
}

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

.bk-w.bk-scope.bk-scope .section--inverse .btn--quiet {
  border-color: var(--color-morning-blue);
  color: var(--color-beeswax-cream);
}

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

.bk-w.bk-scope.bk-scope .btn--block { width: 100%; }

/* ---- Arrow affordance ----
   The trailing arrow the hexagon buttons carried, kept for the rectangular
   ones so a link out of a section still reads as forward motion.
   Caps and letterspacing come with it: the hexagon buttons set their labels
   that way, and dropping it here would leave one button on the page in
   sentence case while the hero's two are in caps. */
.bk-w.bk-scope.bk-scope .btn--arrow {
  font-size: var(--fs-h6);
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* The copy briefs label these with six-word destinations — "More about our
     medical detox programme" — where this component was drawn for a two- or
     three-word action (see the library-row note in interior.css). Below about
     1200px the copy column is narrower than the label, so the button shrinks
     to the column and the label wraps. .btn centres it, which leaves a
     two-line label centred under an arrow stranded at the right margin, and
     that reads as a mistake rather than a control.

     Range the label left instead. This is the treatment already written down
     for the library rows: the arrow held out at the right margin reads as a
     destination rather than a control.

     Two things were wrong, and fixing one at a time was not enough.

     First, .btn is inline-flex and the arrow is an ::after, so the arrow was
     its own flex item: with the label on two lines it sat out at the far
     right margin with a hand's width of empty button between it and the last
     word, reading as a stray glyph rather than part of the control.
     inline-block puts it back in the text flow, so it follows the last word
     exactly as it does when the label fits on one line.

     Second, a wrapped label breaks where the line happens to run out, which
     left a full first line over a short second one and a quarter of the
     button empty at the bottom right. text-wrap: balance evens the two lines,
     and with the label centred the result is symmetric: equal margins either
     side, two lines of a similar length, the arrow on the end of the text.
     Where the label fits on one line none of this does anything — the box is
     its own content width and there is nothing to balance or centre.

     Vertical centring is unaffected: it comes from min-height and the block
     padding, not from align-items, and a short button measures the same 56px
     either way. The arrow keeps its own margin-left from the ::after rule
     below, which is what the flex gap was providing. */
  display: inline-block;
  text-wrap: balance;
}

.bk-w.bk-scope.bk-scope .btn--arrow::after {
  content: "\2192";
  margin-left: var(--space-2);
  font-size: var(--fs-button);
  line-height: 1;
  transition: transform var(--dur-calm) var(--ease-calm);
}

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

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

/* ---- Elongated hexagon ----
   The shape is an SVG polygon behind the label, so the same markup gives a
   filled button and a true outline one. The angled ends eat horizontal
   space, so the padding is wider than a rectangular button would need in
   order to keep the text clear of the points. */
.bk-w.bk-scope.bk-scope .btn--hex {
  position: relative;
  padding-inline: var(--space-5);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-h6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The wide padding is what gives the shape its room to breathe, but on a
   narrow screen it pushes both buttons to the full container width, which
   makes the gold plate far larger than the gold budget allows. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-scope .btn--hex { padding-inline: var(--space-7); }
}

.bk-w.bk-scope.bk-scope .btn__hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* A literal 5% of a 1px hairline is 1.05px, which no screen can draw.
     1.5px is the next step that actually renders as a heavier line. */
  stroke-width: 1.5;
  transition: fill var(--dur-slow) var(--ease-calm),
              stroke var(--dur-slow) var(--ease-calm),
              stroke-width var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.bk-w.bk-scope.bk-scope .btn__label::after {
  content: "\2192";
  font-size: var(--fs-button);
  line-height: 1;
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .btn--hex:hover .btn__label::after { transform: translateX(4px); }

/* Both are outline only, so the photograph runs through them uninterrupted.
   The gold edge is the single thing separating the primary from the
   secondary — it is also the only gold in this viewport, which keeps the
   opening well inside the gold budget. */
.bk-w.bk-scope.bk-scope .btn--hex-primary { color: var(--color-beeswax-cream); }

/* rgba(...,0), not `none`. `none` is a keyword, so the browser has nothing
   to interpolate towards and the cream plate appears in one frame while the
   stroke and the label take 320ms — which is what made the hover read as a
   snap rather than a fade. A fully transparent cream is the same thing to
   look at and animates properly.

   No plate, and that is settled. Two fills were tried here — a 0.38 wash
   and a 0.82 near-solid — and both were wrong in the same way: the button
   stopped being a line drawn on the photograph and became an object laid
   over it. Outline only, so the frame runs through the shape unbroken.

   The zero is written as rgba and not `none` because `none` is a keyword
   with nothing to interpolate towards, so the cream hover plate would land
   in a single frame while the stroke and the label take 320ms. A fully
   transparent cream looks identical and animates properly. */
.bk-w.bk-scope.bk-scope .btn--hex-primary .btn__hex {
  fill: rgba(250, 246, 238, 0);
  stroke: var(--color-honey-gold);
}

.bk-w.bk-scope.bk-scope .btn--hex-outline { color: var(--color-beeswax-cream); }

.bk-w.bk-scope.bk-scope .btn--hex-outline .btn__hex {
  fill: rgba(250, 246, 238, 0);
  stroke: rgba(250, 246, 238, 0.72);
}

/* The same hexagon on a cream ground, where cream-on-cream would disappear. */
.bk-w.bk-scope.bk-scope .btn--hex-ink { color: var(--color-deep-water); }

.bk-w.bk-scope.bk-scope .btn--hex-ink .btn__hex {
  fill: rgba(34, 64, 94, 0);
  stroke: var(--color-deep-water);
}

.bk-w.bk-scope.bk-scope .btn--hex-ink:hover,
.bk-w.bk-scope.bk-scope .btn--hex-ink:focus-visible { color: var(--color-beeswax-cream); }

.bk-w.bk-scope.bk-scope .btn--hex-ink:hover .btn__hex,
.bk-w.bk-scope.bk-scope .btn--hex-ink:focus-visible .btn__hex {
  fill: var(--color-deep-water);
  stroke: var(--color-deep-water);
}

/* The two on-photo variants resolve to the same cream plate. Written per
   variant rather than on .btn--hex, so that adding a variant with a
   different resolved state cannot be silently overridden by source order. */
.bk-w.bk-scope.bk-scope .btn--hex-primary:hover,
.bk-w.bk-scope.bk-scope .btn--hex-outline:hover,
.bk-w.bk-scope.bk-scope .btn--hex-primary:focus-visible,
.bk-w.bk-scope.bk-scope .btn--hex-outline:focus-visible { color: var(--color-deep-water); }

.bk-w.bk-scope.bk-scope .btn--hex-primary:hover .btn__hex,
.bk-w.bk-scope.bk-scope .btn--hex-outline:hover .btn__hex {
  fill: var(--color-beeswax-cream);
  stroke: var(--color-beeswax-cream);
}

/* A rectangular ring around a hexagon looks like a mistake, so focus fills
   the plate and thickens the stroke rather than drawing an outline. */
.bk-w.bk-scope.bk-scope .btn--hex:focus-visible { outline: none; }

.bk-w.bk-scope.bk-scope .btn--hex-primary:focus-visible .btn__hex,
.bk-w.bk-scope.bk-scope .btn--hex-outline:focus-visible .btn__hex {
  fill: var(--color-beeswax-cream);
  stroke: var(--color-deep-water);
  stroke-width: 3;
}

.bk-w.bk-scope.bk-scope .btn--hex-ink:focus-visible .btn__hex { stroke-width: 3; }

/* Ruled text link — the quietest call to action in the system. Used where a
   button would be too much furniture, as at the foot of an index. */
.bk-w.bk-scope.bk-scope .link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-deep-water);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}

.bk-w.bk-scope.bk-scope .link-underline:hover { text-decoration-thickness: 2px; }

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

/* Quiet directional text link, used instead of a button inside cards. */
.bk-w.bk-scope.bk-scope .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-beekeeper-blue);
  font-size: var(--fs-h6);
  font-weight: 700;
  text-decoration: none;
}

.bk-w.bk-scope.bk-scope .link-arrow::after {
  content: "\2192";
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .link-arrow:hover { text-decoration: underline; }
.bk-w.bk-scope.bk-scope .link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================================
   5. Cards
   ========================================================================= */

.bk-w.bk-scope.bk-scope .card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-beeswax-cream);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.bk-w.bk-scope.bk-scope .section--alt .card { background-color: var(--color-beeswax-cream); }

.bk-w.bk-scope.bk-scope .card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--bg-alt);
}

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

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

.bk-w.bk-scope.bk-scope .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-5);
}

.bk-w.bk-scope.bk-scope .card__body h3,
.bk-w.bk-scope.bk-scope .card__body h4 { margin: 0; }

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

.bk-w.bk-scope.bk-scope .card__body .link-arrow { margin-top: auto; }

/* Condition card — icon-free variant used for the conditions list */
.bk-w.bk-scope.bk-scope .tile {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-beeswax-cream);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  color: var(--color-deep-water);
  font-size: var(--fs-h5);
  font-weight: 700;
  text-decoration: none;
}

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

/* =========================================================================
   5b. Bee flourish — section watermark
   ========================================================================= */

/* The two-bee supporting graphic, bled across a whole section as a
   watermark. The numbers are the live site's own, lifted verbatim from the
   Elementor overlay it uses there: 95% 50%, a third of the section width,
   18% opacity. At that weight a paragraph can cross it without a fight.
   Two things the host section owes this element: position: relative, so
   inset: 0 resolves against the section rather than the page, and a
   stacking position on whatever content sits over it — this is a
   positioned element, so unpositioned siblings would otherwise paint
   underneath it. */
.bk-w.bk-scope.bk-scope .bee-flourish {
  position: absolute;
  inset: 0;
  background-image: url("../images/graphics/bee-flourish.png");
  background-repeat: no-repeat;
  background-position: 95% 50%;
  background-size: 34% auto;
  opacity: 0.18;
  pointer-events: none;
}

/* The other supporting graphic in the set: the tall pair on the spiral,
   hung on the left. Its own file, because the two sections want different
   artwork on different sides and one image with a flipped position cannot
   be both.

   18% of the container, not the 34% above. This one is portrait — 481x972
   against the flourish's 773x550 — so the same width would have made it
   roughly twice as tall as the section it sits in. At 18% of a 1265px
   container it lands about 228 wide and 460 tall.

   `left 5%` is the exact mirror of the default's `95%`, written the long way
   because the four-value syntax needs a keyword on both axes. */
.bk-w.bk-scope.bk-scope .bee-flourish--tall {
  background-image: url("../images/graphics/bee-element.png");
  background-position: left 5% top 50%;
  background-size: 18% auto;
}

/* Mirrored. The flip is about the element's own centre and the element is
   the full width of the section, so this does two jobs at once: the bees
   turn to face the other way, and 95% from the left becomes 95% from the
   right. No second background-position needed. */
.bk-w.bk-scope.bk-scope .bee-flourish--mirrored { transform: scaleX(-1); }

/* =========================================================================
   6. Accreditation row — organised, evenly sized marks
   ========================================================================= */

/* A single running line on a gold ground, full bleed. This was a ten-cell
   grid two rows deep; it is one band now, which is the whole point — the
   marks are a credential, not a gallery, and they say what they say in a
   line. Padding is deliberately mean for the same reason. */
.bk-w.bk-scope.bk-scope .marks-band {
  position: relative;
  padding-block: var(--space-3);
  background-color: var(--color-honey-gold);
  overflow: hidden;
}

/* The clip. The track is wider than the window by design, and this is what
   keeps that from becoming a horizontal scrollbar on the page. */
.bk-w.bk-scope.bk-scope .marks-band__viewport { overflow: hidden; }

/* Two identical rows side by side. The animation moves the pair exactly one
   row's width — 50% of the track — so the moment it resets, row two is
   standing precisely where row one began. There is no seam because there is
   nothing between them to see. */
.bk-w.bk-scope.bk-scope .marks-band__track {
  display: flex;
  width: max-content;
  animation: marks-drift 48s linear infinite;
}

@keyframes marks-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Held still while the pointer is over it, so a mark can be looked at, and
   while anything inside has focus. */
.bk-w.bk-scope.bk-scope .marks-band:hover .marks-band__track,
.bk-w.bk-scope.bk-scope .marks-band:focus-within .marks-band__track,
.bk-w.bk-scope.bk-scope .marks-band[data-paused="true"] .marks-band__track {
  animation-play-state: paused;
}

.bk-w.bk-scope.bk-scope .marks-band__row {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  /* The gap sits between items, not after the last one, so without this the
     two rows meet closer than the marks within a row do and the join shows
     as a tightening. */
  padding-inline: 0 var(--space-7);
  margin: 0;
  list-style: none;
}

/* A fixed box per mark rather than a fixed image size. The set runs from a
   square seal to a 7:1 wordmark, and sizing them by width would put the
   seals at four times the height of everything else. Contained in a common
   box, they share a baseline and an optical weight instead. */
.bk-w.bk-scope.bk-scope .marks__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 56px;
}

@media (min-width: 1024px) { .bk-w.bk-scope.bk-scope .marks__item { width: 168px; height: 64px; } }

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

/* Round seals carry more ink than a wordmark at the same height, so they are
   trimmed slightly — but only slightly. At 76% they measured even and looked
   like an afterthought beside a 200px wordmark; the disc has to stay close to
   the row's height to hold its place in it. */
.bk-w.bk-scope.bk-scope .marks__item--seal img { max-height: 92%; }

/* The band runs reversed artwork throughout, so nine of the ten marks are
   white files served as-is. HCPC is the exception: it exists only as a
   single-colour navy raster. brightness(0) crushes it to black and invert(1)
   lifts that to white — safe here precisely because the mark is one flat
   colour, so nothing is lost the way it would be on a two-colour logo. Drop
   this class the day reversed HCPC artwork turns up. */
.bk-w.bk-scope.bk-scope .marks__item--invert img { filter: brightness(0) invert(1); }

/* The pause control. Ink on gold measures 6.11:1 — the same pairing the gold
   buttons use, and the reason deep water is not used here.
   It carries the band's own gold as a fill rather than sitting transparent
   over it: the logos pass underneath, and a control with nothing behind it
   reads as one more mark in the row until a logo slides through it. */
.bk-w.bk-scope.bk-scope .marks-band__pause {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-honey-gold);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--color-honey-gold);
  color: var(--color-ink);
  cursor: pointer;
}

.bk-w.bk-scope.bk-scope .marks-band__pause:hover { background-color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-scope .marks-band__pause:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -2px;
}

/* Two bars for pause, one triangle for play — drawn in CSS, like the arc's
   control and the accordion's plus before it. */
.bk-w.bk-scope.bk-scope .marks-band__pause-icon {
  width: 10px;
  height: 12px;
  background-color: currentColor;
  clip-path: polygon(0 0, 4px 0, 4px 12px, 0 12px,
                     0 0, 6px 0, 10px 0, 10px 12px, 6px 12px, 6px 0);
}

.bk-w.bk-scope.bk-scope .marks-band__pause[data-paused="true"] .marks-band__pause-icon {
  clip-path: polygon(0 0, 10px 50%, 0 100%);
}

/* Reduced motion stops it outright and hands the row to the scrollbar, which
   is a mechanism the reader already knows. The duplicate row would be a
   second copy to scroll past, so it goes. */
@media (prefers-reduced-motion: reduce) {
  .bk-w.bk-scope.bk-scope .marks-band__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .bk-w.bk-scope.bk-scope .marks-band__track { animation: none; }
  .bk-w.bk-scope.bk-scope .marks-band__row[aria-hidden="true"] { display: none; }
  .bk-w.bk-scope.bk-scope .marks-band__pause { display: none; }
}

/* =========================================================================
   7. Enquiry form
   ========================================================================= */

.bk-w.bk-scope.bk-scope .form { max-width: 640px; }

.bk-w.bk-scope.bk-scope .form__grid {
  display: grid;
  grid-template-columns: 1fr;   /* single column on mobile, no exceptions */
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .bk-w.bk-scope.bk-scope .form__grid { grid-template-columns: repeat(2, 1fr); }
  .bk-w.bk-scope.bk-scope .form__field--full { grid-column: 1 / -1; }
}

.bk-w.bk-scope.bk-scope .form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Persistent label. Placeholder text is never the only label. */
.bk-w.bk-scope.bk-scope .form__label {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-deep-water);
}

.bk-w.bk-scope.bk-scope .form__optional {
  font-weight: 400;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-scope .form__control {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-morning-blue);
  border-radius: var(--radius-md);
  color: var(--color-deep-water);
  font-size: var(--fs-body);
  line-height: var(--leading-tight);
}

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

.bk-w.bk-scope.bk-scope textarea.form__control {
  min-height: 128px;
  line-height: var(--leading-body);
  resize: vertical;
}

.bk-w.bk-scope.bk-scope select.form__control {
  appearance: none;
  padding-right: var(--space-6);
  /* Chevron drawn with a gradient pair so no external asset is invented. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-beekeeper-blue) 50%),
    linear-gradient(135deg, var(--color-beekeeper-blue) 50%, transparent 50%);
  background-position:
    right var(--space-4) center,
    calc(100% - var(--space-4) + 6px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Errors are calm: beekeeper blue, an icon glyph, plain-language text.
   No harsh red anywhere in the flow. */
.bk-w.bk-scope.bk-scope .form__control[aria-invalid="true"] {
  border-color: var(--color-beekeeper-blue);
  border-width: 2px;
  background-color: var(--color-cream-deep);
}

/* The examples. Set well back — half the strength the label above carries —
   so the field still reads as empty at a glance.
   Worth recording: at this weight the example is around 2.5:1 against the
   white field, under the 4.5:1 the guidelines set for text. It is carried
   deliberately, on the basis that the example is a hint and never the field's
   only name: every control keeps its own persistent <label>, which is the
   rule the design system actually states about placeholders. Raise the
   opacity if that trade stops being worth it. */
.bk-w.bk-scope.bk-scope .form__control::placeholder {
  color: var(--color-beekeeper-blue);
  opacity: 0.5;
}

/* ---- The per-field correction ----
   Hidden from the page at the client's request, and NOT deleted. The element
   still carries the message, still resolves the field's aria-describedby, and
   is still announced — so a screen reader is told which field is wrong and
   what to do about it, which is what WCAG 2.1 AA asks for (3.3.1 Error
   Identification, 3.3.3 Error Suggestion).

   What is genuinely lost is the sighted case: someone who submits with a
   field wrong now gets the summary line above the button and the focus jump
   to the first bad field, but no text under the field itself. That is a real
   reduction and it is a decision, not an oversight. Deleting the element
   outright would have cost the screen-reader case as well, for nothing extra.

   Same declarations as .visually-hidden in global.css. */
.bk-w.bk-scope.bk-scope .form__note,
.bk-w.bk-scope.bk-scope .form__note.is-visible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bk-w.bk-scope.bk-scope .form__privacy {
  max-width: var(--measure);   /* resolves against this element's own 14/16px */
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: var(--color-cream-deep);
  border-left: 2px solid var(--color-honey-gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: var(--leading-body);
}

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

/* Full width where the thumb needs it; sized to its label on larger screens,
   which keeps the gold fill well inside its budget. */
@media (min-width: 640px) {
  .bk-w.bk-scope.bk-scope .form__actions .btn--block {
    width: auto;
    min-width: 240px;
  }
}

.bk-w.bk-scope.bk-scope .form__status {
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-scope .form__status:empty { margin-top: 0; }

/* Honeypot — invisible to people, present for bots. Real spam protection is
   reCAPTCHA v3 or equivalent, wired server-side; never a puzzle challenge. */
.bk-w.bk-scope.bk-scope .form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   8. Footer — four link columns, regional numbers, address, marks
   ========================================================================= */

/* Still tighter at the top than the page's sections are — a footer is the end
   of the document, not another band of it, and --space-6/7 opened it with as
   much air as Programmes gets. But one step up from where this started at
   each end: the columns were meeting the navy almost immediately at the top,
   and 8px under the copyright line left it sitting on the bottom edge of the
   window rather than inside the band. */
.bk-w.bk-scope.bk-scope .site-footer {
  padding-block: var(--space-5) var(--space-4);
  background-color: var(--color-deep-water);
  color: var(--color-beeswax-cream);
}

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

.bk-w.bk-scope.bk-scope .site-footer a {
  color: var(--color-beeswax-cream);
  text-decoration: none;
}

.bk-w.bk-scope.bk-scope .site-footer a:hover { text-decoration: underline; }

.bk-w.bk-scope.bk-scope .footer__top {
  display: grid;
  grid-template-columns: 1fr;
  /* Row gap larger than column gap: stacked on a phone these five blocks
     need telling apart, side by side on a desktop they do not. */
  gap: var(--space-5) var(--space-4);
}

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

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-scope .footer__top { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

/* Reversed, for the same reason as the floating header: the footer is a
   deep-water ground and the wordmark is deep water. */
.bk-w.bk-scope.bk-scope .footer__brand img {
  width: 280px;
  max-width: 100%;
  height: 67px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.bk-w.bk-scope.bk-scope .footer__brand p {
  margin-top: var(--space-4);
  max-width: 40ch;
  font-size: var(--fs-small);
  color: var(--color-beeswax-cream);
}

.bk-w.bk-scope.bk-scope .footer__col h2,
.bk-w.bk-scope.bk-scope .footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pale-honey);
}

.bk-w.bk-scope.bk-scope .footer__col ul {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-scope .footer__col li + li { margin-top: var(--space-2); }

.bk-w.bk-scope.bk-scope .footer__col a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--fs-small);
}

.bk-w.bk-scope.bk-scope .footer__contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.bk-w.bk-scope.bk-scope .footer__region {
  min-width: 40px;
  color: var(--color-pale-honey);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bk-w.bk-scope.bk-scope .footer__address {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-style: normal;
  line-height: var(--leading-body);
}

/* Centred, and spaced rather than bunched. Left-ranged against a full-width
   rule the five marks sat in the first third of the footer with two thirds of
   empty navy beside them, which read as a row that had failed to fill rather
   than as a set. Centring them makes the rule above and the line below share
   one axis with them. */
/* `ul.footer__marks`, not `.footer__marks`. A list reset out-specifies the
   bare class, so padding written against the bare class computes to 0.

   The marks sit between two hairlines and the space above and below them is
   kept equal, so they read as centred in their own band rather than pinned to
   one of the rules. That pairing is what to preserve if these numbers change:
   this element's padding-block and .footer__bottom's padding-top are one
   decision written in two places. */
.bk-w.bk-scope.bk-scope ul.footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
  padding-block: var(--space-3);
  padding-inline: 0;
  border-top: 1px solid var(--border-hairline-inverse);
  list-style: none;
}

/* 72, up from the 40 these started at. They are the marks the whole page's
   argument rests on and they were the smallest thing in the footer — smaller
   than the body text beside them. */
.bk-w.bk-scope.bk-scope ul.footer__marks img {
  height: 72px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 639px) {
  .bk-w.bk-scope.bk-scope ul.footer__marks img { height: 52px; }
}

.bk-w.bk-scope.bk-scope .footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  /* Matches the marks row's padding-block above — see the note there. */
  padding-top: var(--space-3);
  /* Room for the floating contact stack, which is fixed to this corner and
     lands on top of this row once the page is scrolled to the end. The legal
     links sit at the right of this row, so without the reserve the last one
     is underneath a button. 56 is the stack's width, --space-4 the gap. */
  padding-right: calc(56px + var(--space-4));
  border-top: 1px solid var(--border-hairline-inverse);
  font-size: var(--fs-caption);
}

.bk-w.bk-scope.bk-scope .footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-scope .footer__legal a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}