/*
 * Bali Kratom Export — "Compliance Dossier" design system.
 *
 * Hand-authored CSS, no build step.
 *
 * The brand is a B2B trade-intelligence desk, not a resort: the site's job
 * is to make dense compliance data (assay panels, HS headings, Incoterm
 * ladders, member-state legality) read as credible and verifiable. So the
 * system borrows from survey reports and herbarium plates rather than
 * travel brochures:
 *
 *   ground      bone paper over a faint graph grid; deep forest ink kept
 *               scarce so it still reads as emphasis
 *   accent      verdigris (oxidised copper-green) used as a hairline, an
 *               underline and a marker — almost never as a fill
 *   geometry    square. Hairline rules with corner ticks. Radii top out at
 *               3px, so nothing reads as a consumer app card
 *   marker      zero-padded station numerals (01, 02 …) set in mono — the
 *               signature device, used for sections, steps and cards alike
 *   numerals    tabular everywhere, so figures align down a column
 *
 * Type: Newsreader (editorial serif) / IBM Plex Sans (body, drawn for
 * technical documentation) / IBM Plex Mono (document codes and data).
 */

/* ==================================================================== */
/*  1. Tokens                                                           */
/* ==================================================================== */
:root {
    /* ground — deep forest ink */
    --ink:        #0d1611;
    --ink-2:      #142019;
    --ink-3:      #1d2d24;
    --ink-4:      #27392f;

    /* paper — bone */
    --paper:      #fbfaf5;
    --bone:       #f2f0e6;
    --bone-deep:  #e6e3d6;

    /* accent — verdigris, oxidised copper-green */
    --verd:       #47806a;
    --verd-light: #6fa88e;
    --verd-dark:  #2f5e4c;
    --verd-wash:  rgba(71, 128, 106, .09);

    /* clay — reserved for status and caution flags only */
    --clay:       #a9552c;
    --clay-wash:  rgba(169, 85, 44, .10);

    /* text on paper */
    --text:       #16211b;
    --text-soft:  #4b574f;
    --text-muted: #77837b;

    /* text on ink */
    --on-ink:       #f0efe6;
    --on-ink-soft:  #b9c4bc;
    --on-ink-muted: #8a978f;

    /* hairlines */
    --rule:        rgba(22, 33, 27, .16);
    --rule-soft:   rgba(22, 33, 27, .08);
    --rule-strong: rgba(22, 33, 27, .30);
    --rule-ink:        rgba(240, 239, 230, .18);
    --rule-ink-soft:   rgba(240, 239, 230, .09);
    --rule-ink-strong: rgba(240, 239, 230, .34);

    --shadow-card: 0 1px 1px rgba(13, 22, 17, .03), 0 10px 28px -16px rgba(13, 22, 17, .16);
    --shadow-lift: 0 22px 48px -24px rgba(13, 22, 17, .34);

    --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* square geometry — nothing here reads as a consumer app card */
    --r-xs: 1px;
    --r-sm: 2px;
    --r:    3px;
    --r-pill: 999px;

    --container: 1240px;
    --measure:   68ch;
    --gutter:    20px;
    --header-h:  72px;

    /* vertical rhythm */
    --band-y:    clamp(3.75rem, 8vw, 7.5rem);
    --band-y-sm: clamp(2.75rem, 5vw, 4.5rem);
}

/* ==================================================================== */
/*  2. Base                                                             */
/* ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
    color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    touch-action: manipulation;
}
button {
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
a { -webkit-tap-highlight-color: rgba(71, 128, 106, .14); }

/* Tabular figures everywhere a number can align down a column. */
table, .bk-num, .bk-idx, .bk-stat__value, .bk-tier__price, .bk-fact__value {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--verd);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
.bk-band--ink :focus-visible,
.bk-footer :focus-visible,
#bk-header :focus-visible,
.bk-drawer__panel :focus-visible { outline-color: var(--verd-light); }

/* Anchored headings must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 1rem; top: -5rem; z-index: 300;
    background: var(--verd); color: #fff;
    padding: .7rem 1.25rem; font-weight: 600; font-size: .875rem;
    border-radius: var(--r-sm);
    transition: top .18s ease;
}
.skip-link:focus { top: 1rem; }

::selection { background: var(--verd); color: #fff; }

/* ==================================================================== */
/*  3. Typography                                                       */
/* ==================================================================== */
.bk-h1, .bk-h2, .bk-h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.1;
    text-wrap: balance;
    font-optical-sizing: auto;
}

.bk-h1 { font-size: clamp(2.125rem, 1.35rem + 3.4vw, 4rem); line-height: 1.04; }
.bk-h2 { font-size: clamp(1.625rem, 1.15rem + 2.1vw, 2.75rem); }
.bk-h3 { font-size: clamp(1.125rem, 1rem + .6vw, 1.4rem); line-height: 1.25; letter-spacing: -.01em; }

/* The verdigris accent inside a heading: an underline, never a fill. */
.bk-h1 em, .bk-h2 em, .bk-h3 em {
    font-style: italic;
    color: var(--verd-dark);
    box-shadow: inset 0 -.08em 0 var(--verd-light);
}
.bk-band--ink .bk-h1 em,
.bk-band--ink .bk-h2 em,
.bk-band--ink .bk-h3 em {
    color: var(--verd-light);
    box-shadow: inset 0 -.08em 0 rgba(111, 168, 142, .5);
}

/* Eyebrow / kicker — mono, tracked out, with a leading rule. */
.bk-eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--verd-dark);
    display: flex;
    align-items: center;
    gap: .7rem;
}
.bk-eyebrow::before {
    content: '';
    width: 1.75rem; height: 1px; flex: none;
    background: currentColor;
    opacity: .55;
}
.bk-band--ink .bk-eyebrow, .bk-footer .bk-eyebrow { color: var(--verd-light); }

/* Station numeral — the signature marker. */
.bk-idx {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--verd-dark);
}
.bk-idx::before { content: '/'; opacity: .45; margin-right: .1em; }
.bk-band--ink .bk-idx { color: var(--verd-light); }

.bk-lede {
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 60ch;
}
.bk-band--ink .bk-lede { color: var(--on-ink-soft); }

.bk-intro {
    color: var(--text-soft);
    max-width: var(--measure);
}
.bk-band--ink .bk-intro { color: var(--on-ink-soft); }

/* Small print: the "indicative, as of 2026" qualifier under every data
   block. Central to the brand's honesty, so it has a real style. */
.bk-note {
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.55;
    color: var(--text-muted);
    letter-spacing: .005em;
}
.bk-band--ink .bk-note { color: var(--on-ink-muted); }
.bk-note--rule {
    border-top: 1px solid var(--rule-soft);
    padding-top: .875rem;
    margin-top: 1.5rem;
}
.bk-band--ink .bk-note--rule { border-top-color: var(--rule-ink-soft); }

/* ==================================================================== */
/*  4. Layout                                                           */
/* ==================================================================== */
.bk-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}
.bk-container--narrow { max-width: 880px; }

.bk-band {
    position: relative;
    padding-block: var(--band-y);
}
.bk-band--paper { background: var(--paper); color: var(--text); }
.bk-band--bone  { background: var(--bone);  color: var(--text); }
.bk-band--ink   { background: var(--ink);   color: var(--on-ink); }

/* Survey-paper grid: a 28px graph grid at very low opacity, so the light
   bands read as drafting paper rather than flat colour. */
