/* Bpharma — the parts of the site that the kit does not have.
 *
 * The whole look comes from the Bpharma Web design system: first /assets/ds/tokens.css,
 * then /assets/ds/bundle.css, and this file last. It only holds what the kit does not
 * provide (skip link, test environment bar, cookie notice, pagination, province map, and
 * since the design phase 1 the division switch, the group strip, the compact card grid, the
 * chip grid and a few phone and footer rules; docs/design-system-proposals.md lists them for the
 * design system team) and the kit's rules apply:
 *   - colour, spacing, corners and lines only through kit tokens (var(--…)); no hex and no px
 *   - no media query on the screen width; layout through container queries (the kit's thresholds)
 *   - the kit's tokens and focus ring are not redefined here
 * A missing part is reported to the design system team, to be added to the kit (CLAUDE.md).
 */

/* ---------- Accessibility ---------- */

.visually-hidden {
  position: absolute !important;
  inline-size: var(--border-hairline);
  block-size: var(--border-hairline);
  margin: calc(-1 * var(--border-hairline));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: 30;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 var(--guide-radius-control) 0 0;
  background-color: var(--surface-raised);
  color: var(--ink);
  font-weight: var(--guide-weight-medium);
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ---------- Test environment bar (BP_ENV=staging only) ---------- */

.staging-bar {
  margin: 0;
  padding: var(--space-2) var(--gutter);
  background-color: var(--danger);
  color: var(--on-action);
  text-align: center;
}

/* ---------- Layout helpers ---------- */

/* Space between blocks that follow each other inside a section (the kit example does this with an inline style). */
.flow-gap { margin-block-start: var(--space-8); }
.flow-gap-sm { margin-block-start: var(--space-4); }
p.flow-gap { margin-block-end: 0; }

/* Blocks stacked vertically: the cards beside a photo and text columns (the kit's grid lays items out side by side) */
.stack { display: grid; gap: var(--space-5); }
.stack > * { margin: 0; }

/* A short paragraph with a label (kit Subhead + text): the gap between the two lines */
.subhead-pair { display: grid; gap: var(--space-2); align-content: start; }
.subhead-pair > * { margin: 0; }

/* The kit's split centres its two columns vertically; text columns without a photo align to the top. */
.split-start > .bp-grid__items { align-items: start; }

/* In a split section without a photo the heading is in a column of its own: the space below it must not double up with the grid gap */
.split-start .bp-section-header { margin-block-end: 0; }

/* A long button label ("Contact Our Regulatory Team") overflowed the margin at 375 pixels and the screen at 360: the
   kit forces the button onto one line. When it does not fit the label splits into two lines; when it fits nothing changes. */
.bp-actions > .bp-btn { white-space: normal; }

/* Chips, tags and section links in a row */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; }
.chips--tight { gap: var(--space-2); }
/* The country chips as a grid of two columns (design phase 1, N5): chips of equal width in tidy rows; a long label wraps inside its chip */
.chips--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.chips--grid > .bp-pill { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
@container (max-width: 29.99rem) {
  .chips--grid > .bp-pill { padding-inline: var(--space-3); font-size: 1rem; }
}

/* Long text column: legal pages and posts */
.prose { max-inline-size: 46rem; }
.prose > * + * { margin-block-start: var(--space-4); }
.prose > h2 + * { margin-block-start: var(--space-2); }
.prose > * + h2 { margin-block-start: var(--space-8); }

/* Contact: the form card sits beside the text, aligned to the top (the kit's split centres) */
.contact-layout > .bp-grid__items { align-items: start; }

/* Feasibility details: the browser frame of the fieldset is removed */
.form-fieldset {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-block-start: var(--border-hairline) solid var(--line);
}
.form-fieldset > legend { padding: 0; float: left; inline-size: 100%; margin-block-end: var(--space-1); }
.form-fieldset > legend + * { clear: both; }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pager > p { margin: 0; }

/* ---------- Cookie notice (only when Analytics is on) ---------- */

.cookie-notice {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;
  padding-block: var(--space-4);
  border-block-start: var(--border-hairline) solid var(--line);
  box-shadow: var(--shadow-overlay);
}
.cookie-notice__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cookie-notice__in > p { flex: 1 1 24rem; margin: 0; color: var(--ink-muted); }
.cookie-notice a { color: var(--ink); }

/* ---------- Map of Türkiye by province ---------- */

.coverage__totals,
.coverage__counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.coverage__totals { margin-block-end: var(--space-8); }
.coverage__totals > div,
.coverage__counts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-strong) solid var(--bar-teal);
}
.coverage__totals dd,
.coverage__counts dd { margin: 0; }

.coverage__grid { display: grid; gap: var(--space-5); align-items: start; }
@container (min-width: 48rem) {
  .coverage__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}

.coverage__map {
  position: relative;
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--line);
  border-radius: 0 var(--guide-radius-surface) 0 0;
  background-color: var(--surface-raised);
}
.coverage__map svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

.province { fill: var(--line); stroke: var(--surface-raised); stroke-width: 1.1; stroke-linejoin: round; }
.province--data { cursor: pointer; transition: fill .15s ease; }
.province--d1 { fill: var(--brand-teal-light); }
.province--d2 { fill: var(--brand-teal); }
.province--d3 { fill: var(--brand-teal-deep); }
.province--data:hover, .province--data.is-on { fill: var(--brand-violet); }
/* On an SVG path the kit's box-shadow ring does not show; focus is shown with a line.
   With JavaScript on, the border of the selected province is drawn by the .province-highlight layer on top. */
.province--data:focus-visible { stroke: var(--focus); stroke-width: 2.4; }
.province-highlight { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }

/* ---------- World map of the regional reach (N17, /cro/regional-reach) ----------
   One path per country (public/assets/world.svg); the countries chosen in the panel are drawn in violet on top of the rest. The pointer
   on one of them opens a small pop-up with its name (site.js fills [data-world-tip] from the data-name of the path; the pop-up is
   aria-hidden: the names are in the description of the figure). The widths of the strokes are map units, not pixels: the map is 1000
   units wide and scales with its card. A chosen country has a transparent stroke so that a small one (Bulgaria, Georgia) is easy to
   hit with the pointer: the stroke counts for the pointer although it paints nothing. */
.world-map {
  position: relative;
  margin: 0;
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--line);
  border-radius: 0 var(--guide-radius-surface) 0 0;
  background-color: var(--surface-raised);
}
.world-map__svg { display: block; inline-size: 100%; block-size: auto; }
.world-map .country { fill: var(--line); stroke: var(--surface-raised); stroke-width: 0.5; stroke-linejoin: round; }
.world-map .country--on { fill: var(--brand-violet); stroke: transparent; stroke-width: 6; transition: fill .15s ease; }
.world-map .country--on:hover, .world-map .country--on.is-on { fill: var(--guide-violet-hover); }
.world-map__tip {
  position: absolute;
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  border-radius: 0 var(--guide-radius-control) 0 0;
  box-shadow: var(--shadow-overlay);
  font-weight: var(--guide-weight-medium);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--space-2)));
}
.world-map__tip::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 100%;
  margin-inline-start: calc(var(--space-2) * -1);
  border: var(--space-2) solid transparent;
  border-block-start-color: var(--surface);
}
.world-map__tip.is-below { transform: translate(-50%, var(--space-2)); }
.world-map__tip.is-below::after { inset-block-start: auto; inset-block-end: 100%; border-block-start-color: transparent; border-block-end-color: var(--surface); }
.world-map__tip[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .world-map__tip { animation: world-tip-in .12s ease-out; }
}
@keyframes world-tip-in { from { opacity: 0; } to { opacity: 1; } }
.world-map__legend { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); }
.world-map__key {
  flex: none;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border-radius: 0;
  background-color: var(--brand-violet);
}

