@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap;}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap;}

/* ===== variables.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * DESIGN TOKENS / VARIABLES
 * File: /assets/css/variables.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Central source of truth for the ZANCK visual system.
 *
 * This file contains:
 *
 *   - Brand colors
 *   - Neutral colors
 *   - Typography tokens
 *   - Font weights
 *   - Spacing scale
 *   - Container dimensions
 *   - Border radius
 *   - Borders
 *   - Shadows
 *   - Transitions
 *   - Z-index layers
 *   - Layout tokens
 *   - Component dimensions
 *
 * No page-specific styling belongs here.
 *
 * ============================================================
 */


/* ============================================================
   01. BRAND COLORS
   ============================================================ */

:root {

    /* Primary ZANCK blue */

    --color-primary:
        #1e6dbb;

    --color-primary-hover:
        #185c9f;

    --color-primary-dark:
        #124b83;

    --color-primary-light:
        #4b8dcc;

    --color-primary-soft:
        #eaf3fb;


    /* Core brand neutrals */

    --color-white:
        #ffffff;

    --color-black:
        #000000;


    /* Enterprise neutrals */

    --color-neutral-25:
        #fcfcfd;

    --color-neutral-50:
        #f8f9fa;

    --color-neutral-100:
        #f1f3f5;

    --color-neutral-200:
        #e5e7eb;

    --color-neutral-300:
        #d1d5db;

    --color-neutral-400:
        #9ca3af;

    --color-neutral-500:
        #6b7280;

    --color-neutral-600:
        #4b5563;

    --color-neutral-700:
        #374151;

    --color-neutral-800:
        #1f2937;

    --color-neutral-900:
        #111827;

}


/* ============================================================
   02. SEMANTIC COLORS
   ============================================================ */

:root {

    --color-text:
        #000000;

    --color-text-primary:
        #111111;

    --color-text-secondary:
        #4b5563;

    --color-text-muted:
        #6b7280;

    --color-text-inverse:
        #ffffff;


    --color-background:
        #ffffff;

    --color-background-soft:
        #f8f9fa;

    --color-background-muted:
        #f1f3f5;

    --color-background-dark:
        #000000;

    --color-background-dark-soft:
        #111111;


    --color-border:
        #e5e7eb;

    --color-border-light:
        #eef0f2;

    --color-border-dark:
        #374151;


    --color-success:
        #16834a;

    --color-success-soft:
        #eaf7ef;


    --color-warning:
        #a66a00;

    --color-warning-soft:
        #fff7e5;


    --color-error:
        #c62828;

    --color-error-soft:
        #fdecec;


    --color-info:
        #1e6dbb;

    --color-info-soft:
        #eaf3fb;

}


/* ============================================================
   03. TYPOGRAPHY TOKENS
   ============================================================ */

:root {

    --font-primary:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-display:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;


    --font-weight-light:
        300;

    --font-weight-regular:
        400;

    --font-weight-medium:
        500;

    --font-weight-semibold:
        600;

    --font-weight-bold:
        700;

    --font-weight-extrabold:
        800;

}


/* ============================================================
   04. TYPE SCALE
   ============================================================ */

:root {

    --font-size-xs:
        0.6875rem;

    --font-size-sm:
        0.8125rem;

    --font-size-base:
        1rem;

    --font-size-md:
        1.125rem;

    --font-size-lg:
        1.25rem;

    --font-size-xl:
        1.5rem;

    --font-size-2xl:
        1.875rem;

    --font-size-3xl:
        2.25rem;

    --font-size-4xl:
        3rem;

    --font-size-5xl:
        4rem;

    --font-size-6xl:
        5rem;

}


/* ============================================================
   05. LINE HEIGHTS
   ============================================================ */

:root {

    --line-height-none:
        1;

    --line-height-tight:
        1.1;

    --line-height-snug:
        1.25;

    --line-height-normal:
        1.5;

    --line-height-relaxed:
        1.7;

    --line-height-loose:
        1.85;

}


/* ============================================================
   06. LETTER SPACING
   ============================================================ */

:root {

    --tracking-tighter:
        -0.055em;

    --tracking-tight:
        -0.035em;

    --tracking-normal:
        0;

    --tracking-wide:
        0.04em;

    --tracking-wider:
        0.08em;

    --tracking-widest:
        0.14em;

}


/* ============================================================
   07. SPACING SCALE
   ============================================================ */

:root {

    --space-0:
        0;

    --space-1:
        0.25rem;

    --space-2:
        0.5rem;

    --space-3:
        0.75rem;

    --space-4:
        1rem;

    --space-5:
        1.25rem;

    --space-6:
        1.5rem;

    --space-8:
        2rem;

    --space-10:
        2.5rem;

    --space-12:
        3rem;

    --space-14:
        3.5rem;

    --space-16:
        4rem;

    --space-20:
        5rem;

    --space-24:
        6rem;

    --space-28:
        7rem;

    --space-32:
        8rem;

    --space-40:
        10rem;

    --space-48:
        12rem;

}


/* ============================================================
   08. SECTION SPACING
   ============================================================ */

:root {

    --section-padding-y:
        7rem;

    --section-padding-y-large:
        9rem;

    --section-padding-y-small:
        5rem;

    --section-gap:
        5rem;

    --section-gap-large:
        7rem;

}


/* ============================================================
   09. CONTAINER SYSTEM
   ============================================================ */

:root {

    --container-max:
        1280px;

    --container-max-wide:
        1440px;

    --container-max-narrow:
        960px;

    --container-padding:
        2rem;

    --container-padding-mobile:
        1rem;

}


/* ============================================================
   10. GRID SYSTEM
   ============================================================ */

:root {

    --grid-gap:
        1.5rem;

    --grid-gap-large:
        2.5rem;

    --grid-gap-xl:
        4rem;

}


/* ============================================================
   11. BORDER TOKENS
   ============================================================ */

:root {

    --border-width:
        1px;

    --border-width-thick:
        2px;

    --border-style:
        solid;


    --border-default:
        1px solid var(--color-border);

    --border-light:
        1px solid var(--color-border-light);

    --border-dark:
        1px solid var(--color-border-dark);

    --border-primary:
        1px solid var(--color-primary);

}


/* ============================================================
   12. BORDER RADIUS
   ============================================================ */

:root {

    --radius-none:
        0;

    --radius-sm:
        0.25rem;

    --radius-md:
        0.5rem;

    --radius-lg:
        0.75rem;

    --radius-xl:
        1rem;

    --radius-2xl:
        1.5rem;

    --radius-full:
        9999px;

}


/* ============================================================
   13. SHADOWS
   ============================================================ */

:root {

    --shadow-none:
        none;

    --shadow-xs:
        0 1px 2px rgba(
            0,
            0,
            0,
            0.04
        );

    --shadow-sm:
        0 2px 6px rgba(
            0,
            0,
            0,
            0.06
        );

    --shadow-md:
        0 8px 24px rgba(
            0,
            0,
            0,
            0.08
        );

    --shadow-lg:
        0 16px 40px rgba(
            0,
            0,
            0,
            0.10
        );

    --shadow-xl:
        0 24px 64px rgba(
            0,
            0,
            0,
            0.12
        );

}


/* ============================================================
   14. BLUE SHADOWS
   ============================================================ */

:root {

    --shadow-primary-sm:
        0 4px 14px rgba(
            30,
            109,
            187,
            0.16
        );

    --shadow-primary-md:
        0 10px 30px rgba(
            30,
            109,
            187,
            0.20
        );

    --shadow-primary-lg:
        0 20px 50px rgba(
            30,
            109,
            187,
            0.24
        );

}


/* ============================================================
   15. TRANSITIONS
   ============================================================ */

:root {

    --transition-fast:
        150ms
        ease;

    --transition-base:
        250ms
        ease;

    --transition-medium:
        350ms
        ease;

    --transition-slow:
        500ms
        ease;

    --transition-layout:
        400ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ============================================================
   16. EASING FUNCTIONS
   ============================================================ */

:root {

    --ease-linear:
        linear;

    --ease-in:
        cubic-bezier(
            0.4,
            0,
            1,
            1
        );

    --ease-out:
        cubic-bezier(
            0,
            0,
            0.2,
            1
        );

    --ease-in-out:
        cubic-bezier(
            0.4,
            0,
            0.2,
            1
        );

    --ease-enterprise:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* ============================================================
   17. HEADER
   ============================================================ */

:root {

    --header-height:
        80px;

    --header-height-mobile:
        68px;

    --header-border:
        1px solid var(--color-border-light);

}


/* ============================================================
   18. NAVIGATION
   ============================================================ */

:root {

    --nav-gap:
        2rem;

    --nav-dropdown-width:
        320px;

    --nav-mega-width:
        1100px;

    --nav-dropdown-offset:
        1rem;

}


/* ============================================================
   19. BUTTON DIMENSIONS
   ============================================================ */

:root {

    --button-height:
        46px;

    --button-height-large:
        54px;

    --button-height-small:
        38px;

    --button-padding-x:
        1.25rem;

    --button-padding-x-large:
        1.5rem;

    --button-padding-x-small:
        1rem;

}


/* ============================================================
   20. FORM DIMENSIONS
   ============================================================ */

:root {

    --input-height:
        52px;

    --input-height-small:
        44px;

    --textarea-min-height:
        150px;

    --form-gap:
        1.25rem;

}


/* ============================================================
   21. CARD TOKENS
   ============================================================ */

:root {

    --card-padding:
        1.5rem;

    --card-padding-large:
        2rem;

    --card-radius:
        var(--radius-lg);

    --card-border:
        var(--border-light);

    --card-shadow:
        var(--shadow-sm);

}


/* ============================================================
   22. HERO TOKENS
   ============================================================ */

:root {

    --hero-min-height:
        760px;

    --hero-min-height-tablet:
        640px;

    --hero-min-height-mobile:
        560px;

    --hero-content-max:
        1100px;

}


/* ============================================================
   23. PAGE HERO TOKENS
   ============================================================ */

:root {

    --page-hero-min-height:
        560px;

    --page-hero-min-height-tablet:
        480px;

    --page-hero-min-height-mobile:
        380px;

    --page-hero-content-max:
        1000px;

}


/* ============================================================
   24. CONTENT WIDTH TOKENS
   ============================================================ */

:root {

    --content-narrow:
        640px;

    --content-medium:
        760px;

    --content-wide:
        960px;

    --content-full:
        1200px;

}


/* ============================================================
   25. IMAGE ASPECT RATIOS
   ============================================================ */

:root {

    --ratio-square:
        1 / 1;

    --ratio-landscape:
        16 / 9;

    --ratio-wide:
        21 / 9;

    --ratio-portrait:
        4 / 5;

    --ratio-mobile:
        4 / 3;

}


/* ============================================================
   26. Z-INDEX SYSTEM
   ============================================================ */

:root {

    --z-base:
        0;

    --z-content:
        10;

    --z-dropdown:
        100;

    --z-sticky:
        200;

    --z-header:
        500;

    --z-overlay:
        800;

    --z-modal:
        1000;

    --z-toast:
        1100;

    --z-tooltip:
        1200;

}


/* ============================================================
   27. OPACITY
   ============================================================ */

:root {

    --opacity-disabled:
        0.45;

    --opacity-muted:
        0.65;

    --opacity-secondary:
        0.75;

    --opacity-overlay:
        0.8;

    --opacity-full:
        1;

}


/* ============================================================
   28. ICON DIMENSIONS
   ============================================================ */

:root {

    --icon-xs:
        12px;

    --icon-sm:
        16px;

    --icon-md:
        20px;

    --icon-lg:
        24px;

    --icon-xl:
        32px;

    --icon-2xl:
        40px;

}


/* ============================================================
   29. ACCESSIBILITY
   ============================================================ */

:root {

    --focus-width:
        3px;

    --focus-offset:
        3px;

    --focus-color:
        var(--color-primary);

}


/* ============================================================
   30. RESPONSIVE BREAKPOINTS
   ============================================================
 *
 * CSS custom properties cannot be used directly inside
 * @media queries in the traditional way.
 *
 * These values are documented here as the canonical
 * breakpoint system.
 *
 * ============================================================ */

:root {

    --breakpoint-sm:
        480px;

    --breakpoint-md:
        640px;

    --breakpoint-lg:
        768px;

    --breakpoint-xl:
        900px;

    --breakpoint-2xl:
        1024px;

    --breakpoint-3xl:
        1200px;

    --breakpoint-4xl:
        1440px;

}


/* ============================================================
   31. MOBILE OVERRIDES
   ============================================================ */

@media (
    max-width: 768px
) {

    :root {

        --container-padding:
            1.25rem;

        --section-padding-y:
            5rem;

        --section-padding-y-large:
            6rem;

        --section-gap:
            3.5rem;

        --grid-gap:
            1.25rem;

        --grid-gap-large:
            2rem;

        --header-height:
            var(--header-height-mobile);

    }

}


@media (
    max-width: 480px
) {

    :root {

        --container-padding:
            1rem;

        --section-padding-y:
            4rem;

        --section-padding-y-large:
            5rem;

        --section-gap:
            3rem;

        --grid-gap:
            1rem;

    }

}


/* ============================================================
   32. DARK SURFACE TOKENS
   ============================================================
 *
 * ZANCK's primary visual language remains white / black /
 * blue. These tokens provide controlled dark surfaces for
 * selected enterprise sections rather than creating a
 * separate dark-theme brand.
 *
 * ============================================================ */

:root {

    --surface-dark:
        #000000;

    --surface-dark-1:
        #0a0a0a;

    --surface-dark-2:
        #111111;

    --surface-dark-3:
        #181818;

    --surface-dark-border:
        rgba(
            255,
            255,
            255,
            0.12
        );

    --surface-dark-text:
        #ffffff;

    --surface-dark-muted:
        rgba(
            255,
            255,
            255,
            0.68
        );

}


/* ============================================================
   33. LIGHT SURFACE TOKENS
   ============================================================ */

:root {

    --surface-light:
        #ffffff;

    --surface-light-1:
        #fcfcfc;

    --surface-light-2:
        #f8f9fa;

    --surface-light-3:
        #f1f3f5;

}


/* ============================================================
   34. GRADIENT TOKENS
   ============================================================ */

:root {

    --gradient-primary:
        linear-gradient(
            135deg,
            #1e6dbb 0%,
            #185c9f 100%
        );

    --gradient-light:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f5f8fb 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #000000 0%,
            #111111 100%
        );

}


/* ============================================================
   35. SELECTION
   ============================================================ */

::selection {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}


::-moz-selection {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}


/* ============================================================
   36. ACCESSIBILITY FOCUS
   ============================================================ */

:focus-visible {

    outline:
        var(--focus-width)
        solid
        var(--focus-color);

    outline-offset:
        var(--focus-offset);

}


/* ============================================================
   37. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    :root {

        --transition-fast:
            0ms;

        --transition-base:
            0ms;

        --transition-medium:
            0ms;

        --transition-slow:
            0ms;

        --transition-layout:
            0ms;

    }

}


/* ============================================================
   END OF ZANCK DESIGN TOKENS
   ============================================================
 */

/* ===== reset.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * GLOBAL CSS RESET
 * File: /assets/css/reset.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Establishes a predictable cross-browser baseline.
 *
 * This file intentionally contains NO:
 *
 *   - ZANCK brand colors
 *   - Typography system
 *   - Layout system
 *   - Component styling
 *   - Navigation styling
 *   - Page-specific styling
 *   - Animation definitions
 *
 * Those responsibilities belong to:
 *
 *   base.css
 *   layout.css
 *   components.css
 *   navigation.css
 *   animations.css
 *   pages.css
 *
 * ============================================================
 */


/* ============================================================
   01. BOX SIZING
   ============================================================ */

html {

    box-sizing:
        border-box;

}


*,
*::before,
*::after {

    box-sizing:
        inherit;

}


/* ============================================================
   02. DOCUMENT DEFAULTS
   ============================================================ */

html {

    margin:
        0;

    padding:
        0;

    width:
        100%;

    min-height:
        100%;

}


body {

    margin:
        0;

    padding:
        0;

    width:
        100%;

    min-height:
        100%;

}


/* ============================================================
   03. ROOT ELEMENTS
   ============================================================ */

html,
body {

    min-height:
        100%;

}


body {

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* ============================================================
   04. DOCUMENT FLOW
   ============================================================ */

main,
header,
footer,
section,
article,
aside,
nav,
figure,
figcaption {

    display:
        block;

}


/* ============================================================
   05. HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin:
        0;

    padding:
        0;

    font-size:
        inherit;

    font-weight:
        inherit;

}


/* ============================================================
   06. PARAGRAPHS
   ============================================================ */

p {

    margin:
        0;

    padding:
        0;

}


/* ============================================================
   07. LISTS
   ============================================================ */

ul,
ol {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* ============================================================
   08. LINKS
   ============================================================ */

a {

    color:
        inherit;

    text-decoration:
        none;

}


a:focus-visible {

    outline:
        2px solid
        currentColor;

    outline-offset:
        4px;

}


/* ============================================================
   09. IMAGES
   ============================================================ */

img,
picture,
svg,
canvas {

    display:
        block;

    max-width:
        100%;

}


img {

    height:
        auto;

}


svg {

    overflow:
        hidden;

}


/* ============================================================
   10. FIGURES
   ============================================================ */

figure {

    margin:
        0;

    padding:
        0;

}


/* ============================================================
   11. TABLES
   ============================================================ */

table {

    width:
        100%;

    border-collapse:
        collapse;

    border-spacing:
        0;

}


caption,
th,
td {

    padding:
        0;

    text-align:
        left;

    vertical-align:
        top;

}


/* ============================================================
   12. FORM ELEMENTS
   ============================================================ */

button,
input,
textarea,
select {

    margin:
        0;

    padding:
        0;

    font:
        inherit;

    color:
        inherit;

}


/* ============================================================
   13. BUTTONS
   ============================================================ */

button {

    border:
        0;

    background:
        none;

    cursor:
        pointer;

}


button:disabled {

    cursor:
        not-allowed;

}


button:focus-visible {

    outline:
        2px solid
        currentColor;

    outline-offset:
        4px;

}


/* ============================================================
   14. INPUTS
   ============================================================ */

input,
textarea,
select {

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

}


input:focus,
textarea:focus,
select:focus {

    outline:
        none;

}


input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        2px solid
        currentColor;

    outline-offset:
        2px;

}


/* ============================================================
   15. TEXTAREA
   ============================================================ */

textarea {

    resize:
        vertical;

}


/* ============================================================
   16. SELECT
   ============================================================ */

select {

    appearance:
        none;

    -webkit-appearance:
        none;

    -moz-appearance:
        none;

}


/* ============================================================
   17. SEARCH INPUT
   ============================================================ */

input[type="search"] {

    appearance:
        none;

    -webkit-appearance:
        none;

    -moz-appearance:
        none;

}


input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {

    appearance:
        none;

}


/* ============================================================
   18. NUMBER INPUT
   ============================================================ */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    margin:
        0;

    -webkit-appearance:
        none;

}


input[type="number"] {

    -moz-appearance:
        textfield;

}


/* ============================================================
   19. CHECKBOX / RADIO
   ============================================================ */

input[type="checkbox"],
input[type="radio"] {

    margin:
        0;

}


/* ============================================================
   20. FIELDSET
   ============================================================ */

fieldset {

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

}


/* ============================================================
   21. LEGEND
   ============================================================ */

legend {

    padding:
        0;

}


/* ============================================================
   22. LABEL
   ============================================================ */

label {

    cursor:
        pointer;

}


/* ============================================================
   23. QUOTATIONS
   ============================================================ */

blockquote,
q {

    margin:
        0;

    padding:
        0;

}


blockquote::before,
blockquote::after,
q::before,
q::after {

    content:
        none;

}


/* ============================================================
   24. CODE
   ============================================================ */

pre,
code,
kbd,
samp {

    font-family:
        monospace;

}


/* ============================================================
   25. PRE
   ============================================================ */

pre {

    margin:
        0;

    white-space:
        pre-wrap;

    overflow-wrap:
        break-word;

}


/* ============================================================
   26. HORIZONTAL RULE
   ============================================================ */

hr {

    height:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-top:
        1px solid
        currentColor;

}


/* ============================================================
   27. ABBREVIATIONS
   ============================================================ */

abbr[title] {

    text-decoration:
        underline dotted;

    cursor:
        help;

}


/* ============================================================
   28. ADDRESS
   ============================================================ */

address {

    margin:
        0;

    font-style:
        normal;

}


/* ============================================================
   29. DETAILS / SUMMARY
   ============================================================ */

details {

    display:
        block;

}


summary {

    display:
        list-item;

    cursor:
        pointer;

}


summary::-webkit-details-marker {

    display:
        none;

}


/* ============================================================
   30. MEDIA ELEMENTS
   ============================================================ */

audio,
video {

    display:
        block;

    max-width:
        100%;

}


audio:not([controls]) {

    display:
        none;

}


/* ============================================================
   31. IFRAME
   ============================================================ */

iframe {

    display:
        block;

    max-width:
        100%;

    border:
        0;

}


/* ============================================================
   32. EMBED / OBJECT
   ============================================================ */

embed,
object {

    display:
        block;

    max-width:
        100%;

}


/* ============================================================
   33. HIDDEN ATTRIBUTE
   ============================================================ */

[hidden] {

    display:
        none !important;

}


/* ============================================================
   34. DISABLED ELEMENTS
   ============================================================ */

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {

    cursor:
        not-allowed;

}


/* ============================================================
   35. AUTOFILL
   ============================================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {

    transition:
        background-color 9999s
        ease-in-out 0s;

}


/* ============================================================
   36. TOUCH INTERACTION
   ============================================================ */

html {

    -webkit-tap-highlight-color:
        transparent;

}


/* ============================================================
   37. SELECTION
   ============================================================ */

::selection {

    background:
        currentColor;

    color:
        inherit;

}


/* ============================================================
   38. PLACEHOLDER
   ============================================================ */

::placeholder {

    opacity:
        1;

}


/* ============================================================
   39. ACCESSIBILITY
   ============================================================ */

:focus:not(:focus-visible) {

    outline:
        none;

}


/* ============================================================
   40. REDUCED MOTION BASELINE
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}


/* ============================================================
   41. PRINT BASELINE
   ============================================================ */

@media print {

    *,
    *::before,
    *::after {

        background:
            transparent !important;

        box-shadow:
            none !important;

        text-shadow:
            none !important;

    }


    a,
    a:visited {

        text-decoration:
            underline;

    }


    abbr[title]::after {

        content:
            " (" attr(title) ")";

    }


    pre,
    blockquote {

        page-break-inside:
            avoid;

    }


    thead {

        display:
            table-header-group;

    }


    tr,
    img {

        page-break-inside:
            avoid;

    }


    img {

        max-width:
            100% !important;

    }


    p,
    h2,
    h3 {

        orphans:
            3;

        widows:
            3;

    }


    h2,
    h3 {

        page-break-after:
            avoid;

    }

}


/* ============================================================
   END OF ZANCK GLOBAL RESET
   ============================================================
 */

/* ===== base.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * Global Base Styles
 * File: /assets/css/base.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Global CSS foundation for the ZANCK enterprise website.
 *
 * This file controls:
 *
 * - CSS reset
 * - Box sizing
 * - Document defaults
 * - Typography foundation
 * - Links
 * - Images
 * - SVG
 * - Buttons
 * - Forms
 * - Tables
 * - Lists
 * - Accessibility
 * - Selection
 * - Focus states
 * - Basic utility classes
 *
 * This file does NOT control:
 *
 * - Header layout
 * - Navigation layout
 * - Page sections
 * - Service cards
 * - Hero layouts
 * - Responsive breakpoints
 * - Animation definitions
 *
 * Those belong to other CSS layers.
 *
 * ============================================================
 */


/* ============================================================
   01. ROOT DOCUMENT
   ============================================================ */

html {

    box-sizing:
        border-box;

    font-size:
        16px;

    -webkit-text-size-adjust:
        100%;

    text-size-adjust:
        100%;

    scroll-behavior:
        smooth;

}


/**
 * Inherit box sizing.
 */

*,
*::before,
*::after {

    box-sizing:
        inherit;

}


/* ============================================================
   02. BODY
   ============================================================ */

body {

    margin:
        0;

    min-height:
        100vh;

    background:
        #FFFFFF;

    color:
        #000000;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1rem;

    font-weight:
        400;

    line-height:
        1.6;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* ============================================================
   03. DOCUMENT ROOT
   ============================================================ */

html,
body {

    width:
        100%;

}


/* ============================================================
   04. MAIN DOCUMENT ELEMENTS
   ============================================================ */

main,
header,
footer,
nav,
section,
article,
aside {

    display:
        block;

}


/* ============================================================
   05. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin:
        0;

    color:
        #000000;

    font-family:
        inherit;

    font-weight:
        700;

    line-height:
        1.15;

    text-wrap:
        balance;

}


/**
 * H1
 */

h1 {

    font-size:
        clamp(
            2.5rem,
            6vw,
            5.5rem
        );

    letter-spacing:
        -0.045em;

}


/**
 * H2
 */

h2 {

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    letter-spacing:
        -0.035em;

}


/**
 * H3
 */

h3 {

    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2.5rem
        );

    letter-spacing:
        -0.025em;

}


/**
 * H4
 */

h4 {

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );

}


