/* ==========================================================================
   Ravo Zenith — component library
   Depends on the tokens declared in style.css
   ========================================================================== */

/* ==========================================================================
   1. Navigation
   ========================================================================== */
.z-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: var(--nav-h);
    color: var(--text-invert);
    transition: background 0.45s var(--ease), color 0.45s var(--ease),
        box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
    border-bottom: 1px solid transparent;
}

.z-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    opacity: 1;
    transition: opacity 0.45s var(--ease);
    pointer-events: none;
}

.z-nav.is-solid,
.z-nav.is-opaque {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--text);
    border-bottom-color: var(--line);
}

.z-nav.is-solid::before,
.z-nav.is-opaque::before {
    opacity: 0;
}

.z-nav__inner {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.75rem);
}

/* Brand */
.z-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: none;
    margin-right: auto;
}

.z-nav__brand img,
.z-nav__brand .custom-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: filter 0.45s var(--ease);
}

/* The brand and the certification marks run as supplied, in both states of the
   bar — no knock-out, no greyscale. */

/* The certification marks, in their own colours. In the markup they sit between
   the WhatsApp link and the menu button, which is where they belong on a phone;
   on a wide bar they are ordered back to the brand's side.

   Each mark carries its own ground rather than the four of them sharing one
   box: the national record leads on a plate, the three testing marks follow as
   discs. The artwork is colour with dark lettering, so without a ground of some
   kind it disappears over a hero. */
.z-nav__certs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    position: relative;
    margin-right: 0.25rem;
}

/* Below this the marks would be pushed off the bar by the logo and the burger. */
@media (max-width: 359px) {
    .z-nav__certs {
        display: none;
    }
}

/* The chip is a wrapper, not the image itself. Rounding an <img> clips the
   artwork as well as the ground — a disc took the T off TÜVRheinland and the
   last letters off SIRIM's INTERNATIONAL — because the curve cuts the picture,
   not just the box behind it. With the ground on a parent, the logo sits inside
   the shape at whatever size fits and nothing is ever cut. */
.z-nav__cert {
    display: grid;
    place-items: center;
    flex: none;
    background: #fff;
    transition: background 0.45s var(--ease);
}

.z-nav__cert img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The record: a plate, sized to the artwork rather than squared off, with the
   corners rounded to sit with the three discs beside it. The radius is bounded
   by the artwork — the Malaysia mark is a framed rectangle, and anything much
   past this starts eating the corners of its own border. */
.z-nav__cert--lead {
    height: 34px;
    padding: 4px 7px;
    border-radius: 8px;
}

.z-nav__cert--lead img {
    height: 26px;
}

/* The testing marks: discs. A square box is what makes a circle possible, so
   the artwork is fitted inside it rather than filling it. */
.z-nav__cert--round {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* The artwork is held inside the circle's inscribed square, so a wide mark runs
   to the widest chord rather than to the curve. */
.z-nav__cert--round img {
    max-width: 22px;
    max-height: 22px;
}

@media (min-width: 1180px) {
    .z-nav__certs {
        /* The markup puts them by the burger, which is where a phone needs them;
           here they are pulled back to the brand's side. Negative values, so the
           menu, the switcher and the CTA keep their natural order at 0. */
        order: -1;
        gap: clamp(0.5rem, 0.8vw, 0.75rem);
        margin-left: clamp(1.25rem, 2vw, 2rem);
        margin-right: auto;
    }

    /* The brand no longer pushes everything right — the marks beside it do. */
    .z-nav__brand {
        order: -2;
        margin-right: 0;
    }

    .z-nav__cert--lead {
        height: 42px;
        padding: 5px 8px;
        border-radius: 10px;
    }

    .z-nav__cert--lead img {
        height: 32px;
    }

    .z-nav__cert--round {
        width: 42px;
        height: 42px;
    }

    .z-nav__cert--round img {
        max-width: 29px;
        max-height: 29px;
    }

    /* The divider stands in the gap between the brand and the marks. */
    .z-nav__certs::before {
        content: "";
        position: absolute;
        left: calc(clamp(1.25rem, 2vw, 2rem) / -2);
        top: 50%;
        width: 1px;
        height: 28px;
        transform: translateY(-50%);
        background: var(--line-invert);
        transition: background 0.45s var(--ease);
    }
}

/* Scrolled, the bar is already white: the grounds have nothing left to do, so
   they go and the marks sit straight on the bar. */
.z-nav.is-solid .z-nav__cert,
.z-nav.is-opaque .z-nav__cert {
    background: transparent;
}

.z-nav.is-solid .z-nav__certs::before,
.z-nav.is-opaque .z-nav__certs::before {
    background: var(--line);
}

.z-nav__wordmark {
    display: grid;
    line-height: 1;
}

.z-nav__wordmark strong {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.z-nav__wordmark span {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 4px;
}

/* Desktop menu */
.z-nav__menu {
    display: none;
    align-items: center;
    gap: clamp(0.75rem, 1.8vw, 2rem);
}

.z-nav__menu ul {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.8vw, 2rem);
}

.z-nav__menu li {
    position: relative;
}

.z-nav__menu a {
    display: inline-block;
    padding: 0.5rem 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.z-nav__menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent);
    transition: width 0.4s var(--ease);
}

.z-nav__menu a:hover::after,
.z-nav__menu .current-menu-item > a::after,
.z-nav__menu .current-menu-ancestor > a::after {
    width: 100%;
}

.z-nav__menu a:hover {
    color: var(--accent);
}

.z-nav.is-solid .z-nav__menu a:hover,
.z-nav.is-opaque .z-nav__menu a:hover {
    color: #12885a;
}

/* Dropdown / mega menu */
.z-nav__menu ul ul {
    position: absolute;
    top: calc(100% + 14px);
    left: -1.25rem;
    min-width: 240px;
    display: block;
    background: var(--ink);
    border: 1px solid var(--line-invert);
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.z-nav__menu li:hover > ul,
.z-nav__menu li.submenu-open > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.z-nav__menu ul ul li a {
    display: block;
    padding: 0.6875rem 1.25rem;
    color: var(--text-invert);
    letter-spacing: 0.12em;
}

.z-nav__menu ul ul li a::after {
    display: none;
}

.z-nav__menu ul ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}

/* Mega menu: multi-column panel with icon + subtitle rows */
.z-nav__menu .mega-menu-parent > ul.mega-menu-submenu {
    left: 50%;
    transform: translate(-50%, 8px);
    width: min(720px, calc(100vw - 3rem));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    padding: 0.5rem;
    background: rgba(8, 8, 8, 0.96);
    border-top: 2px solid var(--accent);
    border-right-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.18);
    border-left-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 32px 80px -22px rgba(0, 0, 0, 0.8);
}

.z-nav__menu .mega-menu-parent:hover > ul.mega-menu-submenu,
.z-nav__menu .mega-menu-parent.submenu-open > ul.mega-menu-submenu {
    transform: translate(-50%, 0);
}

.z-nav__menu .mega-menu-submenu a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    align-content: start;
    column-gap: 1rem;
    row-gap: 0.3125rem;
    height: 100%;
    padding: 1.25rem;
    /* The bar's own links are nowrap so a label never breaks mid-word, but a
       panel cell holds a sentence: inherited, nowrap ran the subtitle out of its
       cell and across the neighbouring column. */
    white-space: normal;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.z-nav__menu .mega-menu-submenu a:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: var(--accent-line);
    color: var(--text-invert);
}

.z-nav__menu .mega-menu-submenu > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.mega-menu-icon-fa {
    color: var(--accent);
}

.z-nav__menu .mega-menu-submenu .mega-menu-icon-fa {
    grid-row: 1 / span 2;
    align-self: center;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid var(--line-invert);
    font-size: 1rem;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.z-nav__menu .mega-menu-submenu a:hover .mega-menu-icon-fa {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    transform: translateY(-2px);
}

.mega-menu-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-top: 3px;
}

.mega-menu-subtitle {
    grid-column: 2;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.56);
    line-height: 1.5;
}

/* Country switcher */
.z-switch {
    position: relative;
    display: none;
    flex: none;
}

.z-switch__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid currentColor;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.z-switch__toggle:hover {
    opacity: 1;
    color: var(--accent);
}

.z-switch__flag {
    width: 20px;
    height: 13px;
    flex: none;
    object-fit: cover;
}

.z-switch__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: var(--ink);
    border: 1px solid var(--line-invert);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    z-index: 5;
}

.z-switch.is-open .z-switch__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.z-switch__menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--text-invert);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.z-switch__menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}

.z-switch__menu a.is-current {
    color: var(--accent);
}

/* Nav CTA — flush block at the top-right corner */
.z-nav__cta {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    align-self: stretch;
    flex: none;
    padding: 0 clamp(1.25rem, 2.2vw, 2.25rem);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.z-nav__cta:hover {
    background: var(--ink);
    color: var(--accent);
}

/* Burger */
.z-burger {
    display: grid;
    gap: 5px;
    padding: 0.75rem 0 0.75rem 0.75rem;
    flex: none;
}

.z-burger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

@media (min-width: 1120px) {
    .z-nav__inner {
        /* The CTA block sits flush in the top-right corner. */
        padding-right: 0;
    }

    .z-nav__menu,
    .z-switch,
    .z-nav__cta {
        display: flex;
    }

    .z-burger {
        display: none;
    }
}

/* Mobile drawer */
.z-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--text-invert);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    overflow-y: auto;
}

.z-drawer.is-open {
    transform: translateX(0);
}

.z-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem var(--gutter);
    border-bottom: 1px solid var(--line-invert);
}

.z-drawer__close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-invert);
    color: var(--text-invert);
    font-size: 1rem;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.z-drawer__close:hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.z-drawer__body {
    flex: 1;
    padding: 1.25rem var(--gutter) 2rem;
}

.z-drawer__body ul {
    display: grid;
}

.z-drawer__body li {
    border-bottom: 1px solid var(--line-invert);
}

.z-drawer__body a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.75rem 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 0.3s var(--ease);
}

.z-drawer__body a:hover,
.z-drawer__body a.is-current {
    color: var(--accent);
}

/* The row doubles as the accordion control. A 2px accent outline around a
   full-width row reads as stray decoration — especially after a tap, where
   some mobile browsers keep :focus-visible on a link whose click was
   preventDefault()ed. A tinted row with an accent edge is just as visible and
   looks deliberate. */
.z-drawer__body a:focus-visible {
    outline: none;
    background: rgba(0, 255, 136, 0.06);
    box-shadow: inset 0 0 0 1px var(--accent-line), inset 3px 0 0 var(--accent);
}

/* Parent rows: a real bordered control instead of a floated "+" character */
.z-drawer__body li.menu-item-has-children > a,
.z-drawer__body li.mega-menu-parent > a {
    padding-right: 3rem;
}

.z-drawer__body li.menu-item-has-children > a::after,
.z-drawer__body li.mega-menu-parent > a::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-invert);
    color: var(--accent);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
        color 0.3s var(--ease);
}

.z-drawer__body li.submenu-active > a {
    color: var(--accent);
}

.z-drawer__body li.submenu-active > a::after {
    content: "–";
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Submenu: a rail ties the children to their parent */
.z-drawer__body ul ul {
    display: none;
    margin-bottom: 1rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 1px solid var(--accent-line);
    background: rgba(255, 255, 255, 0.022);
}

.z-drawer__body li.submenu-active > ul {
    display: grid;
}

.z-drawer__body ul ul li {
    border-bottom: 0;
}

.z-drawer__body ul ul a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 0.875rem;
    min-height: 44px;
    padding: 0.375rem 0;
    font-family: var(--font-text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-invert-muted);
}

.z-drawer__body ul ul a:hover {
    color: var(--accent);
}