.coverage__tip {
  position: absolute;
  z-index: 2;
  min-inline-size: 13rem;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--guide-radius-control) 0 0;
  box-shadow: var(--shadow-overlay);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--space-3)));
}
.coverage__tip.is-below { transform: translate(-50%, var(--space-3)); }
.coverage__tip[hidden] { display: none; }
.tip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-2); }
.tip__name { font-weight: var(--guide-weight-medium); white-space: nowrap; }
.tip__level { color: var(--accent); }
.tip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: var(--space-3); }
.tip__item { display: grid; gap: var(--space-1); align-content: start; }
.tip__n { font-size: var(--fs-h5); font-weight: var(--guide-weight-light); line-height: 1; }
.tip__label { color: var(--ink-muted); }
.tip__bar { display: block; block-size: var(--space-1); border-radius: 0 var(--guide-radius-control) 0 0; background-color: var(--line); }
.tip__bar > i { display: block; block-size: 100%; border-radius: inherit; background-color: var(--bar-teal); }

.coverage__panel {
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--line);
  border-radius: 0 var(--guide-radius-surface) 0 0;
  background-color: var(--surface-raised);
}
.coverage__card { display: none; flex-direction: column; gap: var(--space-3); }
.coverage__card.is-on { display: flex; }
.coverage__card > * { margin: 0; }

.coverage__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.coverage__legend li { display: flex; align-items: center; gap: var(--space-2); }
.coverage__key {
  display: inline-block;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: var(--border-hairline) solid var(--line);
  border-radius: 0;
  background-color: var(--line);
}
.coverage__key--1 { background-color: var(--brand-teal-light); }
.coverage__key--2 { background-color: var(--brand-teal); }
.coverage__key--3 { background-color: var(--brand-teal-deep); }

/* ---------- Division switch (N1) and group strip (N2) ----------
   The kit's unit pills as a navigation landmark: in the strip that closes the content of each division home page and on the 404 page
   (design phase 1; they were in the mobile menu too until the single header of job H1). The pills keep the kit's 47-pixel controls (--size-control). On a phone they are two columns of
   equal pills; the longest label, Regulatory Affairs, takes two lines there instead of overflowing. */

.division-switch { display: grid; gap: var(--space-3); justify-items: start; }
.division-switch > * { margin: 0; }
.division-switch__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.division-switch__list > li { display: flex; }
.division-switch__list .bp-pill { flex: 1 1 auto; white-space: normal; text-align: center; }
.division-switch__group { min-block-size: var(--size-control); }
@container (max-width: 29.99rem) {
  .division-switch { justify-items: stretch; }
  .division-switch__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division-switch__list .bp-pill { padding-inline: var(--space-3); }
  .division-switch__group { justify-self: start; }
}

/* The strip: the group claim on one side, the switch on the other from 48rem; stacked below */
.group-strip { display: grid; gap: var(--space-5); align-items: center; }
.group-strip__text { display: grid; gap: var(--space-2); align-content: start; }
.group-strip__text > * { margin: 0; }
@container (min-width: 48rem) {
  .group-strip { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
}

/* ---------- Compact card grid (N4) ----------
   A grid of cards with an icon badge (Grid class grid--compact): below 40rem the cards take the kit's aside layout without the aside
   class, the badge on the left and the title, text and link in the second column, so that six or eight cards do not become a
   very long single column of stacked badges. A card without a badge (the indigo CtaCard) stays as it is. */
@container (max-width: 39.99rem) {
  .grid--compact .bp-card:has(> .bp-badge) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--space-2) var(--space-4); }
  .grid--compact .bp-card:has(> .bp-badge) > .bp-badge { grid-row: 1 / span 4; }
  .grid--compact .bp-card:has(> .bp-badge) > :not(.bp-badge) { grid-column: 2; }
  .grid--compact .bp-card:has(> .bp-badge) > .bp-card__title { display: flex; align-items: center; min-height: var(--size-badge-sm); }
  .grid--compact .bp-card:has(> .bp-badge) > .bp-card__link { justify-self: start; }
}

/* ---------- Quiet service links on the division cards (N6) ----------
   The service names on the gateway's division cards are links in all four divisions. A dotted underline in the control line colour
   marks them without turning the card into a list of blue links; hover and keyboard focus make it solid (the focus ring is the kit's). */
.bp-division__services a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--line-control);
  text-decoration-thickness: var(--border-strong);
}
.bp-division__services a:hover,
.bp-division__services a:focus-visible { text-decoration-style: solid; text-decoration-color: currentColor; }

/* ---------- Folded service list on the division cards (N21) ----------
   Owner's request of 10 November 2026: the service names of a division card fold under a "Services" disclosure, closed until it is opened
   (a native details/summary: the keyboard and assistive technology work without script; the focus ring is the kit's). The chevron turns
   when the list is open; the turn is switched off for visitors who ask for less motion. */
.bp-division__more { margin-block-start: var(--space-4); }
.bp-division__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--size-control);
  color: var(--link); font-weight: var(--guide-weight-medium); cursor: pointer; list-style: none;
}
.bp-division__toggle::-webkit-details-marker { display: none; }
.bp-division__toggle .bp-icon { inline-size: 1.125em; block-size: 1.125em; }
.bp-division__more[open] > .bp-division__toggle .bp-icon { transform: rotate(180deg); }
.bp-division__more > .bp-division__services { margin-block-start: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .bp-division__toggle .bp-icon { transition: transform .2s ease; }
}

/* ---------- Division cards with a photo (N19, job P2) ----------
   The gateway's division card carries the division's hero photo on top, 16:10, edge to edge inside the card (the card's padding is
   --space-5: the photo pulls itself out of it by the same amount, over the card's left bar). The photo is lazy and has a srcset. The
   cards of a row stay equal in height: the list is a grid and the cards stretch. */
.bp-division__media {
  position: relative; z-index: 1; aspect-ratio: 16 / 10; overflow: hidden;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-2);
  background-color: var(--surface-lavender);
}
.bp-division__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cards with a photo (N20, job P3) ----------
   A card that carries a photo (the News cards, with the post's cover) has it on top, 16:10, edge to edge inside the card: the photo pulls
   itself out of the card's padding (--space-5) over the card's left bar, like the division card above. Cards of a row stay equal in height
   (the grid stretches them). */
.bp-card__media {
  position: relative; z-index: 1; aspect-ratio: 16 / 10; overflow: hidden;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-1);
  background-color: var(--surface-lavender);
}
.bp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero and band on a phone (N7) ----------
   Below 30rem the dark band and the hero are compacted (less padding above and below, the buttons closer to the text, a calmer
   overline, the trust strip in two columns), below 48rem the photo of a band is 16:9 and the violet circle of a plain band moves to the
   top right corner so that it does not sit behind the text. The kit's own rules are the defaults above these widths. */
@container (max-width: 29.99rem) {
  .bp-band__body { padding-block: var(--space-8); }
  .bp-hero__grid { padding-block: var(--space-8); }
  .bp-hero__body > .bp-actions, .bp-band__body > .bp-actions { margin-top: var(--space-6); }
  .bp-overline { letter-spacing: 0.1em; text-wrap: balance; }
  .bp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .bp-trust__item .bp-icon { width: var(--size-icon); height: var(--size-icon); }
}
@container (max-width: 47.99rem) {
  .bp-band__media img { aspect-ratio: 16 / 9; }
  .bp-band--plain .bp-band__circle { top: 0; right: -30cqi; width: 70cqi; transform: translateY(-45%); }
}