/**
 * H5
 */

h5 {

    font-size:
        1.125rem;

}


/**
 * H6
 */

h6 {

    font-size:
        1rem;

}


/* ============================================================
   06. PARAGRAPHS
   ============================================================ */

p {

    margin:
        0;

}


p + p {

    margin-top:
        1rem;

}


/* ============================================================
   07. STRONG / EMPHASIS
   ============================================================ */

strong,
b {

    font-weight:
        700;

}


em,
i {

    font-style:
        italic;

}


/* ============================================================
   08. SMALL TEXT
   ============================================================ */

small {

    font-size:
        0.875rem;

}


/* ============================================================
   09. LINKS
   ============================================================ */

a {

    color:
        inherit;

    text-decoration:
        none;

}


a:hover {

    color:
        inherit;

}


a:focus {

    outline:
        none;

}


/* ============================================================
   10. IMAGES
   ============================================================ */

img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


/* ============================================================
   11. SVG
   ============================================================ */

svg {

    display:
        block;

    max-width:
        100%;

}


/**
 * SVGs used as icons should not unexpectedly overflow.
 */

svg:not(
    :root
) {

    overflow:
        hidden;

}


/* ============================================================
   12. VIDEO / AUDIO / EMBEDS
   ============================================================ */

video,
audio,
iframe,
embed,
object {

    display:
        block;

    max-width:
        100%;

}


/**
 * Responsive iframe behavior.
 */

iframe {

    border:
        0;

}


/* ============================================================
   13. FIGURES
   ============================================================ */

figure {

    margin:
        0;

}


figcaption {

    margin-top:
        0.75rem;

}


/* ============================================================
   14. LISTS
   ============================================================ */

ul,
ol {

    margin:
        0;

    padding:
        0;

}


ul,
ol {

    list-style:
        none;

}


/**
 * Content lists can opt back into semantic markers.
 */

.z-content ul {

    list-style:
        disc;

    padding-left:
        1.5rem;

}


.z-content ol {

    list-style:
        decimal;

    padding-left:
        1.5rem;

}


.z-content li + li {

    margin-top:
        0.5rem;

}


/* ============================================================
   15. BLOCKQUOTES
   ============================================================ */

blockquote {

    margin:
        0;

}


/* ============================================================
   16. HORIZONTAL RULE
   ============================================================ */

hr {

    height:
        1px;

    margin:
        2rem 0;

    border:
        0;

    background:
        rgba(
            0,
            0,
            0,
            0.12
        );

}


/* ============================================================
   17. CODE
   ============================================================ */

code,
kbd,
pre,
samp {

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

}


code {

    font-size:
        0.9em;

}


pre {

    margin:
        0;

    overflow:
        auto;

}


/* ============================================================
   18. TABLES
   ============================================================ */

table {

    width:
        100%;

    border-collapse:
        collapse;

    border-spacing:
        0;

}


/* ============================================================
   19. BUTTONS
   ============================================================ */

button,
input,
optgroup,
select,
textarea {

    margin:
        0;

    font:
        inherit;

    color:
        inherit;

}


/**
 * Buttons should not inherit browser-specific borders.
 */

button {

    border:
        0;

    background:
        none;

}


/**
 * Pointer behavior.
 */

button,
[type="button"],
[type="submit"],
[type="reset"] {

    cursor:
        pointer;

}


/**
 * Disabled controls.
 */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {

    cursor:
        not-allowed;

}


/* ============================================================
   20. FORM ELEMENTS
   ============================================================ */

input,
textarea,
select {

    width:
        100%;

}


/**
 * Textarea.
 */

textarea {

    min-height:
        140px;

    resize:
        vertical;

}


/**
 * Select.
 */

select {

    cursor:
        pointer;

}


/**
 * Search inputs.
 */

input[type="search"] {

    -webkit-appearance:
        none;

    appearance:
        none;

}


/**
 * Remove browser search decorations.
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {

    -webkit-appearance:
        none;

}


/* ============================================================
   21. FORM PLACEHOLDERS
   ============================================================ */

::placeholder {

    color:
        rgba(
            0,
            0,
            0,
            0.5
        );

    opacity:
        1;

}


/* ============================================================
   22. CHECKBOXES / RADIO
   ============================================================ */

input[type="checkbox"],
input[type="radio"] {

    width:
        auto;

}


/* ============================================================
   23. FIELDSET
   ============================================================ */

fieldset {

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

}


/* ============================================================
   24. LEGEND
   ============================================================ */

legend {

    padding:
        0;

}


/* ============================================================
   25. LABEL
   ============================================================ */

label {

    display:
        inline-block;

}


/* ============================================================
   26. DETAILS / SUMMARY
   ============================================================ */

summary {

    cursor:
        pointer;

}


/**
 * Remove browser marker where custom accordion UI is used.
 */

.z-accordion summary {

    list-style:
        none;

}


.z-accordion summary::-webkit-details-marker {

    display:
        none;

}


/* ============================================================
   27. DIALOG
   ============================================================ */

dialog {

    max-width:
        calc(
            100% - 2rem
        );

    padding:
        0;

    border:
        0;

}


/* ============================================================
   28. HIDDEN ATTRIBUTE
   ============================================================ */

[hidden] {

    display:
        none !important;

}


/* ============================================================
   29. ACCESSIBILITY
   ============================================================ */

/**
 * Visually hidden but accessible to screen readers.
 */

.z-sr-only {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

}


/**
 * Accessible focus restoration.
 */

.z-sr-only-focusable:active,
.z-sr-only-focusable:focus {

    position:
        static !important;

    width:
        auto !important;

    height:
        auto !important;

    margin:
        0 !important;

    overflow:
        visible !important;

    clip:
        auto !important;

    white-space:
        normal !important;

}


/* ============================================================
   30. KEYBOARD FOCUS
   ============================================================ */

/**
 * ZANCK should have a visible keyboard focus state.
 */

:focus-visible {

    outline:
        3px solid
        #1e6dbb;

    outline-offset:
        3px;

}


/**
 * Form controls receive a slightly more restrained focus
 * treatment.
 */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        2px solid
        #1e6dbb;

    outline-offset:
        1px;

}


/* ============================================================
   31. SELECTION
   ============================================================ */

::selection {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

}


::-moz-selection {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

}


/* ============================================================
   32. TEXT UTILITIES
   ============================================================ */

.z-text-left {

    text-align:
        left;

}


.z-text-center {

    text-align:
        center;

}


.z-text-right {

    text-align:
        right;

}


/**
 * Prevent awkward wrapping of important labels.
 */

.z-nowrap {

    white-space:
        nowrap;

}


/**
 * Balanced heading utility.
 */

.z-balance {

    text-wrap:
        balance;

}


/**
 * Pretty paragraph wrapping.
 */

.z-pretty {

    text-wrap:
        pretty;

}


/* ============================================================
   33. DISPLAY UTILITIES
   ============================================================ */

.z-block {

    display:
        block;

}


.z-inline {

    display:
        inline;

}


.z-inline-block {

    display:
        inline-block;

}


.z-flex {

    display:
        flex;

}


.z-inline-flex {

    display:
        inline-flex;

}


.z-grid {

    display:
        grid;

}


.z-hidden {

    display:
        none !important;

}


/* ============================================================
   34. WIDTH UTILITIES
   ============================================================ */

.z-width-full {

    width:
        100%;

}


.z-width-auto {

    width:
        auto;

}


/* ============================================================
   35. HEIGHT UTILITIES
   ============================================================ */

.z-height-full {

    height:
        100%;

}


.z-min-height-screen {

    min-height:
        100vh;

    min-height:
        100svh;

}


/* ============================================================
   36. POSITIONING UTILITIES
   ============================================================ */

.z-relative {

    position:
        relative;

}


.z-absolute {

    position:
        absolute;

}


.z-fixed {

    position:
        fixed;

}


.z-sticky {

    position:
        sticky;

}


/* ============================================================
   37. OVERFLOW
   ============================================================ */

.z-overflow-hidden {

    overflow:
        hidden;

}


.z-overflow-auto {

    overflow:
        auto;

}


.z-overflow-x-auto {

    overflow-x:
        auto;

}


.z-overflow-y-auto {

    overflow-y:
        auto;

}


/* ============================================================
   38. OBJECT FIT
   ============================================================ */

.z-object-cover {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.z-object-contain {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


/* ============================================================
   39. POINTER UTILITIES
   ============================================================ */

.z-pointer {

    cursor:
        pointer;

}


.z-no-pointer {

    pointer-events:
        none;

}


/* ============================================================
   40. USER SELECT
   ============================================================ */

.z-select-none {

    user-select:
        none;

    -webkit-user-select:
        none;

}


/* ============================================================
   41. MARGIN UTILITIES
   ============================================================ */

.z-m-0 {

    margin:
        0 !important;

}


.z-m-auto {

    margin:
        auto !important;

}


.z-mt-0 {

    margin-top:
        0 !important;

}


.z-mb-0 {

    margin-bottom:
        0 !important;

}


.z-ml-0 {

    margin-left:
        0 !important;

}


.z-mr-0 {

    margin-right:
        0 !important;

}


/* ============================================================
   42. PADDING UTILITIES
   ============================================================ */

.z-p-0 {

    padding:
        0 !important;

}


/* ============================================================
   43. IMAGE UTILITIES
   ============================================================ */

.z-image-full {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


/**
 * Prevent decorative images from being selected.
 */

.z-image-decorative {

    user-select:
        none;

    -webkit-user-drag:
        none;

}


/* ============================================================
   44. BACKGROUND UTILITIES
   ============================================================ */

.z-bg-white {

    background-color:
        #FFFFFF;

}


.z-bg-black {

    background-color:
        #000000;

}


.z-bg-blue {

    background-color:
        #1e6dbb;

}


/* ============================================================
   45. TEXT COLOR UTILITIES
   ============================================================ */

.z-text-black {

    color:
        #000000;

}


.z-text-white {

    color:
        #FFFFFF;

}


.z-text-blue {

    color:
        #1e6dbb;

}


/* ============================================================
   46. BORDER UTILITIES
   ============================================================ */

.z-border-none {

    border:
        0;

}


/* ============================================================
   47. OPACITY
   ============================================================ */

.z-opacity-0 {

    opacity:
        0;

}


.z-opacity-50 {

    opacity:
        0.5;

}


.z-opacity-75 {

    opacity:
        0.75;

}


.z-opacity-100 {

    opacity:
        1;

}


/* ============================================================
   48. VISIBILITY
   ============================================================ */

.z-visible {

    visibility:
        visible;

}


.z-invisible {

    visibility:
        hidden;

}


/* ============================================================
   49. ASPECT RATIOS
   ============================================================ */

.z-aspect-square {

    aspect-ratio:
        1 / 1;

}


.z-aspect-video {

    aspect-ratio:
        16 / 9;

}


.z-aspect-wide {

    aspect-ratio:
        21 / 9;

}


/* ============================================================
   50. CONTENT CONTAINMENT
   ============================================================ */

/**
 * Helps isolate large sections and improve browser rendering.
 */

.z-content-section {

    contain:
        layout paint;

}


/* ============================================================
   51. PRINT FOUNDATION
   ============================================================ */

@media print {

    *,
    *::before,
    *::after {

        color:
            #000000 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        text-shadow:
            none !important;

    }


    a,
    a:visited {

        text-decoration:
            underline;

    }


    a[href]::after {

        content:
            " (" attr(href) ")";

    }


    a[href^="#"]::after,
    a[href^="javascript:"]::after {

        content:
            "";

    }


    abbr[title]::after {

        content:
            " (" attr(title) ")";

    }


    pre {

        white-space:
            pre-wrap !important;

    }


    pre,
    blockquote {

        border:
            1px solid
            #999;

        page-break-inside:
            avoid;

    }


    thead {

        display:
            table-header-group;

    }


    tr,
    img {

        page-break-inside:
            avoid;

    }


    img {

        max-width:
            100% !important;

    }


    p,
    h2,
    h3 {

        orphans:
            3;

        widows:
            3;

    }


    h2,
    h3 {

        page-break-after:
            avoid;

    }

}


/* ============================================================
   52. REDUCED MOTION FOUNDATION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    html {

        scroll-behavior:
            auto;

    }

}


/* ============================================================
   53. DARK MODE SAFETY
   ============================================================
 *
 * ZANCK's official visual identity is currently based on:
 *
 * #1e6dbb
 * #FFFFFF
 * #000000
 *
 * Therefore we do NOT automatically switch the website to
 * browser dark mode here.
 *
 * A deliberate ZANCK dark theme can be added later through
 * variables.css if the brand system requires it.
 *
 * ============================================================
 */


/* ============================================================
   54. FINAL DOCUMENT SAFETY
   ============================================================ */

/**
 * Prevent accidental horizontal overflow from common media.
 */

body {

    overflow-x:
        hidden;

}


/**
 * Prevent very long unbroken strings from breaking the page.
 */

p,
li,
td,
th {

    overflow-wrap:
        break-word;

}


/* ============================================================
   END OF ZANCK BASE STYLES
   ============================================================ */

/* ===== typography.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * TYPOGRAPHY SYSTEM
 * File: /assets/css/typography.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Central typography system for the ZANCK enterprise website.
 *
 * RESPONSIBILITIES
 * ------------------------------------------------------------
 *
 *   - Font families
 *   - Font weights
 *   - Font sizes
 *   - Line heights
 *   - Letter spacing
 *   - Headings
 *   - Body copy
 *   - Labels
 *   - Navigation typography
 *   - Buttons
 *   - Editorial typography
 *   - Data / metric typography
 *   - Code typography
 *   - Accessibility helpers
 *
 * BRAND DIRECTION
 * ------------------------------------------------------------
 *
 * ZANCK should communicate:
 *
 *   Precision
 *   Intelligence
 *   Enterprise confidence
 *   Engineering depth
 *   Modernity
 *   Clarity
 *
 * Typography therefore follows a restrained
 * enterprise-editorial approach rather than
 * an overly decorative startup style.
 *
 * ============================================================
 */


/* ============================================================
   01. FONT IMPORTS
   ============================================================
 *
 * The preferred production strategy is to self-host fonts
 * inside:
 *
 * /assets/fonts/
 *
 * This avoids dependency on third-party font CDNs.
 *
 * The font-family declarations below intentionally provide
 * strong system fallbacks until the ZANCK font files are added.
 *
 * ============================================================ */

:root {

    --font-primary:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-display:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

}


/* ============================================================
   02. FONT WEIGHTS
   ============================================================ */

:root {

    --font-weight-light:
        300;

    --font-weight-regular:
        400;

    --font-weight-medium:
        500;

    --font-weight-semibold:
        600;

    --font-weight-bold:
        700;

    --font-weight-extrabold:
        800;

}


/* ============================================================
   03. GLOBAL TYPOGRAPHY
   ============================================================ */

html {

    font-family:
        var(--font-primary);

    font-size:
        16px;

    font-weight:
        var(--font-weight-regular);

    line-height:
        1.5;

}


body {

    font-family:
        var(--font-primary);

    font-weight:
        var(--font-weight-regular);

    line-height:
        1.5;

}


/* ============================================================
   04. BODY COPY
   ============================================================ */

body {

    font-size:
        1rem;

}


.z-body {

    font-size:
        1rem;

    line-height:
        1.7;

    font-weight:
        var(--font-weight-regular);

}


.z-body-large {

    font-size:
        1.125rem;

    line-height:
        1.75;

}


.z-body-small {

    font-size:
        0.875rem;

    line-height:
        1.6;

}


/* ============================================================
   05. DISPLAY TYPOGRAPHY
   ============================================================ */

.z-display-1 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            4rem,
            7vw,
            7.5rem
        );

    line-height:
        0.98;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.055em;

}


.z-display-2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.25rem,
            5.5vw,
            6rem
        );

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.045em;

}


.z-display-3 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.75rem,
            4.5vw,
            4.75rem
        );

    line-height:
        1.02;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.04em;

}


/* ============================================================
   06. HEADINGS
   ============================================================ */

h1,
.z-h1 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            5vw,
            5rem
        );

    line-height:
        1.02;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.045em;

}


h2,
.z-h2 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    line-height:
        1.08;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.035em;

}


h3,
.z-h3 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2rem,
            3vw,
            3rem
        );

    line-height:
        1.1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.025em;

}


h4,
.z-h4 {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2rem
        );

    line-height:
        1.2;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.02em;

}


h5,
.z-h5 {

    font-family:
        var(--font-display);

    font-size:
        1.25rem;

    line-height:
        1.3;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.01em;

}


h6,
.z-h6 {

    font-family:
        var(--font-display);

    font-size:
        1rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0;

}


/* ============================================================
   07. HERO TYPOGRAPHY
   ============================================================ */

.z-hero-eyebrow {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.z-hero-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3.25rem,
            6.5vw,
            7rem
        );

    line-height:
        0.98;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.055em;

}


.z-hero-description {

    max-width:
        720px;

    font-size:
        clamp(
            1.05rem,
            1.4vw,
            1.3rem
        );

    line-height:
        1.65;

    font-weight:
        var(--font-weight-regular);

}


/* ============================================================
   08. PAGE HERO TYPOGRAPHY
   ============================================================ */

.z-page-hero-eyebrow {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.z-page-hero-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            5.5vw,
            6rem
        );

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.05em;

}


.z-page-hero-description {

    max-width:
        760px;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.25rem
        );

    line-height:
        1.7;

}


/* ============================================================
   09. SECTION TYPOGRAPHY
   ============================================================ */

.z-section-eyebrow {

    margin-bottom:
        1rem;

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.z-section-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.25rem
        );

    line-height:
        1.05;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.04em;

}


.z-section-description {

    max-width:
        760px;

    font-size:
        1.125rem;

    line-height:
        1.75;

}


/* ============================================================
   10. INTRODUCTION TYPOGRAPHY
   ============================================================ */

.z-intro-title {

    font-size:
        clamp(
            2rem,
            3vw,
            3.25rem
        );

    line-height:
        1.1;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        -0.025em;

}


.z-intro-text {

    font-size:
        1.125rem;

    line-height:
        1.8;

}


/* ============================================================
   11. LABELS
   ============================================================ */

.z-label {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.z-label-small {

    font-size:
        0.6875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


/* ============================================================
   12. NAVIGATION TYPOGRAPHY
   ============================================================ */

.z-nav-link {

    font-size:
        0.875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        -0.005em;

}


.z-nav-link-primary {

    font-size:
        0.875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

}


.z-nav-dropdown-title {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.z-nav-dropdown-link {

    font-size:
        0.95rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

}


.z-nav-dropdown-description {

    font-size:
        0.8rem;

    line-height:
        1.5;

}


/* ============================================================
   13. BUTTON TYPOGRAPHY
   ============================================================ */

.z-button {

    font-family:
        var(--font-primary);

    font-size:
        0.875rem;

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0;

}


.z-button-large {

    font-size:
        0.9375rem;

}


.z-button-small {

    font-size:
        0.8125rem;

}


/* ============================================================
   14. SERVICE TYPOGRAPHY
   ============================================================ */

.z-service-number {

    font-family:
        var(--font-mono);

    font-size:
        0.75rem;

    line-height:
        1;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.05em;

}


.z-service-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.5vw,
            2.75rem
        );

    line-height:
        1.08;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.025em;

}


.z-service-description {

    font-size:
        1rem;

    line-height:
        1.7;

}


.z-service-capability-title {

    font-size:
        1.125rem;

    line-height:
        1.3;

    font-weight:
        var(--font-weight-semibold);

}


.z-service-capability-description {

    font-size:
        0.9375rem;

    line-height:
        1.65;

}


/* ============================================================
   15. INDUSTRY TYPOGRAPHY
   ============================================================ */

.z-industry-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.5vw,
            2.75rem
        );

    line-height:
        1.1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.025em;

}


.z-industry-description {

    font-size:
        1rem;

    line-height:
        1.7;

}


.z-industry-label {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


/* ============================================================
   16. SOLUTION TYPOGRAPHY
   ============================================================ */

.z-solution-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.75rem,
            2.5vw,
            2.75rem
        );

    line-height:
        1.1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.025em;

}


.z-solution-description {

    font-size:
        1rem;

    line-height:
        1.7;

}


/* ============================================================
   17. INSIGHTS TYPOGRAPHY
   ============================================================ */

.z-insight-category {

    font-size:
        0.6875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.z-insight-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2.25rem
        );

    line-height:
        1.15;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.02em;

}


.z-insight-excerpt {

    font-size:
        0.9375rem;

    line-height:
        1.7;

}


.z-insight-meta {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

}


/* ============================================================
   18. ARTICLE TYPOGRAPHY
   ============================================================ */

.z-article {

    font-size:
        1.0625rem;

    line-height:
        1.85;

}


.z-article p {

    margin-bottom:
        1.5rem;

}


.z-article h2 {

    margin-top:
        3.5rem;

    margin-bottom:
        1.25rem;

}


.z-article h3 {

    margin-top:
        2.5rem;

    margin-bottom:
        1rem;

}


.z-article ul,
.z-article ol {

    margin-bottom:
        1.5rem;

    padding-left:
        1.5rem;

    list-style:
        revert;

}


.z-article li {

    margin-bottom:
        0.6rem;

}


.z-article blockquote {

    margin:
        2.5rem 0;

    padding:
        1.5rem 2rem;

    font-size:
        1.25rem;

    line-height:
        1.6;

    font-weight:
        var(--font-weight-medium);

}


/* ============================================================
   19. METRIC TYPOGRAPHY
   ============================================================ */

.z-metric-value {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.5rem
        );

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.045em;

}


.z-metric-label {

    margin-top:
        0.5rem;

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


/* ============================================================
   20. DATA TYPOGRAPHY
   ============================================================ */

.z-data-value {

    font-family:
        var(--font-mono);

    font-size:
        1rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

}


.z-data-label {

    font-size:
        0.6875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* ============================================================
   21. DASHBOARD TYPOGRAPHY
   ============================================================ */

.z-dashboard-value {

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2.25rem
        );

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.02em;

}


.z-dashboard-label {

    font-size:
        0.6875rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* ============================================================
   22. PROCESS TYPOGRAPHY
   ============================================================ */

.z-process-number {

    font-family:
        var(--font-mono);

    font-size:
        0.75rem;

    line-height:
        1;

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.05em;

}


.z-process-title {

    font-size:
        1.125rem;

    line-height:
        1.3;

    font-weight:
        var(--font-weight-semibold);

}


.z-process-description {

    font-size:
        0.9375rem;

    line-height:
        1.65;

}


/* ============================================================
   23. TECHNOLOGY TYPOGRAPHY
   ============================================================ */

.z-technology-title {

    font-size:
        1rem;

    line-height:
        1.3;

    font-weight:
        var(--font-weight-semibold);

}


.z-technology-item {

    font-size:
        0.875rem;

    line-height:
        1.5;

    font-weight:
        var(--font-weight-medium);

}


/* ============================================================
   24. CAREERS TYPOGRAPHY
   ============================================================ */

.z-career-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2rem
        );

    line-height:
        1.15;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.02em;

}