.bk-band--paper::before,
.bk-band--bone::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .5;
    mask-image: radial-gradient(130% 90% at 50% 0%, #000 12%, transparent 72%);
    -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 12%, transparent 72%);
}
.bk-band > .bk-container { position: relative; }

/* A hairline between two same-tone bands, so the seam is deliberate.
   Two ink bands in a row (hero then passport, say) would otherwise merge
   into one dark field with a large unexplained void at the join, so they
   also get the seam and a tighter top padding. */
.bk-band--bone + .bk-band--bone,
.bk-band--paper + .bk-band--paper { border-top: 1px solid var(--rule-soft); }

.bk-band--ink + .bk-band--ink {
    border-top: 1px solid var(--rule-ink-soft);
    padding-top: var(--band-y-sm);
}

/* Section heading block */
.bk-heading-block { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.bk-heading-block > * + * { margin-top: .875rem; }
.bk-heading-block--wide { max-width: none; }
.bk-heading-block--center { margin-inline: auto; text-align: center; }
.bk-heading-block--center .bk-eyebrow { justify-content: center; }
.bk-heading-block--center .bk-lede,
.bk-heading-block--center .bk-intro { margin-inline: auto; }

/* Grids */
.bk-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.bk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) { .bk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .bk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  {
    .bk-grid--2, .bk-grid--3, .bk-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================== */
/*  5. Primitives                                                       */
/* ==================================================================== */

/* -- buttons -------------------------------------------------------- */
.bk-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border-radius: var(--r-sm);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .005em;
    border: 1px solid transparent;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    will-change: transform;
}
.bk-btn:active { transform: translateY(1px); }
.bk-btn i { font-size: 1.0625em; }

.bk-btn--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.bk-btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); }

.bk-btn--verd { background: var(--verd-dark); color: #fff; border-color: var(--verd-dark); }
.bk-btn--verd:hover { background: var(--verd); border-color: var(--verd); }

.bk-btn--bone { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.bk-btn--bone:hover { background: #fff; border-color: #fff; }

.bk-btn--ghost { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.bk-btn--ghost:hover { border-color: var(--ink); background: var(--verd-wash); }

.bk-btn--ghost-bone { background: transparent; color: var(--on-ink); border-color: var(--rule-ink-strong); }
.bk-btn--ghost-bone:hover { border-color: var(--on-ink); background: rgba(240, 239, 230, .08); }

.bk-btn--sm { padding: .6rem 1.05rem; font-size: .8125rem; }

.bk-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* Arrow link — the quiet tertiary action. */
.bk-link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--verd-dark);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--verd-wash);
    transition: border-color .18s ease, color .18s ease;
}
.bk-link-arrow:hover { border-bottom-color: var(--verd); color: var(--verd-dark); }
.bk-link-arrow span { transition: transform .18s ease; display: inline-block; }
.bk-link-arrow:hover span { transform: translateX(3px); }
.bk-band--ink .bk-link-arrow { color: var(--verd-light); border-bottom-color: rgba(111, 168, 142, .22); }
.bk-band--ink .bk-link-arrow:hover { border-bottom-color: var(--verd-light); }

/* -- chips ---------------------------------------------------------- */
.bk-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .5);
}
.bk-chip--verd { color: var(--verd-dark); border-color: rgba(71, 128, 106, .35); background: var(--verd-wash); }
.bk-chip--clay { color: var(--clay); border-color: rgba(169, 85, 44, .32); background: var(--clay-wash); }
.bk-band--ink .bk-chip {
    color: var(--on-ink-soft);
    border-color: var(--rule-ink);
    background: rgba(240, 239, 230, .05);
}

/* -- cards ---------------------------------------------------------- */
.bk-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bk-band--bone .bk-card { background: #fff; }
.bk-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card); }
.bk-band--ink .bk-card {
    background: var(--ink-2);
    border-color: var(--rule-ink);
}
.bk-band--ink .bk-card:hover { border-color: var(--rule-ink-strong); }

.bk-card__body { padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.bk-card__body > * + * { margin-top: .625rem; }

.bk-card__icon {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--verd-dark);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.bk-band--ink .bk-card__icon { border-color: var(--rule-ink); color: var(--verd-light); }

.bk-card__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.bk-card__text { font-size: .9375rem; color: var(--text-soft); overflow-wrap: break-word; }
.bk-band--ink .bk-card__text { color: var(--on-ink-soft); }

.bk-card__meta {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
}

.bk-card__media { display: block; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: var(--bone-deep); }
.bk-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s cubic-bezier(.25,.8,.25,1); }
.bk-card:hover .bk-card__media img { transform: scale(1.03); }

/* A card whose top edge carries its station numeral in the border gap. */
.bk-card--indexed .bk-card__body { padding-top: 1.5rem; }
.bk-card--indexed .bk-idx { display: block; margin-bottom: .875rem; }

/* Photographic plate: the card shell with a picture on top. The figure/
   figcaption pair carries no default margin here, and the media span has to
   be a block for the shared .bk-card__media rules to apply to it. */
.bk-card--plate { margin: 0; display: flex; flex-direction: column; }
.bk-card--plate > .bk-card__media { display: block; }
.bk-card--plate .bk-card__body { margin: 0; }
.bk-card--plate .bk-idx { margin-bottom: .5rem; }

/* One wide plate between two data bands. 21:9 keeps it a breather rather
   than a second hero, and it drops to 3:2 on a phone so the subject still
   reads at thumb width. */
.bk-figure { margin: 0; }
.bk-figure img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--rule);
    display: block;
}
.bk-figure__caption {
    margin-top: .875rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 68ch;
}
.bk-band--ink .bk-figure img { border-color: var(--rule-ink); }
.bk-band--ink .bk-figure__caption { color: var(--on-ink-soft); }
@media (max-width: 639px) {
    .bk-figure img { aspect-ratio: 3 / 2; }
}

/* -- corner-ticked panel: the survey-document frame ----------------- */
.bk-panel {
    position: relative;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--paper);
    padding: clamp(1.25rem, 3vw, 2.25rem);
}
.bk-band--bone .bk-panel { background: #fff; }
.bk-band--ink .bk-panel { background: var(--ink-2); border-color: var(--rule-ink); }

.bk-panel--ticked::before,
.bk-panel--ticked::after {
    content: '';
    position: absolute;
    width: 9px; height: 9px;
    border: 1px solid var(--verd);
    pointer-events: none;
}
.bk-panel--ticked::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bk-panel--ticked::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* -- tables --------------------------------------------------------- */
.bk-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background: var(--paper);
    -webkit-overflow-scrolling: touch;
}
.bk-band--bone .bk-table-wrap { background: #fff; }

.bk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 640px;
}
.bk-table caption {
    text-align: left;
    padding: 1rem 1.25rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verd-dark);
    border-bottom: 1px solid var(--rule);
}
.bk-table th, .bk-table td {
    padding: .875rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule-soft);
}
.bk-table thead th {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bone);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.bk-table tbody tr:last-child th,
.bk-table tbody tr:last-child td { border-bottom: 0; }
.bk-table tbody tr:hover { background: var(--verd-wash); }
.bk-table tbody th { font-weight: 600; color: var(--text); }
.bk-table td { color: var(--text-soft); }
.bk-table .bk-td-num { font-family: var(--font-mono); font-size: .8125rem; color: var(--text); white-space: nowrap; }

/* ==================================================================== */
/*  6. Header                                                           */
/* ==================================================================== */