/* ---------- Cover hero and contact panel (design phase 1, job D8) ----------
   The dark heroes (gateway, SMO, CRO, PV) and the contact band of every page carry their photo over the whole band instead of in a
   half beside the text: <figure class="bp-band__cover"> sits behind the text under an indigo overlay (colour-mix on the kit's indigo
   surface) that is solid under the text and fades out towards the photo, so every text on it keeps its contrast
   (docs/design-system-proposals.md has the measured numbers). A cover hero is a normal section below the light header (job G1-B, owner's
   decision of 10 November 2026; it used to run under a transparent header) and has the guide's single top-right corner (job G3-C), clipped by the section. The contact
   band is a rounded panel inside the page container, in a section of its own on the page background, with a teal bar at its
   text edge. The corner of these large surfaces is the guide's surface corner (job G3-C).
   Below 64rem the photo is a strip at the top of the band that fades into the indigo, and the text sits below the strip over the end
   of the fade; from 64rem the photo fills the band and the overlay runs from the text side. Without a photo nothing of this applies:
   the plain band with its violet circle is printed. */
.bp-band--cover .bp-band__grid { grid-template-columns: minmax(0, 1fr); }
/* the small label over a photo is turquoise like every eyebrow on a dark ground (the guide; job G2-A: it was the kit's lighter teal, the link
   colour of the dark themes, so that a bright spot of the photo could not take it under 4.5:1. The overlay under the text is solid; since the dark grounds are the guide's
   purple (10 November 2026) the accent there is the light turquoise #A8EAE3 of brand.css, 4.77:1 on the purple.) */
.bp-band--cover .bp-overline, .bp-band--cover .bp-eyebrow { color: var(--accent); }
.bp-band__cover { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: -1; block-size: calc(var(--space-16) * 5); margin: 0; }
.bp-band__cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 85% 50%; }
.bp-band__cover::after { content: ""; position: absolute; inset: 0; background-color: var(--overlay-strong); }
.bp-hero--cover {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 0 var(--guide-radius-surface) 0 0;
}
.bp-hero--cover .bp-band__body {
  padding-block: calc(var(--space-16) * 2 + var(--space-2)) var(--space-12);
}

.bp-cta-section[data-theme="light"] { background-color: var(--surface); }
[data-theme="light"] + .bp-cta-section[data-theme="light"] { padding-block-start: 0; }
.bp-cta-band--panel { position: relative; isolation: isolate; border-radius: 0 var(--guide-radius-surface) 0 0; }
.bp-cta-band--panel::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: var(--space-8);
  inset-inline-start: 0;
  inline-size: var(--border-accent);
  border-radius: 0;
  background-color: var(--bar-teal);
}
.bp-cta-band--panel .bp-band__body { padding: var(--space-8) var(--space-6); }
.bp-cta-band--panel.bp-band--cover .bp-band__body { padding-block-start: calc(var(--space-16) * 2 + var(--space-2)); }
.bp-cta-band--panel .bp-band__cover { block-size: calc(var(--space-16) * 3); }

/* the overlay of the stacked layout: a vertical fade, solid at the top (it meets the header), clear for a few rem, solid again where the text starts */
@supports (background-color: color-mix(in oklab, red 50%, transparent)) {
  .bp-band__cover::after {
    background-color: transparent;
    background-image: linear-gradient(to bottom,
      var(--surface) 0,
      color-mix(in oklab, var(--surface) 30%, transparent) 2.5rem,
      color-mix(in oklab, var(--surface) 10%, transparent) 5rem,
      color-mix(in oklab, var(--surface) 22%, transparent) 7.5rem,
      color-mix(in oklab, var(--surface) 90%, transparent) 10.2rem,
      var(--surface) 100%);
  }
  .bp-cta-band--panel .bp-band__cover::after {
    background-image: linear-gradient(to bottom,
      color-mix(in oklab, var(--surface) 12%, transparent) 0,
      color-mix(in oklab, var(--surface) 18%, transparent) 4rem,
      color-mix(in oklab, var(--surface) 70%, transparent) 8rem,
      color-mix(in oklab, var(--surface) 92%, transparent) 10.2rem,
      var(--surface) 100%);
  }
}

/* from 64rem the photo fills the band; the overlay is solid under the text (it ends 38rem from the text edge in the hero and 40rem in the
   panel: the width of a line of the lead) and fades out over 12rem, so the photo is clear on the far side */
@container (min-width: 64rem) {
  .bp-band__cover, .bp-hero--cover .bp-band__cover { inset-block: 0; block-size: auto; }
  .bp-band__cover img { object-position: 70% 35%; }
  .bp-hero--cover .bp-band__body { padding-block: var(--space-16) calc(var(--space-16) + var(--space-4)); }
  .bp-cta-band--panel .bp-band__body { padding: var(--space-12); }
  .bp-cta-band--panel.bp-band--cover .bp-band__body { padding-block-start: var(--space-12); }
  /* between 64rem and about 75rem the text column gives way (a little) so that the photo keeps room on the far side */
  .bp-hero--cover .bp-band__body > * { max-width: min(40rem, 54cqi); }
  .bp-cta-band--panel.bp-band--cover .bp-band__body > * { max-width: min(40rem, 56cqi); }
  .bp-cta-band--panel .bp-band__cover { block-size: auto; }
}
@supports (background-color: color-mix(in oklab, red 50%, transparent)) {
  @container (min-width: 64rem) {
    .bp-hero--cover .bp-band__cover::after {
      background-image:
        linear-gradient(to bottom, color-mix(in oklab, var(--surface) 80%, transparent) 0, color-mix(in oklab, var(--surface) 72%, transparent) 5.4rem, transparent 9rem),
        linear-gradient(to right,
          color-mix(in oklab, var(--surface) 94%, transparent) 0,
          color-mix(in oklab, var(--surface) 90%, transparent) calc(max(var(--gutter), (100cqi - var(--container-max)) / 2) + min(38rem, 51cqi)),
          color-mix(in oklab, var(--surface) 28%, transparent) calc(max(var(--gutter), (100cqi - var(--container-max)) / 2) + min(50rem, 67cqi)),
          color-mix(in oklab, var(--surface) 4%, transparent) 100%);
    }
    .bp-cta-band--panel .bp-band__cover::after {
      background-image: linear-gradient(to right,
        color-mix(in oklab, var(--surface) 94%, transparent) 0,
        color-mix(in oklab, var(--surface) 92%, transparent) calc(var(--space-12) + min(40rem, 56cqi)),
        color-mix(in oklab, var(--surface) 28%, transparent) calc(var(--space-12) + min(52rem, 72cqi)),
        color-mix(in oklab, var(--surface) 4%, transparent) 100%);
    }
  }
}

/* The photo of the light split hero (Regulatory Affairs home) has the same rounded corners */
.bp-hero__media img { border-radius: 0 var(--guide-radius-surface) 0 0; }

/* ---------- Footer links (N8) ----------
   Below 64rem the footer columns stack and each link is a full 47-pixel line (the kit's control height), with no gap between the
   lines, so that a thumb finds one link at a time. Wider, the links keep their compact rows and gain a little hit area. */
@container (max-width: 63.99rem) {
  .bp-footer__col ul { gap: 0; }
  .bp-footer__col ul a { display: inline-flex; align-items: center; min-block-size: var(--size-control); }
}
@container (min-width: 64rem) {
  .bp-footer__col ul a { padding-block: var(--space-1); }
}

/* ---------- Photo with a fixed ratio (N9) ----------
   The headquarters photo of the gateway: its ratio is set on the frame (MediaPanel) so the page does not jump while it loads, and
   it stays a strip of reasonable size on wide screens. */
.media-hq { max-inline-size: 36rem; }
/* an uncropped portrait photo (owner's request of 10 November 2026) keeps a column of a reasonable height */
.media-hq--portrait { max-inline-size: 26rem; }