.z-career-meta {

    font-size:
        0.8125rem;

    line-height:
        1.5;

    font-weight:
        var(--font-weight-medium);

}


.z-career-description {

    font-size:
        0.9375rem;

    line-height:
        1.7;

}


/* ============================================================
   25. CONTACT TYPOGRAPHY
   ============================================================ */

.z-contact-title {

    font-family:
        var(--font-display);

    font-size:
        clamp(
            2.25rem,
            4vw,
            4rem
        );

    line-height:
        1.05;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        -0.035em;

}


.z-contact-label {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.z-contact-value {

    font-size:
        1rem;

    line-height:
        1.6;

}


/* ============================================================
   26. FORM TYPOGRAPHY
   ============================================================ */

label,
.z-form-label {

    font-size:
        0.8125rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

}


input,
textarea,
select {

    font-family:
        var(--font-primary);

    font-size:
        1rem;

    line-height:
        1.5;

}


input::placeholder,
textarea::placeholder {

    font-weight:
        var(--font-weight-regular);

}


/* ============================================================
   27. FORM HELP / VALIDATION
   ============================================================ */

.z-form-help {

    font-size:
        0.75rem;

    line-height:
        1.5;

}


.z-form-error {

    font-size:
        0.75rem;

    line-height:
        1.5;

    font-weight:
        var(--font-weight-medium);

}


.z-form-success {

    font-size:
        0.875rem;

    line-height:
        1.5;

    font-weight:
        var(--font-weight-medium);

}


/* ============================================================
   28. FOOTER TYPOGRAPHY
   ============================================================ */

.z-footer-heading {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.z-footer-link {

    font-size:
        0.875rem;

    line-height:
        1.6;

}


.z-footer-description {

    font-size:
        0.875rem;

    line-height:
        1.7;

}


.z-footer-legal {

    font-size:
        0.75rem;

    line-height:
        1.5;

}


/* ============================================================
   29. BREADCRUMBS
   ============================================================ */

.z-breadcrumb {

    font-size:
        0.75rem;

    line-height:
        1.4;

    font-weight:
        var(--font-weight-medium);

}


.z-breadcrumb-current {

    font-weight:
        var(--font-weight-semibold);

}


/* ============================================================
   30. PAGINATION
   ============================================================ */

.z-pagination-link {

    font-size:
        0.8125rem;

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

}


/* ============================================================
   31. STATUS / BADGES
   ============================================================ */

.z-badge {

    font-size:
        0.6875rem;

    line-height:
        1;

    font-weight:
        var(--font-weight-semibold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}


/* ============================================================
   32. MONOSPACE / ENGINEERING
   ============================================================ */

.z-mono {

    font-family:
        var(--font-mono);

}


.z-code {

    font-family:
        var(--font-mono);

    font-size:
        0.875em;

    line-height:
        1.6;

}


.z-code-block {

    font-family:
        var(--font-mono);

    font-size:
        0.8125rem;

    line-height:
        1.7;

}


/* ============================================================
   33. UPPERCASE UTILITY
   ============================================================ */

.z-uppercase {

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


/* ============================================================
   34. TEXT ALIGNMENT
   ============================================================ */

.z-text-left {

    text-align:
        left;

}


.z-text-center {

    text-align:
        center;

}


.z-text-right {

    text-align:
        right;

}


/* ============================================================
   35. TEXT WIDTH
   ============================================================ */

.z-text-narrow {

    max-width:
        520px;

}


.z-text-medium {

    max-width:
        720px;

}


.z-text-wide {

    max-width:
        900px;

}


/* ============================================================
   36. TEXT BALANCING
   ============================================================ */

.z-text-balance {

    text-wrap:
        balance;

}


.z-text-pretty {

    text-wrap:
        pretty;

}


/* ============================================================
   37. WEIGHT UTILITIES
   ============================================================ */

.z-font-light {

    font-weight:
        var(--font-weight-light);

}


.z-font-regular {

    font-weight:
        var(--font-weight-regular);

}


.z-font-medium {

    font-weight:
        var(--font-weight-medium);

}


.z-font-semibold {

    font-weight:
        var(--font-weight-semibold);

}


.z-font-bold {

    font-weight:
        var(--font-weight-bold);

}


.z-font-extrabold {

    font-weight:
        var(--font-weight-extrabold);

}


/* ============================================================
   38. SCREEN-READER TEXT
   ============================================================ */

.z-sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;

}


/* ============================================================
   39. RESPONSIVE TYPOGRAPHY SAFETY
   ============================================================ */

@media (
    max-width: 640px
) {

    .z-body-large {

        font-size:
            1rem;

        line-height:
            1.7;

    }


    .z-section-description {

        font-size:
            1rem;

        line-height:
            1.7;

    }


    .z-article {

        font-size:
            1rem;

        line-height:
            1.8;

    }

}


/* ============================================================
   40. PRINT TYPOGRAPHY
   ============================================================ */

@media print {

    body {

        font-size:
            11pt;

    }


    h1,
    .z-h1 {

        font-size:
            28pt;

    }


    h2,
    .z-h2 {

        font-size:
            22pt;

    }


    h3,
    .z-h3 {

        font-size:
            18pt;

    }


    h4,
    .z-h4 {

        font-size:
            14pt;

    }


    .z-display-1,
    .z-display-2,
    .z-display-3 {

        font-size:
            32pt;

    }

}


/* ============================================================
   END OF ZANCK TYPOGRAPHY SYSTEM
   ============================================================
 */

/* ===== layout.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * Global Layout System
 * File: /assets/css/layout.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Structural layout system for the ZANCK enterprise website.
 *
 * RESPONSIBILITIES
 *
 * - Page containers
 * - Global sections
 * - Content widths
 * - CSS Grid systems
 * - Flex layouts
 * - Hero layouts
 * - Service layouts
 * - Industry layouts
 * - Solution layouts
 * - Insight layouts
 * - Content/detail layouts
 * - Contact layouts
 * - Footer layouts
 * - Structural spacing
 * - Responsive structural behavior
 *
 * NOT RESPONSIBLE FOR
 *
 * - Global reset
 * - Typography foundation
 * - Colors/tokens
 * - Component styling
 * - Animations
 *
 * Those responsibilities belong to:
 *
 * /assets/css/base.css
 * /assets/css/components.css
 * /assets/css/animations.css
 *
 * ============================================================
 */


/* ============================================================
   01. PAGE FOUNDATION
   ============================================================ */

.z-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

}


.z-page-main {

    position:
        relative;

    width:
        100%;

}


/**
 * Prevent accidental horizontal overflow.
 */

.z-site {

    width:
        100%;

    overflow-x:
        clip;

}


/* ============================================================
   02. GLOBAL CONTAINER
   ============================================================ */

.z-container {

    width:
        min(
            100% - 3rem,
            1280px
        );

    margin-right:
        auto;

    margin-left:
        auto;

}


/**
 * Narrow container for editorial/detail content.
 */

.z-container-narrow {

    width:
        min(
            100% - 3rem,
            900px
        );

    margin-right:
        auto;

    margin-left:
        auto;

}


/**
 * Wide container for enterprise dashboards,
 * service matrices and large visual sections.
 */

.z-container-wide {

    width:
        min(
            100% - 3rem,
            1440px
        );

    margin-right:
        auto;

    margin-left:
        auto;

}


/**
 * Full-width container.
 */

.z-container-fluid {

    width:
        100%;

    margin-right:
        auto;

    margin-left:
        auto;

}


/* ============================================================
   03. SECTION FOUNDATION
   ============================================================ */

.z-section {

    position:
        relative;

    width:
        100%;

    padding-top:
        6rem;

    padding-bottom:
        6rem;

}


/**
 * Smaller section.
 */

.z-section-sm {

    padding-top:
        4rem;

    padding-bottom:
        4rem;

}


/**
 * Large section.
 */

.z-section-lg {

    padding-top:
        8rem;

    padding-bottom:
        8rem;

}


/**
 * Section without top spacing.
 */

.z-section-no-top {

    padding-top:
        0;

}


/**
 * Section without bottom spacing.
 */

.z-section-no-bottom {

    padding-bottom:
        0;

}


/* ============================================================
   04. SECTION HEADER LAYOUT
   ============================================================ */

.z-section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        3rem;

    margin-bottom:
        3rem;

}


.z-section-header-content {

    max-width:
        800px;

}


.z-section-header-action {

    flex:
        0 0 auto;

}


/**
 * Centered section header.
 */

.z-section-header-center {

    display:
        block;

    margin-right:
        auto;

    margin-left:
        auto;

    text-align:
        center;

}


.z-section-header-center
.z-section-header-content {

    margin-right:
        auto;

    margin-left:
        auto;

}


/* ============================================================
   05. STANDARD GRID
   ============================================================ */

.z-grid {

    display:
        grid;

    gap:
        1.5rem;

}


/**
 * Two-column grid.
 */

.z-grid-2 {

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

}


/**
 * Three-column grid.
 */

.z-grid-3 {

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

}


/**
 * Four-column grid.
 */

.z-grid-4 {

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

}


/**
 * Five-column grid.
 */

.z-grid-5 {

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

}


/**
 * Six-column grid.
 */

.z-grid-6 {

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

}


/* ============================================================
   06. AUTO GRID
   ============================================================ */

.z-grid-auto {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap:
        1.5rem;

}


.z-grid-auto-sm {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                200px,
                1fr
            )
        );

    gap:
        1rem;

}


.z-grid-auto-lg {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                320px,
                1fr
            )
        );

    gap:
        2rem;

}


/* ============================================================
   07. GRID GAP SYSTEM
   ============================================================ */

.z-gap-xs {

    gap:
        0.5rem;

}


.z-gap-sm {

    gap:
        0.75rem;

}


.z-gap-md {

    gap:
        1.5rem;

}


.z-gap-lg {

    gap:
        2.5rem;

}


.z-gap-xl {

    gap:
        4rem;

}


.z-gap-2xl {

    gap:
        6rem;

}


/* ============================================================
   08. TWO-COLUMN CONTENT LAYOUT
   ============================================================ */

.z-split {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            0,
            1fr
        );

    gap:
        4rem;

}


.z-split-wide {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.25fr
        )
        minmax(
            0,
            0.75fr
        );

    gap:
        4rem;

}


.z-split-reverse {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.75fr
        )
        minmax(
            0,
            1.25fr
        );

    gap:
        4rem;

}


/* ============================================================
   09. CONTENT + SIDEBAR
   ============================================================ */

.z-content-sidebar {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        320px;

    align-items:
        start;

    gap:
        4rem;

}


.z-sidebar-content {

    min-width:
        0;

}


.z-sidebar {

    position:
        sticky;

    top:
        110px;

}


/* ============================================================
   10. HERO FOUNDATION
   ============================================================ */

.z-hero {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        680px;

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-hero-inner {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

}


/**
 * Standard two-column hero.
 */

.z-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            0,
            0.95fr
        );

    align-items:
        center;

    gap:
        4rem;

}


/**
 * Hero content.
 */

.z-hero-content {

    max-width:
        760px;

}


/**
 * Hero visual.
 */

.z-hero-visual {

    position:
        relative;

    min-width:
        0;

}


/* ============================================================
   11. HERO LARGE
   ============================================================ */

.z-hero-lg {

    min-height:
        780px;

    padding-top:
        8rem;

    padding-bottom:
        8rem;

}


/* ============================================================
   12. HERO COMPACT
   ============================================================ */

.z-hero-sm {

    min-height:
        480px;

    padding-top:
        5rem;

    padding-bottom:
        5rem;

}


/* ============================================================
   13. HERO FULLSCREEN
   ============================================================ */

.z-hero-full {

    min-height:
        calc(
            100vh
            -
            80px
        );

}


/* ============================================================
   14. HERO BACKGROUND LAYERS
   ============================================================ */

.z-hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

}


.z-hero-background img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* ============================================================
   15. HERO OVERLAY
   ============================================================ */

.z-hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

}


/* ============================================================
   16. HERO ACTIONS
   ============================================================ */

.z-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    margin-top:
        2rem;

}


/* ============================================================
   17. HERO STATS
   ============================================================ */

.z-hero-stats {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2rem;

    margin-top:
        3rem;

}


.z-hero-stat {

    min-width:
        0;

}


/* ============================================================
   18. PAGE HERO
   ============================================================ */

.z-page-hero {

    position:
        relative;

    padding-top:
        7rem;

    padding-bottom:
        6rem;

}


.z-page-hero-inner {

    max-width:
        980px;

}


.z-page-hero-content {

    max-width:
        800px;

}


/* ============================================================
   19. PAGE HERO WITH BREADCRUMBS
   ============================================================ */

.z-page-hero-breadcrumbs {

    margin-bottom:
        2rem;

}


/* ============================================================
   20. SERVICE OVERVIEW LAYOUT
   ============================================================ */

.z-services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/**
 * Six service architecture.
 */

.z-services-grid-six {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/* ============================================================
   21. SERVICE DETAIL LAYOUT
   ============================================================ */

.z-service-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.85fr
        )
        minmax(
            0,
            1.15fr
        );

    align-items:
        start;

    gap:
        5rem;

}


.z-service-intro {

    position:
        sticky;

    top:
        120px;

}


.z-service-content {

    min-width:
        0;

}


/* ============================================================
   22. SERVICE CAPABILITIES GRID
   ============================================================ */

.z-capabilities-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

    background:
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-capability-item {

    min-width:
        0;

    padding:
        2rem;

    background:
        #FFFFFF;

}


/* ============================================================
   23. SERVICE PROCESS
   ============================================================ */

.z-process-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        0;

}


.z-process-step {

    position:
        relative;

    min-width:
        0;

    padding:
        2rem;

}


.z-process-step:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        32px;

    right:
        0;

    width:
        50px;

    height:
        1px;

    transform:
        translateX(
            50%
        );

}


/* ============================================================
   24. INDUSTRY GRID
   ============================================================ */

.z-industries-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/**
 * Seven-industry layout can naturally
 * wrap using this structure.
 */

.z-industries-grid-seven {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/* ============================================================
   25. INDUSTRY DETAIL LAYOUT
   ============================================================ */

.z-industry-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            0,
            1fr
        );

    gap:
        4rem;

    align-items:
        center;

}


/* ============================================================
   26. SOLUTIONS GRID
   ============================================================ */

.z-solutions-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/* ============================================================
   27. SOLUTION DETAIL
   ============================================================ */

.z-solution-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        4rem;

    align-items:
        start;

}


/* ============================================================
   28. INSIGHTS GRID
   ============================================================ */

.z-insights-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.5rem;

}


/* ============================================================
   29. FEATURED INSIGHT
   ============================================================ */

.z-featured-insight {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.25fr
        )
        minmax(
            0,
            0.75fr
        );

    gap:
        0;

}


.z-featured-insight-media {

    min-height:
        440px;

}


.z-featured-insight-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        3rem;

}


/* ============================================================
   30. INSIGHT ARTICLE LAYOUT
   ============================================================ */

.z-article-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        280px;

    gap:
        4rem;

    align-items:
        start;

}


.z-article {

    min-width:
        0;

}


.z-article-sidebar {

    position:
        sticky;

    top:
        120px;

}


/* ============================================================
   31. ARTICLE HEADER
   ============================================================ */

.z-article-header {

    max-width:
        900px;

    margin-bottom:
        3rem;

}


.z-article-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    margin-bottom:
        1rem;

}


/* ============================================================
   32. ARTICLE CONTENT
   ============================================================ */

.z-article-content {

    max-width:
        820px;

}


.z-article-content > * {

    max-width:
        100%;

}


.z-article-content > img,
.z-article-content > figure {

    width:
        100%;

}


/* ============================================================
   33. COMPANY / ABOUT LAYOUT
   ============================================================ */

.z-company-intro {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            0,
            1fr
        );

    gap:
        5rem;

    align-items:
        center;

}


/* ============================================================
   34. APPROACH / PRINCIPLES GRID
   ============================================================ */

.z-principles-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        0;

}


.z-principle {

    padding:
        2.5rem;

}


.z-principle:not(:last-child) {

    border-right:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


/* ============================================================
   35. LEADERSHIP GRID
   ============================================================ */

.z-leadership-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2rem;

}


/* ============================================================
   36. CAREERS LAYOUT
   ============================================================ */

.z-careers-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        5rem;

    align-items:
        start;

}


.z-careers-intro {

    position:
        sticky;

    top:
        120px;

}


/* ============================================================
   37. CONTACT PAGE
   ============================================================ */

.z-contact-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        5rem;

    align-items:
        start;

}


.z-contact-information {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2rem;

}


.z-contact-form {

    min-width:
        0;

}


/* ============================================================
   38. CONTACT INFORMATION GRID
   ============================================================ */

.z-contact-info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2rem;

}


/* ============================================================
   39. TECHNOLOGY GRID
   ============================================================ */

.z-technology-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1rem;

}


/* ============================================================
   40. TECHNOLOGY CATEGORY
   ============================================================ */

.z-technology-category {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1rem;

}


/* ============================================================
   41. METRICS GRID
   ============================================================ */

.z-metrics-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2rem;

}


/* ============================================================
   42. LOGO / CLIENT GRID
   ============================================================ */

.z-logo-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

    background:
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-logo-grid-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        120px;

    padding:
        1.5rem;

    background:
        #FFFFFF;

}


/* ============================================================
   43. FULL BLEED SECTION
   ============================================================ */

.z-full-bleed {

    width:
        100vw;

    margin-left:
        calc(
            50%
            -
            50vw
        );

}


/* ============================================================
   44. OVERFLOW LAYOUT
   ============================================================ */

.z-overflow-hidden {

    overflow:
        hidden;

}


.z-overflow-visible {

    overflow:
        visible;

}


/* ============================================================
   45. FLEX UTILITIES
   ============================================================ */

.z-flex {

    display:
        flex;

}


.z-flex-row {

    flex-direction:
        row;

}


.z-flex-column {

    flex-direction:
        column;

}


.z-flex-wrap {

    flex-wrap:
        wrap;

}


.z-flex-center {

    align-items:
        center;

    justify-content:
        center;

}


.z-flex-between {

    align-items:
        center;

    justify-content:
        space-between;

}


.z-flex-start {

    align-items:
        flex-start;

    justify-content:
        flex-start;

}


.z-flex-end {

    align-items:
        flex-end;

    justify-content:
        flex-end;

}


/* ============================================================
   46. ALIGNMENT
   ============================================================ */

.z-align-start {

    align-items:
        flex-start;

}


.z-align-center {

    align-items:
        center;

}


.z-align-end {

    align-items:
        flex-end;

}


.z-justify-start {

    justify-content:
        flex-start;

}


.z-justify-center {

    justify-content:
        center;

}


.z-justify-between {

    justify-content:
        space-between;

}


.z-justify-end {

    justify-content:
        flex-end;

}


/* ============================================================
   47. WIDTH UTILITIES
   ============================================================ */

.z-w-full {

    width:
        100%;

}


.z-w-auto {

    width:
        auto;

}


.z-max-600 {

    max-width:
        600px;

}


.z-max-700 {

    max-width:
        700px;

}


.z-max-800 {

    max-width:
        800px;

}


.z-max-900 {

    max-width:
        900px;

}


.z-max-1000 {

    max-width:
        1000px;

}


.z-max-1200 {

    max-width:
        1200px;

}


/* ============================================================
   48. SPACING UTILITIES
   ============================================================ */

.z-mt-0 {

    margin-top:
        0;

}


.z-mt-1 {

    margin-top:
        0.5rem;

}


.z-mt-2 {

    margin-top:
        1rem;

}


.z-mt-3 {

    margin-top:
        1.5rem;

}


.z-mt-4 {

    margin-top:
        2rem;

}


.z-mt-5 {

    margin-top:
        3rem;

}


.z-mt-6 {

    margin-top:
        4rem;

}


.z-mb-0 {

    margin-bottom:
        0;

}


.z-mb-1 {

    margin-bottom:
        0.5rem;

}


.z-mb-2 {

    margin-bottom:
        1rem;

}


.z-mb-3 {

    margin-bottom:
        1.5rem;

}


.z-mb-4 {

    margin-bottom:
        2rem;

}


.z-mb-5 {

    margin-bottom:
        3rem;

}


.z-mb-6 {

    margin-bottom:
        4rem;

}


/* ============================================================
   49. VERTICAL STACK
   ============================================================ */

.z-stack {

    display:
        flex;

    flex-direction:
        column;

}


.z-stack-xs {

    gap:
        0.5rem;

}


.z-stack-sm {

    gap:
        0.75rem;

}


.z-stack-md {

    gap:
        1.5rem;

}


.z-stack-lg {

    gap:
        2.5rem;

}


.z-stack-xl {

    gap:
        4rem;

}


/* ============================================================
   50. HORIZONTAL STACK
   ============================================================ */

.z-cluster {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

}


.z-cluster-sm {

    gap:
        0.5rem;

}


.z-cluster-md {

    gap:
        1rem;

}


.z-cluster-lg {

    gap:
        1.5rem;

}


/* ============================================================
   51. ASPECT RATIO LAYOUT
   ============================================================ */

.z-aspect-16-9 {

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

}


.z-aspect-4-3 {

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

}


.z-aspect-1-1 {

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

}


.z-aspect-4-5 {

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

}


/* ============================================================
   52. MEDIA OBJECT
   ============================================================ */

.z-media {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        1rem;

}


.z-media-content {

    min-width:
        0;

}


.z-media-image {

    flex:
        0 0 auto;

}


/* ============================================================
   53. DESKTOP / MOBILE VISIBILITY
   ============================================================ */

.z-desktop-only {

    display:
        block;

}


.z-mobile-only {

    display:
        none;

}


/* ============================================================
   54. RESPONSIVE — 1200PX
   ============================================================ */

@media (
    max-width: 1200px
) {

    .z-container,
    .z-container-wide {

        width:
            min(
                100% - 2.5rem,
                1180px
            );

    }


    .z-hero-grid {

        gap:
            3rem;

    }


    .z-service-layout {

        gap:
            3rem;

    }


    .z-contact-layout {

        gap:
            3rem;

    }


    .z-careers-layout {

        gap:
            3rem;

    }


    .z-company-intro {

        gap:
            3rem;

    }

}


/* ============================================================
   55. RESPONSIVE — 1024PX
   ============================================================ */