/* Utility bar — the thin document header above the masthead. */
.bk-utility {
    background: var(--ink);
    color: var(--on-ink-muted);
    border-bottom: 1px solid var(--rule-ink-soft);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .05em;
}
.bk-utility__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: .5rem max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.bk-utility__group { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.bk-utility__group > * { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.bk-utility a { transition: color .18s ease; }
.bk-utility a:hover { color: var(--on-ink); }
.bk-utility i { color: var(--verd-light); font-size: .875rem; }

@media (max-width: 900px) {
    .bk-utility__inner { justify-content: center; }
    .bk-utility__group--meta { display: none; }
}
@media (max-width: 520px) { .bk-hide-sm { display: none !important; } }

/* Masthead */
#bk-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(13, 22, 17, .94);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--rule-ink-soft);
    color: var(--on-ink);
    transition: border-color .2s ease, background-color .2s ease;
}
#bk-header.is-stuck { border-bottom-color: var(--rule-ink); }

.bk-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
    min-height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* Three explicit tracks rather than a flex row, so the nav sits centred on
   the bar itself instead of hanging off the right edge of the wordmark.
   The side tracks are equal, which is what puts the middle one on the
   container's centre line whatever the logo and the quote button measure. */
.bk-header__brand { grid-column: 1; justify-self: start; }
.bk-nav-primary   { grid-column: 2; justify-self: center; }
.bk-header__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* Logo + wordmark */
.bk-logo img { width: auto; max-height: 2.5rem; object-fit: contain; }
.bk-logo--footer img { max-height: 3rem; }

/* Requirement: the footer mark must read on the dark ground. A logo
   uploaded only once (site_logo) is rendered white here via a filter;
   uploading a purpose-made light mark (site_logo_footer) skips the filter,
   because a real white logo always beats a filtered one. */
.bk-logo--invert img { filter: brightness(0) invert(1); }

.bk-wordmark { display: inline-flex; align-items: center; gap: .625rem; }
.bk-wordmark__mark {
    width: 1.875rem; height: 1.875rem;
    display: grid; place-items: center;
    border: 1px solid var(--verd);
    border-radius: var(--r-sm);
    color: var(--verd-light);
    font-size: 1rem;
    flex: none;
}
.bk-wordmark__text {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.1;
    white-space: nowrap;
}
.bk-wordmark__text em { font-style: italic; color: var(--verd-light); }
.bk-wordmark--footer .bk-wordmark__text { font-size: 1.375rem; }
.bk-wordmark--footer .bk-wordmark__mark { width: 2.125rem; height: 2.125rem; font-size: 1.125rem; }

/* Primary nav */
.bk-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.bk-nav > li { position: relative; }
.bk-nav a, .bk-nav__trigger {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-ink-soft);
    white-space: nowrap;
    transition: color .18s ease;
    border-bottom: 1px solid transparent;
}
.bk-nav a:hover, .bk-nav__trigger:hover,
.bk-nav__trigger[aria-expanded="true"] { color: var(--on-ink); border-bottom-color: var(--verd-light); }
.bk-nav__trigger i { font-size: .875rem; transition: transform .2s ease; }
.bk-nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.bk-nav .current-menu-item > a,
.bk-nav .current_page_item > a { color: var(--on-ink); border-bottom-color: var(--verd-light); }

/* The column holding the page you are on stays marked in the bar, so the
   nav answers "where am I" before anything is opened. */
.bk-nav__has-panel--current > .bk-nav__trigger { color: var(--on-ink); border-bottom-color: var(--verd); }

/* Mega-panel: the site is a reference library, so grouped columns rather
   than a flat bar. */
.bk-nav__panel {
    position: absolute;
    top: calc(100% + .875rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 19rem;
    max-width: min(26rem, calc(100vw - 2rem));
    background: var(--ink-2);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r);
    box-shadow: var(--shadow-lift);
    padding: .5rem;
    z-index: 110;
}
.bk-nav__panel[hidden] { display: none; }

/* The panel floats a little below its trigger, and that gap is dead space:
   a pointer crossing it is inside neither, which fires mouseleave and makes
   the menu feel like it is running away. This invisible bridge spans the
   gap (plus a little to each side for a diagonal approach), so the pointer
   stays within the item the whole way down. */
.bk-nav__panel::before {
    content: '';
    position: absolute;
    left: -.75rem;
    right: -.75rem;
    top: calc(-.875rem - 2px);
    height: calc(.875rem + 4px);
}

/* The trigger keeps its hover styling while its panel is open, so the bar
   still shows which column you are in. */
.bk-nav__has-panel:hover > .bk-nav__trigger { color: var(--on-ink); border-bottom-color: var(--verd-light); }
.bk-nav__panel ul { display: grid; gap: 1px; max-height: min(70vh, 32rem); overflow-y: auto; overscroll-behavior: contain; }
.bk-nav__panel a {
    display: block;
    padding: .55rem .75rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    border-radius: var(--r-sm);
    border-bottom: 0;
    color: var(--on-ink-soft);
}
.bk-nav__panel a:hover { background: var(--ink-4); color: var(--on-ink); border-bottom: 0; }
.bk-nav__panel a[aria-current="page"],
.bk-mnav a[aria-current="page"] {
    color: var(--on-ink);
    background: var(--ink-4);
    box-shadow: inset 2px 0 0 var(--verd-light);
}

/* WordPress-menu dropdowns, when an editor assigns a real menu. */
.bk-nav .sub-menu {
    position: absolute; top: calc(100% + .875rem); left: 0;
    min-width: 15rem;
    background: var(--ink-2);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r);
    box-shadow: var(--shadow-lift);
    padding: .5rem;
    display: grid; gap: 1px;
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 110;
}
.bk-nav li:hover > .sub-menu,
.bk-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.bk-nav .sub-menu a {
    display: block; padding: .5rem .75rem; font-size: .8125rem;
    white-space: normal; border-radius: var(--r-sm); border-bottom: 0;
}
.bk-nav .sub-menu a:hover { background: var(--ink-4); color: var(--on-ink); }

/* Burger */
.bk-burger {
    display: none;
    width: 2.5rem; height: 2.5rem;
    place-items: center;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    color: var(--on-ink);
    font-size: 1.25rem;
}
.bk-burger:hover { border-color: var(--rule-ink-strong); }

@media (max-width: 1100px) {
    .bk-nav-primary { display: none; }
    .bk-burger { display: grid; }

    /* With the nav gone the middle track has nothing to hold, so drop it
       rather than leave an empty column and its gap between the wordmark
       and the burger. */
    .bk-header__inner { grid-template-columns: 1fr auto; }
    .bk-header__actions { grid-column: 2; }
}

/* Just above the drawer breakpoint the bar is at its tightest: wordmark,
   four standalone links, five panel triggers and the quote button. Pull the
   type and the gaps in through that band so the row never wraps or clips —
   below 1101px the drawer takes over and this stops applying. */
@media (min-width: 1101px) and (max-width: 1319px) {
    .bk-header__inner { gap: 1rem; }
    .bk-nav { gap: .625rem; }
    .bk-nav a, .bk-nav__trigger { font-size: .8125rem; }
    .bk-nav__trigger { gap: .15rem; }
}
@media (max-width: 420px) { .bk-header__actions .bk-btn { display: none; } }

/* ==================================================================== */
/*  7. Mobile drawer                                                    */
/* ==================================================================== */
#bk-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
#bk-drawer.is-open { visibility: visible; }