/* The icon had no slot of its own, so it sat flush against the label */
.z-drawer__body .mega-menu-icon-fa {
    width: 26px;
    display: grid;
    place-items: center;
    font-size: 0.9375rem;
    color: var(--accent);
}

.z-drawer__body .mega-menu-title {
    min-width: 0;
    line-height: 1.35;
}

.z-drawer__body .mega-menu-subtitle {
    display: none;
}

.z-drawer__foot {
    padding: 1.5rem var(--gutter) 2.5rem;
    border-top: 1px solid var(--line-invert);
    display: grid;
    gap: 1rem;
}

.z-drawer__countries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.z-drawer__countries a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--line-invert);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.z-drawer__countries a.is-current {
    border-color: var(--accent);
    color: var(--accent);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.z-hero {
    position: relative;
    min-height: min(94vh, 920px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ink);
    color: var(--text-invert);
    padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem));
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.z-hero__media {
    position: absolute;
    inset: 0;
}

.z-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.2s var(--ease), transform 7s linear;
}

.z-hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.z-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.z-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(4, 4, 4, 0.88) 0%, rgba(4, 4, 4, 0.6) 42%, rgba(4, 4, 4, 0.15) 78%),
        linear-gradient(to top, rgba(4, 4, 4, 0.75), rgba(4, 4, 4, 0) 55%);
}

.z-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.z-hero__content {
    max-width: 720px;
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2rem);
    justify-items: start;
}

.z-hero__title {
    font-size: var(--fs-display-xl);
    line-height: 0.92;
    letter-spacing: 0.005em;
}

.z-hero__title span {
    display: block;
    overflow: hidden;
}

.z-hero__lede {
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-body);
    line-height: 1.7;
}

/* Slide indicators */
.z-hero__dots {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.z-hero__dot {
    display: grid;
    gap: 0.5rem;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.35s var(--ease);
}

.z-hero__dot::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.35s var(--ease);
}

.z-hero__dot.is-active {
    color: var(--accent);
}

.z-hero__dot.is-active::after {
    background: var(--accent);
}

/* Light-image variant */
.z-hero--light {
    color: var(--text);
}

.z-hero--light .z-hero__scrim {
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(255, 255, 255, 0) 80%);
}

.z-hero--light .z-hero__lede {
    color: var(--text-muted);
}

.z-hero--light .z-eyebrow {
    color: var(--text-muted);
}

.z-hero--light .z-hero__dot {
    color: rgba(10, 10, 10, 0.45);
}

.z-hero--light .z-hero__dot::after {
    background: rgba(10, 10, 10, 0.2);
}

/* Compact page header (inner pages) */
.z-pagehead {
    position: relative;
    background: var(--ink);
    color: var(--text-invert);
    padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6.5rem));
    padding-bottom: clamp(3rem, 6vw, 6rem);
    overflow: hidden;
}

.z-pagehead__media {
    position: absolute;
    inset: 0;
}

.z-pagehead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.z-pagehead__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(4, 4, 4, 0.9) 0%, rgba(4, 4, 4, 0.66) 48%, rgba(4, 4, 4, 0.25) 100%);
}

.z-pagehead__inner {
    position: relative;
    z-index: 2;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.z-pagehead__title {
    font-size: var(--fs-display-lg);
    max-width: 22ch;
}

.z-pagehead__title small {
    display: block;
    font-size: inherit;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.42);
}

.z-pagehead .z-lede {
    color: rgba(255, 255, 255, 0.75);
}

.z-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.z-crumbs a:hover {
    color: var(--accent);
}

/* Full-bleed banner */
.z-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(70vh, 640px);
    padding-block: clamp(3rem, 7vw, 7rem);
    background: var(--ink);
    color: var(--text-invert);
    overflow: hidden;
}

.z-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.5) brightness(0.55);
}

.z-banner .z-wrap {
    position: relative;
    z-index: 2;
}

.z-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(4, 4, 4, 0.9) 0%, rgba(4, 4, 4, 0.55) 55%, rgba(4, 4, 4, 0.2) 100%);
    z-index: 1;
}

.z-banner__body {
    max-width: 640px;
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
    justify-items: start;
}

.z-banner__points {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    width: 100%;
}

.z-banner__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
}

.z-banner__points li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 4px;
    background: var(--accent);
    flex: none;
}

/* ==========================================================================
   3. Stat bar
   ========================================================================== */
.z-statbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.z-statbar__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 860px) {
    .z-statbar__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.z-stat {
    padding: clamp(1.75rem, 3.4vw, 3rem) clamp(1rem, 2vw, 2rem);
    text-align: center;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.z-stat + .z-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--line);
}

@media (min-width: 860px) {
    .z-stat {
        border-bottom: 0;
    }
}

@media (max-width: 859px) {
    .z-stat:nth-child(odd) + .z-stat::before {
        top: 22%;
        bottom: 22%;
    }

    .z-stat:nth-child(3)::before,
    .z-stat:nth-child(5)::before {
        display: none;
    }
}

.z-stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: 300;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--text);
}

.z-stat__label {
    margin-top: 0.875rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.z-band .z-statbar,
.z-statbar--invert {
    background: transparent;
    border-bottom-color: var(--line-invert);
}

.z-statbar--invert .z-stat + .z-stat::before {
    background: var(--line-invert);
}

.z-statbar--invert .z-stat__value {
    color: var(--text-invert);
}

/* ==========================================================================
   4. Tiles (lineup / applications / cards)
   ========================================================================== */
.z-split-head {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 1000px) {
    .z-split-head {
        grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2.1fr);
        gap: clamp(2rem, 5vw, 5rem);
    }
}

/* Application cards, joined by hairlines like the product mosaic */
.z-tiles {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.z-band .z-tiles {
    background: var(--line-invert);
    border-color: var(--line-invert);
}

.z-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--text);
}

.z-band .z-tile {
    background: var(--ink);
    color: var(--text-invert);
}

.z-tile::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--ease);
}

a.z-tile:hover::after {
    transform: scaleX(1);
}

.z-tile__visual {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    max-height: 340px;
    overflow: hidden;
    background: var(--ink-2);
}

.z-tile__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

a.z-tile:hover .z-tile__visual img {
    transform: scale(1.06);
}

.z-tile__name {
    position: absolute;
    top: clamp(0.875rem, 1.6vw, 1.25rem);
    left: clamp(0.875rem, 1.6vw, 1.25rem);
    z-index: 2;
    padding: 0.4375rem 0.625rem 0.375rem;
    background: rgba(8, 8, 8, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text-invert);
}

.z-tile__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: clamp(1.25rem, 2.2vw, 1.875rem);
}

.z-tile__title {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0.008em;
    line-height: 1;
    color: inherit;
}

.z-tile__meta {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #1c8f5a;
}

.z-band .z-tile__meta {
    color: var(--accent);
}

.z-tile__desc {
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 34ch;
}

.z-band .z-tile__desc {
    color: var(--text-invert-muted);
}

.z-tile__go {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: clamp(0.875rem, 1.6vw, 1.25rem);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.35s var(--ease);
}

a.z-tile:hover .z-tile__go {
    color: #1c8f5a;
}

.z-band a.z-tile:hover .z-tile__go {
    color: var(--accent);
}

/* Numbered list rows (services) */
.z-rows {
    display: grid;
    border-top: 1px solid var(--line);
}

.z-band .z-rows {
    border-top-color: var(--line-invert);
}

.z-row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    padding: clamp(1.125rem, 2.2vw, 1.75rem) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.45s var(--ease), color 0.35s var(--ease);
}

.z-band .z-row {
    border-bottom-color: var(--line-invert);
}

.z-row:hover {
    padding-left: 1rem;
}

.z-row__num {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--text-faint);
    flex: none;
}

.z-band .z-row__num {
    color: var(--accent);
}

.z-row__title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-right: auto;
}

.z-row:hover .z-row__title {
    color: #12885a;
}

.z-band .z-row:hover .z-row__title {
    color: var(--accent);
}

.z-row__arrow {
    flex: none;
    opacity: 0.3;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.z-row:hover .z-row__arrow {
    opacity: 1;
    transform: translateX(6px);
}

/* Feature cards (flat, hairline) */
.z-cards {
    display: grid;
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.z-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    background: var(--paper);
    border: 1px solid var(--line);
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
        background 0.4s var(--ease);
}

.z-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
}

.z-card__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--accent);
    font-size: 0.9375rem;
    flex: none;
}

.z-card__title {
    font-size: var(--fs-display-sm);
    line-height: 1.1;
}

.z-card__logo {
    width: 72px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--paper);
    padding: 6px;
    flex: none;
}

.z-card__logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.z-card__badge {
    justify-self: start;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--accent-line);
    color: #12885a;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.z-band .z-card__badge {
    color: var(--accent);
}

.z-card {
    align-content: start;
}

.z-card__text {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.7;
}

.z-band .z-card {
    background: var(--ink-2);
    border-color: var(--line-invert);
}

.z-band .z-card:hover {
    border-color: var(--accent);
    background: var(--ink-3);
}

.z-band .z-card__icon {
    background: rgba(0, 255, 136, 0.1);
}

.z-band .z-card__text {
    color: var(--text-invert-muted);
}

/* ==========================================================================
   5. Split feature (image + copy)
   ========================================================================== */
.z-split {
    display: grid;
    gap: 0;
    align-items: stretch;
}

@media (min-width: 940px) {
    .z-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.z-split__media {
    position: relative;
    min-height: clamp(280px, 46vw, 620px);
    overflow: hidden;
    background: var(--ink-2);
}

.z-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.z-split__body {
    display: grid;
    gap: clamp(1.25rem, 2.2vw, 1.75rem);
    align-content: center;
    justify-items: start;
    padding: clamp(2.25rem, 5vw, 5.5rem) clamp(1.25rem, 4vw, 5rem);
}

.z-split--reverse .z-split__media {
    order: 2;
}

@media (max-width: 939px) {
    .z-split--reverse .z-split__media {
        order: 0;
    }
}

/* Caption plate over an image */
.z-plate {
    position: absolute;
    right: clamp(1.25rem, 3vw, 3rem);
    bottom: clamp(2.5rem, 5vw, 4rem);
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    max-width: 260px;
    color: var(--text-invert);
    text-align: right;
    justify-items: end;
}

.z-plate__mark {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

.z-plate__text {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 700px) {
    .z-plate {
        bottom: 5.5rem;
    }
}

/* Spec triplet inside a dark band */
.z-specs {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    width: 100%;
}

.z-spec {
    display: grid;
    gap: 0.5rem;
}

.z-spec__value {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.9vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--accent);
    line-height: 1;
}

.z-spec__label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-invert);
}

.z-spec__text {
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-invert-muted);
    line-height: 1.6;
}

/* Quote block */
.z-quote {
    border-left: 2px solid var(--accent);
    padding-left: clamp(1.25rem, 2.4vw, 2rem);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.8vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.015em;
    text-transform: none;
    color: var(--text-muted);
    max-width: 44ch;
}