@media (
    max-width: 1024px
) {

    .z-section {

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-section-lg {

        padding-top:
            6rem;

        padding-bottom:
            6rem;

    }


    .z-hero {

        min-height:
            600px;

        padding-top:
            6rem;

        padding-bottom:
            6rem;

    }


    .z-hero-lg {

        min-height:
            680px;

        padding-top:
            7rem;

        padding-bottom:
            7rem;

    }


    .z-grid-4 {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-grid-5 {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-grid-6 {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-services-grid,
    .z-services-grid-six {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-industries-grid,
    .z-industries-grid-seven {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-technology-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-logo-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-metrics-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-leadership-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-principles-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-solutions-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-insights-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-process-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-process-step:not(:last-child)::after {

        display:
            none;

    }

}


/* ============================================================
   56. RESPONSIVE — 900PX
   ============================================================ */

@media (
    max-width: 900px
) {

    .z-container,
    .z-container-wide,
    .z-container-narrow {

        width:
            min(
                100% - 2rem,
                760px
            );

    }


    .z-section {

        padding-top:
            4.5rem;

        padding-bottom:
            4.5rem;

    }


    .z-section-sm {

        padding-top:
            3rem;

        padding-bottom:
            3rem;

    }


    .z-section-lg {

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.5rem;

        margin-bottom:
            2.5rem;

    }


    .z-hero {

        min-height:
            auto;

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-hero-content {

        max-width:
            760px;

    }


    .z-hero-visual {

        max-width:
            760px;

    }


    .z-hero-full {

        min-height:
            auto;

    }


    .z-split,
    .z-split-wide,
    .z-split-reverse {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-service-layout,
    .z-solution-layout,
    .z-careers-layout,
    .z-contact-layout {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-service-intro,
    .z-careers-intro {

        position:
            static;

    }


    .z-content-sidebar {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-sidebar {

        position:
            static;

    }


    .z-article-layout {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-article-sidebar {

        position:
            static;

    }


    .z-company-intro {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-industry-layout {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-featured-insight {

        grid-template-columns:
            1fr;

    }


    .z-featured-insight-media {

        min-height:
            320px;

    }


    .z-featured-insight-content {

        padding:
            2rem;

    }


    .z-principles-grid {

        grid-template-columns:
            1fr;

    }


    .z-principle {

        padding:
            2rem 0;

    }


    .z-principle:not(:last-child) {

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                0,
                0,
                0,
                0.1
            );

    }


    .z-contact-info-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .z-desktop-only {

        display:
            none;

    }


    .z-mobile-only {

        display:
            block;

    }

}


/* ============================================================
   57. RESPONSIVE — 768PX
   ============================================================ */

@media (
    max-width: 768px
) {

    .z-grid-3,
    .z-grid-4,
    .z-grid-5,
    .z-grid-6 {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-services-grid,
    .z-services-grid-six {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-industries-grid,
    .z-industries-grid-seven {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-solutions-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .z-insights-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .z-technology-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-logo-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-hero-stats {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            1.25rem;

    }


    .z-capabilities-grid {

        grid-template-columns:
            1fr;

    }


    .z-process-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


/* ============================================================
   58. RESPONSIVE — 640PX
   ============================================================ */

@media (
    max-width: 640px
) {

    .z-container,
    .z-container-wide,
    .z-container-narrow {

        width:
            calc(
                100%
                -
                2rem
            );

    }


    .z-section {

        padding-top:
            3.5rem;

        padding-bottom:
            3.5rem;

    }


    .z-section-sm {

        padding-top:
            2.5rem;

        padding-bottom:
            2.5rem;

    }


    .z-section-lg {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    .z-page-hero {

        padding-top:
            4rem;

        padding-bottom:
            3.5rem;

    }


    .z-hero {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    .z-hero-lg {

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-grid,
    .z-grid-2,
    .z-grid-3,
    .z-grid-4,
    .z-grid-5,
    .z-grid-6 {

        grid-template-columns:
            1fr;

    }


    .z-services-grid,
    .z-services-grid-six {

        grid-template-columns:
            1fr;

    }


    .z-industries-grid,
    .z-industries-grid-seven {

        grid-template-columns:
            1fr;

    }


    .z-solutions-grid {

        grid-template-columns:
            1fr;

    }


    .z-insights-grid {

        grid-template-columns:
            1fr;

    }


    .z-technology-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .z-logo-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-metrics-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            1.5rem;

    }


    .z-leadership-grid {

        grid-template-columns:
            1fr;

    }


    .z-contact-info-grid {

        grid-template-columns:
            1fr;

    }


    .z-hero-stats {

        grid-template-columns:
            1fr;

        gap:
            1.5rem;

        margin-top:
            2.5rem;

    }


    .z-process-grid {

        grid-template-columns:
            1fr;

    }


    .z-featured-insight-media {

        min-height:
            240px;

    }


    .z-featured-insight-content {

        padding:
            1.5rem;

    }


    .z-capability-item {

        padding:
            1.5rem;

    }


    .z-principle {

        padding:
            1.5rem 0;

    }


    .z-full-bleed {

        width:
            100%;

        margin-left:
            0;

    }

}


/* ============================================================
   59. RESPONSIVE — 480PX
   ============================================================ */

@media (
    max-width: 480px
) {

    .z-container,
    .z-container-wide,
    .z-container-narrow {

        width:
            calc(
                100%
                -
                1.5rem
            );

    }


    .z-section {

        padding-top:
            3rem;

        padding-bottom:
            3rem;

    }


    .z-page-hero {

        padding-top:
            3.5rem;

        padding-bottom:
            3rem;

    }


    .z-hero {

        padding-top:
            3.5rem;

        padding-bottom:
            3.5rem;

    }


    .z-technology-grid {

        grid-template-columns:
            1fr;

    }


    .z-logo-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .z-metrics-grid {

        grid-template-columns:
            1fr;

    }


    .z-featured-insight-content {

        padding:
            1.25rem;

    }


    .z-article-layout {

        gap:
            2rem;

    }

}


/* ============================================================
   END OF ZANCK GLOBAL LAYOUT SYSTEM
   ============================================================
 */

/* ===== components.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * Global Component System
 * File: /assets/css/components.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Reusable UI components used throughout the ZANCK website.
 *
 * COMPONENTS INCLUDED
 *
 * 01. Buttons
 * 02. Text Links
 * 03. Header
 * 04. Navigation
 * 05. Mobile Navigation
 * 06. Breadcrumbs
 * 07. Section Labels
 * 08. Section Headings
 * 09. Cards
 * 10. Service Cards
 * 11. Industry Cards
 * 12. Solution Cards
 * 13. Insight Cards
 * 14. Technology Cards
 * 15. Stat / Metric Cards
 * 16. CTA Components
 * 17. Forms
 * 18. Form Messages
 * 19. Badges
 * 20. Tags
 * 21. Accordions
 * 22. Tabs
 * 23. Pagination
 * 24. Alerts
 * 25. Modal
 * 26. Cookie / Privacy Banner
 * 27. Back To Top
 * 28. Logo
 * 29. Dividers
 * 30. Empty States
 *
 * DOES NOT CONTROL
 *
 * - Global reset
 * - Typography foundation
 * - Page grids
 * - Container widths
 * - Responsive breakpoints
 * - Animation definitions
 *
 * ============================================================
 */


/* ============================================================
   01. BUTTON SYSTEM
   ============================================================ */

.z-btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    min-height:
        48px;

    padding:
        0.75rem 1.35rem;

    border:
        1px solid transparent;

    border-radius:
        0;

    font-family:
        inherit;

    font-size:
        0.9375rem;

    font-weight:
        600;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease;

}


.z-btn-primary {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

    border-color:
        #1e6dbb;

}


.z-btn-primary:hover {

    color:
        #FFFFFF;

    background:
        #000000;

    border-color:
        #000000;

}


.z-btn-secondary {

    color:
        #000000;

    background:
        #FFFFFF;

    border-color:
        #000000;

}


.z-btn-secondary:hover {

    color:
        #FFFFFF;

    background:
        #000000;

    border-color:
        #000000;

}


.z-btn-outline-blue {

    color:
        #1e6dbb;

    background:
        transparent;

    border-color:
        #1e6dbb;

}


.z-btn-outline-blue:hover {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

}


.z-btn-outline-white {

    color:
        #FFFFFF;

    background:
        transparent;

    border-color:
        rgba(
            255,
            255,
            255,
            0.7
        );

}


.z-btn-outline-white:hover {

    color:
        #000000;

    background:
        #FFFFFF;

    border-color:
        #FFFFFF;

}


.z-btn-ghost {

    color:
        #000000;

    background:
        transparent;

    border-color:
        transparent;

}


.z-btn-ghost:hover {

    color:
        #1e6dbb;

}


/**
 * Large CTA button.
 */

.z-btn-lg {

    min-height:
        56px;

    padding:
        0.9rem 1.65rem;

    font-size:
        1rem;

}


/**
 * Small button.
 */

.z-btn-sm {

    min-height:
        40px;

    padding:
        0.6rem 1rem;

    font-size:
        0.875rem;

}


/**
 * Full width button.
 */

.z-btn-block {

    width:
        100%;

}


/**
 * Button icon.
 */

.z-btn-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    flex:
        0 0 20px;

}


/* ============================================================
   02. TEXT LINKS
   ============================================================ */

.z-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        #000000;

    font-weight:
        600;

    text-decoration:
        none;

}


.z-link:hover {

    color:
        #1e6dbb;

}


.z-link-blue {

    color:
        #1e6dbb;

}


.z-link-blue:hover {

    color:
        #000000;

}


/**
 * Arrow used with enterprise CTAs.
 */

.z-link-arrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

}


.z-link-arrow::after {

    content:
        "→";

    font-size:
        1.05em;

}


/* ============================================================
   03. HEADER
   ============================================================ */

.z-header {

    position:
        relative;

    z-index:
        1000;

    width:
        100%;

    background:
        #FFFFFF;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.z-header-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        80px;

}


.z-header-logo {

    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

}


.z-header-logo img {

    width:
        auto;

    height:
        38px;

}


/**
 * Header actions.
 */

.z-header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

}


/* ============================================================
   04. DESKTOP NAVIGATION
   ============================================================ */

.z-nav {

    display:
        flex;

    align-items:
        center;

}


.z-nav-list {

    display:
        flex;

    align-items:
        center;

    gap:
        2rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-nav-item {

    position:
        relative;

}


.z-nav-link {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        80px;

    color:
        #000000;

    font-size:
        0.9rem;

    font-weight:
        600;

    letter-spacing:
        -0.01em;

}


.z-nav-link:hover {

    color:
        #1e6dbb;

}


/**
 * Navigation dropdown indicator.
 */

.z-nav-link.has-dropdown {

    gap:
        0.45rem;

}


.z-nav-link.has-dropdown::after {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    transform:
        rotate(
            45deg
        )
        translateY(
            -2px
        );

}


/* ============================================================
   05. DESKTOP DROPDOWN
   ============================================================ */

.z-dropdown {

    position:
        absolute;

    top:
        calc(
            100%
            - 1px
        );

    left:
        50%;

    min-width:
        260px;

    padding:
        0.75rem;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            0.08
        );

    transform:
        translateX(
            -50%
        );

}


.z-dropdown-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.15rem;

}


.z-dropdown-link {

    display:
        block;

    padding:
        0.7rem 0.8rem;

    color:
        #000000;

    font-size:
        0.9rem;

    line-height:
        1.4;

}


.z-dropdown-link:hover {

    color:
        #1e6dbb;

    background:
        rgba(
            30,
            109,
            187,
            0.06
        );

}


/* ============================================================
   06. MEGA MENU
   ============================================================ */

.z-mega-menu {

    position:
        absolute;

    top:
        calc(
            100%
            - 1px
        );

    left:
        0;

    width:
        100%;

    padding:
        2.5rem 0;

    background:
        #FFFFFF;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.06
        );

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.z-mega-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2.5rem;

}


.z-mega-column {

    min-width:
        0;

}


.z-mega-heading {

    margin-bottom:
        1rem;

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.z-mega-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.15rem;

}


.z-mega-link {

    display:
        block;

    padding:
        0.5rem 0;

    color:
        #000000;

    font-size:
        0.95rem;

}


.z-mega-link:hover {

    color:
        #1e6dbb;

}


.z-mega-description {

    margin-top:
        0.35rem;

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    font-size:
        0.875rem;

    line-height:
        1.6;

}


/* ============================================================
   07. MOBILE NAVIGATION
   ============================================================ */

.z-mobile-nav {

    display:
        none;

}


.z-mobile-nav-inner {

    padding:
        1.5rem 0 2rem;

}


.z-mobile-nav-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

}


.z-mobile-nav-item {

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.z-mobile-nav-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        58px;

    color:
        #000000;

    font-size:
        1rem;

    font-weight:
        600;

}


.z-mobile-nav-link:hover {

    color:
        #1e6dbb;

}


/* ============================================================
   08. MOBILE MENU TOGGLE
   ============================================================ */

.z-menu-toggle {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    background:
        transparent;

    border:
        0;

}


.z-menu-icon {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        5px;

    width:
        22px;

}


.z-menu-icon span {

    display:
        block;

    width:
        100%;

    height:
        1.5px;

    background:
        #000000;

}


/* ============================================================
   09. BREADCRUMBS
   ============================================================ */

.z-breadcrumbs {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );

    font-size:
        0.8125rem;

}


.z-breadcrumb {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.5rem;

}


.z-breadcrumb:not(:last-child)::after {

    content:
        "/";

    color:
        rgba(
            0,
            0,
            0,
            0.3
        );

}


.z-breadcrumb a:hover {

    color:
        #1e6dbb;

}


.z-breadcrumb-current {

    color:
        #000000;

    font-weight:
        600;

}


/* ============================================================
   10. SECTION LABEL
   ============================================================ */

.z-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    margin-bottom:
        1rem;

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    line-height:
        1.4;

    text-transform:
        uppercase;

}


.z-eyebrow::before {

    content:
        "";

    display:
        block;

    width:
        24px;

    height:
        1px;

    background:
        currentColor;

}


/* ============================================================
   11. SECTION HEADING
   ============================================================ */

.z-section-heading {

    max-width:
        850px;

}


.z-section-heading h2 {

    margin-bottom:
        1.25rem;

}


.z-section-heading p {

    max-width:
        720px;

    color:
        rgba(
            0,
            0,
            0,
            0.62
        );

    font-size:
        1.0625rem;

    line-height:
        1.75;

}


.z-section-heading-center {

    margin-right:
        auto;

    margin-left:
        auto;

    text-align:
        center;

}


.z-section-heading-center p {

    margin-right:
        auto;

    margin-left:
        auto;

}


/* ============================================================
   12. CARD FOUNDATION
   ============================================================ */

.z-card {

    position:
        relative;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


/**
 * Card with subtle border and no shadow.
 */

.z-card-minimal {

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


/**
 * Elevated card.
 */

.z-card-elevated {

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            0.06
        );

}


/* ============================================================
   13. SERVICE CARDS
   ============================================================ */

.z-service-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    padding:
        2rem;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-service-card-number {

    margin-bottom:
        2.5rem;

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.z-service-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    margin-bottom:
        1.5rem;

    color:
        #1e6dbb;

    border:
        1px solid
        rgba(
            30,
            109,
            187,
            0.25
        );

}


.z-service-card h3 {

    margin-bottom:
        1rem;

    font-size:
        1.5rem;

}


.z-service-card p {

    margin-bottom:
        1.5rem;

    color:
        rgba(
            0,
            0,
            0,
            0.62
        );

    line-height:
        1.7;

}


.z-service-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        auto;

}


/* ============================================================
   14. SERVICE DETAIL CARD
   ============================================================ */

.z-service-detail {

    padding:
        2rem;

    border-left:
        3px solid
        #1e6dbb;

    background:
        #FFFFFF;

}


.z-service-detail-number {

    margin-bottom:
        1rem;

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.z-service-detail h3 {

    margin-bottom:
        0.75rem;

    font-size:
        1.35rem;

}


.z-service-detail p {

    color:
        rgba(
            0,
            0,
            0,
            0.62
        );

}


/* ============================================================
   15. INDUSTRY CARDS
   ============================================================ */

.z-industry-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        240px;

    padding:
        1.75rem;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-industry-card-icon {

    width:
        42px;

    height:
        42px;

    margin-bottom:
        2.5rem;

    color:
        #1e6dbb;

}


.z-industry-card h3 {

    margin-top:
        auto;

    margin-bottom:
        0.65rem;

    font-size:
        1.25rem;

}


.z-industry-card p {

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    font-size:
        0.9rem;

}


/* ============================================================
   16. SOLUTION CARDS
   ============================================================ */

.z-solution-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        260px;

    padding:
        2rem;

    background:
        #000000;

    color:
        #FFFFFF;

}


.z-solution-card-number {

    margin-bottom:
        2.5rem;

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

}


.z-solution-card h3 {

    margin-bottom:
        0.8rem;

    color:
        #FFFFFF;

    font-size:
        1.4rem;

}


.z-solution-card p {

    margin-top:
        auto;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    line-height:
        1.65;

}


/* ============================================================
   17. INSIGHT CARDS
   ============================================================ */

.z-insight-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-insight-card-image {

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    background:
        #F2F4F6;

}


.z-insight-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.z-insight-card-content {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    padding:
        1.5rem;

}


.z-insight-card-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        0.75rem;

    margin-bottom:
        0.85rem;

    color:
        #1e6dbb;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.z-insight-card h3 {

    margin-bottom:
        0.8rem;

    font-size:
        1.25rem;

}


.z-insight-card-excerpt {

    margin-bottom:
        1.25rem;

    color:
        rgba(
            0,
            0,
            0,
            0.6
        );

    line-height:
        1.65;

}


.z-insight-card-footer {

    margin-top:
        auto;

}


/* ============================================================
   18. TECHNOLOGY CARDS
   ============================================================ */

.z-tech-card {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

    min-height:
        90px;

    padding:
        1rem 1.25rem;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

    background:
        #FFFFFF;

}


.z-tech-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

}


.z-tech-card-name {

    font-size:
        0.95rem;

    font-weight:
        600;

}


/* ============================================================
   19. METRIC / STAT CARDS
   ============================================================ */

.z-stat {

    padding:
        1.5rem 0;

}


.z-stat-value {

    display:
        block;

    margin-bottom:
        0.4rem;

    color:
        #000000;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.04em;

    line-height:
        1;

}


.z-stat-label {

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    font-size:
        0.875rem;

    line-height:
        1.5;

}


/* ============================================================
   20. DARK STAT / METRIC
   ============================================================ */

.z-stat-dark {

    color:
        #FFFFFF;

}


.z-stat-dark .z-stat-value {

    color:
        #FFFFFF;

}


.z-stat-dark .z-stat-label {

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

}


/* ============================================================
   21. CTA BLOCK
   ============================================================ */

.z-cta {

    position:
        relative;

    padding:
        4rem;

    background:
        #000000;

    color:
        #FFFFFF;

}


.z-cta h2 {

    margin-bottom:
        1rem;

    color:
        #FFFFFF;

}


.z-cta p {

    max-width:
        680px;

    margin-bottom:
        1.75rem;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    line-height:
        1.7;

}


.z-cta-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

}


/* ============================================================
   22. BLUE CTA
   ============================================================ */

.z-cta-blue {

    background:
        #1e6dbb;

    color:
        #FFFFFF;

}


.z-cta-blue h2 {

    color:
        #FFFFFF;

}


.z-cta-blue p {

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );

}


/* ============================================================
   23. CTA INLINE
   ============================================================ */

.z-cta-inline {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    padding:
        2rem 0;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-cta-inline h3 {

    margin:
        0;

    font-size:
        1.5rem;

}


/* ============================================================
   24. FORM FOUNDATION
   ============================================================ */

.z-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.25rem;

}


.z-form-row {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1rem;

}


.z-form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.5rem;

}


.z-form-label {

    color:
        #000000;

    font-size:
        0.875rem;

    font-weight:
        600;

}


.z-form-required {

    color:
        #1e6dbb;

}


/* ============================================================
   25. FORM INPUTS
   ============================================================ */

.z-form-input,
.z-form-select,
.z-form-textarea {

    display:
        block;

    width:
        100%;

    padding:
        0.85rem 1rem;

    color:
        #000000;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-radius:
        0;

    font-family:
        inherit;

    font-size:
        0.9375rem;

    line-height:
        1.5;

    outline:
        none;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;

}


.z-form-input:focus,
.z-form-select:focus,
.z-form-textarea:focus {

    border-color:
        #1e6dbb;

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            109,
            187,
            0.1
        );

}


.z-form-textarea {

    min-height:
        160px;

    resize:
        vertical;

}


/* ============================================================
   26. FORM HELP TEXT
   ============================================================ */

.z-form-help {

    color:
        rgba(
            0,
            0,
            0,
            0.5
        );

    font-size:
        0.8rem;

    line-height:
        1.5;

}


/* ============================================================
   27. FORM ERROR
   ============================================================ */

.z-form-field.is-error
.z-form-input,
.z-form-field.is-error
.z-form-select,
.z-form-field.is-error
.z-form-textarea {

    border-color:
        #000000;

}


.z-form-error-message {

    color:
        #000000;

    font-size:
        0.8rem;

    line-height:
        1.5;

}


/* ============================================================
   28. FORM SUCCESS
   ============================================================ */

.z-form-success-message {

    padding:
        1rem;

    color:
        #000000;

    background:
        rgba(
            30,
            109,
            187,
            0.08
        );

    border-left:
        3px solid
        #1e6dbb;

}


/* ============================================================
   29. BADGES
   ============================================================ */

.z-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        0.3rem 0.65rem;

    color:
        #000000;

    background:
        #F3F5F7;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}


.z-badge-blue {

    color:
        #1e6dbb;

    background:
        rgba(
            30,
            109,
            187,
            0.08
        );

    border-color:
        rgba(
            30,
            109,
            187,
            0.15
        );

}


.z-badge-dark {

    color:
        #FFFFFF;

    background:
        #000000;

    border-color:
        #000000;

}


/* ============================================================
   30. TAGS
   ============================================================ */

.z-tag-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

}


.z-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0.4rem 0.7rem;

    color:
        rgba(
            0,
            0,
            0,
            0.65
        );

    background:
        #F5F6F7;

    font-size:
        0.8rem;

}


/* ============================================================
   31. ACCORDION
   ============================================================ */

.z-accordion {

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-accordion:last-child {

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-accordion-trigger {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        72px;

    padding:
        1rem 0;

    color:
        #000000;

    background:
        transparent;

    text-align:
        left;

}


.z-accordion-title {

    font-size:
        1rem;

    font-weight:
        600;

}


.z-accordion-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    color:
        #1e6dbb;

}


.z-accordion-content {

    padding:
        0;

}


.z-accordion-content-inner {

    padding:
        0 0 1.5rem;

    color:
        rgba(
            0,
            0,
            0,
            0.62
        );

    line-height:
        1.7;

}


/* ============================================================
   32. TABS
   ============================================================ */

.z-tabs-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        0.25rem;

    overflow-x:
        auto;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-tab {

    position:
        relative;

    flex:
        0 0 auto;

    padding:
        0.9rem 1rem;

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    background:
        transparent;

    font-size:
        0.875rem;

    font-weight:
        600;

}


.z-tab:hover {

    color:
        #000000;

}


.z-tab.is-active {

    color:
        #1e6dbb;

}


.z-tab.is-active::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        -1px;

    left:
        0;

    height:
        2px;

    background:
        #1e6dbb;

}


.z-tab-panel {

    padding-top:
        1.5rem;

}


/* ============================================================
   33. PAGINATION
   ============================================================ */

.z-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        0.35rem;

}


.z-pagination-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        40px;

    height:
        40px;

    padding:
        0 0.6rem;

    color:
        #000000;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-pagination-link:hover {

    color:
        #1e6dbb;

    border-color:
        #1e6dbb;

}


.z-pagination-link.is-active {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

    border-color:
        #1e6dbb;

}


/* ============================================================
   34. ALERTS
   ============================================================ */

.z-alert {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.75rem;

    padding:
        1rem 1.15rem;

    border-left:
        3px solid
        #000000;

}


.z-alert-info {

    border-color:
        #1e6dbb;

    background:
        rgba(
            30,
            109,
            187,
            0.07
        );

}


.z-alert-content {

    min-width:
        0;

}


.z-alert-title {

    margin-bottom:
        0.25rem;

    font-weight:
        700;

}


.z-alert-message {

    color:
        rgba(
            0,
            0,
            0,
            0.65
        );

    font-size:
        0.9rem;

    line-height:
        1.6;

}


/* ============================================================
   35. MODAL
   ============================================================ */

.z-modal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1.5rem;

    background:
        rgba(
            0,
            0,
            0,
            0.72
        );

}


.z-modal-panel {

    width:
        min(
            100%,
            760px
        );

    max-height:
        calc(
            100vh - 3rem
        );

    overflow-y:
        auto;

    background:
        #FFFFFF;

}


.z-modal-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1.5rem;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-modal-title {

    font-size:
        1.5rem;

}