/* ---------- Line breaks of short texts ----------
   Headings, taglines, card titles and quotes break into lines of even length instead of leaving one word alone on the last line;
   leads and card texts avoid a single orphan word (a progressive enhancement: browsers without text-wrap print as before). */
.bp-h4, .bp-h5, .bp-tagline, .bp-overline, .bp-card__title, .bp-band__title, .bp-quote, .bp-footer__col > .bp-eyebrow { text-wrap: balance; }
.bp-lead, .bp-card__text, .bp-section-header__lead { text-wrap: pretty; }

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  .province--data { transition: none; }
}

@media print {
  .bp-header__toggle, .bp-header__drawer, .cookie-notice, .skip-link { display: none !important; }
  .bp-band__circle { display: none; }
}

/* ---------- Sticky header (job D10) ----------
   Owner request, 23 October 2026: for now the header must not disappear when the page scrolls. The header carries the kit's
   bp-header--sticky (position: sticky; top: 0, in layout.go), so it keeps its place in the flow. Since job G1-B (10 November 2026)
   the header is light on every page and the cover hero starts below it. Without JavaScript that is all; with it, site.js sets
   is-stuck once the page has moved a little:
   - every stuck header gets a soft shadow that lifts it off the content. The header is opaque and keeps its gradient rule all the time.
   The change of ground is a short fade, switched off for visitors who ask for less motion.
   In-page links and keyboard focus must not end under the header: scroll-padding-top is the height of the header (rule, bar and
   line below it) plus room for a label that wraps onto a second line on a phone and a little air. The mobile menu sits inside the
   header, so on a short screen it scrolls inside itself (its height is what is left below the bar) instead of running off the
   bottom of a header that does not scroll away. The cookie notice (z-index 20) and the skip link (30) stay above the header (10);
   the map tooltip stays below it. */
html { scroll-padding-top: calc(var(--border-rule) + 2 * var(--space-4) + var(--size-control) + var(--border-hairline) + var(--space-8)); }
/* the header's top rule is the guide's gradient (violet to turquoise, through the brand tokens of brand.css) and its logo is the guide's
   logo-primary.svg: 2.75rem tall, 2.25rem when the header is narrow (a phone) */
