/* ============================================================================
   service-variants.css
   ----------------------------------------------------------------------------
   Per-page structural overrides for the five construction service pages so
   each one reads as its own design instead of a copy of the shared template.

   Loaded AFTER services.css / bookkeeping.css. Every block is scoped to a
   page-modifier class on the .qb-int-page root:

       .svc-controller   service-2  Controller Services   accent #0a6b7a
       .svc-cfo          service-3  CFO Services           accent #0f766e
       .svc-tax          service-4  Tax Planning & Filing  accent #128a6e
       .svc-systems      service-5  Systems & Integration  accent #1f8a9c
       .svc-hub          /services  umbrella page          accent #009282

   No page copy is changed — only the presentation of the shared components
   (hero, two-column, problem cards, scope cards, process/timeline) is
   restructured per page. Each accent is set via inline --qbi-accent on the
   root so every accent-driven element re-themes automatically.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   HEADER CTA BREATHING ROOM (all redesigned pages)
   The nav's "Schedule a Free Consultation" button is bottom-aligned in the
   bar, so on the dark-hero pages it sat almost flush against the hero with no
   gap. Add bottom padding to the nav row so the button clears the hero with a
   clear, visible white band beneath it. Scoped to the redesigned pages only
   (svc-redesign covers service-2..5 + the umbrella; bookkeeping-page covers
   service-1) so the global nav elsewhere is untouched.
   ---------------------------------------------------------------------------- */
body.svc-redesign .nav-inner,
body.bookkeeping-page .nav-inner {
    padding-top: 14px;
    padding-bottom: 24px;
}


/* ----------------------------------------------------------------------------
   STICKY CALL + WHATSAPP — expand-on-hover pill banners (all redesigned pages)
   Ported from the contact page's .cr-stick component (contact.css is scoped to
   .contact-page, so the styles don't reach the service pages). Re-scoped here
   under .qb-int-page. The resting call pill uses the page's own --qbi-accent so
   the icon matches each page's teal tone; WhatsApp stays green. The pages use
   the .cr-stick-* markup for this to apply.
   ---------------------------------------------------------------------------- */
