/*
 * Brigen Consulting public site (UPGRADE-4 U4-R7; ordered by component in DESIGN-UPGRADE D1): the
 * layout, the header and its menus, the banner, sections, the card family, forms, the footer, the
 * floating buttons and each page's parts. Loaded after Bootstrap 5.3.8 and tokens.css; every
 * colour, radius, shadow and duration comes from a token there. No inline style anywhere: the
 * Content Security Policy allows the stored articles' style attributes only because they are
 * content, and the templates add none.
 */

/* Base -------------------------------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--bc-header-height) + 16px); }
body.bc-page { font-family: var(--bc-font); color: var(--bc-text); background: var(--bc-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--bc-font); font-weight: 700; color: var(--bc-text); line-height: 1.2; letter-spacing: -0.01em; }
a { color: var(--bc-link); text-underline-offset: 0.18em; }
a:hover { color: var(--bc-link-hover); }
img { max-width: 100%; height: auto; }
/* Responsive images (U4-R14a): a <picture> wraps each thumbnail and stored picture; it takes no box
   of its own, so the rules written for the <img> and the page's layout are unchanged. */
picture { display: contents; }
.container { max-width: 1240px; }
/* Rows with the wide gutter (g-lg-5, 3 rem) pull 1.5 rem past each side; from 992 px the container's
   padding matches it, so no page is wider than the window (U4-R12a: found at 1024 and 1200 px). */
@media (min-width: 992px) { .container { --bs-gutter-x: 3rem; } }
:focus-visible { outline: 3px solid var(--bc-focus-outline); outline-offset: 2px; }
/* On the dark parts of the light theme the outline is the lime. */
:is(.bc-footer, .bc-band, .bc-contact-card.has-photo, .bc-banner.has-photo) { --bc-focus-outline: var(--bc-brand); }
@media (min-width: 992px) { .bc-hero-copy { --bc-focus-outline: var(--bc-brand); } }
/* A control reached by Tab near the bottom stops above the floating buttons (D6a: they covered it). */
html { scroll-padding-bottom: 136px; }
main:focus { outline: none; }
/* A part reached by a same-page link stops below the sticky header. */
.bc-prose :is(h2, h3, h4)[id], main[id], .bc-row-item[id] { scroll-margin-top: calc(var(--bc-header-height) + 16px); }
.bc-muted { color: var(--bc-muted); }
.bc-small { font-size: var(--bc-text-sm); }
.bc-readable { max-width: 820px; }

.bc-skip { position: absolute; left: 16px; top: -64px; z-index: 2000; padding: 10px 16px; border-radius: var(--bc-radius-sm); background: var(--bc-dark); color: #fff; font-weight: 600; transition: top var(--bc-duration-fast); }
.bc-skip:focus { top: 12px; color: #fff; }

/* Buttons: they lift a little, and their arrow nudges on --------------------------------------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: var(--bc-radius-pill); padding: 0.625rem 1.375rem;
    transition: color var(--bc-duration-fast), background-color var(--bc-duration-fast), border-color var(--bc-duration-fast), box-shadow var(--bc-duration-fast), transform var(--bc-duration-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-lg { padding: 0.8rem 1.75rem; font-size: 1.0625rem; }
.btn-primary { --bs-btn-bg: var(--bc-primary); --bs-btn-border-color: var(--bc-primary); --bs-btn-color: var(--bc-on-primary);
    --bs-btn-hover-bg: var(--bc-primary-hover); --bs-btn-hover-border-color: var(--bc-primary-hover); --bs-btn-hover-color: var(--bc-on-primary);
    --bs-btn-active-bg: var(--bc-primary-hover); --bs-btn-active-border-color: var(--bc-primary-hover);
    --bs-btn-focus-shadow-rgb: 141, 198, 63; }
.btn-outline-primary { --bs-btn-color: var(--bc-primary); --bs-btn-border-color: var(--bc-primary); --bs-btn-hover-bg: var(--bc-primary);
    --bs-btn-hover-border-color: var(--bc-primary); --bs-btn-hover-color: var(--bc-on-primary); }
.btn svg { flex: none; }
.btn svg:last-child { transition: transform var(--bc-duration); }
.btn:hover svg:last-child, .btn:focus-visible svg:last-child { transform: translateX(3px); }

/* Header ------------------------------------------------------------------------------------- */

.bc-header { position: sticky; top: 0; z-index: 1030; background: var(--bc-header-bg); border-bottom: 1px solid transparent; transition: box-shadow var(--bc-duration), border-color var(--bc-duration); }
.bc-header.is-scrolled { border-bottom-color: var(--bc-border); box-shadow: 0 6px 24px rgba(20, 30, 15, 0.08); }
.bc-header-row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--bc-header-height); }
.bc-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.bc-logo img { height: 46px; width: auto; }
.bc-logo-text { font-weight: 700; font-size: 1.375rem; color: var(--bc-text); }
.bc-logo-dark { display: none; }
[data-bs-theme="dark"] .bc-logo-light:has(+ .bc-logo-dark) { display: none; }
[data-bs-theme="dark"] .bc-logo-dark { display: block; }
.bc-header-actions { display: flex; flex: none; align-items: center; gap: 0.5rem; margin-left: auto; }
.bc-header-cta { display: none; white-space: nowrap; }
.bc-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--bc-text); }
.bc-icon-button:hover { background: var(--bc-bg-soft); color: var(--bc-primary); }
.bc-search { border-top: 1px solid var(--bc-border); background: var(--bc-surface); }
.bc-search .bc-search-form { padding: 1rem 0; }
.bc-search-form { display: flex; gap: 0.5rem; }
.bc-search-form .form-control { flex: 1; }

/* The main menu. Labels stay on one line (U4-R12a: at 0.75 rem padding the menu spilled onto the
   logo from 1400 px); the underline draws from the centre. */
.bc-nav { display: none; flex: 1; min-width: 0; }
.bc-nav-list { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.bc-nav-item { position: relative; display: flex; align-items: center; }
.bc-nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.625rem; color: var(--bc-text); font-weight: 600; font-size: 1rem; white-space: nowrap; text-decoration: none; border-radius: var(--bc-radius-sm); }
.bc-nav-link:hover, .bc-nav-link.is-current { color: var(--bc-primary); }
.bc-nav-link::after { content: ""; position: absolute; right: 0.5rem; bottom: 0; left: 0.5rem; height: 3px; border-radius: 3px; background: var(--bc-brand); transform: scaleX(0); transition: transform var(--bc-duration); }
.bc-nav-link:hover::after, .bc-nav-link.is-current::after { transform: scaleX(1); }
.bc-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin-left: -0.5rem; border: 0; background: none; color: var(--bc-muted); }
.bc-nav-toggle:hover { color: var(--bc-primary); }

/* A menu is shown with visibility, not display, so it can close 0.25 s after the pointer leaves;
   hidden, it is still out of the Tab order. A strip above the panel keeps the item hovered while
   the pointer crosses from the link (the mega panel sits under the header, 16 px lower). Escape
   dismisses a menu even while it is hovered or holds focus (site.js). */
.bc-menu { position: absolute; top: 100%; left: 0; z-index: 1040; display: block; visibility: hidden; opacity: 0; min-width: 240px; margin: 0; padding: 0.5rem; list-style: none;
    background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-3);
    transition: opacity var(--bc-duration-fast), visibility 0s linear var(--bc-duration); }
.bc-menu::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 20px; }
.bc-has-menu:hover > .bc-menu, .bc-has-menu:focus-within > .bc-menu, .bc-has-menu.is-open > .bc-menu { visibility: visible; opacity: 1; transition-delay: 0s; }
.bc-has-menu.is-dismissed > .bc-menu { visibility: hidden; opacity: 0; transition: none; }
.bc-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--bc-radius-sm); color: var(--bc-text); text-decoration: none; font-weight: 500; }
.bc-menu a:hover { background: var(--bc-bg-soft); color: var(--bc-primary); }
.bc-has-mega { position: static; }
.bc-mega { left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); padding: 1.5rem; }
.bc-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.bc-mega-heading { display: flex !important; align-items: center; gap: 0.625rem; font-weight: 700 !important; color: var(--bc-text) !important; }
.bc-mega-heading img { width: 28px; height: 28px; object-fit: contain; }
.bc-mega-column ul { margin: 0.25rem 0 0; padding: 0; list-style: none; }
.bc-mega-column ul a { padding: 0.375rem 0.75rem; font-size: 0.9375rem; color: var(--bc-muted); }

/* The full menu needs 1200 px (U4-R12a: it overflowed at 1024); below that the menu button opens the panel. */
@media (min-width: 1200px) {
    .bc-nav { display: block; }
    .bc-menu-button { display: none; }
    .bc-header-row { gap: 1rem; }
    .bc-header-actions { margin-left: 0; }
    .bc-header-cta { display: inline-flex; }
    .bc-nav-link { padding: 0 0.5rem; }
}
@media (min-width: 1400px) {
    .bc-header-row { gap: 1.5rem; }
}

/* The offcanvas menu (below 1200 px since U4-R12a) */
.bc-offcanvas .offcanvas-title { font-size: 1.25rem; }
.bc-offcanvas-list { margin: 0; padding: 0; list-style: none; }
.bc-offcanvas-list > li { border-bottom: 1px solid var(--bc-border); }
.bc-offcanvas-list a, .bc-offcanvas-list summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0.5rem 0.25rem;
    color: var(--bc-text); font-weight: 600; text-decoration: none; cursor: pointer; }
.bc-offcanvas-list details ul { margin: 0 0 0.5rem; padding: 0 0 0 0.75rem; list-style: none; }
.bc-offcanvas-list details ul a { min-height: 40px; font-weight: 500; color: var(--bc-muted); }
.bc-offcanvas-list summary::marker { content: ""; }
.bc-offcanvas-list summary::after { content: "+"; font-size: 1.25rem; color: var(--bc-muted); }
.bc-offcanvas-list details[open] > summary::after { content: "\2212"; }
.bc-offcanvas-theme { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bc-border); color: var(--bc-muted); font-weight: 600; }

/* The colour theme's buttons (U4-R12a) */
.bc-theme-toggle-dark, .bc-theme-toggle-light { align-items: center; }
.bc-theme-toggle-dark { display: inline-flex; }
.bc-theme-toggle-light { display: none; }
[data-bs-theme="dark"] .bc-theme-toggle-light { display: inline-flex; }
[data-bs-theme="dark"] .bc-theme-toggle-dark { display: none; }
.bc-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(127, 140, 120, 0.16); }
.bc-theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: inherit; opacity: 0.75; }
.bc-theme-switch button:hover { opacity: 1; }
.bc-theme-switch button[aria-pressed="true"] { background: var(--bc-surface); color: var(--bc-text); opacity: 1; box-shadow: 0 1px 2px rgba(20, 30, 15, 0.14); }
.bc-footer .bc-theme-switch { background: rgba(255, 255, 255, 0.08); }

/* Banner --------------------------------------------------------------------------------------- */