.bk-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(13, 22, 17, .6);
    opacity: 0;
    transition: opacity .25s ease;
}
#bk-drawer.is-open .bk-drawer__backdrop { opacity: 1; }

.bk-drawer__panel {
    position: absolute; inset-block: 0; right: 0;
    width: min(26rem, 92vw);
    background: var(--ink);
    color: var(--on-ink);
    border-left: 1px solid var(--rule-ink);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.25, .8, .25, 1);
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
}
#bk-drawer.is-open .bk-drawer__panel { transform: none; }

.bk-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--rule-ink-soft);
    flex: none;
}
.bk-drawer__close {
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    font-size: 1.125rem;
}
.bk-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--gutter) 1rem; }
.bk-drawer__foot {
    flex: none;
    padding: 1rem var(--gutter) 1.25rem;
    border-top: 1px solid var(--rule-ink-soft);
}
.bk-drawer__foot .bk-btn { width: 100%; justify-content: center; }

.bk-mnav__flat { display: grid; gap: 1px; padding-block: .5rem; }
.bk-mnav__flat a, .bk-mnav__group summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    padding: .8rem .25rem;
    font-size: .9375rem;
    font-weight: 500;
    border-bottom: 1px solid var(--rule-ink-soft);
}
.bk-mnav__group summary { cursor: pointer; list-style: none; }
.bk-mnav__group summary::-webkit-details-marker { display: none; }
.bk-mnav__group summary i { color: var(--verd-light); transition: transform .2s ease; }
.bk-mnav__group[open] summary i { transform: rotate(45deg); }
.bk-mnav__group ul { padding: .5rem 0 .875rem .25rem; display: grid; gap: 1px; }
.bk-mnav__group ul a {
    display: block;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--on-ink-soft);
    border-left: 1px solid var(--rule-ink);
}
.bk-mnav__group ul a:hover { color: var(--on-ink); border-left-color: var(--verd-light); }

/* WordPress menu inside the drawer */
.bk-mnav--wp ul { display: grid; gap: 1px; }
.bk-mnav--wp a {
    display: block; padding: .8rem .25rem; font-size: .9375rem; font-weight: 500;
    border-bottom: 1px solid var(--rule-ink-soft);
}
.bk-mnav--wp .sub-menu { padding-left: .75rem; }
.bk-mnav--wp .sub-menu a { font-size: .875rem; font-weight: 400; color: var(--on-ink-soft); }

/* ==================================================================== */
/*  8. Hero                                                             */
/* ==================================================================== */
.bk-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 3rem);
}

/* Photograph bled off the right edge, veiled so the headline always wins
   the contrast fight. */
.bk-hero__bg {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
}
.bk-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .3;
}
.bk-hero__bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, var(--ink) 18%, rgba(13, 22, 17, .82) 52%, rgba(13, 22, 17, .58) 100%),
        linear-gradient(to top, var(--ink) 2%, transparent 38%);
}

.bk-hero__inner { position: relative; z-index: 1; }

.bk-hero__head { max-width: 58rem; }
/* The breadcrumb sits directly above the hero stamp, so it needs its own
   gap or the two read as one block. */
.bk-hero .bk-breadcrumb + .bk-hero__head,
.bk-hero__inner > .bk-breadcrumb + .bk-hero__head { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.bk-hero__head > * + * { margin-top: clamp(1rem, 2vw, 1.5rem); }

.bk-hero__title { font-size: clamp(2.125rem, 1.1rem + 4.2vw, 4.25rem); }

/* Document stamp: the "informational publication" disclaimer the brand
   leads with on every page. */
.bk-hero__stamp {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .75rem;
    border: 1px dashed rgba(111, 168, 142, .45);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--verd-light);
}

/* Four-column fact strip under the hero copy — the reference layout's
   meta-strip, set as a ruled ledger rather than cards. */
.bk-hero__facts {
    margin-top: clamp(1.75rem, 3.5vw, 3rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--rule-ink);
}
.bk-fact {
    padding: 1.25rem 1.25rem 0 0;
    border-right: 1px solid var(--rule-ink-soft);
}
.bk-fact:last-child { border-right: 0; }
.bk-fact__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--on-ink);
}
.bk-fact__label {
    display: block;
    margin-top: .375rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .bk-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .bk-fact { padding-right: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-ink-soft); }
    .bk-fact:nth-child(2n) { border-right: 0; }
    .bk-fact:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 767px) {
    /* Pull the primary action closer to the fold without truncating a
       single word of the lede. */
    .bk-hero__head > * + * { margin-top: .875rem; }
    .bk-hero .bk-lede { font-size: .9375rem; line-height: 1.5; }
    .bk-hero__stamp { font-size: .625rem; letter-spacing: .06em; padding: .35rem .6rem; }
    .bk-hero__title { line-height: 1.08; }
    .bk-btn-row .bk-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 420px) {
    .bk-hero__bg img { opacity: .22; }
    .bk-hero .bk-lede { font-size: .9rem; }
}

/* Page header for unrouted pages, blog, search, 404 */
.bk-pagehead { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.bk-pagehead > .bk-container > * + * { margin-top: 1rem; }

.bk-breadcrumb { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.bk-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--on-ink-muted); }
.bk-breadcrumb a { color: var(--verd-light); }
.bk-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bk-breadcrumb [aria-current="page"] { color: var(--on-ink-soft); }
.bk-band--paper .bk-breadcrumb ol, .bk-band--bone .bk-breadcrumb ol { color: var(--text-muted); }
.bk-band--paper .bk-breadcrumb a, .bk-band--bone .bk-breadcrumb a { color: var(--verd-dark); }

.bk-404 { text-align: center; }
.bk-404 > .bk-container > * + * { margin-top: 1.25rem; }
.bk-404 .bk-eyebrow { justify-content: center; }
.bk-404 .bk-lede { margin-inline: auto; }
.bk-404 .bk-btn-row { justify-content: center; }
.bk-404 .bk-searchform { max-width: 26rem; margin-inline: auto; }

/* ==================================================================== */
/*  9. Answer — the AEO block an answer engine quotes                   */
/* ==================================================================== */
.bk-answer__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* No supporting points on this page: one column, rather than a wide
   empty gutter beside the answer. */
.bk-answer__panel--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .bk-answer__panel { grid-template-columns: minmax(0, 1fr); } }

.bk-answer__text {
    font-family: var(--font-display);
    font-size: clamp(1.1875rem, 1.05rem + .8vw, 1.5rem);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -.008em;
    color: var(--text);
    max-width: 46ch;
    text-wrap: pretty;
}
/* A verdigris rule to the left, like a margin mark in a reviewed document. */
.bk-answer__quote { border-left: 2px solid var(--verd); padding-left: clamp(1rem, 2.5vw, 1.75rem); }

.bk-answer__points { display: grid; gap: .75rem; }
.bk-answer__points li {
    display: flex; gap: .625rem;
    font-size: .9375rem;
    color: var(--text-soft);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule-soft);
}
.bk-answer__points li:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-answer__points i { color: var(--verd); flex: none; margin-top: .25rem; font-size: .9375rem; }

/* ==================================================================== */
/* 10. Stations — the provenance line, six stations / six documents     */
/* ==================================================================== */
.bk-stations { display: grid; gap: 0; counter-reset: station; }
.bk-station {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--rule);
}
.bk-station:last-child { border-bottom: 1px solid var(--rule); }