.z-band .z-quote {
    color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   6. Press / logo strip
   ========================================================================== */
/* ==========================================================================
   6b. Certifications and recognitions
   ========================================================================== */
.z-certs {
    --z-cols: 3;
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .z-certs {
        grid-template-columns: repeat(var(--z-cols), minmax(0, 1fr));
    }
}

.z-cert {
    display: flex;
    flex-direction: column;
    background: var(--paper-2);
    transition: background 0.45s var(--ease);
}

a.z-cert:hover {
    background: var(--paper-3);
}

/* One frame for every mark, so logos of very different proportions read as a
   single set instead of three loose images. */
.z-cert__plate {
    display: grid;
    place-items: center;
    min-height: clamp(112px, 12vw, 136px);
    padding: clamp(1rem, 2vw, 1.5rem);
    /* Pure white, not a tint: SIRIM's mark ships with its wordmark on a baked
       white band, which would show as a lighter rectangle on any other tone. */
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.z-cert__plate img {
    max-height: clamp(48px, 5vw, 62px);
    max-width: min(100%, 150px);
    width: auto;
    object-fit: contain;
}

.z-cert__initials {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 700;
    letter-spacing: 0.014em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
}

.z-cert__body {
    flex: 1;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.z-cert__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.z-cert__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}

.z-cert__std {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    color: #1c8f5a;
    border: 1px solid var(--accent-line);
    padding: 0.375rem 0.5rem 0.3125rem;
}

.z-cert__text {
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--text-muted);
}

/* Recognitions — no mark, no standard code, so they get a strip rather than
   logo-less cards padding out the mosaic. */
.z-recog {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
    padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
    border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
    .z-recog {
        grid-template-columns: auto minmax(0, 1fr);
        gap: clamp(1.5rem, 4vw, 4rem);
        align-items: start;
    }
}

.z-recog__list {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 620px) {
    .z-recog__list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
}

.z-recog__item {
    display: grid;
    gap: 0.375rem;
    align-content: start;
}

.z-recog__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
}

.z-recog__text {
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--text-muted);
}

/* ==========================================================================
   7. Ticker
   ========================================================================== */
.z-ticker {
    background: var(--ink);
    color: var(--text-invert);
    border-block: 1px solid var(--line-invert);
    padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
    overflow: hidden;
}

.z-ticker__track {
    display: flex;
    width: max-content;
    animation: z-marquee 45s linear infinite;
}

.z-ticker:hover .z-ticker__track {
    animation-play-state: paused;
}

.z-ticker__group {
    display: flex;
    align-items: center;
    flex: none;
}

.z-ticker__item {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.z-ticker__item::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    flex: none;
}

@keyframes z-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ==========================================================================
   8. Video grid
   ========================================================================== */
.z-videos {
    display: grid;
    gap: clamp(1rem, 1.8vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Six tracks let five stories fill two rows exactly — two half-width tiles on
   top, three third-width tiles under them — so the grid never ends on a hole. */
@media (min-width: 1040px) {
    .z-videos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .z-video {
        grid-column: span 2;
    }

    .z-video--feature,
    .z-video--feature + .z-video {
        grid-column: span 3;
    }
}

.z-video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--line-invert);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.z-video:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.z-video img,
.z-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.z-video img {
    transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
    filter: brightness(0.68);
}

.z-video:hover img {
    transform: scale(1.06);
    filter: brightness(0.8);
}

.z-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(4, 4, 4, 0.92) 0%, rgba(4, 4, 4, 0.15) 55%, rgba(4, 4, 4, 0) 78%);
}

.z-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(4, 4, 4, 0.3);
    color: #fff;
    transition: background 0.4s var(--ease), color 0.4s var(--ease),
        border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.z-video:hover .z-video__play {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    transform: translate(-50%, -50%) scale(1.08);
}

.z-video__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    display: grid;
    gap: 0.375rem;
}

.z-video__tag {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.z-video__title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.25;
    color: #fff;
}

.z-video__text {
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.5;
}

/* ==========================================================================
   9. Reviews
   ========================================================================== */
.z-reviews {
    position: relative;
}

.z-reviews__viewport {
    overflow: hidden;
}

.z-reviews__track {
    display: flex;
    transition: transform 0.7s var(--ease);
}

.z-review {
    flex: 0 0 100%;
    padding-right: clamp(0.75rem, 1.4vw, 1.25rem);
}

@media (min-width: 760px) {
    .z-review {
        flex-basis: 50%;
    }
}

@media (min-width: 1200px) {
    .z-review {
        flex-basis: 33.3333%;
    }
}

.z-review__inner {
    height: 100%;
    display: grid;
    gap: 1.25rem;
    align-content: start;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    border: 1px solid var(--line-invert);
    background: var(--ink-2);
}

.z-review__stars {
    display: flex;
    gap: 4px;
    color: var(--accent);
    font-size: 0.75rem;
}

.z-review__title {
    font-size: var(--fs-display-sm);
    line-height: 1.15;
    color: var(--text-invert);
}

.z-review__text {
    font-size: var(--fs-small);
    line-height: 1.75;
    color: var(--text-invert-muted);
}

.z-review__who {
    display: grid;
    gap: 0.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-invert);
}

.z-review__name {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-invert);
}

.z-review__role {
    font-size: var(--fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6d6d68;
}

.z-slider__nav {
    display: flex;
    gap: 0.5rem;
}

.z-slider__btn {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--text);
    transition: background 0.35s var(--ease), color 0.35s var(--ease),
        border-color 0.35s var(--ease);
}

.z-band .z-slider__btn {
    border-color: var(--line-invert);
    color: var(--text-invert);
}

.z-slider__btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.z-slider__btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.z-slider__btn[disabled]:hover {
    background: none;
    color: inherit;
    border-color: var(--line-invert);
}

/* ==========================================================================
   10. Product grid + series + modal
   ========================================================================== */

/* Product line mosaic — cards joined by hairlines into a single bordered block */
.z-products {
    --z-cols: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--line-invert);
    border: 1px solid var(--line-invert);
}

@media (min-width: 680px) {
    .z-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .z-products {
        grid-template-columns: repeat(var(--z-cols), minmax(0, 1fr));
    }
}

.z-product {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--text-invert);
    isolation: isolate;
}

/* Accent rule that draws itself across the top edge on hover */
.z-product::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--ease);
}

.z-product:hover::after {
    transform: scaleX(1);
}

/* Artwork plate */
.z-product__visual {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 2;
    /* Two-column layouts make the cards wide enough that a strict 3:2 plate
       would tower over the copy — cap the height instead. */
    max-height: clamp(260px, 24vw, 400px);
    overflow: hidden;
    background:
        radial-gradient(115% 95% at 20% 82%, rgba(0, 255, 136, 0.1), transparent 60%),
        linear-gradient(165deg, var(--ink-3) 0%, var(--ink) 70%);
}

.z-product__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 34px 34px;
}

/* Vignette that dissolves the artwork's own halo into the card — without it
   the halo's circular edge cuts a visible arc across the plate. */
.z-product__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0) 32%),
        linear-gradient(to top, var(--ink) 2%, rgba(10, 10, 10, 0) 36%),
        radial-gradient(112% 105% at 50% 52%, rgba(10, 10, 10, 0) 44%, rgba(10, 10, 10, 0.42) 74%, rgba(10, 10, 10, 0.9) 100%);
}

.z-product__art {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    transform: scale(1.02);
    transition: transform 1s var(--ease);
}

.z-product:hover .z-product__art {
    transform: scale(1.08);
}

/* Cut-out products (coating bottles, PPF panels) float inside the plate
   instead of bleeding off it — they carry no backdrop of their own. */
.z-product__visual--contain {
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(90% 80% at 50% 82%, rgba(0, 255, 136, 0.11), transparent 62%),
        linear-gradient(165deg, var(--ink-3) 0%, var(--ink) 70%);
}

.z-product__visual--contain .z-product__art {
    --z-inset: clamp(1.5rem, 3vw, 2.75rem);
    width: auto;
    height: auto;
    max-width: calc(100% - var(--z-inset));
    max-height: calc(100% - var(--z-inset));
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
}

.z-product__visual--contain::after {
    background:
        linear-gradient(to top, var(--ink) 2%, rgba(10, 10, 10, 0) 30%),
        radial-gradient(105% 100% at 50% 50%, rgba(10, 10, 10, 0) 52%, rgba(10, 10, 10, 0.55) 100%);
}

.z-product__logo {
    position: absolute;
    top: clamp(1rem, 1.7vw, 1.5rem);
    right: clamp(1rem, 1.7vw, 1.5rem);
    z-index: 4;
    height: clamp(28px, 2.6vw, 40px);
    width: auto;
    max-width: 132px;
    object-fit: contain;
    object-position: right center;
    opacity: 0.82;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
    transition: opacity 0.5s var(--ease);
}

.z-product:hover .z-product__logo {
    opacity: 1;
}

/* Card body */
.z-product__content {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.3vw, 1.125rem);
    padding: clamp(1.25rem, 2vw, 1.875rem);
}

.z-product__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.z-product__name {
    font-size: clamp(1.375rem, 2.1vw, 1.875rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.008em;
}

.z-product__tag {
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--accent);
    border: 1px solid var(--accent-line);
    padding: 0.375rem 0.5rem 0.3125rem;
}

.z-product__desc {
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--text-invert-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Spec sheet — label over value, two per row, joined by continuous hairlines */
.z-product__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.z-product__spec {
    display: grid;
    gap: 0.3125rem;
    align-content: start;
    padding-block: 0.8125rem;
    border-top: 1px solid var(--line-invert);
}

.z-product__spec:nth-child(odd) {
    padding-right: clamp(0.75rem, 1.4vw, 1.25rem);
}

.z-product__spec:nth-child(even) {
    padding-left: clamp(0.75rem, 1.4vw, 1.25rem);
}

.z-product__spec dt {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-faint);
}

.z-product__spec dd {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.2;
    color: var(--text-invert);
}

/* Headline claims, for ranges that have no spec table to show */
.z-product__list {
    display: grid;
    gap: 0;
    margin-top: auto;
}

.z-product__list li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.6875rem;
    border-top: 1px solid var(--line-invert);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.3;
}

.z-product__list li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 0.4em;
    flex: none;
    background: var(--accent);
}

.z-product__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(0.875rem, 1.5vw, 1.25rem);
    border-top: 1px solid var(--line-invert);
}

.z-product__price {
    display: grid;
    gap: 0.3125rem;
}

.z-product__price b {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--accent);
}

.z-product__foot .z-btn {
    min-height: 46px;
    padding-inline: 1.125rem;
    gap: 0.875rem;
}

.z-product__foot--solo .z-btn {
    width: 100%;
    justify-content: space-between;
}

/* Series list (image + feature list) */
.z-series {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.z-serie {
    display: grid;
    gap: 0;
    border: 1px solid var(--line-invert);
}

@media (min-width: 940px) {
    .z-serie {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .z-serie:nth-child(even) .z-serie__media {
        order: 2;
    }
}

.z-serie__media {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background: var(--ink-3);
}

.z-serie__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.z-serie:hover .z-serie__media img {
    transform: scale(1.05);
}

.z-serie__body {
    display: grid;
    gap: 1.5rem;
    align-content: center;
    padding: clamp(1.75rem, 3.4vw, 3.25rem);
}

.z-serie__name {
    font-size: var(--fs-display-md);
}

.z-features {
    display: grid;
    gap: 0.75rem;
}

.z-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.z-features li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 7px;
    background: var(--accent);
    flex: none;
}

/* Modal */
.z-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.z-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.z-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 4, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.z-modal__panel {
    position: relative;
    width: min(1080px, 100%);
    max-height: min(86vh, 900px);
    overflow-y: auto;
    background: var(--ink);
    border: 1px solid var(--line-invert);
    color: var(--text-invert);
    transform: translateY(18px);
    transition: transform 0.45s var(--ease);
}

.z-modal.is-open .z-modal__panel {
    transform: none;
}

.z-modal__close {
    position: absolute;
    top: clamp(0.75rem, 1.6vw, 1.5rem);
    right: clamp(0.75rem, 1.6vw, 1.5rem);
    /* Above the sheet's artwork plate, which stacks its own layers */
    z-index: 5;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-invert);
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-invert);
    font-size: 1.125rem;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.z-modal__close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Product sheet — the modal body, cloned out of the card it belongs to */
.z-sheet {
    display: grid;
}

.z-sheet__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    background: var(--line-invert);
}

