/* ===================================================================
   Business pages — 2026-11-12 (package 2026-11-12-business-pages)
   -------------------------------------------------------------------
   Loaded only by includes/biz-page.php, i.e. only by:
   /installation-and-service, /wax-setting-machine-comparison,
   /book-a-demo, /become-a-dealer, /catalogue, /international-buyers,
   /for-jewellery-retailers, /for-casting-units,
   /for-lab-grown-diamond-jewellery.

   Design (ui-ux-pro-max): "Trust & Authority + Conversion" landing
   pattern — credibility hero, proof, solution, one clear CTA path —
   in the Minimalism & Swiss style the DB returns for industrial B2B:
   white space, strict grid, one accent for the CTA. Builds on site.css
   tokens only (--ink, --brand-700, --accent, --line, --r-lg …); the
   hero follows the /contact hero so the site reads as one system.

   Contrast (computed):
     hero ground --ink-900 #14161c (worst case)
       h1 #fff 17.9:1 · answer #d5d8df 13.0:1 · meta rgba(255,255,255,.72) ~10:1
       eyebrow / fact label #fce7f3 15.6:1
     light sections: small magenta text uses --brand-700 #a81264 (7.4:1 on
     white). site.css's .link-arrow is --brand #e2208c (4.36:1, below AA),
     so it is re-coloured inside these pages.
   Touch: every link row, chip and button ≥ 44 px tall, ≥ 8 px apart.
   Focus: visible outlines (white on dark, ink on light).
   Motion: transitions ≤ 200 ms on colour/transform only; none under
   prefers-reduced-motion. No data-aos, no sticky.
   =================================================================== */

/* ---- Hero ------------------------------------------------------------- */
.bz-hero-wrap { padding-block: clamp(16px, 2vw, 32px) clamp(24px, 3vw, 48px); }

.bz-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--ink) 0%, var(--ink-900) 60%, #101826 100%);
    color: #fff;
    padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
}
.bz-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55% 75% at 92% 0%, rgba(29,78,216,.22), transparent 62%),
        radial-gradient(45% 65% at 0% 100%, rgba(226,32,140,.18), transparent 60%);
}
.bz-eyebrow { color: var(--brand-tint-2); }
.bz-eyebrow::before { background: var(--brand-tint-2); }

.bz-h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 10px;
    text-wrap: balance;
}
.bz-sub {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
    color: rgba(255,255,255,.86);
    margin: 0 0 20px;
}
.bz-answer {
    color: #d5d8df;
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 62ch;
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--brand);
}
.bz-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bz-hero-actions a { min-height: 48px; white-space: normal; text-align: center; line-height: 1.25; }
.bz-hero-actions .btn-ghost { border-color: rgba(255,255,255,.55); }
.bz-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bz-meta { margin-top: 20px; font-size: .86rem; color: rgba(255,255,255,.72); }

/* Hero side panel: key facts */
.bz-facts {
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    padding: 20px;
}
.bz-facts-title {
    font-family: var(--font-body);
    font-size: .74rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-tint-2);
    margin: 0 0 12px;
}
.bz-facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bz-fact {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #fff;
    text-decoration: none;
}
.bz-fact--link { transition: background .2s ease; }
.bz-fact--link:hover { background: rgba(255,255,255,.1); color: #fff; }
.bz-fact-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-tint-2); }
.bz-fact-value { font-weight: 700; font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.bz-fact-note { font-size: .85rem; color: rgba(255,255,255,.72); line-height: 1.45; }

/* ---- Section heads ---------------------------------------------------- */
.bz-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.bz-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 12px;
    text-wrap: balance;
}
.bz-lede { color: var(--ink-70); font-size: 1rem; line-height: 1.7; max-width: 66ch; margin: 0; }
.bz-lede a, .bz-prose a, .bz-note a, .bz-table a { color: var(--brand-700); }
.bz-kicker {
    font-family: var(--font-body);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-700);
    margin: 28px 0 14px;
}

/* ---- Cards ------------------------------------------------------------ */
.bz-card {
    height: 100%;
    display: flex; flex-direction: column;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.section-alt .bz-card { background: var(--surface); }
.bz-card-tag {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-700);
    margin: 0 0 8px;
}
.bz-card-title {
    font-family: var(--font-body);
    font-size: 1.08rem; font-weight: 700; line-height: 1.35;
    color: var(--ink);
    margin: 0 0 8px;
}
.bz-card-title a { color: inherit; text-decoration: none; }
.bz-card-title a:hover { color: var(--brand-700); text-decoration: underline; }
.bz-card-text { font-size: .95rem; line-height: 1.65; color: var(--ink-70); margin: 0 0 12px; }
.bz-card-list { margin: 0 0 12px; padding-left: 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--ink-70); }
.bz-card-list li + li { margin-top: 4px; }
.bz-card-list a { color: var(--brand-700); }
.bz-card-foot { margin: auto 0 0; padding-top: 4px; }
.bz-section .link-arrow, .bz-card .link-arrow { color: var(--brand-700); min-height: 44px; }

/* ---- Numbered steps --------------------------------------------------- */
.bz-steps {
    list-style: none; margin: 0; padding: 0;
    counter-reset: bz-step;
    display: grid; gap: 4px;
}
.bz-steps li { counter-increment: bz-step; position: relative; padding: 0 0 18px 52px; }
.bz-steps li::before {
    content: counter(bz-step);
    position: absolute; left: 0; top: 0;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: #fff;
    font-weight: 700; font-size: .9rem;
}
.bz-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 16px; top: 38px; bottom: 2px;
    width: 2px; background: var(--line);
}
.bz-step-title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 5px 0 4px; }
.bz-step-text { font-size: .94rem; line-height: 1.65; color: var(--ink-70); margin: 0; }
@media (min-width: 992px) {
    .bz-steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .bz-steps--grid li::after { display: none; }
}