.z-modal-close {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    color:
        #000000;

    background:
        transparent;

}


.z-modal-close:hover {

    color:
        #1e6dbb;

}


.z-modal-body {

    padding:
        1.5rem;

}


.z-modal-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        0.75rem;

    padding:
        1.25rem 1.5rem;

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


/* ============================================================
   36. COOKIE / PRIVACY BANNER
   ============================================================ */

.z-privacy-banner {

    position:
        fixed;

    right:
        1.5rem;

    bottom:
        1.5rem;

    left:
        1.5rem;

    z-index:
        1500;

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        1.25rem 1.5rem;

    background:
        #FFFFFF;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

    box-shadow:
        0 18px 50px
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-privacy-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1.5rem;

}


.z-privacy-text {

    color:
        rgba(
            0,
            0,
            0,
            0.62
        );

    font-size:
        0.85rem;

    line-height:
        1.6;

}


.z-privacy-actions {

    display:
        flex;

    flex:
        0 0 auto;

    align-items:
        center;

    gap:
        0.5rem;

}


/* ============================================================
   37. BACK TO TOP
   ============================================================ */

.z-back-to-top {

    position:
        fixed;

    right:
        1.5rem;

    bottom:
        1.5rem;

    z-index:
        900;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    color:
        #FFFFFF;

    background:
        #000000;

    border:
        1px solid
        #000000;

}


.z-back-to-top:hover {

    color:
        #FFFFFF;

    background:
        #1e6dbb;

    border-color:
        #1e6dbb;

}


/* ============================================================
   38. LOGO COMPONENT
   ============================================================ */

.z-logo {

    display:
        inline-flex;

    align-items:
        center;

}


.z-logo img {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    height:
        auto;

}


/**
 * Standard ZANCK logo sizes.
 */

.z-logo-header img {

    max-height:
        40px;

}


.z-logo-footer img {

    max-height:
        34px;

}


/* ============================================================
   39. DIVIDER
   ============================================================ */

.z-divider {

    width:
        100%;

    height:
        1px;

    margin:
        0;

    background:
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-divider-blue {

    background:
        #1e6dbb;

}


/* ============================================================
   40. ICON BOX
   ============================================================ */

.z-icon-box {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    color:
        #1e6dbb;

    border:
        1px solid
        rgba(
            30,
            109,
            187,
            0.2
        );

}


.z-icon-box-dark {

    color:
        #FFFFFF;

    background:
        #000000;

    border-color:
        #000000;

}


/* ============================================================
   41. NUMBERED LIST
   ============================================================ */

.z-numbered-list {

    counter-reset:
        zanck-number;

}


.z-numbered-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        52px
        minmax(
            0,
            1fr
        );

    gap:
        1rem;

    padding:
        1.5rem 0;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-numbered-item::before {

    counter-increment:
        zanck-number;

    content:
        counter(
            zanck-number,
            decimal-leading-zero
        );

    color:
        #1e6dbb;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


/* ============================================================
   42. QUOTE
   ============================================================ */

.z-quote {

    padding:
        2rem 0;

    border-top:
        2px solid
        #1e6dbb;

}


.z-quote-text {

    margin-bottom:
        1.25rem;

    color:
        #000000;

    font-size:
        clamp(
            1.35rem,
            2.5vw,
            2rem
        );

    font-weight:
        500;

    line-height:
        1.45;

}


.z-quote-author {

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    font-size:
        0.875rem;

}


/* ============================================================
   43. PROFILE / LEADERSHIP CARD
   ============================================================ */

.z-profile-card {

    display:
        flex;

    flex-direction:
        column;

    background:
        #FFFFFF;

}


.z-profile-image {

    overflow:
        hidden;

    aspect-ratio:
        4 / 5;

    background:
        #F2F4F6;

}


.z-profile-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.z-profile-content {

    padding:
        1.25rem 0;

}


.z-profile-name {

    margin-bottom:
        0.25rem;

    font-size:
        1.2rem;

}


.z-profile-role {

    color:
        #1e6dbb;

    font-size:
        0.8rem;

    font-weight:
        600;

}


/* ============================================================
   44. CAREER CARD
   ============================================================ */

.z-career-card {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        2rem;

    padding:
        1.5rem 0;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.12
        );

}


.z-career-title {

    margin-bottom:
        0.35rem;

    font-size:
        1.1rem;

}


.z-career-meta {

    color:
        rgba(
            0,
            0,
            0,
            0.55
        );

    font-size:
        0.85rem;

}


/* ============================================================
   45. CONTACT DETAIL
   ============================================================ */

.z-contact-detail {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.4rem;

}


.z-contact-label {

    color:
        #1e6dbb;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.z-contact-value {

    color:
        #000000;

    font-size:
        1rem;

}


.z-contact-value:hover {

    color:
        #1e6dbb;

}


/* ============================================================
   46. LOCATION CARD
   ============================================================ */

.z-location-card {

    padding:
        1.5rem;

    background:
        #F5F7F9;

}


.z-location-label {

    margin-bottom:
        0.5rem;

    color:
        #1e6dbb;

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.z-location-name {

    margin-bottom:
        0.5rem;

    font-size:
        1.25rem;

}


.z-location-address {

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

    font-size:
        0.9rem;

    line-height:
        1.6;

}


/* ============================================================
   47. EMPTY STATE
   ============================================================ */

.z-empty-state {

    padding:
        4rem 1.5rem;

    text-align:
        center;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );

}


.z-empty-state-icon {

    margin:
        0 auto 1rem;

}


.z-empty-state h3 {

    margin-bottom:
        0.5rem;

    font-size:
        1.25rem;

}


.z-empty-state p {

    max-width:
        500px;

    margin:
        0 auto;

    color:
        rgba(
            0,
            0,
            0,
            0.58
        );

}


/* ============================================================
   48. LOADING STATE
   ============================================================ */

.z-loading {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.35rem;

}


.z-loading-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #1e6dbb;

}


/* ============================================================
   49. STATUS INDICATOR
   ============================================================ */

.z-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    color:
        rgba(
            0,
            0,
            0,
            0.65
        );

    font-size:
        0.8rem;

}


.z-status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #1e6dbb;

}


/* ============================================================
   50. FOOTER
   ============================================================ */

.z-footer {

    background:
        #000000;

    color:
        #FFFFFF;

}


.z-footer-main {

    padding:
        4rem 0;

}


.z-footer-brand {

    max-width:
        340px;

}


.z-footer-brand p {

    margin-top:
        1rem;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    line-height:
        1.7;

}


.z-footer-heading {

    margin-bottom:
        1rem;

    color:
        #FFFFFF;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.z-footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.55rem;

}


.z-footer-link {

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        0.875rem;

}


.z-footer-link:hover {

    color:
        #FFFFFF;

}


.z-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1.25rem 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.z-footer-copyright {

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-size:
        0.75rem;

}


/* ============================================================
   51. SOCIAL LINKS
   ============================================================ */

.z-social-links {

    display:
        flex;

    align-items:
        center;

    gap:
        0.5rem;

}


.z-social-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

}


.z-social-link:hover {

    color:
        #FFFFFF;

    border-color:
        #FFFFFF;

}


/* ============================================================
   52. RESPONSIVE COMPONENT ADJUSTMENTS
   ============================================================ */

@media (
    max-width: 1100px
) {

    .z-nav-list {

        gap:
            1.25rem;

    }


    .z-nav-link {

        font-size:
            0.85rem;

    }


    .z-mega-grid {

        gap:
            1.5rem;

    }

}


@media (
    max-width: 900px
) {

    .z-nav {

        display:
            none;

    }


    .z-menu-toggle {

        display:
            inline-flex;

    }


    .z-mobile-nav {

        display:
            block;

    }


    .z-header-inner {

        min-height:
            72px;

    }


    .z-header-logo img {

        max-height:
            34px;

    }


    .z-mega-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-form-row {

        grid-template-columns:
            1fr;

    }


    .z-cta {

        padding:
            3rem 2rem;

    }


    .z-cta-inline {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .z-privacy-content {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


@media (
    max-width: 640px
) {

    .z-btn {

        width:
            100%;

    }


    .z-btn-sm {

        width:
            auto;

    }


    .z-btn-ghost {

        width:
            auto;

    }


    .z-cta {

        padding:
            2.5rem 1.25rem;

    }


    .z-cta-actions {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .z-service-card {

        padding:
            1.5rem;

    }


    .z-service-detail {

        padding:
            1.5rem;

    }


    .z-industry-card {

        min-height:
            200px;

    }


    .z-solution-card {

        min-height:
            220px;

        padding:
            1.5rem;

    }


    .z-career-card {

        grid-template-columns:
            1fr;

        gap:
            1rem;

    }


    .z-footer-main {

        padding:
            3rem 0;

    }


    .z-footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .z-privacy-banner {

        right:
            0.75rem;

        bottom:
            0.75rem;

        left:
            0.75rem;

    }


    .z-privacy-actions {

        width:
            100%;

    }


    .z-privacy-actions .z-btn {

        flex:
            1;

    }


    .z-modal-overlay {

        padding:
            0.75rem;

    }


    .z-modal-panel {

        max-height:
            calc(
                100vh - 1.5rem
            );

    }

}


/* ============================================================
   END OF ZANCK COMPONENT SYSTEM
   ============================================================ */

/* ===== navigation.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * Navigation System
 * File: /assets/css/navigation.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Complete responsive navigation system for ZANCK.
 *
 * PRIMARY NAVIGATION
 *
 * HOME
 *
 * WHAT WE DO
 *   Enterprise ERP & Digital Core
 *   Product Engineering & SaaS
 *   Applied AI & Intelligent Automation
 *   Mobile Product Engineering
 *   Cloud DevOps, SecOps & Infrastructure
 *   Mission-Critical Engineering & SLAs
 *
 * INDUSTRIES
 *   Manufacturing
 *   Education
 *   Healthcare
 *   Financial Services
 *   Retail & Commerce
 *   Logistics & Supply Chain
 *   Professional Services
 *
 * SOLUTIONS
 *   Enterprise Modernization
 *   Digital Transformation
 *   AI Transformation
 *   Process Automation
 *   SaaS & Platforms
 *   Cloud Transformation
 *   Digital Operations
 *
 * INSIGHTS
 *   Perspectives
 *   Engineering
 *   AI
 *   Enterprise Technology
 *   Cloud
 *   Transformation
 *
 * COMPANY
 *   About
 *   Our Approach
 *   Leadership
 *   Careers
 *
 * CONTACT
 *   Start a Conversation
 *
 * ============================================================
 */


/* ============================================================
   01. NAVIGATION ROOT
   ============================================================ */

.z-header {

    position:
        relative;

    z-index:
        1000;

    width:
        100%;

}


.z-header--sticky {

    position:
        sticky;

    top:
        0;

}


.z-header--fixed {

    position:
        fixed;

    top:
        0;

    left:
        0;

}


/**
 * Main navigation shell.
 */

.z-nav {

    position:
        relative;

    width:
        100%;

}


/* ============================================================
   02. NAVIGATION INNER CONTAINER
   ============================================================ */

.z-nav-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        min(
            100% - 3rem,
            1280px
        );

    min-height:
        80px;

    margin-right:
        auto;

    margin-left:
        auto;

}


/* ============================================================
   03. BRAND / LOGO
   ============================================================ */

.z-nav-brand {

    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

    min-width:
        0;

    text-decoration:
        none;

}


.z-nav-brand img {

    display:
        block;

    width:
        auto;

    max-width:
        160px;

    height:
        auto;

    max-height:
        42px;

    object-fit:
        contain;

}


.z-nav-brand-mark {

    display:
        block;

    width:
        auto;

    height:
        40px;

}


/**
 * Optional text-based brand fallback.
 */

.z-nav-brand-text {

    display:
        inline-flex;

    align-items:
        baseline;

    gap:
        0.15rem;

    white-space:
        nowrap;

}


/* ============================================================
   04. PRIMARY NAVIGATION
   ============================================================ */

.z-nav-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.15rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-nav-menu > li {

    position:
        relative;

    margin:
        0;

    padding:
        0;

}


/* ============================================================
   05. PRIMARY NAVIGATION LINKS
   ============================================================ */

.z-nav-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.4rem;

    min-height:
        44px;

    padding:
        0.5rem 0.7rem;

    text-decoration:
        none;

    white-space:
        nowrap;

}


/**
 * Navigation underline.
 *
 * Visual treatment is intentionally restrained.
 * Color can be inherited from the site's theme.
 */

.z-nav-link::after {

    content:
        "";

    position:
        absolute;

    right:
        0.7rem;

    bottom:
        0;

    left:
        0.7rem;

    height:
        2px;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 180ms ease;

}


.z-nav-link:hover::after,
.z-nav-link:focus-visible::after,
.z-nav-link.is-active::after,
.z-nav-link[aria-current="page"]::after {

    transform:
        scaleX(1);

}


/* ============================================================
   06. DROPDOWN TOGGLE
   ============================================================ */

.z-nav-dropdown-toggle {

    cursor:
        pointer;

    border:
        0;

    background:
        transparent;

    font:
        inherit;

}


.z-nav-chevron {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-top:
        -3px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg);

    transition:
        transform 180ms ease;

}


.z-nav-item.is-open
.z-nav-chevron {

    transform:
        rotate(
            225deg
        );

}


/* ============================================================
   07. DROPDOWN MENU
   ============================================================ */

.z-nav-dropdown {

    position:
        absolute;

    top:
        calc(
            100%
            +
            0.5rem
        );

    left:
        50%;

    z-index:
        1100;

    width:
        320px;

    padding:
        0.75rem;

    transform:
        translate(
            -50%,
            8px
        );

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease;

}


/**
 * Open dropdown.
 */

.z-nav-item:hover > .z-nav-dropdown,
.z-nav-item:focus-within > .z-nav-dropdown,
.z-nav-item.is-open > .z-nav-dropdown {

    transform:
        translate(
            -50%,
            0
        );

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


/* ============================================================
   08. DROPDOWN LIST
   ============================================================ */

.z-nav-dropdown-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.1rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* ============================================================
   09. DROPDOWN LINK
   ============================================================ */

.z-nav-dropdown-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    min-height:
        48px;

    padding:
        0.7rem 0.85rem;

    text-decoration:
        none;

}


.z-nav-dropdown-link:hover,
.z-nav-dropdown-link:focus-visible {

    text-decoration:
        none;

}


/* ============================================================
   10. LARGE MEGA MENU
   ============================================================ */

.z-nav-mega {

    position:
        absolute;

    top:
        calc(
            100%
            +
            0.5rem
        );

    left:
        50%;

    z-index:
        1100;

    width:
        min(
            1100px,
            calc(
                100vw
                -
                3rem
            )
        );

    padding:
        1.5rem;

    transform:
        translate(
            -50%,
            8px
        );

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease;

}


/**
 * Mega menu open state.
 */

.z-nav-item:hover > .z-nav-mega,
.z-nav-item:focus-within > .z-nav-mega,
.z-nav-item.is-open > .z-nav-mega {

    transform:
        translate(
            -50%,
            0
        );

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


/* ============================================================
   11. MEGA MENU GRID
   ============================================================ */

.z-nav-mega-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        2rem;

}


/**
 * Four-column variation.
 */

.z-nav-mega-grid--four {

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

}


/* ============================================================
   12. MEGA MENU COLUMN
   ============================================================ */

.z-nav-mega-column {

    min-width:
        0;

}


.z-nav-mega-heading {

    margin:
        0 0 0.75rem;

}


.z-nav-mega-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.15rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


/* ============================================================
   13. MEGA MENU LINKS
   ============================================================ */

.z-nav-mega-link {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        0.75rem;

    padding:
        0.7rem;

    text-decoration:
        none;

}


.z-nav-mega-link:hover,
.z-nav-mega-link:focus-visible {

    text-decoration:
        none;

}


/* ============================================================
   14. MEGA MENU ICON
   ============================================================ */

.z-nav-mega-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 36px;

    width:
        36px;

    height:
        36px;

}


.z-nav-mega-content {

    min-width:
        0;

}


.z-nav-mega-title {

    display:
        block;

}


.z-nav-mega-description {

    display:
        block;

    margin-top:
        0.2rem;

}


/* ============================================================
   15. MEGA MENU FEATURE
   ============================================================ */

.z-nav-mega-feature {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-height:
        220px;

    padding:
        1.5rem;

}


.z-nav-mega-feature-content {

    max-width:
        400px;

}


/* ============================================================
   16. NAVIGATION CTA
   ============================================================ */

.z-nav-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        0.75rem;

    flex:
        0 0 auto;

}


.z-nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0.65rem 1rem;

    text-decoration:
        none;

    white-space:
        nowrap;

}


/* ============================================================
   17. CONTACT CTA
   ============================================================ */

.z-nav-contact {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        0.65rem 1rem;

    text-decoration:
        none;

    white-space:
        nowrap;

}


/* ============================================================
   18. MOBILE MENU BUTTON
   ============================================================ */

.z-nav-toggle {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        44px;

    height:
        44px;

    margin:
        0;

    padding:
        0;

    cursor:
        pointer;

    border:
        0;

    background:
        transparent;

}


.z-nav-toggle-box {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    width:
        22px;

    height:
        16px;

}


.z-nav-toggle-line {

    display:
        block;

    width:
        100%;

    height:
        1.5px;

    transform-origin:
        center;

    transition:
        transform 180ms ease,
        opacity 180ms ease;

}


/* ============================================================
   19. MOBILE TOGGLE — OPEN STATE
   ============================================================ */

.z-nav-toggle.is-active
.z-nav-toggle-line:nth-child(1) {

    transform:
        translateY(
            7.25px
        )
        rotate(
            45deg
        );

}


.z-nav-toggle.is-active
.z-nav-toggle-line:nth-child(2) {

    opacity:
        0;

}


.z-nav-toggle.is-active
.z-nav-toggle-line:nth-child(3) {

    transform:
        translateY(
            -7.25px
        )
        rotate(
            -45deg
        );

}


/* ============================================================
   20. MOBILE NAVIGATION PANEL
   ============================================================ */

.z-mobile-nav {

    position:
        fixed;

    top:
        80px;

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        999;

    overflow-y:
        auto;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateY(
            -8px
        );

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;

}


.z-mobile-nav.is-open {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translateY(
            0
        );

}


/* ============================================================
   21. MOBILE NAV INNER
   ============================================================ */

.z-mobile-nav-inner {

    width:
        min(
            100% - 2rem,
            700px
        );

    margin-right:
        auto;

    margin-left:
        auto;

    padding-top:
        1rem;

    padding-bottom:
        2rem;

}


/* ============================================================
   22. MOBILE NAV LIST
   ============================================================ */

.z-mobile-nav-list {

    display:
        flex;

    flex-direction:
        column;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-mobile-nav-item {

    margin:
        0;

    padding:
        0;

}


/* ============================================================
   23. MOBILE NAV LINK
   ============================================================ */

.z-mobile-nav-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        56px;

    padding:
        0.75rem 0;

    text-decoration:
        none;

}


.z-mobile-nav-link:hover,
.z-mobile-nav-link:focus-visible {

    text-decoration:
        none;

}


/* ============================================================
   24. MOBILE DROPDOWN
   ============================================================ */

.z-mobile-dropdown {

    display:
        none;

    padding:
        0 0 0.75rem;

}


.z-mobile-nav-item.is-open
.z-mobile-dropdown {

    display:
        block;

}


/* ============================================================
   25. MOBILE DROPDOWN LINK
   ============================================================ */

.z-mobile-dropdown-list {

    display:
        flex;

    flex-direction:
        column;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-mobile-dropdown-link {

    display:
        block;

    padding:
        0.65rem 0 0.65rem 1rem;

    text-decoration:
        none;

}


/* ============================================================
   26. MOBILE NAV CTA
   ============================================================ */

.z-mobile-nav-actions {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.75rem;

    margin-top:
        1.5rem;

    padding-top:
        1.5rem;

}


.z-mobile-nav-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        50px;

    text-decoration:
        none;

}


/* ============================================================
   27. NAVIGATION BACKDROP
   ============================================================ */

.z-nav-backdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        998;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;

}


.z-nav-backdrop.is-visible {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


/* ============================================================
   28. SCROLLED HEADER
   ============================================================ */

.z-header.is-scrolled
.z-nav-inner {

    min-height:
        68px;

}


/**
 * The actual background, shadow and border
 * should be controlled by the site's theme
 * / components.css rather than this file.
 */


/* ============================================================
   29. TRANSPARENT HERO HEADER
   ============================================================ */

.z-header--overlay {

    position:
        absolute;

    top:
        0;

    right:
        0;

    left:
        0;

    background:
        transparent;

}


.z-header--overlay .z-nav-inner {

    min-height:
        88px;

}


/* ============================================================
   30. HEADER DIVIDER
   ============================================================ */

.z-nav-divider {

    width:
        100%;

    height:
        1px;

}


/* ============================================================
   31. SECONDARY NAVIGATION
   ============================================================ */

.z-secondary-nav {

    width:
        100%;

}


.z-secondary-nav-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        min(
            100% - 3rem,
            1280px
        );

    min-height:
        48px;

    margin-right:
        auto;

    margin-left:
        auto;

}