/* The numeral sits in its own column, with a vertical rail joining the
   stations into one continuous line. */
.bk-station__num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--verd-dark);
    position: relative;
    padding-right: 1rem;
}
.bk-station__num::after {
    content: '';
    position: absolute;
    right: 0; top: .25rem;
    width: 1px; height: calc(100% + 3rem);
    background: var(--rule);
}
.bk-station:last-child .bk-station__num::after { display: none; }

.bk-station__title { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 500; letter-spacing: -.01em; }
.bk-station__text { font-size: .9375rem; color: var(--text-soft); margin-top: .375rem; }
.bk-station__aside { display: grid; gap: .625rem; justify-items: start; }
.bk-station__doc {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex; gap: .4rem; align-items: baseline;
}
.bk-station__doc strong { color: var(--verd-dark); font-weight: 500; }

@media (max-width: 899px) {
    .bk-station { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem 1.25rem; }
    .bk-station__num { font-size: 1.25rem; padding-right: .75rem; }
    .bk-station__aside { grid-column: 2; }
}

/* ==================================================================== */
/* 11. Data table section (assay panel)                                 */
/* ==================================================================== */
.bk-datatable__sources {
    margin-top: 1.25rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
}

/* ==================================================================== */
/* 12. Spec bands                                                       */
/* ==================================================================== */
.bk-spec { display: flex; flex-direction: column; }
.bk-spec__head {
    padding: 1.125rem clamp(1.125rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--rule);
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.bk-spec__name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em; }
.bk-spec__rows { display: grid; }
.bk-spec__row {
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: .7rem clamp(1.125rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--rule-soft);
    font-size: .875rem;
}
.bk-spec__row dt { color: var(--text-muted); }
.bk-spec__row dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bk-spec__note {
    margin-top: auto;
    padding: .875rem clamp(1.125rem, 2vw, 1.5rem) 1.125rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--bone);
}
.bk-band--bone .bk-spec__note { background: var(--bone-deep); }

/* ==================================================================== */
/* 13. Incoterm ladder + routes                                         */
/* ==================================================================== */
.bk-ladder { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 899px) { .bk-ladder { grid-template-columns: minmax(0, 1fr); } }

.bk-ladder__title, .bk-routes__title {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verd-dark);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: .25rem;
}

/* Each rung indents one step further, so the ladder reads as a ladder. */
.bk-rung {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: .875rem;
    align-items: baseline;
    padding: .75rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.bk-rung__code {
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--verd-dark);
}
.bk-rung__text { font-size: .875rem; color: var(--text-soft); }
.bk-rung:nth-child(2) { padding-left: .5rem; }
.bk-rung:nth-child(3) { padding-left: 1rem; }
.bk-rung:nth-child(4) { padding-left: 1.5rem; }
.bk-rung:nth-child(5) { padding-left: 2rem; }
.bk-rung:nth-child(6) { padding-left: 2.5rem; }
@media (max-width: 479px) {
    .bk-rung, .bk-rung:nth-child(n) { padding-left: 0; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* ==================================================================== */
/* 14. Legality — member-state status chips                             */
/* ==================================================================== */
.bk-legality__banner {
    display: flex; gap: .875rem; align-items: flex-start;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(169, 85, 44, .4);
    border-left-width: 2px;
    border-radius: var(--r-sm);
    background: rgba(169, 85, 44, .12);
    color: var(--on-ink-soft);
    font-size: .9375rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    max-width: 72ch;
}
.bk-legality__banner i { color: #d98a5c; flex: none; margin-top: .2rem; font-size: 1.125rem; }

.bk-legality__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--rule-ink-soft); border: 1px solid var(--rule-ink-soft); border-radius: var(--r); overflow: hidden; }
.bk-legal {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: .875rem;
    align-items: center;
    padding: 1rem 1.125rem;
    background: var(--ink);
}
.bk-legal__iso {
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--verd-light);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    padding: .3rem 0;
    text-align: center;
}
.bk-legal__name { font-size: .9375rem; font-weight: 500; color: var(--on-ink); }
.bk-legal__status {
    display: block;
    margin-top: .2rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .05em;
    color: var(--on-ink-muted);
    line-height: 1.4;
}

/* ==================================================================== */
/* 15. Split — asymmetric editorial spread                              */
/* ==================================================================== */
.bk-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: start;
}
.bk-split--flip .bk-split__media { order: -1; }
@media (max-width: 899px) {
    .bk-split { grid-template-columns: minmax(0, 1fr); }
    .bk-split--flip .bk-split__media { order: 0; }
}

.bk-split__body > * + * { margin-top: 1.125rem; }
.bk-split__body p { color: var(--text-soft); max-width: 56ch; }
.bk-band--ink .bk-split__body p { color: var(--on-ink-soft); }

.bk-split__list { display: grid; gap: .625rem; margin-top: 1.5rem; }
.bk-split__list li { display: flex; gap: .625rem; font-size: .9375rem; color: var(--text-soft); }
.bk-split__list i { color: var(--verd); flex: none; margin-top: .25rem; }

.bk-split__media { position: relative; }
.bk-split__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--rule);
}
.bk-split__caption {
    margin-top: .75rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .05em;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Without a photograph the panel becomes a decorative plate: the station
   grid drawn in verdigris hairlines, so the layout never collapses. */
.bk-plate {
    aspect-ratio: 4 / 5;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    background:
        repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 2.25rem),
        radial-gradient(circle at 70% 25%, var(--verd-wash), transparent 55%),
        var(--bone);
    display: grid;
    place-items: center;
    color: var(--verd);
    font-size: clamp(3rem, 8vw, 5rem);
    opacity: .9;
}
.bk-band--bone .bk-plate { background:
        repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 2.25rem),
        radial-gradient(circle at 70% 25%, var(--verd-wash), transparent 55%),
        var(--paper); }

/* ==================================================================== */
/* 16. Steps — vertical timeline                                        */
/* ==================================================================== */
.bk-steps { display: grid; gap: 0; }
.bk-step {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--rule);
}
.bk-step:last-child { border-bottom: 1px solid var(--rule); }
.bk-step__num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--verd-dark);
    position: relative;
    padding-right: 1rem;
}
.bk-step__num::after {
    content: '';
    position: absolute; right: 0; top: .25rem;
    width: 1px; height: calc(100% + 3rem);
    background: var(--rule);
}
.bk-step:last-child .bk-step__num::after { display: none; }
.bk-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .875rem; }
.bk-step__title { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 500; letter-spacing: -.01em; }
.bk-step__window {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--verd-dark);
    border: 1px solid rgba(71, 128, 106, .3);
    border-radius: var(--r-sm);
    padding: .2rem .45rem;
}
.bk-step__text { font-size: .9375rem; color: var(--text-soft); margin-top: .5rem; max-width: 62ch; }

