/* ============================================================
   ZANCK — INDUSTRIES STYLES
   File: /assets/css/industries.css

   BRAND PALETTE — LOCKED
   #1e6dbb — ZANCK Blue
   #FFFFFF — White
   #000000 — Black

   Design direction:
   Premium enterprise.
   Industry-led storytelling.
   Editorial layouts.
   Strong whitespace.
   Blue as strategic accent.
   White as dominant surface.
   Black used selectively, never everywhere.
   ============================================================ */


/* ============================================================
   01. INDUSTRY TOKENS
   ============================================================ */

:root {

    --industry-blue: #1e6dbb;
    --industry-white: #FFFFFF;
    --industry-black: #000000;

    --industry-blue-dark: #185d9f;

    --industry-gray-50: #fafafa;
    --industry-gray-100: #f5f5f5;

    --industry-muted:
        rgba(0, 0, 0, 0.62);

    --industry-soft:
        rgba(0, 0, 0, 0.44);

    --industry-border:
        rgba(0, 0, 0, 0.10);

    --industry-border-strong:
        rgba(0, 0, 0, 0.16);

}


/* ============================================================
   02. PAGE FOUNDATION
   ============================================================ */

.industries-page {

    background:
        var(--industry-white);

    color:
        var(--industry-black);

    overflow:
        hidden;

}


.industries-page *,
.industries-page *::before,
.industries-page *::after {

    box-sizing:
        border-box;

}


/* ============================================================
   03. SHARED CONTAINER
   ============================================================ */

.industry-container {

    width:
        min(
            calc(100% - 48px),
            1280px
        );

    margin-inline:
        auto;

}


@media (max-width: 700px) {

    .industry-container {

        width:
            min(
                calc(100% - 32px),
                1280px
            );

    }

}


/* ============================================================
   04. INDUSTRIES HERO
   ============================================================ */

.industries-hero {

    position:
        relative;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--industry-white);

}


.industries-hero-inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - 48px),
            1280px
        );

    margin-inline:
        auto;

    padding:
        120px 0 100px;

}


.industries-hero-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.industries-hero-kicker::before {

    content:
        "";

    width:
        30px;

    height:
        2px;

    background:
        var(--industry-blue);

}


.industries-hero h1 {

    max-width:
        1050px;

    margin:
        25px 0 0;

    font-family:
        "Manrope",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            58px,
            8vw,
            118px
        );

    line-height:
        0.89;

    letter-spacing:
        -0.07em;

    font-weight:
        700;

}


.industries-hero h1 span {

    color:
        var(--industry-blue);

}


.industries-hero-description {

    max-width:
        620px;

    margin:
        35px 0 0;

    color:
        var(--industry-muted);

    font-size:
        15px;

    line-height:
        1.85;

}


.industries-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        35px;

}


/* ============================================================
   05. HERO VISUAL GRID
   ============================================================ */

.industries-hero-visual {

    position:
        absolute;

    right:
        -110px;

    bottom:
        -170px;

    width:
        620px;

    height:
        620px;

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

    border-radius:
        50%;

}


.industries-hero-visual::before,
.industries-hero-visual::after {

    content:
        "";

    position:
        absolute;

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

    border-radius:
        50%;

}


.industries-hero-visual::before {

    inset:
        90px;

}


.industries-hero-visual::after {

    inset:
        180px;

}


.industries-hero-node {

    position:
        absolute;

    top:
        23%;

    left:
        26%;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--industry-blue);

    box-shadow:
        250px 80px 0
        rgba(
            30,
            109,
            187,
            0.45
        ),
        90px 240px 0
        rgba(
            30,
            109,
            187,
            0.28
        );

}


/* ============================================================
   06. INDUSTRY INDEX
   ============================================================ */

.industries-hero-index {

    position:
        absolute;

    right:
        35px;

    bottom:
        35px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        110px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        -0.08em;

    pointer-events:
        none;

}


/* ============================================================
   07. INDUSTRY INTRO
   ============================================================ */

.industries-intro {

    padding:
        130px 0;

    border-top:
        1px solid var(--industry-border);

}


.industries-intro-grid {

    display:
        grid;

    grid-template-columns:
        0.55fr
        1.45fr;

    gap:
        80px;

}


.industries-section-index {

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

}


.industries-intro h2 {

    max-width:
        1000px;

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            40px,
            5.3vw,
            74px
        );

    line-height:
        0.97;

    letter-spacing:
        -0.055em;

}


.industries-intro h2 span {

    color:
        var(--industry-blue);

}


.industries-intro p {

    max-width:
        690px;

    margin:
        32px 0 0;

    color:
        var(--industry-muted);

    font-size:
        14px;

    line-height:
        1.85;

}


@media (max-width: 760px) {

    .industries-intro {

        padding:
            85px 0;

    }

    .industries-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }

}