@media (min-width: 860px) {
    .z-sheet__head {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
}

/* The plate stretches to the intro column rather than holding a fixed ratio */
.z-sheet__visual {
    aspect-ratio: auto;
    max-height: none;
    min-height: clamp(210px, 32vw, 330px);
}

.z-sheet__visual .z-product__logo {
    top: auto;
    right: auto;
    bottom: clamp(1rem, 1.7vw, 1.5rem);
    left: clamp(1.5rem, 3vw, 2.5rem);
    opacity: 1;
}

.z-sheet__intro {
    display: grid;
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
    align-content: center;
    justify-items: start;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(3.75rem, 5vw, 4.5rem);
    background: var(--ink);
}

.z-sheet__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
}

.z-sheet__title {
    font-size: var(--fs-display-md);
    font-weight: 600;
    letter-spacing: 0.008em;
    line-height: 1;
}

.z-sheet__price {
    display: grid;
    gap: 0.375rem;
}

.z-sheet__price b {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--accent);
}

.z-sheet__block,
.z-sheet__foot {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-invert);
}

.z-sheet__label {
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}

/* Spec tiles — value first, label under it */
.z-sheet__stats {
    --z-cols: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-invert);
    border: 1px solid var(--line-invert);
}

/* An odd number of tiles would otherwise leave the last cell empty */
@media (max-width: 699px) {
    .z-sheet__stat:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (min-width: 700px) {
    .z-sheet__stats {
        grid-template-columns: repeat(var(--z-cols), minmax(0, 1fr));
    }
}

.z-sheet__stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    background: var(--ink);
}

.z-sheet__stat dd {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--text-invert);
}

.z-sheet__stat dt {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-faint);
}

@media (min-width: 700px) {
    /* Columns, not grid cells — the list should read down one side then the
       other rather than zig-zagging across. */
    .z-features--split {
        display: block;
        columns: 2;
        column-gap: clamp(1.5rem, 3vw, 3rem);
    }

    .z-features--split li {
        break-inside: avoid;
    }

    .z-features--split li + li {
        margin-top: 0.75rem;
    }
}

/* Jump to another series without leaving the modal */
.z-sheet__switch {
    display: grid;
    gap: 0.875rem;
    align-items: center;
    padding: clamp(1rem, 2vw, 1.375rem) clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-invert);
    background: var(--ink-2);
}

@media (min-width: 560px) {
    .z-sheet__switch {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: clamp(1rem, 2vw, 1.75rem);
    }
}

/* PDF viewer block */
.z-pdf {
    border: 1px solid var(--line-invert);
}

.z-pdf__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.25rem, 2.4vw, 2rem);
    border-bottom: 1px solid var(--line-invert);
}

.z-pdf__frame {
    width: 100%;
    height: clamp(420px, 60vw, 760px);
    border: 0;
    background: var(--ink-3);
}

.z-band .z-pdf {
    border-color: var(--line-invert);
}

.z-pdf--light,
.z-pdf--light .z-pdf__bar {
    border-color: var(--line);
}

/* ==========================================================================
   11. Inquiry form
   ========================================================================== */
.z-inquiry {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 1000px) {
    .z-inquiry {
        grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr);
        gap: clamp(2rem, 6vw, 6rem);
    }
}

.z-form {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

.z-form__row {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

@media (min-width: 640px) {
    .z-form__row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.z-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.z-form__note {
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.z-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: z-spin 0.8s linear infinite;
}

@keyframes z-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Toast */
.z-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 320;
    transform: translate(-50%, 20px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--ink);
    border: 1px solid var(--line-invert);
    color: var(--text-invert);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
    max-width: calc(100vw - 2rem);
}

.z-toast.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.z-toast__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.75rem;
    flex: none;
}

.z-toast.is-error .z-toast__icon {
    background: #ff4d4d;
    color: #fff;
}

.z-toast__title {
    display: block;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.z-toast__text {
    display: block;
    font-size: var(--fs-small);
    color: var(--text-invert-muted);
}

/* Warranty status badge and claim prompt */
.z-badge {
    padding: 0.375rem 0.75rem;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.z-badge.is-expired {
    background: #ff4d4d;
    color: #fff;
}

.z-panel__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: clamp(1.25rem, 2.4vw, 1.75rem);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
}

.z-datagrid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    background: var(--line-invert);
    border: 1px solid var(--line-invert);
}

.z-datagrid > div {
    display: grid;
    gap: 0.375rem;
    padding: clamp(0.875rem, 1.6vw, 1.25rem);
    background: var(--ink);
}

.z-datagrid dt {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6d6d68;
}

.z-datagrid dd {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-invert);
    word-break: break-word;
}

.z-notice {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--accent);
    background: var(--accent-soft);
    font-size: var(--fs-small);
    color: var(--text-invert);
}

.z-notice--error {
    border-left-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
    color: #ffb3b3;
}

.z-notice[hidden],
[hidden] {
    display: none !important;
}

/* ==========================================================================
   11b. Warranty verification stage
   ========================================================================== */
/* A dark stage with the hero's depth rather than a flat band */
.z-verify {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.z-verify::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 90% at 12% 8%, rgba(0, 255, 136, 0.09), transparent 58%),
        radial-gradient(60% 80% at 92% 100%, rgba(0, 255, 136, 0.05), transparent 62%),
        linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
}

.z-verify::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.z-verify > .z-wrap {
    position: relative;
    z-index: 1;
}

.z-verify__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 1000px) {
    .z-verify__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 5.5rem);
    }
}

.z-verify__intro {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2rem);
    justify-items: start;
}

/* Verification panel */
.z-verify__panel {
    border: 1px solid var(--line-invert);
    background: rgba(8, 8, 8, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.z-verify__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
}

.z-verify__title {
    font-size: var(--fs-display-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.z-verify__row {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: end;
}

@media (min-width: 620px) {
    .z-verify__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.z-verify__steps {
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* Result and claim blocks, revealed by the lookup script */
.z-verify__result {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-invert);
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
}

.z-verify__status {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* ==========================================================================
   12. FAQ / accordion
   ========================================================================== */
.z-faq {
    display: grid;
    border-top: 1px solid var(--line);
}

.z-band .z-faq {
    border-top-color: var(--line-invert);
}

.z-faq__item {
    border-bottom: 1px solid var(--line);
}

.z-band .z-faq__item {
    border-bottom-color: var(--line-invert);
}

.z-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: clamp(1.125rem, 2vw, 1.625rem) 0;
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.01em;
    transition: color 0.3s var(--ease);
}

.z-faq__q:hover {
    color: #12885a;
}

.z-band .z-faq__q:hover {
    color: var(--accent);
}

.z-faq__sign {
    flex: none;
    position: relative;
    width: 14px;
    height: 14px;
}

.z-faq__sign::before,
.z-faq__sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--accent);
    transition: transform 0.35s var(--ease);
}

.z-faq__sign::after {
    transform: rotate(90deg);
}

.z-faq__item.is-open .z-faq__sign::after {
    transform: rotate(0deg);
}

.z-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease);
}

.z-faq__item.is-open .z-faq__a {
    grid-template-rows: 1fr;
}

.z-faq__a > div {
    overflow: hidden;
}

.z-faq__a p {
    font-size: var(--fs-small);
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 68ch;
    padding-bottom: clamp(1.125rem, 2vw, 1.625rem);
}

.z-band .z-faq__a p {
    color: var(--text-invert-muted);
}

/* ==========================================================================
   13. Blog / archive / single
   ========================================================================== */
.z-posts {
    display: grid;
    gap: clamp(1.5rem, 2.6vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.z-post {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.z-post__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-3);
}

.z-post__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.z-post:hover .z-post__media img {
    transform: scale(1.05);
}

.z-post__cat {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 0.4375rem 0.75rem;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.z-post__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.z-post__meta span:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--line-strong);
    margin-left: 0.75rem;
    vertical-align: middle;
}

.z-post__title {
    font-size: var(--fs-display-sm);
    line-height: 1.14;
}

.z-post__title a:hover {
    color: #12885a;
}

.z-post__excerpt {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.75;
}

.z-band .z-post__excerpt {
    color: var(--text-invert-muted);
}

/* Prose (post content, legal pages) */
.z-prose {
    max-width: 74ch;
    font-size: var(--fs-body-lg);
    line-height: 1.85;
    color: #333330;
}

.z-prose > * + * {
    margin-top: 1.25rem;
}

.z-prose h1,
.z-prose h2,
.z-prose h3,
.z-prose h4 {
    margin-top: 2.75rem;
    line-height: 1.12;
}

.z-prose h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
}

.z-prose h3 {
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
}

.z-prose h4 {
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.z-prose a {
    color: #12885a;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.z-prose ul,
.z-prose ol {
    padding-left: 1.25rem;
    display: grid;
    gap: 0.625rem;
}

.z-prose ul li {
    list-style: none;
    position: relative;
}

.z-prose ul li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.75rem;
    width: 7px;
    height: 7px;
    background: var(--accent);
}

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

.z-prose ol li::marker {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8em;
}

.z-prose blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 1.5rem;
    font-style: normal;
    color: var(--text-muted);
}

.z-prose img {
    width: 100%;
}

.z-prose strong {
    color: var(--text);
    font-weight: 700;
}

.z-prose table {
    font-size: var(--fs-small);
}

.z-prose th,
.z-prose td {
    border: 1px solid var(--line);
    padding: 0.75rem 1rem;
    text-align: left;
}

.z-prose th {
    background: var(--paper-2);
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Pagination */
.z-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.z-pager .page-numbers {
    min-width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.z-pager .page-numbers:hover,
.z-pager .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-invert);
}

.z-pager .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* ==========================================================================
   14. Locations
   ========================================================================== */
.z-loc-layout {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

@media (min-width: 1040px) {
    .z-loc-layout {
        grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
    }
}

.z-loc-panel {
    border: 1px solid var(--line);
    background: var(--paper);
}

.z-loc-panel__head {
    padding: clamp(1.125rem, 2vw, 1.75rem);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 1rem;
}

.z-loc-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--line);
    padding: 0 0.875rem;
}

.z-loc-search i {
    color: var(--text-faint);
    font-size: 0.8125rem;
}

.z-loc-search input {
    flex: 1;
    border: 0;
    background: none;
    padding: 0.8125rem 0;
    font-size: var(--fs-small);
    font-weight: 500;
}

.z-loc-search input:focus {
    outline: none;
}

.z-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.z-chip {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--line);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.z-chip:hover {
    border-color: var(--ink);
    color: var(--text);
}

.z-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-invert);
}

/* Chips on a dark surface (the product sheet's range switcher) */
.z-chip--invert {
    border-color: var(--line-invert);
    color: var(--text-invert-muted);
}

.z-chip--invert:hover {
    border-color: var(--accent-line);
    color: var(--accent);
}

.z-chip--invert.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.z-chip[disabled] {
    cursor: default;
}

.z-loc-list {
    max-height: 620px;
    overflow-y: auto;
}

.z-loc-item {
    width: 100%;
    display: grid;
    gap: 0.5rem;
    padding: clamp(1rem, 1.8vw, 1.375rem);
    border-bottom: 1px solid var(--line);
    text-align: left;
    transition: background 0.3s var(--ease);
}

.z-loc-item:hover,
.z-loc-item.is-active {
    background: var(--paper-2);
}

.z-loc-item.is-active {
    box-shadow: inset 3px 0 0 var(--accent);
}