@media (max-width: 639px) {
    .bk-step { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
    .bk-step__num { font-size: 1.25rem; padding-right: .75rem; }
}

/* ==================================================================== */
/* 17. Tiers — rate card / order tiers                                  */
/* ==================================================================== */
.bk-tiers { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.bk-tier {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: clamp(.75rem, 2.5vw, 2rem);
    align-items: center;
    padding-block: clamp(1.125rem, 2.2vw, 1.5rem);
    border-bottom: 1px solid var(--rule);
    transition: background-color .18s ease;
}
.bk-tier:hover { background: var(--verd-wash); }
.bk-tier__name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em; }
.bk-tier__code {
    display: block; margin-top: .25rem;
    font-family: var(--font-mono); font-size: .6875rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.bk-tier__price { font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 500; color: var(--verd-dark); white-space: nowrap; }
.bk-tier__unit { display: block; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: .2rem; }
.bk-tier__text { font-size: .875rem; color: var(--text-soft); }
.bk-tier__badge {
    display: inline-block;
    font-family: var(--font-mono); font-size: .625rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--verd-dark);
    padding: .2rem .45rem; border-radius: var(--r-sm);
    margin-left: .5rem; vertical-align: middle;
}
@media (max-width: 899px) {
    .bk-tier { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
    .bk-tier__text { grid-column: 1 / -1; }
    .bk-tier__cta { grid-column: 1 / -1; }
}

/* ==================================================================== */
/* 18. Compare table                                                    */
/* ==================================================================== */
.bk-compare__highlight { background: var(--verd-wash); }
.bk-table th.bk-compare__col-b { color: var(--verd-dark); }

/* ==================================================================== */
/* 19. Stats                                                            */
/* ==================================================================== */
.bk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.bk-stat { padding: clamp(1.25rem, 3vw, 2rem) 1.25rem clamp(1.25rem, 3vw, 2rem) 0; border-right: 1px solid var(--rule-soft); }
.bk-stat:last-child { border-right: 0; }
.bk-stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
}
.bk-stat__unit { font-size: .5em; color: var(--verd-dark); margin-left: .15em; }
.bk-stat__label {
    margin-top: .625rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.45;
}
@media (max-width: 767px) {
    .bk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-stat { padding-right: 1rem; border-bottom: 1px solid var(--rule-soft); }
    .bk-stat:nth-child(2n) { border-right: 0; }
    .bk-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ==================================================================== */
/* 20. FAQ                                                              */
/* ==================================================================== */
.bk-faq { border-top: 1px solid var(--rule); }
.bk-faq-item { border-bottom: 1px solid var(--rule); }
.bk-faq-item__q {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
    padding: clamp(1rem, 2vw, 1.25rem) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.008em;
    transition: color .18s ease;
}
.bk-faq-item__q::-webkit-details-marker { display: none; }
.bk-faq-item__q:hover { color: var(--verd-dark); }
.bk-faq-item__q i {
    flex: none;
    margin-top: .2rem;
    color: var(--verd-dark);
    font-size: 1rem;
    transition: transform .2s ease;
}
.bk-faq-item[open] .bk-faq-item__q i { transform: rotate(45deg); }
.bk-faq-item__a {
    padding-bottom: 1.25rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: var(--measure);
}
.bk-band--ink .bk-faq, .bk-band--ink .bk-faq-item { border-color: var(--rule-ink); }
.bk-band--ink .bk-faq-item__a { color: var(--on-ink-soft); }

/* Categorised FAQ hub: tab pills over panels (the reference layout's FAQ
   pattern), falling back to anchor navigation without JavaScript. */
.bk-faqg__tabs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.bk-faqg__tab {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-soft);
    background: transparent;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.bk-faqg__tab:hover { border-color: var(--rule-strong); color: var(--text); }
.bk-faqg__tab[aria-selected="true"] {
    background: var(--ink); color: var(--on-ink); border-color: var(--ink);
}
.bk-faqg__tab i { font-size: .9375rem; color: var(--verd); }
.bk-faqg__tab[aria-selected="true"] i { color: var(--verd-light); }
.bk-faqg__count {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .04em;
    opacity: .72;
}

.bk-faqg__group + .bk-faqg__group { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.bk-faqg__group-title {
    display: flex; align-items: center; gap: .625rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verd-dark);
    margin-bottom: 1rem;
}

/* With JS on, the tabs become real tabs and inactive panels are hidden. */
.bk-faqg.is-tabbed .bk-faqg__group[hidden] { display: none; }
.bk-faqg.is-tabbed .bk-faqg__group + .bk-faqg__group { margin-top: 0; }
.bk-faqg.is-tabbed .bk-faqg__group-title { display: none; }
/* With the group titles hidden, the tab strip's bottom rule and the
   accordion's top rule would stack into a double hairline. */
.bk-faqg.is-tabbed .bk-faqg__tabs { border-bottom: 0; margin-bottom: 0; }

/* ==================================================================== */
/* 21. Directory — the grouped page index                               */
/* ==================================================================== */
.bk-dir { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.bk-dir--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .bk-dir--columns { grid-template-columns: minmax(0, 1fr); } }

.bk-dir__group { min-width: 0; }

/* The group header: index + label on the left, page count on the right.
   Baseline-aligned so the count sits on the label's line, not below it. */
.bk-dir__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--rule);
}
.bk-band--ink .bk-dir__head { border-bottom-color: var(--rule-ink); }
.bk-dir__title {
    display: flex; align-items: baseline; gap: .625rem;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--verd-dark);
}
.bk-band--ink .bk-dir__title { color: var(--on-ink); }
.bk-dir__count {
    flex: none;
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.bk-band--ink .bk-dir__count { color: var(--on-ink-muted); }

.bk-dir__list { display: grid; }
.bk-dir__list a {
    display: flex; align-items: baseline; gap: .625rem;
    padding: .7rem 0;
    font-size: .9375rem;
    color: var(--text-soft);
    border-bottom: 1px solid var(--rule-soft);
    transition: color .18s ease, padding-left .18s ease;
}
.bk-dir__list a:hover { color: var(--verd-dark); padding-left: .375rem; }
.bk-dir__list i { color: var(--verd); font-size: .875rem; flex: none; }
.bk-band--ink .bk-dir__list a { color: var(--on-ink-soft); border-bottom-color: var(--rule-ink-soft); }
.bk-band--ink .bk-dir__list a:hover { color: var(--on-ink); }

/* ---- stacked: full-width rows, links flowing into as many columns as fit.
   This is what lets a 22-link group sit beside a 1-link one without either
   looking broken: the long group fills three columns, the short one takes a
   single row, and both keep the same rhythm. */
.bk-dir--stacked { gap: 0; }
.bk-dir--stacked .bk-dir__group { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--rule-soft); }
.bk-dir--stacked .bk-dir__group:first-child { padding-top: 0; border-top: 0; }
.bk-dir--stacked .bk-dir__group:last-child { padding-bottom: 0; }
.bk-dir--stacked .bk-dir__head { margin-bottom: .25rem; }
.bk-dir--stacked .bk-dir__title { font-size: .76rem; }
.bk-dir--stacked .bk-dir__list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
/* The rules read as one ruled table rather than stripes of unequal width. */
.bk-dir--stacked .bk-dir__list a { padding: .8rem 0; }

/* ==================================================================== */
/* 22. Support / related / contact / CTA                                */
/* ==================================================================== */
.bk-support__note { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Contact */
.bk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 899px) { .bk-contact { grid-template-columns: minmax(0, 1fr); } }

.bk-contact__methods { display: grid; gap: 1px; }
.bk-method {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--rule);
}
.bk-contact__methods .bk-method:first-child { border-top: 1px solid var(--rule); }
.bk-method__icon { color: var(--verd-dark); font-size: 1.25rem; }
.bk-method__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; }
.bk-method__text { font-size: .875rem; color: var(--text-soft); margin-top: .25rem; }
.bk-method__action { margin-top: .5rem; }