.bc-banner { position: relative; display: flex; align-items: flex-end; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) 0; background: var(--bc-bg-soft); overflow: hidden; }
.bc-banner.has-photo { background: var(--bc-dark); }
.bc-banner-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-banner.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 24, 18, 0.92) 0%, rgba(16, 24, 18, 0.72) 50%, rgba(16, 24, 18, 0.45) 100%); }
.bc-banner-body { position: relative; z-index: 1; }
/* The banner's h1 keeps the h2 size: the owner asked for a compact banner (U4-R12a). */
.bc-banner-title { margin: 0; max-width: 900px; font-size: var(--bc-h2); line-height: 1.15; }
.bc-banner.has-photo .bc-banner-title { color: #fff; }
.bc-banner-lead { margin: 0.5rem 0 0; max-width: 760px; font-size: var(--bc-text-md); color: var(--bc-muted); }
.bc-banner.has-photo .bc-banner-lead { color: rgba(255, 255, 255, 0.85); }
.bc-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: var(--bc-text-sm); color: var(--bc-muted); }
.bc-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.bc-breadcrumb a { color: inherit; text-decoration: none; }
.bc-breadcrumb a:hover { text-decoration: underline; }
.bc-banner.has-photo .bc-breadcrumb { color: rgba(255, 255, 255, 0.82); }

/* Sections and the section header --------------------------------------------------------------- */

.bc-section { padding: var(--bc-section) 0; }
.bc-section-soft { background: var(--bc-bg-soft); }
/* A compact first section under the banner (U4-R12a). */
main > .bc-banner + .bc-section { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.bc-home-heading { padding-bottom: 0; }
.bc-seo-text { padding-top: 0; }
/* A block that shows only once the admin fills it (D3: How we work, US firms, FAQ) may land after a
   section of its own tone; it then continues that area instead of doubling the gap (D4, §14.23).
   The exact class lists leave the enquiry, the band and the article sections alone. */
main > [class="bc-section"] + [class="bc-section"][data-bc-flow],
main > [class="bc-section bc-section-soft"] + [class="bc-section bc-section-soft"][data-bc-flow] { padding-top: 0; }
/* The home page's intro on a phone (D4): the text clamped to eight lines, still whole in the page
   for screen readers and search engines; "About us" follows it. */
@media (max-width: 767.98px) {
    .bc-home-intro .bc-prose { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; }
}
/* The home page's three projects below 992 px (D4): one swipe row, a card and a glimpse of the next
   (two on a tablet), instead of a column of three; the grid of three from 992 px is unchanged.
   Tabbing to a card's link scrolls it into view. */
@media (max-width: 991.98px) {
    .bc-home-projects-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--bc-space-3); scrollbar-width: thin; }
    .bc-home-projects-row > * { flex: 0 0 85%; max-width: 85%; scroll-snap-align: start; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .bc-home-projects-row > * { flex-basis: 47%; max-width: 47%; }
}
.bc-eyebrow { margin: 0 0 0.5rem; color: var(--bc-brand-strong); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bc-section-title { margin: 0 0 1rem; font-size: var(--bc-h2); }
/* The accent bar under a section title (DESIGN-UPGRADE §14.7, L8): drawn from the left once the
   title (or its intro) is revealed; simply there in the first screen. */
.bc-section-title::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 0.625rem; border-radius: 3px; background: var(--bc-brand);
    transform-origin: left; transition: transform 0.6s var(--bc-ease) 0.35s; }
.bc-section-title.text-center::after { margin-right: auto; margin-left: auto; transform-origin: center; }
:is(.bc-reveal:not(.is-shown) .bc-section-title, .bc-section-title.bc-reveal:not(.is-shown))::after { transform: scaleX(0); }
.bc-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.bc-section-intro { max-width: 46rem; margin-bottom: 2rem; }
/* A section's actions beside its title: a text link, then the button. */
.bc-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.bc-text-link { font-weight: 600; text-decoration: none; }
.bc-text-link:hover { text-decoration: underline; }
/* A text link that ends with an arrow and may wrap: the arrow stays with the last word (L5). */
.bc-arrow-link svg { margin-left: 0.375rem; vertical-align: -0.2em; transition: transform var(--bc-duration); }
.bc-arrow-link:hover svg, .bc-arrow-link:focus-visible svg { transform: translateX(3px); }
.bc-subtitle { margin: 2.5rem 0 1rem; font-size: var(--bc-h3); }
.bc-lead { font-size: var(--bc-text-lg); color: var(--bc-muted); }
/* The heading sizes as classes, for text whose level and look differ. */
.bc-h1, .bc-h2, .bc-h3, .bc-h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--bc-text); }
.bc-h1 { font-size: var(--bc-h1); }
.bc-h2 { font-size: var(--bc-h2); }
.bc-h3 { font-size: var(--bc-h3); }
.bc-h4 { font-size: var(--bc-h4); }
/* The emphasis band: one per page, for the key message (DESIGN-UPGRADE D1; the CTA band in D2). */
.bc-band { background: var(--bc-band); color: var(--bc-band-text); }
.bc-band :is(h2, h3, .bc-section-title) { color: #fff; }
.bc-band .bc-eyebrow { color: var(--bc-brand); }
.bc-band .bc-lead { color: var(--bc-band-text); opacity: 0.88; }
/* On the band the primary action takes the lime, with dark text (8.3:1); the green would sink into it. */
.bc-band .btn-primary { --bs-btn-bg: var(--bc-brand); --bs-btn-border-color: var(--bc-brand); --bs-btn-color: #10200a;
    --bs-btn-hover-bg: #a3d662; --bs-btn-hover-border-color: #a3d662; --bs-btn-hover-color: #10200a; --bs-btn-active-bg: #a3d662; --bs-btn-active-border-color: #a3d662; }
[data-bs-theme="dark"] .bc-band { border-block: 1px solid var(--bc-border); }
/* The call-to-action band (D2): the heading and line on the left, the two actions on the right; one
   column on a phone. Compact, since the contact section follows at once. */
.bc-cta-band { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.bc-cta-band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.bc-cta-band-text { flex: 1 1 28rem; max-width: 46rem; }
.bc-cta-band-text .bc-section-title { margin-bottom: 0.75rem; }
.bc-cta-band-text .bc-lead { margin: 0; }
.bc-cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bc-cta-band .btn-outline-light { --bs-btn-color: var(--bc-band-text); --bs-btn-border-color: var(--bc-band-text); --bs-btn-hover-bg: var(--bc-band-text); --bs-btn-hover-color: var(--bc-band); --bs-btn-hover-border-color: var(--bc-band-text); }

/* The proof strip (D2): 2 to 4 numbers under the home slider, two across on a phone, in one row from
   768 px with a hairline between them. */
.bc-proof { padding-block: var(--bc-space-6); border-bottom: 1px solid var(--bc-border); background: var(--bc-surface); }
.bc-proof-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bc-space-5) var(--bc-space-6); margin: 0; padding: 0; list-style: none; }
.bc-proof-item { display: flex; flex-direction: column; gap: var(--bc-space-1); min-width: 0; }
.bc-proof-value { color: var(--bc-brand-strong); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.bc-proof-label { color: var(--bc-muted); font-size: var(--bc-text-sm); line-height: 1.4; }
@media (min-width: 768px) {
    .bc-proof-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
    .bc-proof-item + .bc-proof-item { padding-left: var(--bc-space-6); border-left: 1px solid var(--bc-border); }
}

/* "What happens next" (D2): numbered steps beside the contact form, the numbers in the brand's soft
   circles. */
.bc-next-steps { margin: var(--bc-space-6) 0; }
.bc-next-steps-title { margin-bottom: var(--bc-space-4); font-size: var(--bc-h4); }
.bc-next-steps-list { display: grid; gap: var(--bc-space-4); margin: 0; padding: 0; list-style: none; counter-reset: bc-step; }
.bc-next-steps-list li { position: relative; display: flex; flex-direction: column; gap: var(--bc-space-1); padding-left: 3rem; counter-increment: bc-step; }
.bc-next-steps-list li::before { content: counter(bc-step); position: absolute; top: -0.125rem; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: 50%; background: var(--bc-primary-soft); color: var(--bc-primary); font-weight: 700; }
.bc-next-step-name { font-weight: 600; }
.bc-next-step-detail { color: var(--bc-muted); font-size: var(--bc-text-sm); }

/* D3 (§14.21): the service pages' blocks, each hidden until the admin fills it.
   How we work: the steps in the soft circles of "What happens next", one column on a phone, a row
   from 992 px with a line joining the circles. */
.bc-process { display: grid; gap: var(--bc-space-5); margin: 0; padding: 0; list-style: none; counter-reset: bc-process; }
.bc-process-step { position: relative; display: flex; flex-direction: column; gap: var(--bc-space-1); padding-left: 3.25rem; counter-increment: bc-process; }
.bc-process-step::before { content: counter(bc-process); position: absolute; top: -0.25rem; left: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: 50%; background: var(--bc-primary-soft); color: var(--bc-primary); font-weight: 700; }
.bc-process-name { font-weight: 600; }
.bc-process-detail { color: var(--bc-muted); font-size: var(--bc-text-sm); }
@media (min-width: 992px) {
    .bc-process { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--bc-space-6); }
    .bc-process-step { padding-top: 3.25rem; padding-left: 0; }
    .bc-process-step::before { top: 0; }
    .bc-process-step:not(:last-child)::after { content: ""; position: absolute; top: 1.125rem; left: 2.75rem; right: calc(-1 * var(--bc-space-6) + 0.5rem); border-top: 2px solid var(--bc-border); }
}
/* Working with US firms: short cards, four across on a desktop. */
.bc-us-firm { height: 100%; padding: var(--bc-card-pad); }
.bc-us-firm-title { margin-bottom: var(--bc-space-2); font-size: var(--bc-h4); line-height: 1.3; }
.bc-us-firm-text { margin: 0; color: var(--bc-muted); }
/* What you get: a check list in a card above the service's body. */
.bc-deliverables { margin-bottom: var(--bc-space-6); padding: var(--bc-card-pad); }
.bc-deliverables-title { margin-bottom: var(--bc-space-3); font-size: var(--bc-h4); }
.bc-deliverables-list { display: grid; gap: var(--bc-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .bc-deliverables-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bc-deliverables-list li { display: flex; gap: var(--bc-space-2); align-items: flex-start; }
.bc-deliverables-list li > svg { flex: none; margin-top: 0.2rem; color: var(--bc-primary); }
.bc-deliverable-name { display: block; font-weight: 600; }
.bc-deliverable-detail { display: block; color: var(--bc-muted); font-size: var(--bc-text-sm); }
/* The FAQ: <details> rows, the chevron turning when open; no script. */
.bc-faq { border-top: 1px solid var(--bc-border); }
.bc-faq-item { border-bottom: 1px solid var(--bc-border); }
/* Side padding with an equal negative margin: the text stays in line, and the focus ring has room. */
.bc-faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-4); margin-inline: calc(-1 * var(--bc-space-2)); padding: var(--bc-space-4) var(--bc-space-2);
    border-radius: var(--bc-radius-sm); font-weight: 600; cursor: pointer; list-style: none; }
.bc-faq-question::-webkit-details-marker { display: none; }
.bc-faq-question:hover { color: var(--bc-primary); }
.bc-faq-question > svg { flex: none; color: var(--bc-primary); transition: transform var(--bc-duration); }
.bc-faq-item[open] > .bc-faq-question > svg { transform: rotate(180deg); }
.bc-faq-answer { padding-bottom: var(--bc-space-4); color: var(--bc-muted); }
.bc-faq-answer p { margin: 0; }
.bc-result-count { margin: 1.5rem 0; color: var(--bc-muted); }
.bc-empty { padding: 2rem; border: 1px dashed var(--bc-border); border-radius: var(--bc-radius); background: var(--bc-bg-soft); }
.bc-search-page-form { max-width: 720px; }
.bc-clamp.is-clamped { max-height: 16rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }

/* The card family ------------------------------------------------------------------------------- */

/* One surface, border and radius (DESIGN-UPGRADE D1); a variant sets only its layout and padding
   (--bc-card-pad, or -sm for the compact ones). The content cards share one hover: a deeper
   shadow, a stronger border and a 2 px lift; and one keyboard ring when a link inside has focus. */
.bc-card { background: var(--bc-surface-raised); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-1); }
.bc-card:is(.bc-item-card, .bc-feature-card, .bc-value, .bc-review, .bc-list-card, .bc-row-item, .bc-testimonial, .bc-job-card, .bc-contact-card) { transition: box-shadow var(--bc-duration), transform var(--bc-duration), border-color var(--bc-duration); }
.bc-card:is(.bc-item-card, .bc-feature-card, .bc-value, .bc-review, .bc-list-card, .bc-row-item, .bc-testimonial, .bc-job-card, .bc-contact-card):hover { border-color: var(--bc-border-strong); box-shadow: var(--bc-shadow-2); transform: translateY(-2px); }
.bc-card:is(.bc-item-card, .bc-list-card, .bc-row-item, .bc-job-card, .bc-contact-card):focus-within { box-shadow: 0 0 0 3px var(--bc-focus-outline); }

