/* ==========================================================================
   about-us family — shared bands
   --------------------------------------------------------------------------
   The /about-us/* Elementor pages are all built from the same two chrome
   bands plus one or two body bands:

     24ccc31  hero      breadcrumb + h1 + sub, dark navy, ray image right
     586ef7e  cta       "Subscribe to Our Newsletter", blue globe band

   Every page in the family loads this sheet, then its own page sheet for the
   bands only it has. Scope is .zabu on the page wrapper; .zmit stays on the
   wrapper too so the shared header/footer in it-managed-services-zazz.css
   still applies (same arrangement as about-us/our-locations.php).

   All numbers are read off the live pages at a 1440 viewport, in view (the
   Seraphinite lazy-background trap means a band read from the top of the
   document reports no background at all — CLAUDE.md).
   ========================================================================== */

.zabu,
.zabu *,
.zabu *::before,
.zabu *::after { box-sizing: border-box; }

.zabu {
    font-family: Poppins, sans-serif;
    color: #000;
    overflow-x: hidden;

    /* One content gutter for every band on every page in the family.
       65px is the hero's own live value; live runs the BODY bands at 0
       (legal prose), 15 (statement) and 100 (leader cards), so each page had
       three different left edges and the prose literally touched the viewport
       edge. Owner called that broken - deliberate deviation from live, and it
       only ever narrows a band, never widens one (CLAUDE.md). */
    /* One centred content box for the whole family. Live runs several bands
       gutter-to-gutter (CSR's grids sit in a 1385 box at x20); the owner
       flagged that as full-bleed on the privacy, ethics and CSR pages in turn.
       Rather than inset band by band, the GUTTER does the centring: it grows to
       whatever keeps the content at --zabu-maxw and never drops below its own
       floor. Backgrounds stay full-bleed; only the content is constrained, and
       every band - hero included - lands on the same left edge. */
    --zabu-maxw: 1180px;
    --zabu-gutter: max(65px, (100% - var(--zabu-maxw)) / 2);
}

.zabu img { max-width: 100%; height: auto; display: block; }
.zabu a { text-decoration: none; }
.zabu p { margin: 0; }
.zabu h1, .zabu h2, .zabu h3, .zabu h4 { margin: 0; letter-spacing: normal; }
.zabu ul { margin: 0; padding: 0; list-style: none; }

/* ===================== HERO (24ccc31) =====================
   live: min-height 500, padding 80px 65px, column, justify center,
   align flex-start, gap 20, bg #04062d + ray png center-right cover,
   ::before overlay Shape-1.png center-left no-repeat. */

/* The hero is NOT one size across the family - measured on live at 1440:
     privacy / terms / ethics / leadership  500 tall, h1 64/65 w600
     awards                                 438 tall, h1 51/65 w500
     newsroom                               412 tall, h1 51/65 w500 + an h2
     zazz-reviews                           499 tall, h1 51/65 w500
     corporate-social-responsibility        726 tall, LIGHT, h1 64/65 #000,
                                            two columns with a 480x494 figure
   So the per-page values arrive as custom properties set on the section, and
   the defaults below are the legal-page hero. */
.zabu .zabu-hero {
    position: relative;
    min-height: var(--zabu-hero-minh, 500px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--zabu-hero-gap, 20px);
    padding: var(--zabu-hero-pad, 80px var(--zabu-gutter));
    background-color: #04062d;
    background-image: var(--zabu-hero-img, none);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    overflow: hidden;
}

.zabu .zabu-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--zabu-hero-shape, none);
    background-repeat: no-repeat;
    background-position: center left;
    pointer-events: none;
}

.zabu .zabu-hero > * { position: relative; z-index: 1; }

/* --- breadcrumb --- */
.zabu .zabu-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 var(--zabu-crumb-gap, 90px);
}

.zabu .zabu-crumb li { display: flex; align-items: center; }

.zabu .zabu-crumb a,
.zabu .zabu-crumb .zabu-crumb-text {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 23.1px;
    color: #fff;
}