.z-secondary-nav-list {

    display:
        flex;

    align-items:
        center;

    gap:
        1.25rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-secondary-nav-link {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        40px;

    text-decoration:
        none;

}


/* ============================================================
   32. BREADCRUMB NAVIGATION
   ============================================================ */

.z-breadcrumbs {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

}


.z-breadcrumbs-list {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-breadcrumbs-item {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.5rem;

}


.z-breadcrumbs-item:not(:last-child)::after {

    content:
        "/";

}


.z-breadcrumbs-link {

    text-decoration:
        none;

}


/* ============================================================
   33. SECTION / ANCHOR NAVIGATION
   ============================================================ */

.z-anchor-nav {

    position:
        sticky;

    top:
        68px;

    z-index:
        800;

    width:
        100%;

}


.z-anchor-nav-inner {

    display:
        flex;

    align-items:
        center;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.z-anchor-nav-inner::-webkit-scrollbar {

    display:
        none;

}


.z-anchor-nav-list {

    display:
        flex;

    align-items:
        center;

    gap:
        1.5rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    white-space:
        nowrap;

}


.z-anchor-nav-link {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        48px;

    text-decoration:
        none;

}


/* ============================================================
   34. NAVIGATION ACCESSIBILITY
   ============================================================ */

.z-nav-link:focus-visible,
.z-nav-dropdown-link:focus-visible,
.z-nav-mega-link:focus-visible,
.z-nav-cta:focus-visible,
.z-nav-contact:focus-visible,
.z-nav-toggle:focus-visible,
.z-mobile-nav-link:focus-visible,
.z-mobile-dropdown-link:focus-visible {

    outline:
        2px solid
        currentColor;

    outline-offset:
        3px;

}


/* ============================================================
   35. RESPONSIVE — 1200PX
   ============================================================ */

@media (
    max-width: 1200px
) {

    .z-nav-inner,
    .z-secondary-nav-inner {

        width:
            min(
                100% - 2.5rem,
                1180px
            );

    }


    .z-nav-menu {

        gap:
            0;

    }


    .z-nav-link {

        padding-right:
            0.55rem;

        padding-left:
            0.55rem;

    }


    .z-nav-link::after {

        right:
            0.55rem;

        left:
            0.55rem;

    }


    .z-nav-brand img {

        max-width:
            145px;

    }

}


/* ============================================================
   36. RESPONSIVE — 1080PX
   ============================================================ */

@media (
    max-width: 1080px
) {

    /**
     * Switch to mobile navigation before
     * the desktop navigation becomes crowded.
     */

    .z-nav-menu,
    .z-nav-actions {

        display:
            none;

    }


    .z-nav-toggle {

        display:
            flex;

    }


    .z-nav-inner {

        min-height:
            72px;

    }


    .z-mobile-nav {

        top:
            72px;

    }


    .z-header--overlay .z-nav-inner {

        min-height:
            76px;

    }


    .z-header--overlay
    .z-mobile-nav {

        top:
            76px;

    }

}


/* ============================================================
   37. RESPONSIVE — 768PX
   ============================================================ */

@media (
    max-width: 768px
) {

    .z-nav-inner,
    .z-secondary-nav-inner {

        width:
            calc(
                100%
                -
                2rem
            );

    }


    .z-nav-brand img {

        max-width:
            135px;

        max-height:
            38px;

    }


    .z-mobile-nav-inner {

        width:
            calc(
                100%
                -
                2rem
            );

    }


    .z-secondary-nav-inner {

        overflow:
            hidden;

    }


    .z-secondary-nav-list {

        overflow-x:
            auto;

        width:
            100%;

        scrollbar-width:
            none;

    }


    .z-secondary-nav-list::-webkit-scrollbar {

        display:
            none;

    }


    .z-anchor-nav {

        top:
            64px;

    }

}


/* ============================================================
   38. RESPONSIVE — 640PX
   ============================================================ */

@media (
    max-width: 640px
) {

    .z-nav-inner {

        width:
            calc(
                100%
                -
                1.5rem
            );

        min-height:
            68px;

    }


    .z-nav-brand img {

        max-width:
            125px;

        max-height:
            36px;

    }


    .z-nav-toggle {

        width:
            42px;

        height:
            42px;

    }


    .z-mobile-nav {

        top:
            68px;

    }


    .z-mobile-nav-inner {

        width:
            calc(
                100%
                -
                1.5rem
            );

    }


    .z-mobile-nav-link {

        min-height:
            54px;

    }


    .z-header--overlay
    .z-nav-inner {

        min-height:
            68px;

    }


    .z-header--overlay
    .z-mobile-nav {

        top:
            68px;

    }

}


/* ============================================================
   39. RESPONSIVE — 480PX
   ============================================================ */

@media (
    max-width: 480px
) {

    .z-nav-inner {

        width:
            calc(
                100%
                -
                1.25rem
            );

    }


    .z-nav-brand img {

        max-width:
            115px;

    }


    .z-mobile-nav-inner {

        width:
            calc(
                100%
                -
                1.25rem
            );

    }


    .z-mobile-nav-link {

        min-height:
            52px;

    }


    .z-mobile-nav-actions {

        margin-top:
            1rem;

        padding-top:
            1rem;

    }

}


/* ============================================================
   40. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .z-nav-link::after,
    .z-nav-chevron,
    .z-nav-dropdown,
    .z-nav-mega,
    .z-nav-toggle-line,
    .z-mobile-nav,
    .z-nav-backdrop {

        transition:
            none;

    }

}


/* ============================================================
   END OF ZANCK NAVIGATION SYSTEM
   ============================================================
 */

/* ===== pages.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * PAGE-LEVEL STYLES
 * File: /assets/css/pages.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Page-specific visual structures for the ZANCK corporate
 * website.
 *
 * This file controls:
 *
 *   - Homepage
 *   - What We Do pages
 *   - Industry pages
 *   - Solution pages
 *   - Insights pages
 *   - Company pages
 *   - Contact page
 *   - Careers page
 *   - Shared inner-page hero structures
 *   - Service architecture sections
 *   - Industry / solution matrices
 *   - Insight listing structures
 *
 * This file intentionally does NOT control:
 *
 *   - Global reset
 *   - Typography primitives
 *   - Navigation
 *   - Global buttons
 *   - Global cards
 *   - Global container system
 *   - Global animation primitives
 *
 * Those belong to the other CSS layers.
 *
 * ============================================================
 */


/* ============================================================
   01. PAGE ROOT
   ============================================================ */

.z-page {

    position:
        relative;

    width:
        100%;

    overflow:
        clip;

}


.z-page-section {

    position:
        relative;

    width:
        100%;

}


/* ============================================================
   02. PAGE HERO
   ============================================================ */

.z-page-hero {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        560px;

    padding-top:
        7rem;

    padding-bottom:
        6rem;

    overflow:
        hidden;

}


.z-page-hero-inner {

    position:
        relative;

    z-index:
        2;

}


.z-page-hero-content {

    max-width:
        900px;

}


.z-page-hero-eyebrow {

    margin-bottom:
        1.25rem;

}


.z-page-hero-title {

    max-width:
        900px;

    margin:
        0;

}


.z-page-hero-description {

    max-width:
        720px;

    margin-top:
        1.5rem;

}


.z-page-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.75rem;

    margin-top:
        2rem;

}


/* ============================================================
   03. PAGE HERO — SPLIT
   ============================================================ */

.z-page-hero--split {

    min-height:
        620px;

}


.z-page-hero-split {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            0,
            0.95fr
        );

    align-items:
        center;

    gap:
        4rem;

}


.z-page-hero-split-content {

    min-width:
        0;

}


.z-page-hero-split-media {

    position:
        relative;

    min-width:
        0;

}


/* ============================================================
   04. PAGE HERO — MEDIA
   ============================================================ */

.z-page-hero-media {

    position:
        relative;

    width:
        100%;

    min-height:
        420px;

    overflow:
        hidden;

}


.z-page-hero-media img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/* ============================================================
   05. HERO ABSTRACT VISUAL
   ============================================================ */

.z-page-hero-visual {

    position:
        relative;

    width:
        100%;

    min-height:
        420px;

}


.z-page-hero-visual-grid {

    position:
        absolute;

    inset:
        0;

    background-size:
        40px 40px;

}


.z-page-hero-visual-orbit {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        320px;

    height:
        320px;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        currentColor;

    border-radius:
        50%;

}


.z-page-hero-visual-orbit--inner {

    width:
        210px;

    height:
        210px;

}


.z-page-hero-visual-core {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        90px;

    height:
        90px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

}


/* ============================================================
   06. HOMEPAGE HERO
   ============================================================ */

.z-home-hero {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        min(
            820px,
            90vh
        );

    padding-top:
        8rem;

    padding-bottom:
        7rem;

    overflow:
        hidden;

}


.z-home-hero-inner {

    position:
        relative;

    z-index:
        2;

}


.z-home-hero-content {

    max-width:
        1000px;

}


.z-home-hero-eyebrow {

    margin-bottom:
        1.5rem;

}


.z-home-hero-title {

    max-width:
        1000px;

    margin:
        0;

}


.z-home-hero-description {

    max-width:
        700px;

    margin-top:
        1.75rem;

}


.z-home-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.75rem;

    margin-top:
        2.25rem;

}


.z-home-hero-scroll {

    position:
        absolute;

    right:
        0;

    bottom:
        2rem;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    writing-mode:
        vertical-rl;

}


/* ============================================================
   07. HOMEPAGE HERO METRICS
   ============================================================ */

.z-home-hero-metrics {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

    max-width:
        800px;

    margin-top:
        4rem;

}


.z-home-hero-metric {

    padding:
        1.25rem 1.5rem;

}


.z-home-hero-metric-value {

    display:
        block;

}


.z-home-hero-metric-label {

    display:
        block;

    margin-top:
        0.3rem;

}


/* ============================================================
   08. HOMEPAGE — INTRODUCTION
   ============================================================ */

.z-home-intro {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-home-intro-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.7fr
        )
        minmax(
            0,
            1.3fr
        );

    gap:
        5rem;

    align-items:
        start;

}


.z-home-intro-label {

    position:
        sticky;

    top:
        110px;

}


.z-home-intro-content {

    max-width:
        850px;

}


.z-home-intro-title {

    margin:
        0;

}


.z-home-intro-copy {

    margin-top:
        1.5rem;

}


.z-home-intro-actions {

    margin-top:
        2rem;

}


/* ============================================================
   09. HOMEPAGE — CAPABILITIES
   ============================================================ */

.z-home-capabilities {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-home-capabilities-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-bottom:
        3rem;

}


.z-home-capabilities-heading {

    max-width:
        750px;

}


.z-home-capabilities-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


/* ============================================================
   10. SERVICE INDEX
   ============================================================ */

.z-service-index {

    padding-top:
        6rem;

    padding-bottom:
        6rem;

}


.z-service-index-header {

    max-width:
        800px;

    margin-bottom:
        3rem;

}


.z-service-index-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-service-index-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        80px
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        2rem;

    align-items:
        center;

    padding:
        1.5rem 0;

}


.z-service-index-number {

    font-variant-numeric:
        tabular-nums;

}


.z-service-index-content {

    min-width:
        0;

}


.z-service-index-title {

    margin:
        0;

}


.z-service-index-description {

    max-width:
        700px;

    margin-top:
        0.5rem;

}


.z-service-index-action {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


/* ============================================================
   11. SERVICE OVERVIEW PAGE
   ============================================================ */

.z-service-overview {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-service-overview-intro {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.85fr
        )
        minmax(
            0,
            1.15fr
        );

    gap:
        5rem;

    margin-bottom:
        6rem;

}


.z-service-overview-title {

    max-width:
        700px;

}


.z-service-overview-copy {

    max-width:
        700px;

}


/* ============================================================
   12. SERVICE CAPABILITY MATRIX
   ============================================================ */

.z-service-capabilities {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-service-capability {

    position:
        relative;

    min-height:
        250px;

    padding:
        2rem;

}


.z-service-capability-number {

    display:
        block;

    margin-bottom:
        3rem;

}


.z-service-capability-title {

    max-width:
        500px;

    margin:
        0;

}


.z-service-capability-description {

    max-width:
        600px;

    margin-top:
        0.75rem;

}


/* ============================================================
   13. SERVICE DETAIL PAGE
   ============================================================ */

.z-service-detail {

    padding-top:
        6rem;

    padding-bottom:
        7rem;

}


.z-service-detail-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.65fr
        )
        minmax(
            0,
            1.35fr
        );

    gap:
        5rem;

}


.z-service-detail-aside {

    position:
        sticky;

    top:
        110px;

    align-self:
        start;

}


.z-service-detail-content {

    min-width:
        0;

}


.z-service-detail-section {

    padding-bottom:
        4rem;

    margin-bottom:
        4rem;

}


.z-service-detail-section:last-child {

    margin-bottom:
        0;

}


.z-service-detail-section-title {

    margin:
        0;

}


.z-service-detail-section-copy {

    max-width:
        800px;

    margin-top:
        1rem;

}


/* ============================================================
   14. SERVICE PROCESS
   ============================================================ */