/* ============================================================
   08. INDUSTRY DIRECTORY
   ============================================================ */

.industries-directory {

    padding:
        130px 0;

    background:
        var(--industry-gray-50);

}


.industries-directory-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    margin-bottom:
        60px;

}


.industries-directory-header h2 {

    margin:
        15px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            40px,
            5vw,
            68px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.industries-directory-header p {

    max-width:
        380px;

    margin:
        0;

    color:
        var(--industry-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* ============================================================
   09. INDUSTRY DIRECTORY LIST
   ============================================================ */

.industries-list {

    border-top:
        1px solid var(--industry-border);

}


.industry-row {

    display:
        grid;

    grid-template-columns:
        65px
        minmax(230px, 0.8fr)
        minmax(300px, 1.2fr)
        35px;

    align-items:
        center;

    gap:
        25px;

    min-height:
        125px;

    padding:
        22px 0;

    border-bottom:
        1px solid var(--industry-border);

    text-decoration:
        none;

    color:
        inherit;

    transition:
        padding 220ms ease,
        background-color 220ms ease;

}


.industry-row:hover {

    padding-left:
        18px;

    padding-right:
        18px;

    background:
        var(--industry-white);

}


.industry-row-number {

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

}


.industry-row h3 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        21px;

    line-height:
        1.1;

    letter-spacing:
        -0.025em;

}


.industry-row p {

    margin:
        0;

    color:
        var(--industry-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


.industry-row-arrow {

    color:
        var(--industry-blue);

    font-size:
        20px;

    transition:
        transform 220ms ease;

}


.industry-row:hover .industry-row-arrow {

    transform:
        translateX(6px);

}


@media (max-width: 760px) {

    .industries-directory {

        padding:
            85px 0;

    }

    .industries-directory-header {

        display:
            block;

    }

    .industries-directory-header p {

        margin-top:
            20px;

    }

    .industry-row {

        grid-template-columns:
            42px
            1fr
            25px;

        gap:
            16px;

        padding:
            25px 0;

    }

    .industry-row p {

        grid-column:
            2 / 4;

        margin-top:
            5px;

    }

}


/* ============================================================
   10. INDUSTRY FEATURE BLOCK
   ============================================================ */

.industry-feature {

    padding:
        150px 0;

    background:
        var(--industry-white);

}


.industry-feature-grid {

    display:
        grid;

    grid-template-columns:
        1.1fr
        0.9fr;

    gap:
        80px;

    align-items:
        stretch;

}


.industry-feature-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.industry-feature-label {

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.industry-feature-content h2 {

    max-width:
        680px;

    margin:
        18px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            40px,
            5vw,
            72px
        );

    line-height:
        0.94;

    letter-spacing:
        -0.055em;

}


.industry-feature-content h2 span {

    color:
        var(--industry-blue);

}


.industry-feature-content > p {

    max-width:
        600px;

    margin:
        28px 0 0;

    color:
        var(--industry-muted);

    font-size:
        14px;

    line-height:
        1.85;

}


/* ============================================================
   11. FEATURE OUTCOME LIST
   ============================================================ */

.industry-feature-outcomes {

    margin-top:
        40px;

    border-top:
        1px solid var(--industry-border);

}


.industry-feature-outcome {

    display:
        grid;

    grid-template-columns:
        45px
        1fr;

    gap:
        18px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--industry-border);

}


.industry-feature-outcome-number {

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

}


.industry-feature-outcome h3 {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

}


.industry-feature-outcome p {

    margin:
        5px 0 0;

    color:
        var(--industry-muted);

    font-size:
        13px;

    line-height:
        1.65;

}


/* ============================================================
   12. FEATURE VISUAL
   ============================================================ */

.industry-feature-visual {

    position:
        relative;

    min-height:
        520px;

    overflow:
        hidden;

    background:
        var(--industry-black);

}


.industry-feature-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        35px;

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

}


.industry-feature-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        55px;

    top:
        55px;

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

    border-radius:
        50%;

}


.industry-feature-visual-line {

    position:
        absolute;

    left:
        70px;

    right:
        70px;

    top:
        50%;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

}


.industry-feature-visual-node {

    position:
        absolute;

    top:
        calc(50% - 4px);

    left:
        50%;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--industry-blue);

    box-shadow:
        0 0 0 8px
        rgba(
            30,
            109,
            187,
            0.18
        );

}


/* ============================================================
   13. INDUSTRY METRICS
   ============================================================ */

.industries-metrics {

    padding:
        120px 0;

    background:
        var(--industry-blue);

    color:
        var(--industry-white);

}


.industries-metrics-grid {

    display:
        grid;

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

}


.industry-metric {

    min-height:
        190px;

    padding:
        30px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

}


.industry-metric:last-child {

    border-right:
        0;

}