/* The item card: a post, service or project in a grid. Its summary is the whole text, as on the
   legacy cards; four lines show. Its author link sits above the card's stretched link. */
.bc-item-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.bc-item-media { aspect-ratio: 8 / 5; overflow: hidden; background: var(--bc-bg-soft); }
.bc-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-item-card:hover .bc-item-media img, .bc-item-card:focus-within .bc-item-media img { transform: scale(1.1); }
.bc-item-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 1.5rem; }
/* The category as a small pill (DESIGN-UPGRADE §14.3b, the owner's reference). */
.bc-item-label { align-self: flex-start; margin: 0; padding: 0.2rem 0.75rem; border-radius: var(--bc-radius-pill); background: var(--bc-primary-soft); color: var(--bc-link-hover); font-size: var(--bc-text-xs); font-weight: 600; line-height: 1.5; }
[data-bs-theme="dark"] .bc-item-label { color: var(--bc-link); }
.bc-item-title { margin: 0; font-size: var(--bc-h4); line-height: 1.3; }
.bc-item-title a { color: var(--bc-text); text-decoration: none; }
.bc-item-title a:hover { color: var(--bc-primary); }
.bc-item-title a:focus-visible { outline: none; }
.bc-item-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--bc-muted); font-size: var(--bc-text-sm); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.bc-item-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: auto 0 0; padding-top: 0.25rem; color: var(--bc-muted); font-size: 0.875rem; }
.bc-item-meta > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.bc-item-meta svg { flex: none; color: var(--bc-brand-strong); }
.bc-item-author { position: relative; z-index: 2; color: inherit; font-weight: 600; text-decoration: none; }
.bc-item-author:hover, .bc-item-author:focus-visible { color: var(--bc-primary); text-decoration: underline; }
/* A project's scope: up to two service tags, then "+N" (DESIGN-UPGRADE D5). Text, not links. */
.bc-item-scope { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.bc-item-scope li { padding: 0.125rem 0.625rem; border-radius: var(--bc-radius-pill); background: var(--bc-primary-soft); color: var(--bc-link-hover); font-size: var(--bc-text-xs); font-weight: 600; line-height: 1.6; }
.bc-item-scope li.is-more { background: none; border: 1px solid var(--bc-border); color: var(--bc-muted); }
[data-bs-theme="dark"] .bc-item-scope li:not(.is-more) { color: var(--bc-link); }

/* The feature card (a picture, a title and a text) and the value card (an icon). */
.bc-feature-card { height: 100%; overflow: hidden; }
.bc-feature-card img { width: 100%; aspect-ratio: 357 / 250; object-fit: cover; }
.bc-feature-body { padding: var(--bc-card-pad-sm) var(--bc-card-pad-sm) var(--bc-card-pad); }
.bc-feature-title { margin: 0 0 0.5rem; font-size: var(--bc-h4); }
.bc-value { height: 100%; padding: var(--bc-card-pad); }
.bc-value img { width: 56px; height: 56px; margin-bottom: 1rem; object-fit: contain; }
.bc-value-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: var(--bc-radius); background: var(--bc-primary-soft); color: var(--bc-primary); }
.bc-value-title { margin: 0 0 0.5rem; font-size: var(--bc-h4); }
/* The icons are stored pictures: the values' are lime outlines, which read on both themes; the
   history's are black outlines, which dark turns light (§13.2 A4: a light tile looked pasted on). */
[data-bs-theme="dark"] .bc-carousel.is-icons .bc-feature-card img { filter: invert(0.9); }

/* The link-list card (a service list and its services). */
.bc-list-card { height: 100%; padding: var(--bc-card-pad-sm); }
.bc-list-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--bc-text); font-weight: 700; text-decoration: none; }
.bc-list-card-head img { width: 32px; height: 32px; object-fit: contain; }
.bc-list-card-head:hover { color: var(--bc-primary); }
.bc-list-card ul { margin: 0; padding: 0; list-style: none; }
.bc-list-card li a { display: block; padding: 0.3rem 0; color: var(--bc-muted); font-size: var(--bc-text-sm); text-decoration: none; }
.bc-list-card li a:hover { color: var(--bc-primary); }

/* The row card: a picture beside the text, alternating sides. */
.bc-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.bc-row-item { display: grid; gap: 0; overflow: hidden; scroll-margin-top: calc(var(--bc-header-height) + 16px); }
.bc-row-media { aspect-ratio: 8 / 5; overflow: hidden; }
.bc-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-row-item:hover .bc-row-media img, .bc-row-item:focus-within .bc-row-media img { transform: scale(1.1); }
.bc-row-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.bc-row-title { margin: 0; font-size: var(--bc-h3); }
.bc-row-title a { color: var(--bc-text); text-decoration: none; }
.bc-row-title a:hover { color: var(--bc-primary); }
@media (min-width: 768px) {
    .bc-row-item { grid-template-columns: 5fr 7fr; }
    .bc-row-item.is-reversed .bc-row-media { order: 2; }
    .bc-row-media { aspect-ratio: auto; min-height: 260px; }
}

/* The summary of the blog's lead post, cut at four lines. */
.bc-featured-summary { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

/* The blog's lead block (DESIGN-UPGRADE §14.3b): the newest post featured on the left, the next
   three as a compact list on the right, separated by dashed lines, over a faint dot grid. */
.bc-section:has(> .container > .bc-blog-lead) { overflow-x: clip; }
.bc-blog-lead { position: relative; margin-bottom: 2.5rem; padding: 1.5rem 0; isolation: isolate; }
.bc-blog-lead::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background-image: radial-gradient(var(--bc-border) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.bc-lead-post { display: flex; flex-direction: column; gap: 0.75rem; }
.bc-lead-post-media, .bc-side-post-media { position: relative; display: block; overflow: hidden; border-radius: var(--bc-radius); background: var(--bc-bg-soft); }
.bc-lead-post-media { aspect-ratio: 8 / 5; margin-bottom: 0.5rem; }
.bc-lead-post-media img, .bc-side-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-lead-post:is(:hover, :focus-within) .bc-lead-post-media img, .bc-side-post:is(:hover, :focus-within) .bc-side-post-media img { transform: scale(1.1); }
.bc-lead-post-title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; }
.bc-lead-post-title a, .bc-side-post-title a { color: var(--bc-text); text-decoration: none; }
.bc-lead-post-title a:hover, .bc-side-post-title a:hover { color: var(--bc-primary); }
.bc-side-posts { margin: 0; padding: 0; list-style: none; }
.bc-side-post { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 1.25rem; align-items: start; padding: 0 0 1.5rem; }
.bc-side-post + .bc-side-post { padding-top: 1.5rem; border-top: 1px dashed var(--bc-input-border); }
.bc-side-post-media { aspect-ratio: 3 / 2; }
.bc-side-post-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.bc-side-post-title { margin: 0; font-size: var(--bc-h4); line-height: 1.35; }
.bc-side-post .bc-item-meta { flex-direction: column; gap: 0.25rem; }
:is(.bc-lead-post-media, .bc-side-post-media)::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 50%; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--bc-shine) 100%); transform: translateX(-170%) skewX(-25deg); }
:is(.bc-lead-post:is(:hover, :focus-within) .bc-lead-post-media, .bc-side-post:is(:hover, :focus-within) .bc-side-post-media)::before { transform: translateX(270%) skewX(-25deg); transition: transform 1s ease; }

/* Quote cards: a testimonial (with its project's picture) and a home review. */
.bc-testimonial { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.bc-testimonial-project { display: block; aspect-ratio: 12 / 7; overflow: hidden; background: var(--bc-bg-soft); }
.bc-testimonial-project img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-testimonial-project:is(:hover, :focus-visible) img { transform: scale(1.1); }
.bc-testimonial-body { display: flex; flex-direction: column; gap: 1rem; padding: var(--bc-card-pad); flex: 1; }
.bc-review { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: var(--bc-card-pad); }
.bc-review .bc-quote { flex: 1; margin: 0; }
.bc-review-project { margin: calc(-1 * var(--bc-card-pad)) calc(-1 * var(--bc-card-pad)) 0.25rem; overflow: hidden; border-radius: var(--bc-radius) var(--bc-radius) 0 0; aspect-ratio: 12 / 7; background: var(--bc-bg-soft); }
.bc-review-project img { width: 100%; height: 100%; object-fit: cover; }
.bc-stars { display: flex; gap: 2px; color: var(--bc-star-empty); }
.bc-star.is-full, .bc-star.is-half { color: #f5a623; }
.bc-star.is-full svg { fill: currentColor; }
.bc-star.is-half svg { fill: currentColor; fill-opacity: 0.45; }
.bc-quote { position: relative; margin: 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--bc-brand); background: none; font-size: var(--bc-text-md); }
.bc-person { display: flex; align-items: center; gap: 0.875rem; margin-top: auto; }
.bc-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.bc-person-name { margin: 0; font-weight: 700; }
.bc-person-role { margin: 0; color: var(--bc-muted); font-size: var(--bc-text-sm); }

/* Other cards: a job, a profile, a result, the facts of a project. */
.bc-job-card { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: var(--bc-card-pad); }
.bc-job-card .btn { align-self: flex-start; }
.bc-profile-card { overflow: hidden; }
.bc-profile-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.bc-profile-body { padding: var(--bc-card-pad); }
.bc-result-card { max-width: 860px; padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--bc-radius-lg); box-shadow: var(--bc-shadow-2); }
.bc-result-icon { display: flex; justify-content: center; margin-bottom: 1rem; color: var(--bc-primary); }
.bc-summary-table td { padding: 0.5rem 0.75rem; border-color: var(--bc-border); }
.bc-facts { padding: var(--bc-card-pad); }
.bc-facts .bc-subtitle { margin-top: 0; }
.bc-facts dl { margin: 0; }
.bc-facts dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; padding: 0.625rem 0; border-bottom: 1px solid var(--bc-border); }
.bc-facts dt { display: flex; align-items: center; gap: 0.5rem; color: var(--bc-muted); font-weight: 600; }
.bc-facts dd { margin: 0; }