.qb-int-page .cr-stick-contact {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    z-index: 9997;
}
.qb-int-page .cr-stick-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
    height: 48px;
    border-radius: 26px;
    color: #ffffff;
    text-decoration: none;
    background: var(--qbi-accent);
    border: none;
    overflow: hidden;
    box-shadow:
        0 6px 16px rgba(0, 41, 58, 0.32),
        0 2px 6px rgba(0, 146, 130, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition:
        width 0.36s cubic-bezier(0.2, 0.85, 0.2, 1),
        background 0.22s ease,
        box-shadow 0.24s ease;
}
.qb-int-page .cr-stick-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 12px 0 18px;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition:
        opacity 0.2s ease 0.06s,
        transform 0.28s cubic-bezier(0.2, 0.85, 0.2, 1) 0.04s;
}
.qb-int-page .cr-stick-title {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.1px;
    line-height: 1.2;
    white-space: nowrap;
}
.qb-int-page .cr-stick-sub {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.2;
    white-space: nowrap;
}
.qb-int-page .cr-stick-ico {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.qb-int-page .cr-stick-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}
/* WhatsApp variant — green */
.qb-int-page .cr-stick-link[href*="whatsapp"] { background: #25d366; }
.qb-int-page .cr-stick-link[href*="whatsapp"] svg { fill: currentColor; stroke: none; }

/* Expand into a pill-card — desktop + real hover pointer only. */
@media (hover: hover) and (min-width: 992px) {
    .qb-int-page .cr-stick-link:hover,
    .qb-int-page .cr-stick-link:focus-visible {
        width: 260px;
        background: color-mix(in srgb, var(--qbi-accent) 88%, #ffffff);
        box-shadow:
            0 14px 30px rgba(0, 41, 58, 0.36),
            0 4px 12px rgba(0, 146, 130, 0.44),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
        outline: none;
    }
    .qb-int-page .cr-stick-link[href*="whatsapp"]:hover,
    .qb-int-page .cr-stick-link[href*="whatsapp"]:focus-visible {
        width: 290px;
        background: #1fb759;
        box-shadow:
            0 14px 30px rgba(0, 41, 58, 0.36),
            0 4px 12px rgba(31, 183, 89, 0.44),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    .qb-int-page .cr-stick-link:hover .cr-stick-body,
    .qb-int-page .cr-stick-link:focus-visible .cr-stick-body {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ----------------------------------------------------------------------------
   CARD GRIDS — centre an incomplete last row (all redesigned pages)
   The scope card grid becomes a flex row that wraps and centres, so when the
   final row has fewer cards than a full row they sit centred instead of
   left-aligned with empty space on the right (the reported issue). Per-page
   flex-basis overrides set how many fit per row (default ~3; tax = 4;
   controller = 2). Wrapping also handles the responsive collapse, so the base
   grid-template media rules are simply ignored.
   ---------------------------------------------------------------------------- */
.qb-int-page .bk-service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
.qb-int-page .bk-service-grid > .bk-service-card {
    flex: 1 1 300px;
    max-width: 360px;
}


/* ============================================================================
   SERVICE-2 · CONTROLLER SERVICES — "Governance Ledger"
   Deep-teal, audit-room feel: standard split hero, a single-column numbered
   ledger of problems, wide two-up scope rows, squared process nodes.
   ============================================================================ */

/* Eyebrows get a leading rule — a small "control" tick. */
.qb-int-page.svc-controller .qbi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.qb-int-page.svc-controller .qbi-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    display: inline-block;
}

/* HERO — handled in the dedicated hero section near the end of this file
   (no mirror; the earlier illustration-on-left version was removed). */

/* PROBLEMS — collapse the 2-col card grid into a single-column numbered
   ledger: big accent index on a left rail, ruled rows, zebra striping. */
.qb-int-page.svc-controller .qbi-why-grid {
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 0 auto;
    gap: 0;
    border: 1px solid #e2ecec;
    border-radius: 16px;
    overflow: hidden;
}
.qb-int-page.svc-controller .qbi-why-card {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: center;
    gap: 18px;
    border: none;
    border-bottom: 1px solid #e6efef;
    border-left: 3px solid var(--qbi-accent);
    border-radius: 0;
    padding: 20px 26px;
    box-shadow: none;
}
.qb-int-page.svc-controller .qbi-why-card:nth-child(even) {
    background: #f6fafa;
}
.qb-int-page.svc-controller .qbi-why-grid > .qbi-why-card:last-child {
    border-bottom: none;
    /* cancel the base orphan-centering (max-width:540 + margin auto) so the
       last ledger row spans full width like the rest. */
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
}
.qb-int-page.svc-controller .qbi-why-card:hover {
    transform: translateX(4px);
    box-shadow: none;
}
.qb-int-page.svc-controller .qbi-why-card-icon {
    display: none;
}
.qb-int-page.svc-controller .qbi-why-card-num {
    position: static;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--qbi-accent);
    opacity: 1;
}
.qb-int-page.svc-controller .qbi-why-card-title {
    font-size: 16.5px;
}

/* SCOPE — wide two-up rows: icon column on the left, heading + list stacked
   on the right (instead of the 3-col vertical cards). */
.qb-int-page.svc-controller .bk-service-grid {
    max-width: 1040px;
    margin: 0 auto;
}
.qb-int-page.svc-controller .bk-service-grid > .bk-service-card {
    flex: 1 1 440px;
    max-width: 520px;
}
.qb-int-page.svc-controller .bk-service-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: start;
    padding-top: 26px;
}
.qb-int-page.svc-controller .bk-service-card::before {
    display: none;
}
.qb-int-page.svc-controller .bk-service-card {
    border-left: 3px solid var(--qbi-accent);
}
.qb-int-page.svc-controller .bk-service-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
}
.qb-int-page.svc-controller .bk-service-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 6px;
}
.qb-int-page.svc-controller .bk-service-card ul {
    grid-column: 2;
    grid-row: 2;
}