.z-loc-item__name {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.z-loc-item__addr {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.6;
}

.z-loc-item__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.z-loc-map {
    min-height: clamp(380px, 58vw, 700px);
    border: 1px solid var(--line);
    background: var(--paper-2);
}

.z-loc-map .leaflet-container {
    height: 100%;
    width: 100%;
    font-family: var(--font-text);
    background: var(--paper-2);
}

.z-marker {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    border: 2px solid #fff;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
    font-size: 0.75rem;
}

.leaflet-popup-content-wrapper {
    border-radius: 0;
    box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-content {
    margin: 0.875rem 1rem;
    font-family: var(--font-text);
    font-size: var(--fs-small);
}

.leaflet-popup-content strong {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */
.z-footer {
    background: var(--ink);
    color: var(--text-invert);
    padding-top: clamp(2.75rem, 5.5vw, 5rem);
}

.z-footer__grid {
    display: grid;
    gap: clamp(2rem, 3.6vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

@media (min-width: 1000px) {
    .z-footer__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.6fr);
        gap: clamp(2rem, 5vw, 5rem);
    }
}

.z-footer__links {
    --z-cols: 3;
    display: grid;
    gap: clamp(1.75rem, 3vw, 2.5rem);
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
    .z-footer__links {
        grid-template-columns: repeat(var(--z-cols), minmax(0, 1fr));
    }
}

.z-footer__brand {
    display: grid;
    gap: clamp(1.25rem, 2vw, 1.75rem);
    /* Without this the auto rows stretch to match the taller links column and
       the logo, blurb and socials drift apart. */
    align-content: start;
    justify-items: start;
    max-width: 42ch;
}

.z-footer__follow {
    display: grid;
    gap: 0.875rem;
    margin-top: 0.25rem;
}

.z-footer__follow h4 {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    font-family: var(--font-text);
}

.z-footer__brand img,
.z-footer__brand .custom-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.z-footer__text {
    font-size: var(--fs-small);
    line-height: 1.8;
    color: var(--text-invert-muted);
}

.z-footer__col h4 {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--accent);
    margin-bottom: 1.375rem;
    font-family: var(--font-text);
}

.z-footer__col ul {
    display: grid;
    gap: 0.75rem;
}

.z-footer__col a,
.z-footer__col li {
    font-size: var(--fs-small);
    color: var(--text-invert-muted);
    transition: color 0.3s var(--ease);
    line-height: 1.6;
}

.z-footer__col a:hover {
    color: var(--accent);
}

.z-social {
    display: flex;
    gap: 0.5rem;
}

.z-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-invert);
    color: var(--text-invert);
    font-size: 0.875rem;
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
        border-color 0.3s var(--ease);
}

.z-social a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* Contact details — a hairline row across the full width, so they are no
   longer a fifth link column stranded under Products. */
.z-fcontact {
    --z-cols: 4;
    display: grid;
    gap: 1px;
    background: var(--line-invert);
    border-top: 1px solid var(--line-invert);
    border-bottom: 1px solid var(--line-invert);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
    .z-fcontact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .z-fcontact {
        grid-template-columns: repeat(var(--z-cols), minmax(0, 1fr));
    }
}

.z-fcontact__item {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: clamp(1.125rem, 2vw, 1.625rem) 0;
    background: var(--ink);
}

@media (min-width: 620px) {
    .z-fcontact__item {
        padding-inline: clamp(1rem, 2vw, 1.75rem);
    }

    .z-fcontact__item:first-child {
        padding-left: 0;
    }

    .z-fcontact__item:last-child {
        padding-right: 0;
    }
}

.z-fcontact__item dt {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-faint);
}

.z-fcontact__item dd {
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--text-invert);
}

.z-fcontact__item a {
    transition: color 0.3s var(--ease);
}

.z-fcontact__item a:hover {
    color: var(--accent);
}

.z-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(1.25rem, 2.4vw, 1.75rem) 2rem;
    /* The floating WhatsApp button is 54px wide, offset up to 28px from the
       edge; reserve that plus breathing room, less whatever the gutter already
       covers. */
    padding-right: max(0px, 98px - var(--gutter));
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6d6d68;
}

.z-footer__bar a:hover {
    color: var(--accent);
}

.z-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* ==========================================================================
   16. Floating WhatsApp
   ========================================================================== */
.z-wa {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 110;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--accent);
    border: 1px solid var(--line-invert);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
        background 0.3s var(--ease), color 0.3s var(--ease);
}

.z-wa.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.z-wa:hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.z-wa svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   17. Mobile entry overlay
   ========================================================================== */
/* The zig-zag: six accent plates, each cut by a dark skewed wedge that
   alternates sides down the sheet. Everything a row says — number, mark,
   title — rides the plate; the wedge is a slash of ground, not a column.

   What makes it read as considered rather than as six highlighter strokes is
   restraint inside the shape: a deeper, graded green instead of a flat neon
   fill, a fine diagonal weave over it, one hairline of accent along the cut,
   and marks drawn as strokes rather than as solid blobs. */
.z-entry {
    /* The green everything on this sheet is built from, sampled off the logo
       itself rather than taken from the site's accent token: the mark is the one
       thing on the sheet that cannot be recoloured, so it sets the hue. */
    --z-green: #2bc93f;
    --z-green-lit: #55ea66;
    --z-green-deep: #16912a;
    --z-green-rgb: 43, 201, 63;
    position: fixed;
    inset: 0;
    z-index: 260;
    /* The supplied photograph, anchored to the bottom so the car stays in frame
       whatever the screen's height, over ink so the sheet is never bare while it
       loads. It is the only image on the sheet — 21KB of WebP. */
    background-color: var(--ink);
    background-image: url("../../images/entry-bg.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: var(--text-invert);
    display: grid;
    /* minmax(0,…) lets the list row shrink so all six fit between the header
       and the footer instead of scrolling. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    overscroll-behavior: contain;
}

.z-entry[hidden] {
    display: none;
}

/* A faint accent wash so the sheet does not read as flat black */
.z-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* A scrim over the photograph. The picture is dark already, but the rows and
       the masthead have to sit on something even quieter than it: this dims the
       whole frame a little, dims the top and bottom more, and keeps the vignette
       that makes the rows read as floating above the sheet. */
    background:
        linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.72) 0%,
            rgba(10, 10, 10, 0.42) 34%,
            rgba(10, 10, 10, 0.52) 72%,
            rgba(10, 10, 10, 0.78) 100%
        ),
        radial-gradient(125% 85% at 50% 46%, transparent 50%, rgba(0, 0, 0, 0.55));
}

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

/* No band of its own: no rule, no wash, no glow. The brand stands on the same
   ground the rows stand on, with air above and below it instead of a border to
   separate it from them. */
.z-entry__top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.875rem, 3.4vw, 1.5rem);
    padding: clamp(1.5rem, 6.5vw, 2.75rem) var(--gutter);
    /* The brand holds the top third of the sheet on its own. dvh first, so a
       phone's collapsing address bar does not resize it mid-scroll; vh is the
       fallback for browsers that do not know the dynamic units. */
    min-height: 30vh;
    min-height: 30dvh;
}

.z-entry__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* The head of the sheet is a masthead, not a graphic: the mark, a ruled line
   with the sheet's own rake struck through it, and one line of copy. It stands
   on the same black the gaps between the rows are made of. */
.z-entry__rule {
    position: relative;
    width: min(74%, 320px);
    height: 1px;
    /* The line fades out at both ends and breaks in the middle, so the mark
       struck through it has air rather than sitting on a wire. */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 26%,
        rgba(255, 255, 255, 0.22) 42%,
        transparent 42%,
        transparent 58%,
        rgba(255, 255, 255, 0.22) 58%,
        rgba(255, 255, 255, 0.22) 74%,
        transparent 100%
    );
}

/* The break is filled by a small raked lozenge — the rows' own 19 degrees,
   shrunk to a mark, and the only accent in the masthead. */
.z-entry__rule::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    background: var(--z-green);
    transform: translate(-50%, -50%) skewX(-19deg);
}

.z-entry__caption {
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    /* The tracking is on the right of every letter, the last one included, so
       the line reads a half-space off centre without this. */
    text-indent: 0.34em;
    color: var(--text-invert-muted);
}

/* The link is supplied by the_custom_logo(), or by the fallback markup */
.z-entry__logo a,
.z-entry__logo .custom-logo-link {
    display: flex;
    align-items: center;
    min-width: 0;
}

.z-entry__logo {
    transition: opacity 0.3s var(--ease);
}

.z-entry__logo:hover {
    opacity: 0.75;
}

.z-entry__logo img,
.z-entry__logo .custom-logo {
    height: clamp(54px, 18vw, 84px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    /* Same treatment the footer and the transparent nav give the mark, so a
       dark customer logo still reads on the dark sheet. */
    /* filter: brightness(0) invert(1); */
}

/* Hairline mosaic, same idiom as the product and certification grids */
.z-entry__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));
    /* The rows sit apart on the sheet's own ground — wash and vignette showing
       through the gaps — rather than on a black slab, so the gaps read as depth
       instead of as voids. */
    gap: 9px;
    padding-bottom: 9px;
    min-height: 0;
}

/* The six tracks still divide the height evenly, but a row no longer fills its
   track: it takes the height its content needs and centres in what is left, so
   the ground between the plates opens up. min() with 100% is the guard — on a
   short screen the row can never claim more than its track. */
.z-entry__card {
    align-self: center;
    height: min(100%, clamp(46px, 10.5vh, 88px));
    /* A hairline of ground down the leading edge, so the plate reads as laid on
       the sheet rather than bled off it. The even rows already start far inside,
       and their own dark block runs to the row's edge, so this is the odd rows'
       alone. */
    margin-inline-start: 25px;
}

.z-entry__card:nth-child(even) {
    margin-inline-start: 0;
}

/* Zig-zag rows. Everything the row says — number, mark, title — lives on the
   accent plate; the dark wedge opposite it is empty, a slash of ground rather
   than a column of content.

   Flex, not grid: the group has to pack against one edge or the other while the
   title still gives up width and wraps. In grid that fight is unwinnable — the
   title's own max-content claims the very slack the alignment needs, so wide
   rows never shifted. The wedge is a pseudo-element, not a column, so its side
   of the row is reserved with padding instead of a track. */
.z-entry__card {
    /* The split, dark to accent. The plate stops a little short of three
       quarters, which is what keeps the two kinds of row the same length: an
       odd row starts at the sheet's edge, an even one starts a third of the way
       in and runs further right. */
    --z-wedge: 26%;
    /* Odd rows start flush at the edge; even rows override this. */
    --z-gap: 0%;
    /* Half the row's height times tan(19deg): how far the plate's trailing edge
       leans across between its top and its bottom, which is the sheet's angle. */
    --z-tilt: calc(0.172 * clamp(46px, 10.5vh, 88px));
    /* The corner taken off the leading bottom edge, and the square step bitten
       out of the leading top one. */
    --z-chamfer: clamp(10px, 2.4vh, 18px);
    --z-step: clamp(7px, 1.7vh, 12px);
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.375rem, 1.8vw, 0.875rem);
    padding: 0.625rem var(--gutter);
    padding-inline-end: calc(var(--z-wedge) + var(--gutter));
    min-height: 0;
    /* Nothing is clipped here any more — the plate's bloom has to reach past the
       row's box, which is the whole point of it. The wedge is held to the row's
       own height instead, so it has nothing to overhang vertically. */
    /* Graded rather than flat, and pulled back from the raw #00ff88: the token
       green at full strength across a whole plate is a highlighter, while a
       lit top edge falling to a deeper emerald reads as a surface catching
       light. The weave over it is the fine diagonal texture a printed panel
       has — invisible as a pattern, felt as depth.

       The two layers are a background-image pair, so the plate keeps one
       declaration and the engaged state can swap the gradient alone. */
    /* The plate is Ravo green first: the token colour pools at the lit end,
       where the number and the mark sit, and the grade darkens away from it into
       a deep green at the cut. One warm lift across the top keeps it from
       reading as a single flat hue; the aqua and teal that were here before
       turned the far end muddy, so they are gone. Everything is raked at the
       row's own angle. */
    
    /* A row rarely lands on a whole pixel — its height comes from a viewport
       unit divided six ways — so the dark blocks, which are clipped to the row's
       box, stop a fraction of a pixel short of it and the plate underneath shows
       through that sliver as a green hairline along the row's top and bottom,
       dark blocks included. The plate is therefore held one pixel in from each
       end, with ink behind it: the sliver still shows, but what it now shows is
       the same black the sheet is made of. */

    /* The row throws nothing of its own: the light belongs to the plate inside
       it, which is the shape that is actually lit. */
    transition: height 0.35s var(--ease), opacity 0.35s var(--ease);
}