/* The home tile: a service list's picture with its name. */
.bc-tile { position: relative; display: block; overflow: hidden; border-radius: var(--bc-radius); aspect-ratio: 8 / 5; color: #fff; text-decoration: none; }
.bc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 20, 10, 0.78) 0%, rgba(10, 20, 10, 0) 60%); }
.bc-tile-name { position: absolute; right: 1rem; bottom: 0.875rem; left: 1rem; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; line-height: 1.25; }
.bc-tile:hover img, .bc-tile:focus-visible img { transform: scale(1.1); }
.bc-tile:hover, .bc-tile:focus-visible { color: #fff; }
/* On hover and focus the veil deepens and the name rises (§14.7, M3). */
.bc-tile::after { background-color: transparent; transition: background-color var(--bc-duration-slow); }
.bc-tile:is(:hover, :focus-visible)::after { background-color: rgba(var(--bc-photo-scrim-rgb), 0.22); }
.bc-tile-name { transition: transform var(--bc-duration) var(--bc-ease); }
.bc-tile:is(:hover, :focus-visible) .bc-tile-name { transform: translateY(-4px); }
@media (max-width: 575.98px) { .bc-tile-name { right: 0.625rem; bottom: 0.5rem; left: 0.625rem; font-size: 0.875rem; } .bc-tile-name svg { display: none; } }

/* Chips, tabs and the pager ---------------------------------------------------------------------- */

.bc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.bc-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--bc-border); border-radius: var(--bc-radius-pill);
    color: var(--bc-text); font-weight: 600; font-size: var(--bc-text-sm); text-decoration: none; }
.bc-chips a:hover { border-color: var(--bc-primary); color: var(--bc-primary); }
.bc-chips a[aria-current] { background: var(--bc-primary); border-color: var(--bc-primary); color: var(--bc-on-primary); }
.bc-tabs { gap: 0.5rem; margin-bottom: 1.5rem; border: 0; }
.bc-tabs .nav-link { min-height: 44px; padding: 0 1.25rem; border: 1px solid var(--bc-border); border-radius: var(--bc-radius-pill); color: var(--bc-text); font-weight: 600; background: none; }
.bc-tabs .nav-link:hover { border-color: var(--bc-primary); color: var(--bc-primary); }
.bc-tabs .nav-link.active { background: var(--bc-primary); border-color: var(--bc-primary); color: var(--bc-on-primary); }

.bc-pagination { margin-top: 2.5rem; }
.bc-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bc-pagination a, .bc-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.75rem;
    border: 1px solid var(--bc-border); border-radius: var(--bc-radius-pill); color: var(--bc-text); font-weight: 600; text-decoration: none; }
.bc-pagination a:hover { border-color: var(--bc-primary); color: var(--bc-primary); }
.bc-pagination span[aria-current] { background: var(--bc-primary); border-color: var(--bc-primary); color: var(--bc-on-primary); }
.bc-pagination .bc-pagination-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; color: var(--bc-muted); border: 0; background: none; }

/* Forms and the enquiry section ------------------------------------------------------------------ */

.bc-enquiry { background: var(--bc-bg-soft); }
.bc-section.bc-enquiry { padding: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) 0; }
/* The text column kept tight, so the section fits a window with the form (D10c, §14.19). */
.bc-enquiry .bc-lead { margin-bottom: 0.75rem; }
.bc-prose.bc-enquiry-text ul { margin-bottom: 0.5rem; }
.bc-prose.bc-enquiry-text li { margin-bottom: 0.25rem; line-height: 1.5; }
/* The contact section's text column in one voice (D10, §14.15): a stored heading is the small
   subtitle and stored inline sizes are set aside, so the list reads at the body size; the tagline,
   typed in capitals, takes the eyebrow's small letter-spaced capitals. */
.bc-prose.bc-enquiry-text :is(h2, h3, h4) { margin: 0.75rem 0 0.5rem; font-size: var(--bc-h4); font-weight: 600; letter-spacing: 0; }
.bc-prose.bc-enquiry-text [style*="font-size"] { font-size: inherit !important; }
.bc-enquiry-tagline { margin: 0.75rem 0 0.5rem; color: var(--bc-brand-strong); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bc-enquiry-photo { display: block; width: 100%; height: auto; border-radius: var(--bc-radius); }
.bc-form-card { padding: clamp(1rem, 0.75rem + 1vw, 1.75rem); border-radius: var(--bc-radius-lg); box-shadow: var(--bc-shadow-2); }
/* One form style (DESIGN-UPGRADE D9, §14.13): one column of floating labels (each a real label), a
   pill for the attachment, a full-width button; the same fields in every form and theme. */
.bc-form-fields { display: grid; gap: var(--bc-space-3); }
.form-label { margin-bottom: 0.375rem; font-size: var(--bc-text-sm); font-weight: 600; }
.form-control, .form-select { min-height: 46px; border-color: var(--bc-input-border); border-radius: var(--bc-radius-sm); background-color: var(--bc-surface); }
.form-control:focus, .form-select:focus { border-color: var(--bc-primary); box-shadow: 0 0 0 0.25rem var(--bc-focus); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bc-danger); }
/* Compact floating labels (the owner, 2026-09-28: "too big"): 46 px fields, the height of every
   input on the site; the label floats up small inside. The text stays 16 px, so phones do not zoom. */
.form-floating > .form-control, .form-floating > .form-select { height: 2.875rem; min-height: 2.875rem; padding: 1.125rem 0.75rem 0.25rem; font-size: 1rem; line-height: 1.25; }
.form-floating > label { padding: 0.8125rem 0.75rem; font-size: 0.9375rem; line-height: 1.25; }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { transform: scale(0.8) translateY(-0.55rem) translateX(0.15rem); }
.form-floating > .bc-form-textarea { height: 6.25rem; min-height: 6.25rem; padding-top: 1.375rem; resize: vertical; }
.form-floating > .bc-form-textarea ~ label::after { inset: 0.5rem 0.375rem; }
/* The label keeps the muted colour (AA) when it moves up; Bootstrap would fade it further. */
.form-floating > label { color: var(--bc-muted); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--bc-muted); }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: var(--bc-surface); }
.bc-required { color: var(--bc-danger); }
/* Short fields side by side (the appointment's date, hour and minute); the date alone on a phone. */
.bc-form-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--bc-space-3); }
@media (max-width: 419.98px) { .bc-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bc-form-date { grid-column: 1 / -1; } }
/* The attachment: a pill with the chosen file's name beside it, in a field of the same height. */
.bc-file-title { margin: 0 0 var(--bc-space-1); font-size: var(--bc-text-sm); font-weight: 600; }
.bc-file { display: flex; align-items: center; gap: var(--bc-space-3); min-height: 2.875rem; padding: 0.25rem; border: 1px solid var(--bc-input-border); border-radius: var(--bc-radius-sm); background: var(--bc-surface); }
.bc-file:has(.is-invalid) { border-color: var(--bc-danger); }
.bc-file-picker { position: relative; display: inline-flex; flex: none; border-radius: var(--bc-radius-pill); }
.bc-file-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bc-file-button { display: inline-flex; align-items: center; gap: var(--bc-space-2); min-height: 2.25rem; margin: 0; padding: 0 var(--bc-space-4); font-size: var(--bc-text-sm); border-radius: var(--bc-radius-pill);
    background: var(--bc-primary); color: var(--bc-on-primary); font-weight: 600; transition: background-color var(--bc-duration); }
.bc-file-input:hover + .bc-file-button { background: var(--bc-primary-hover); }
.bc-file-picker:has(.bc-file-input:focus-visible) { box-shadow: 0 0 0 3px var(--bc-focus-outline); }
.bc-file-name { min-width: 0; overflow: hidden; color: var(--bc-muted); text-overflow: ellipsis; white-space: nowrap; }
.bc-file-name.has-file { color: var(--bc-text); font-weight: 500; }
.bc-file-field .form-text { margin: var(--bc-space-1) 0 0; font-size: var(--bc-text-xs); }
.bc-form-message { margin: 0; padding: 0.75rem 1rem; border-radius: var(--bc-radius-sm); background: var(--bc-danger-bg); color: var(--bc-danger-text); font-weight: 500; }
/* A refused form's message (U4-R13), under the banner: the danger tones, a close button. */
.bc-flash { display: flex; align-items: center; gap: var(--bc-space-3); margin: var(--bc-space-6) 0 0; padding: var(--bc-space-3) var(--bc-space-3) var(--bc-space-3) var(--bc-space-4); border-radius: var(--bc-radius-sm); background: var(--bc-danger-bg); color: var(--bc-danger-text); font-weight: 500; }
.bc-flash p { flex: 1; margin: 0; }
.bc-flash .bc-icon-button { flex: none; color: inherit; }
.bc-form-send { width: 100%; min-height: 2.875rem; justify-content: center; }
/* Side-by-side blocks share their top and bottom edges (D10b, §14.17), and the form sets the height
   (D10c, §14.19): from 992 px a .bc-equal-columns row makes its columns equal. The other column's
   .bc-fit part (the enquiry's photo, the contact page's map) starts from nothing and takes only the
   height left, cropped, at least 140 px; the form keeps its compact size. Only when the other
   column is still taller (a narrow window) does the message box take up the few pixels left.
   Phones stack as before. */