.z-service-process {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-service-process-header {

    max-width:
        800px;

    margin-bottom:
        4rem;

}


.z-service-process-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-service-process-step {

    min-height:
        250px;

    padding:
        1.75rem;

}


.z-service-process-number {

    display:
        block;

    margin-bottom:
        3rem;

}


.z-service-process-title {

    margin:
        0;

}


.z-service-process-description {

    margin-top:
        0.75rem;

}


/* ============================================================
   15. SERVICE OUTCOMES
   ============================================================ */

.z-service-outcomes {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-service-outcomes-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-service-outcome {

    min-height:
        220px;

    padding:
        2rem;

}


.z-service-outcome-value {

    display:
        block;

}


.z-service-outcome-label {

    display:
        block;

    margin-top:
        0.75rem;

}


/* ============================================================
   16. INDUSTRIES INDEX
   ============================================================ */

.z-industries {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-industries-header {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        4rem;

    margin-bottom:
        4rem;

}


.z-industries-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-industry-card {

    position:
        relative;

    min-height:
        300px;

    padding:
        2rem;

}


.z-industry-card-number {

    display:
        block;

    margin-bottom:
        4rem;

}


.z-industry-card-title {

    margin:
        0;

}


.z-industry-card-description {

    max-width:
        550px;

    margin-top:
        0.75rem;

}


/* ============================================================
   17. INDUSTRY DETAIL
   ============================================================ */

.z-industry-detail {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-industry-detail-intro {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        5rem;

    margin-bottom:
        6rem;

}


.z-industry-detail-content {

    max-width:
        850px;

}


.z-industry-challenges {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-industry-challenge {

    min-height:
        220px;

    padding:
        2rem;

}


.z-industry-challenge-title {

    margin:
        0;

}


.z-industry-challenge-description {

    margin-top:
        0.75rem;

}


/* ============================================================
   18. SOLUTIONS INDEX
   ============================================================ */

.z-solutions {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-solutions-header {

    max-width:
        850px;

    margin-bottom:
        4rem;

}


.z-solutions-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-solution-card {

    min-height:
        300px;

    padding:
        2rem;

}


.z-solution-card-title {

    margin:
        0;

}


.z-solution-card-description {

    margin-top:
        0.75rem;

}


/* ============================================================
   19. SOLUTION DETAIL
   ============================================================ */

.z-solution-detail {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-solution-detail-intro {

    max-width:
        900px;

    margin-bottom:
        6rem;

}


.z-solution-detail-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-solution-detail-item {

    min-height:
        250px;

    padding:
        2rem;

}


.z-solution-detail-item-title {

    margin:
        0;

}


.z-solution-detail-item-description {

    margin-top:
        0.75rem;

}


/* ============================================================
   20. TRANSFORMATION FRAMEWORK
   ============================================================ */

.z-transformation {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-transformation-flow {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-transformation-step {

    min-height:
        280px;

    padding:
        2rem;

}


.z-transformation-step-number {

    display:
        block;

    margin-bottom:
        4rem;

}


/* ============================================================
   21. INSIGHTS INDEX
   ============================================================ */

.z-insights {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-insights-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        3rem;

    margin-bottom:
        4rem;

}


.z-insights-heading {

    max-width:
        800px;

}


/* ============================================================
   22. INSIGHTS FILTERS
   ============================================================ */

.z-insights-filters {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin-bottom:
        3rem;

}


.z-insights-filter {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0.5rem 0.9rem;

    text-decoration:
        none;

}


/* ============================================================
   23. INSIGHTS GRID
   ============================================================ */

.z-insights-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


/* ============================================================
   24. INSIGHT CARD
   ============================================================ */

.z-insight-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.z-insight-card-media {

    position:
        relative;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

}


.z-insight-card-media img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.z-insight-card-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        1.5rem;

}


.z-insight-card-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin-bottom:
        1rem;

}


.z-insight-card-title {

    margin:
        0;

}


.z-insight-card-excerpt {

    margin-top:
        0.75rem;

}


.z-insight-card-link {

    margin-top:
        auto;

    padding-top:
        1.5rem;

}


/* ============================================================
   25. INSIGHT DETAIL
   ============================================================ */

.z-insight-detail {

    padding-top:
        6rem;

    padding-bottom:
        7rem;

}


.z-insight-detail-header {

    max-width:
        900px;

    margin-right:
        auto;

    margin-bottom:
        4rem;

    margin-left:
        auto;

}


.z-insight-detail-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    margin-bottom:
        1.25rem;

}


.z-insight-detail-title {

    margin:
        0;

}


.z-insight-detail-summary {

    max-width:
        760px;

    margin-top:
        1.5rem;

}


.z-insight-detail-media {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto 4rem;

    overflow:
        hidden;

}


.z-insight-detail-media img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


.z-insight-detail-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        260px;

    gap:
        5rem;

    max-width:
        1000px;

    margin:
        0 auto;

}


.z-insight-detail-body {

    min-width:
        0;

}


.z-insight-detail-sidebar {

    position:
        sticky;

    top:
        110px;

    align-self:
        start;

}


/* ============================================================
   26. INSIGHT ARTICLE TYPOGRAPHY
   ============================================================ */

.z-article-content {

    max-width:
        780px;

}


.z-article-content > * + * {

    margin-top:
        1.5rem;

}


.z-article-content h2 {

    margin-top:
        3.5rem;

}


.z-article-content h3 {

    margin-top:
        2.5rem;

}


.z-article-content ul,
.z-article-content ol {

    padding-left:
        1.5rem;

}


.z-article-content img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    margin-top:
        2.5rem;

}


/* ============================================================
   27. COMPANY INDEX
   ============================================================ */

.z-company {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-company-intro {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        5rem;

    margin-bottom:
        7rem;

}


.z-company-intro-content {

    max-width:
        850px;

}


/* ============================================================
   28. ABOUT / WHO WE ARE
   ============================================================ */

.z-about-statement {

    max-width:
        1000px;

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-about-statement-title {

    margin:
        0;

}


.z-about-statement-copy {

    max-width:
        800px;

    margin-top:
        2rem;

}


/* ============================================================
   29. OUR APPROACH
   ============================================================ */

.z-approach {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-approach-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-approach-item {

    min-height:
        280px;

    padding:
        2rem;

}


.z-approach-number {

    display:
        block;

    margin-bottom:
        4rem;

}


/* ============================================================
   30. LEADERSHIP
   ============================================================ */

.z-leadership {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-leadership-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-leader {

    min-width:
        0;

}


.z-leader-media {

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

}


.z-leader-media img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.z-leader-content {

    padding:
        1.5rem;

}


.z-leader-name {

    margin:
        0;

}


.z-leader-role {

    margin-top:
        0.4rem;

}


/* ============================================================
   31. TECHNOLOGY
   ============================================================ */

.z-technology {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-technology-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-technology-category {

    min-height:
        260px;

    padding:
        2rem;

}


.z-technology-category-title {

    margin:
        0;

}


.z-technology-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin-top:
        1.5rem;

    padding:
        0;

    list-style:
        none;

}


.z-technology-item {

    padding:
        0.45rem 0.7rem;

}


/* ============================================================
   32. CAREERS
   ============================================================ */

.z-careers {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-careers-intro {

    max-width:
        850px;

    margin-bottom:
        5rem;

}


.z-careers-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.3fr
        )
        minmax(
            0,
            0.7fr
        );

    gap:
        5rem;

}


.z-careers-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.z-career-item {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        2rem;

    align-items:
        center;

    padding:
        1.5rem 0;

}


.z-career-title {

    margin:
        0;

}


.z-career-meta {

    margin-top:
        0.4rem;

}


/* ============================================================
   33. CAREER DETAIL
   ============================================================ */

.z-career-detail {

    padding-top:
        6rem;

    padding-bottom:
        7rem;

}


.z-career-detail-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        300px;

    gap:
        5rem;

}


.z-career-detail-sidebar {

    position:
        sticky;

    top:
        110px;

    align-self:
        start;

}


.z-career-detail-section {

    margin-bottom:
        3rem;

}


.z-career-detail-section:last-child {

    margin-bottom:
        0;

}


/* ============================================================
   34. CONTACT PAGE
   ============================================================ */

.z-contact {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-contact-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        5rem;

    align-items:
        start;

}


.z-contact-intro {

    max-width:
        700px;

}


.z-contact-title {

    margin:
        0;

}


.z-contact-description {

    margin-top:
        1.25rem;

}


.z-contact-details {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1rem;

    margin-top:
        2.5rem;

}


.z-contact-detail {

    display:
        flex;

    flex-direction:
        column;

}


.z-contact-detail-label {

    margin-bottom:
        0.25rem;

}


.z-contact-form-wrapper {

    min-width:
        0;

}


/* ============================================================
   35. CONTACT FORM
   ============================================================ */

.z-contact-form {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1.25rem;

}


.z-contact-form-field {

    min-width:
        0;

}


.z-contact-form-field--full {

    grid-column:
        1 / -1;

}


.z-contact-form-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    grid-column:
        1 / -1;

    margin-top:
        0.5rem;

}


/* ============================================================
   36. FORM SUCCESS / ERROR
   ============================================================ */

.z-form-status {

    grid-column:
        1 / -1;

    padding:
        1rem;

}


.z-form-status[hidden] {

    display:
        none;

}


.z-form-status--success {

    border-left:
        3px solid
        currentColor;

}


.z-form-status--error {

    border-left:
        3px solid
        currentColor;

}


/* ============================================================
   37. CTA / CONVERSATION SECTION
   ============================================================ */

.z-conversation {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-conversation-inner {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        3rem;

    align-items:
        end;

}


.z-conversation-content {

    max-width:
        800px;

}


.z-conversation-title {

    margin:
        0;

}


.z-conversation-description {

    max-width:
        700px;

    margin-top:
        1rem;

}


.z-conversation-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

}


/* ============================================================
   38. DATA / OPERATIONAL DASHBOARD SECTION
   ============================================================ */

.z-operational-dashboard {

    position:
        relative;

    padding-top:
        6rem;

    padding-bottom:
        6rem;

}


.z-operational-dashboard-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-operational-metric {

    min-height:
        180px;

    padding:
        1.5rem;

}


.z-operational-metric-value {

    display:
        block;

}


.z-operational-metric-label {

    display:
        block;

    margin-top:
        0.5rem;

}


/* ============================================================
   39. ENTERPRISE ARCHITECTURE VISUAL
   ============================================================ */

.z-architecture {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-architecture-diagram {

    position:
        relative;

    min-height:
        500px;

    padding:
        2rem;

}


.z-architecture-layer {

    display:
        grid;

    grid-template-columns:
        180px
        minmax(
            0,
            1fr
        );

    align-items:
        center;

    gap:
        2rem;

    min-height:
        90px;

}


.z-architecture-layer-label {

    font-weight:
        600;

}


.z-architecture-layer-items {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

}


.z-architecture-layer-item {

    padding:
        0.55rem 0.8rem;

}


/* ============================================================
   40. CASE STUDY / PROOF SECTION
   ============================================================ */

.z-proof {

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-proof-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        1px;

}


.z-proof-item {

    min-height:
        320px;

    padding:
        2rem;

}


.z-proof-item-category {

    margin-bottom:
        4rem;

}


.z-proof-item-title {

    max-width:
        700px;

    margin:
        0;

}


.z-proof-item-description {

    max-width:
        650px;

    margin-top:
        0.75rem;

}


/* ============================================================
   41. GLOBAL STATEMENT SECTION
   ============================================================ */

.z-statement {

    padding-top:
        8rem;

    padding-bottom:
        8rem;

}


.z-statement-content {

    max-width:
        1100px;

}


.z-statement-title {

    margin:
        0;

}


/* ============================================================
   42. FULL-WIDTH MESSAGE
   ============================================================ */

.z-full-message {

    display:
        flex;

    align-items:
        center;

    min-height:
        500px;

    padding-top:
        6rem;

    padding-bottom:
        6rem;

}


.z-full-message-content {

    max-width:
        1000px;

}


/* ============================================================
   43. PAGE PAGINATION
   ============================================================ */

.z-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    margin-top:
        4rem;

}


.z-pagination-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        42px;

    height:
        42px;

    padding:
        0.5rem;

    text-decoration:
        none;

}


/* ============================================================
   44. EMPTY STATE
   ============================================================ */

.z-empty-state {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        320px;

    padding:
        3rem;

    text-align:
        center;

}


.z-empty-state-title {

    margin:
        0;

}


.z-empty-state-description {

    max-width:
        500px;

    margin-top:
        0.75rem;

}


/* ============================================================
   45. ERROR PAGE
   ============================================================ */

.z-error-page {

    display:
        flex;

    align-items:
        center;

    min-height:
        70vh;

    padding-top:
        7rem;

    padding-bottom:
        7rem;

}


.z-error-page-content {

    max-width:
        800px;

}


.z-error-page-code {

    display:
        block;

    margin-bottom:
        1rem;

}


.z-error-page-title {

    margin:
        0;

}


.z-error-page-description {

    max-width:
        600px;

    margin-top:
        1rem;

}


.z-error-page-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    margin-top:
        2rem;

}


/* ============================================================
   46. LEGAL / POLICY PAGES
   ============================================================ */

.z-legal {

    padding-top:
        6rem;

    padding-bottom:
        7rem;

}


.z-legal-layout {

    display:
        grid;

    grid-template-columns:
        220px
        minmax(
            0,
            1fr
        );

    gap:
        5rem;

}


.z-legal-sidebar {

    position:
        sticky;

    top:
        110px;

    align-self:
        start;

}


.z-legal-content {

    max-width:
        800px;

}


.z-legal-section {

    margin-bottom:
        3rem;

}


.z-legal-section:last-child {

    margin-bottom:
        0;

}


/* ============================================================
   47. RESPONSIVE — 1200PX
   ============================================================ */

@media (
    max-width: 1200px
) {

    .z-home-hero {

        min-height:
            720px;

    }


    .z-home-intro-grid,
    .z-service-overview-intro,
    .z-industry-detail-intro,
    .z-company-intro {

        gap:
            3.5rem;

    }


    .z-service-process-list {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-technology-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* ============================================================
   48. RESPONSIVE — 960PX
   ============================================================ */

@media (
    max-width: 960px
) {

    .z-page-hero {

        min-height:
            500px;

        padding-top:
            6rem;

        padding-bottom:
            5rem;

    }


    .z-page-hero-split {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            340px;

    }


    .z-home-hero {

        min-height:
            650px;

        padding-top:
            7rem;

        padding-bottom:
            6rem;

    }


    .z-home-intro-grid,
    .z-service-overview-intro,
    .z-industry-detail-intro,
    .z-company-intro,
    .z-contact-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-home-intro-label {

        position:
            static;

    }


    .z-service-detail-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-service-detail-aside,
    .z-industry-detail-aside {

        position:
            static;

    }


    .z-home-capabilities-grid,
    .z-solutions-grid,
    .z-insights-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-leadership-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-contact-grid {

        grid-template-columns:
            1fr;

    }


    .z-conversation-inner {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }


    .z-careers-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-career-detail-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-career-detail-sidebar {

        position:
            static;

    }


    .z-legal-layout {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-legal-sidebar {

        position:
            static;

    }

}


/* ============================================================
   49. RESPONSIVE — 768PX
   ============================================================ */

@media (
    max-width: 768px
) {

    .z-page-hero {

        min-height:
            460px;

        padding-top:
            5rem;

        padding-bottom:
            4rem;

    }


    .z-home-hero {

        min-height:
            600px;

        padding-top:
            6rem;

        padding-bottom:
            5rem;

    }


    .z-home-hero-scroll {

        display:
            none;

    }


    .z-home-hero-metrics {

        grid-template-columns:
            1fr;

        margin-top:
            3rem;

    }


    .z-home-capabilities-header,
    .z-insights-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .z-home-capabilities-grid,
    .z-solutions-grid,
    .z-insights-grid,
    .z-leadership-grid,
    .z-service-capabilities,
    .z-industry-challenges,
    .z-solution-detail-grid,
    .z-proof-grid {

        grid-template-columns:
            1fr;

    }


    .z-service-index-item {

        grid-template-columns:
            50px
            minmax(
                0,
                1fr
            )
            auto;

        gap:
            1rem;

    }


    .z-service-process-list {

        grid-template-columns:
            1fr;

    }


    .z-service-outcomes-grid,
    .z-operational-dashboard-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-technology-grid {

        grid-template-columns:
            1fr;

    }


    .z-insight-detail-layout {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-insight-detail-sidebar {

        position:
            static;

    }


    .z-architecture-layer {

        grid-template-columns:
            1fr;

        gap:
            0.75rem;

        padding:
            1rem 0;

    }


    .z-contact-form {

        grid-template-columns:
            1fr;

    }


    .z-contact-form-field--full,
    .z-contact-form-actions,
    .z-form-status {

        grid-column:
            auto;

    }


    .z-contact-form-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .z-career-item {

        grid-template-columns:
            1fr;

        gap:
            1rem;

    }


    .z-statement {

        padding-top:
            6rem;

        padding-bottom:
            6rem;

    }

}


/* ============================================================
   50. RESPONSIVE — 640PX
   ============================================================ */

@media (
    max-width: 640px
) {

    .z-page-hero {

        min-height:
            420px;

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            280px;

    }


    .z-home-hero {

        min-height:
            560px;

        padding-top:
            5rem;

        padding-bottom:
            4rem;

    }


    .z-home-hero-actions,
    .z-page-hero-actions {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .z-home-hero-actions > *,
    .z-page-hero-actions > * {

        width:
            100%;

    }


    .z-home-intro,
    .z-home-capabilities,
    .z-service-index,
    .z-service-overview,
    .z-service-process,
    .z-service-outcomes,
    .z-industries,
    .z-industry-detail,
    .z-solutions,
    .z-solution-detail,
    .z-transformation,
    .z-insights,
    .z-company,
    .z-approach,
    .z-leadership,
    .z-technology,
    .z-careers,
    .z-career-detail,
    .z-contact,
    .z-legal {

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-service-index-item {

        grid-template-columns:
            40px
            minmax(
                0,
                1fr
            );

    }


    .z-service-index-action {

        grid-column:
            2;

        justify-content:
            flex-start;

    }


    .z-service-outcomes-grid,
    .z-operational-dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .z-architecture-diagram {

        min-height:
            auto;

        padding:
            1rem;

    }


    .z-full-message {

        min-height:
            400px;

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    .z-conversation-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }

}


/* ============================================================
   51. RESPONSIVE — 480PX
   ============================================================ */

@media (
    max-width: 480px
) {

    .z-page-hero {

        min-height:
            380px;

    }


    .z-home-hero {

        min-height:
            520px;

    }


    .z-service-capability,
    .z-industry-card,
    .z-solution-card,
    .z-approach-item,
    .z-technology-category,
    .z-proof-item {

        min-height:
            auto;

    }


    .z-insight-card-content,
    .z-leader-content {

        padding:
            1.25rem;

    }


    .z-pagination {

        gap:
            0.25rem;

    }


    .z-pagination-link {

        min-width:
            38px;

        height:
            38px;

    }

}


/* ============================================================
   52. PRINT
   ============================================================ */

@media print {

    .z-page-hero,
    .z-home-hero {

        min-height:
            auto;

        padding-top:
            2rem;

        padding-bottom:
            2rem;

    }


    .z-page-section,
    .z-service-overview,
    .z-service-detail,
    .z-industries,
    .z-industry-detail,
    .z-solutions,
    .z-solution-detail,
    .z-insights,
    .z-insight-detail,
    .z-company,
    .z-contact {

        break-inside:
            avoid;

    }


    .z-insight-detail-sidebar,
    .z-career-detail-sidebar,
    .z-legal-sidebar {

        position:
            static;

    }

}


/* ============================================================
   53. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .z-page *,
    .z-page *::before,
    .z-page *::after {

        scroll-behavior:
            auto !important;

    }

}


/* ============================================================
   END OF ZANCK PAGE STYLES
   ============================================================
 */

/* ===== animations.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * Animation & Motion System
 * File: /assets/css/animations.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * This file contains ZANCK's global motion system.
 *
 * It is intentionally separated from:
 *
 * - variables.css
 * - base.css
 * - components.css
 * - layout.css
 *
 * This keeps the visual system maintainable as the website
 * grows.
 *
 * DESIGN PRINCIPLES
 * ------------------------------------------------------------
 *
 * 1. Premium enterprise motion
 * 2. Fast and controlled
 * 3. No excessive bouncing
 * 4. No distracting infinite animations
 * 5. Motion should communicate hierarchy
 * 6. Respect reduced-motion preferences
 * 7. GPU-friendly transforms where possible
 *
 * ============================================================
 */


/* ============================================================
   01. MOTION TOKENS
   ============================================================ */

:root {

    --motion-duration-instant: 100ms;
    --motion-duration-fast: 180ms;
    --motion-duration-normal: 300ms;
    --motion-duration-medium: 450ms;
    --motion-duration-slow: 650ms;
    --motion-duration-slower: 900ms;

    --motion-ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --motion-ease-smooth:
        cubic-bezier(0.16, 1, 0.3, 1);

    --motion-ease-enter:
        cubic-bezier(0.16, 1, 0.3, 1);

    --motion-ease-exit:
        cubic-bezier(0.7, 0, 0.84, 0);

    --motion-ease-linear:
        linear;

}


/* ============================================================
   02. BASE TRANSITION UTILITIES
   ============================================================ */

.z-transition {

    transition:
        all
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-transition-fast {

    transition:
        all
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-transition-slow {

    transition:
        all
        var(--motion-duration-slow)
        var(--motion-ease-standard);

}


.z-transition-transform {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-transition-opacity {

    transition:
        opacity
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-transition-color {

    transition:
        color
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        background-color
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        border-color
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


/* ============================================================
   03. INITIAL VISIBILITY STATES
   ============================================================ */

/**
 * Elements using scroll-reveal animations start invisible.
 *
 * JavaScript will add .is-visible when the element enters
 * the viewport.
 */

.z-reveal {

    opacity: 0;
    transform:
        translate3d(
            0,
            28px,
            0
        );

    transition:
        opacity
        var(--motion-duration-slow)
        var(--motion-ease-enter),
        transform
        var(--motion-duration-slow)
        var(--motion-ease-enter);

}


.z-reveal.is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   04. REVEAL DIRECTIONS
   ============================================================ */

.z-reveal-up {

    opacity: 0;

    transform:
        translate3d(
            0,
            36px,
            0
        );

}


.z-reveal-up.is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.z-reveal-down {

    opacity: 0;

    transform:
        translate3d(
            0,
            -36px,
            0
        );

}


.z-reveal-down.is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.z-reveal-left {

    opacity: 0;

    transform:
        translate3d(
            36px,
            0,
            0
        );

}


.z-reveal-left.is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


.z-reveal-right {

    opacity: 0;

    transform:
        translate3d(
            -36px,
            0,
            0
        );

}


.z-reveal-right.is-visible {

    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   05. SCALE REVEAL
   ============================================================ */

.z-reveal-scale {

    opacity: 0;

    transform:
        scale(
            0.96
        );

}


.z-reveal-scale.is-visible {

    opacity: 1;

    transform:
        scale(
            1
        );

}


/* ============================================================
   06. FADE UTILITIES
   ============================================================ */

@keyframes zanck-fade-in {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


@keyframes zanck-fade-out {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}


.z-fade-in {

    animation:
        zanck-fade-in
        var(--motion-duration-medium)
        var(--motion-ease-enter)
        both;

}


.z-fade-out {

    animation:
        zanck-fade-out
        var(--motion-duration-medium)
        var(--motion-ease-exit)
        both;

}


/* ============================================================
   07. SLIDE ANIMATIONS
   ============================================================ */

@keyframes zanck-slide-up {

    from {

        opacity: 0;

        transform:
            translate3d(
                0,
                30px,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


@keyframes zanck-slide-down {

    from {

        opacity: 0;

        transform:
            translate3d(
                0,
                -30px,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


@keyframes zanck-slide-left {

    from {

        opacity: 0;

        transform:
            translate3d(
                30px,
                0,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


@keyframes zanck-slide-right {

    from {

        opacity: 0;

        transform:
            translate3d(
                -30px,
                0,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


.z-slide-up {

    animation:
        zanck-slide-up
        var(--motion-duration-medium)
        var(--motion-ease-enter)
        both;

}


.z-slide-down {

    animation:
        zanck-slide-down
        var(--motion-duration-medium)
        var(--motion-ease-enter)
        both;

}


.z-slide-left {

    animation:
        zanck-slide-left
        var(--motion-duration-medium)
        var(--motion-ease-enter)
        both;

}


.z-slide-right {

    animation:
        zanck-slide-right
        var(--motion-duration-medium)
        var(--motion-ease-enter)
        both;

}


/* ============================================================
   08. HERO ANIMATIONS
   ============================================================ */

/**
 * Hero elements should enter sequentially.
 */

@keyframes zanck-hero-enter {

    from {

        opacity: 0;

        transform:
            translate3d(
                0,
                24px,
                0
            );

    }

    to {

        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


.z-hero-enter {

    opacity: 0;

    animation:
        zanck-hero-enter
        800ms
        var(--motion-ease-enter)
        forwards;

}


.z-hero-enter-delay-1 {

    animation-delay:
        100ms;

}


.z-hero-enter-delay-2 {

    animation-delay:
        200ms;

}


.z-hero-enter-delay-3 {

    animation-delay:
        300ms;

}


.z-hero-enter-delay-4 {

    animation-delay:
        400ms;

}


.z-hero-enter-delay-5 {

    animation-delay:
        500ms;

}


/* ============================================================
   09. HERO VISUAL MOTION
   ============================================================ */

/**
 * Very subtle floating movement.
 *
 * Intended for:
 *
 * - abstract hero graphics
 * - dashboard mockups
 * - architectural visuals
 *
 * NOT intended for every element on the page.
 */

@keyframes zanck-float {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    50% {

        transform:
            translate3d(
                0,
                -8px,
                0
            );

    }

    100% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


.z-float {

    animation:
        zanck-float
        6s
        ease-in-out
        infinite;

}


/* ============================================================
   10. SUBTLE PULSE
   ============================================================ */

@keyframes zanck-pulse {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.72;

    }

}


.z-pulse {

    animation:
        zanck-pulse
        2.5s
        ease-in-out
        infinite;

}


/* ============================================================
   11. STATUS INDICATOR
   ============================================================ */

@keyframes zanck-status-pulse {

    0% {

        transform:
            scale(
                0.95
            );

        opacity:
            0.55;

    }

    50% {

        transform:
            scale(
                1
            );

        opacity:
            1;

    }

    100% {

        transform:
            scale(
                0.95
            );

        opacity:
            0.55;

    }

}


.z-status-pulse {

    animation:
        zanck-status-pulse
        2s
        ease-in-out
        infinite;

}


/* ============================================================
   12. HOVER LIFT
   ============================================================ */

.z-hover-lift {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-hover-lift:hover {

    transform:
        translate3d(
            0,
            -5px,
            0
        );

}


/* ============================================================
   13. HOVER LIFT — STRONG
   ============================================================ */

.z-hover-lift-strong {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-hover-lift-strong:hover {

    transform:
        translate3d(
            0,
            -9px,
            0
        );

}


/* ============================================================
   14. HOVER SCALE
   ============================================================ */

.z-hover-scale {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-hover-scale:hover {

    transform:
        scale(
            1.025
        );

}


/* ============================================================
   15. IMAGE HOVER ZOOM
   ============================================================ */

.z-image-zoom {

    overflow:
        hidden;

}


.z-image-zoom img {

    transition:
        transform
        700ms
        var(--motion-ease-standard);

}


.z-image-zoom:hover img {

    transform:
        scale(
            1.035
        );

}


/* ============================================================
   16. BUTTON ARROW MOTION
   ============================================================ */

.z-button-arrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

}


.z-button-arrow .z-arrow {

    transition:
        transform
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-button-arrow:hover .z-arrow {

    transform:
        translate3d(
            4px,
            0,
            0
        );

}


/* ============================================================
   17. LINK UNDERLINE MOTION
   ============================================================ */

.z-link-underline {

    position:
        relative;

    text-decoration:
        none;

}


.z-link-underline::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -3px;

    width:
        100%;

    height:
        1px;

    transform:
        scaleX(
            0
        );

    transform-origin:
        right center;

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-link-underline:hover::after,
.z-link-underline:focus-visible::after {

    transform:
        scaleX(
            1
        );

    transform-origin:
        left center;

}


/* ============================================================
   18. NAVIGATION MENU
   ============================================================ */

.z-nav-menu {

    transition:
        opacity
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-nav-menu.is-hidden {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(
            0,
            -8px,
            0
        );

}


.z-nav-menu.is-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   19. MOBILE NAVIGATION
   ============================================================ */

.z-mobile-menu {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(
            0,
            -12px,
            0
        );

    transition:
        opacity
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-mobile-menu.is-open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   20. MOBILE MENU ITEMS
   ============================================================ */

.z-mobile-menu.is-open .z-mobile-menu-item {

    animation:
        zanck-slide-up
        450ms
        var(--motion-ease-enter)
        both;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(1) {

    animation-delay:
        50ms;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(2) {

    animation-delay:
        100ms;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(3) {

    animation-delay:
        150ms;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(4) {

    animation-delay:
        200ms;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(5) {

    animation-delay:
        250ms;

}


.z-mobile-menu.is-open
.z-mobile-menu-item:nth-child(6) {

    animation-delay:
        300ms;

}


/* ============================================================
   21. MEGA MENU
   ============================================================ */

.z-mega-menu {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(
            0,
            -10px,
            0
        );

    transition:
        opacity
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-mega-menu.is-open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   22. ACCORDION
   ============================================================ */

.z-accordion-content {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows
        var(--motion-duration-medium)
        var(--motion-ease-standard);

}


.z-accordion-content > div {

    overflow:
        hidden;

}


.z-accordion.is-open
.z-accordion-content {

    grid-template-rows:
        1fr;

}


.z-accordion-icon {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-accordion.is-open
.z-accordion-icon {

    transform:
        rotate(
            45deg
        );

}


/* ============================================================
   23. TAB CONTENT
   ============================================================ */

.z-tab-panel {

    opacity:
        0;

    transform:
        translate3d(
            0,
            8px,
            0
        );

}


.z-tab-panel.is-active {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    animation:
        zanck-tab-enter
        350ms
        var(--motion-ease-enter)
        both;

}


@keyframes zanck-tab-enter {

    from {

        opacity:
            0;

        transform:
            translate3d(
                0,
                10px,
                0
            );

    }

    to {

        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* ============================================================
   24. MODAL
   ============================================================ */

.z-modal {

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-modal.is-open {

    opacity:
        1;

    visibility:
        visible;

}


.z-modal-panel {

    opacity:
        0;

    transform:
        translate3d(
            0,
            20px,
            0
        )
        scale(
            0.98
        );

    transition:
        opacity
        var(--motion-duration-medium)
        var(--motion-ease-enter),
        transform
        var(--motion-duration-medium)
        var(--motion-ease-enter);

}


.z-modal.is-open
.z-modal-panel {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(
            1
        );

}


/* ============================================================
   25. FORM FEEDBACK
   ============================================================ */

@keyframes zanck-form-success {

    from {

        opacity:
            0;

        transform:
            translate3d(
                0,
                8px,
                0
            );

    }

    to {

        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


.z-form-success {

    animation:
        zanck-form-success
        400ms
        var(--motion-ease-enter)
        both;

}


/* ============================================================
   26. FORM ERROR
   ============================================================ */

@keyframes zanck-form-error {

    0% {

        transform:
            translateX(
                0
            );

    }

    25% {

        transform:
            translateX(
                -4px
            );

    }

    50% {

        transform:
            translateX(
                4px
            );

    }

    75% {

        transform:
            translateX(
                -2px
            );

    }

    100% {

        transform:
            translateX(
                0
            );

    }

}


.z-form-error {

    animation:
        zanck-form-error
        350ms
        ease-in-out
        both;

}


/* ============================================================
   27. LOADING SPINNER
   ============================================================ */

@keyframes zanck-spin {

    from {

        transform:
            rotate(
                0deg
            );

    }

    to {

        transform:
            rotate(
                360deg
            );

    }

}


.z-spinner {

    animation:
        zanck-spin
        700ms
        linear
        infinite;

}


/* ============================================================
   28. LOADING DOTS
   ============================================================ */

@keyframes zanck-loading-dot {

    0%,
    60%,
    100% {

        opacity:
            0.3;

        transform:
            translateY(
                0
            );

    }

    30% {

        opacity:
            1;

        transform:
            translateY(
                -3px
            );

    }

}


.z-loading-dot {

    animation:
        zanck-loading-dot
        1.2s
        ease-in-out
        infinite;

}


.z-loading-dot:nth-child(2) {

    animation-delay:
        120ms;

}


.z-loading-dot:nth-child(3) {

    animation-delay:
        240ms;

}


/* ============================================================
   29. PAGE TRANSITION
   ============================================================ */

@keyframes zanck-page-enter {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}


.z-page-enter {

    animation:
        zanck-page-enter
        450ms
        var(--motion-ease-enter)
        both;

}


/* ============================================================
   30. NUMBER / METRIC REVEAL
   ============================================================ */

.z-metric {

    opacity:
        0;

    transform:
        translate3d(
            0,
            14px,
            0
        );

}


.z-metric.is-visible {

    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        550ms
        var(--motion-ease-enter),
        transform
        550ms
        var(--motion-ease-enter);

}


/* ============================================================
   31. CARD STAGGER
   ============================================================ */

.z-stagger > * {

    opacity:
        0;

    transform:
        translate3d(
            0,
            20px,
            0
        );

}


.z-stagger.is-visible > * {

    animation:
        zanck-slide-up
        550ms
        var(--motion-ease-enter)
        both;

}


.z-stagger.is-visible > *:nth-child(1) {

    animation-delay:
        50ms;

}


.z-stagger.is-visible > *:nth-child(2) {

    animation-delay:
        100ms;

}


.z-stagger.is-visible > *:nth-child(3) {

    animation-delay:
        150ms;

}


.z-stagger.is-visible > *:nth-child(4) {

    animation-delay:
        200ms;

}


.z-stagger.is-visible > *:nth-child(5) {

    animation-delay:
        250ms;

}


.z-stagger.is-visible > *:nth-child(6) {

    animation-delay:
        300ms;

}


.z-stagger.is-visible > *:nth-child(7) {

    animation-delay:
        350ms;

}


.z-stagger.is-visible > *:nth-child(8) {

    animation-delay:
        400ms;

}


/* ============================================================
   32. SERVICE CARD MOTION
   ============================================================ */

.z-service-card {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        box-shadow
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-service-card:hover {

    transform:
        translate3d(
            0,
            -6px,
            0
        );

}


/* ============================================================
   33. INDUSTRY CARD MOTION
   ============================================================ */

.z-industry-card {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-industry-card:hover {

    transform:
        translate3d(
            0,
            -4px,
            0
        );

}


/* ============================================================
   34. INSIGHT CARD MOTION
   ============================================================ */

.z-insight-card {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-insight-card:hover {

    transform:
        translate3d(
            0,
            -5px,
            0
        );

}


.z-insight-card img {

    transition:
        transform
        700ms
        var(--motion-ease-standard);

}


.z-insight-card:hover img {

    transform:
        scale(
            1.025
        );

}


/* ============================================================
   35. LOGO MOTION
   ============================================================ */

.z-logo {

    transition:
        opacity
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-logo:hover {

    opacity:
        0.82;

}


/* ============================================================
   36. HEADER SCROLL STATE
   ============================================================ */

.z-header {

    transition:
        background-color
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        box-shadow
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        backdrop-filter
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-header.is-scrolled {

    backdrop-filter:
        blur(
            12px
        );

}


/* ============================================================
   37. HEADER LOGO SHRINK
   ============================================================ */

.z-header-logo {

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-header.is-scrolled
.z-header-logo {

    transform:
        scale(
            0.94
        );

}


/* ============================================================
   38. MOBILE MENU ICON
   ============================================================ */

.z-menu-icon {

    position:
        relative;

}


.z-menu-icon span {

    display:
        block;

    transition:
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        opacity
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-menu-toggle.is-active
.z-menu-icon span:nth-child(1) {

    transform:
        translateY(
            6px
        )
        rotate(
            45deg
        );

}


.z-menu-toggle.is-active
.z-menu-icon span:nth-child(2) {

    opacity:
        0;

}


.z-menu-toggle.is-active
.z-menu-icon span:nth-child(3) {

    transform:
        translateY(
            -6px
        )
        rotate(
            -45deg
        );

}


/* ============================================================
   39. SCROLL INDICATOR
   ============================================================ */

@keyframes zanck-scroll-indicator {

    0% {

        transform:
            translateY(
                0
            );

        opacity:
            0;

    }

    20% {

        opacity:
            1;

    }

    80% {

        opacity:
            1;

    }

    100% {

        transform:
            translateY(
                14px
            );

        opacity:
            0;

    }

}


.z-scroll-indicator {

    animation:
        zanck-scroll-indicator
        2s
        ease-in-out
        infinite;

}


/* ============================================================
   40. BACKGROUND GRID MOTION
   ============================================================ */

/**
 * Extremely subtle movement intended for abstract technical
 * sections.
 *
 * Do not apply this to large portions of the website.
 */

@keyframes zanck-grid-drift {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    to {

        transform:
            translate3d(
                20px,
                20px,
                0
            );

    }

}


.z-grid-drift {

    animation:
        zanck-grid-drift
        20s
        linear
        infinite alternate;

}


/* ============================================================
   41. GRADIENT MOTION
   ============================================================ */

@keyframes zanck-gradient-shift {

    0% {

        background-position:
            0% 50%;

    }

    50% {

        background-position:
            100% 50%;

    }

    100% {

        background-position:
            0% 50%;

    }

}


.z-gradient-motion {

    background-size:
        200%
        200%;

    animation:
        zanck-gradient-shift
        12s
        ease
        infinite;

}


/* ============================================================
   42. FOCUS MOTION
   ============================================================ */

.z-focus-motion {

    transition:
        box-shadow
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        border-color
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


/* ============================================================
   43. CURSOR / POINTER FEEDBACK
   ============================================================ */

.z-pointer {

    transition:
        transform
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-pointer:hover {

    transform:
        translate3d(
            0,
            -1px,
            0
        );

}


/* ============================================================
   44. ACTIVE PRESS
   ============================================================ */

.z-press {

    transition:
        transform
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-press:active {

    transform:
        scale(
            0.98
        );

}


/* ============================================================
   45. TOOLTIP
   ============================================================ */

.z-tooltip {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(
            0,
            5px,
            0
        );

    transition:
        opacity
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-fast)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-fast)
        var(--motion-ease-standard);

}


.z-tooltip-trigger:hover
.z-tooltip,
.z-tooltip-trigger:focus-visible
.z-tooltip {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   46. COOKIE / PRIVACY BANNER
   ============================================================ */

.z-privacy-banner {

    transform:
        translate3d(
            0,
            110%,
            0
        );

    transition:
        transform
        500ms
        var(--motion-ease-enter);

}


.z-privacy-banner.is-visible {

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   47. BACK TO TOP
   ============================================================ */

.z-back-to-top {

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate3d(
            0,
            10px,
            0
        );

    transition:
        opacity
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        visibility
        var(--motion-duration-normal)
        var(--motion-ease-standard),
        transform
        var(--motion-duration-normal)
        var(--motion-ease-standard);

}


.z-back-to-top.is-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate3d(
            0,
            0,
            0
        );

}


/* ============================================================
   48. PAGE EXIT
   ============================================================ */

.z-page-exit {

    animation:
        zanck-page-exit
        250ms
        var(--motion-ease-exit)
        forwards;

}


@keyframes zanck-page-exit {

    from {

        opacity:
            1;

    }

    to {

        opacity:
            0;

    }

}


/* ============================================================
   49. DELAY UTILITIES
   ============================================================ */

.z-delay-1 {

    animation-delay:
        100ms;

}


.z-delay-2 {

    animation-delay:
        200ms;

}


.z-delay-3 {

    animation-delay:
        300ms;

}


.z-delay-4 {

    animation-delay:
        400ms;

}


.z-delay-5 {

    animation-delay:
        500ms;

}


.z-delay-6 {

    animation-delay:
        600ms;

}


/* ============================================================
   50. DURATION UTILITIES
   ============================================================ */

.z-duration-fast {

    animation-duration:
        var(--motion-duration-fast);

}


.z-duration-normal {

    animation-duration:
        var(--motion-duration-normal);

}


.z-duration-medium {

    animation-duration:
        var(--motion-duration-medium);

}


.z-duration-slow {

    animation-duration:
        var(--motion-duration-slow);

}


/* ============================================================
   51. WILL-CHANGE HELPERS
   ============================================================ */

/**
 * Use these only on elements that actually animate.
 *
 * Avoid applying will-change globally because it can increase
 * memory usage and reduce performance.
 */

.z-will-transform {

    will-change:
        transform;

}


.z-will-opacity {

    will-change:
        opacity;

}


/* ============================================================
   52. REDUCED MOTION
   ============================================================
 *
 * Accessibility requirement.
 *
 * Users who have requested reduced motion from their operating
 * system should not receive unnecessary movement.
 * ============================================================
 */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }


    .z-reveal,
    .z-reveal-up,
    .z-reveal-down,
    .z-reveal-left,
    .z-reveal-right,
    .z-reveal-scale {

        opacity:
            1;

        transform:
            none;

    }


    .z-mobile-menu,
    .z-nav-menu,
    .z-mega-menu {

        transform:
            none;

    }

}


/* ============================================================
   53. TOUCH DEVICES
   ============================================================
 *
 * Hover effects can be undesirable on touch devices.
 * ============================================================
 */

@media (
    hover: none
) {

    .z-hover-lift:hover,
    .z-hover-lift-strong:hover,
    .z-hover-scale:hover,
    .z-service-card:hover,
    .z-industry-card:hover,
    .z-insight-card:hover {

        transform:
            none;

    }


    .z-image-zoom:hover img {

        transform:
            none;

    }

}


/* ============================================================
   54. PERFORMANCE SAFEGUARDS
   ============================================================ */

.z-animate-transform {

    backface-visibility:
        hidden;

    transform:
        translateZ(
            0
        );

}


/* ============================================================
   END OF ZANCK ANIMATION SYSTEM
   ============================================================ */

/* ===== responsive.css ===== */
/**
 * ============================================================
 * ZANCK
 * Build Beyond.
 * Build. Bridge. Business.
 *
 * RESPONSIVE DESIGN SYSTEM
 * File: /assets/css/responsive.css
 * ============================================================
 *
 * PURPOSE
 * ------------------------------------------------------------
 * Central responsive layer for the ZANCK enterprise website.
 *
 * RESPONSIVE STRATEGY
 * ------------------------------------------------------------
 *
 * Desktop-first architecture:
 *
 *   > 1200px  → Large desktop
 *   1200px    → Desktop
 *   1024px    → Tablet landscape
 *   900px     → Tablet
 *   768px     → Tablet / large mobile
 *   640px     → Mobile
 *   480px     → Small mobile
 *   360px     → Compact mobile
 *
 * This file controls:
 *
 *   - Responsive containers
 *   - Grid transformations
 *   - Typography scaling
 *   - Section spacing
 *   - Navigation transitions
 *   - Hero layouts
 *   - Cards
 *   - Forms
 *   - Tables
 *   - Service layouts
 *   - Industry layouts
 *   - Solution layouts
 *   - Insight layouts
 *   - Company layouts
 *   - Contact layouts
 *
 * ============================================================
 */


/* ============================================================
   01. LARGE DESKTOP
   > 1440PX
   ============================================================ */

@media (min-width: 1441px) {

    .container,
    .z-container {

        max-width:
            1440px;

    }


    .z-home-hero {

        min-height:
            860px;

    }


    .z-page-hero {

        min-height:
            640px;

    }


    .z-home-hero-title {

        max-width:
            1100px;

    }


    .z-page-hero-title {

        max-width:
            1000px;

    }


    .z-statement-title {

        max-width:
            1200px;

    }

}


/* ============================================================
   02. DESKTOP
   1200PX — 1440PX
   ============================================================ */

@media (
    min-width: 1201px
) and (
    max-width: 1440px
) {

    .z-home-hero {

        min-height:
            780px;

    }


    .z-page-hero {

        min-height:
            580px;

    }

}


/* ============================================================
   03. BELOW 1200PX
   ============================================================ */

@media (
    max-width: 1200px
) {

    /* --------------------------------------------------------
       Global spacing
       -------------------------------------------------------- */

    .section,
    .z-section {

        padding-top:
            6rem;

        padding-bottom:
            6rem;

    }


    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            720px;

    }


    .z-page-hero {

        min-height:
            540px;

    }


    /* --------------------------------------------------------
       Main grids
       -------------------------------------------------------- */

    .z-home-intro-grid,
    .z-service-overview-intro,
    .z-industry-detail-intro,
    .z-company-intro {

        gap:
            3.5rem;

    }


    /* --------------------------------------------------------
       Process
       -------------------------------------------------------- */

    .z-service-process-list {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Technology
       -------------------------------------------------------- */

    .z-technology-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Architecture
       -------------------------------------------------------- */

    .z-architecture-layer {

        grid-template-columns:
            160px
            minmax(
                0,
                1fr
            );

    }

}


/* ============================================================
   04. TABLET LANDSCAPE
   1024PX
   ============================================================ */

@media (
    max-width: 1024px
) {

    /* --------------------------------------------------------
       Container
       -------------------------------------------------------- */

    .container,
    .z-container {

        width:
            min(
                calc(
                    100% - 3rem
                ),
                1200px
            );

    }


    /* --------------------------------------------------------
       Hero split
       -------------------------------------------------------- */

    .z-page-hero-split {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-page-hero-split-content {

        max-width:
            850px;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        max-width:
            850px;

    }


    /* --------------------------------------------------------
       Homepage
       -------------------------------------------------------- */

    .z-home-hero-content {

        max-width:
            900px;

    }


    .z-home-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }


    .z-home-intro-label {

        position:
            static;

    }


    /* --------------------------------------------------------
       Services
       -------------------------------------------------------- */

    .z-service-overview-intro {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .z-service-detail-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-service-detail-aside {

        position:
            static;

    }


    /* --------------------------------------------------------
       Industries
       -------------------------------------------------------- */

    .z-industries-header {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }


    .z-industry-detail-intro {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    /* --------------------------------------------------------
       Company
       -------------------------------------------------------- */

    .z-company-intro {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    /* --------------------------------------------------------
       Careers
       -------------------------------------------------------- */

    .z-careers-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-career-detail-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-career-detail-sidebar {

        position:
            static;

    }


    /* --------------------------------------------------------
       Legal
       -------------------------------------------------------- */

    .z-legal-layout {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-legal-sidebar {

        position:
            static;

    }


    /* --------------------------------------------------------
       Contact
       -------------------------------------------------------- */

    .z-contact-grid {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    /* --------------------------------------------------------
       Conversation CTA
       -------------------------------------------------------- */

    .z-conversation-inner {

        grid-template-columns:
            1fr;

        align-items:
            start;

    }

}


/* ============================================================
   05. TABLET
   900PX
   ============================================================ */

@media (
    max-width: 900px
) {

    /* --------------------------------------------------------
       Typography scaling
       -------------------------------------------------------- */

    h1,
    .z-display-1 {

        font-size:
            clamp(
                3rem,
                7vw,
                5.5rem
            );

    }


    h2,
    .z-display-2 {

        font-size:
            clamp(
                2.3rem,
                5vw,
                4rem
            );

    }


    h3 {

        font-size:
            clamp(
                1.6rem,
                3vw,
                2.4rem
            );

    }


    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            680px;

        padding-top:
            7rem;

        padding-bottom:
            6rem;

    }


    .z-page-hero {

        min-height:
            520px;

        padding-top:
            6rem;

        padding-bottom:
            5rem;

    }


    /* --------------------------------------------------------
       Capabilities
       -------------------------------------------------------- */

    .z-home-capabilities-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Service capabilities
       -------------------------------------------------------- */

    .z-service-capabilities {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Outcomes
       -------------------------------------------------------- */

    .z-service-outcomes-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Solutions
       -------------------------------------------------------- */

    .z-solutions-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Insights
       -------------------------------------------------------- */

    .z-insights-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Leadership
       -------------------------------------------------------- */

    .z-leadership-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Technology
       -------------------------------------------------------- */

    .z-technology-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Proof
       -------------------------------------------------------- */

    .z-proof-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Architecture
       -------------------------------------------------------- */

    .z-architecture-layer {

        grid-template-columns:
            1fr;

        gap:
            0.75rem;

        padding:
            1rem 0;

    }

}


/* ============================================================
   06. LARGE MOBILE / TABLET
   768PX
   ============================================================ */

@media (
    max-width: 768px
) {

    /* --------------------------------------------------------
       Global container
       -------------------------------------------------------- */

    .container,
    .z-container {

        width:
            min(
                calc(
                    100% - 2.5rem
                ),
                1200px
            );

    }


    /* --------------------------------------------------------
       Section spacing
       -------------------------------------------------------- */

    .section,
    .z-section {

        padding-top:
            5rem;

        padding-bottom:
            5rem;

    }


    /* --------------------------------------------------------
       Homepage hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            620px;

        padding-top:
            6rem;

        padding-bottom:
            5rem;

    }


    .z-home-hero-scroll {

        display:
            none;

    }


    /* --------------------------------------------------------
       Page hero
       -------------------------------------------------------- */

    .z-page-hero {

        min-height:
            460px;

        padding-top:
            5rem;

        padding-bottom:
            4rem;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            320px;

    }


    /* --------------------------------------------------------
       Hero actions
       -------------------------------------------------------- */

    .z-home-hero-actions,
    .z-page-hero-actions {

        flex-wrap:
            wrap;

    }


    /* --------------------------------------------------------
       Hero metrics
       -------------------------------------------------------- */

    .z-home-hero-metrics {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        margin-top:
            3rem;

    }


    /* --------------------------------------------------------
       Section headers
       -------------------------------------------------------- */

    .z-home-capabilities-header,
    .z-insights-header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    /* --------------------------------------------------------
       Service index
       -------------------------------------------------------- */

    .z-service-index-item {

        grid-template-columns:
            50px
            minmax(
                0,
                1fr
            )
            auto;

        gap:
            1rem;

    }


    /* --------------------------------------------------------
       Service process
       -------------------------------------------------------- */

    .z-service-process-list {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Service outcomes
       -------------------------------------------------------- */

    .z-service-outcomes-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Industries
       -------------------------------------------------------- */

    .z-industries-grid {

        grid-template-columns:
            1fr;

    }


    .z-industry-challenges {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Solutions
       -------------------------------------------------------- */

    .z-solutions-grid,
    .z-solution-detail-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Insights
       -------------------------------------------------------- */

    .z-insights-grid {

        grid-template-columns:
            1fr;

    }


    .z-insight-detail-layout {

        grid-template-columns:
            1fr;

        gap:
            3rem;

    }


    .z-insight-detail-sidebar {

        position:
            static;

    }


    /* --------------------------------------------------------
       Company
       -------------------------------------------------------- */

    .z-leadership-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-technology-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Contact form
       -------------------------------------------------------- */

    .z-contact-form {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .z-contact-form-field--full,
    .z-contact-form-actions,
    .z-form-status {

        grid-column:
            1 / -1;

    }


    /* --------------------------------------------------------
       Careers
       -------------------------------------------------------- */

    .z-career-item {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto;

    }


    /* --------------------------------------------------------
       Operational dashboard
       -------------------------------------------------------- */

    .z-operational-dashboard-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    /* --------------------------------------------------------
       Conversation
       -------------------------------------------------------- */

    .z-conversation-inner {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }

}


/* ============================================================
   07. MOBILE
   640PX
   ============================================================ */

@media (
    max-width: 640px
) {

    /* --------------------------------------------------------
       Container
       -------------------------------------------------------- */

    .container,
    .z-container {

        width:
            calc(
                100% - 2rem
            );

    }


    /* --------------------------------------------------------
       Typography
       -------------------------------------------------------- */

    h1,
    .z-display-1 {

        font-size:
            clamp(
                2.5rem,
                11vw,
                4rem
            );

        line-height:
            1.02;

    }


    h2,
    .z-display-2 {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );

        line-height:
            1.08;

    }


    h3 {

        font-size:
            clamp(
                1.45rem,
                7vw,
                2.1rem
            );

    }


    /* --------------------------------------------------------
       Section spacing
       -------------------------------------------------------- */

    .section,
    .z-section {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    /* --------------------------------------------------------
       Homepage hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            560px;

        padding-top:
            5rem;

        padding-bottom:
            4rem;

    }


    /* --------------------------------------------------------
       Page hero
       -------------------------------------------------------- */

    .z-page-hero {

        min-height:
            400px;

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            260px;

    }


    /* --------------------------------------------------------
       Hero actions
       -------------------------------------------------------- */

    .z-home-hero-actions,
    .z-page-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

    }


    .z-home-hero-actions > *,
    .z-page-hero-actions > * {

        width:
            100%;

    }


    /* --------------------------------------------------------
       Hero metrics
       -------------------------------------------------------- */

    .z-home-hero-metrics {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Capabilities
       -------------------------------------------------------- */

    .z-home-capabilities-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Service capabilities
       -------------------------------------------------------- */

    .z-service-capabilities {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Service process
       -------------------------------------------------------- */

    .z-service-process-list {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Service outcomes
       -------------------------------------------------------- */

    .z-service-outcomes-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Service index
       -------------------------------------------------------- */

    .z-service-index-item {

        grid-template-columns:
            40px
            minmax(
                0,
                1fr
            );

        gap:
            0.75rem;

    }


    .z-service-index-action {

        grid-column:
            2;

        justify-content:
            flex-start;

    }


    /* --------------------------------------------------------
       Industry
       -------------------------------------------------------- */

    .z-industry-card {

        min-height:
            auto;

    }


    /* --------------------------------------------------------
       Solutions
       -------------------------------------------------------- */

    .z-solution-card {

        min-height:
            auto;

    }


    /* --------------------------------------------------------
       Insights
       -------------------------------------------------------- */

    .z-insight-detail-header {

        margin-bottom:
            3rem;

    }


    .z-insight-detail-media {

        margin-bottom:
            3rem;

    }


    /* --------------------------------------------------------
       Leadership
       -------------------------------------------------------- */

    .z-leadership-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Technology
       -------------------------------------------------------- */

    .z-technology-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Contact
       -------------------------------------------------------- */

    .z-contact-form {

        grid-template-columns:
            1fr;

    }


    .z-contact-form-field--full,
    .z-contact-form-actions,
    .z-form-status {

        grid-column:
            auto;

    }


    .z-contact-form-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    /* --------------------------------------------------------
       Career
       -------------------------------------------------------- */

    .z-career-item {

        grid-template-columns:
            1fr;

        gap:
            0.75rem;

    }


    /* --------------------------------------------------------
       Operational metrics
       -------------------------------------------------------- */

    .z-operational-dashboard-grid {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Architecture
       -------------------------------------------------------- */

    .z-architecture-diagram {

        min-height:
            auto;

        padding:
            1rem;

    }


    .z-architecture-layer {

        grid-template-columns:
            1fr;

    }


    /* --------------------------------------------------------
       Conversation
       -------------------------------------------------------- */

    .z-conversation-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    /* --------------------------------------------------------
       Full message
       -------------------------------------------------------- */

    .z-full-message {

        min-height:
            360px;

    }


    /* --------------------------------------------------------
       Pagination
       -------------------------------------------------------- */

    .z-pagination {

        flex-wrap:
            wrap;

    }

}


/* ============================================================
   08. SMALL MOBILE
   480PX
   ============================================================ */

@media (
    max-width: 480px
) {

    /* --------------------------------------------------------
       Container
       -------------------------------------------------------- */

    .container,
    .z-container {

        width:
            calc(
                100% - 1.5rem
            );

    }


    /* --------------------------------------------------------
       Typography
       -------------------------------------------------------- */

    h1,
    .z-display-1 {

        font-size:
            clamp(
                2.25rem,
                12vw,
                3.2rem
            );

    }


    h2,
    .z-display-2 {

        font-size:
            clamp(
                1.85rem,
                10vw,
                2.6rem
            );

    }


    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            520px;

    }


    .z-page-hero {

        min-height:
            360px;

    }


    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            220px;

    }


    /* --------------------------------------------------------
       Inner page spacing
       -------------------------------------------------------- */

    .z-home-intro,
    .z-home-capabilities,
    .z-service-index,
    .z-service-overview,
    .z-service-process,
    .z-service-outcomes,
    .z-industries,
    .z-industry-detail,
    .z-solutions,
    .z-solution-detail,
    .z-transformation,
    .z-insights,
    .z-company,
    .z-approach,
    .z-leadership,
    .z-technology,
    .z-careers,
    .z-career-detail,
    .z-contact,
    .z-legal {

        padding-top:
            4rem;

        padding-bottom:
            4rem;

    }


    /* --------------------------------------------------------
       Cards
       -------------------------------------------------------- */

    .z-service-capability,
    .z-industry-card,
    .z-solution-card,
    .z-approach-item,
    .z-technology-category,
    .z-proof-item {

        min-height:
            auto;

    }


    /* --------------------------------------------------------
       Service process
       -------------------------------------------------------- */

    .z-service-process-step {

        min-height:
            auto;

    }


    /* --------------------------------------------------------
       Contact
       -------------------------------------------------------- */

    .z-contact-details {

        gap:
            0.8rem;

    }


    /* --------------------------------------------------------
       Pagination
       -------------------------------------------------------- */

    .z-pagination {

        gap:
            0.25rem;

    }


    .z-pagination-link {

        min-width:
            38px;

        height:
            38px;

    }

}


/* ============================================================
   09. COMPACT MOBILE
   360PX
   ============================================================ */

@media (
    max-width: 360px
) {

    /* --------------------------------------------------------
       Container
       -------------------------------------------------------- */

    .container,
    .z-container {

        width:
            calc(
                100% - 1.25rem
            );

    }


    /* --------------------------------------------------------
       Typography
       -------------------------------------------------------- */

    h1,
    .z-display-1 {

        font-size:
            2.1rem;

    }


    h2,
    .z-display-2 {

        font-size:
            1.75rem;

    }


    h3 {

        font-size:
            1.35rem;

    }


    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .z-home-hero {

        min-height:
            500px;

        padding-top:
            4rem;

        padding-bottom:
            3.5rem;

    }


    .z-page-hero {

        min-height:
            340px;

        padding-top:
            3.5rem;

        padding-bottom:
            3.5rem;

    }


    /* --------------------------------------------------------
       Hero media
       -------------------------------------------------------- */

    .z-page-hero-media,
    .z-page-hero-visual {

        min-height:
            190px;

    }


    /* --------------------------------------------------------
       Service index
       -------------------------------------------------------- */

    .z-service-index-item {

        grid-template-columns:
            32px
            minmax(
                0,
                1fr
            );

        gap:
            0.6rem;

    }


    /* --------------------------------------------------------
       Form
       -------------------------------------------------------- */

    .z-contact-form {

        gap:
            1rem;

    }


    /* --------------------------------------------------------
       Full message
       -------------------------------------------------------- */

    .z-full-message {

        min-height:
            320px;

    }

}


/* ============================================================
   10. LANDSCAPE MOBILE
   ============================================================ */

@media (
    max-width: 900px
) and (
    orientation: landscape
) {

    .z-home-hero {

        min-height:
            600px;

    }


    .z-page-hero {

        min-height:
            440px;

    }

}


/* ============================================================
   11. TOUCH DEVICES
   ============================================================ */

@media (
    hover: none
) and (
    pointer: coarse
) {

    /* Increase touch targets */

    button,
    a,
    input,
    select,
    textarea {

        touch-action:
            manipulation;

    }


    .z-pagination-link {

        min-width:
            44px;

        min-height:
            44px;

    }


    /* Disable hover-only transforms */

    .z-insight-card:hover,
    .z-solution-card:hover,
    .z-industry-card:hover,
    .z-service-capability:hover {

        transform:
            none;

    }

}


/* ============================================================
   12. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .z-home-hero *,
    .z-page-hero *,
    .z-service-index *,
    .z-insights *,
    .z-solutions *,
    .z-industries * {

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* ============================================================
   13. HIGH CONTRAST / FORCED COLORS
   ============================================================ */

@media (
    forced-colors: active
) {

    button,
    a {

        forced-color-adjust:
            auto;

    }


    .z-pagination-link,
    .z-insights-filter {

        border:
            1px solid
            CanvasText;

    }

}


/* ============================================================
   14. PRINT
   ============================================================ */

@media print {

    .z-home-hero,
    .z-page-hero {

        min-height:
            auto;

        padding-top:
            2rem;

        padding-bottom:
            2rem;

    }


    .z-page-section,
    .z-service-overview,
    .z-service-detail,
    .z-industries,
    .z-industry-detail,
    .z-solutions,
    .z-solution-detail,
    .z-insights,
    .z-insight-detail,
    .z-company,
    .z-contact {

        break-inside:
            avoid;

    }

}


/* ============================================================
   END OF ZANCK RESPONSIVE SYSTEM
   ============================================================
 */