.z-entry__card > .z-entry__num,
.z-entry__card > .z-entry__icon {
    flex: none;
}

/* The title is the only part that gives: it shrinks and wraps so the number and
   the mark keep their size and the group stays packed against its edge. */
.z-entry__card > .z-entry__body {
    flex: 0 1 auto;
    min-width: 0;
}

/* Every row is cut the same way — the point is always on the right. What
   alternates is where the plate starts: an even row begins a fifth of the way
   in, and the dark to the left of it is simply the sheet showing through. */
.z-entry__card:nth-child(even) {
    --z-gap: 22%;
    /* The dark is split over two sides on these rows, so the run on the right is
       shorter than an odd row's — otherwise the plate between them has no width
       left for a long title. */
    --z-wedge: 13%;
    padding-inline-start: calc(var(--z-gap) + var(--gutter));
}

/* ---- The plate ----------------------------------------------------------- *
   The green is a shape, not a fill: a panel raked at the row's angle, with a
   chamfer taken off its leading corner, and the bloom cast from its own
   silhouette by a drop-shadow filter rather than from the row's rectangle. That
   is the difference between light coming off the green and a green rectangle
   with a halo drawn round it. */
.z-entry__plate {
    position: absolute;
    inset: 0;
    /* Above the dark, not below it. The two shapes can never be guaranteed to
       agree at every row height — one is a clip in percentages, the other a
       skew in degrees — so the dark is pushed under the plate and the plate's
       own cut is the only edge anyone sees. */
    z-index: 1;
    /* The silhouette, clockwise from the leading top corner: a square step bitten
       out of that corner, the top edge, the raked trailing cut, the bottom edge,
       and a chamfer off the leading bottom corner. Neither end is symmetrical
       with the other, which is what stops the shape reading as a slab. */
    clip-path: polygon(
        calc(var(--z-gap) + var(--z-step)) 0,
        calc(100% - var(--z-wedge) + var(--z-tilt)) 0,
        calc(100% - var(--z-wedge) - var(--z-tilt)) 100%,
        calc(var(--z-gap) + var(--z-chamfer)) 100%,
        var(--z-gap) calc(100% - var(--z-chamfer)),
        var(--z-gap) var(--z-step),
        calc(var(--z-gap) + var(--z-step)) var(--z-step)
    );
    /* Two stops: a tight bloom hugging the silhouette and a wide, faint wash on
       the ground behind it. A single blur reads as a border; a pair reads as
       light. Because it is a filter, it follows the clipped shape. */
    filter:
        drop-shadow(0 0 14px rgba(var(--z-green-rgb), 0.55))
        drop-shadow(0 0 38px rgba(var(--z-green-rgb), 0.32));
    transition: filter 0.4s var(--ease), transform 0.45s var(--ease);
    background-image:
        /* The rim: a bright hairline along the top edge and a deep green foot
           along the bottom, so the silhouette keeps a crisp edge. Both are tints
           of the plate's own colour, not white and black. */
        linear-gradient(180deg, rgba(214, 255, 220, 0.85) 0 1px, transparent 1px),
        linear-gradient(0deg, rgba(12, 82, 24, 0.55) 0 1px, transparent 1px),
        /* the green pooling at the lit end, where the number and the mark sit */
        radial-gradient(95% 165% at 0% 120%, rgba(70, 226, 90, 0.9), transparent 66%),
        radial-gradient(70% 130% at 22% -30%, rgba(170, 255, 190, 0.24), transparent 62%),
        /* The grade, built out from the logo's own green: a lighter tint of it at
           the lit end, the colour itself across the middle, a deeper shade of it
           at the cut. Opaque throughout, with no black mixed into the fill. */
        linear-gradient(
            104deg,
            var(--z-green-lit) 0%,
            #35d74c 34%,
            var(--z-green) 68%,
            var(--z-green-deep) 100%
        );
}

/* The sheen. A band of light that crosses the badge once when the row is
   engaged and then is gone. It lives inside the plate, so the plate's own
   clip-path keeps it to the silhouette — it never runs out over the black. */
.z-entry__plate::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 34%;
    background: linear-gradient(
        104deg,
        transparent,
        rgba(255, 255, 255, 0.32) 46%,
        rgba(255, 255, 255, 0.06) 64%,
        transparent
    );
    transform: translateX(-190%) skewX(-19deg);
    opacity: 0;
    pointer-events: none;
}

@keyframes z-entry-sheen {
    0% {
        transform: translateX(-190%) skewX(-19deg);
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    100% {
        transform: translateX(330%) skewX(-19deg);
        opacity: 0;
    }
}

.z-entry__card:is(:active, :focus-visible) .z-entry__plate::after {
    animation: z-entry-sheen 0.85s var(--ease);
}

/* Engaged: the panel turns into the light and the bloom roughly doubles. */
.z-entry__card:is(:active, :focus-visible) .z-entry__plate {
    filter:
        drop-shadow(0 0 20px rgba(var(--z-green-rgb), 0.9))
        drop-shadow(0 0 60px rgba(var(--z-green-rgb), 0.55));
    background-image:
        linear-gradient(180deg, rgba(230, 255, 234, 0.95) 0 1px, transparent 1px),
        linear-gradient(0deg, rgba(12, 82, 24, 0.45) 0 1px, transparent 1px),
        radial-gradient(95% 165% at 0% 120%, rgba(110, 245, 128, 1), transparent 66%),
        radial-gradient(70% 130% at 22% -30%, rgba(200, 255, 212, 0.34), transparent 62%),
        linear-gradient(
            104deg,
            #7dfa8b 0%,
            #46e85c 34%,
            #35da4a 68%,
            #1fa835 100%
        );
}

@media (hover: hover) {
    .z-entry__card:hover .z-entry__plate::after {
        animation: z-entry-sheen 0.85s var(--ease);
    }

    .z-entry__card:hover .z-entry__plate {
        filter:
            drop-shadow(0 0 20px rgba(var(--z-green-rgb), 0.9))
            drop-shadow(0 0 60px rgba(var(--z-green-rgb), 0.55));
        background-image:
            linear-gradient(180deg, rgba(230, 255, 234, 0.95) 0 1px, transparent 1px),
            linear-gradient(0deg, rgba(12, 82, 24, 0.45) 0 1px, transparent 1px),
            radial-gradient(95% 165% at 0% 120%, rgba(110, 245, 128, 1), transparent 66%),
            radial-gradient(70% 130% at 22% -30%, rgba(200, 255, 212, 0.34), transparent 62%),
            linear-gradient(
                104deg,
                #7dfa8b 0%,
                #46e85c 34%,
                #35da4a 68%,
                #1fa835 100%
            );
    }
}

/* ---- The blade ----------------------------------------------------------- *
   One slim parallelogram standing just past the plate's cut, raked with it and
   lit like it. A row is a plate plus a blade, which is a badge; a row that is
   only a plate is a slab. It is skewed rather than clipped, so its edges are
   parallel to the cut by construction rather than by arithmetic. */
.z-entry__blade {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--z-wedge) + var(--z-tilt) + 9px);
    width: clamp(7px, 1.6vw, 13px);
    background: linear-gradient(180deg, #6bf57c 0%, #35d24a 46%, #17922b 100%);
    transform: skewX(-19deg);
    filter: drop-shadow(0 0 12px rgba(var(--z-green-rgb), 0.65));
    transition: filter 0.4s var(--ease), transform 0.45s var(--ease);
}

/* Engaged, it leans a little further out and burns brighter — the only part of
   the row that moves. */
.z-entry__card:is(:active, :focus-visible) .z-entry__blade {
    transform: skewX(-19deg) translateX(5px);
    filter: drop-shadow(0 0 18px rgba(var(--z-green-rgb), 1));
}

@media (hover: hover) {
    .z-entry__card:hover .z-entry__blade {
        transform: skewX(-19deg) translateX(5px);
        filter: drop-shadow(0 0 18px rgba(var(--z-green-rgb), 1));
    }
}

/* The row is accent, and the wedge opposite the title is the dark one. Its
   slanted inner edge is what splits the row — a "/" rather than a "|". It
   overhangs the card on the outer side because the skew drags its top and
   bottom corners sideways and would otherwise peel the fill off the card edge;
   overflow: clip trims the excess. The wedge carries no mark, only ground. */
/* Nothing is painted beside the plate any more: the dark on a row is the sheet
   itself, so the only thing on the row with a colour is the green.

   This element survives for one job, the sweep a row plays when it is tapped —
   ink crossing the plate at the sheet's angle. It is invisible until then. */
.z-entry__card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--z-wedge) - 16px);
    right: -30%;
    z-index: 2;
    background: var(--ink);
    opacity: 0;
    transform: skewX(-19deg);
}

/* A hairline chevron in the empty run of plate between the title and the cut,
   pointing the way the row goes. It is absolutely positioned, so it costs the
   flex row no layout — the padding that reserves the wedge already holds the
   space — and it is what gives a row somewhere to move on a tap. */
.z-entry__go {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(var(--z-wedge) + 0.4rem);
    width: 7px;
    height: 7px;
    border-top: 1.4px solid rgba(10, 10, 10, 0.42);
    border-right: 1.4px solid rgba(10, 10, 10, 0.42);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* An absolutely positioned pseudo-element paints above in-flow content, so the
   row's own content has to be lifted clear of the wedge. */
.z-entry__card > .z-entry__body,
.z-entry__card > .z-entry__icon,
.z-entry__card > .z-entry__num {
    position: relative;
    z-index: 2;
}

/* The mark sits straight on the plate — no chip, no case, no glow around it.
   Drawn in ink at the title's own weight, it reads as part of the row's
   lettering rather than as a widget dropped onto it. The vh term is what keeps
   it inside its row, since the six rows share the sheet's height. */
.z-entry__icon {
    display: grid;
    place-items: center;
    width: clamp(22px, min(8.4vw, 4.4vh), 38px);
    height: clamp(22px, min(8.4vw, 4.4vh), 38px);
    color: var(--on-accent);
    transition: transform 0.45s var(--ease), color 0.35s var(--ease),
        filter 0.45s var(--ease);
}

.z-entry__icon svg {
    width: 100%;
    height: 100%;
    /* The one lit pixel the titles get, so the strokes sit on the plate the same
       way the letters do rather than looking printed on it. */
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3));
    transition: filter 0.45s var(--ease);
}

.z-entry__num {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
    /* On the accent plate the number reads dark, like the title. */
    color: rgba(10, 10, 10, 0.46);
    transition: color 0.4s var(--ease);
}

/* A hairline tick runs from the number to the chip beside it. */
.z-entry__num::after {
    content: "";
    width: 9px;
    height: 1px;
    flex: none;
    background: currentColor;
    opacity: 0.55;
    transition: width 0.4s var(--ease);
}

/* The tick sits after the digits on every row, since the chip is always to the
   right of the number now. */

.z-entry__body {
    display: grid;
    gap: 0.125rem;
    justify-items: start;
    min-width: 0;
    /* The grid gap spaces number-to-chip; the title wants more room than that,
       so it carries its own leading margin on top of it. */
    margin-inline-start: clamp(0.375rem, 1.6vw, 0.75rem);
}