/* PROCESS — square the numbered nodes for a more mechanical, audit cadence. */
.qb-int-page.svc-controller .bk-tl-num {
    border-radius: 11px;
}
.qb-int-page.svc-controller .bk-tl-card {
    border-left: 3px solid var(--qbi-accent);
}


/* ============================================================================
   SERVICE-3 · CFO SERVICES — "Executive scorecard"
   Emerald, boardroom feel: classic split hero with an executive value
   stat-band across the bottom, 3-up problem cards with a top rule,
   auto-numbered scope cards, and a horizontal process stepper.
   ============================================================================ */

/* HERO — executive value stat-band beneath the hero row (signature element). */
.qb-int-page.svc-cfo .cfo-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    width: 100%;
    margin: 32px 0 6px;
}
.qb-int-page.svc-cfo .cfo-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
}
.qb-int-page.svc-cfo .cfo-stat-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--qbi-accent) 34%, transparent);
    color: #c4f5ec;
}
.qb-int-page.svc-cfo .cfo-stat-ico svg { width: 20px; height: 20px; }
.qb-int-page.svc-cfo .cfo-stat-k {
    display: block;
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.1;
}
.qb-int-page.svc-cfo .cfo-stat-l {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.25;
    margin-top: 2px;
}
@media (max-width: 860px) {
    .qb-int-page.svc-cfo .cfo-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .qb-int-page.svc-cfo .cfo-hero-stats { grid-template-columns: 1fr; }
}

/* PROBLEMS — 3-up cards, top accent rule instead of the red left border.
   Flex (not grid) so an incomplete final row (e.g. 7 + 8) centres instead of
   left-aligning with a gap on the right. */
.qb-int-page.svc-cfo .qbi-why-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: 1100px;
}
.qb-int-page.svc-cfo .qbi-why-grid > .qbi-why-card {
    flex: 1 1 320px;
    max-width: 340px;
    margin: 0;
}
.qb-int-page.svc-cfo .qbi-why-card {
    border-left: none;
    border-top: 3px solid var(--qbi-accent);
    padding-top: 26px;
}
.qb-int-page.svc-cfo .qbi-why-card-icon {
    background: color-mix(in srgb, var(--qbi-accent) 14%, #ffffff);
    color: var(--qbi-accent);
}

/* SCOPE — auto-numbered editorial cards (01 · 02 · 03 …). */
.qb-int-page.svc-cfo .bk-service-grid {
    counter-reset: cfo-scope;
}
.qb-int-page.svc-cfo .bk-service-card {
    counter-increment: cfo-scope;
    position: relative;
}
.qb-int-page.svc-cfo .bk-service-card h3::before {
    content: counter(cfo-scope, decimal-leading-zero);
    display: block;
    font-family: "Lexend", sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--qbi-accent) 32%, #ffffff);
    margin-bottom: 8px;
}

/* PROCESS — horizontal stepper: steps sit side by side with a connecting
   rail across the top of the numbers, instead of a vertical timeline. */
.qb-int-page.svc-cfo .bk-timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 18px;
    max-width: 1100px;
}
.qb-int-page.svc-cfo .bk-timeline::before {
    top: 26px;
    left: 6%;
    right: 6%;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--qbi-bright-teal), rgba(14, 175, 160, 0.15));
}
.qb-int-page.svc-cfo .bk-tl-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 0;
    gap: 16px;
}
.qb-int-page.svc-cfo .bk-tl-card {
    width: 100%;
}
/* The stepper descriptions are single centred sentences, not bullet lists, so
   drop the leading bullet dot (it was landing in the middle of the centred line)
   and remove the now-pointless left padding so the text centres cleanly. */