.bp-header--rule { border-top-color: transparent; border-image: linear-gradient(90deg, var(--brand-violet), var(--brand-teal)) 1; }
.bp-header .bp-logo__img { block-size: 2.75rem; inline-size: auto; }
@container (max-width: 40rem) {
  .bp-header .bp-logo__img { block-size: 2.25rem; }
}
.bp-header--sticky.is-stuck { box-shadow: var(--shadow-raise); }
@media (prefers-reduced-motion: no-preference) {
  .bp-header--sticky { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
}
.bp-header--sticky .bp-header__drawer {
  max-block-size: calc(100vh - var(--border-rule) - 2 * var(--space-4) - var(--size-control) - var(--border-hairline) - var(--space-8));
  max-block-size: calc(100dvh - var(--border-rule) - 2 * var(--space-4) - var(--size-control) - var(--border-hairline) - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- Sub-page head, related pages and sticky column (design phase 2, job E1) ----------
   N12 the head of a sub-page: the cover hero of the home pages at a lower height (a photo under the same indigo overlay, rounded
   bottom corners, below the light header) with the path "CRO / Services" as its eyebrow; without a photo a single-column text
   head. N13 the strip of related pages before the contact panel. N14 a column of a split that sticks below the header while the
   long column scrolls. N15 a width cap for the list variant of Steps. docs/design-system-proposals.md describes them. */

/* the path: the kit's overline as a breadcrumb list; the division part is a link, the page itself the last step */
.bp-path__list { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bp-path__item { display: inline-flex; align-items: baseline; column-gap: var(--space-2); }
.bp-path a { padding-block: var(--space-1); color: inherit; text-decoration: none; }
.bp-path a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* the compact cover head: the cover hero (bp-hero--cover, above) with less air. Stacked (below 64rem) the photo is a shorter strip
   above the text, fading into the indigo sooner; from 64rem the photo fills the head and the overlay of the cover hero applies. */
.bp-hero--compact .bp-band__title { margin-top: var(--space-2); }
.bp-hero--compact .bp-band__text { margin-top: var(--space-4); }
.bp-hero--compact .bp-band__body > .bp-actions { margin-top: var(--space-6); }
.bp-hero--compact .bp-hero__tagline { margin-top: var(--space-6); }
@container (max-width: 63.99rem) {
  .bp-hero--compact .bp-band__cover { block-size: calc(var(--space-16) * 3); }
  .bp-hero--compact.bp-hero--cover .bp-band__body {
    padding-block: calc(var(--space-16) + var(--space-10)) var(--space-10);
  }
}
@supports (background-color: color-mix(in oklab, red 50%, transparent)) {
  @container (max-width: 63.99rem) {
    .bp-hero--compact .bp-band__cover::after {
      background-image: linear-gradient(to bottom,
        var(--surface) 0,
        color-mix(in oklab, var(--surface) 28%, transparent) 1.6rem,
        color-mix(in oklab, var(--surface) 8%, transparent) 3.2rem,
        color-mix(in oklab, var(--surface) 18%, transparent) 5rem,
        color-mix(in oklab, var(--surface) 70%, transparent) 6.6rem,
        color-mix(in oklab, var(--surface) 96%, transparent) 7.6rem,
        var(--surface) 8.4rem);
    }
  }
}
@container (min-width: 64rem) {
  .bp-hero--compact.bp-hero--cover .bp-band__body {
    padding-block: var(--space-10) var(--space-12);
  }
  .bp-hero--compact .bp-band__cover img { object-position: 70% 40%; }
}

/* the single-column text head: no empty half, a calm width for the title and the lead */
.bp-hero--text .bp-hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-10); }
.bp-hero--text .bp-hero__title, .bp-hero--text .bp-hero__lead { max-width: 46rem; }
.bp-hero--text .bp-hero__title { margin-top: var(--space-2); }
.bp-hero--text .bp-hero__lead { margin-top: var(--space-4); }
.bp-hero--text .bp-hero__body > .bp-actions { margin-top: var(--space-6); }
@container (max-width: 29.99rem) {
  .bp-hero--text .bp-hero__grid { padding-block: var(--space-8); }
}

/* the strip of related pages: a compact row of link cards; the heading is small, the badge sits beside the title and the line of text
   runs the full width of the card (the kit's aside layout would squeeze it into a narrow column), at most three lines */
.related-pages .bp-section-header { margin-block-end: var(--space-6); }
.related-pages__grid > .bp-grid__items > li { display: flex; }
.related-pages__grid .bp-card { flex: 1 1 auto; }
.related-pages__grid .bp-card--aside > .bp-badge { grid-row: 1; }
.related-pages__grid .bp-card--aside > .bp-card__text { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* a column of a split that sticks below the sticky header while the long column scrolls (the short column gets sticky-col; the split
   class split-sticky aligns both columns to the top, where the kit centres them). Only from 48rem, where the split has two columns. */
.split-sticky > .bp-grid__items { align-items: start; }
@container (min-width: 48rem) {
  .split-sticky > .bp-grid__items > .sticky-col {
    position: sticky;
    inset-block-start: calc(var(--border-rule) + 2 * var(--space-4) + var(--size-control) + var(--border-hairline) + var(--space-8));
  }
}

/* the list variant of Steps is a column of rows: a long line of text is hard to read, so the list stays at the width of prose */
.bp-steps--list .bp-steps__list { max-inline-size: 46rem; }

/* Design phase 2, job E4: CRO and Regulatory Affairs sub-pages ----------
   A section heading that stands alone in a sticky column (the heading beside the key-value list of /regulatory-affairs/lifecycle) has no
   text under it, so the kit's space below a section header would double up with the gap of the split when the two columns stack. */
.split-sticky > .bp-grid__items > .sticky-col > .bp-section-header:last-child { margin-block-end: 0; }

/* Design phase 2, job E3: SMO sub-pages and the group pages ----------
   The contact pages, the Insights list, the legal pages and the 404 page open with the single-column text head; the contact form beside
   its sticky column is the existing split-sticky. What is added here is small: the space under a section header that sits in a split
   column (the kit's space below it is removed there, see .split-start), the list of links of the 404 page, the empty state of the Insights
   list and of the map of Türkiye. */
.after-head { margin-block-start: var(--space-5); }

/* the "go to" list of the 404 page: link buttons in a plain column */
.goto-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.goto-list > li { margin: 0; }

/* the friendly callout of an Insights list without posts: a column of reading width, not the whole container */
.insights-empty { max-inline-size: 46rem; }

/* the map of Türkiye without data: the note beside it is a callout already, so it needs no box of its own */
.coverage__panel--empty { padding: 0; border: 0; background-color: transparent; }

/* Design phase 2, job E6: fixes from the screenshot review of the non-PV pages ----------
   Found while looking at every page at 375, 1024 and 1280 pixels; the list is in docs/known-issues.md. Small things only; nothing above is
   changed except what is said here. */

/* A light section with the tight padding (the strip of related pages, a group strip) in front of the light contact panel: the panel's
   section has no top padding after a light section (job D8), so the gap was the tight strip's 3rem, half of what every other join of a
   section and the panel has. The panel's section now adds what the tight padding lacks, so the gap is the full section rhythm
   (nothing is added on a phone, where the section padding is 3rem anyway). */
.bp-section--tight[data-theme="light"] + .bp-cta-section[data-theme="light"] { padding-block-start: calc(var(--section-y) - var(--space-10)); }

/* The strip of related pages with five cards (SMO): three in the first row and the last two wider in the second, instead of a row with a
   hole at the end; the texts of its cards break into even lines (a one-word second line, "close-out", looked like a mistake). */
@container (min-width: 48rem) {
  .related-pages__grid > .bp-grid__items:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .related-pages__grid > .bp-grid__items:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .related-pages__grid > .bp-grid__items:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
}
.related-pages__grid .bp-card__text { text-wrap: balance; }

/* The footer from 64rem to 80rem: the brand block takes a third of the width and four columns share the rest, about 7rem each, so the
   division label and the e-mail address broke over three lines. Here the brand sits above the columns, which get the full width; from
   80rem the kit's side-by-side layout fits and applies. */
@container (min-width: 64rem) and (max-width: 79.99rem) {
  .bp-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* Design phase 2, job E5: a card of the strip of related pages without an icon badge (a PV service page an editor added has no icon) has no badge
   column: the kit's aside layout puts every child but the badge in the second column, so its title started one gap in from the edge. The title
   takes the whole row, like the line under it. */
.related-pages__grid .bp-card--aside:not(:has(> .bp-badge)) > .bp-card__title { grid-column: 1 / -1; }

/* Header and footer (job H1) ----------
   One header for the whole site (owner's decision of 25 October 2026, N16 "Mega menu" in docs/design-system-proposals.md). The bar keeps
   the kit's classes; what the kit does not have is here. About Us, SMO, CRO, Regulatory Affairs and PV are buttons (.mega-trigger) that
   open one panel (.mega) below the bar: a vertical list of the headings on the left (.mega-row), the pages of the selected heading on
   the right (.mega-detail). From 64rem the panel is a layer under the sticky header and always light, whatever the header is; below
   64rem it is not drawn and the kit's drawer (.mega-drawer) takes over with the same list in two levels (.mega-level). The markup is
   complete without JavaScript; site.js only opens, closes and moves between the levels. Every length is a kit token or an em, and the
   focus ring is the kit's (no box-shadow on anything that can be focused). */

/* the border box of the parts that do not start with bp- (the kit sets it for those) */
.mega, .mega *, .mega-drawer, .mega-drawer * { box-sizing: border-box; }

/* The bar: seven items and a button have to fit on one line from 64rem. The kit's gaps apply from 80rem; between 64rem and 80rem the gaps
   shrink one step (the bar, between the items, the padding of the button). The items never wrap onto a second line. */
.bp-header__links { flex-wrap: nowrap; }
@container (min-width: 64rem) and (max-width: 79.99rem) {
  .bp-header__bar { gap: var(--space-4); }
  .bp-header__links { column-gap: var(--space-3); }
  .bp-header__cta { padding-inline: var(--space-4); }
}

/* The buttons of the bar look like its links: the kit's underline for the current page, the colour of a link and the same underline
   while the panel is open on them, and a small chevron drawn with borders (no icon in the markup). */
.mega-trigger { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding-inline: 0; border-top: 0; border-inline: 0; border-radius: 0; background: none; cursor: pointer; }
.mega-trigger::after { content: ""; flex: none; inline-size: 0.4em; block-size: 0.4em; margin-block-start: -0.2em; border-inline-end: var(--border-strong) solid currentColor; border-block-end: var(--border-strong) solid currentColor; transform: rotate(45deg); }
.mega-trigger[aria-expanded="true"] { color: var(--link); border-bottom-color: var(--accent); }
.mega-trigger[aria-expanded="true"]::after { margin-block-start: 0.2em; transform: rotate(225deg); }
@media (prefers-reduced-motion: no-preference) {
  .mega-trigger::after { transition: transform .15s ease, margin-block-start .15s ease; }
}

/* The panel: under the header, the width of the page, edge to edge and so without a corner (job G3-C), scrolling inside itself on a short
   screen (the height that is left below the bar, as for the drawer). */
.mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  border-block-start: var(--border-hairline) solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-overlay);
  max-block-size: calc(100vh - var(--border-rule) - 2 * var(--space-4) - var(--size-control) - var(--border-hairline));
  max-block-size: calc(100dvh - var(--border-rule) - 2 * var(--space-4) - var(--size-control) - var(--border-hairline));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@container (max-width: 63.99rem) {
  .mega { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: mega-drop .16s ease-out; }
  .mega-detail.is-swap { animation: mega-swap .16s ease-out; }
  @keyframes mega-drop { from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); } to { opacity: 1; transform: none; } }
  @keyframes mega-swap { from { opacity: 0; transform: translateX(var(--space-2)); } to { opacity: 1; transform: none; } }
}

.mega__in { padding-block: 0; }
.mega__grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); min-block-size: 24rem; }

/* the list of headings (a vertical tablist): badge, label and line; the arrow shows on the selected one and while it is pointed at */
.mega__list { display: grid; gap: var(--space-1); align-content: start; margin: 0; padding: var(--space-5) var(--space-4) var(--space-5) 0; list-style: none; border-inline-end: var(--border-hairline) solid var(--line); }
.mega__list > li { margin: 0; }
.mega-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); inline-size: 100%; margin: 0; padding: var(--space-2) var(--space-3); border: 0; border-radius: 0 var(--guide-radius-control) 0 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.mega-row:hover, .mega-row[aria-selected="true"] { background-color: var(--surface-lavender); }
.mega-row[aria-selected="true"]::before { content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: 0; inline-size: var(--border-accent); border-radius: 0; background-color: var(--bar-violet); }
.mega-row::after { content: ""; flex: none; inline-size: 0.45rem; block-size: 0.45rem; border-inline-end: var(--border-strong) solid var(--ink-muted); border-block-end: var(--border-strong) solid var(--ink-muted); transform: rotate(-45deg); opacity: 0; }
.mega-row:hover::after, .mega-row[aria-selected="true"]::after { opacity: 1; }
.mega-row[aria-selected="true"]::after { border-color: var(--link); }
.mega-row__text { display: grid; gap: 0; min-inline-size: 0; }
.mega-row__label { font-weight: var(--guide-weight-medium); }
.mega-row__line { color: var(--ink-muted); line-height: 1.35; }