.z-entry__label {
    font-family: var(--font-display);
    /* Sized off the viewport so the longest title, CERTIFICATIONS & AWARDS,
       still holds one line in the 70% the wedge leaves it. */
    font-size: clamp(0.8125rem, 3.2vw, 1.0625rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.14;
    text-wrap: balance;
    /* min-content is the width of the longest word, which after wrapping is the
       width of the longest line — so the box hugs the text instead of keeping
       the leftover width flex handed it. Without this a wrapping title held 31px
       of slack on its right and stopped short of the gutter while its one-line
       neighbours sat flush against it. */
    width: min-content;
    max-width: 100%;
    color: var(--on-accent);
    /* One lit pixel under the letters, the same trick the plate's top edge
       uses — it keeps dense caps from looking printed on. */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: color 0.35s var(--ease);
}

/* A script that breaks between characters has a min-content of one character,
   which would stand the title on end — 服務據點 set as four stacked glyphs. Those
   languages keep the normal width.

   The country class is here as well as :lang(), because the document language is
   set by a filter and a caching layer or a stale page could still serve the old
   attribute; the body class comes from the same country lookup and cannot drift
   from it. */
:lang(zh) .z-entry__label,
:lang(ja) .z-entry__label,
:lang(ko) .z-entry__label,
.z-country-tw .z-entry__label {
    width: auto;
    text-wrap: initial;
}

/* The partner lockup stands in for the label on its row. It is painted, not
   drawn: the flat silhouette is a mask over currentColor, which is the only way
   a supplied mark can follow the row's own colour. Sized off whichever viewport
   axis is tighter, because the rows share the sheet height and a width-only
   clamp overflows short screens. */
/* The partner lockup stands in for the title on its row. It is a real image
   blacked out with a filter rather than a silhouette painted through a CSS
   mask: a mask whose url() comes from a custom property is unreliable in iOS
   Safari, which is what made this one mark vanish on iPhones while the rest of
   the row drew normally. brightness(0) flattens the supplied artwork to solid
   ink, which is the colour it needs on the plate anyway. */
.z-entry__lockup {
    display: block;
    height: clamp(13px, min(3.8vw, 2vh), 20px);
    width: auto;
    max-width: 90%;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0);
    transition: transform 0.45s var(--ease), filter 0.35s var(--ease);
}

/* The description costs no space until the row is engaged — neither height nor
   width. Width matters as much as height here: a collapsed description still
   reserves its full single-line measure, which made the body box wider than the
   title and left the right-packed rows with a gap between the chip and a
   right-aligned title. At width 0 the box hugs the title, so the chip sits the
   same distance away on every row.

   max-height rather than the 0fr -> 1fr grid trick: the inner overflow:hidden
   zeroes the track's automatic minimum, so 1fr resolves against no free space
   and the row never grows. */
/* The description is held closed. A row is about 60px tall once the masthead
   has taken its share, which leaves roughly 40px of content: a title that wraps
   to two lines already fills that, so anything opening underneath it lands off
   the plate, where dark text on black is simply gone. The copy stays in the
   markup for a taller sheet to use. */
.z-entry__reveal {
    display: block;
    max-width: 100%;
    width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease),
        transform 0.35s var(--ease);
}

.z-entry__text {
    display: block;
    /* One line, ellipsised. A second line is what pushed the copy off the bottom
       of the plate on hover, and dark text on black is simply gone. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    line-height: 1.45;
    padding-top: 0.25rem;
    color: rgba(10, 10, 10, 0.72);
}

/* ---- Engaged: a press, or a keyboard focus. ------------------------------ *
   :focus-within is deliberately absent. A tap leaves the anchor focused, so it
   would latch a row into its engaged look for as long as the sheet is open —
   which is what left a green label sitting on the green wedge, invisible. */
/* On an accent row the engaged signal is the plate lifting and the wedge
   pressing harder into it, since a green glow on green would read as nothing.
   The lift is a shade, not a colour change: the plate brightens by about the
   amount a surface does when it turns into the light. */
/* Engaged, the row takes the height its copy needs and lifts above its
   neighbours to do it. A row is only about 60px tall once the masthead has taken
   its share — not enough for a title and a description — so rather than hiding
   the description or letting it fall off the plate, the row grows past its track
   and is painted over the rows either side of it. */
.z-entry__card:is(:active, :focus-visible) {
    height: auto;
    min-height: min(100%, clamp(46px, 10.5vh, 88px));
    z-index: 3;
}

.z-entry__card:is(:active, :focus-visible) .z-entry__reveal {
    width: auto;
    max-height: 3rem;
    opacity: 1;
    transform: none;
}

/* The badge leans a few pixels the way the row goes. The dark behind it is
   tucked well under the plate, so the move never exposes a seam. */
.z-entry__card:is(:active, :focus-visible) .z-entry__plate {
    transform: translateX(4px);
}

.z-entry__card:is(:active, :focus-visible) .z-entry__go {
    border-color: var(--on-accent);
    transform: translate(4px, -50%) rotate(45deg);
}

.z-entry__card:is(:active, :focus-visible) .z-entry__lockup {
    transform: scale(1.04);
}

/* The chip lifts off the plate: a nudge in scale, a deeper shadow under it, and
   the glyph inside it glowing. A chip this size only needs 1.09. */
.z-entry__card:is(:active, :focus-visible) .z-entry__icon {
    transform: scale(1.1);
}

.z-entry__card:is(:active, :focus-visible) .z-entry__num {
    color: var(--on-accent);
}

/* Hover is fenced off behind a real pointer. A phone reports :hover on the row
   it last touched and keeps it, so unfenced hover rules stick after a tap. */
@media (hover: hover) {
    .z-entry__card:hover {
        height: auto;
        min-height: min(100%, clamp(46px, 10.5vh, 88px));
        z-index: 3;
    }

    .z-entry__card:hover .z-entry__reveal {
        width: auto;
        max-height: 3rem;
        opacity: 1;
        transform: none;
    }

    .z-entry__card:hover .z-entry__plate {
        transform: translateX(4px);
    }

    .z-entry__card:hover .z-entry__go {
        border-color: var(--on-accent);
        transform: translate(4px, -50%) rotate(45deg);
    }

    .z-entry__card:hover .z-entry__lockup {
        transform: scale(1.04);
    }

    .z-entry__card:hover .z-entry__icon {
        transform: scale(1.1);
    }

    .z-entry__card:hover .z-entry__num {
        color: var(--on-accent);
    }
}

/* ---- Activating: the tap has been accepted and the browser is about to go. -*
   Last in the section on purpose. It has to outrank every engaged rule above,
   which it ties with on specificity, so order is what decides it. */
/* Paced against the 1.5s the script waits: the ink crosses the row over the
   first 0.9s, so the wait reads as the row committing rather than as a stall. */
.z-entry__card.is-activating::before {
    left: -30%;
    right: -30%;
    opacity: 1;
    transition: left 0.9s var(--ease), right 0.9s var(--ease),
        opacity 0.25s var(--ease);
}

/* The sweep runs ink under everything on the row, and the copy sits above the
   sweep, so it all goes white as the ink arrives — accent green on a green plate
   was invisible for the first half of the wait, which is the whole point of the
   pause. The delay is what lines the change up with the ink. */
.z-entry__card.is-activating .z-entry__icon {
    transform: scale(1.1);
    color: var(--text-invert);
    transition: transform 0.62s var(--ease), color 0.35s var(--ease) 0.12s;
}

.z-entry__card.is-activating .z-entry__icon svg {
    filter: none;
}

/* The dark sweep runs under the copy, so everything inverts to sit on it. */
.z-entry__card.is-activating .z-entry__label {
    color: var(--text-invert);
    transition: color 0.35s var(--ease) 0.12s;
}

.z-entry__card.is-activating .z-entry__text {
    color: var(--text-invert-muted);
}

.z-entry__card.is-activating .z-entry__num {
    color: var(--text-invert);
}

/* The chevron leaves ahead of the sheet, in the direction the row is going. */
.z-entry__card.is-activating .z-entry__go {
    border-color: var(--text-invert);
    transform: translate(12px, -50%) rotate(45deg);
    transition: transform 0.9s var(--ease), border-color 0.35s var(--ease);
}

/* The sweep puts ink under the mark, so it goes accent there for the same
   reason the labels do. */
/* Under the sweep the ground goes to ink, so the mark inverts to stay visible. */
.z-entry__card--brand.is-activating .z-entry__lockup {
    transform: scale(1.06);
    filter: brightness(0) invert(1);
}

/* The rest of the sheet recedes so the sweep is the only thing moving. */
.z-entry__grid.is-activating .z-entry__card:not(.is-activating) {
    opacity: 0.35;
}

/* The smallest phones still in use leave the title about 110px, which is what
   CERTIFICATIONS needs at the size floor with nothing to spare. Those screens
   give a little of the dark back on both kinds of row; the type stays at the
   floor rather than dropping further, since the plate is what has the slack. */
@media (max-width: 359px) {
    .z-entry__card {
        --z-wedge: 20%;
    }

    .z-entry__card:nth-child(even) {
        --z-gap: 19%;
        --z-wedge: 11%;
    }
}

/* Now that the number and the mark share the accent plate with the title, the
   title wraps to two lines on a phone and the description under it does too. An
   open row therefore needs 90px — two lines of each plus padding — which six
   equal rows only clear from about 726px of viewport up. Below that the
   description never opens; the chip, the number and the title still answer.

   Last in the section, after the activating rules it has to overrule — it ties
   with them on specificity, so order is the only thing deciding it. */
@media (max-height: 720px) {
    .z-entry__card:is(:active, :focus-visible, :hover, .is-activating) .z-entry__reveal {
        /* width too, or the block widens for a description that never shows. */
        width: 0;
        max-height: 0;
        opacity: 0;
    }
}

@media (max-height: 700px) {
    .z-entry__top {
        min-height: 22vh;
        min-height: 22dvh;
    }
}

@media (max-height: 560px) {
    /* No height to give away: the brand takes only the air around it. */
    .z-entry__top {
        min-height: 0;
    }

    /* Rows are down to ~49px here, and 20px of padding is more than they can
       spare: it leaves the icon chip taller than the box that holds it. */
    .z-entry__card {
        padding-block: 0.3125rem;
    }

    /* A landscape phone puts six rows in 375px: 31px each, 21px of it usable.
       The mark has to be measured against the row, not the viewport width. */
    .z-entry__icon {
        width: clamp(18px, min(8.4vw, 4vh), 32px);
        height: clamp(18px, min(8.4vw, 4vh), 32px);
    }
}

/* Below this there is no height left to divide — six rows in 320px leaves 22px
   each, which clips the titles themselves. The sheet gives up fitting and
   scrolls instead, which is the honest failure. .z-entry already carries
   data-lenis-prevent, so the smooth-scroll wrapper lets this one through. */
@media (max-height: 400px) {
    .z-entry__grid {
        grid-template-rows: repeat(6, minmax(46px, auto));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Once the tracks size to their content there is no track height left to
       measure a shorter row against, so the row goes back to taking the height
       its own content needs. */
    .z-entry__card {
        height: auto;
    }
}

/* ---- Arrival ------------------------------------------------------------- *
   The sheet is the first thing a phone visitor sees, so the rows arrive rather
   than simply exist: each slides in from its own side of the zig-zag, 55ms
   behind the one above it. The animation runs on reveal because a subtree in
   display:none holds its animations until it is displayed. */
@keyframes z-entry-row-in {
    from {
        opacity: 0;
        transform: translateX(var(--z-row-from));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes z-entry-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.z-entry__card {
    --z-row-from: -22px;
    /* backwards, not both: a forwards fill outranks normal declarations for as
       long as it holds, so `both` would pin opacity at 1 and quietly cancel the
       dim the other rows take during a tap. backwards covers the delay only. */
    animation: z-entry-row-in 0.6s var(--ease) backwards;
}

.z-entry__card:nth-child(even) {
    --z-row-from: 26px;
}

.z-entry__card:nth-child(1) { animation-delay: 0.08s; }
.z-entry__card:nth-child(2) { animation-delay: 0.135s; }
.z-entry__card:nth-child(3) { animation-delay: 0.19s; }
.z-entry__card:nth-child(4) { animation-delay: 0.245s; }
.z-entry__card:nth-child(5) { animation-delay: 0.3s; }
.z-entry__card:nth-child(6) { animation-delay: 0.355s; }

.z-entry__top {
    animation: z-entry-fade-in 0.5s var(--ease) backwards;
}

/* The masthead assembles in reading order: the mark rises, the rule draws
   itself out from the centre, the line fades up under it. */
@keyframes z-entry-brand-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes z-entry-rule-in {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.z-entry__logo {
    animation: z-entry-brand-in 0.7s var(--ease) 0.08s backwards;
}

.z-entry__rule {
    animation: z-entry-rule-in 0.7s var(--ease) 0.3s backwards;
}

.z-entry__caption {
    animation: z-entry-fade-in 0.6s var(--ease) 0.46s backwards;
}

.z-entry__skip {
    animation: z-entry-fade-in 0.5s var(--ease) 0.42s backwards;
}

@media (prefers-reduced-motion: reduce) {
    .z-entry__card,
    .z-entry__plate::after,
    .z-entry__top,
    .z-entry__logo,
    .z-entry__rule,
    .z-entry__caption,
    .z-entry__skip {
        animation: none;
    }
}

/* The way out is a plate like the rows are, raked to the same angle, with the
   words upright inside it. It was a full-width strip of text before, which read
   as a caption rather than as the one thing left to press. */
.z-entry__skip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(1rem, 4.5vw, 1.75rem) var(--gutter);
    color: var(--text-invert-muted);
}

.z-entry__skip-plate {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.8125rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(
        104deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.015)
    );
    transform: skewX(-19deg);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
        color 0.3s var(--ease);
}

/* The rake is on the plate, not on the language inside it. */
.z-entry__skip-plate > * {
    transform: skewX(19deg);
}

.z-entry__skip-text {
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-indent: 0.24em;
}

.z-entry__skip .z-btn__arrow {
    transition: transform 0.4s var(--ease);
}

.z-entry__skip:hover,
.z-entry__skip:focus-visible {
    color: var(--on-accent);
}

.z-entry__skip:hover .z-entry__skip-plate,
.z-entry__skip:focus-visible .z-entry__skip-plate {
    background: var(--z-green);
    border-color: var(--z-green);
}

.z-entry__skip:hover .z-btn__arrow,
.z-entry__skip:focus-visible .z-btn__arrow {
    transform: skewX(19deg) translateX(5px);
}

.z-entry__skip:hover,
.z-entry__skip:focus-visible {
    color: var(--accent);
}

@media (min-width: 768px) {
    .z-entry {
        display: none !important;
    }
}

/* ==========================================================================
   18. Misc content blocks
   ========================================================================== */
/* Two-column definition table (warranty / specs) */
.z-table {
    width: 100%;
    font-size: var(--fs-small);
}

.z-table th,
.z-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.z-table th {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.z-band .z-table th,
.z-band .z-table td {
    border-bottom-color: var(--line-invert);
}

.z-table tbody tr:hover {
    background: var(--paper-2);
}

.z-band .z-table tbody tr:hover {
    background: var(--ink-2);
}

/* Steps */
.z-steps {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    counter-reset: z-step;
}

.z-step {
    display: grid;
    gap: 0.875rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--line);
    transition: border-color 0.4s var(--ease);
}

.z-step:hover {
    border-top-color: var(--accent);
}

.z-band .z-step {
    border-top-color: var(--line-invert);
}

.z-step__num {
    counter-increment: z-step;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--text-faint);
}

.z-step__num::before {
    content: "0" counter(z-step);
}

.z-band .z-step__num {
    color: var(--accent);
}

.z-step__title {
    font-size: var(--fs-display-sm);
    line-height: 1.15;
}

.z-step__text {
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.7;
}

.z-band .z-step__text {
    color: var(--text-invert-muted);
}

/* Info pairs (contact details) */
.z-info {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.z-info__item {
    display: grid;
    gap: 0.5rem;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
    border: 1px solid var(--line);
}

.z-band .z-info__item {
    border-color: var(--line-invert);
}

.z-info__label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.z-info__value {
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--text-muted);
}

.z-band .z-info__value {
    color: var(--text-invert-muted);
}

.z-info__value strong {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
}

.z-band .z-info__value strong {
    color: var(--text-invert);
}

/* Checklist */
.z-checks {
    display: grid;
    gap: 0.875rem;
}

.z-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--text-muted);
}