@media (min-width: 992px) {
    .bc-equal-columns { align-items: stretch !important; }
    .bc-equal-columns > [class*="col-"] { display: flex; flex-direction: column; }
    .bc-equal-columns .bc-stretch { flex: 1 1 auto; }
    .bc-equal-columns .bc-form-card.bc-stretch, .bc-equal-columns .bc-form-card.bc-stretch > .bc-form { display: flex; flex-direction: column; }
    .bc-equal-columns .bc-form-card.bc-stretch > .bc-form, .bc-equal-columns .bc-form-card.bc-stretch .bc-form-fields { flex: 1 1 auto; }
    .bc-equal-columns .bc-form-card.bc-stretch .bc-form-fields { display: flex; flex-direction: column; }
    .bc-equal-columns .bc-form-card.bc-stretch .bc-form-grow { display: flex; flex: 1 1 auto; }
    .bc-equal-columns .bc-form-card.bc-stretch .bc-form-grow > .bc-form-textarea { flex: 1 1 auto; height: auto; }
    .bc-equal-columns .bc-fit { flex: 1 1 0; }
    .bc-equal-columns img.bc-fit { min-height: 140px; }
    .bc-equal-columns .bc-map-side.bc-fit { min-height: 100px; }
    .bc-equal-columns img.bc-fit { width: 100%; height: auto; object-fit: cover; }
    .bc-equal-columns .bc-map-side.bc-fit { display: flex; }
    /* A project's facts card: its map takes the height the pictures leave, 140 px at least (D11). */
    .bc-equal-columns .bc-facts.bc-stretch { display: flex; flex-direction: column; }
    .bc-equal-columns .bc-facts .bc-map-side.bc-fit { min-height: 140px; }
    .bc-equal-columns .bc-facts > .btn { align-self: flex-start; }
    .bc-equal-columns .bc-map-side.bc-fit iframe { flex: 1 1 auto; height: auto !important; max-height: none; aspect-ratio: auto !important; }
    /* The contact page fits a 1366 x 768 window (D10d, §14.20): the form's short fields in pairs
       (the message, the attachment and the button full width), tighter cards, less padding below. */
    .bc-equal-columns .bc-form-card.bc-form-pairs { padding: 1.25rem; }
    .bc-equal-columns .bc-form-card.bc-form-pairs .bc-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
    .bc-equal-columns .bc-form-card.bc-form-pairs .bc-form-fields > :not(.form-floating),
    .bc-equal-columns .bc-form-card.bc-form-pairs .bc-form-fields > .bc-form-grow { grid-column: 1 / -1; }
    .bc-contact-section { padding-bottom: 2.5rem; }
    .bc-contact-row .bc-contact-card { padding: 1.25rem; }
    .bc-contact-row .bc-contact-logo { max-height: 36px; margin-bottom: 0.5rem; }
    /* The details card in the small text size, so its column is not taller than the form's (the
       taller column sets the row, and the message box would take the difference). */
    .bc-contact-row .bc-contact-card .bc-prose, .bc-contact-row .bc-contact-lines { font-size: var(--bc-text-sm); }
    .bc-contact-row .bc-contact-lines { margin-top: 0.75rem; }
    .bc-contact-row .bc-contact-lines li { margin-bottom: 0.25rem; }
    .bc-contact-row .bc-contact-card .btn { margin-top: 0.75rem !important; }
}
.form-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.bc-contact-lines { margin: 1rem 0 0; padding: 0; list-style: none; }
.bc-contact-lines li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.bc-contact-lines svg { color: var(--bc-primary); }
.bc-contact-lines a { color: var(--bc-text); font-weight: 600; text-decoration: none; }
.modal-title { font-size: 1.375rem; }

/* Footer: four compact columns, over the admin's footer photo behind a dark veil ------------------ */

.bc-footer { padding: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0 0; background: var(--bc-dark); color: var(--bc-dark-text); font-size: var(--bc-text-sm); }
.bc-footer.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.bc-footer-backdrop { position: absolute; inset: 0; z-index: -1; }
.bc-footer-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.bc-footer-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 11, 0.8); }
.bc-footer a { color: #fff; text-decoration: none; }
.bc-footer a:hover { color: var(--bc-brand); }
.bc-footer-logo { max-height: 48px; width: auto; margin-bottom: 0.75rem; }
.bc-footer-text { display: -webkit-box; max-width: 24rem; margin: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bc-footer-title { margin-bottom: 0.75rem; color: #fff; font-size: 1.0625rem; letter-spacing: 0.02em; }
.bc-footer-links, .bc-footer-contact, .bc-social { margin: 0; padding: 0; list-style: none; }
.bc-footer-links { columns: 2; column-gap: 1.25rem; }
.bc-footer-links li { margin-bottom: 0.4rem; break-inside: avoid; }
.bc-footer-contact li { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
.bc-footer-contact svg { flex: none; margin-top: 3px; color: var(--bc-brand); }
.bc-footer-links a, .bc-footer-contact a { transition: color var(--bc-duration-fast); }
.bc-social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.bc-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.bc-social a:hover { background: var(--bc-brand); color: var(--bc-dark); }
.bc-footer .bc-social { margin-top: 0.75rem; }
.bc-social-light a { background: var(--bc-bg-soft); color: var(--bc-text); }
.bc-social-light a:hover { background: var(--bc-primary); color: var(--bc-on-primary); }
.bc-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(215, 221, 210, 0.8); }
.bc-footer-bottom p { margin: 0; }
/* The policy pages' links on the bottom line (U4-R16), between the copyright and the theme switch. */
.bc-footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 auto 0 0; padding: 0; list-style: none; }
.bc-footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--bc-duration-fast); }
@media (max-width: 575.98px) { .bc-footer-links { columns: 1; } }
/* On a phone the last row keeps room below it for the back-to-top button, which covered the theme
   switch at the end of the page (DESIGN-UPGRADE D6a). */
@media (max-width: 767.98px) { .bc-footer-bottom { padding-bottom: 5rem; } }

/* The chat button (DESIGN-UPGRADE §14.7, L6): one round button whose menu holds "Book an
   appointment" and "Business request". It steps aside while the hero's bar or the footer shows
   (site.js), rings softly every 6 s while closed, and on a phone slides away while the page scrolls
   down. */

.bc-floating { position: fixed; right: 16px; bottom: 16px; z-index: 1020; display: block;
    transition: opacity var(--bc-duration), visibility var(--bc-duration), transform var(--bc-duration-slow) var(--bc-ease); }
.bc-hero-bar-in-view .bc-floating:not([open]), .bc-footer-end-in-view .bc-floating:not([open]) { visibility: hidden; opacity: 0; }
.bc-floating-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--bc-primary); color: var(--bc-on-primary); box-shadow: 0 8px 24px rgba(20, 30, 15, 0.25); cursor: pointer; list-style: none; transition: background-color var(--bc-duration), transform var(--bc-duration); }
.bc-floating-button::-webkit-details-marker { display: none; }
.bc-floating-button:hover { background: var(--bc-primary-hover); transform: translateY(-2px); }
.bc-floating-icon { display: inline-flex; transition: transform var(--bc-duration), opacity var(--bc-duration); }
.bc-floating-icon.is-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.bc-floating[open] .bc-floating-icon.is-open { opacity: 0; transform: rotate(90deg); }
.bc-floating[open] .bc-floating-icon.is-close { opacity: 1; transform: none; }
/* The halo: a ring that widens and fades, once every 6 s, while the menu is closed. */
@keyframes bc-halo { 0% { opacity: 0.55; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1.6); } }
.bc-floating:not([open]) .bc-floating-button::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bc-primary); opacity: 0; pointer-events: none; animation: bc-halo 6s var(--bc-ease) 3s infinite; }
.bc-floating-menu { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: 0.25rem; min-width: 15rem; padding: 0.5rem;
    border: 1px solid var(--bc-border); border-radius: var(--bc-radius); background: var(--bc-surface-raised); box-shadow: var(--bc-shadow-3); }
.bc-floating[open] .bc-floating-menu { animation: bc-menu-in var(--bc-duration) var(--bc-ease) both; }
@keyframes bc-menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bc-floating-item { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.5rem 0.875rem; border: 0; border-radius: var(--bc-radius-sm);
    background: transparent; color: var(--bc-text); font-weight: 600; text-align: left; text-decoration: none; }
.bc-floating-item svg { flex: none; color: var(--bc-primary); }
.bc-floating-item:hover, .bc-floating-item:focus-visible { background: var(--bc-bg-soft); color: var(--bc-primary); }
@media (max-width: 767.98px) {
    .bc-floating.is-tucked:not([open]) { transform: translateY(calc(100% + 24px)); }
}

.bc-back-to-top { position: fixed; left: 16px; bottom: 16px; z-index: 1020; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid var(--bc-border); border-radius: 50%; background: var(--bc-surface); color: var(--bc-text); box-shadow: var(--bc-shadow-1); }

/* Pictures, the lightbox, carousels and embedded frames ------------------------------------------ */

.bc-rounded-picture { display: block; width: 100%; height: auto; border-radius: var(--bc-radius); }
.bc-lead-photo { display: block; overflow: hidden; border-radius: var(--bc-radius); }
.bc-lead-photo img { width: 100%; height: auto; }
.bc-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.bc-gallery-grid a { display: block; overflow: hidden; border-radius: var(--bc-radius-sm); aspect-ratio: 6 / 5; background: var(--bc-bg-soft); }
.bc-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow); }
.bc-gallery-grid a:is(:hover, :focus-visible) img { transform: scale(1.1); }

.bc-lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--bc-radius); background: #0b100c; }
.bc-lightbox::backdrop { background: rgba(8, 12, 9, 0.85); }
.bc-lightbox figure { margin: 0; }
/* The frame has the picture's proportions before it arrives (site.js sets the ratio and the
   original's width); the page's own thumbnail fills it, blurred, under the sharp picture, which
   fades in when loaded, and a ring turns while it loads (D11). */