.qb-int-page.svc-cfo .bk-tl-card li {
    padding-left: 0;
}
.qb-int-page.svc-cfo .bk-tl-card li::before {
    display: none;
}
@media (max-width: 860px) {
    .qb-int-page.svc-cfo .bk-timeline {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
    .qb-int-page.svc-cfo .bk-timeline::before {
        display: none;
    }
}


/* ============================================================================
   SERVICE-4 · TAX PLANNING & FILING — "Quarterly Calendar"
   Green-teal, year-round cadence: hero keeps a panel but gains a quarter
   ribbon; problems alternate in an offset zigzag; scope renders as four
   calendar-style columns with a tabbed top edge.
   ============================================================================ */

/* HERO — standard split (copy left, vertical year-round timeline illustration
   on the right), matching the other heroes; CTA stays inside the hero. */

/* Eyebrow rendered as a small calendar tab. */
.qb-int-page.svc-tax .qbi-eyebrow {
    background: color-mix(in srgb, var(--qbi-accent) 12%, #ffffff);
    padding: 5px 12px 4px;
    border-radius: 7px;
    border-top: 3px solid var(--qbi-accent);
}

/* PROBLEMS — clean two-column cards on the green accent (replaces the earlier
   zigzag, which read as unprofessional). Same tidy card the rest of the site
   uses, re-accented green, with a lone trailing card centred. */
.qb-int-page.svc-tax .qbi-why-card {
    border-left-color: var(--qbi-accent);
}
.qb-int-page.svc-tax .qbi-why-card-icon {
    background: color-mix(in srgb, var(--qbi-accent) 14%, #ffffff);
    color: var(--qbi-accent);
}
.qb-int-page.svc-tax .qbi-why-card-num {
    color: var(--qbi-accent);
}
/* Centre a lone trailing problem card instead of leaving a gap on the right. */
.qb-int-page.svc-tax .qbi-why-grid > .qbi-why-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    margin-inline: auto;
}

/* SCOPE — four calendar-style columns with a tabbed top edge. Uses the shared
   flex-centred card grid (below) so an incomplete last row stays centred. */
.qb-int-page.svc-tax .bk-service-card {
    border-top: 4px solid var(--qbi-accent);
    border-radius: 4px 4px 16px 16px;
}
.qb-int-page.svc-tax .bk-service-card::before {
    display: none;
}
.qb-int-page.svc-tax .bk-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
}
.qb-int-page.svc-tax .bk-service-grid > .bk-service-card {
    flex: 1 1 220px;
    max-width: 250px;
}
@media (max-width: 560px) {
    .qb-int-page.svc-tax .bk-service-grid > .bk-service-card { max-width: none; }
}


/* ============================================================================
   SERVICE-5 · SYSTEMS & INTEGRATION — "Connected Stack"
   Cyan-teal, technical feel: hero panel offset, problems as connected nodes
   with dashed rails, scope cards joined by dotted connectors to read as a
   pipeline rather than isolated tiles.
   ============================================================================ */

/* HERO — standard split (copy left, compact integration-map illustration on
   the right), matching the other heroes; CTA stays inside the hero. */

/* Eyebrow rendered as a monospace-ish node label with a leading dot. */
.qb-int-page.svc-systems .qbi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 2px;
}
.qb-int-page.svc-systems .qbi-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qbi-accent) 22%, transparent);
    display: inline-block;
}