.industry-metric-value {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            38px,
            4vw,
            60px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.industry-metric-label {

    max-width:
        170px;

    margin-top:
        14px;

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

    font-size:
        11px;

    line-height:
        1.6;

}


@media (max-width: 760px) {

    .industries-metrics {

        padding:
            75px 0;

    }

    .industries-metrics-grid {

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

    }

    .industry-metric {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.22
            );

    }

    .industry-metric:nth-child(2n) {

        border-right:
            0;

    }

}


/* ============================================================
   14. INDUSTRY CAPABILITIES
   ============================================================ */

.industries-capabilities {

    padding:
        140px 0;

}


.industries-capabilities-header {

    max-width:
        760px;

    margin-bottom:
        65px;

}


.industries-capabilities-header h2 {

    margin:
        15px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            40px,
            5vw,
            68px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.055em;

}


.industries-capabilities-header p {

    max-width:
        570px;

    margin:
        25px 0 0;

    color:
        var(--industry-muted);

    font-size:
        13px;

    line-height:
        1.8;

}


.industries-capability-grid {

    display:
        grid;

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

    border-top:
        1px solid var(--industry-border);

    border-left:
        1px solid var(--industry-border);

}


.industries-capability {

    min-height:
        220px;

    padding:
        28px;

    border-right:
        1px solid var(--industry-border);

    border-bottom:
        1px solid var(--industry-border);

    transition:
        background-color 220ms ease;

}


.industries-capability:hover {

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

}


.industries-capability-number {

    color:
        var(--industry-blue);

    font-size:
        10px;

    font-weight:
        700;

}


.industries-capability h3 {

    margin:
        50px 0 10px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        19px;

    line-height:
        1.1;

}


.industries-capability p {

    margin:
        0;

    color:
        var(--industry-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


@media (max-width: 900px) {

    .industries-capability-grid {

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

    }

}


@media (max-width: 600px) {

    .industries-capabilities {

        padding:
            85px 0;

    }

    .industries-capability-grid {

        grid-template-columns:
            1fr;

    }

}


/* ============================================================
   15. INDUSTRY CTA
   ============================================================ */

.industries-cta {

    position:
        relative;

    overflow:
        hidden;

    padding:
        140px 0;

    background:
        var(--industry-black);

    color:
        var(--industry-white);

}


.industries-cta::before {

    content:
        "";

    position:
        absolute;

    right:
        -180px;

    top:
        -180px;

    width:
        500px;

    height:
        500px;

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

    border-radius:
        50%;

}


.industries-cta::after {

    content:
        "";

    position:
        absolute;

    right:
        -90px;

    top:
        -90px;

    width:
        320px;

    height:
        320px;

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

    border-radius:
        50%;

}


.industries-cta-inner {

    position:
        relative;

    z-index:
        2;

}


.industries-cta h2 {

    max-width:
        900px;

    margin:
        15px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            46px,
            6vw,
            88px
        );

    line-height:
        0.91;

    letter-spacing:
        -0.065em;

}


.industries-cta h2 span {

    color:
        var(--industry-blue);

}


.industries-cta p {

    max-width:
        580px;

    margin:
        28px 0 0;

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

    font-size:
        14px;

    line-height:
        1.8;

}


.industries-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        35px;

}


.industries-cta-primary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 28px;

    background:
        var(--industry-blue);

    color:
        var(--industry-white);

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

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

}


.industries-cta-primary:hover {

    background:
        var(--industry-blue-dark);

    transform:
        translateY(-2px);

}


.industries-cta-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 28px;

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

    color:
        var(--industry-white);

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

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

}


.industries-cta-secondary:hover {

    border-color:
        var(--industry-blue);

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

}


/* ============================================================
   16. SHARED BUTTONS
   ============================================================ */

.industry-btn-blue {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 25px;

    background:
        var(--industry-blue);

    color:
        var(--industry-white);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

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

}


.industry-btn-blue:hover {

    background:
        var(--industry-blue-dark);

    transform:
        translateY(-2px);

}


.industry-btn-outline {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 25px;

    border:
        1px solid var(--industry-border-strong);

    color:
        var(--industry-black);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;

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

}


.industry-btn-outline:hover {

    border-color:
        var(--industry-blue);

    color:
        var(--industry-blue);

}


/* ============================================================
   17. ACCESSIBILITY
   ============================================================ */

.industries-page a:focus-visible,
.industries-page button:focus-visible {

    outline:
        3px solid
        rgba(
            30,
            109,
            187,
            0.28
        );

    outline-offset:
        4px;

}


/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

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

    .industry-row,
    .industry-row-arrow,
    .industries-capability,
    .industries-cta-primary,
    .industries-cta-secondary,
    .industry-btn-blue,
    .industry-btn-outline {

        transition:
            none !important;

    }

}