/* A wide picture on a phone is short: the frame keeps 180 px, so its close button and arrows never meet. */
.bc-lightbox-frame { position: relative; overflow: hidden; width: min(var(--bc-lightbox-width, 1200px), 1200px, 94vw, calc(84vh * var(--bc-lightbox-ratio, 1.5))); aspect-ratio: var(--bc-lightbox-ratio, 1.5); min-height: min(180px, 84vh); margin: 0 auto; background: #0b100c; }
.bc-lightbox-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bc-lightbox-preview { object-fit: cover; filter: blur(8px); transform: scale(1.04); }
.bc-lightbox-picture { object-fit: contain; opacity: 0; transition: opacity var(--bc-duration-slow); }
.bc-lightbox-frame.is-loaded .bc-lightbox-picture { opacity: 1; }
.bc-lightbox-loading { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: bc-spin 0.9s linear infinite, bc-show 0.2s 0.25s forwards; }
.bc-lightbox-frame.is-loaded .bc-lightbox-loading { display: none; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
@keyframes bc-show { to { opacity: 1; } }
/* A long caption wraps to the picture's width instead of widening the dialog. */
.bc-lightbox figcaption { width: 0; min-width: 100%; padding: 0.75rem 1rem; color: #e6ebe1; text-align: center; }
/* The buttons (D11, the owner's review): a frosted dark disc with a light ring and a shadow, so they
   show on a white drawing and on a dark render alike; the brand fill on hover. On the picture. */
.bc-lightbox-button { position: absolute; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(12, 17, 13, 0.62); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--bc-duration-fast), border-color var(--bc-duration-fast), color var(--bc-duration-fast), transform var(--bc-duration-fast); }
.bc-lightbox-button:hover { border-color: transparent; background: var(--bc-primary); color: var(--bc-on-primary); }
.bc-lightbox-button:active { transform: scale(0.94); }
.bc-lightbox-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-lightbox-button[hidden] { display: none; }
.bc-lightbox-close { top: 12px; right: 12px; }
.bc-lightbox-step { top: 50%; margin-top: -22px; }
.bc-lightbox-step.is-previous { left: 12px; }
.bc-lightbox-step.is-next { right: 12px; }
/* The arrows' icons nudge towards where they lead. */
.bc-lightbox-step.is-previous:hover svg { transform: translateX(-2px); }
.bc-lightbox-step.is-next:hover svg { transform: translateX(2px); }
.bc-lightbox-step svg { transition: transform var(--bc-duration-fast); }
@media (min-width: 768px) {
    .bc-lightbox-button { width: 48px; height: 48px; }
    .bc-lightbox-step { margin-top: -24px; }
    .bc-lightbox-close { top: 16px; right: 16px; }
    .bc-lightbox-step.is-previous { left: 16px; }
    .bc-lightbox-step.is-next { right: 16px; }
}

/* A carousel's buttons (three since the pause button) sit in the corner of the heading before it:
   from 768 px that heading keeps room for them; on a phone they take their own row above the
   cards (U4-R12c review: they covered a long heading). */
.bc-carousel { position: relative; }
.bc-carousel-controls { position: absolute; top: -3.5rem; right: 0; display: flex; gap: 0.25rem; }
/* Borderless icons, as the hero's (D8a); a button with nowhere to go is hidden, not greyed. */
.bc-carousel-controls .bc-icon-button:disabled { visibility: hidden; }
/* No scrollbar (the owner's mark): the strip still scrolls by touch, by the buttons and by keyboard.
   The edge where more cards wait fades out instead of a hard cut (site.js marks it). */
.bc-carousel-track { display: flex; gap: 1rem; margin: 0; padding: 0.25rem 0 0.75rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bc-carousel-track::-webkit-scrollbar { display: none; }
.bc-carousel:not(.is-pictures).has-more-after .bc-carousel-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
.bc-carousel-item { flex: 0 0 min(300px, 82%); scroll-snap-align: start; }
.bc-carousel-item .bc-feature-card img { aspect-ratio: 16 / 10; }
/* A picture carousel (D8a): one segment per picture, centred at the picture's foot, the current one
   filling; a small pause icon beside them; no previous or next over the photo (the owner's mark). */
.bc-carousel.is-pictures .bc-carousel-controls { top: auto; right: auto; bottom: 0.875rem; left: 50%; z-index: 1; align-items: center; gap: 0.5rem; transform: translateX(-50%); }
.bc-carousel.is-pictures [data-bc-carousel-previous], .bc-carousel.is-pictures [data-bc-carousel-next] { display: none; }
.bc-carousel.is-pictures .bc-carousel-segment { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); }
.bc-carousel.is-pictures .bc-carousel-segment .bc-progress-fill { background: var(--bc-on-photo); }
.bc-carousel.is-pictures [data-bc-carousel-pause] { width: 32px; height: 32px; color: var(--bc-on-photo); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.bc-carousel.is-pictures [data-bc-carousel-pause]:hover { background: rgba(255, 255, 255, 0.18); color: var(--bc-on-photo); }
.bc-carousel.is-pictures [data-bc-carousel-pause] .bc-pause-icon { transform: scale(0.8); }
.bc-carousel.is-pictures .bc-carousel-track { padding: 0; }
.bc-carousel.is-pictures .bc-carousel-item { flex-basis: 100%; }
.bc-carousel-picture { overflow: hidden; border-radius: var(--bc-radius); }
.bc-carousel-picture img { display: block; width: 100%; height: auto; }
.bc-carousel.is-icons .bc-feature-card img { width: 64px; height: 64px; margin: 1.25rem 1.25rem 0; aspect-ratio: auto; object-fit: contain; }
.bc-carousel.is-cards .bc-carousel-item { flex-basis: min(320px, 85%); }
/* From 992 px the home page's three reviews and three posts (D4) fill the row, a third each. */
@media (min-width: 992px) { .bc-carousel.is-cards .bc-carousel-item { flex-basis: calc((100% - 2rem) / 3); } }
.bc-carousel.is-cards .bc-item-card { height: 100%; }
@media (min-width: 768px) { :is(h2, h3):has(+ .bc-carousel:not(.is-pictures)) { padding-right: 10rem; } }
@media (max-width: 767.98px) { .bc-carousel:not(.is-pictures) .bc-carousel-controls { position: static; justify-content: flex-end; margin: -0.25rem 0 0.75rem; } }

/* A map (the contact page, a project; beside the content as on the legacy pages) and a video. */
.bc-map-frame { overflow: hidden; border-radius: var(--bc-radius); }
.bc-map-frame iframe { display: block; width: 100% !important; height: auto; max-height: 480px; aspect-ratio: 16 / 9; border: 0; }
.bc-map-side { border-radius: var(--bc-radius); }
/* Focus moves into the map, so its frame shows the ring. */
.bc-map-frame:focus-within, .bc-map-frame.is-focused, .bc-video-frame.is-focused { outline: 3px solid var(--bc-focus-outline); outline-offset: 2px; }
.bc-map-side iframe { aspect-ratio: 4 / 3 !important; max-height: 340px; }
.bc-video-frame { overflow: hidden; margin-top: 1rem; border-radius: var(--bc-radius); aspect-ratio: 16 / 9; background: #000; }
.bc-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The blog: the post's meta, tags, sharing and author box, and the sidebar ------------------------ */

.bc-article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bc-border); color: var(--bc-muted); font-size: var(--bc-text-sm); }
.bc-article-meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.bc-article-meta a { color: var(--bc-text); font-weight: 600; text-decoration: none; }
.bc-tags, .bc-share { margin-top: 2rem; }
.bc-tags-title { margin-bottom: 0.75rem; font-size: 1rem; }
.bc-tags ul, .bc-share ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bc-tags a { display: inline-block; padding: 0.375rem 0.875rem; border-radius: var(--bc-radius-pill); background: var(--bc-primary-soft); color: var(--bc-link-hover); font-size: var(--bc-text-sm); font-weight: 600; text-decoration: none; }
/* In a project's facts card the services are the cards' compact chips (D11), so several fit a row. */
.bc-facts .bc-tags { margin-top: 1.25rem; }
.bc-facts .bc-tags-title { margin-bottom: 0.5rem; }
.bc-facts .bc-tags ul { gap: 0.375rem; }
.bc-facts .bc-tags a { padding: 0.125rem 0.625rem; font-size: var(--bc-text-xs); line-height: 1.6; transition: background-color var(--bc-duration), color var(--bc-duration); }
.bc-facts .bc-tags a:hover { background: var(--bc-primary); color: var(--bc-on-primary); }
[data-bs-theme="dark"] .bc-facts .bc-tags a:not(:hover) { color: var(--bc-link); }
.bc-share a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.875rem; border: 1px solid var(--bc-border); border-radius: var(--bc-radius-pill); color: var(--bc-text); font-size: var(--bc-text-sm); font-weight: 600; text-decoration: none; }
.bc-share a:hover { border-color: var(--bc-primary); color: var(--bc-primary); }

/* The author box: role, social links, and the site, email and phone lines. Its text column may
   shrink and a long address wraps, so a phone never scrolls sideways (U4-R12d: the email pushed
   posts to 411 px); on a phone the photo sits above. */
.bc-author-box { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2.5rem; padding: var(--bc-card-pad); }
.bc-author-box > div { min-width: 0; }
.bc-author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.bc-author-box a, .bc-author-contact span { overflow-wrap: anywhere; }
.bc-author-box .bc-social { margin: 0.25rem 0 0.5rem; }
.bc-author-name { margin: 0 0 0.25rem; font-size: var(--bc-h4); font-weight: 700; }
.bc-author-name a { color: var(--bc-text); text-decoration: none; }
.bc-author-role { color: var(--bc-muted); font-size: var(--bc-text-sm); font-weight: 500; }
.bc-author-contact { margin: 0.5rem 0 0; }
.bc-author-contact li { margin-bottom: 0.375rem; font-size: var(--bc-text-sm); }
@media (max-width: 575.98px) { .bc-author-box { flex-direction: column; } }

.bc-sidebar { position: sticky; top: calc(var(--bc-header-height) + 24px); display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 991.98px) { .bc-sidebar { position: static; } }
.bc-toc { padding: var(--bc-card-pad-sm) var(--bc-card-pad-sm) 1rem; }
.bc-toc-title { margin: 0 0 0.75rem; font-weight: 700; }
.bc-toc ol { max-height: 50vh; margin: 0; padding: 0 0.25rem 0 0; overflow: auto; list-style: none; counter-reset: toc;
    scrollbar-width: thin; scrollbar-color: var(--bc-border-strong) transparent; }
/* A thin scrollbar in the border tokens, with no arrow buttons (D10, §14.15). */
.bc-toc ol::-webkit-scrollbar { width: 6px; }
.bc-toc ol::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--bc-border-strong); }
.bc-toc ol::-webkit-scrollbar-track, .bc-toc ol::-webkit-scrollbar-button { display: none; background: transparent; }
.bc-toc li { margin-bottom: 0.25rem; }
.bc-toc li.is-sub { padding-left: 1rem; }
.bc-toc a { display: block; padding: 0.25rem 0.5rem; border-radius: var(--bc-radius-sm); color: var(--bc-muted); font-size: var(--bc-text-sm); text-decoration: none; }
.bc-toc a:hover { background: var(--bc-bg-soft); color: var(--bc-primary); }
/* The sidebar card's whole text sits on its dark background, stored inline colours included. */
/* The "start a project" box beside posts, services and company pages (D10, §14.15): a soft green
   card with a lime line along its top in light, a raised dark card in dark; it was near-black in
   both themes, the only black block in a light page. */
.bc-cta-card { padding: var(--bc-card-pad); border-top: 4px solid var(--bc-brand); background: var(--bc-primary-soft); color: var(--bc-text); }
[data-bs-theme="dark"] .bc-cta-card { background: var(--bc-surface-raised); }
.bc-cta-title { margin-bottom: 0.75rem; color: var(--bc-primary); font-size: var(--bc-h4); }
.bc-cta-card .bc-prose { margin-bottom: 1rem; color: var(--bc-text); font-size: var(--bc-text-sm); line-height: 1.65; }
.bc-cta-card .bc-prose p { margin-bottom: 0.5rem; }
.bc-cta-card .bc-prose [style*="color"] { color: inherit !important; }
.bc-cta-card .bc-prose a { color: var(--bc-link); }

/* Company pages and contact (U4-R11) --------------------------------------------------------- */

.bc-awards { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.bc-awards li { padding: 1rem 1.25rem; border-left: 3px solid var(--bc-primary); background: var(--bc-bg-soft); border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0; }
.bc-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.bc-partners img { max-width: 160px; max-height: 64px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--bc-duration), opacity var(--bc-duration); }
.bc-partners a:hover img, .bc-partners a:focus-visible img { filter: none; opacity: 1; }
.bc-side-nav { padding: var(--bc-card-pad-sm); }
.bc-side-nav ul { margin: 0; padding: 0; list-style: none; }
.bc-side-nav a { display: block; padding: 0.4rem 0 0.4rem 0.75rem; border-left: 2px solid transparent; color: var(--bc-muted); text-decoration: none; }
.bc-side-nav a:hover { color: var(--bc-primary); }
.bc-side-nav a[aria-current] { border-left-color: var(--bc-primary); color: var(--bc-text); font-weight: 600; }