/* PROBLEMS — node cards: dashed accent ring, connector dot top-left. */
.qb-int-page.svc-systems .qbi-why-card {
    border-left: none;
    border: 1px dashed color-mix(in srgb, var(--qbi-accent) 45%, #ffffff);
    border-radius: 14px;
}
.qb-int-page.svc-systems .qbi-why-card-icon {
    background: color-mix(in srgb, var(--qbi-accent) 14%, #ffffff);
    color: var(--qbi-accent);
    border-radius: 50%;
}

/* SCOPE — pipeline cards joined by dotted connectors. */
.qb-int-page.svc-systems .bk-service-card {
    position: relative;
}
.qb-int-page.svc-systems .bk-service-card::before {
    background: var(--qbi-accent);
}
.qb-int-page.svc-systems .bk-service-icon {
    border-radius: 50%;
}

/* PROCESS — accent the vertical rail as a data pipeline. */
.qb-int-page.svc-systems .bk-timeline::before {
    background: repeating-linear-gradient(
        180deg,
        var(--qbi-bright-teal) 0 8px,
        transparent 8px 16px
    );
}
.qb-int-page.svc-systems .bk-tl-num {
    border-radius: 50%;
}


/* ============================================================================
   /SERVICES · UMBRELLA HUB — "Directory"
   Neutral brand teal; this page is an index of the five services, so it keeps
   the hub identity but its card grid is treated as a directory listing.
   (Most of its layout lives in the page's inline <style>; this block only
   tunes shared elements so the hub doesn't mirror a detail page.)
   ============================================================================ */
.qb-int-page.svc-hub .qbi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.qb-int-page.svc-hub .qbi-eyebrow::after {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    display: inline-block;
}


/* ============================================================================
   "WHAT WE DO" — distinct interactive layouts per page
   Each page's bk-twocol gets a wwd-* modifier: the section goes full-width,
   the old right-side illustration is hidden, and the prose is restructured
   into a scannable/interactive format (keywords preserved as headings/labels).
   ============================================================================ */
.qb-int-page [class*="wwd-"].bk-twocol { display: block; text-align: left; }
.qb-int-page [class*="wwd-"] .bk-illus-card { display: none; }
.qb-int-page .wwd-body { max-width: none; }

/* Consistent content width + a single shared left edge for every "What We Do"
   block, so the heading, lead, sub, and the format components all line up
   instead of stepping in and out. */
.qb-int-page .wwd-head,
.qb-int-page .wwd-sub,
.qb-int-page .wwd-acc,
.qb-int-page .wwd-vlist,
.qb-int-page .cfo-stack,
.qb-int-page .cfo-do-grid,
.qb-int-page .tax-trig-grid,
.qb-int-page .tax-wwd-foot,
.qb-int-page .sys-cat-grid {
    max-width: 1060px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.qb-int-page .wwd-lead {
    max-width: 820px;
    font-size: 16.5px;
    color: var(--qbi-text-grey);
    line-height: 1.75;
    margin: 6px 0 0;
}
.qb-int-page .wwd-lead strong { color: var(--qbi-dark); }
.qb-int-page .wwd-sub { margin: 26px 0 0; font-weight: 700; font-size: 15px; color: var(--qbi-dark); text-align: left; }

/* --- Controller: readable vertical list (all items visible) --- */
.qb-int-page .wwd-vlist { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.qb-int-page .wwd-vrow {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e2ecec;
    border-left: 4px solid var(--qbi-accent);
    border-radius: 12px;
    padding: 18px 22px;
}
.qb-int-page .wwd-vnum {
    flex: 0 0 auto;
    min-width: 38px;
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    color: var(--qbi-accent);
}
.qb-int-page .wwd-vcontent h3 { font-size: 16px; font-weight: 800; color: var(--qbi-dark); margin: 0 0 6px; }
.qb-int-page .wwd-vcontent p { font-size: 14.5px; color: var(--qbi-text-grey); line-height: 1.65; margin: 0; }
@media (max-width: 560px) {
    .qb-int-page .wwd-vrow { flex-direction: column; gap: 8px; }
}

/* --- CFO: layered stack + activity cards --- */
.qb-int-page .cfo-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 920px;
    margin: 26px 0 30px;
}
.qb-int-page .cfo-stack-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2ecec;
    border-left: 4px solid color-mix(in srgb, var(--qbi-accent) 35%, #cfe2de);
    border-radius: 12px;
    padding: 15px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qb-int-page .cfo-stack-row:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 22px rgba(0, 41, 58, 0.08);
}
.qb-int-page .cfo-stack-row--top {
    border-left-color: var(--qbi-accent);
    background: color-mix(in srgb, var(--qbi-accent) 7%, #ffffff);
    box-shadow: 0 10px 26px rgba(0, 41, 58, 0.1);
}
.qb-int-page .cfo-stack-tag {
    flex: 0 0 auto;
    min-width: 118px;
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--qbi-dark);
}
.qb-int-page .cfo-stack-row--top .cfo-stack-tag { color: var(--qbi-accent); }
.qb-int-page .cfo-stack-role { font-size: 14.5px; color: var(--qbi-text-grey); }
.qb-int-page .cfo-do-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.qb-int-page .cfo-do-card {
    background: #ffffff;
    border: 1px solid #e8f1ef;
    border-radius: 14px;
    padding: 20px;
}
.qb-int-page .cfo-do-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--qbi-accent) 12%, #ffffff);
    color: var(--qbi-accent);
    margin-bottom: 12px;
}
.qb-int-page .cfo-do-ico svg { width: 22px; height: 22px; }
.qb-int-page .cfo-do-card h3 { font-size: 15px; font-weight: 800; color: var(--qbi-dark); margin: 0 0 6px; }
.qb-int-page .cfo-do-card p { font-size: 13.5px; color: var(--qbi-text-grey); line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
    .qb-int-page .cfo-do-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .qb-int-page .cfo-do-grid { grid-template-columns: 1fr; }
    .qb-int-page .cfo-stack-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .qb-int-page .cfo-stack-tag { min-width: 0; }
}

/* --- Bookkeeping: expandable accordion --- */
.qb-int-page .wwd-acc {
    max-width: 940px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qb-int-page .wwd-acc-item {
    background: #ffffff;
    border: 1px solid #e2ecec;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.qb-int-page .wwd-acc-item[open] { box-shadow: 0 10px 26px rgba(0, 41, 58, 0.08); }
.qb-int-page .wwd-acc-q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}
.qb-int-page .wwd-acc-q::-webkit-details-marker { display: none; }
.qb-int-page .wwd-acc-n {
    font-family: "Lexend", sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--qbi-accent);
}
.qb-int-page .wwd-acc-t { flex: 1; font-weight: 800; font-size: 15.5px; color: var(--qbi-dark); }
.qb-int-page .wwd-acc-ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--qbi-accent) 12%, #ffffff);
    color: var(--qbi-accent);
    transition: transform 0.2s ease, background 0.2s ease;
}
.qb-int-page .wwd-acc-item[open] .wwd-acc-ico { transform: rotate(45deg); background: var(--qbi-accent); color: #ffffff; }
.qb-int-page .wwd-acc-a { padding: 0 20px 18px 56px; }
.qb-int-page .wwd-acc-a p { font-size: 14.5px; color: var(--qbi-text-grey); line-height: 1.7; margin: 0; }
@media (max-width: 560px) {
    .qb-int-page .wwd-acc-a { padding-left: 20px; }
}

/* --- Controller: CSS-only tabbed panels --- */
.qb-int-page .wwd-tabs { max-width: 940px; margin-top: 24px; }
.qb-int-page .wwd-tab-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.qb-int-page .wwd-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #e2ecec;
    margin-bottom: 18px;
}
.qb-int-page .wwd-tab {
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 9px 9px 0 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--qbi-text-grey);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.qb-int-page .wwd-tab:hover { color: var(--qbi-dark); }
.qb-int-page .wwd-panel {
    display: none;
    background: #ffffff;
    border: 1px solid #e2ecec;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 10px 26px rgba(0, 41, 58, 0.06);
}
.qb-int-page .wwd-panel p { margin: 0; font-size: 15.5px; color: var(--qbi-text-grey); line-height: 1.75; }
.qb-int-page .wwd-panel p strong { color: var(--qbi-dark); }
.qb-int-page #ctab1:checked ~ .wwd-tablist label[for="ctab1"],
.qb-int-page #ctab2:checked ~ .wwd-tablist label[for="ctab2"],
.qb-int-page #ctab3:checked ~ .wwd-tablist label[for="ctab3"],
.qb-int-page #ctab4:checked ~ .wwd-tablist label[for="ctab4"] {
    color: var(--qbi-accent);
    border-bottom-color: var(--qbi-accent);
}
.qb-int-page #ctab1:checked ~ .wwd-panels #cpan1,
.qb-int-page #ctab2:checked ~ .wwd-panels #cpan2,
.qb-int-page #ctab3:checked ~ .wwd-panels #cpan3,
.qb-int-page #ctab4:checked ~ .wwd-panels #cpan4 { display: block; }