/* the pages of the selected heading */
.mega__details { min-inline-size: 0; padding: var(--space-6) 0 var(--space-8) var(--space-10); }
.mega-detail[hidden] { display: none; }
.mega-detail__head { display: grid; gap: var(--space-1); padding-block-end: var(--space-4); margin-block-end: var(--space-5); border-block-end: var(--border-hairline) solid var(--line); }
.mega-detail__head > * { margin: 0; }
.mega-detail__line { color: var(--ink-muted); }
.mega-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-6) var(--space-8); align-items: start; }
.mega-group { min-inline-size: 0; }
.mega-group--wide { grid-column: span 2; }
.mega-group--wide .mega-group__list { columns: 2; column-gap: var(--space-8); }
.mega-group__title { margin-block-end: var(--space-2); }
.mega-group__title a { color: inherit; text-decoration: none; }
.mega-group__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mega-group__list { margin: 0; padding: 0; list-style: none; }
.mega-group__list a { display: block; margin-inline-start: calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2); border-radius: 0 var(--guide-radius-control) 0 0; color: var(--ink); text-decoration: none; break-inside: avoid; text-wrap: balance; }
.mega-group__list a:hover { background-color: var(--surface-lavender); color: var(--link); }
/* the link of the page being shown keeps the look of a hovered link (owner's request of 10 November 2026); a group title that is the page is
   underlined like a hovered title */
.mega-group__list a[aria-current="page"] { background-color: var(--surface-lavender); color: var(--link); }
.mega-group__title a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
.mega-single { display: grid; gap: var(--space-4); justify-items: start; max-inline-size: 36rem; padding: var(--space-8); border-radius: 0 var(--guide-radius-surface) 0 0; background-color: var(--surface-lavender); }
.mega-single > p { margin: 0; color: var(--ink-muted); }

/* The drawer of the phone (below 64rem, where the kit shows it): the list of headings is the first level, the pages of the heading that
   was tapped the second, which slides in over it. The inactive level is out of the flow and hidden from the keyboard and the screen
   readers (visibility), so the drawer is as high as the level in view; it scrolls inside itself when that is more than is left of the
   screen (the rule of the sticky header), and the button stays at the bottom of what is in view. */
@container (max-width: 63.99rem) {
  .bp-header__drawer.mega-drawer { padding-block-end: 0; }
  .mega-levels { position: relative; overflow: hidden; overflow: clip; margin-inline: calc(-1 * var(--space-1)); }
  .mega-level { padding: var(--space-1); }
  .mega-level--top:not(.is-active) { position: absolute; inset-inline: 0; inset-block-start: 0; visibility: hidden; transform: translateX(-30%); }
  .mega-level--sub { position: absolute; inset-inline: 0; inset-block-start: 0; visibility: hidden; transform: translateX(100%); }
  .mega-level--sub.is-active { position: relative; visibility: visible; transform: none; }
  .mega-drawer__list { margin: 0; padding: 0; list-style: none; }
  .mega-drawer .mega-row { grid-template-columns: auto minmax(0, 1fr) auto; min-block-size: calc(var(--size-control) + var(--space-3)); padding: var(--space-2) var(--space-1); border-radius: 0; border-block-end: var(--border-hairline) solid var(--line); background: none; }
  .mega-drawer .mega-row::before { content: none; }
  .mega-drawer .mega-row::after { opacity: 1; }
  .mega-drawer .mega-row[aria-current="page"] .mega-row__label { color: var(--accent); }
  .mega-back { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--size-control); margin: 0; padding: 0; border: 0; background: none; color: var(--link); font-weight: var(--guide-weight-medium); cursor: pointer; }
  .mega-back::before { content: ""; flex: none; inline-size: 0.45rem; block-size: 0.45rem; border-inline-start: var(--border-strong) solid currentColor; border-block-end: var(--border-strong) solid currentColor; transform: rotate(45deg); }
  .mega-level--sub .mega-detail__head { margin-block: var(--space-2) var(--space-4); padding-block-end: 0; border-block-end: 0; }
  .mega-drawer .mega-detail__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mega-drawer .mega-group--wide { grid-column: auto; }
  .mega-drawer .mega-group--wide .mega-group__list { columns: 1; }
  .mega-drawer .mega-group__list a { display: flex; align-items: center; min-block-size: var(--size-control); margin-inline: 0; padding-inline: 0; border-radius: 0; border-block-end: var(--border-hairline) solid var(--line); }
  .mega-drawer .mega-group__title { margin-block-end: 0; }
  .mega-drawer .mega-group__title a { display: inline-flex; align-items: center; min-block-size: var(--size-control); }
  .mega-level--top .mega-drawer__list > li:last-child .mega-row, .mega-level--sub .mega-group:last-child .mega-group__list > li:last-child > a { border-block-end: 0; }
  .mega-drawer .mega-single { max-inline-size: none; padding: var(--space-5); }
  .mega-drawer .mega-single .bp-btn { inline-size: 100%; }
  .mega-drawer__cta { position: sticky; inset-block-end: 0; padding-block: var(--space-4) var(--space-6); border-block-start: var(--border-hairline) solid var(--line); background-color: var(--surface-raised); }
}
@media (prefers-reduced-motion: no-preference) {
  .mega-level { transition: transform .22s ease, visibility 0s .22s; }
  .mega-level--sub.is-active, .mega-level--top.is-active { transition: transform .22s ease; }
}

/* The slogan strip of the gateway (the revision of 29 October 2026, the customer's request of 28 October): "Be healthy Be safe Be well" as
   the corporate identity guide sets it. Job G2-A (the web usage guide): the strip is the guide's gradient with a white slogan, weight 300
   and the key words bold (700). White on the turquoise end of the gradient is 2.3:1 (the guide's own colours; the slogan is display size). */
/* Job G3-C: the gradient is at least 64rem wide and anchored at the left. On a strip narrower than that (a phone, a small tablet) the
   turquoise end lies beyond the text, so white on the glyphs keeps 3:1 or more (the large-text threshold; the slogan is 24 to 36 px). From
   64rem the strip shows the guide's whole gradient. (No container query: a section is its own container, so it cannot query itself.) */