/* The policy pages' list (U4-R16): one card per page, the whole card a link. */
.bc-policy-intro { margin-bottom: var(--bc-space-6); }
.bc-policy-list { display: grid; gap: var(--bc-space-4); margin: 0; padding: 0; list-style: none; }
.bc-policy-row { position: relative; padding: var(--bc-card-pad); transition: border-color var(--bc-duration-fast), box-shadow var(--bc-duration-fast); }
.bc-policy-row:hover { border-color: var(--bc-primary); box-shadow: var(--bc-shadow-2); }
.bc-policy-title { margin: 0; font-size: var(--bc-h4); line-height: 1.3; }
.bc-policy-title a { color: var(--bc-text); text-decoration: none; }
.bc-policy-row:hover .bc-policy-title a { color: var(--bc-primary); }
.bc-policy-summary { margin: var(--bc-space-2) 0 0; color: var(--bc-muted); }

/* The contact card, over the contact row's photo as on the legacy page. */
.bc-contact-card { padding: var(--bc-card-pad); }
.bc-contact-card .bc-prose li { margin-bottom: 0.25rem; line-height: 1.5; }
/* The details card kept tight, so the contact page's columns meet the form's height (D10c): its stored
   heading is the small subtitle, stored inline sizes are set aside. */
.bc-contact-card .bc-prose :is(h2, h3, h4) { margin: 0 0 0.5rem; font-size: var(--bc-h4); font-weight: 600; letter-spacing: 0; }
.bc-contact-card .bc-prose [style*="font-size"] { font-size: inherit !important; }
.bc-contact-card .bc-prose ul { margin-bottom: 0.5rem; }
.bc-contact-card.has-photo { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; color: #eef2ea; }
.bc-contact-backdrop { position: absolute; inset: 0; z-index: -1; }
.bc-contact-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.bc-contact-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(10, 16, 12, 0.78); }
.bc-contact-logo { display: block; width: auto; max-width: 220px; height: auto; max-height: 44px; margin-bottom: 0.75rem; }
.bc-contact-card .bc-contact-lines { margin-top: 1rem; }
.bc-contact-card.has-photo .bc-prose, .bc-contact-card.has-photo .bc-prose :is(h1, h2, h3, h4, strong) { color: #eef2ea; }
.bc-contact-card.has-photo .bc-prose [style*="color"] { color: inherit !important; }
.bc-contact-card.has-photo .bc-contact-lines a, .bc-contact-card.has-photo .bc-contact-lines span { color: #fff; }
.bc-contact-card.has-photo .bc-contact-lines svg { color: var(--bc-brand); }
.bc-contact-card.has-photo .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.7); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #10200a; --bs-btn-hover-border-color: #fff; }

/* The home page's hero (U4-R12; the look and motion of DESIGN-UPGRADE D8a) ------------------------ */

.bc-hero { position: relative; background: var(--bc-bg); }
.bc-hero-track { display: flex; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bc-hero-track::-webkit-scrollbar { display: none; }
.bc-hero-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.bc-hero-media { overflow: hidden; }
/* A jump of more than one slide fades the strip out and in, instead of scrolling past the others. */
.bc-hero-track { transition: opacity 0.22s ease; }
.bc-hero-track.is-jumping { opacity: 0; }
.bc-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 975; object-fit: cover; }
/* Below 992 px (U4-R12a): the slides are only pictures; the bar (segments and buttons), then the
   intro, sit under them. */
.bc-hero-text { display: none; }
.bc-hero-intro { padding: 1rem 0 0.5rem; }
.bc-hero-title { margin: 0 0 0.5rem; font-size: clamp(1.625rem, 1.1rem + 2.4vw, 3rem); font-weight: 700; line-height: 1.12; }
.bc-hero-lead { margin: 0 0 1.25rem; color: var(--bc-muted); font-size: var(--bc-text-lg); }
.bc-hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bc-hero-buttons .btn-outline-light { --bs-btn-color: var(--bc-primary); --bs-btn-border-color: var(--bc-primary); --bs-btn-hover-bg: var(--bc-primary); --bs-btn-hover-border-color: var(--bc-primary); --bs-btn-hover-color: var(--bc-on-primary); }
.bc-hero-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.5rem; }
/* The bar keeps its place until site.js shows it, so nothing below it shifts. */
.bc-hero-nav.is-waiting { visibility: hidden; }

/* The controls (D8a): thin segments, one per slide, the current one filling over the time it
   shows; borderless icons. No pill behind them (the owner's mark). */
/* One row that shrinks: wrapped rows would lay the enlarged hit areas of one row over the other. */
.bc-hero-dots { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 0.5rem; }
.bc-hero-dots button { flex: 0 1 28px; min-width: 12px; }
.bc-hero-dots button, .bc-carousel-segment { position: relative; width: 28px; height: 3px; padding: 0; border: 0; border-radius: 3px; background: var(--bc-border); overflow: visible; }
.bc-hero-dots button::after, .bc-carousel-segment::after { content: ""; position: absolute; inset: -20px -4px; }
.bc-hero-dots button:hover, .bc-carousel-segment:hover { background: var(--bc-muted); }
.bc-progress-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--bc-primary); transform: scaleX(0); transform-origin: left; }
[aria-current] > .bc-progress-fill { transform: scaleX(1); }
.is-running [aria-current] > .bc-progress-fill { animation: bc-fill var(--bc-progress-duration, 5s) linear both; }
.bc-hero { --bc-progress-duration: 7s; }
@keyframes bc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bc-hero-controls { display: flex; gap: 0.125rem; }
.bc-hero-controls .bc-icon-button { width: 40px; height: 40px; }

/* The caption comes in line by line, the original's flyText: each line rises over 1.2 s and fades in
   over its first half. The pictures do not zoom (the owner, 2026-09-28, §14.11). */