/* ---- Tables (scroll inside the wrap on phones, never the page) -------- */
.bz-table { min-width: 640px; }
.bz-table th[scope="row"] { min-width: 150px; }
.bz-table td, .bz-table th { vertical-align: top; }
.spec-table-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Checklist -------------------------------------------------------- */
.bz-checks {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 12px 28px;
}
@media (min-width: 768px) { .bz-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bz-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: .98rem; line-height: 1.55; color: var(--ink-70); }
.bz-check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--brand-700); }

/* ---- Link rows -------------------------------------------------------- */
.bz-links {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 768px) { .bz-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bz-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bz-link {
    display: flex; align-items: center; gap: 14px;
    height: 100%; min-height: 64px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.bz-link:hover { border-color: var(--brand-700); background: var(--brand-tint); color: var(--ink); }
.bz-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bz-link-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bz-link-label { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.bz-link-note { font-size: .88rem; color: var(--ink-70); line-height: 1.45; }
.bz-link-go { flex: 0 0 auto; width: 20px; height: 20px; color: var(--brand-700); transition: transform .2s ease; }
.bz-link:hover .bz-link-go { transform: translateX(3px); }

/* ---- Prose, notes, sources -------------------------------------------- */
.bz-prose { max-width: 72ch; }
.bz-prose p { font-size: 1rem; line-height: 1.75; color: var(--ink-70); }
.bz-note {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--accent-tint);
    border: 1px solid #d6e2ff;
    color: var(--ink-800);
    font-size: .95rem; line-height: 1.65;
    max-width: 900px;
}
.bz-note-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.bz-source { margin: 14px 0 0; font-size: .85rem; color: var(--ink-70); max-width: 900px; }

/* ---- Enquiry: direct lines beside the form ---------------------------- */
.bz-direct { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bz-direct-link {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-weight: 700; font-size: .92rem;
    text-decoration: none;
    transition: border-color .2s ease;
}
.bz-direct-link:hover { border-color: var(--brand-700); color: var(--ink); }
.bz-direct-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bz-ico { width: 22px; height: 22px; }
.bz-ico-sm { width: 18px; height: 18px; color: var(--brand-700); }

/* ---- Page photograph (under the hero) --------------------------------- */
.bz-figure-wrap { padding-bottom: clamp(8px, 2vw, 16px); }
.bz-figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-2) 100%);
    overflow: hidden;
}
.bz-figure img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.bz-figure--narrow { background: var(--surface-2); }
.bz-figure--narrow img { max-height: 420px; padding: clamp(16px, 2.5vw, 32px); mix-blend-mode: multiply; }   /* product shots on off-white merge into the frame */
.bz-figure figcaption {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-size: .9rem; line-height: 1.55; color: var(--ink-70);
}
.bz-figure figcaption::before {
    content: ""; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-700);
}

/* ---- Proof band (Trust & Authority: hero > proof > solution > CTA) ----- */
.bz-proof-wrap { padding: clamp(8px, 1.5vw, 16px) 0 clamp(8px, 2vw, 20px); }
.bz-proof {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) { .bz-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bz-proof-item {
    display: flex; flex-direction: column; gap: 4px; height: 100%;
    min-height: 44px;
    padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface);
    color: var(--ink); text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.bz-proof-item:hover { border-color: var(--brand-700); color: var(--ink); transform: translateY(-2px); }
.bz-proof-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bz-proof-value {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.15;
    color: var(--ink);
}
.bz-proof-label { font-size: .84rem; line-height: 1.45; color: var(--ink-70); }

/* ---- Mid-page call to action ------------------------------------------ */
.bz-cta-wrap { padding: clamp(8px, 2vw, 24px) 0; }
.bz-cta {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
    padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3.5vw, 48px);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--ink-900) 0%, #101826 100%);
    color: #fff;
}
.bz-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 120% at 100% 0%, rgba(29,78,216,.25), transparent 60%);
}
.bz-cta-copy { flex: 1 1 360px; min-width: 0; }
.bz-cta-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.2;
    color: #fff; margin: 0 0 8px;
}
.bz-cta-text { margin: 0; color: #d5d8df; font-size: .98rem; line-height: 1.65; max-width: 60ch; }
.bz-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bz-cta-actions .btn-accent, .bz-cta-actions .btn-ghost { min-height: 48px; }
.bz-cta-actions .btn-ghost { border-color: rgba(255,255,255,.55); }
.bz-cta-call {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px;
    color: #fff; font-weight: 700; text-decoration: none;
}
.bz-cta-call .bz-ico-sm { color: var(--brand-tint-2); }
.bz-cta-call:hover { color: #fff; text-decoration: underline; }
.bz-cta a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- Catalogue page previews ------------------------------------------ */
.bz-thumbs {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .bz-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .bz-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bz-thumb {
    display: flex; flex-direction: column; gap: 8px; height: 100%;
    padding: 10px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface);
    color: var(--ink); text-decoration: none;
    transition: border-color .2s ease;
}
.bz-thumb:hover { border-color: var(--brand-700); color: var(--ink); }
.bz-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bz-thumb img { width: 100%; height: auto; border-radius: 8px; background: var(--surface-3); }
.bz-thumb-label { font-size: .86rem; font-weight: 700; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .bz-thumb, .bz-proof-item { transition: none; }
    .bz-proof-item:hover { transform: none; }
    .bz-fact--link, .bz-link, .bz-link-go, .bz-direct-link { transition: none; }
    .bz-link:hover .bz-link-go { transform: none; }
}