.slogan-strip { background-image: var(--guide-gradient); background-repeat: no-repeat; background-position: left center; background-size: max(100%, 64rem) 100%; }
.slogan-strip .bp-container { text-align: center; }
.slogan { margin: 0; font-weight: var(--guide-weight-light); word-spacing: 0.12em; text-wrap: balance; }
.slogan-strip .slogan { color: var(--on-action); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.slogan strong { font-weight: var(--guide-weight-bold); color: inherit; }

/* A photo panel beside a section heading (the revision of 29 October 2026: the SMO services): the photo keeps a reading width and sits at the
   end of its column. */
.media-panel { inline-size: 100%; max-inline-size: 30rem; justify-self: end; }

/* The menu of the revision of 29 October 2026 (the customer's "About Us · Divisions · … · Contact"): the panel shows the rows of the button
   that opened it (site.js hides the others); About Us has one row, so its pages take the whole panel without the list. On a phone the four
   divisions are an accordion under "Divisions" on the first level of the drawer. */
.mega__list > li[hidden] { display: none; }
.mega--single .mega__grid { grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
.mega--single .mega__list { display: none; }
.mega--single .mega__details { padding-inline-start: 0; }
.mega-acc__list { margin: 0; padding: 0 0 0 var(--space-4); list-style: none; }
.mega-acc__list[hidden] { display: none; }
.mega-drawer .mega-acc__toggle::after { transform: rotate(45deg); }
.mega-drawer .mega-acc__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }

/* News photos (job R2): a photo between the paragraphs of a post is a figure in the text column (the kit's media frame, 4:3, at most 36rem wide so that it does not outweigh the text). The photos that
   do not fit between the paragraphs form a gallery under the article: a grid of the same frames, two columns on a phone and three from 40rem
   of the section, each one a link to the large file. */
.prose > .bp-media { max-inline-size: 36rem; margin-block: var(--space-6); }
.news-gallery { margin-block-start: var(--space-10); }
.news-gallery > h2 { margin: 0 0 var(--space-5); }
.news-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.news-gallery__link { display: block; text-decoration: none; }
@container (min-width: 40rem) {
  .news-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* The page of a career position (job R3, 4 November 2026): the facts, the description and the "Apply Now" button in one reading column. The
   button comes after the description, under a hairline: that is the end of the page. */
.job-detail { display: grid; gap: var(--space-8); max-inline-size: 46rem; }
.job-detail > * { margin: 0; }
.job-apply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-block-start: var(--space-6); border-block-start: var(--border-hairline) solid var(--line); }

/* News lightbox (job R3, 4 November 2026): the photo viewer that site.js opens when a photo of a gallery is clicked. A <dialog> opened with
   showModal() that fills the window on the kit's deep ground (opaque: the text of the page behind would make the caption unreadable): a bar with the counter and the close button, the
   photo with its caption, and the buttons previous and next (under the photo on a phone, at its sides from 48rem of the window). The page
   behind does not scroll while it is open. The focus ring is the kit's. */
.has-lightbox { overflow: hidden; scrollbar-gutter: stable; }
.lightbox { box-sizing: border-box; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background-color: var(--surface); color: var(--ink); container-type: inline-size; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.lightbox__count { margin: 0; font-variant-numeric: tabular-nums; }
.lightbox__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3); min-block-size: 0; padding: 0 var(--space-4) var(--space-4); touch-action: pan-y; }
.lightbox__figure { grid-column: 1 / -1; display: grid; align-content: center; justify-items: center; gap: var(--space-3); min-block-size: 0; margin: 0; }
.lightbox__img { inline-size: 100%; block-size: auto; aspect-ratio: auto 4 / 3; max-block-size: max(12rem, calc(100vh - 16rem)); max-block-size: max(12rem, calc(100dvh - 16rem)); object-fit: contain; border-radius: 0 var(--guide-radius-surface) 0 0; }
.lightbox__caption { max-inline-size: 46rem; margin: 0; text-align: center; text-wrap: balance; }
.lightbox__btn { display: inline-grid; place-items: center; inline-size: var(--size-control); block-size: var(--size-control); margin: 0; padding: 0; border: var(--border-strong) solid var(--line-control); border-radius: var(--radius-pill); background-color: var(--surface-raised); color: var(--ink); cursor: pointer; }
.lightbox__btn:hover { border-color: var(--action); background-color: var(--action); color: var(--on-action); }
.lightbox__btn--prev { grid-row: 2; grid-column: 1; justify-self: start; }
.lightbox__btn--next { grid-row: 2; grid-column: 2; justify-self: end; }
@container (min-width: 48rem) {
  .lightbox__stage { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); gap: var(--space-5); padding-inline: var(--space-6); padding-block-end: var(--space-6); }
  .lightbox__figure { grid-row: 1; grid-column: 2; }
  .lightbox__img { max-block-size: max(12rem, calc(100vh - 11rem)); max-block-size: max(12rem, calc(100dvh - 11rem)); }
  .lightbox__btn--prev { grid-row: 1; grid-column: 1; align-self: center; }
  .lightbox__btn--next { grid-row: 1; grid-column: 3; align-self: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox__img.is-from-end { animation: lightbox-from-end .24s ease; }
  .lightbox__img.is-from-start { animation: lightbox-from-start .24s ease; }
  .lightbox__btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}
@keyframes lightbox-from-end { from { opacity: 0; transform: translateX(var(--space-10)); } to { opacity: 1; transform: none; } }
@keyframes lightbox-from-start { from { opacity: 0; transform: translateX(calc(-1 * var(--space-10))); } to { opacity: 1; transform: none; } }

/* The footer head of the guide (job G1-B): above the footer, on the light ground, the slogan in purple (weight 300, the bold words 700)
   over a 1.5rem bar with the gradient and only its top-right corner rounded. Printed on every page while gw.slogan is set. */
.footer-head { padding-block: var(--space-10) 0; }
.footer-head__slogan { margin: 0 0 var(--space-3); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--guide-weight-light); line-height: 1.3; color: var(--brand-violet); }
.footer-head__slogan strong { font-weight: var(--guide-weight-bold); }
.footer-head__bar { block-size: 1.5rem; border-radius: 0 var(--guide-radius-bar) 0 0; background-image: linear-gradient(90deg, var(--brand-violet), var(--brand-teal)); }

/* ---------- The web usage guide: type, weights, colours and buttons (job G2-A, owner's decision of 10 November 2026, N18) ----------
   brand.css (linked between the kit's bundle.css and this file) already carries the guide's colours as the kit's tokens, so most colours
   follow by themselves: the nearest data-theme decides --accent, --link, --ink and the button tokens. What the tokens cannot do is here:
   the guide's type table in <main>, the weight scale on every element, the headings' colours, the buttons' outlines and glows. The
   corners and the grey noise are job G3's. Two reading notes:
   - ":not(.slogan)" on the heading selectors only raises their specificity above the kit's class rules (.bp-h2 and the others); no heading
     carries that class.
   - a dark element inside a light section (the indigo call-to-action card, the photo label, the contact panel) must take the dark colours:
     every dark rule below is written for ":is([data-theme="indigo"], [data-theme="deep"])" and has a higher specificity than its light
     rule, so the nearest ground wins. */

/* Form controls take the page font (a browser does not pass it on by itself). */
input, select, textarea, button, optgroup { font-family: inherit; }
body { font-weight: var(--guide-weight-regular); }

/* Type table (the guide). Colours: H1, H3 to H6 purple on a light ground and white on a dark one; H2 purple on a light ground and turquoise on a
   dark one (--accent does both). */