.z-band .z-checks li {
    color: var(--text-invert-muted);
}

.z-checks li i,
.z-checks li .z-checks__mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: #12885a;
    font-size: 0.5625rem;
}

/* Negative marks (exclusion lists) stay neutral rather than reading as a yes */
.z-checks li .z-checks__mark {
    background: rgba(10, 10, 10, 0.07);
    color: #8a8a85;
}

.z-band .z-checks li .z-checks__mark {
    background: rgba(255, 255, 255, 0.08);
    color: #9a9a95;
}

.z-band .z-checks li i,
.z-band .z-checks li .z-checks__mark {
    color: var(--accent);
}

/* Media frame */
.z-frame {
    position: relative;
    overflow: hidden;
    background: var(--paper-3);
}

.z-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.z-frame--tall {
    aspect-ratio: 3 / 4;
}

.z-frame--square {
    aspect-ratio: 1 / 1;
}

.z-frame--wide {
    aspect-ratio: 16 / 9;
}

/* Search form */
.z-search {
    display: flex;
    gap: 0.5rem;
    max-width: 420px;
}

.z-search input[type="search"] {
    flex: 1;
    border: 1px solid var(--line);
    background: none;
    padding: 0.8125rem 1rem;
    font-size: var(--fs-small);
}

.z-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}

.custom-logo-link img{
    max-width: 200px;
}

/* ==========================================================================
   19. Certification documents
   ========================================================================== */
/* Four documents divide both the 4-up and 2-up grids, so no empty cells. */
.z-docs {
    display: grid;
    gap: 1px;
    background: var(--line-invert);
    border: 1px solid var(--line-invert);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 680px) {
    .z-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .z-docs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.z-doc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--text-invert);
}

/* The card leads with the issuer's mark; the document itself is behind the
   click, in the modal. A white plate keeps marks with baked-in white
   backgrounds (SIRIM, SGS) from showing a lighter rectangle. */
.z-doc__thumb,
.z-award__thumb {
    --z-pad: clamp(1.25rem, 3.4vw, 2rem);
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper);
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

/* An absolutely positioned child is laid out against the padding box, so
   padding cannot inset it — the breathing room has to come off the max size. */
.z-doc__thumb img,
.z-award__thumb img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: calc(100% - 2 * var(--z-pad));
    max-height: calc(100% - 2 * var(--z-pad));
    object-fit: contain;
    transition: transform 0.8s var(--ease);
}

.z-doc__thumb:hover img,
.z-award__thumb:hover img {
    transform: scale(1.05);
}

.z-doc__zoom {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 0.75rem 1rem;
    background: linear-gradient(to top, rgba(8, 8, 8, 0.88), rgba(8, 8, 8, 0));
    color: var(--text-invert);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.z-doc__thumb:hover .z-doc__zoom,
.z-doc__thumb:focus-visible .z-doc__zoom,
.z-award__thumb:hover .z-doc__zoom,
.z-award__thumb:focus-visible .z-doc__zoom {
    opacity: 1;
    transform: none;
}

.z-doc__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: clamp(1.25rem, 2vw, 1.625rem);
}

.z-doc__issuer {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--accent);
}

.z-doc__name {
    font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.z-doc__facts {
    display: grid;
    width: 100%;
    margin-top: auto;
}

.z-doc__fact {
    display: grid;
    gap: 0.25rem;
    padding-block: 0.6875rem;
    border-top: 1px solid var(--line-invert);
}

.z-doc__fact dt {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--text-faint);
}

.z-doc__fact dd {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.25;
}

.z-doc__body .z-btn {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
    padding-inline: 1.125rem;
    margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
}

/* The single award gets a wide feature card rather than a lonely grid cell.
   Accent frame and a lit ground so it reads as the standout on the page. */
.z-awardband {
    position: relative;
    overflow: hidden;
}

.z-awardband::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 70% at 78% 42%, rgba(0, 255, 136, 0.14), transparent 66%);
}

.z-awardband > .z-wrap {
    position: relative;
    z-index: 1;
}

.z-award {
    display: grid;
    gap: 1px;
    background: var(--accent-line);
    border: 1px solid var(--accent-line);
    box-shadow: 0 30px 60px -40px rgba(10, 10, 10, 0.45);
}

@media (min-width: 900px) {
    .z-award {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
}

.z-award__thumb {
    --z-pad: clamp(2rem, 7vw, 4.5rem);
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(64% 58% at 50% 48%, var(--accent-soft), transparent 70%),
        var(--paper);
}

@media (min-width: 900px) {
    .z-award__thumb {
        aspect-ratio: auto;
        min-height: 400px;
    }
}

.z-award__body {
    display: grid;
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
    align-content: center;
    justify-items: start;
    padding: clamp(1.5rem, 3.2vw, 3rem);
    background: var(--paper);
}

.z-award__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0.4375rem;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-text);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

.z-award__name {
    font-size: var(--fs-display-md);
    font-weight: 600;
    letter-spacing: 0.008em;
    line-height: 1.04;
    text-wrap: balance;
}

.z-award__facts {
    display: grid;
    width: 100%;
}

.z-award__facts .z-doc__fact {
    border-top-color: var(--line);
}

.z-award__facts .z-doc__fact dt {
    color: var(--text-faint);
}

.z-award__facts .z-doc__fact dd {
    color: var(--text);
}

/* Document sheet inside the modal */
.z-docsheet {
    display: grid;
}

.z-docsheet__intro {
    display: grid;
    gap: clamp(0.75rem, 1.4vw, 1.125rem);
    justify-items: start;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(3.75rem, 5vw, 4.5rem);
}

.z-docsheet__facts {
    border-inline: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line-invert);
}

.z-docsheet__full {
    margin: 0;
    padding: clamp(1rem, 2.4vw, 2rem);
    background: var(--ink-2);
    border-top: 1px solid var(--line-invert);
}

.z-docsheet__full img {
    width: 100%;
    height: auto;
    background: var(--paper);
    border: 1px solid var(--line-invert);
}

.z-docsheet__full figcaption {
    margin-top: clamp(0.75rem, 1.4vw, 1rem);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--text-invert-muted);
}

/* ==========================================================================
   19b. IONMAX innovation block
   ========================================================================== */
.z-tech {
    display: grid;
    gap: clamp(1.75rem, 3.4vw, 3rem);
    align-items: stretch;
}

@media (min-width: 900px) {
    .z-tech {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }
}

.z-tech__visual {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-3);
    border: 1px solid var(--line);
}

.z-tech__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.z-tech__visual:hover img {
    transform: scale(1.04);
}

/* The claims were 13px bullets with tiny chips; as hairline rows they read as
   a spec sheet and fill the column the image sets. */
.z-tech__list {
    display: grid;
    align-content: stretch;
    border-top: 1px solid var(--line);
}

.z-tech__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.875rem, 1.8vw, 1.5rem);
    min-height: 52px;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.z-tech__num {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #1c8f5a;
}

.z-tech__label {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--text);
}

@media (min-width: 900px) {
    .z-tech__visual {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .z-tech__visual img {
        position: absolute;
        inset: 0;
    }
}