/* ==========================================================================
   /about-us - page sheet (about-us-preview.php, inc/about-us-page/).
   Loads AFTER css/it-managed-services-zazz.css (header/footer/.z-container).
   Every number below was read off LIVE at 1440 with the band scrolled into
   view (Seraphinite defers paint). Content sits in the house 1340 box
   (.z-container, x50 at 1440); live runs most bands at x20-x45 or edge to
   edge, which is the only reason x-positions differ.
   Namespace: zab-au- (Family B zab- prefix + page tag).
   ========================================================================== */

.zab-au { --zab-au-ink: #141414; --zab-au-grey: #5e5e5e; --zab-au-blue: #0161ff; }
.zmit.zab-au > :where(section) :where(h1, h2, h3, h4, p) { margin: 0; }   /* (0,2,0): page rules below always win; the footer is untouched */
/* The shared sheet tightens .zmit headings (-0.01em); live runs normal tracking. */
.zmit.zab-au > section :is(h1, h2, h3, h4) { letter-spacing: normal; }
.zab-au > section img { max-width: 100%; }
.zab-au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buttons. Live: 16/500/16, padding 16px 32px, #0161ff fill + 1px #0161ff
   border, radius 0 (Contact Us 168x50). The small variant (CSR, careers) is
   14/500/14 at 13px 35px (272x42 / 249x42). */
.zmit .zab-au-btn {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 16px; font-weight: 500; line-height: 16px; color: #fff;
    background: var(--zab-au-blue); border: 1px solid var(--zab-au-blue); border-radius: 0;
    padding: 16px 32px; text-decoration: none; transition: background .3s, color .3s;
}
.zmit .zab-au-btn:hover, .zmit .zab-au-btn:focus-visible { background: #0050d4; color: #fff; }
.zmit .zab-au-btn-sm { font-size: 14px; line-height: 14px; padding: 13px 35px; }
/* Careers button: blue at rest like the others; on hover live flips it to a
   white fill, #0161ff text, 1px #045cb4 border (read under a real pointer). */
.zmit .zab-au-btn-light:hover, .zmit .zab-au-btn-light:focus-visible { background: #fff; color: var(--zab-au-blue); border-color: #045cb4; }
/* Final CTA button: black, 15.38/600, 15px 30px, no border (229x46). */
.zmit .zab-au-btn-dark { background: #000; border: 0; font-size: 15.38px; font-weight: 600; padding: 15px 30px; gap: 18px; }
.zmit .zab-au-btn-dark:hover, .zmit .zab-au-btn-dark:focus-visible { background: #222; }

/* ---------- HERO (8091205) ----------
   Live: 1440 x 409, #eaf4fe, inner box 930 wide centred (x255) with 120px top
   padding; h1 "About Us" eyebrow 16/400/16 uppercase underlined; 20px gap;
   h2 55/600/65 two lines. The Zazz-mark watermark is the inner box's ::after:
   300x300 at inner-left -218 / top 52.5, 5% black.
   OWNER deviation: hero headline 42px/52px (live 55/65). There is no hero form,
   so live's hero geometry is kept - the band stays 409 tall with the eyebrow
   at y120; only the headline is resized. */
.zab-au-hero { background: #eaf4fe; min-height: 409px; overflow: hidden; }
.zab-au-hero-inner { position: relative; max-width: 930px; margin: 0 auto; padding: 120px 0; }
.zab-au-hero-inner::after {
    content: ""; position: absolute; left: -218px; top: 52.5px; width: 300px; height: 300px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg width='356' height='305' viewBox='0 0 356 305' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M209.643 23.1261C191.968 -7.7087 146.674 -7.7087 129 23.1261L9.36076 231.598C45.131 179.947 104.924 146.101 172.656 146.101C228.163 146.101 278.326 168.838 314.361 205.487L209.696 23.0741L209.643 23.1261Z' fill='black' fill-opacity='0.05'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M311.697 265.65C316.354 257.917 319.687 249.455 321.54 240.631C322.227 240.889 322.81 241.254 323.391 241.72C344.239 254.023 352.653 279.407 355.193 288.387C355.298 288.804 355.351 289.27 355.246 289.737C355.193 290.205 355.033 290.62 354.769 290.983C354.557 291.346 354.24 291.71 353.87 291.97C353.499 292.23 353.076 292.436 352.653 292.541C343.393 294.617 316.619 299.185 295.823 286.882C295.241 286.622 294.712 286.156 293.971 285.793C300.956 280.082 306.934 273.282 311.697 265.65Z' fill='black' fill-opacity='0.05'/%3E%3Cpath d='M258.259 305C165.923 288.129 95.9164 207.46 95.9164 110.44C95.9164 98.449 96.9747 86.6652 99.0384 75.245L6.01464 237.308C-11.3413 267.573 10.9357 304.948 46.3356 304.948H258.259V305Z' fill='black' fill-opacity='0.05'/%3E%3C/svg%3E") center / contain no-repeat;
}
.zab-au-hero-inner > * { position: relative; z-index: 1; }
.zmit .zab-au-hero h1 {
    display: inline-block; font-size: 16px; font-weight: 400; line-height: 16px; color: #000;
    text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: 2px; margin-bottom: 20px;
}
.zmit .zab-au-hero h2 { font-size: 55px; font-weight: 600; line-height: 65px; color: var(--zab-au-ink); }

/* ---------- ENGINEERING INTRO (c2ef026) ----------
   Live: 20px below the hero; image column 627 (portrait 666x1426 shown
   object-fit contain in a 627x700 box, 37px below the column top), copy column
   from x627, gap-20 column rhythm, 50px bottom padding; band 737. The copy
   column starts at x627 here too (577 image column inside the 1340 box). */
.zab-au-eng { margin-top: 20px; }
.zab-au-eng-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zab-au-eng-media img { display: block; width: 100%; height: 700px; object-fit: contain; }
.zab-au-eng-copy { display: flex; flex-direction: column; gap: 20px; padding-bottom: 50px; }
.zmit .zab-au-eng-copy h2 { font-size: 49px; font-weight: 600; line-height: 60px; color: var(--zab-au-ink); }
.zab-au-eng-fig { display: block; width: 350px; height: auto; }
.zmit .zab-au-eng-copy p { font-size: 18px; font-weight: 400; line-height: 23.4px; color: #727272; }
.zmit .zab-au-eng-copy p + p { margin-top: 8px; }             /* live: 28px between the two paragraphs */
.zmit .zab-au-eng-copy p a { color: #046bd2; }
.zmit .zab-au-eng-copy .zab-au-btn { margin-top: 6px; }       /* live: button 26px under the last paragraph */
@media (min-width: 1081px) {
    .zab-au-eng-grid { grid-template-columns: 577px 1fr; gap: 0; }
    .zab-au-eng-media { padding-top: 37px; }
}

/* ---------- RECOGNIZED (516aa4da) ----------
   Live: full-bleed 668 band, Zazz-Global.webp as cover background; a #121212
   box 675 x 287 flush to the band's bottom-right, padding 48px 60px, badge
   column (155x179 + 25px right pad) beside a 347 copy column; h2 24/500/24
   white, 20px, p 16/400/24 #d7d7d7. Full-bleed photo composition kept as live. */
.zab-au-rec {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
    min-height: 668px; background: #121212 var(--zab-au-rec-img) center / cover no-repeat;
}
.zab-au-rec-box { display: flex; justify-content: center; width: 675px; max-width: 100%; background: #121212; padding: 48px 60px; }
.zab-au-rec-badge { flex: 0 0 180px; height: 136px; align-self: center; padding-right: 25px; }   /* live: 136 column, badge overflows it */
.zab-au-rec-badge img { display: block; width: 155px; height: auto; }
.zab-au-rec-copy { flex: 0 1 347px; }
.zmit .zab-au-rec-copy h2 { font-size: 24px; font-weight: 500; line-height: 24px; color: #fff; margin-bottom: 20px; }
.zmit .zab-au-rec-copy p { font-size: 16px; font-weight: 400; line-height: 24px; color: #d7d7d7; }

/* ---------- BUILT ON TRUST (7cf073f8) ----------
   Live: #edf7ff, padding 60px, two 675 columns 20 apart; h2 56/600/72.8 in
   525; p 16/400/26.4 black then the logo marquee (70 tall, 225px pitch,
   28s linear, travelling right). Band 292. */
.zab-au-trust { background: #edf7ff; padding: 60px 0; }
.zab-au-trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.zmit .zab-au-trust h2 { font-size: 56px; font-weight: 600; line-height: 72.8px; color: var(--zab-au-ink); max-width: 525px; }
.zmit .zab-au-trust-side p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000; margin-bottom: 23px; }
.zab-au-marquee { overflow: hidden; height: 70px; }
.zab-au-marquee-track { display: flex; width: max-content; animation: zab-au-marquee 28s linear infinite; }
.zab-au-marquee-item { flex: 0 0 225px; height: 70px; display: flex; align-items: center; justify-content: center; }
.zab-au-marquee-item img { width: auto; height: auto; max-width: 221px; max-height: 70px; object-fit: contain; }   /* full colour logos - owner request 2026-09-29 (live WP ran grayscale(1)) */
@keyframes zab-au-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .zab-au-marquee-track { animation: none; } }
@media (min-width: 1081px) { .zab-au-trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- CEO (143847) ----------
   Live: band 893; padding 100 top / 94 bottom; h2 40/600/56 centred in 600;
   35px; row = photo 530x552 | 56 gap | copy. Copy: quote 41x37, 20, h2
   40/600/56, 20, p 16/400/26.4 black, 23, name 20/500/33, 3, role
   16/500/26.4 #5e5e5e, 29, LinkedIn 40x40 radius 5. */
.zab-au-ceo { padding: 100px 0 94px; }
.zmit .zab-au-ceo-title { font-size: 40px; font-weight: 600; line-height: 56px; color: var(--zab-au-ink); text-align: center; max-width: 600px; margin: 0 auto 35px; }
.zab-au-ceo-row { display: grid; grid-template-columns: 1fr; gap: 40px; }
.zab-au-ceo-photo img { display: block; width: 100%; height: auto; }
.zab-au-ceo-quote { display: block; width: 41px; height: 37px; margin-bottom: 20px; }
.zmit .zab-au-ceo-copy h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: var(--zab-au-ink); margin-bottom: 20px; }
.zmit .zab-au-ceo-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000; }
.zmit .zab-au-ceo-copy .zab-au-ceo-name { font-size: 20px; font-weight: 500; line-height: 33px; margin-top: 23px; }
.zmit .zab-au-ceo-copy .zab-au-ceo-role { font-weight: 500; color: var(--zab-au-grey); margin-top: 3px; }
.zab-au-ceo-li { display: inline-block; width: 40px; height: 40px; margin-top: 29px; border-radius: 5px; overflow: hidden; }
.zab-au-ceo-li svg { display: block; width: 40px; height: 40px; }
@media (min-width: 1081px) {
    .zab-au-ceo-row { grid-template-columns: 530px 1fr; gap: 56px; }
    .zab-au-ceo-photo img { height: 552px; object-fit: fill; }
}

/* ---------- SUSTAIN (2f40933) ----------
   Live: white + linear-gradient(rgba(1,97,255,.08), rgba(149,114,247,.08)),
   padding 65/60; h2 40/600/56 centred (764); 30; lead 16/400/26.4 #5e5e5e
   centred in 800; 30; row 320 tall of 7 panels 20 apart - the open one 520,
   the rest 120 (1360). Panels: #fff, radius 10, NO border, shadow
   0 0 14px 2px rgba(0,31,31,.08). Open panel's label column 170 wide painted
   linear-gradient(#0161ff 0%, #9572f7 120%), icon 70 circle #ebebeb at the
   top, 90px letter WHITE at the bottom; collapsed letter #c2c2c2. Body
   padding 50, h3 24/600/31.2, 20, p 16/400/26.4 black. Transition
   .8s cubic-bezier(.05,.61,.41,.95). Band 696. */
.zab-au-sus { background: linear-gradient(rgba(1, 97, 255, .08), rgba(149, 114, 247, .08)), #fff; padding: 65px 0 60px; }
.zmit .zab-au-sus h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: var(--zab-au-ink); text-align: center; max-width: 764px; margin: 0 auto 30px; }
.zmit .zab-au-sus-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-au-grey); text-align: center; max-width: 800px; margin: 0 auto 30px; }
.zab-au-sus-lead a { color: #046bd2; }
.zab-au-sus-row { display: flex; flex-direction: column; gap: 20px; }
.zab-au-sus-item {
    background: #fff; border: 0; border-radius: 10px; box-shadow: 0 0 14px 2px rgba(0, 31, 31, .08);
    overflow: hidden; transition: flex-basis .8s cubic-bezier(.05, .61, .41, .95);
}
.zmit .zab-au-sus-tab {
    display: flex; align-items: center; gap: 20px; width: 100%;
    background: none; border: 0; padding: 20px; cursor: pointer; text-align: left;
}
.zab-au-sus-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%; background: #ebebeb; }
.zab-au-sus-ico svg { display: block; width: 36px; height: 36px; }
.zab-au-sus-letter { font-size: 90px; font-weight: 400; line-height: 90px; color: #c2c2c2; text-transform: uppercase; }
.zab-au-sus-item.is-open .zab-au-sus-tab { background: linear-gradient(#0161ff 0%, #9572f7 120%); }
.zab-au-sus-item.is-open .zab-au-sus-letter { color: #fff; }
.zab-au-sus-body { display: none; padding: 20px 20px 24px; }
.zab-au-sus-item.is-open .zab-au-sus-body { display: block; }
.zmit .zab-au-sus-body h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: var(--zab-au-ink); margin-bottom: 20px; }
.zmit .zab-au-sus-body p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000; }
@media (min-width: 1081px) {
    .zab-au-sus-row { flex-direction: row; height: 320px; }
    .zab-au-sus-item { flex: 0 0 120px; display: flex; }
    .zab-au-sus-item.is-open { flex: 1 1 auto; }
    .zmit .zab-au-sus-tab { flex: 0 0 120px; flex-direction: column; justify-content: space-between; gap: 0; padding: 30px 10px; text-align: center; }
    .zmit .zab-au-sus-item.is-open .zab-au-sus-tab { flex-basis: 170px; padding: 20px 20px; }
    .zab-au-sus-item.is-open .zab-au-sus-body { flex: 1 1 auto; min-width: 0; padding: 50px; }
}
@media (prefers-reduced-motion: reduce) { .zab-au-sus-item { transition: none; } }

/* ---------- ZAZZ BY NUMBERS (1889f22) ----------
   Live: #000, padding 100 top/bottom; ::before Globe-Image.png 550px auto at
   100% 100%. h2 56/600/56 white; 24; p 16/400/26.4 white in 600 (bold run);
   89 (text widget margin); grid 3 x 310 cells, 20 gaps, rows 156. Cell: 2px left border painted
   linear-gradient(#0161ff -13.64%, rgba(1,97,255,0) 120.28%), padding 24;
   NUMBER on top 56/500/56 gradient text (#5b9eff -> #9572f7), label below
   20/500/26 white. Band 807.
   OWNER rule: the number is LEFT-aligned with its label (live centres it). */
.zab-au-num { position: relative; background: #000; padding: 100px 0; color: #fff; overflow: hidden; }
.zab-au-num::before { content: ""; position: absolute; inset: 0; background: var(--zab-au-globe) 100% 100% / 550px auto no-repeat; pointer-events: none; }
.zab-au-num .z-container { position: relative; }
.zmit .zab-au-num h2 { font-size: 56px; font-weight: 600; line-height: 56px; color: #fff; margin-bottom: 24px; }
.zmit .zab-au-num-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #fff; max-width: 600px; margin-bottom: 89px; }
.zab-au-num-lead strong { font-weight: 700; }
.zab-au-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zab-au-stat {
    display: flex; flex-direction: column; min-height: 156px; padding: 24px;
    border-left: 2px solid; border-image: linear-gradient(#0161ff -13.64%, rgba(1, 97, 255, 0) 120.28%) 1;
}
.zab-au-stat-num {
    font-size: 56px; font-weight: 500; line-height: 56px; text-align: left;   /* live: center - OWNER deviation */
    background: linear-gradient(#5b9eff 0%, #9572f7 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #5b9eff;
}
.zab-au-stat-label { font-size: 20px; font-weight: 500; line-height: 26px; color: #fff; text-align: left; }
@media (min-width: 1081px) { .zab-au-num-grid { grid-template-columns: repeat(3, 310px); } }

/* ---------- THE ZAZZ WAY (7a946292) ----------
   Live: padding 100 top/bottom. Row 1 (288 tall, 20 gaps): h2 40/600/56 in
   512 | card 397 | photo tile 397 (bg cover). 15px. Row 2: 3 x 381 grid,
   20/21 gaps, rows 264 - live leaves the 4th column's width empty and so do
   we. Card: 1px #ddd, padding 20; icon 60x60 at the top-right, copy 280
   wide; h3 24/600/31.2 black; 40; p 16/400/24 #5e5e5e.
   Hover (measured with a real pointer): ::before paints
   linear-gradient(#0161ff, #9572f7), h3/p/icon turn white; .3s. Band 1052. */
.zab-au-val { padding: 100px 0; }
.zab-au-val-top, .zab-au-val-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.zab-au-val-grid { margin-top: 20px; }
.zmit .zab-au-val h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: var(--zab-au-ink); }
.zab-au-val-card {
    position: relative; display: flex; gap: 15px; align-items: flex-start; justify-content: space-between;
    border: 1px solid #ddd; padding: 20px; min-height: 264px; overflow: hidden;
}
.zab-au-val-card::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
    background: linear-gradient(#0161ff 0%, #9572f7 100%);
}
.zab-au-val-card > * { position: relative; }
.zab-au-val-copy { flex: 0 1 280px; }
.zmit .zab-au-val-card h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #000; margin-bottom: 40px; transition: color .3s; }
.zmit .zab-au-val-card p { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--zab-au-grey); transition: color .3s; }
.zab-au-val-ico { flex: 0 0 60px; width: 60px; height: 60px; }
.zab-au-val-ico svg { display: block; width: 60px; height: 60px; }
.zab-au-val-ico svg path { fill: #000; transition: fill .3s; }
.zab-au-val-card:hover::before { opacity: 1; }
.zmit .zab-au-val-card:hover h3, .zmit .zab-au-val-card:hover p { color: #fff; }
.zab-au-val-card:hover .zab-au-val-ico svg path { fill: #fff; }
.zab-au-val-photo { min-height: 264px; background: #eef0f7 center / cover no-repeat; }
@media (min-width: 768px) {
    .zab-au-val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1081px) {
    .zab-au-val-top { grid-template-columns: 1fr 397px 397px; }
    .zab-au-val-top > * { min-height: 288px; }
    .zab-au-val-grid { grid-template-columns: repeat(3, 381px); gap: 21px 20px; margin-top: 15px; }
}

/* ---------- CSR (5cadb8d3) ----------
   Live: band 716 directly under the values band; copy column 730 (padding
   0 30 0 40) vertically centred: h2 56/600/67.2 (3 lines), 32, p
   18/400/29.7 #5e5e5e in 585, 24, button 272x42. Photo 689x710 cover on the
   right. */
.zab-au-csr-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zab-au-csr-copy { display: flex; flex-direction: column; justify-content: center; }
.zmit .zab-au-csr h2 { font-size: 56px; font-weight: 600; line-height: 67.2px; color: var(--zab-au-ink); margin-bottom: 32px; }
.zmit .zab-au-csr p { font-size: 18px; font-weight: 400; line-height: 29.7px; color: var(--zab-au-grey); max-width: 585px; margin-bottom: 53px; }
.zab-au-csr-media img { display: block; width: 100%; height: auto; object-fit: cover; }
@media (min-width: 1081px) {
    .zab-au-csr-grid { grid-template-columns: 650px 1fr; gap: 30px; min-height: 716px; }
    .zab-au-csr-media img { height: 710px; }
}

/* ---------- CAREERS (6717cb3) ----------
   Live: 80px under CSR; 50/50 split, 588 tall. Left half #d7e7e3 holding the
   663x557 photo at x50 (20px bottom padding). Right half: copy block at
   y150, padding 0 50: eyebrow h2 16/400/20.8 uppercase underlined, 20,
   h2 51/600/61 in 429, 10, h2 24/500/31.2, 10, p 16/400/28 #727272; then a
   450x90 black box flush to the bottom-left of the half, padding 24, white
   button 249x42 centred. Split composition kept full-bleed as live. */
.zab-au-car { display: grid; grid-template-columns: 1fr; margin-top: 80px; }
.zab-au-car-media { background: #d7e7e3; padding: 0 0 20px 50px; }
.zab-au-car-media img { display: block; width: 100%; height: auto; }
.zab-au-car-side { display: flex; flex-direction: column; }
.zab-au-car-copy { padding: 60px 30px 40px; }
.zmit .zab-au-car-eyebrow {
    display: inline-block; font-size: 16px; font-weight: 400; line-height: 20.8px; color: #000;
    text-transform: uppercase; border-bottom: 1px solid #000; margin-bottom: 20px;
}
.zmit .zab-au-car-title { font-size: 51px; font-weight: 600; line-height: 61px; color: var(--zab-au-ink); max-width: 429px; margin-bottom: 10px; }
.zmit .zab-au-car-sub { font-size: 24px; font-weight: 500; line-height: 31.2px; color: var(--zab-au-ink); margin-bottom: 10px; }
.zmit .zab-au-car-copy p { font-size: 16px; font-weight: 400; line-height: 28px; color: #727272; max-width: 429px; }
.zab-au-car-cta { background: #000; padding: 24px; width: 450px; max-width: 100%; display: flex; justify-content: center; }
.zmit .zab-au-car-cta .zab-au-btn { align-self: center; gap: 16px; }
@media (min-width: 1081px) {
    .zab-au-car { grid-template-columns: 1fr 1fr; min-height: 588px; }
    .zab-au-car-side { justify-content: flex-end; }
    .zab-au-car-copy { padding: 0 50px 20px; }
}

/* ---------- FINAL CTA (c85453a) ----------
   Live: 180px under careers (the figure overhangs 132 of it); #e9edf5 band
   371 tall; columns 653 | 20 | 653; copy padding 50px 0: h2 48/600/62.4
   #14142b in 570, 24, p 17.16/400/25.2, 20, black button. Figure 653x503,
   bottom-aligned, hangs 132px ABOVE the band and 0 below - the copy drives
   the height (CLAUDE.md overhang rule). */
.zab-au-fin { background: #e9edf5; margin-top: 48px; }
.zab-au-fin-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.zab-au-fin-copy { display: flex; flex-direction: column; padding: 50px 0; }
.zmit .zab-au-fin h2 { font-size: 48px; font-weight: 600; line-height: 62.4px; color: #14142b; max-width: 570px; margin: 5px 0 25px; }
.zmit .zab-au-fin p { font-size: 17.16px; font-weight: 400; line-height: 25.2px; color: #14142b; margin-bottom: 20px; }
.zab-au-fin-media img { display: block; width: 100%; height: auto; aspect-ratio: 888 / 685; }
@media (min-width: 1081px) {
    .zab-au-fin { margin-top: 180px; }
    .zab-au-fin-grid { grid-template-columns: 1fr 1fr; }
    /* 653 = live figure width -> 503 tall; 503 - 132 overhang = the 371 copy height */
    .zab-au-fin-media { align-self: flex-end; margin-top: -132px; max-width: 653px; }
}

/* ---------- 1080 and below ---------- */
@media (max-width: 1080px) {
    .zab-au-eng-media img { height: auto; max-height: 560px; }
    .zab-au-rec { min-height: 520px; }
    .zab-au-ceo, .zab-au-val { padding: 60px 0; }
}
@media (max-width: 767px) {
    .zab-au-hero { min-height: 0; }
    .zab-au-hero-inner { padding: 60px 24px; }
    .zab-au-hero-inner::after { left: -120px; top: 20px; width: 220px; height: 220px; }
    .zab-au-rec { min-height: 0; padding-top: 220px; background-size: auto 260px; background-position: center top; }
    .zab-au-rec-box { flex-direction: column; padding: 32px 24px; }
    .zab-au-rec-copy { flex: none; }
    .zab-au-rec-badge { flex: 0 0 auto; height: auto; align-self: flex-start; padding: 0 0 20px; }
    .zab-au-trust, .zab-au-sus { padding: 40px 0; }
    .zab-au-num { padding: 60px 0 280px; }
    .zab-au-num::before { background-size: 320px auto; }
    .zab-au-num-grid { grid-template-columns: 1fr; }
    .zab-au-stat { min-height: 0; }
    .zab-au-stat-num { font-size: 44px; line-height: 48px; }
    .zab-au-val-card { min-height: 0; }
    .zmit .zab-au-val-card h3 { margin-bottom: 20px; }
    .zab-au-car-media { padding: 0 0 20px 24px; }
    .zab-au-car-copy { padding: 40px 24px 30px; }
    .zab-au-car-cta { width: 100%; }
    .zmit .zab-au-btn { white-space: normal; }
}

/* 2026-09-28 owner: Careers band too big on wide screens. Live caps the photo at
   750x630 (measured at 1920: x203-953, band 650) and right-aligns it to the centre
   line; ours grew with the half-width column (903x758, band 778). At 1440 the
   column is narrower than 750, so nothing changes there. */
.zab-au-car-media { display: flex; justify-content: flex-end; align-items: flex-start; }
.zab-au > section .zab-au-car-media img { max-width: 750px; }   /* outranks .zab-au > section img */

/* ---------- Heading scale: live's own Elementor sizes, measured 2026-09-29 on
   https://www.zazz.io/about-us (tablet <=1024, mobile <=767). Replaces the
   earlier estimated 1080/767 sizes. ---------- */
@media (max-width: 1024px) {
    .zmit .zab-au-hero h2 { font-size: 36px; line-height: 39.6px; }
    .zmit .zab-au-eng-copy h2 { font-size: 32px; line-height: 40px; }
    .zmit .zab-au-trust h2 { font-size: 36px; line-height: 54px; }
    .zmit .zab-au-ceo-title { font-size: 36px; line-height: 39.6px; }
    .zmit .zab-au-ceo-copy h2, .zmit .zab-au-csr h2 { font-size: 36px; line-height: 43.2px; }
    .zmit .zab-au-sus h2, .zmit .zab-au-num h2, .zmit .zab-au-val h2 { font-size: 36px; line-height: 56px; }
    .zmit .zab-au-car-title { font-size: 36px; line-height: 45px; }
    .zmit .zab-au-fin h2 { font-size: 30px; line-height: 39px; }
}
@media (max-width: 767px) {
    .zmit .zab-au-hero h2 { font-size: 22px; line-height: 24.2px; }
    .zmit .zab-au-eng-copy h2 { font-size: 24px; line-height: 30px; }
    .zmit .zab-au-rec-copy h2 { font-size: 26px; line-height: 33.8px; }
    .zmit .zab-au-trust h2 { font-size: 31px; line-height: 40px; }
    .zmit .zab-au-ceo-title, .zmit .zab-au-sus h2, .zmit .zab-au-val h2, .zmit .zab-au-car-title { font-size: 31px; line-height: 41px; }
    .zmit .zab-au-ceo-copy h2 { font-size: 24px; line-height: 41px; }
    .zmit .zab-au-sus-body h3 { font-size: 18.24px; line-height: 23.712px; }
    .zmit .zab-au-num h2 { font-size: 31px; line-height: 56px; }
    .zmit .zab-au-csr h2 { font-size: 28px; line-height: 33.6px; }
    .zmit .zab-au-car-sub { font-size: 16px; line-height: 20.8px; }
    .zmit .zab-au-fin h2 { font-size: 24px; line-height: 31.2px; }
}

/* ---------- TABLET ONLY (768-1024) - owner fix 2026-09-29, measured on the
   approved reference https://www.zazz.io/about-us-0 at 768 and 1024.
   Hero: copy centred in a 450 (768) / 500 (1024) column = min(500px, 60%),
   120px top/bottom padding, band 388-398; watermark 220x190 at the column's
   left edge, top 50%, translate(-142px, -95px) (live's own values). Headline 33/36.3 at 768 -> 36 at 1024.
   Engineering: two columns, photo 53.3% | copy 46.7% (402|351 at 768,
   537|472 at 1024); photo 120vw tall, object-fit contain, bottom-aligned;
   h2 28/30 (768) -> 32/40 (1024); p 14/18.2; figure 280 wide.
   Desktop (>=1081) and mobile (<=767) are untouched. ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .zab-au-hero { min-height: 0; }
    .zab-au-hero-inner { width: min(500px, 60%); max-width: none; padding: 120px 0; }
    .zab-au-hero-inner::after { left: 0; top: 50%; width: 220px; height: 190px; transform: translate(-142px, -95px); }
    .zmit .zab-au-hero h2 { font-size: clamp(33px, calc(24px + 1.172vw), 36px); line-height: 1.1; }

    .zab-au-eng-grid { grid-template-columns: 53.3% 1fr; gap: 0; }
    .zab-au-eng-media img { height: 120vw; max-height: none; object-fit: contain; object-position: 50% 100%; }
    .zab-au-eng-copy { gap: 18px; }
    .zmit .zab-au-eng-copy h2 { font-size: clamp(28px, calc(16px + 1.5625vw), 32px); line-height: clamp(30px, 3.906vw, 40px); }
    .zab-au-eng-fig { width: 280px; }
    .zmit .zab-au-eng-copy p { font-size: 14px; line-height: 18.2px; }
    .zmit .zab-au-eng-copy .zab-au-btn { margin-top: 8px; }
}

/* ---------- MOBILE (<=767) HERO + ENGINEERING: replica of the WP page ----------
   Owner request 2026-09-29: match /about-us-0 on phones, measured at 390.
   Hero: band 272 (#eaf4fe, 20px side pad + 17.5px inner margin = content x37.5
   w315, 80px top/bottom padding); Zazz-mark 140x130 at inner +182 / +70.8.
   Engineering: 20px below the hero, 15px gutters; COPY FIRST (h2 24/30 centred,
   18px column gap, fig 272 wide, p 16/22.4, 25px between paragraphs, button 14px
   under the text), then the portrait 276 wide centred 50px below, no bottom pad.
   Scoped to <=767 only - tablet/desktop untouched. */
@media (max-width: 767px) {
    .zab-au-hero-inner { margin: 0 37.5px; padding: 80px 0; display: flex; flex-direction: column; align-items: flex-start; }   /* column like WP: no inline-block line-box strut above the eyebrow */
    .zab-au-hero-inner::after { left: 182px; top: 70.8px; width: 140px; height: 130px; }
    .zmit .zab-au-eng .z-container { padding: 0 15px; }
    .zab-au-eng-grid { gap: 50px; }
    .zab-au-eng-copy { order: 1; gap: 18px; padding-bottom: 0; }
    .zab-au-eng-media { order: 2; }
    .zab-au-eng-media img { width: 276px; max-width: 100%; height: auto; max-height: none; margin: 0 auto; }
    .zmit .zab-au-eng-copy h2 { text-align: center; }
    .zab-au-eng-fig { width: 272px; max-width: 100%; }
    .zmit .zab-au-eng-copy p { font-size: 16px; line-height: 22.4px; }
    .zmit .zab-au-eng-copy p + p { margin-top: 7px; }
    .zmit .zab-au-eng-copy .zab-au-btn { margin-top: -4px; }
}

/* ---------- MOBILE (<=767) RECOGNIZED: replica of the WP page ----------
   Owner request 2026-09-29, measured at 390: 119px strip of the photo (full
   width, natural height) above a #121212 box, padding 15; badge 120 wide
   CENTRED in a 119 row (the badge overflows it, as WP); h2 26/33.8 and p
   14/21 centred, 20px apart. Band 427, box 307. <=767 only. */
@media (max-width: 767px) {
    .zab-au-rec { padding-top: 119px; background-size: 100% auto; background-position: center top; }
    .zab-au-rec-box { align-items: center; padding: 15px; }
    .zab-au-rec-badge { align-self: center; height: 119px; padding: 0; }
    .zab-au-rec-badge img { width: 120px; }
    .zab-au-rec-copy { width: 100%; text-align: center; }
    .zmit .zab-au-rec-copy p { font-size: 14px; line-height: 21px; }
}

/* ---------- TABLET ONLY (768-1024), part 2 - owner fix 2026-09-29, measured
   on https://www.zazz.io/about-us-0 at 768 / 1024.
   Recognized: band 452 / 500; #121212 box 600 wide flush bottom-right,
   padding 30, 242 tall; badge 134x155 at box +46; copy 350 at box +204;
   h2 26/26 (768) -> 24/24 (1024); p 14/21.
   Built on Trust: padding 60 all round, two equal columns 20 apart; h2 31/40
   -> 36/54; p 14/23.1; logos 154 pitch, 70 tall.
   CEO: band padding 50/0; title 31/34.1 -> 36/39.6; photo ~37% of the row
   (255 / 357 wide, decoration baked into the image), 56 gap, copy the rest;
   h2 31/37.2 -> 36/43.2; p 14/23.1. Desktop and mobile untouched. ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .zab-au-rec { min-height: calc(308px + 18.75vw); }
    .zab-au-rec-box { width: 600px; padding: 30px; justify-content: flex-start; }
    .zab-au-rec-badge { flex: 0 0 174px; height: auto; align-self: flex-start; padding: 36px 0 0 16px; }
    .zab-au-rec-badge img { width: 134px; }
    .zab-au-rec-copy { flex: 0 1 350px; padding-top: 16px; }
    .zmit .zab-au-rec-copy h2 { font-size: clamp(24px, calc(32px - 0.78125vw), 26px); line-height: 1; }
    .zmit .zab-au-rec-copy p { font-size: 14px; line-height: 21px; }

    .zab-au-trust { padding: 60px 30px; }
    .zab-au-trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .zmit .zab-au-trust h2 { font-size: clamp(31px, calc(16px + 1.953vw), 36px); line-height: clamp(40px, calc(5.469vw - 2px), 54px); }
    .zmit .zab-au-trust-side p { font-size: 14px; line-height: 23.1px; }
    .zab-au-marquee-item { flex-basis: 154px; }
    .zab-au-marquee-item img { max-width: 150px; }

    .zab-au-ceo { padding: 50px 0; }
    .zmit .zab-au-ceo-title { font-size: clamp(31px, calc(16px + 1.953vw), 36px); line-height: 1.1; }
    .zab-au-ceo-row { grid-template-columns: 37% 1fr; gap: 56px; align-items: start; }
    .zmit .zab-au-ceo-copy h2 { font-size: clamp(31px, calc(16px + 1.953vw), 36px); line-height: 1.2; }
    .zmit .zab-au-ceo-copy p { font-size: 14px; line-height: 23.1px; }
    .zmit .zab-au-ceo-copy .zab-au-ceo-name { font-size: 14px; line-height: 23.1px; }   /* live: name + role both 14/500 */
}

/* ---------- MOBILE (<=767) ZAZZ BY NUMBERS: replica of the WP page ----------
   Owner request 2026-09-29, measured at 390: band 657, padding 50 top/bottom,
   15px gutters; globe stays 550 wide at bottom-right behind the stats (as WP,
   no 280px reserve). h2 -> 15 -> lead 14/19.6 -> 52 -> 2-col grid, 5px gap,
   first two rows equal height (1fr), third row auto; stat padding 10 with the
   gradient left rule; number 40/40, label 14/18.2 500. <=767 only. */
@media (max-width: 767px) {
    .zab-au-num { padding: 50px 0; }
    .zab-au-num::before { background-size: 550px auto; }
    .zmit .zab-au-num .z-container { padding: 0 15px; }
    .zmit .zab-au-num h2 { margin-bottom: 15px; }
    .zmit .zab-au-num-lead { font-size: 14px; line-height: 19.6px; margin-bottom: 52px; }
    .zab-au-num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 5px; align-content: start; }
    .zab-au-stat { padding: 10px; min-height: 0; }
    .zab-au-stat-num { font-size: 40px; line-height: 40px; }
    .zab-au-stat-label { font-size: 14px; line-height: 18.2px; }
}

/* ---------- TABLET ONLY (768-1024), part 3 - owner fix 2026-09-29, measured
   on https://www.zazz.io/about-us-0. WP switches values again at 880
   (Elementor mobile_extra), so there are two tiers: 768-880 and 881-1024.
   Numbers: 3 columns, 20 gaps, 50px band padding; lead 14px in 590, 64 under.
     881+: cells padding 24 / 156 tall, label 20.  <=880: h2 41/56, cells
     padding 15 / 128 tall, label 16/20.8, lead 14/23.1.
   Values: heading full width, then card | photo, then the 2-col grid; 15px
     under the heading and between rows 1/2, grid gaps 21/20; band padding 50.
     <=880: h2 26/29, cards min 288.  881+: h2 36/56 (existing).
   CSR: photo FIRST, full bleed, cover, 500 tall (350 <=880), then the copy at
     x50 with 50px padding; p 14/23.1 in 585, 23 under.
     <=880: h2 31/37.2.  881+: h2 36/43.2 (existing).
   SUSTAIN: layout kept as is (owner: UI correct); the open/close now eases
     like WP - 0.8s cubic-bezier(.05,.61,.41,.95) on height, padding and the
     tab's gradient fill (WP's own ue_option transition) instead of snapping. */
@media (min-width: 768px) and (max-width: 1024px) {
    .zab-au-num { padding: 50px 0; }
    .zmit .zab-au-num-lead { font-size: 14px; line-height: 21px; max-width: 590px; margin-bottom: 64px; }
    .zab-au-num-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

    .zab-au-val { padding: 50px 0; }
    .zab-au-val-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; }
    .zab-au-val-top > h2 { grid-column: 1 / -1; max-width: 600px; }
    .zab-au-val-grid { margin-top: 15px; gap: 21px 20px; }
    .zab-au-val-card { min-height: 240px; }

    .zab-au-csr-grid { gap: 0; }
    .zab-au-csr-media { order: -1; margin: 0 -30px; }
    .zab-au-csr-media img { height: 500px; }
    .zab-au-csr-copy { padding: 50px 20px; }
    .zmit .zab-au-csr p { font-size: 14px; line-height: 23.1px; margin-bottom: 23px; }

    .zmit .zab-au-sus-tab { position: relative; }
    .zmit .zab-au-sus-tab::before {
        content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
        background: linear-gradient(#0161ff 0%, #9572f7 120%);
        transition: opacity .8s cubic-bezier(.05, .61, .41, .95);
    }
    .zmit .zab-au-sus-tab > * { position: relative; }
    .zmit .zab-au-sus-item.is-open .zab-au-sus-tab { background: none; }
    .zmit .zab-au-sus-item.is-open .zab-au-sus-tab::before { opacity: 1; }
    .zab-au-sus-letter { transition: color .8s cubic-bezier(.05, .61, .41, .95); }
    .zab-au-sus-body {
        display: block; max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
        transition: max-height .8s cubic-bezier(.05, .61, .41, .95), padding .8s cubic-bezier(.05, .61, .41, .95), opacity .5s ease;
    }
    .zab-au-sus-item.is-open .zab-au-sus-body { max-height: 320px; opacity: 1; padding-top: 20px; padding-bottom: 24px; }
}
@media (min-width: 768px) and (max-width: 880px) {
    .zmit .zab-au-num h2 { font-size: 41px; line-height: 56px; }
    .zmit .zab-au-num-lead { line-height: 23.1px; }
    .zab-au-stat { min-height: 128px; padding: 15px; }
    .zab-au-stat-label { font-size: 16px; line-height: 20.8px; }

    .zmit .zab-au-val h2 { font-size: 26px; line-height: 29px; }
    .zab-au-val-card { min-height: 288px; }

    .zab-au-csr-media img { height: 350px; }
    .zmit .zab-au-csr h2 { font-size: 31px; line-height: 37.2px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .zmit .zab-au-sus-tab::before, .zab-au-sus-letter, .zab-au-sus-body { transition: none; }
}

/* ---------- TABLET ONLY (768-1024), part 4 - owner fix 2026-09-29, measured
   on https://www.zazz.io/about-us-0. Two tiers again (WP switches at 880).
   Careers, 881-1024: two halves; photo half #d7e7e3, padding 0 0 32 10,
     photo right-aligned; copy half top-aligned, padding 0 20: title 36/45,
     sub 24/31.2, p 16/28 in 394; black box 450 wide, padding 15, flush to
     the half's bottom-left, button centred.
   Careers, 768-880: stacked; photo full bleed, 32px green under it; 49px
     gap; copy padding 0 20: title 31/41, sub 16/20.8, p 14/28; 20px; black
     strip full width, padding 20, button LEFT (235x44, 14px, 14px 28px).
   Final CTA: straight after careers (no gap); copy | photo side by side,
     20 apart, copy padding 50/0 vertically centred.
     881+: 50px side padding, h2 30/39, photo 445 at natural aspect,
     bottom-aligned.  <=880: h2 24/31.2, photo 400 tall, cover. ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .zab-au-fin { margin-top: 0; }
    .zab-au-fin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .zab-au-fin-copy { align-self: center; }
    .zmit .zab-au-car-cta .zab-au-btn { padding: 14px 28px; }   /* live 235x44 at both tiers */
}
@media (min-width: 881px) and (max-width: 1024px) {
    .zab-au-car { grid-template-columns: 1fr 1fr; }
    .zab-au-car-media { padding: 0 0 32px 10px; }
    .zab-au-car-side { justify-content: space-between; }
    .zab-au-car-copy { padding: 0 20px; }
    .zmit .zab-au-car-copy p { max-width: 394px; }
    .zab-au-car-cta { padding: 15px; }

    .zmit .zab-au-fin .z-container { padding: 0 50px; }
    .zab-au-fin-media { align-self: flex-end; }
}
@media (min-width: 768px) and (max-width: 880px) {
    .zab-au-car-media { padding: 0 0 32px; }
    .zab-au > section .zab-au-car-media img { max-width: none; }
    .zab-au-car-side { margin-top: 49px; gap: 20px; }
    .zab-au-car-copy { padding: 0 20px; }
    .zmit .zab-au-car-title { font-size: 31px; line-height: 41px; }
    .zmit .zab-au-car-sub { font-size: 16px; line-height: 20.8px; }
    .zmit .zab-au-car-copy p { font-size: 14px; line-height: 28px; max-width: none; }
    .zab-au-car-cta { width: 100%; padding: 20px; justify-content: flex-start; }

    .zmit .zab-au-fin h2 { font-size: 24px; line-height: 31.2px; }
    .zab-au-fin-media img { height: 400px; aspect-ratio: auto; object-fit: cover; }
}

/* ---------- MOBILE (<=767) FINAL CTA: replica of the WP page ----------
   Owner request 2026-09-29, measured at 390: band 679, 50px top padding,
   copy 20px side padding with 20px rhythm; h2 24/31.2 centred (5px inset),
   p 14/25.2 centred; button FULL WIDTH (350) x46, 13/16 600, content centred,
   16px icon gap; figure full-bleed 390x400 object-fit cover, flush bottom.
   <=767 only. */
@media (max-width: 767px) {
    .zmit .zab-au-fin .z-container { padding: 0; }
    .zab-au-fin-copy { padding: 50px 20px 0; gap: 20px; }
    .zmit .zab-au-fin h2 { font-size: 24px; line-height: 31.2px; text-align: center; max-width: none; margin: 5px; }
    .zmit .zab-au-fin p { font-size: 14px; line-height: 25.2px; text-align: center; margin: 0; }
    .zmit .zab-au-fin .zab-au-btn { align-self: stretch; justify-content: center; font-size: 13px; line-height: 16px; padding: 15px 30px; gap: 16px; }
    .zab-au-fin-media img { height: 400px; aspect-ratio: auto; object-fit: cover; }
}

/* ---------- MOBILE (<=767) CSR: replica of the WP page ----------
   Owner request 2026-09-29, measured at 390: IMAGE FIRST, 384x300 (full width
   less WP's 6px right margin), object-fit cover; copy 15px padding; h2 28/33.6
   -> 30 -> p 14/23.1 -> 22.4 -> button FULL WIDTH 360x44, centred. Band 666.
   <=767 only. */
@media (max-width: 767px) {
    .zmit .zab-au-csr .z-container { padding: 0; }
    .zab-au-csr-grid { gap: 0; }
    .zab-au-csr-media { order: -1; }
    .zab-au-csr-media img { width: calc(100% - 6px); height: 300px; object-fit: cover; }
    .zab-au-csr-copy { padding: 15px; }
    .zmit .zab-au-csr h2 { margin-bottom: 30px; }
    .zmit .zab-au-csr p { font-size: 14px; line-height: 23.1px; margin-bottom: 22.4px; }
    .zmit .zab-au-csr .zab-au-btn { align-self: stretch; justify-content: center; padding: 14px 0; }
}