.zabu .zabu-crumb a:hover { color: #dadada; }
.zabu .zabu-crumb a:hover .zabu-dot svg { fill: #dadada; }

.zabu .zabu-dot {
    display: inline-flex;
    align-items: center;
    padding-inline-start: 12px;
}

.zabu .zabu-dot svg { width: 7px; height: 7px; fill: #fff; display: block; }

.zabu .zabu-crumb-label { padding-inline-start: 5px; }
.zabu .zabu-crumb .is-current { color: rgba(255, 255, 255, .75); }

/* --- headline + sub --- */
.zabu .zabu-hero h1 {
    max-width: var(--zabu-h1-max, 640px);
    font-size: var(--zabu-h1-size, 64px);
    font-weight: var(--zabu-h1-weight, 600);
    line-height: var(--zabu-h1-lh, 65px);
    color: var(--zabu-hero-ink, #fff);
}

.zabu .zabu-hero-h2 {
    max-width: var(--zabu-h1-max, 640px);
    font-size: 31px;
    font-weight: 600;
    line-height: 43px;
    color: var(--zabu-hero-ink, #fff);
}

.zabu .zabu-hero-sub { max-width: var(--zabu-sub-max, 700px); }

.zabu .zabu-hero-sub p {
    font-size: var(--zabu-sub-size, 24px);
    font-weight: var(--zabu-sub-weight, 500);
    line-height: var(--zabu-sub-lh, 32px);
    color: var(--zabu-hero-ink, #fff);
    margin: 0 0 var(--zabu-sub-gap, 38.4px);
}

.zabu .zabu-hero-sub p:last-child { margin-bottom: 0; }

/* ===================== NEWSLETTER CTA (586ef7e) =====================
   live: min-height 380, padding 60px 100px, row, content width 1440,
   left col 875 / right col 350, copy 32/32 w500 #fff, "Subscribe" #07e5fa,
   button white on a #0161ff hairline, 12px 24px, chevron after the label. */

.zabu .zabu-cta {
    display: flex;
    min-height: 380px;
    padding: 0 var(--zabu-gutter);
    background-color: #0018f2;
    background-image: var(--zabu-cta-img, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.zabu .zabu-cta-inner {
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 0;
}

.zabu .zabu-cta-copy {
    flex: 0 1 875px;
    max-width: 875px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.zabu .zabu-cta-copy p {
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
    color: #fff;
}

.zabu .zabu-hl { color: #07e5fa; }

.zabu .zabu-cta-aside {
    flex: 0 0 350px;
    display: flex;
    align-items: flex-end;
}

.zabu .zabu-btn {
    display: inline-flex;
    align-items: center;
    gap: 26px;  /* live's button measures 302x42 with this label */
    padding: 12px 24px;
    border: 1px solid #0161ff;
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}

.zabu .zabu-btn svg { flex: 0 0 8px; width: 8px; height: 12px; }
.zabu .zabu-btn svg path { stroke: currentColor; }
.zabu .zabu-btn:hover { background: #f2f6ff; }

/* ===================== LONG-FORM PROSE (1df8012) =====================
   privacy-policy and terms-of-use. Live runs this band full-bleed with no
   container and no side padding — the copy starts at x=0. Kept as live has
   it; the mobile gutter below is the only deviation. */

.zabu .zabu-legal {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 80px var(--zabu-gutter);
}

/* A policy is a wall of 16px text. Live lets it run the full 1425px, which is
   roughly 200 characters a line - unreadable. Cap the measure; the column
   still starts on the same left edge as the hero above it. */
.zabu .zabu-prose { max-width: 1040px; margin-inline: auto; }

.zabu .zabu-prose h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 39px;
    color: #141414;
    margin: 0 0 20px;
}

.zabu .zabu-prose h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 31.2px;
    color: #141414;
    margin: 0 0 20px;
}

.zabu .zabu-prose p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #000;
    margin: 0 0 25.6px;
}

.zabu .zabu-prose ul,
.zabu .zabu-prose ol {
    margin: 16px 0;
    padding-inline-start: 20px;
    list-style: disc;
}

.zabu .zabu-prose ol { list-style: decimal; }

.zabu .zabu-prose li {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #000;
}

.zabu .zabu-prose a { color: #046bd2; }
.zabu .zabu-prose a:hover { text-decoration: underline; }
.zabu .zabu-prose strong { font-weight: 600; }

/* The privacy policy carries a 13-row "how we use your data" table. Live draws
   it with Astra's grid: 1px #d1d5db, split as top+left on the table and
   bottom+right on each cell so the lines never double, 11.2/16 padding, header
   centred at 600. Measured on live at 1440.
   One thing live gets wrong: the editor leaves a 25.6px bottom margin on the
   <p> inside every cell, so each row carries a band of dead space under its
   text. Zeroed here. */
.zabu .zabu-prose table {
    width: 100%;
    margin: 0 0 24px;
    border-collapse: separate;
    border-spacing: 0;
    border: solid #d1d5db;
    border-width: 1px 0 0 1px;
}

.zabu .zabu-prose th,
.zabu .zabu-prose td {
    border: solid #d1d5db;
    border-width: 0 1px 1px 0;
    padding: 11.2px 16px;
    vertical-align: middle;
    font-size: 16px;
    line-height: 26.4px;
    color: #000;
}

.zabu .zabu-prose th { font-weight: 600; text-align: center; }
.zabu .zabu-prose td { font-weight: 400; text-align: left; }

.zabu .zabu-prose th p,
.zabu .zabu-prose td p { margin: 0; }

/* ===================== SIGNED STATEMENT (932a905 / ethics) =====================
   live: band #fff padding 0 15px; inner row padding 100px 0 gap 20;
   copy col padding-right 25, lede 24/28 w500 #121212, body 20/28 w400,
   name 20/33 w500, role 16/26.4 w400; portrait column 399 wide. */

.zabu .zabu-statement { background: #fff; padding: 0 var(--zabu-gutter); }

/* Live insets this band rather than running it gutter to gutter: its content
   box measures ~1180 wide and sits centred (x 101 -> 1280 at 1440), which is
   why a full-width copy column reads as "full bleed" even when the two columns
   themselves are correct. */
.zabu .zabu-statement-inner {
    display: flex;
    gap: 20px;
    max-width: 1180px;
    margin-inline: auto;
    padding: 100px 0;
}

.zabu .zabu-statement-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-end: 25px;
}

/* Live sets this opening statement in caps. */
.zabu .zabu-statement-lede p {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: #121212;
    text-transform: uppercase;
    margin: 0 0 38.4px;
}

.zabu .zabu-statement-body p {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    margin: 0 0 16px;
}

.zabu .zabu-statement-body a { color: #046bd2; }
.zabu .zabu-statement-body a:hover { text-decoration: underline; }

.zabu .zabu-sign { margin-top: 28px; }

.zabu .zabu-sign-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
    color: #000;
}

.zabu .zabu-sign-role {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #000;
}

/* Reserve the portrait's box. The shared `.zabu img { height: auto }` collapses
   an unloaded CloudFront file to zero height, which drops the whole right
   column and makes the copy read as full-width - exactly what the owner
   reported. The reserve must not inflate the band either (CLAUDE.md). */
.zabu .zabu-statement-figure { flex: 0 0 399px; }

.zabu .zabu-statement-figure img {
    width: 399px;
    max-width: 100%;
    aspect-ratio: 573 / 593;
    object-fit: cover;
}

/* ===================== LEADER CARDS (932a905 / leadership) =====================
   live: band #e6ebf5 padding 60px 100px; a 61px rail column, then the card
   list offset 50px; card #fff, copy col 575 padding 35, rule 76x3 #0161ff,
   bio 18/29.7 w500 #121212 with a 210px spacer under it so the name and role
   sit at the card foot; photo 529x592 in a 539 column. Cards sit 45px apart
   (20px flex gap plus the 25px top margin live puts on every card but the
   first). */

.zabu .zabu-lead {
    display: flex;
    padding: 60px var(--zabu-gutter);
    background: #e6ebf5;
}

.zabu .zabu-lead-rail {
    flex: 0 0 61px;
    display: flex;
    justify-content: center;
}

.zabu .zabu-lead-rail::before {
    content: "";
    width: 4px;
    border-radius: 2px;
    background: #0161ff;
}

.zabu .zabu-lead-list {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: 50px;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.zabu .zabu-lead-card {
    display: flex;
    background: #fff;
}

/* Live sizes the PHOTO, not the column: the portrait stays 529x592 at its own
   aspect and the copy takes whatever is left, so a wider card widens the text
   and never the image. The white beside the portrait is live's own - an earlier
   pass "fixed" it with object-fit: cover and stretched the portrait into a
   landscape crop. Do not do that again. */
.zabu .zabu-lead-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding: 35px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zabu .zabu-lead-rule {
    width: 76px;
    height: 0;
    border: 0;
    border-top: 3px solid #0161ff;
    margin: 0;
}

.zabu .zabu-lead-bio {
    font-size: 18px;
    font-weight: 500;
    line-height: 29.7px;
    color: #121212;
    margin: 0;
}

/* Live puts a fixed 210px spacer widget between the bio and the signature so
   the name sits at the card foot. It is what makes cards 1 and 2 616 tall
   against a 592 photo — not the photo. Keep it explicit, don't swap it for
   margin-top:auto, which would shrink the card back to the photo's height. */
.zabu .zabu-lead-spacer { flex: 0 0 210px; }

.zabu .zabu-lead-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 33px;
    color: #000;
    margin: 0 0 6px;
}

.zabu .zabu-lead-role {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #000;
}

.zabu .zabu-lead-figure { flex: 0 0 auto; }

.zabu .zabu-lead-figure img {
    width: 529px;
    max-width: 100%;
    aspect-ratio: 529 / 592;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

/* ===================== RESPONSIVE ===================== */

/* The gutter is redefined once per breakpoint, so every band moves together
   and the page keeps a single left edge at any width. */
@media (max-width: 1200px) { .zabu { --zabu-gutter: max(40px, (100% - var(--zabu-maxw)) / 2); } }
@media (max-width: 1080px) { .zabu { --zabu-gutter: 50px; } }
@media (max-width: 767px)  { .zabu { --zabu-gutter: 24px; } }

@media (max-width: 1200px) {
    .zabu .zabu-lead-list { margin-inline-start: 30px; }
    /* Below 1200 the photo gives up width rather than the copy, but it keeps
       its own aspect - never stretch it. */
    .zabu .zabu-lead-figure { flex: 0 1 auto; min-width: 0; }
    .zabu .zabu-lead-figure img { width: 100%; }
    .zabu .zabu-lead-spacer { flex-basis: 100px; }
}

@media (max-width: 1080px) {
    .zabu .zabu-hero h1 { font-size: 44px; line-height: 54px; }
    .zabu .zabu-hero-sub p { font-size: 20px; line-height: 30px; }
    .zabu .zabu-crumb { margin-bottom: 60px; }
    .zabu .zabu-cta-copy p { font-size: 26px; line-height: 34px; }
    .zabu .zabu-statement-inner { padding: 60px 0; }
    .zabu .zabu-statement-figure { flex-basis: 320px; }
}

@media (max-width: 880px) {
    .zabu .zabu-cta-aside { display: none; }
    .zabu .zabu-cta-copy { flex-basis: 100%; max-width: 100%; }
    .zabu .zabu-statement-inner { flex-direction: column; }
    .zabu .zabu-statement-copy { padding-inline-end: 0; }
    .zabu .zabu-statement-figure { flex-basis: auto; max-width: 399px; }
    .zabu .zabu-lead-card { flex-direction: column; }
    .zabu .zabu-lead-copy { order: 2; }
    .zabu .zabu-lead-figure { order: 1; }
    .zabu .zabu-lead-figure img { width: 100%; height: auto; }
    .zabu .zabu-lead-spacer { display: none; }
}

@media (max-width: 767px) {
    .zabu .zabu-hero { padding: 40px var(--zabu-gutter); min-height: 420px; }
    .zabu .zabu-hero h1 { font-size: 34px; line-height: 44px; }
    .zabu .zabu-hero-sub p { font-size: 18px; line-height: 28px; margin-bottom: 24px; }
    .zabu .zabu-crumb { margin-bottom: 40px; }
    .zabu .zabu-cta { padding: 50px var(--zabu-gutter); min-height: 0; }
    .zabu .zabu-cta-inner { padding: 0; }
    .zabu .zabu-cta-copy p { font-size: 22px; line-height: 30px; }
    .zabu .zabu-btn { width: 100%; justify-content: center; gap: 12px; }
    .zabu .zabu-legal { padding: 40px var(--zabu-gutter); }
    .zabu .zabu-prose h2 { font-size: 24px; line-height: 32px; }
    .zabu .zabu-prose h3 { font-size: 20px; line-height: 28px; }
    /* 3 columns cannot fit a phone; scroll the table rather than crush it. */
    .zabu .zabu-prose table { display: block; overflow-x: auto; }
    .zabu .zabu-prose thead,
    .zabu .zabu-prose tbody { display: table; width: 100%; min-width: 620px; }
    .zabu .zabu-statement-inner { padding: 40px 0; }
    .zabu .zabu-statement-lede p { font-size: 20px; line-height: 28px; margin-bottom: 24px; }
    .zabu .zabu-statement-body p { font-size: 17px; line-height: 27px; }
    .zabu .zabu-lead-rail { display: none; }
    .zabu .zabu-lead-list { margin-inline-start: 0; gap: 25px; }
    .zabu .zabu-lead-copy { padding: 25px; }
    .zabu .zabu-lead-bio { font-size: 16px; line-height: 27px; }
}

/* ==========================================================================
   Bands added for awards-certifications / newsroom / CSR / zazz-reviews
   All numbers measured on live at 1440 with the band scrolled into view.
   ========================================================================== */

/* ---- END CTA (586ef7e on these four pages) --------------------------------
   Same Elementor id as the "Subscribe to Our Newsletter" band on the legal
   pages, but a completely different component: brand logo + one line + TWO
   buttons. Do not merge the two. Live: #431bf7, padding 60px 100px, left col
   746 / right col 479, logo rendered 447x49, buttons 288x46 right-aligned. */

.zabu .zabu-endcta {
    display: flex;
    padding: 60px var(--zabu-gutter);
    background: #431bf7;
}

.zabu .zabu-endcta-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.zabu .zabu-endcta-copy img { width: 447px; max-width: 100%; height: auto; }

.zabu .zabu-endcta-copy p {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #fff;
}

.zabu .zabu-endcta-actions {
    flex: 0 0 479px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.zabu .zabu-endcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 288px;
    padding: 16px 32px;
    border: 1px solid #0161ff;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
}

.zabu .zabu-endcta-btn.is-ghost {
    background: transparent;
    border-color: #fff;
    color: #fff;
    font-weight: 500;
}

.zabu .zabu-endcta-btn svg { flex: 0 0 8px; width: 8px; height: 12px; }
.zabu .zabu-endcta-btn svg path { stroke: currentColor; }
.zabu .zabu-endcta-btn:hover { opacity: .88; }

/* ---- CERTIFICATION BADGES (9737dc8 awards / 6a8d367 zazz-reviews) ---------
   Live: #e6ebf5, padding 65, centred head; 2 rows of 3 cells, 12px between
   cells and 15px between rows; each cell is a 130x130 icon beside its text.
   Natural aspect, real gaps - never gap:0 with a forced aspect-ratio
   (CLAUDE.md badge-band rule). */

.zabu .zabu-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 65px var(--zabu-gutter);
    background: #e6ebf5;
}

.zabu .zabu-badges h2,
.zabu .zabu-awards h2 {
    font-size: 47px;
    font-weight: 600;
    line-height: 65px;
    text-align: center;
}

.zabu .zabu-badges h2 { color: #000; }

.zabu .zabu-badges-lead,
.zabu .zabu-awards-lead {
    max-width: 600px;
    margin: 5px 0 25px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
}

.zabu .zabu-badges-lead { color: #5e5e5e; }

.zabu .zabu-badges-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 15px;
}

/* Each cell is a WHITE tile on the #e6ebf5 band - live: 424x178, padding
   24px 12px, a 130x130 icon beside the text. */
.zabu .zabu-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 178px;
    padding: 24px 12px;
    background: #fff;
}

.zabu .zabu-badge img { flex: 0 0 130px; width: 130px; height: 130px; }

.zabu .zabu-badge h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: #020101;
    margin: 0 0 5px;
}

.zabu .zabu-badge p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #5e5e5e;
}

/* ---- INDUSTRY AWARDS (f86f410) -------------------------------------------
   Live: solid black band, centred head, a 4-up row 10px apart, then a closing
   line. Badge images keep their own natural size - they are different shapes
   (164x140, 144x140, 92x131, 166x177). */

.zabu .zabu-awards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 65px var(--zabu-gutter);
    background: #000;
}

.zabu .zabu-awards h2 { color: #fff; }
.zabu .zabu-awards-lead { color: #868686; }

.zabu .zabu-awards-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Live: 316x350 column, padding 20px 10px, contents vertically centred, badge
   15px above the name. The badges are four different shapes and keep their own
   size, so the markup carries explicit width/height - an unloaded CloudFront
   file must not collapse the row (CLAUDE.md). */
.zabu .zabu-award {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    padding: 20px 10px;
    text-align: center;
}

.zabu .zabu-award img { max-width: 100%; margin-bottom: 15px; }

.zabu .zabu-award h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    color: #fff;
}

.zabu .zabu-award p {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #868686;
}

.zabu .zabu-awards-foot {
    margin-top: 24px;
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    color: #868686;
    text-align: center;
}

.zabu .zabu-awards-foot span { color: #fff; }

/* ---- FEATURED STORIES (9ca5807, newsroom) ---------------------------------
   Live: #e6ebf5, padding 65, LEFT-aligned head with 30px under it, a 4-up row
   15px apart; the card itself is transparent with a soft shadow and only its
   body is white. */

.zabu .zabu-news {
    padding: 65px var(--zabu-gutter);
    background: #e6ebf5;
}

.zabu .zabu-news h2 {
    font-size: 47px;
    font-weight: 600;
    line-height: 65px;
    color: #000;
    margin: 0 auto 30px;
}

.zabu .zabu-news-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.zabu .zabu-news-card {
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .02);
}

.zabu .zabu-news-card > img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.zabu .zabu-news-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 20px 12px 12px;
    background: #fff;
}

.zabu .zabu-news-body h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: #000;
}

.zabu .zabu-news-body h3 a { color: inherit; }
.zabu .zabu-news-body h3 a:hover { color: #0161ff; }

/* CTA pinned to the card foot, never spaced off the title (CLAUDE.md). */
.zabu .zabu-news-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #000;
}

.zabu .zabu-news-more svg { flex: 0 0 14px; width: 14px; height: 8px; }
.zabu .zabu-news-more:hover { color: #0161ff; }

/* ---- MEDIA INQUIRIES (9737dc8 newsroom, and every /newsroom/<slug> post) ---
   Live, read IN VIEW (Seraphinite defers the paint - read from the top of the
   page it reports no background): a vertical blue-to-violet wash on the
   band's motion-effects layer, 180deg rgba(1,97,255,.16) -> rgba(149,114,247,
   .45..51) (alpha varies a point or two per page; one value here). Padding
   42 60 20, heading LEFT-aligned (x=60, 156 wide), 5px to a 585-wide copy
   column. Height 176. Centred only under 767. */

.zabu .zabu-media {
    padding: 42px var(--zabu-gutter) 20px;
    background: linear-gradient(180deg, rgba(1, 97, 255, .16) 0%, rgba(149, 114, 247, .47) 100%);
    text-align: left;
}

.zabu .zabu-media h2,
.zabu .zabu-media h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    color: #000;
    margin: 0 0 5px;
}

.zabu .zabu-media p { max-width: 585px; }

@media (max-width: 767px) {
    .zabu .zabu-media { padding: 50px var(--zabu-gutter); text-align: center; }
    .zabu .zabu-media p { margin-inline: auto; }
}

.zabu .zabu-media p { margin-bottom: 25.6px; }

.zabu .zabu-media p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #000;
}

.zabu .zabu-media a { color: #046bd2; }
.zabu .zabu-media a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
    .zabu .zabu-badges h2,
    .zabu .zabu-awards h2,
    .zabu .zabu-news h2 { font-size: 36px; line-height: 48px; }
    .zabu .zabu-badges-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-awards-foot { font-size: 26px; line-height: 36px; }
}

@media (max-width: 880px) {
    .zabu .zabu-endcta { flex-direction: column; gap: 28px; }
    .zabu .zabu-endcta-actions { flex-basis: auto; align-items: flex-start; }
    .zabu .zabu-awards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 767px) {
    .zabu .zabu-badges,
    .zabu .zabu-awards,
    .zabu .zabu-news { padding: 40px var(--zabu-gutter); }
    .zabu .zabu-badges h2,
    .zabu .zabu-awards h2,
    .zabu .zabu-news h2 { font-size: 28px; line-height: 38px; }
    .zabu .zabu-badges-grid { grid-template-columns: 1fr; }
    .zabu .zabu-badge img { flex-basis: 96px; width: 96px; height: 96px; }
    .zabu .zabu-badge h3 { font-size: 20px; line-height: 28px; }
    .zabu .zabu-news-row { grid-template-columns: 1fr; }
    .zabu .zabu-awards-foot { font-size: 22px; line-height: 32px; }
    .zabu .zabu-endcta-btn { width: 100%; }
}

/* ---- CSR HERO (24ccc31, corporate-social-responsibility) ------------------
   The only LIGHT hero in the family and the only two-column one. Live: white
   under a blue wash, min-height 726, padding 0 65px; a 26px breadcrumb row
   then a 494 row of copy 710 + figure 480x494, 105px apart, centred. */

.zabu .zabu-hero.is-split {
    justify-content: flex-start;
    background-color: #fff;
    background-image:
        linear-gradient(rgba(1, 97, 255, .16) 0%, rgba(1, 192, 255, .16) 100%),
        linear-gradient(0deg, #e6ebf5, #e6ebf5);
}

.zabu .zabu-hero.is-split::before { content: none; }

.zabu .zabu-hero.is-split .zabu-crumb { margin-bottom: 0; }

.zabu .zabu-hero-split {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 105px;
}

.zabu .zabu-hero-split-copy {
    flex: 1 1 710px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zabu .zabu-hero-split-figure { flex: 0 0 480px; }
.zabu .zabu-hero-split-figure img { width: 480px; max-width: 100%; height: auto; }

/* ---- FOCUS AREAS (9737dc8, CSR) ------------------------------------------
   3 cards, 20px apart; card #f7f7fc with the same soft shadow the newsroom
   cards use; image 448x290 on top. */

/* Live's vertical rhythm on CSR is looser than the awards page: the focus and
   impact bands run 100px top and bottom, the counter and gallery bands 50. */
.zabu .zabu-focus,
.zabu .zabu-impact { padding: 100px var(--zabu-gutter); }

.zabu .zabu-count,
.zabu .zabu-gallery { padding: 50px var(--zabu-gutter); }

.zabu .zabu-focus h2,
.zabu .zabu-impact h2,
.zabu .zabu-count h2 {
    font-size: 56px;
    font-weight: 600;
    line-height: 65px;
    margin: 0 auto 30px;
}

.zabu .zabu-focus h2 { color: #000; text-align: center; }

.zabu .zabu-focus-grid,
.zabu .zabu-impact-grid {
    display: grid;
    gap: 20px;
}

.zabu .zabu-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.zabu .zabu-focus-card {
    display: flex;
    flex-direction: column;
    background: #f7f7fc;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .02);
}

.zabu .zabu-focus-card > img {
    width: 100%;
    height: 290px;
    object-fit: cover;
}

.zabu .zabu-focus-body,
.zabu .zabu-impact-body {
    flex: 1 1 auto;
    padding: 20px;
}

.zabu .zabu-focus-body h3,
.zabu .zabu-impact-body h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 0 12px;
}

.zabu .zabu-focus-body h3 { color: #141414; }

.zabu .zabu-focus-body p,
.zabu .zabu-impact-body p {
    font-size: 15.4px;
    font-weight: 400;
    line-height: 25.41px;
}

.zabu .zabu-focus-body p { color: #111; }

/* ---- COMMITMENTS IN NUMBERS (edaccc1, CSR) -------------------------------
   Live: heading left, then one row of three figure+label pairs, the number
   and its label side by side 59px apart.
   The figures are 500+, 4+ and 30%, read from each live counter's
   data-to-value. Live renders a literal 0 until its count-up fires, so a
   snapshot of the rendered text says 0 - do not "correct" these back. */

.zabu .zabu-count h2 { color: #000; line-height: 67.2px; }

.zabu .zabu-count-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.zabu .zabu-count-cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 59px;
}

.zabu .zabu-count-num {
    font-size: 56px;
    font-weight: 600;
    line-height: 56px;
    color: #000;
    white-space: nowrap;
}

.zabu .zabu-count-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: #5e5e5e;
}

/* ---- IMPACT IN ACTION (5dd1939, CSR) -------------------------------------
   Black band, 4-up grid, card is a 12% white veil (not a solid fill). */

.zabu .zabu-impact { background: #000; }
.zabu .zabu-impact h2 { color: #fff; }

.zabu .zabu-impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.zabu .zabu-impact-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .12);
}

.zabu .zabu-impact-card > img {
    width: 100%;
    height: 223px;
    object-fit: cover;
}

.zabu .zabu-impact-body h3,
.zabu .zabu-impact-body p { color: #fff; }

/* ---- IMAGE GALLERY (173043f, CSR) ----------------------------------------
   Live runs an Elementor carousel 416 tall. Built as a scroll-snap rail: no
   autoplay, so it can never drag the page to itself the way an earlier batch's
   scrollIntoView autoplay did. */

.zabu .zabu-gallery h2 {
    font-size: 47px;
    font-weight: 600;
    line-height: 65px;
    color: #000;
    margin: 0 auto 30px;
}

.zabu .zabu-gallery-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
}

.zabu .zabu-gallery-rail img {
    flex: 0 0 auto;
    width: 418px;
    height: 416px;
    object-fit: cover;
    scroll-snap-align: start;
}

@media (max-width: 1080px) {
    .zabu .zabu-hero-split { gap: 40px; }
    .zabu .zabu-hero-split-figure { flex-basis: 360px; }
    .zabu .zabu-hero-split-figure img { width: 360px; }
    .zabu .zabu-focus h2,
    .zabu .zabu-impact h2,
    .zabu .zabu-count h2 { font-size: 36px; line-height: 48px; }
    .zabu .zabu-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-count-cell { gap: 24px; }
}

@media (max-width: 880px) {
    .zabu .zabu-hero.is-split { min-height: 0; padding-block: 40px; }
    .zabu .zabu-hero-split { flex-direction: column; align-items: flex-start; gap: 32px; }
    .zabu .zabu-hero-split-figure { flex-basis: auto; }
    .zabu .zabu-count-row { flex-direction: column; }
    .zabu .zabu-count-cell { flex-basis: auto; }
}

@media (max-width: 767px) {
    .zabu .zabu-focus,
    .zabu .zabu-impact,
    .zabu .zabu-count,
    .zabu .zabu-gallery { padding: 40px var(--zabu-gutter); }
    .zabu .zabu-focus h2,
    .zabu .zabu-impact h2,
    .zabu .zabu-count h2,
    .zabu .zabu-gallery h2 { font-size: 28px; line-height: 38px; }
    .zabu .zabu-focus-grid,
    .zabu .zabu-impact-grid { grid-template-columns: 1fr; }
    .zabu .zabu-gallery-rail img { width: 280px; height: 280px; }
}

/* ==========================================================================
   zazz-reviews bands. Measured on live at 1440, each band in view.
   ========================================================================== */

/* ---- INTRO (312ade6) ---- */
.zabu .zabu-intro { padding: 50px var(--zabu-gutter); }

.zabu .zabu-intro h2 {
    font-size: 34px;
    font-weight: 400;
    line-height: 51px;
    color: #000;
    margin: 0 auto 12px;
}

.zabu .zabu-intro p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: #000;
}

/* ---- REVIEW-PLATFORM RAIL (4b2cf42) ----
   Live runs these as a carousel of third-party rating widgets. Each widget
   sizes itself, so the rail just has to give them room and wrap on narrow
   screens. */
/* Live runs this as a carousel, so it is ONE row that scrolls - not a wrapping
   grid. The track scrolls with scrollLeft (never scrollIntoView, which drags
   the whole page to the band - CLAUDE.md). */
/* Boxed, not full-bleed: `overflow: hidden` clips at the PADDING box, which is
   the whole 1425 band, so logos were sliding in and out at the viewport edges.
   clip-path cuts at the gutter instead, so the marquee enters and leaves on the
   same 1180 content box as every other band - no extra wrapper needed. */
.zabu .zabu-logos {
    padding: 20px var(--zabu-gutter);
    overflow: hidden;
    clip-path: inset(0 var(--zabu-gutter));
}

/* Continuous marquee: the track holds the set TWICE and slides exactly -50%,
   so at the end of each cycle the duplicate sits where the original began and
   the loop never snaps back. Transform-only, so it never touches scroll
   position - and so it cannot drag the page to itself the way a
   scrollIntoView autoplay did on an earlier batch (CLAUDE.md). */
.zabu .zabu-logos-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: zabu-rail 45s linear infinite;
}

.zabu .zabu-logos-track:hover,
.zabu .zabu-logos-track:focus-within { animation-play-state: paused; }

/* The gap is the ONLY thing that sets the logos apart, and it must match the
   set's trailing padding or the spacing changes at the seam. Widening it makes
   the track longer, not the visible rail - .zabu-logos clips to the content
   box either way. */
.zabu .zabu-logos-set {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 80px;
    padding-inline-end: 80px;
}

.zabu .zabu-logos-set > * { flex: 0 0 auto; }

/* A third-party widget container is empty until its script injects - and stays
   empty if the script is blocked. Left in flow it still takes a `gap` each,
   which is the dead space at the head of the rail. */
.zabu .zabu-logos-set > div:empty { display: none; }

@keyframes zabu-rail {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .zabu .zabu-logos-track { animation: none; }
}

.zabu .zabu-logos-track img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}

/* ---- TESTIMONIALS (9737dc8 on this page) ----
   The body of this band is three third-party review widgets (Clutch,
   GoodFirms, EmbedSocial); their height is theirs, not ours. */
.zabu .zabu-testi {
    padding: 65px var(--zabu-gutter);
    background: #e6ebf5;
}

.zabu .zabu-testi h2,
.zabu .zabu-ratings h2 {
    font-size: 47px;
    font-weight: 600;
    line-height: 65px;
    color: #000;
    text-align: center;
}

.zabu .zabu-testi > p,
.zabu .zabu-ratings > p {
    max-width: 1152px;
    margin: 5px auto 25.6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    text-align: center;
}

.zabu .zabu-testi > p { color: #000; }
.zabu .zabu-ratings > p { color: #5e5e5e; }

.zabu .zabu-embed { margin-top: 30px; }

/* A third-party widget that fails to load must not leave a silent blank. */
.zabu .zabu-embed-note {
    font-size: 14px;
    line-height: 22px;
    color: #5e5e5e;
    text-align: center;
}

.zabu .zabu-embed-note a { color: #046bd2; text-decoration: underline; }

/* ---- HOW OUR CLIENTS RATE US (4f22297) ----
   Live: 4-up grid 30px apart; per bar a 16/25.6 w500 title with the percentage
   to its right, over a 14px #eee track carrying a 10px #0161ff fill. */
/* Full width: this band opts OUT of the family's 1180 content box and runs to
   the gutter floor instead, so the 4-up bars get 1295 and a long label like
   "Infrastructure & Cloud Readiness" stops wrapping to two lines. */
.zabu .zabu-ratings { padding: 50px 65px; }

.zabu .zabu-ratings-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.zabu .zabu-rating-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.zabu .zabu-rating-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 25.6px;
    color: #000;
}

.zabu .zabu-rating-pct {
    font-size: 16px;
    font-weight: 400;
    line-height: 26.4px;
    color: #6b6b6b;
}

.zabu .zabu-rating-track {
    display: flex;
    align-items: center;
    height: 14px;
    border-radius: 30px;
    background: #eee;
}

.zabu .zabu-rating-fill {
    height: 10px;
    border-radius: 30px;
    background: #0161ff;
}

/* ---- CUSTOMER SUCCESS STORIES (65e4703) ----
   Live: 3-up grid 435 wide, 30px apart. Card is featured image 435x250, then
   the client's brand logo at 143x50 - never ship a card with the logo slot
   empty (CLAUDE.md). */
.zabu .zabu-stories { padding: 50px var(--zabu-gutter); }

.zabu .zabu-stories h2,
.zabu .zabu-faq h2 {
    font-size: 34px;
    line-height: 44.2px;
    color: #14142b;
    margin: 0 auto 24px;
}

.zabu .zabu-stories h2 { font-weight: 300; }

.zabu .zabu-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.zabu .zabu-story { display: flex; flex-direction: column; }

.zabu .zabu-story-shot {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.zabu .zabu-story-logo {
    width: 143px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
    margin: 20px 0 12px;
}

.zabu .zabu-story h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
    color: #14142b;
    margin: 0 0 10px;
}

.zabu .zabu-story h3 a { color: inherit; }
.zabu .zabu-story h3 a:hover { color: #0161ff; }

.zabu .zabu-story p {
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    color: #4a4a63;
}

/* ---- FAQ (8ed691d) ----
   Live: #eff0f7 band, TWO accordion columns, each row a #262338 bar 77 tall
   with 25px padding and a 7px gap under it.
   Deviation: live's answer text computes to #d9dbe9, which on the #eff0f7
   band is effectively invisible. Answers here sit on white with dark ink. */
.zabu .zabu-faq {
    padding: 50px var(--zabu-gutter);
    background: #eff0f7;
}

.zabu .zabu-faq h2 { font-weight: 400; }

.zabu .zabu-faq-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.zabu .zabu-faq-col { display: flex; flex-direction: column; }

.zabu .zabu-faq-item { margin-bottom: 7px; }

.zabu .zabu-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 25px;
    background: #262338;
    color: #fcfcfc;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    cursor: pointer;
    list-style: none;
}

.zabu .zabu-faq-item > summary::-webkit-details-marker { display: none; }

.zabu .zabu-faq-sign {
    flex: 0 0 16px;
    position: relative;
    width: 16px;
    height: 18px;
}

.zabu .zabu-faq-sign::before,
.zabu .zabu-faq-sign::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.zabu .zabu-faq-sign::before { width: 16px; height: 2px; }
.zabu .zabu-faq-sign::after  { width: 2px; height: 16px; }
.zabu .zabu-faq-item[open] .zabu-faq-sign::after { display: none; }

.zabu .zabu-faq-answer {
    padding: 20px;
    background: #fff;
    font-size: 16px;
    line-height: 25.6px;
    color: #14142b;
}

.zabu .zabu-faq-answer p { margin: 0 0 12px; }
.zabu .zabu-faq-answer p:last-child { margin-bottom: 0; }
.zabu .zabu-faq-answer a { color: #046bd2; }
.zabu .zabu-faq-answer a:hover { text-decoration: underline; }
.zabu .zabu-faq-answer ul { margin: 12px 0; padding-inline-start: 20px; list-style: disc; }

/* ---- CLOSING BAND (9b0d637) ----
   Live is a painted PANEL inside a transparent band: 1365x545 at radius 5, copy
   column 683 at padding 50, and the 500x681 photo bottom-aligned so it overhangs
   the panel's TOP by ~136 and never grows it (CLAUDE.md).
   The gradient is the family's documented value. Reading the panel in view still
   reported `backgroundImage: none`, but live plainly renders it - where the DOM
   read and the rendered page disagree, the rendered page wins. */
.zabu .zabu-final {
    padding: 50px var(--zabu-gutter);
}

.zabu .zabu-final-panel {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    border-radius: 5px;
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}

.zabu .zabu-final-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding: 50px;
}

.zabu .zabu-final h2 {
    font-size: 33px;
    font-weight: 600;
    line-height: 43px;
    color: #14142b;
    margin: 0 0 16px;
}

.zabu .zabu-final p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #4a4a63;
    margin: 0 0 24px;
}

.zabu .zabu-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: #0161ff;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.zabu .zabu-final-btn:hover { background: #0150d6; }
.zabu .zabu-final-btn svg path { stroke: currentColor; }

/* The photo hangs UP out of the panel and is bottom-aligned; the negative
   margin keeps its height contribution equal to the copy's so the panel stays
   545 and never inflates to the image's 681. */
.zabu .zabu-final-figure {
    flex: 0 0 500px;
    align-self: flex-end;
    margin-top: -136px;
    position: relative;
    overflow: visible;
}

.zabu .zabu-final-figure img {
    width: 500px;
    max-width: 100%;
    aspect-ratio: 427 / 582;
    height: auto;
    object-fit: cover;
    display: block;
}

@media (max-width: 1080px) {
    .zabu .zabu-ratings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zabu .zabu-testi h2,
    .zabu .zabu-ratings h2 { font-size: 36px; line-height: 48px; }
    .zabu .zabu-final-figure { flex-basis: 340px; }
    .zabu .zabu-final-figure img { width: 340px; }
}

@media (max-width: 880px) {
    .zabu .zabu-faq-cols { grid-template-columns: 1fr; gap: 0; }
    .zabu .zabu-final { flex-direction: column; align-items: flex-start; gap: 32px; }
    .zabu .zabu-final-figure { flex-basis: auto; }
}

@media (max-width: 767px) {
    .zabu .zabu-intro,
    .zabu .zabu-testi,
    .zabu .zabu-ratings,
    .zabu .zabu-stories,
    .zabu .zabu-faq,
    .zabu .zabu-final { padding: 40px var(--zabu-gutter); }
    .zabu .zabu-intro h2 { font-size: 26px; line-height: 38px; }
    .zabu .zabu-testi h2,
    .zabu .zabu-ratings h2,
    .zabu .zabu-stories h2,
    .zabu .zabu-faq h2 { font-size: 26px; line-height: 36px; }
    .zabu .zabu-ratings-grid,
    .zabu .zabu-stories-grid { grid-template-columns: 1fr; }
    .zabu .zabu-faq-item > summary { padding: 18px; font-size: 16px; line-height: 24px; }
    .zabu .zabu-final-btn { width: 100%; justify-content: center; }
}