main h1:not(.slogan) {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  font-weight: var(--guide-weight-bold);
  letter-spacing: normal;
  text-transform: uppercase;
}
main h2:not(.slogan) {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  font-weight: var(--guide-weight-light);
  letter-spacing: normal;
  color: var(--accent);
}
main h3:not(.slogan) {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  font-weight: var(--guide-weight-regular);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
main :is(h4, h5, h6):not(.slogan), main p:is(.bp-h4, .bp-h5):not(.slogan) {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: var(--guide-weight-regular);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
main :is(h1, h3, h4, h5, h6):not(.slogan), main p:is(.bp-h4, .bp-h5):not(.slogan) { color: var(--guide-violet); }
main :is([data-theme="indigo"], [data-theme="deep"]) :is(h1, h3, h4, h5, h6):not(.slogan),
main :is([data-theme="indigo"], [data-theme="deep"]) p:is(.bp-h4, .bp-h5):not(.slogan) { color: var(--ink); }
/* the claim of the group strip is a quiet display line, not a label */
main .group-strip__text p.bp-h4:not(.slogan) {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: var(--guide-weight-light);
  letter-spacing: normal;
  text-transform: none;
}
/* paragraph: 1rem on 1.6 (the lead and the small text keep the kit's sizes) */
main p { line-height: 1.6; }
main p.bp-body { font-size: 1rem; }

/* Weight scale: 300 = H2, quotes, numerals, taglines, slogans; 400 = text, H3, H4; 500 = buttons, navigation, eyebrows, labels, chips, footer
   titles, dt; 600 = strong; 700 = H1 and the bold words of the slogans. */
:is(.bp-quote, .bp-tagline, .bp-numeral, [class*="__num"]) { font-weight: var(--guide-weight-light); }
:is(strong, b, .bp-strong, .bp-footer__bottom strong) { font-weight: var(--guide-weight-semibold); }
:is(.bp-eyebrow, .bp-overline, .bp-label, .bp-subhead, [class*="kicker"]):not(h1, h2, h3, h4, h5, h6) { font-weight: var(--guide-weight-medium); }
:is(label, legend, dt, .bp-pill, .bp-kv__key, .bp-network__label, .bp-topic__label, .skip-link, .division-switch__label) { font-weight: var(--guide-weight-medium); }
.bp-callout__text { font-weight: var(--guide-weight-regular); }
/* header: navigation 500, the lines of description under a row 400 */
.bp-header :is(a, button, [class*="label"], [class*="title"], h2, h3, h4, p, span) { font-weight: var(--guide-weight-medium); }
.bp-header :is([class*="line"], [class*="desc"], [class*="lead"], small) { font-weight: var(--guide-weight-regular); }
/* footer: titles 500 in capitals, links and text 400 */
.bp-footer :is(h2, h3, h4, [class*="title"], [class*="heading"]) { font-weight: var(--guide-weight-medium); text-transform: uppercase; letter-spacing: 0.03em; }

/* Colours the tokens do not reach. The eyebrows (and their links) are purple on a light ground and turquoise on a dark one: --accent does both. */
:is(.bp-eyebrow, .bp-overline) a { color: inherit; }
/* a badge on a turquoise ground has a near-black icon (the guide); the ground is the badge's own or the dark theme's */
.bp-badge--teal, :is([data-theme="indigo"], [data-theme="deep"]) .bp-badge { color: var(--guide-on-teal); }

/* Buttons (the guide): weight 500, letter-spacing .03em, a 2-px border on outline buttons; the corners are job G3's. Primary: purple filled on a
   light ground (hover #57428A and a purple glow), turquoise filled on a dark one (hover light turquoise and a turquoise glow). Secondary: purple
   outline filling purple on a light ground, white outline filling white on a dark one (the kit's own dark secondary). The kit's soft button is the
   purple outline button. The focus ring is the kit's and is never replaced: a glow does not show while the button has the keyboard focus. */
.bp-btn { font-weight: var(--guide-weight-medium); letter-spacing: 0.03em; }
.bp-btn:not(.bp-btn--link) { border-width: var(--guide-border-button); }
.bp-btn--primary:hover:not(:focus-visible) { box-shadow: var(--guide-glow-violet); }
:is([data-theme="indigo"], [data-theme="deep"]) .bp-btn--primary:hover:not(:focus-visible) { box-shadow: var(--guide-glow-teal); }
.bp-btn--secondary, .bp-btn--soft { border-color: var(--guide-violet); background-color: transparent; color: var(--guide-violet); }
.bp-btn--secondary:hover, .bp-btn--secondary:active, .bp-btn--soft:hover, .bp-btn--soft:active { border-color: var(--guide-violet); background-color: var(--guide-violet); color: var(--on-action); }
:is([data-theme="indigo"], [data-theme="deep"]) :is(.bp-btn--secondary, .bp-btn--soft) { border-color: var(--ink); color: var(--ink); }
:is([data-theme="indigo"], [data-theme="deep"]) :is(.bp-btn--secondary, .bp-btn--soft):is(:hover, :active) { border-color: var(--ink); background-color: var(--ink); color: var(--surface); }

/* ---------- The guide's corners and noise (job G3-C, N18) ----------
   One corner language for the whole site (the web usage guide): every rounded box has only its top-right corner. Controls (buttons, fields,
   chips, pills, tags, boxes lower than 72 px such as callouts and notes) use --guide-radius-control (20 px), the footer head's bar --guide-radius-bar (1.5 rem); surfaces (cards of every
   kind, panels, the form, media frames, photos) use --guide-radius-surface (40 px on a desktop, 30 px on a phone, a clamp()); circles
   (badges, the round buttons, the map dots) stay circles; a checkbox is square; the mega menu panel and the phone drawer are edge to
   edge and have no corner. A photo frame clips its image, so the image follows the frame. site.css writes no other radius (tested): this
   block overrides the kit's component radii by order (same specificity, loaded later), the rules above set their own. The kit's
   bars drawn with ::before keep their inset and need no corner. The cover photo is not rounded on its own: its hero is. */
.bp-btn, .bp-header__toggle, .bp-pill--unit, .bp-pill--chip, .bp-pill--tag, .bp-btn--soft,
.bp-input, .bp-select, .bp-textarea, .bp-callout--note, .bp-callout--statement, .bp-media__label { border-radius: 0 var(--guide-radius-control) 0 0; }
.bp-btn--link { border-radius: 0; }
.bp-check__input { border-radius: 0; }
.bp-card, .bp-division, .bp-callout--highlight, .bp-step, .bp-numbered, .bp-topic, .bp-audience, .bp-quote-block[data-theme],
.bp-network, .bp-form { border-radius: 0 var(--guide-radius-surface) 0 0; }
.bp-steps--list .bp-step { border-radius: 0; }
main img { border-radius: 0 var(--guide-radius-surface) 0 0; }
.bp-band__cover img { border-radius: 0; }
.bp-media__frame, .bp-hero__media, .bp-audience__media, .bp-cta-band--panel { overflow: hidden; }

/* The guide's grey noise on the grey grounds: the grey sections and the grey cards and panels (every surface whose ground is #F3F3F3).
   It is a background image over the colour (no pseudo-element: the division card and the card bar use ::before). The slogan strip is the
   gradient, not grey. The list variant of the steps has no ground and gets none. */
[data-theme="subtle"]:not(.slogan-strip), .bp-division, .bp-card--lavender, .bp-card--mint, .bp-callout--note, .bp-callout--highlight,
.bp-steps:not(.bp-steps--list) .bp-step, .bp-numbered, .mega-single { background-image: var(--guide-noise); }
/* On a grey section the kit's mint surface is the section's own grey since brand.css (the guide has one grey for lavender and mint), so
   a mint card, numbered item or chip vanished into its ground (owner's request of 10 November 2026, "the boxes on the right are not
   distinct"): on a grey ground each of them takes the kit's raised white of the subtle theme, like the lavender ones beside it, and a white
   surface carries no noise (the noise is for the grey grounds only). */
[data-theme="subtle"] :is(.bp-card--mint, .bp-numbered--mint, .bp-pill--mint) { background-color: var(--surface-raised); }
[data-theme="subtle"] :is(.bp-card--lavender, .bp-card--mint, .bp-numbered) { background-image: none; }

/* ---------- Key visual on /why-bpharma (owner's choice of 10 November 2026) ----------
   The guide's key visual (the slogan and a photo inside the Bpharma B, a transparent picture) stands beside the six cards of
   /why-bpharma (after them on a phone); it is a drawing with its own shape, so it keeps square corners. */
/* the six cards are one column and, from 48rem of the split's own width, two columns (three rows) beside the picture, which gets a
   column of its own width (the kit's own two-column grid needs 40rem inside the half of the split, which it does not have) */
.why-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 48rem) {
  .why-split > .bp-grid__items { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; }
  .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.why-key-visual { margin: 0; max-inline-size: 28rem; justify-self: center; }
.why-key-visual img { display: block; inline-size: 100%; block-size: auto; border-radius: 0; }