/* --- Tax: "what drives your tax" trigger cards + footer --- */
.qb-int-page .tax-trig-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.qb-int-page .tax-trig {
    background: #ffffff;
    border: 1px solid #e8f1ef;
    border-top: 3px solid var(--qbi-accent);
    border-radius: 12px;
    padding: 18px 16px;
}
.qb-int-page .tax-trig-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--qbi-accent) 12%, #ffffff);
    color: var(--qbi-accent);
    margin-bottom: 12px;
}
.qb-int-page .tax-trig-ico svg { width: 21px; height: 21px; }
.qb-int-page .tax-trig h3 { font-size: 14.5px; font-weight: 800; color: var(--qbi-dark); margin: 0 0 5px; }
.qb-int-page .tax-trig p { font-size: 12.8px; color: var(--qbi-text-grey); line-height: 1.55; margin: 0; }
.qb-int-page .tax-wwd-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
.qb-int-page .tax-foot-card {
    background: color-mix(in srgb, var(--qbi-accent) 7%, #ffffff);
    border: 1px solid #e2ecec;
    border-radius: 12px;
    padding: 18px 20px;
}
.qb-int-page .tax-foot-card strong { display: block; font-size: 15px; color: var(--qbi-dark); margin-bottom: 4px; }
.qb-int-page .tax-foot-card span { font-size: 13.5px; color: var(--qbi-text-grey); line-height: 1.6; }
@media (max-width: 980px) { .qb-int-page .tax-trig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
    .qb-int-page .tax-trig-grid { grid-template-columns: repeat(2, 1fr); }
    .qb-int-page .tax-wwd-foot { grid-template-columns: 1fr; }
}
@media (max-width: 440px) { .qb-int-page .tax-trig-grid { grid-template-columns: 1fr; } }

/* --- Systems: integration-category cards ("What We Do") ---
   Restructured so each card clearly says "we connect THESE tools, and THIS is the
   result in your books": an accent connector edge, an icon tile, a WE CONNECT
   label above the recognisable platform pills, and the outcome promoted into an
   accent-tinted result band led by a flow arrow (so the benefit is the visual
   punchline, not a thin grey afterthought). Copy is unchanged; only the small
   WE CONNECT label is presentational scaffolding. */
.qb-int-page .sys-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 26px;
    max-width: 1000px;
}
.qb-int-page .sys-cat {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8f1ef;
    border-top: 3px solid var(--qbi-accent);
    border-radius: 16px;
    padding: 22px 24px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qb-int-page .sys-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 41, 58, 0.09);
}
.qb-int-page .sys-cat-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.qb-int-page .sys-cat-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--qbi-accent) 12%, #ffffff);
    color: var(--qbi-accent);
}
.qb-int-page .sys-cat-ico svg { width: 22px; height: 22px; }
.qb-int-page .sys-cat-head h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--qbi-dark);
    margin: 0;
    line-height: 1.3;
}
.qb-int-page .sys-cat-label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--qbi-accent) 65%, #51636b);
    margin-bottom: 9px;
}
.qb-int-page .sys-cat-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.qb-int-page .sys-cat-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--qbi-accent);
    background: color-mix(in srgb, var(--qbi-accent) 9%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--qbi-accent) 22%, #ffffff);
    border-radius: 999px;
    padding: 4px 11px;
}
.qb-int-page .sys-cat-out {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: auto 0 0;
    background: color-mix(in srgb, var(--qbi-accent) 6%, #ffffff);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--qbi-dark);
    line-height: 1.55;
}
.qb-int-page .sys-cat-arrow {
    flex-shrink: 0;
    color: var(--qbi-accent);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.45;
}
@media (max-width: 760px) { .qb-int-page .sys-cat-grid { grid-template-columns: 1fr; } }

/* --- "Procore Network Member" credential (premium badge) ---
   Layout: Procore logo (left), member label, orange verified seal (right). Sits
   beneath the platform cards where Procore is named. Light-surface variant of the
   .procore-cred credential (the dark-hero variant lives in integrations/layout). */
.qb-int-page .procore-cred {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 14px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.qb-int-page .procore-cred::before {
    content: "";
    position: absolute;
    top: 0;
    left: -65%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    opacity: 0;
}
.qb-int-page .procore-cred:hover::before { animation: pcShineLight 0.85s ease; }
@keyframes pcShineLight {
    0%   { left: -65%; opacity: 0; }
    25%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}
.qb-int-page .pc-logo {
    flex-shrink: 0;
    font-family: "Lexend", Manrope, system-ui, sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.3px;
    color: #ff5200;
}
.qb-int-page .pc-logo-img { flex-shrink: 0; height: 18px; width: auto; display: block; }
.qb-int-page .pc-div { flex-shrink: 0; width: 1px; height: 30px; }
.qb-int-page .pc-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; text-align: left; }
.qb-int-page .pc-eyebrow {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.qb-int-page .pc-title { font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.qb-int-page .pc-seal {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 3px 8px rgba(255, 82, 0, 0.4));
}
.qb-int-page .pc-seal svg { width: 32px; height: 32px; }

/* Light-surface variant */
.qb-int-page .procore-cred--light {
    background: linear-gradient(135deg, #ffffff, #fff6f1);
    border: 1px solid #ffd6c2;
    box-shadow: 0 8px 24px rgba(255, 82, 0, 0.1);
}
.qb-int-page .procore-cred--light:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 82, 0, 0.16);
    border-color: #ffc0a0;
}
.qb-int-page .procore-cred--light .pc-div { background: #ffd6c2; }
.qb-int-page .procore-cred--light .pc-eyebrow { color: #d8480a; }
.qb-int-page .procore-cred--light .pc-title { color: var(--qbi-dark); }

/* Systems "What We Do" — centre the heading, lead, card-grid block and the Procore
   credential so the top half matches the already-centred "We do this so" strip
   below it. Card *contents* stay left-aligned; only the blocks are centred. */
.qb-int-page.svc-systems .wwd-sys .wwd-head { text-align: center; margin-left: auto; margin-right: auto; }
.qb-int-page.svc-systems .wwd-sys .wwd-lead { margin-left: auto; margin-right: auto; }
.qb-int-page.svc-systems .sys-cat-grid { margin-left: auto; margin-right: auto; }
.qb-int-page.svc-systems .procore-cred {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Systems: integration philosophy as principle node-cards ---
   Replaces the centered prose wall with a 2x2 grid of left-aligned cards in the
   page's own node language (dashed accent ring + leading connector dot). All
   original copy is preserved; each card gains a keyword-rich H3 for scanning + SEO. */
.qb-int-page.svc-systems .sys-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1000px;
    margin: 34px auto 0;
}
.qb-int-page.svc-systems .sys-principle {
    background: #ffffff;
    border: 1px dashed color-mix(in srgb, var(--qbi-accent) 45%, #ffffff);
    border-radius: 14px;
    padding: 24px 26px;
    text-align: left;
}
.qb-int-page.svc-systems .sys-principle h3 {
    position: relative;
    font-family: "Lexend", sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--qbi-dark);
    line-height: 1.35;
    margin: 0 0 10px;
    padding-left: 18px;
}
.qb-int-page.svc-systems .sys-principle h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qbi-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qbi-accent) 22%, transparent);
}
.qb-int-page.svc-systems .sys-principle p {
    font-size: 14.5px;
    color: var(--qbi-text-grey);
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 760px) {
    .qb-int-page.svc-systems .sys-principles { grid-template-columns: 1fr; }
}


/* ============================================================================
   RESPONSIVE RESETS
   The per-page grid overrides above raise specificity (.qb-int-page.svc-*),
   which would otherwise beat the base mobile rules (.qb-int-page …) and keep
   multi-column layouts on small screens. These media blocks re-collapse the
   restructured grids so every variant stacks cleanly on tablet/phone.
   ============================================================================ */
@media (max-width: 900px) {
    /* CFO problems — flex cards shrink toward 2-up. */
    .qb-int-page.svc-cfo .qbi-why-grid > .qbi-why-card { flex-basis: 300px; }
}

@media (max-width: 560px) {
    /* CFO problems — full-width single column on phones. */
    .qb-int-page.svc-cfo .qbi-why-grid > .qbi-why-card {
        flex-basis: 100%;
        max-width: none;
    }
}