.bk-hours { display: grid; margin-top: 1.5rem; }
.bk-hours__row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .55rem 0;
    font-size: .875rem;
    border-bottom: 1px solid var(--rule-soft);
}
.bk-hours__row dt { color: var(--text-muted); }
.bk-hours__row dd { margin: 0; font-family: var(--font-mono); font-size: .8125rem; }

/* Form */
.bk-form { display: grid; gap: 1rem; }
.bk-field { display: grid; gap: .375rem; }
.bk-field--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 639px) { .bk-field--2 { grid-template-columns: minmax(0, 1fr); } }

.bk-label {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bk-label__req { color: var(--clay); }

.bk-input, .bk-select, .bk-textarea {
    width: 100%;
    padding: .7rem .875rem;
    background: var(--paper);
    color: var(--text);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-size: .9375rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.bk-select { appearance: none; background-image: none; cursor: pointer; }
.bk-textarea { resize: vertical; min-height: 7rem; }
.bk-input:hover, .bk-select:hover, .bk-textarea:hover { border-color: var(--rule-strong); }
.bk-input:focus, .bk-select:focus, .bk-textarea:focus {
    outline: none;
    border-color: var(--verd);
    box-shadow: 0 0 0 3px var(--verd-wash);
}
.bk-input::placeholder, .bk-textarea::placeholder { color: var(--text-muted); }

.bk-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-form__status { font-size: .875rem; }
.bk-form__status[data-state="error"] { color: var(--clay); }
.bk-form__status[data-state="ok"] { color: var(--verd-dark); }

/* CTA */
.bk-cta__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
@media (max-width: 899px) { .bk-cta__inner { grid-template-columns: minmax(0, 1fr); } }
.bk-cta__body > * + * { margin-top: 1.125rem; }
.bk-cta__aside { display: grid; gap: .875rem; justify-items: start; }
@media (min-width: 900px) { .bk-cta__aside { justify-items: stretch; } .bk-cta__aside .bk-btn { justify-content: center; } }

.bk-cta__direct {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--on-ink-muted);
    display: grid; gap: .3rem;
}
.bk-cta__direct a { color: var(--verd-light); }
.bk-cta__direct a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================== */
/* 23. Consignment Passport — the homepage's signature block            */
/* ==================================================================== */
.bk-passport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 1023px) { .bk-passport { grid-template-columns: minmax(0, 1fr); } }

.bk-pp__groups { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.bk-pp__group > legend {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--verd-light);
    padding: 0 0 .75rem;
    border: 0;
}
.bk-pp__group { border: 0; padding: 0; margin: 0; }
.bk-pp__opts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Each option is a real radio with a styled label, so keyboard and screen
   reader users get the native control's behaviour for free. */
.bk-pp__opt { position: relative; }
.bk-pp__opt input {
    position: absolute; opacity: 0;
    width: 100%; height: 100%; margin: 0;
    cursor: pointer;
}
.bk-pp__opt span {
    display: block;
    padding: .5rem .8rem;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    font-size: .8125rem;
    color: var(--on-ink-soft);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.bk-pp__opt input:hover + span { border-color: var(--rule-ink-strong); color: var(--on-ink); }
.bk-pp__opt input:checked + span {
    background: var(--verd-dark);
    border-color: var(--verd-dark);
    color: #fff;
}
.bk-pp__opt input:focus-visible + span { outline: 2px solid var(--verd-light); outline-offset: 2px; }

/* The assembled card */
.bk-pp__card { background: var(--ink-2); }
.bk-pp__card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule-ink);
}
.bk-pp__card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.bk-pp__card-sub {
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--verd-light); margin-bottom: .4rem;
}
.bk-pp__seal {
    flex: none;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-align: center;
    color: #d98a5c;
    border: 1px solid rgba(217, 138, 92, .5);
    border-radius: var(--r-sm);
    padding: .35rem .5rem;
}
.bk-pp__rows { display: grid; padding-top: .5rem; }
.bk-pp__row {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: .875rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rule-ink-soft);
    font-size: .875rem;
}
.bk-pp__row:last-child { border-bottom: 0; }
.bk-pp__row dt {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    padding-top: .15rem;
}
.bk-pp__row dd { margin: 0; color: var(--on-ink-soft); }
@media (max-width: 479px) {
    .bk-pp__row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* Passport on a light ground. Its controls were written for the dark band,
   so on paper and bone they take the dark-ink text tokens. The assembled
   card keeps its ink ground on purpose: it is the document, and on a light
   page it reads as an object laid on the page rather than part of it. */
.bk-band--paper .bk-pp__opt span,
.bk-band--bone  .bk-pp__opt span {
    border-color: var(--rule-strong);
    color: var(--text-soft);
}
.bk-band--paper .bk-pp__opt input:not(:checked):hover + span,
.bk-band--bone  .bk-pp__opt input:not(:checked):hover + span {
    border-color: var(--text-muted);
    color: var(--text);
}
.bk-band--paper .bk-pp__opt input:focus-visible + span,
.bk-band--bone  .bk-pp__opt input:focus-visible + span { outline-color: var(--verd-dark); }
.bk-band--paper .bk-pp__group > legend,
.bk-band--bone  .bk-pp__group > legend { color: var(--verd-dark); }
.bk-band--paper .bk-pp__card,
.bk-band--bone  .bk-pp__card { box-shadow: var(--shadow-lift); }

/* Spacing utilities the section partials need, kept here rather than as
   inline style attributes so an editor's theme tweaks stay in one file. */
.bk-answer__quote { margin-top: 1.25rem; }
.bk-contact__hours-title { margin-top: 2rem; }
.bk-form__heading { margin-bottom: .5rem; }
.bk-form__intro { margin-bottom: 1.5rem; }
.bk-routes__note { margin-top: 1rem; }
.bk-faq__more { margin-top: 1.75rem; }

/* ==================================================================== */
/* 24. Prose — the long-form briefing body                              */
/* ==================================================================== */
.bk-prose { max-width: var(--measure); }
.bk-prose > * + * { margin-top: 1.125rem; }
.bk-prose h2, .bk-prose h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; line-height: 1.2; text-wrap: balance; }
.bk-prose h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); margin-top: 2.5rem; }
.bk-prose h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); margin-top: 2rem; }
.bk-prose p, .bk-prose li { color: var(--text-soft); }
.bk-prose a { color: var(--verd-dark); border-bottom: 1px solid var(--verd-wash); }
.bk-prose a:hover { border-bottom-color: var(--verd); }
.bk-prose ul, .bk-prose ol { display: grid; gap: .5rem; padding-left: 1.125rem; }
.bk-prose ul { list-style: none; padding-left: 0; }
.bk-prose ul li { display: flex; gap: .625rem; }
.bk-prose ul li::before { content: '—'; color: var(--verd); flex: none; }
.bk-prose ol { list-style: decimal; }
.bk-prose ol li::marker { font-family: var(--font-mono); font-size: .875rem; color: var(--verd-dark); }
.bk-prose blockquote {
    border-left: 2px solid var(--verd);
    padding-left: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-style: italic;
    color: var(--text);
}
.bk-prose img { border-radius: var(--r); border: 1px solid var(--rule); margin-block: 1.75rem; }
.bk-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bk-prose th, .bk-prose td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.bk-prose thead th { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); background: var(--bone); }

