/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5
 * Pocket PR block library (content/BLOCK-LIBRARY.md) — the one design system, 15 block types.
 * Loaded after style.css + motion.css, only on pages that use a block (tools/blocks.py, data-block=).
 * Mobile-first at 390. Reveals (.rv/.stagger), count-up (data-count), copy ([data-copy]), .faq and .tilt come
 * from main.js / motion.js; the tabs/compare-dots/beam/clock mechanics live in motion.js and target the markup
 * tools/blocks.py emits. Tokens come from style.css :root. Namespace: .bk-* .
 * ============================================================================================= */

.bk { position: relative; isolation: isolate; }
.bk .cv-in { position: relative; z-index: 1; }

/* floating entity objects: clipped in-canvas, behind content, hidden on phones (keeps 390 clean) --------- */
.bk-floats { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bk-float { position: absolute; width: clamp(90px, 12vw, 150px); height: auto; opacity: .9;
  filter: drop-shadow(0 14px 22px rgba(14, 20, 32, .18)); display: none; }
.bk-float-tr { top: 20px; right: 22px; rotate: 8deg; }
.bk-float-bl { bottom: 24px; left: 20px; rotate: -10deg; }
.bk-float-br { bottom: 24px; right: 22px; rotate: 6deg; }
@media (min-width: 760px) { .bk-float { display: block; } }
@media (prefers-reduced-motion: no-preference) { .mo .bk-float { animation: bkfloat 7s ease-in-out infinite alternate; } }
@keyframes bkfloat { to { transform: translateY(-9px); } }

/* ---- 1. split-photo ------------------------------------------------------------------------- */
.bk-sp { display: grid; gap: 24px; }
.bk-sp-ph { margin: 0; }
.bk-sp .il-cap { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
@media (min-width: 900px) {
  .bk-sp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .bk-sp-solo { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 2. stat-grid number fix : never wrap "$10,000", size to the tile ------------------------ */
.bk .sts .bk-num, .bk .sts b { white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
  font-size: clamp(22px, 7vw, 42px); }

/* ---- 3. steps-timeline : numbered cards, giant faded index, beam fills on scroll (data-beam) --- */
.bk-steps { list-style: none; position: relative; display: grid; gap: 14px; margin-top: 24px; }
.bk-st { position: relative; padding: 20px; border-radius: var(--r-card, 20px);
  background: rgba(255, 255, 255, .66); box-shadow: var(--shadow-s); overflow: hidden; min-width: 0; }
.bk-st-n { position: absolute; top: -14px; right: 6px; font: 800 5.2rem/1 var(--display);
  letter-spacing: -.04em; color: rgba(14, 20, 32, .06); pointer-events: none; }
.cv-ink .bk-st { background: rgba(255, 255, 255, .06); }
.cv-ink .bk-st-n { color: rgba(255, 255, 255, .08); }
.bk-st h3 { margin: 0 0 4px; }
.bk-st p { font-size: 14.5px; line-height: 1.45; }
.bk-st p + p { margin-top: 6px; }
.bk-beam { display: none; }
@media (min-width: 760px) {
  .bk-steps { padding-left: 8px; }
  .bk-beam { display: block; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
    background: rgba(14, 20, 32, .10); z-index: -1; }
  .bk-beam::after { content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--p, 1) * 100%);
    background: linear-gradient(var(--lime), var(--sage)); transition: height .2s linear; }
  .bk-st-n { font-size: 6.5rem; }
}

/* ---- 4. compare-cards : grid desktop, scroll-snap + dots mobile (data-snap, .bk-cc-i, .bk-dots) --- */
.bk-snap { margin-top: 24px; }
.bk-cc { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding-left: 4px; margin-inline: -4px; padding: 2px 4px 4px; align-items: start; }
.bk-cc::-webkit-scrollbar { display: none; }
.bk-cc-i { scroll-snap-align: start; padding: 22px; border-radius: var(--r-card, 20px);
  background: rgba(255, 255, 255, .72); box-shadow: var(--shadow-s); min-width: 0; }
.cv-ink .bk-cc-i { background: rgba(255, 255, 255, .06); }
.bk-cc-i h3 { margin: 0 0 10px; }
.bk-cc-l { list-style: none; display: grid; gap: 8px; }
.bk-cc-l li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.4; }
.bk-cc-l li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--lime); }
.cv-ink .bk-cc-l li { color: rgba(255, 255, 255, .9); }
.bk-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.bk-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(14, 20, 32, .2); transition: background .2s, transform .2s; }
.bk-dots i.on { background: var(--ink); transform: scale(1.3); }
.cv-ink .bk-dots i { background: rgba(255, 255, 255, .25); }
.cv-ink .bk-dots i.on { background: var(--lime); }
@media (min-width: 760px) {
  .bk-cc { grid-auto-flow: initial; grid-auto-columns: initial; overflow: visible; margin-inline: 0; padding: 0; align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-snap.bk-n2 .bk-cc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-snap.bk-n4 .bk-cc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-dots { display: none; }
}
@media (min-width: 1200px) { .bk-snap.bk-n4 .bk-cc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- 5. table-rich : zebra + pastel header, stacked label/value on mobile (never pills) ------- */
.bk-tr .tbl-rich { width: 100%; }
.tbl-rich thead th { background: var(--mint); }
.tbl-rich tbody tr:nth-child(even) td { background: none; }
@media (min-width: 760px) { .tbl-rich tbody tr:nth-child(even) td { background: rgba(14, 20, 32, .03); } }

/* ---- 6. infographic-band -------------------------------------------------------------------- */
.bk-ib-fig { margin: 24px auto 0; max-width: 860px; }
.bk-ib-fig .im { width: 100%; border-radius: var(--r-card, 20px); box-shadow: var(--shadow-s); }
.bk-ib-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---- 8. quote-pull : Source Serif 4 pull-quote ---------------------------------------------- */
.bk-pq { max-width: 820px; }
.bk-q { margin: 16px 0 0; font: 600 clamp(22px, 6vw, 38px)/1.28 var(--serif); letter-spacing: -.01em;
  color: var(--forest); text-wrap: pretty; }
.cv-ink .bk-q { color: #fff; }
.bk-q::before { content: '\201C'; color: var(--lime); }
.bk-q-c { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cv-ink .bk-q-c { color: rgba(255, 255, 255, .7); }

/* ---- 9. checklist-rows : divided rows, stroke check icon, no pills --------------------------- */
.bk-clr { list-style: none; display: grid; border-top: 1px solid var(--line); margin-top: 20px; }
.bk-clr li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.4; }
.bk-clr li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 16px; height: 9px;
  border: solid var(--forest); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.cv-ink .bk-clr { border-top-color: rgba(255, 255, 255, .14); }
.cv-ink .bk-clr li { border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }
.cv-ink .bk-clr li::before { border-color: var(--lime); }

/* ---- 10. template-card : copyable paper on a plate (self-contained, no sections.css needed) --- */
/* one template style site-wide: the .tpl paper card of motion.css (Inter 14px, wraps at 390, copy button);
   the block only spaces the stack */
.bk-tpls { margin-top: 24px; }

/* ---- 13. tabs-panel : desktop tab strip / mobile accordion (data-tabs2, motion.js) ----------- */
.bk-tabs { margin-top: 24px; }
.bk-tb-strip { display: none; }
.bk-tb-s { border-radius: 16px; background: rgba(255, 255, 255, .55); box-shadow: var(--shadow-s); margin-top: 10px; overflow: hidden; }
.cv-ink .bk-tb-s { background: rgba(255, 255, 255, .06); }
.bk-tb-h { margin: 0; font: inherit; }
.bk-tb-a { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;
  padding: 15px 18px; min-height: 48px; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer;
  background: none; color: inherit; border: 0; appearance: none; -webkit-appearance: none; border-radius: inherit; }
.bk-tb-a:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.cv-ink .bk-tb-a:focus-visible { outline-color: #fff; }
.bk-tb-a::after { content: ''; width: 12px; height: 12px; flex: none; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s; margin-top: -4px; }
.bk-tb-a[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
.bk-tb-c { display: none; padding: 0 18px 18px; }
.bk-tb-c p { font-size: 15px; line-height: 1.5; }
.bk-tb-c p + p { margin-top: 8px; }
.bk-tb-s.is-on .bk-tb-c { display: block; }
@media (min-width: 768px) {
  /* equal-width tabs, so the sliding knob (width 1/n, moved by --k) always sits exactly under the chosen tab */
  .bk-tb-strip { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 5px;
    border-radius: var(--pill); background: rgba(14, 20, 32, .06); }
  .cv-ink .bk-tb-strip { background: rgba(255, 255, 255, .08); }
  .bk-tb-b { position: relative; z-index: 1; padding: 10px 18px; min-height: 40px; border: 0; appearance: none; -webkit-appearance: none;
    border-radius: var(--pill); white-space: nowrap;
    font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; background: none; }
  .bk-tb-b[aria-selected="true"] { color: #fff; }
  .cv-ink .bk-tb-b[aria-selected="true"] { color: var(--ink); }
  /* non-text focus ring, >=3:1 on pastel: ink on light canvases, white on ink (WCAG 1.4.11) */
  .bk-tb-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .cv-ink .bk-tb-b:focus-visible { outline-color: #fff; }
  .bk-tb-h { display: none; }
  .bk-tb-k { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; border-radius: var(--pill);
    width: calc((100% - 10px) / var(--n, 3)); background: var(--ink);
    transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .25s var(--ease-out, ease); }
  .cv-ink .bk-tb-k { background: var(--lime); }
  .bk-tb-s { background: none; box-shadow: none; margin-top: 20px; border-radius: 0; }
  .cv-ink .bk-tb-s { background: none; }
  .bk-tb-s:not(.is-on) { display: none; }
  .bk-tb-a { display: none; }
  .bk-tb-c { display: block; padding: 0; }
}

/* ---- 14. map-cards : divided outlet list + non-map time-zone strip (data clocks, motion.js) --- */
.bk-mc .bk-tz-l { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.bk-mc .bk-tz-l li { display: grid; gap: 2px; padding: 10px 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .7); box-shadow: var(--shadow-s); }
.bk-mc .bk-tz-l b { font: 800 18px/1 var(--display); letter-spacing: -.02em; color: var(--forest); font-variant-numeric: tabular-nums; }
.bk-mc .bk-tz-l span { font-size: 12px; color: var(--muted); }

/* ---- mechanic: variants (planner mechanic: strings; see tools/blocks.py VARIANTS) ------------- */
/* struck-through list, for "what not to do" / mistakes / myths sections: only the wrong thesis (.bk-x) is
   struck, the correction (.bk-fix, and any text that is not .bk-x) stays plain and readable */
.bk-x { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(14, 20, 32, .5);
  color: var(--muted); }
.cv-ink .bk-x { text-decoration-color: rgba(255, 255, 255, .5); color: var(--muted-l, rgba(255,255,255,.6)); }
.bk-fix { color: inherit; }
.bk-v-strike .bk-clr li::before { border-color: var(--muted); opacity: .5; }
/* hero number: the first stat tile carries one big headline figure */
.bk-v-hero .sts { grid-template-columns: minmax(0, 1fr); }
.bk-v-hero .sts li:first-child { padding: 28px 20px; text-align: center; }
.bk-v-hero .sts li:first-child b, .bk-v-hero .sts li:first-child .bk-num { font-size: clamp(44px, 15vw, 92px); }
@media (min-width: 760px) {
  .bk-v-hero .sts { grid-template-columns: 1.4fr 1fr 1fr; align-items: center; }
  .bk-v-hero .sts li:first-child { grid-row: span 2; }
}

/* ---- hand-built pages (home, estimate, contact): direct v4 figures and photos ---------------- */
.bk-fig img { display: block; }
.cv-ink .bk-fig { background: #F7F6F1; margin-top: 24px; }
.bk-fig-sq { max-width: 320px; margin-top: 24px; }
.bk-fig-sq img { max-height: none; }
.bk-pic { border-radius: var(--r-card, 20px); overflow: hidden; overflow: clip; box-shadow: var(--shadow-s); aspect-ratio: 3 / 2; }
.bk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bk-pic-c { margin-top: 22px; }
.bk-fig-crop img { aspect-ratio: 5 / 2; height: auto; max-height: none; object-fit: cover; }
@media (max-width: 899px) { .bk-fig-sq { max-width: 240px; margin-inline: auto; } }
/* compare-cards of very uneven length: stacked on phones (a swipe row is as tall as its longest card) */
@media (max-width: 759px) {
  .bk-stack .bk-cc { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; }
}

/* ---- renderer: nothing dropped. The rest of a section after its structured part ----------------- */
/* "more" area: tables, lists, code and H3 the block did not fold in, visible in source order */
.bk-more { margin-top: 18px; display: grid; gap: 16px; }
.bk-more > * { margin: 0; }
.bk-more .tbl-w { margin: 0; }
.bk-h3 { font-size: 17px; margin: 4px 0 0; }
.sec-b .bk-more, .bk-sp-t .bk-more { max-width: 100%; }

/* plain divided rows (lists the block shows as rows, with no check mark) */
.bk-rows { list-style: none; display: grid; border-top: 1px solid var(--line); }
.bk-rows li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.bk-rows-n { counter-reset: r; }
.bk-rows-n li { padding-left: 34px; position: relative; }
.bk-rows-n li::before { counter-increment: r; content: counter(r); position: absolute; left: 0; top: 12px;
  font: 700 13px/1 var(--display); color: var(--forest); }
.cv-ink .bk-rows { border-top-color: rgba(255,255,255,.14); }
.cv-ink .bk-rows li { border-bottom-color: rgba(255,255,255,.14); color: #fff; }
.cv-ink .bk-rows-n li::before { color: var(--lime); }

/* head with a planned picture beside the text (stacks under 900) */
.bk-hd.has-fig, .bk-pq.has-fig { display: grid; gap: 24px; }
.bk-hd.has-fig > .bk-ib-fig { width: 100%; }
.bk-figs { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .bk-hd.has-fig { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 36px; }
  .bk-pq.has-fig { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 40px; }
}

/* photo / infographic slots used across the blocks (split-photo, head figures, quote band) */
.bk-ph { margin: 0; }
.shape-wide { aspect-ratio: 3 / 2; }
.shape-tall { aspect-ratio: 4 / 5; }
.bk-ph .il-cap { margin-top: 8px; font-size: 11.5px; color: var(--muted); text-align: right; }

/* quote-pull keeps its real H2 above the pull; the pull is the page's own line, not a quotation */
.bk-pq-t { min-width: 0; }
.bk-pq-t .bk-q { margin-top: 16px; }

/* ==== a0c6e0ca append (ASTRA-4): radius tokens, quote pull, picture slots, price bars, plan ladder, tabs panels ==== */
/* radius scale, tokens in style.css :root: --r-cv canvas 28/36/40 by breakpoint, --r-card 22 cards, --r-s 16 rows
   and panels, --r-xs 14 chips, --pill buttons and tab strips. Blocks use these names, never a literal radius. */
.bk-tb-s { border-radius: var(--r-s); }
.bk-mc .bk-tz-l li { border-radius: var(--r-xs); }
/* the pull is the page's own sentence, not a quotation: a rule above it instead of a quote mark */
.bk-q::before { content: none; }
.bk-q { padding-top: 18px; border-top: 3px solid var(--pist-d); font-size: clamp(22px, 6vw, 36px); }
.cv-ink .bk-q { border-top-color: var(--lime); }
.bk-pq-t { max-width: 820px; }
/* planned photo slot: 3:2 landscape, 4:5 portrait (faces kept at the top by .shape-tall .im) */
.bk-ph-tall { width: 100%; max-width: 380px; margin-inline: auto; }
.bk-ph-tall .shape-tall { width: 100%; margin-left: 0; }
.cv-ink .bk-ph .il-cap { color: rgba(255, 255, 255, .7); }
.bk-adopt { margin-top: 22px; }
.cta-grid .bk-ph { margin-top: 24px; max-width: 460px; }
.sec-h .bk-hd.has-fig { display: block; }
.sec-h .bk-hd.has-fig > .bk-ph, .sec-h .bk-hd.has-fig > .bk-ib-fig, .sec-h .bk-hd.has-fig > .bk-figs { margin-top: 22px; }
@media (min-width: 760px) { .bk-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bk-sp:has(.bk-ph-tall) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
/* stat tiles on phones: an even count fills every row (no 2+2+1+1), only an odd count lets the last tile span */
@media (max-width: 1199px) {
  .bk .sts.bk-sts-4 li:last-child, .bk .sts.bk-sts-6 li:last-child { grid-column: auto; }
  .bk .sts.bk-sts-5 li:last-child, .bk .sts.bk-sts-7 li:last-child { grid-column: 1 / -1; }
}
/* tab panel focus (panels are focusable so Tab from the tablist lands in the content) */
.bk-tb-s:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cv-ink .bk-tb-s:focus-visible { outline-color: #fff; }
/* hero with the plan card over the photo (pricing), placed like the home mini card */
.hero-media > .mini-plan { position: absolute; left: 0; bottom: -28px; width: min(260px, 70%); max-width: none; margin: 0; padding: 14px; }
@media (min-width: 1200px) { .hero-media > .mini-plan { left: -40px; bottom: 32px; padding: 18px; } }
/* price rows on one shared log scale: each bar sits in its own row, so bar order is always text order */
.pbar { grid-column: 1 / -1; position: relative; height: 8px; margin: 6px 0 2px; border-radius: var(--pill); background: rgba(14, 20, 32, .07); }
.pbar i { position: absolute; top: 0; bottom: 0; border-radius: var(--pill); background: var(--sage); }
.pbar-from i { background: linear-gradient(90deg, var(--lime), rgba(220, 239, 176, 0)); }
.prow-us .pbar { background: rgba(255, 255, 255, .12); }
.pscale { position: relative; height: 18px; margin: 6px 18px 0; font-size: 11.5px; color: var(--muted); }
.pscale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pscale span:first-child { transform: none; }
.pscale span:last-child { transform: translateX(-80%); }
/* plan ladder with its key: the four bars, left to right, are the four entries of the key */
.bk-ladder { margin-top: 24px; max-width: 520px; }
.bk-ladder .im { border-radius: var(--r-card); box-shadow: var(--shadow-s); }
.bk-ladder-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--muted); }
.bk-ladder-k b { display: block; font-weight: 700; color: var(--ink); }
@media (min-width: 768px) {
  .ptable-bars .prow .pn { grid-row: 1; grid-column: 3; }
  .ptable-bars .prow .pbar { grid-row: 2; grid-column: 1 / -1; margin-top: 10px; }
  .pscale { margin-inline: 24px; }
}
.bk-sp-t > .bk-rows, .bk-sp-t > .bk-clr, .sec-b > .bk-rows { margin-top: 18px; }
/* mistakes list: a cross, not a check, beside the struck thesis */
.bk-v-strike .bk-clr li::before { top: 18px; width: 12px; height: 12px; border: 0; transform: none;
  background: linear-gradient(45deg, transparent 43%, var(--muted) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--muted) 43% 57%, transparent 57%); }
.cv-ink .bk-v-strike .bk-clr li::before { background: linear-gradient(45deg, transparent 43%, var(--lime) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--lime) 43% 57%, transparent 57%); }

/* ==== reading rhythm (BLOCK-LIBRARY Reading rhythm rule): interludes + phone card rails ==================== */
/* interlude: one picture in a rounded pastel container between text-led sections, a one-sentence caption under it.
   Phones: the picture runs edge to edge of its container. From 768: the picture sits inside generous margins. */
.bk-il { position: relative; isolation: isolate; margin: 8px; border-radius: var(--r-cv); overflow: hidden; overflow: clip;
  background: var(--butter); }
.bk-il-mint { background: var(--mint); }
.bk-il-pale { background: var(--pale); }
.bk-il-sage { background: var(--sage-2); }
.bk-il-m { position: relative; z-index: 1; }
.bk-il-m .im { display: block; width: 100%; height: auto; }
.bk-il-c { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 14px; padding: 14px var(--g) 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bk-il-c > span:first-child { max-width: 62ch; text-wrap: pretty; }
.bk-il-n { flex: none; font-size: 11.5px; color: var(--muted); }
.bk-il-o { position: absolute; z-index: 2; display: none; top: 22px; right: 26px; width: clamp(90px, 9vw, 130px); height: auto;
  rotate: 8deg; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(14, 20, 32, .18)); }
@media (min-width: 768px) {
  .bk-il { padding: clamp(32px, 4.4vw, 60px) clamp(32px, 7vw, 112px) clamp(22px, 2.6vw, 34px); }
  .bk-il-m, .bk-il-c { max-width: 920px; margin-inline: auto; }
  .bk-il-m { border-radius: var(--r-card); overflow: hidden; overflow: clip; box-shadow: var(--shadow-s); }
  .bk-il-c { padding: 16px 2px 0; font-size: 15px; }
}
/* a flat infographic has its own off-white ground: on phones the container takes that ground (one card, not two
   tones); from 768 it sits narrower than a photo so its empty margins never read as an empty canvas */
@media (max-width: 767px) { .bk-il-info { background: var(--canvas); border: 1px solid var(--line); } }
@media (min-width: 768px) { .bk-il-info .bk-il-m, .bk-il-info .bk-il-c { max-width: 760px; } }
/* a portrait photo (4:5) is never stretched to the 920 column: from 768 it stands at 400 beside its caption */
@media (min-width: 768px) {
  .bk-il-tall { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 340px); justify-content: center;
    align-items: end; gap: 0 clamp(28px, 4vw, 56px); }
  .bk-il-tall .bk-il-m, .bk-il-tall .bk-il-c { max-width: none; margin: 0; }
  .bk-il-tall .bk-il-c { padding: 0 0 6px; font-size: 17px; line-height: 1.45; }
}
@media (min-width: 1200px) { .bk-il-o { display: block; } }
@media (prefers-reduced-motion: no-preference) { .mo .bk-il-o { animation: bkfloat 7s ease-in-out infinite alternate; } }

/* interlude with a text panel (owner, 2026-10-01): no picture stands bare. Phones: picture, then a compact panel.
   From 1024: picture about 55% on one side, panel about 45% on the other, centred on each other, sides alternating
   (.bk-il-l picture left, .bk-il-r picture right). Picture never taller than 420, rounded, cover (infographics contain). */
.bk-il-duo { display: grid; grid-template-columns: minmax(0, 1fr); }
.bk-il-duo .bk-il-m { max-width: none; margin: 0; }
.bk-il-duo .bk-il-m .im { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.bk-il-duo.bk-il-info .bk-il-m .im { aspect-ratio: auto; object-fit: contain; background: var(--canvas); }
.bk-il-p { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 18px var(--g) 20px; color: var(--ink); }
.bk-il-e { font: 600 13px/1.3 var(--sans); color: var(--forest); }
.bk-il-t { font: 700 clamp(17.5px, 4.9vw, 19px)/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.bk-il-x { max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bk-il-a { margin-top: 2px; font: 600 14.5px/1.4 var(--sans); color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(14, 20, 32, .3);
  transition: text-decoration-color .2s var(--ease); white-space: nowrap; }
.bk-il-a:hover { text-decoration-color: currentColor; }
.bk-il-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.bk-il-f { margin-top: 4px; }
.bk-il-duo.bk-il-tall .bk-il-m .im { aspect-ratio: 4 / 3 !important; object-position: 50% 30%; }
@media (min-width: 768px) {
  .bk-il.bk-il-duo { padding: clamp(28px, 4vw, 48px); }
  .bk-il-duo .bk-il-m { max-width: 760px; width: 100%; margin-inline: auto; }
  .bk-il-duo .bk-il-p { max-width: 760px; width: 100%; margin-inline: auto; padding: 20px 2px 0; }
}
@media (min-width: 1024px) {
  .bk-il.bk-il-duo { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center;
    gap: 0 clamp(36px, 4.4vw, 72px); padding: clamp(36px, 4vw, 56px) max(clamp(36px, 4.4vw, 72px), calc((100% - 1200px) / 2)); }
  .bk-il-duo.bk-il-r { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .bk-il-duo.bk-il-r .bk-il-m { order: 2; }
  .bk-il-duo .bk-il-m, .bk-il-duo .bk-il-p { max-width: none; margin: 0; }
  .bk-il-duo .bk-il-m .im { aspect-ratio: auto; height: min(420px, 38vw); }
  .bk-il-duo.bk-il-info .bk-il-m .im { height: auto; max-height: 420px; }
  .bk-il-duo.bk-il-tall { grid-template-columns: minmax(0, 340px) minmax(0, 520px); justify-content: center; }
  .bk-il-duo.bk-il-tall.bk-il-r { grid-template-columns: minmax(0, 520px) minmax(0, 340px); }
  .bk-il-duo.bk-il-tall .bk-il-m .im { aspect-ratio: auto !important; height: 420px; }
  .bk-il-duo .bk-il-p { gap: 12px; padding: 0; }
  .bk-il-e { font-size: 14px; }
  .bk-il-t { font-size: clamp(22px, 2vw, 28px); }
  .bk-il-x { font-size: 17px; line-height: 1.55; }
  .bk-il-a { font-size: 15.5px; }
  .bk-il-duo .bk-il-f { margin-top: 10px; }
  .bk-il-duo.bk-il-l .bk-il-o { right: auto; left: 22px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .bk-il-duo .bk-il-m .im { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
  .bk-il-duo:hover .bk-il-m .im { transform: scale(1.025); }
}

/* phone rail: 3+ similar cards in a row become a scroll-snap rail with dots; every card stays in the DOM and in
   the reading order (no display:none), desktop keeps its grid. Dots follow the card in view (motion.js data-rail). */
.bk-rail-dots { display: none; }
@media (max-width: 768px) {
  .bk-rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important;
    gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--g)) !important; padding: 4px var(--g) 6px !important; scroll-padding-inline: var(--g);
    align-items: start; border: 0 !important; }
  .bk-rail::-webkit-scrollbar { display: none; }
  .bk-rail::before { content: none !important; }
  .bk-rail > * { scroll-snap-align: start; min-width: 0; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; }
  .bk-rail:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .cv-ink .bk-rail:focus-visible { outline-color: var(--lime); }
  .sts.bk-rail { grid-auto-columns: 62%; }
  .stats.bk-rail { grid-auto-columns: 72%; }
  .stats.bk-rail .stat { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .stats.bk-rail .stat-n { grid-row: auto; margin-bottom: 4px; }
  /* divided-row lists read as cards inside a rail */
  .pln.bk-rail > li, .facts.bk-rail > div, dl.bk-rail > div, .evt.bk-rail > li, .bk-clr.bk-rail > li, .rws.bk-rail > li {
    padding: 18px !important; border: 0 !important; border-radius: var(--r-card); background: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow-s); }
  .exc dl.bk-rail > div { background: rgba(255, 255, 255, .72); }
  .exc dl.bk-rail { margin-inline: -20px !important; padding-inline: 20px !important; scroll-padding-inline: 20px; }
  .facts.bk-rail > div { grid-template-columns: minmax(0, 1fr); }
  .facts.bk-rail dd { text-align: left; }
  .evt.bk-rail > li::before { content: none; }
  .bk-clr.bk-rail > li::before { left: 18px; top: 23px; }
  .bk-clr.bk-rail > li { padding-left: 46px !important; }
  .cv-ink .bk-rail > li, .cv-ink dl.bk-rail > div { background: rgba(255, 255, 255, .06); }
  .bk-rail-dots { display: flex; }
  .bk-rail.is-fit { overflow-y: hidden; transition: height .35s var(--ease); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .bk-rail.is-fit { transition: none; } }

/* table-rich, column-group variant (mechanic "column groups on phones"): each row reads as one compact card,
   the option and its price on top, the other columns as inline label + value lines, a summary line above */
.bk-sum { display: none; }
@media (max-width: 767px) {
  .bk-sum { display: block; margin: 0 0 12px; font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
  .bk-v-cg .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 11px 14px; }
  .bk-v-cg .tbl tr + tr { margin-top: 6px; }
  .bk-v-cg .tbl td { grid-column: 1 / -1; text-wrap: wrap; }
  .bk-v-cg .tbl td:first-child { grid-column: 1; grid-row: 1; font-size: 15px; }
  .bk-v-cg .tbl td + td { margin-top: 2px; font-size: 14px; line-height: 1.38; }
  .bk-v-cg .tbl td:nth-child(2) { font-weight: 700; font-size: 14.5px; color: var(--forest); }
  .bk-v-cg .tbl td:nth-child(2)::before { content: none; }
  .bk-v-cg .tbl td:nth-child(n+3)::before { display: inline; content: attr(data-l) '\00a0\00a0'; font-size: 13px; letter-spacing: 0;
    text-transform: none; color: var(--ink); opacity: 1; margin: 0; }
  .bk-v-cg .tbl td:last-child { grid-column: 2; grid-row: 1; margin: 0; align-self: baseline; max-width: 42vw; text-align: right;
    font-size: 11.5px; line-height: 1.3; }
  .bk-v-cg .tbl td:last-child::before { content: none; }
  .bk-v-cg .tbl tr.tr-us td:nth-child(2) { color: var(--lime); }
  .bk-v-cg .tbl tr.tr-us td:nth-child(n+3)::before { color: #fff; }
  .bk-v-cg .tbl tr.tr-us td:last-child { color: var(--muted-l); }
}

/* ==== picture rule (owner 2026-10-01, content/BLOCK-LIBRARY.md): one picture per section, a design element ======
   The double-lobe mask belongs to page heroes only; a section picture is one rounded image. From 1024px the
   picture sits in a ~40% column beside the section's opening text (.pic-row), alternating sides down the page
   (.pic-r, .pic-l), never taller than 420px. Interludes stay centred, at most 720 wide and 420 tall.
   Phones keep the source order and full width. */
.cv:not(.hero) .shape:not(.shape-obj) { clip-path: none; -webkit-clip-path: none; border-radius: var(--r-card);
  overflow: hidden; overflow: clip; box-shadow: var(--shadow-s); animation: none; }
.cv:not(.hero) .hero-media::before, .cv:not(.hero) .hero-media::after { display: none; }
.cv:not(.hero) .shape-tall { border-radius: var(--r-card); }
.pic-row > .pic-t > :first-child { margin-top: 0; }
/* text-only case cards: the year pill sits in the flow, the card keeps its ink ground */
.cts-t .ct { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 6px; }
.cts-t .ct-y { position: static; align-self: flex-start; }
.cts-t .ct p { padding: 0 0 12px; }
@media (min-width: 1024px) {
  .pic-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center;
    gap: clamp(40px, 5vw, 80px); }
  .pic-l .pic-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .pic-l .pic-row > .pic-t { order: 2; }
  .pic-row > :not(.pic-t) { margin: 0; width: 100%; max-width: none; }
  .pic-row .shape { max-height: 420px; }
  .pic-row .shape-tall, .pic-row .bk-ph-tall { max-width: 336px; margin-inline: auto; }
  .pic-row .bk-ib-fig .im, .pic-row figure.info img { max-height: 420px; object-fit: contain; }
  .pic-row .bk-pic { max-height: 420px; }
  .pic-row .il-cap { text-align: right; }
  /* split-photo: text wider than the picture, sides alternate */
  .pic-side .bk-sp { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
  .pic-l .bk-sp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .pic-l .bk-sp > .bk-sp-ph { order: -1; }
  .bk-sp .shape-tall, .bk-sp .bk-ph-tall { max-width: 336px; margin-inline: auto; }
  .cv:not(.hero) .shape { max-height: 420px; }
  .cv:not(.hero) .sec-h .hero-media.bk-ph { max-width: 460px; }
  .bk-ib-fig .im { max-height: 420px; object-fit: contain; }
  /* interludes */
  .bk-il-m, .bk-il-c { max-width: 720px; }
  .bk-il-info .bk-il-m, .bk-il-info .bk-il-c { max-width: 640px; }
  .bk-il-m .im { max-height: 420px; object-fit: cover; }
  .bk-il-info .bk-il-m .im { object-fit: contain; }
  .bk-il-tall { grid-template-columns: minmax(0, 336px) minmax(0, 340px); }
  .expert-ph:not(:has(> .ph)) { max-height: 420px; max-width: 336px; }
}