@keyframes bc-fly { 0% { opacity: 0; transform: translateY(40px); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }

@media (min-width: 992px) {
    /* The hero fits the window below the header (U4-R12b), at least 440 px, at most the picture's
       ratio; the pictures cover it, so a banner loses at most a sliver top and bottom. */
    .bc-hero { --bc-hero-height: max(440px, min(50.78vw, calc(100svh - var(--bc-header-height)))); background: var(--bc-dark); }
    .bc-hero-media img { height: var(--bc-hero-height); aspect-ratio: auto; }
    /* The scrim (§14.11, the owner's second review): the picture keeps nearly its own brightness
       (8 %), with a soft oval of shade only behind the text in the lower part. Only a slide with
       text gets it: the banners with their lettering drawn in are never darkened. */
    .bc-hero-slide.has-text .bc-hero-media::after,
    .bc-hero-slide.is-intro .bc-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: radial-gradient(ellipse 50% 40% at 50% 78%, rgba(var(--bc-photo-scrim-rgb), 0.5) 0%, rgba(var(--bc-photo-scrim-rgb), 0.3) 45%, rgba(var(--bc-photo-scrim-rgb), 0) 100%), rgba(var(--bc-photo-scrim-rgb), 0.08); }
    /* The text centred across the picture and set in its lower part, just above the segments (the
       owner's second review), so the faces stay clear. */
    .bc-hero-text, .bc-hero-intro { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: flex-end; height: var(--bc-hero-height); padding: 0 0 clamp(4.5rem, 10vh, 7rem); text-align: center; pointer-events: none; }
    .bc-hero-text { height: 100%; }
    .bc-hero-copy { max-width: 50rem; margin-inline: auto; pointer-events: auto; }
    .bc-hero-title { max-width: 20em; margin-inline: auto; font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); color: var(--bc-on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 24px rgba(0, 0, 0, 0.55); }
    .bc-hero-lead { display: -webkit-box; max-width: 42rem; margin-inline: auto; overflow: hidden; color: var(--bc-on-photo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 16px rgba(0, 0, 0, 0.6); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .bc-hero-buttons { justify-content: center; }
    /* The cross-fade (§14.11): the slides are stacked from the first paint (the server marks the hero
       .is-fading and the first slide .is-current), and site.js fades the current one in, as the
       original did. Switching from the strip after load moved the hidden slides into view, a
       layout shift of 0.057. Without JavaScript a wide screen shows the first slide. */
    .bc-hero.is-fading .bc-hero-track { display: grid; overflow: hidden; scroll-snap-type: none; }
    .bc-hero.is-fading .bc-hero-slide { grid-area: 1 / 1; opacity: 0; transition: opacity 0.8s linear; }
    .bc-hero.is-fading .bc-hero-slide.is-current { z-index: 1; opacity: 1; }
    /* Only the current slide, the next (its picture loads before its turn) and the one fading out
       take part: stacked, the others would be in view and load all their pictures at once. */
    .bc-hero.is-fading .bc-hero-slide:not(.is-current):not(.is-next):not(.is-leaving) { display: none; }
    /* A slide that was left out (a jump to a far segment) fades in from nothing too. Only after the
       first move, so the first slide, the LCP picture, is never faded in on load. */
    @starting-style { .bc-hero.is-fading.has-moved .bc-hero-slide.is-current { opacity: 0; } }
    .bc-hero.is-fading .bc-hero-intro { z-index: 2; transition: opacity 0.8s linear, visibility 0.8s; }
    .bc-hero-buttons .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.75); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #10200a; }
    .bc-hero-intro { transition: opacity 0.35s, visibility 0.35s; }
    .bc-hero[data-bc-current]:not([data-bc-current="0"]) .bc-hero-intro { opacity: 0; visibility: hidden; }
    /* Line by line: the title, the lead, then the buttons. */
    .bc-hero-slide.is-current .bc-hero-text .bc-hero-copy > *,
    .bc-hero.has-moved[data-bc-current="0"] .bc-hero-intro .bc-hero-copy > * { animation: bc-fly 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
    .bc-hero-slide.is-current .bc-hero-text .bc-hero-copy > :nth-child(2),
    .bc-hero.has-moved[data-bc-current="0"] .bc-hero-intro .bc-hero-copy > :nth-child(2) { animation-delay: 0.3s; }
    .bc-hero-slide.is-current .bc-hero-text .bc-hero-copy > :nth-child(3),
    .bc-hero.has-moved[data-bc-current="0"] .bc-hero-intro .bc-hero-copy > :nth-child(3) { animation-delay: 0.4s; }
    /* The controls over the picture (§14.11): the segments and the pause button centred at the
       bottom; the previous and next arrows at the left and right edges, vertically centred, as the
       original's. The layer covers the picture but lets clicks through, except on the controls. */
    .bc-hero-nav { position: absolute; top: 0; right: 0; left: 0; z-index: 3; display: flex; align-items: flex-end; height: var(--bc-hero-height); padding-bottom: 1.75rem; pointer-events: none; }
    .bc-hero-nav-row { justify-content: center; gap: 1rem; padding-top: 0; }
    .bc-hero-dots { flex: 0 1 auto; }
    .bc-hero-dots, .bc-hero-controls { pointer-events: auto; }
    /* Readable on any slide, the white banners included: the segments cast a soft shadow, the pause
       button and the arrows sit on a faint dark disc. */
    .bc-hero-dots button { background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
    .bc-hero-dots button:hover { background: rgba(255, 255, 255, 0.85); }
    .bc-hero-dots .bc-progress-fill { background: var(--bc-on-photo); }
    .bc-hero-controls .bc-icon-button { background: rgba(var(--bc-photo-scrim-rgb), 0.28); color: var(--bc-on-photo); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
    .bc-hero-controls .bc-icon-button:hover { background: rgba(var(--bc-photo-scrim-rgb), 0.5); color: var(--bc-on-photo); }
    .bc-hero-controls .bc-icon-button:is([data-bc-hero-previous], [data-bc-hero-next]) { position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px;
        opacity: 0; transition: opacity var(--bc-duration), background-color var(--bc-duration); }
    .bc-hero-controls [data-bc-hero-previous] { left: clamp(1rem, 2vw, 2.5rem); }
    .bc-hero-controls [data-bc-hero-next] { right: clamp(1rem, 2vw, 2.5rem); }
    .bc-hero-controls :is([data-bc-hero-previous], [data-bc-hero-next]) svg { width: 44px; height: 44px; stroke-width: 1.5; }
    /* Shown while the pointer is over the hero or focus is on them; always on a touch screen. */
    .bc-hero:hover .bc-hero-controls .bc-icon-button:is([data-bc-hero-previous], [data-bc-hero-next]),
    .bc-hero-controls .bc-icon-button:is([data-bc-hero-previous], [data-bc-hero-next]):focus-visible { opacity: 1; }
    @media (hover: none) { .bc-hero-controls .bc-icon-button:is([data-bc-hero-previous], [data-bc-hero-next]) { opacity: 1; } }
    /* The pause button is not shown (the owner's second review), but keyboard users still reach it
       with Tab, and it appears beside the segments while it has focus: a slide show that moves by
       itself must be pausable (WCAG 2.2.2). */
    .bc-hero-controls [data-bc-hero-pause]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.bc-pause-icon { display: block; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.bc-hero.is-stopped .bc-pause-icon, .bc-carousel.is-stopped .bc-pause-icon { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid currentColor; border-right: 0; }

/* The original's pictures (DESIGN-UPGRADE §14.3a) -------------------------------------------------- */

/* The lime frame (the original's img_aboutus): 10 px, 80 % opaque, offset down and left; it slides a
   little when the pointer is on the picture. */
.bc-framed { position: relative; padding: 0 0 20px 20px; }
.bc-framed::before { content: ""; position: absolute; bottom: 0; left: 0; width: calc(100% - 20px); height: calc(100% - 20px); border: 8px solid var(--bc-brand); border-radius: var(--bc-radius-xs); opacity: 0.8; transition: transform var(--bc-duration-slow) cubic-bezier(0.2, 0.7, 0.2, 1); }
.bc-framed > * { position: relative; }
.bc-framed:hover::before { transform: translate(-6px, 6px); }
.bc-framed .bc-carousel-picture, .bc-framed .bc-rounded-picture { border-radius: var(--bc-radius-xs); }
@media (min-width: 576px) {
    .bc-framed { padding: 0 0 30px 30px; }
    .bc-framed::before { width: calc(100% - 30px); height: calc(100% - 30px); border-width: 10px; }
}

/* The showcase (the original's slider-main and slider-sub): the large picture, then 4 thumbnails in
   a strip; the current one dimmed, as in the original, with a lime line under it. */
.bc-showcase-main { position: relative; display: block; overflow: hidden; border-radius: var(--bc-radius-xs); background: var(--bc-bg-soft); }
.bc-showcase-main img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 533; object-fit: cover; transition: opacity 0.25s ease, transform var(--bc-duration-slow); }
.bc-showcase-main.is-changing img { opacity: 0; }
.bc-showcase-main:is(:hover, :focus-visible) img { transform: scale(1.03); }
.bc-showcase-thumbs { display: flex; gap: 0.75rem; margin: 0.75rem 0 0; padding: 0 0 0.25rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bc-showcase-thumbs::-webkit-scrollbar { display: none; }
.bc-showcase-thumbs li { flex: 0 0 calc((100% - 2.25rem) / 4); scroll-snap-align: start; }
.bc-showcase-thumbs a { position: relative; display: block; overflow: hidden; border-radius: var(--bc-radius-xs); aspect-ratio: 6 / 5; background: var(--bc-bg-soft); }
.bc-showcase-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bc-duration-slow), opacity var(--bc-duration); }
.bc-showcase-thumbs a:is(:hover, :focus-visible) img { transform: scale(1.1); }
.bc-showcase-thumbs a[aria-current] img { opacity: 0.35; }
/* The strip's pictures wait for the large one (site.js marks .is-ready), so it loads alone: a lazy
   picture that is not displayed is not fetched, and the 6:5 boxes keep their place (D6c). */
[data-bc-js] .bc-showcase:not(.is-ready) .bc-showcase-thumbs picture { display: none; }
.bc-showcase.is-ready .bc-showcase-thumbs img { animation: bc-fade-in var(--bc-duration) ease-out; }
@keyframes bc-fade-in { from { opacity: 0; } }
.bc-showcase-thumbs a[aria-current]::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--bc-brand); }
@media (max-width: 575.98px) { .bc-showcase-thumbs li { flex-basis: calc((100% - 1.5rem) / 3.4); } }

/* The shine (the original's hover_sang): a white sweep across a card's picture on hover and on
   keyboard focus. */
.bc-item-media, .bc-row-media, .bc-gallery-grid a, .bc-testimonial-project { position: relative; }
:is(.bc-item-media, .bc-row-media, .bc-tile, .bc-gallery-grid a, .bc-showcase-thumbs a, .bc-testimonial-project)::before {
    content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 50%; height: 100%; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--bc-shine) 100%); transform: translateX(-170%) skewX(-25deg); }
:is(.bc-item-card:is(:hover, :focus-within) .bc-item-media, .bc-row-item:is(:hover, :focus-within) .bc-row-media, .bc-tile:is(:hover, :focus-visible), .bc-gallery-grid a:is(:hover, :focus-visible), .bc-showcase-thumbs a:is(:hover, :focus-visible), .bc-testimonial-project:is(:hover, :focus-visible))::before {
    transform: translateX(270%) skewX(-25deg); transition: transform 1s ease; }

/* Picture frames (DESIGN-UPGRADE D1): a fixed ratio by use; a drawing sits whole on white, in both
   themes, with a hairline border. ------------------------------------------------------------------ */

.bc-frame { position: relative; display: block; overflow: hidden; border-radius: var(--bc-radius); background: var(--bc-bg-soft); }
.bc-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-frame.is-16x10 { aspect-ratio: 16 / 10; }
.bc-frame.is-4x3 { aspect-ratio: 4 / 3; }
.bc-frame.is-1x1 { aspect-ratio: 1; }
.bc-frame.is-drawing { padding: var(--bc-space-3); border: 1px solid var(--bc-border); background: #fff; }
.bc-frame.is-drawing img { object-fit: contain; }

/* The style guide (preview only) --------------------------------------------------------------- */

.bc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.bc-swatches li { display: grid; grid-template-columns: 48px 1fr; column-gap: 0.75rem; align-items: center; }
.bc-swatches code { color: var(--bc-text); font-size: var(--bc-text-sm); }
.bc-swatch { grid-row: span 2; width: 48px; height: 48px; border: 1px solid var(--bc-border); border-radius: var(--bc-radius-sm); }
.bc-swatch.is-primary { background: var(--bc-primary); }
.bc-swatch.is-brand { background: var(--bc-brand); }
.bc-swatch.is-brand-strong { background: var(--bc-brand-strong); }
.bc-swatch.is-link { background: var(--bc-link); }
.bc-swatch.is-text { background: var(--bc-text); }
.bc-swatch.is-muted { background: var(--bc-muted); }
.bc-swatch.is-bg { background: var(--bc-bg); }
.bc-swatch.is-bg-soft { background: var(--bc-bg-soft); }
.bc-swatch.is-surface-raised { background: var(--bc-surface-raised); }
.bc-swatch.is-border { background: var(--bc-border); }
.bc-swatch.is-band { background: var(--bc-band); }
.bc-swatch.is-dark { background: var(--bc-dark); }
.bc-swatch.is-danger { background: var(--bc-danger); }
.bc-type-samples > * { margin-bottom: 1rem; }
.bc-guide-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* Motion: the reveal on scroll, and reduced motion ------------------------------------------------ */

/* site.js marks what starts below the first screen, then shows it once. Hidden at once (no
   transition), so nothing fades out first; only the showing is animated. */
.bc-reveal { opacity: 0; transform: translateY(var(--bc-reveal-distance)); }
.bc-reveal.is-shown { opacity: 1; transform: none; transition: opacity var(--bc-duration-reveal) ease, transform var(--bc-duration-reveal) cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Cards side by side come in one after another, 60 ms apart, at most six steps (§14.7, M2). */
.bc-reveal.bc-reveal-2 { transition-delay: 0.06s; }
.bc-reveal.bc-reveal-3 { transition-delay: 0.12s; }
.bc-reveal.bc-reveal-4 { transition-delay: 0.18s; }
.bc-reveal.bc-reveal-5 { transition-delay: 0.24s; }
.bc-reveal.bc-reveal-6 { transition-delay: 0.3s; }
@media print { .bc-reveal { opacity: 1; transform: none; } }

/* Page changes cross-fade (§14.7, M4): between two pages of this layout only, since the legacy
   pages do not opt in; browsers without view transitions change pages as before. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

/* A post's reading progress (§14.7, M5): a lime line under the header, filled by the page's scroll.
   Absent where scroll-driven animations are unsupported, and with reduced motion. */
.bc-read-progress { display: none; }
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .bc-read-progress { position: fixed; top: var(--bc-header-height); right: 0; left: 0; z-index: 1031; display: block; height: 3px; background: var(--bc-brand);
            transform: scaleX(0); transform-origin: left; pointer-events: none; animation: bc-read linear both; animation-timeline: scroll(root block); }
    }
}
@keyframes bc-read { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .btn:hover, .btn:hover svg:last-child, .bc-card:hover, .bc-floating-button:hover, .bc-arrow-link:hover svg { transform: none; }
    .bc-reveal { opacity: 1; transform: none; }
    /* The lightbox's loading ring stands still, but shows (D11). */
    .bc-lightbox-loading { opacity: 1; }
    /* Without their transition the picture zooms and the frame's shift would jump; they stay still. */
    :is(.bc-item-media, .bc-row-media, .bc-tile, .bc-gallery-grid a, .bc-showcase-main, .bc-showcase-thumbs a, .bc-testimonial-project, .bc-lead-post-media, .bc-side-post-media) img,
    .bc-framed:hover::before, .bc-tile-name { transform: none !important; }
    :is(.bc-item-media, .bc-row-media, .bc-tile, .bc-gallery-grid a, .bc-showcase-thumbs a, .bc-testimonial-project, .bc-lead-post-media, .bc-side-post-media)::before { display: none; }
}