/* Numbered briefing sections: the prose section's own layout. */
.bk-brief { display: grid; gap: 0; }
.bk-brief__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--rule);
}
.bk-brief__item:last-child { border-bottom: 1px solid var(--rule); }
.bk-brief__num { font-family: var(--font-mono); font-size: .875rem; color: var(--verd-dark); padding-top: .4rem; }
.bk-brief__title { font-family: var(--font-display); font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; }
.bk-brief__body { margin-top: .75rem; max-width: var(--measure); }
.bk-brief__body p { color: var(--text-soft); }
.bk-brief__body p + p { margin-top: .875rem; }
@media (max-width: 639px) {
    .bk-brief__item { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .bk-brief__num { padding-top: 0; }
}

/* ==================================================================== */
/* 25. Blog, pagination, search, empty states                           */
/* ==================================================================== */
.bk-single__media { padding-bottom: 0; }
.bk-single__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r); border: 1px solid var(--rule); }

.bk-card--post { display: flex; flex-direction: column; }
.bk-card--post .bk-card__body { display: flex; flex-direction: column; gap: .625rem; flex: 1 1 auto; }
.bk-card--post .bk-link-arrow { margin-top: auto; align-self: flex-start; }

.bk-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.bk-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bk-pagination .page-numbers {
    display: inline-grid; place-items: center;
    min-width: 2.375rem; height: 2.375rem; padding-inline: .5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text-soft);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.bk-pagination a.page-numbers:hover { border-color: var(--rule-strong); color: var(--text); }
.bk-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.bk-pagination .dots { border-color: transparent; }

.bk-searchform { display: flex; gap: .5rem; max-width: 30rem; }
.bk-searchform input {
    flex: 1 1 auto; min-width: 0;
    padding: .7rem .875rem;
    background: rgba(240, 239, 230, .07);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    color: var(--on-ink);
    font-size: .9375rem;
}
.bk-searchform input::placeholder { color: var(--on-ink-muted); }
.bk-searchform input:focus { outline: none; border-color: var(--verd-light); box-shadow: 0 0 0 3px rgba(111, 168, 142, .18); }
.bk-searchform button {
    padding: .7rem 1.1rem;
    background: var(--verd-dark); color: #fff;
    border-radius: var(--r-sm);
    font-size: .8125rem; font-weight: 600;
    transition: background-color .18s ease;
}
.bk-searchform button:hover { background: var(--verd); }
.bk-band--paper .bk-searchform input, .bk-band--bone .bk-searchform input {
    background: var(--paper); border-color: var(--rule); color: var(--text);
}
.bk-band--paper .bk-searchform input::placeholder, .bk-band--bone .bk-searchform input::placeholder { color: var(--text-muted); }

.bk-empty {
    padding: clamp(2rem, 5vw, 3.5rem);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r);
    text-align: center;
    color: var(--text-soft);
    max-width: 44rem; margin-inline: auto;
}

/* ==================================================================== */
/* 26. Footer                                                           */
/* ==================================================================== */
.bk-footer {
    background: var(--ink);
    color: var(--on-ink-soft);
    border-top: 1px solid var(--rule-ink);
    padding-bottom: env(safe-area-inset-bottom);
}
.bk-footer__top { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }

.bk-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 1023px) { .bk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .bk-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.bk-footer__brand { display: grid; gap: 1rem; justify-items: start; }
.bk-footer__brand p { font-size: .875rem; color: var(--on-ink-muted); max-width: 40ch; }
.bk-footer__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--verd-light);
    border: 1px solid rgba(111, 168, 142, .3);
    border-radius: var(--r-sm);
    padding: .35rem .6rem;
}

.bk-footer h2 {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink);
    padding-bottom: .875rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--rule-ink-soft);
}
.bk-footer__links { display: grid; }
.bk-footer__links a {
    display: block;
    padding: .4rem 0;
    font-size: .875rem;
    color: var(--on-ink-soft);
    transition: color .18s ease, padding-left .18s ease;
}
.bk-footer__links a:hover { color: var(--on-ink); padding-left: .25rem; }

.bk-footer__contact { display: grid; gap: .875rem; }
.bk-footer__contact-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; font-size: .875rem; }
.bk-footer__contact-item i { color: var(--verd-light); margin-top: .2rem; }
.bk-footer__contact-item strong {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-bottom: .15rem;
}
.bk-footer__contact-item a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }

.bk-footer__group {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--rule-ink-soft);
    font-size: .8125rem;
}
.bk-footer__group > span {
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
}
.bk-footer__group a { color: var(--on-ink-soft); transition: color .18s ease; }
.bk-footer__group a:hover { color: var(--verd-light); }

.bk-footer__bottom {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    align-items: center; justify-content: space-between;
    padding-block: 1.25rem 1.75rem;
    border-top: 1px solid var(--rule-ink-soft);
}
/* The floating WhatsApp button sits bottom-right and would otherwise cover
   the legal links — and a covered link cannot be clicked or focused. Give
   the last row enough room to clear it. */
.bk-footer__bottom { padding-bottom: 5.5rem; }
@media (min-width: 900px) { .bk-footer__legal { padding-right: 13rem; } }
@media (max-width: 599px) { .bk-footer__bottom { padding-bottom: 6.5rem; } }
.bk-footer__bottom p { font-size: .75rem; color: var(--on-ink-muted); max-width: 80ch; }
.bk-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .75rem; }
.bk-footer__legal a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================== */
/* 27. Floating controls                                                */
/* ==================================================================== */
.bk-wa-float {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 90;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem .95rem;
    background: var(--verd-dark);
    color: #fff;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-lift);
    font-size: .8125rem;
    font-weight: 600;
    transition: background-color .18s ease, transform .18s ease;
}
.bk-wa-float:hover { background: var(--verd); transform: translateY(-2px); }
.bk-wa-float i { font-size: 1.125rem; }
@media (max-width: 599px) { .bk-wa-float__text { display: none; } .bk-wa-float { padding: .8rem; } }

#bk-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    z-index: 89;
    width: 2.625rem; height: 2.625rem;
    display: grid; place-items: center;
    background: var(--ink-2);
    color: var(--on-ink);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-pill);
    opacity: 0; visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, border-color .18s ease;
}
#bk-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#bk-top:hover { border-color: var(--verd-light); }

/* ==================================================================== */
/* 28. Scroll reveal                                                    */
/* ==================================================================== */
.bk-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease-out, transform .55s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform;
}
.bk-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .bk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .bk-btn, .bk-card, .bk-card__media img, .bk-link-arrow span,
    .bk-wa-float, #bk-top, .bk-drawer__panel, .bk-drawer__backdrop,
    .bk-nav__trigger i, .bk-faq-item__q i, .bk-mnav__group summary i {
        transition: none !important;
        animation: none !important;
    }
    .bk-card:hover .bk-card__media img { transform: none; }
}

/* ==================================================================== */
/* 29. Print — the site is a reference document, so it must print        */
/* ==================================================================== */
@media print {
    .bk-utility, #bk-header, #bk-drawer, .bk-wa-float, #bk-top,
    .bk-footer__group, .bk-btn, .bk-searchform, .bk-faqg__tabs { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .bk-band { padding-block: 1rem; background: #fff !important; color: #000 !important; }
    .bk-band::before { display: none !important; }
    .bk-band--ink, .bk-band--ink * { background: #fff !important; color: #000 !important; }
    .bk-reveal { opacity: 1 !important; transform: none !important; }
    .bk-faq-item__a, .bk-faqg__group[hidden] { display: block !important; }
    .bk-table-wrap { overflow: visible; }
    .bk-table { min-width: 0; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}