/* =========================================================
   ALL KLEER COMPUTER SYSTEMS
   Main Stylesheet
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--background);
    color: var(--text);

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

    transition:
        background-color 250ms ease,
        color 250ms ease;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    font: inherit;
}



/* =========================================================
   BRAND / LIGHT THEME
   ========================================================= */

:root {

    --green: #52b052;

    --background: #f3f1eb;
    --surface: #faf8f3;
    --surface-soft: rgba(255, 255, 255, 0.32);

    --text: #292929;
    --text-strong: #1f1f1f;

    --muted: #70706d;

    --border: rgba(38, 38, 38, 0.18);

    --grid-line: rgba(38, 38, 38, 0.065);

    --button-text: #ffffff;

    --max-width: 1640px;

}



/* =========================================================
   DARK THEME
   ========================================================= */

body.dark-theme {

    --background: #171817;

    --surface: #202120;

    --surface-soft: rgba(255, 255, 255, 0.025);

    --text: #f7f2eb;

    --text-strong: #fffaf4;

    --muted: #aaa9a4;

    --border: rgba(247, 242, 235, 0.17);

    --grid-line: rgba(247, 242, 235, 0.055);

}



/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    width:
        min(
            calc(100% - 6rem),
            var(--max-width)
        );

    margin:
        0
        auto;


    min-height: 126px;


    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;


    align-items: center;


    gap: 4rem;


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

}



/* =========================================================
   LOGO
   ========================================================= */

.site-logo {

    justify-self: start;


    position: relative;


    display: flex;

    align-items: center;


    width: 300px;

}


.site-logo img {

    width: 100%;

    height: auto;

}


/* light background logo */

.logo-for-dark-theme {
    display: none;
}


/* dark background logo */

body.dark-theme .logo-for-light-theme {
    display: none;
}


body.dark-theme .logo-for-dark-theme {
    display: block;
}



/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {

    display: flex;

    align-items: center;


    gap: 3rem;


    font-size: 0.9rem;


    text-transform: uppercase;


    letter-spacing: 0.13em;

}


.main-nav a {

    position: relative;


    padding:
        0.8rem
        0;

}


.main-nav a::after {

    content: "";


    position: absolute;


    left: 0;

    bottom: 0;


    width: 0;

    height: 2px;


    background: var(--green);


    transition:
        width 180ms ease;

}


.main-nav a:hover::after {

    width: 100%;

}



/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {

    justify-self: end;


    display: flex;

    align-items: center;


    gap: 1rem;

}



/* =========================================================
   THEME TOGGLE — VISIBLE ACCESSIBILITY CONTROL
   ========================================================= */

.theme-toggle {
    min-width: 118px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;

    padding: 0.45rem 0.85rem 0.45rem 0.65rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)),
        transparent;

    color: var(--text);
    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 0 0 1px rgba(255,255,255,0);

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

.theme-toggle:hover {
    color: var(--green);
    border-color: var(--green);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 22px rgba(104, 255, 133, 0.11);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
    border-color: var(--green);
}

.theme-toggle-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border: 1px solid currentColor;
    border-radius: 50%;

    font-size: 1rem;
    line-height: 1;

    transition:
        transform 220ms ease,
        background 180ms ease;
}

.theme-toggle:hover .theme-toggle-icon {
    transform: rotate(18deg);
}

.theme-toggle-copy {
    display: grid;
    gap: 0.05rem;
    text-align: left;
    line-height: 1;
}

.theme-toggle-kicker {
    font-family: var(--font-tech, monospace);
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.58;
}

.theme-toggle-value {
    font-family: var(--font-tech, monospace);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The selected state stays obvious in both colorways. */
body:not(.dark-theme) .theme-toggle {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18)),
        rgba(255,255,255,0.15);
}

@media (max-width: 760px) {
    .theme-toggle {
        min-width: 48px;
        width: 48px;
        padding: 0;
        justify-content: center;
    }

    .theme-toggle-copy {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .theme-toggle-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
}


/* =========================================================
   HEADER CTA
   ========================================================= */

.header-cta {

    padding:
        1rem
        1.7rem;


    border:
        1px
        solid
        var(--text);


    border-radius: 100px;


    font-size: 0.84rem;


    text-transform: uppercase;


    letter-spacing: 0.11em;


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

}


.header-cta:hover {

    background: var(--green);

    border-color: var(--green);

    color: white;


    transform:
        translateY(-2px);

}



/* =========================================================
   HERO
   ========================================================= */

.hero {

    width:
        min(
            calc(100% - 6rem),
            var(--max-width)
        );


    margin:
        0
        auto;


    display: grid;


    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(440px, 0.62fr);


    min-height: 770px;


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

}



/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {

    position: relative;


    padding:

        clamp(6rem, 9vw, 10rem)

        clamp(4rem, 7vw, 8rem)

        clamp(6rem, 9vw, 10rem)

        0;


    display: flex;

    flex-direction: column;

    justify-content: center;


    overflow: hidden;

}



/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.hero-content::before {

    content: "";


    position: absolute;

    inset: 0;


    pointer-events: none;


    opacity: 0.8;


    background-image:

        linear-gradient(
            var(--grid-line) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--grid-line) 1px,
            transparent 1px
        );


    background-size:
        56px
        56px;


    mask-image:

        linear-gradient(
            to right,
            black,
            transparent 92%
        );

}


/* keep content above grid */

.hero-content > * {

    position: relative;

    z-index: 1;

}



/* =========================================================
   HERO EYEBROW
   ========================================================= */

.hero-eyebrow {

    margin:
        0
        0
        2.8rem;


    color: var(--green);


    font-family:
        var(--akcs-tech-sans);


    font-size: 0.9rem;


    line-height: 1.5;


    letter-spacing: 0.14em;

}



/* =========================================================
   HERO HEADLINE
   ========================================================= */

.hero h1 {

    margin: 0;


    max-width: 1050px;


    color: var(--text-strong);


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


    line-height: 0.9;


    letter-spacing: -0.065em;


    font-weight: 600;

}


.hero h1 span {

    display: block;

}



/* =========================================================
   HERO INTRO
   ========================================================= */

.hero-intro {

    max-width: 760px;


    margin:
        3rem
        0
        0;


    color: var(--muted);


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


    line-height: 1.65;

}



/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {

    margin-top: 3.5rem;


    display: flex;

    flex-wrap: wrap;


    gap: 1rem;

}


.button {

    display: inline-flex;


    align-items: center;

    justify-content: center;


    gap: 0.9rem;


    min-height: 58px;


    padding:
        1rem
        1.9rem;


    border-radius: 100px;


    font-size: 0.86rem;


    text-transform: uppercase;


    letter-spacing: 0.11em;


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

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-arrow {

    font-size: 1.1rem;


    transition:
        transform 180ms ease;

}


.button-primary:hover .button-arrow {

    transform:
        translateX(4px);

}



/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.button-primary {

    background: var(--green);

    color: white;


    border:
        1px
        solid
        var(--green);

}


.button-primary:hover {

    background: var(--text);

    border-color: var(--text);

    color: var(--background);

}



/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.button-secondary {

    border:
        1px
        solid
        var(--text);

}


.button-secondary:hover {

    background: var(--text);

    color: var(--background);

}



/* =========================================================
   HERO SYSTEM PANEL
   ========================================================= */

.hero-system {

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


    padding:

        clamp(5rem, 7vw, 8rem)

        clamp(3rem, 4vw, 5rem);


    background: var(--surface-soft);


    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* =========================================================
   SYSTEM TYPOGRAPHY
   ========================================================= */

.hero-system,
.system-status {

    font-family:
        var(--akcs-tech-sans);

}



/* =========================================================
   STATUS
   ========================================================= */

.system-status {

    display: flex;

    align-items: center;


    gap: 0.8rem;


    margin-bottom: 2.6rem;


    color: var(--green);


    font-size: 0.82rem;


    letter-spacing: 0.12em;

}



.status-dot {

    width: 10px;

    height: 10px;


    flex: 0 0 auto;


    border-radius: 50%;


    background: var(--green);


    box-shadow:

        0 0 0 6px
        rgba(82, 176, 82, 0.12);

}



/* =========================================================
   SYSTEM CORE
   ========================================================= */

.system-core {

    min-height: 82px;


    padding:
        1.3rem
        1.5rem;


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


    display: flex;

    align-items: center;

    justify-content: space-between;


    font-family:
        var(--akcs-tech-sans);


    font-size: 0.95rem;

}


.system-core span:last-child {

    color: var(--green);

}



/* =========================================================
   ARROW
   ========================================================= */

.system-arrow {

    padding:
        1.3rem
        0;


    text-align: center;


    color: var(--muted);


    font-size: 1.25rem;

}



/* =========================================================
   SYSTEM GRID
   ========================================================= */

.system-grid {

    display: grid;


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


    gap: 0.9rem;

}


.system-grid div {

    min-height: 72px;


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


    display: flex;

    align-items: center;

    justify-content: center;


    font-family:
        var(--akcs-tech-sans);


    font-size: 0.84rem;


    letter-spacing: 0.06em;


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

}


.system-grid div:hover {

    border-color: var(--green);


    background:
        rgba(82, 176, 82, 0.07);


    color: var(--green);


    transform:
        translateY(-2px);

}



/* =========================================================
   SYSTEM DETAILS
   ========================================================= */

.system-details {

    margin-top: 2.5rem;


    padding-top: 2rem;


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

}


.system-details div {

    padding:
        0.55rem
        0;


    display: flex;

    justify-content: space-between;


    gap: 2rem;


    font-family:
        var(--akcs-tech-sans);


    font-size: 0.78rem;

}


.system-details span {

    color: var(--muted);

}


.system-details strong {

    font-weight: normal;

}


.system-details div:last-child strong {

    color: var(--green);

}



/* =========================================================
   EXPERTISE
   ========================================================= */

.expertise {

    width:
        min(
            calc(100% - 6rem),
            var(--max-width)
        );


    margin:
        0
        auto;


    padding:
        9rem
        0;

}



/* =========================================================
   SECTION LABEL
   ========================================================= */

.section-label {

    margin:
        0
        0
        2.5rem;


    color: var(--green);


    font-family:
        var(--akcs-tech-sans);


    font-size: 0.85rem;


    letter-spacing: 0.14em;

}



/* =========================================================
   EXPERTISE HEADLINE
   ========================================================= */

.expertise h2 {

    margin: 0;


    max-width: 1100px;


    color: var(--text-strong);


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


    line-height: 1;


    letter-spacing: -0.045em;


    font-weight: 500;

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {


    .site-header {

        width:
            min(
                calc(100% - 3rem),
                var(--max-width)
            );


        grid-template-columns:
            1fr
            auto;


        min-height: 110px;

    }


    .main-nav {

        display: none;

    }


    .site-logo {

        width: 250px;

    }


    .hero {

        width:
            min(
                calc(100% - 3rem),
                var(--max-width)
            );


        grid-template-columns:
            1fr;


        min-height: unset;

    }


    .hero-content {

        padding:
            7rem
            0
            6rem;

    }


    .hero-system {

        border-left: 0;


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


        padding:
            5rem
            3rem;

    }


    .expertise {

        width:
            min(
                calc(100% - 3rem),
                var(--max-width)
            );

    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {


    .site-header {

        width:
            calc(100% - 2rem);


        min-height: 92px;


        gap: 1rem;

    }


    .site-logo {

        width: 190px;

    }


    .header-actions {

        gap: 0.5rem;

    }


    .header-cta {

        display: none;

    }


    .theme-toggle {

        width: 44px;

        height: 44px;

    }


    .hero {

        width:
            calc(100% - 2rem);

    }


    .hero-content {

        padding:
            5rem
            0
            4.5rem;

    }


    .hero h1 {

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


        line-height: 0.91;

    }


    .hero-eyebrow {

        max-width: 340px;


        font-size: 0.76rem;

    }


    .hero-intro {

        margin-top: 2rem;


        font-size: 1.12rem;

    }


    .hero-actions {

        margin-top: 2.7rem;


        flex-direction: column;


        align-items: stretch;

    }


    .button {

        width: 100%;


        min-height: 56px;

    }


    .hero-system {

        padding:
            3.5rem
            1.2rem;

    }


    .system-grid {

        gap: 0.6rem;

    }


    .system-grid div {

        min-height: 65px;

    }


    .system-details div {

        gap: 1rem;


        font-size: 0.7rem;

    }


    .expertise {

        width:
            calc(100% - 2rem);


        padding:
            6rem
            0;

    }

}

/* =========================================================
   SHARED INTERIOR PAGES + FOOTER
   ========================================================= */

.main-nav a.active::after {
    width: 100%;
}

.home-expertise-grid {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.home-expertise-card {
    min-height: 270px;
    padding: 2.5rem;
    border-right: 1px solid var(--border);
    transition: background 180ms ease;
}

.home-expertise-card:last-child {
    border-right: 0;
}

.home-expertise-card:hover {
    background: var(--surface-soft);
}

.home-expertise-number,
.expertise-number,
.insight-type,
.insight-arrow,
.heritage-line,
.values-grid span {
    font-family: var(--akcs-tech-sans);
}

.home-expertise-number {
    display: block;
    margin-bottom: 3rem;
    color: var(--green);
    font-size: 0.78rem;
}

.home-expertise-card h3 {
    margin: 0 0 1rem;
    font-size: 1.8rem;
    font-weight: 500;
}

.home-expertise-card p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

.heritage-band {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    padding: 8rem 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 6rem;
    border-top: 1px solid var(--border);
}

.heritage-band h2 {
    margin: 0;
    max-width: 850px;
    font-size: clamp(3rem, 4.8vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.heritage-copy {
    align-self: end;
}

.heritage-copy p {
    margin: 0 0 3rem;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1.7;
}

.heritage-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
}

.heritage-line span {
    color: var(--green);
}

.page-hero {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    min-height: 590px;
    padding: 8rem 0 7rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, black, transparent 80%);
}

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

.page-hero h1 {
    margin: 0;
    max-width: 1200px;
    color: var(--text-strong);
    font-size: clamp(4.7rem, 7.8vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
    font-weight: 600;
}

.page-hero h1 span {
    display: block;
}

.page-hero .hero-intro {
    max-width: 820px;
}

.page-section,
.contact-section,
.page-cta {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
}

.page-section,
.contact-section {
    padding: 8rem 0;
    border-bottom: 1px solid var(--border);
}

.page-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
    gap: 6rem;
    align-items: start;
}

.page-copy h2,
.contact-intro h2 {
    margin: 0;
    font-size: clamp(3rem, 4.5vw, 5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.page-copy-body p,
.contact-intro > p:last-child {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 1.18rem;
    line-height: 1.75;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.values-grid > div {
    min-height: 190px;
    padding: 2.2rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.values-grid span {
    color: var(--green);
    font-size: 0.78rem;
}

.values-grid h3 {
    margin: 2.5rem 0 0;
    font-size: 1.65rem;
    font-weight: 500;
}

.expertise-list {
    border-top: 1px solid var(--border);
}

.expertise-item {
    display: grid;
    grid-template-columns: 90px minmax(260px, 0.72fr) minmax(320px, 1fr);
    gap: 3rem;
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--border);
}

.expertise-number {
    color: var(--green);
    font-size: 0.82rem;
    padding-top: 0.55rem;
}

.expertise-item h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 500;
}

.expertise-item p {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.insight-card {
    position: relative;
    min-height: 360px;
    padding: 2.6rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background 180ms ease;
}

.insight-card:hover {
    background: var(--surface-soft);
}

.insight-type {
    color: var(--green);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.insight-card h2 {
    margin: 3rem 0 1.4rem;
    max-width: 620px;
    font-size: clamp(1.8rem, 2.7vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 500;
}

.insight-card p {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.insight-arrow {
    position: absolute;
    right: 2.6rem;
    bottom: 2.5rem;
    color: var(--green);
    font-size: 1.5rem;
}

.insights-note {
    margin: 2rem 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.contact-section {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 7rem;
    align-items: start;
}

.contact-intro h2 {
    margin-bottom: 2rem;
}

.contact-form {
    padding: 3rem;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--muted);
    font-family: var(--akcs-tech-sans);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    padding: 1rem 1.1rem;
    outline: none;
    transition: border-color 180ms ease, background 180ms ease;
}

.form-field input,
.form-field select {
    min-height: 54px;
}

.form-field textarea {
    resize: vertical;
    min-height: 180px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--green);
    background: rgba(82, 176, 82, 0.035);
}

.form-field select option {
    color: #222;
}

.page-cta {
    padding: 8rem 0 9rem;
}

.page-cta h2 {
    margin: 0 0 3rem;
    max-width: 1050px;
    font-size: clamp(3rem, 5vw, 5.7rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.site-footer {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.footer-main {
    padding: 5rem 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: center;
}

.footer-brand {
    width: 220px;
    flex: 0 0 220px;
}

.footer-brand img,
.footer-monogram {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    flex-shrink: 0;
}

.footer-message .section-label {
    margin-bottom: 0.8rem;
}

.footer-tagline {
    margin: 0;
    font-size: clamp(1.7rem, 2.4vw, 2.7rem);
    letter-spacing: -0.03em;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.9rem 2.4rem;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-nav a:hover {
    color: var(--green);
}

.footer-bottom {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--akcs-tech-sans);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.footer-bottom p {
    margin: 0;
}

@media (max-width: 1100px) {
    .heritage-band,
    .page-hero,
    .page-section,
    .contact-section,
    .page-cta,
    .site-footer {
        width: min(calc(100% - 3rem), var(--max-width));
    }

    .home-expertise-grid {
        grid-template-columns: 1fr;
    }

    .home-expertise-card {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .home-expertise-card:last-child {
        border-bottom: 0;
    }

    .heritage-band,
    .page-copy,
    .contact-section {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .expertise-item {
        grid-template-columns: 70px 0.9fr 1.1fr;
        gap: 2rem;
    }

    .footer-main {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .footer-brand {
        width: 170px;
        flex-basis: 170px;
    }

    .footer-nav {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, auto);
        justify-content: start;
    }
}

@media (max-width: 650px) {
    .heritage-band,
    .page-hero,
    .page-section,
    .contact-section,
    .page-cta,
    .site-footer {
        width: calc(100% - 2rem);
    }

    .home-expertise-grid {
        margin-top: 3.5rem;
    }

    .home-expertise-card {
        min-height: 220px;
        padding: 2rem 1.5rem;
    }

    .heritage-band,
    .page-section,
    .contact-section {
        padding: 6rem 0;
    }

    .page-hero {
        min-height: unset;
        padding: 6rem 0 5rem;
    }

    .page-hero h1 {
        font-size: clamp(3.7rem, 16vw, 5.2rem);
    }

    .values-grid,
    .insights-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .expertise-item {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 2.5rem 0;
    }

    .expertise-number {
        padding-top: 0;
    }

    .insight-card {
        min-height: 320px;
        padding: 2rem 1.5rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .page-cta {
        padding: 6rem 0 7rem;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 4rem 0;
    }

    .footer-brand {
        width: 140px;
        flex-basis: 140px;
    }

    .footer-nav {
        grid-column: auto;
        grid-template-columns: repeat(2, auto);
    }

    .footer-bottom {
        padding: 1.5rem 0;
        min-height: unset;
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   HEADER BRAND GROUP
   ========================================================= */

.header-brand-group {
    justify-self: start;

    display: flex;
    align-items: center;
    gap: 1.4rem;

    min-width: 0;
}

.site-logo {
    justify-self: auto;
    flex: 0 0 300px;
}

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.header-sage-badges {
    display: flex;
    align-items: center;
    gap: 0.7rem;

    padding-left: 1.3rem;

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

.header-sage-badges img {
    display: block;

    width: auto;
    height: 36px;

    object-fit: contain;
}


/* =========================================================
   SAGE PARTNER BRANDING
   ========================================================= */

.sage-partner-strip {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;

    padding: 3.2rem 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4rem;

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

.sage-partner-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}

.sage-partner-kicker {
    margin: 0;

    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.sage-partner-copy p:last-child {
    margin: 0;

    max-width: 760px;

    color: var(--muted);

    font-size: 1.05rem;
    line-height: 1.55;
}

.sage-partner-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.sage-partner-badge {
    display: block;

    width: auto;
    height: 58px;

    object-fit: contain;
}

.sage-partner-panel {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;

    padding: 7rem 0;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 6rem;
    align-items: center;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sage-partner-panel h2 {
    margin: 0;

    max-width: 850px;

    font-size: clamp(3rem, 4.6vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.sage-partner-panel-copy p {
    margin: 0 0 2rem;

    color: var(--muted);

    font-size: 1.14rem;
    line-height: 1.7;
}

.sage-partner-panel .sage-partner-badges {
    justify-content: flex-start;
}

.sage-partner-panel .sage-partner-badge {
    height: 72px;
}


/* =========================================================
   FOOTER PARTNER BRANDING
   ========================================================= */

.footer-partner-badges {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin-top: 1.4rem;
}

.footer-partner-badges img {
    display: block;

    width: auto;
    height: 42px;

    object-fit: contain;
}


/* =========================================================
   RESPONSIVE PARTNER BRANDING
   ========================================================= */

@media (max-width: 1280px) {

    .site-logo {
        flex-basis: 250px;
    }

    .header-sage-badges img {
        height: 31px;
    }

}


@media (max-width: 1100px) {

    .header-sage-badges {
        display: none;
    }

    .sage-partner-strip,
    .sage-partner-panel {
        width: min(calc(100% - 3rem), var(--max-width));
    }

    .sage-partner-strip {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sage-partner-copy {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .sage-partner-badges {
        justify-content: flex-start;
    }

    .sage-partner-panel {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

}


@media (max-width: 650px) {

    .site-logo {
        flex-basis: 190px;
    }

    .sage-partner-strip,
    .sage-partner-panel {
        width: calc(100% - 2rem);
    }

    .sage-partner-strip {
        padding: 2.5rem 0;
    }

    .sage-partner-badges {
        flex-direction: column;
        align-items: flex-start;
    }

    .sage-partner-badge,
    .sage-partner-panel .sage-partner-badge {
        height: 52px;
    }

    .sage-partner-panel {
        padding: 5.5rem 0;
    }

    .footer-partner-badges {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   ACCESSIBILITY / LEGIBILITY PASS
   Larger, bolder technical typography for older eyes
   ========================================================= */

/* Global technical labels */
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.system-status,
.system-core,
.system-grid,
.system-details,
.home-expertise-number,
.expertise-number,
.insight-type,
.insight-arrow,
.heritage-line,
.values-grid span,
.form-field label,
.footer-bottom {
    font-weight: 700;
    letter-spacing: 0.10em;
}

/* Hero eyebrow / section labels */
.hero-eyebrow {
    font-size: 1.08rem;
    line-height: 1.6;
}

.section-label {
    font-size: 1rem;
    line-height: 1.5;
}

/* SYSTEM / HEALTHY */
.system-status {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    margin-bottom: 3rem;
}

.status-dot {
    width: 13px;
    height: 13px;
    box-shadow:
        0 0 0 7px rgba(82, 176, 82, 0.14);
}

/* SAGE 100 / CORE */
.system-core {
    min-height: 94px;
    padding: 1.55rem 1.7rem;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}

/* PROVIDEX / ODBC / SHIPPING / WMS / REPORTS / PAYROLL */
.system-grid div {
    min-height: 84px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}

/* EXPERIENCE / FOCUS / ANSWER */
.system-details div {
    padding: 0.72rem 0;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.system-details strong {
    font-weight: 800;
}

/* Partner credential strip */
.sage-partner-kicker {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.sage-partner-copy p:last-child {
    font-size: 1.22rem;
    line-height: 1.65;
    font-weight: 600;
}

/* Bigger Sage badges everywhere */
.header-sage-badges img {
    height: 44px;
}

.sage-partner-badge {
    height: 72px;
}

.sage-partner-panel .sage-partner-badge {
    height: 86px;
}

.footer-partner-badges img {
    height: 50px;
}

/* Slightly more visual weight in nav / buttons */
.main-nav {
    font-size: 1rem;
    font-weight: 700;
}

.header-cta,
.button {
    font-size: 0.96rem;
    font-weight: 700;
}

/* Technical numbering / article tags */
.home-expertise-number,
.expertise-number,
.insight-type,
.values-grid span {
    font-size: 0.96rem;
    font-weight: 800;
}

.heritage-line {
    font-size: 1rem;
    font-weight: 800;
}

/* Form labels */
.form-field label {
    font-size: 0.9rem;
    font-weight: 800;
}

/* Footer technical line */
.footer-bottom {
    font-size: 0.84rem;
    font-weight: 700;
}

/* Keep the technical text comfortable on tablets */
@media (max-width: 1100px) {

    .system-status {
        font-size: 1.02rem;
    }

    .system-core {
        font-size: 1.1rem;
    }

    .system-grid div {
        font-size: 0.98rem;
    }

    .system-details div {
        font-size: 0.9rem;
    }

    .header-sage-badges img {
        height: 38px;
    }

}

/* Mobile: still bold, but not comically huge */
@media (max-width: 650px) {

    .hero-eyebrow {
        font-size: 0.88rem;
    }

    .section-label {
        font-size: 0.9rem;
    }

    .system-status {
        font-size: 0.94rem;
    }

    .system-core {
        min-height: 84px;
        font-size: 1rem;
    }

    .system-grid div {
        min-height: 74px;
        font-size: 0.9rem;
    }

    .system-details div {
        font-size: 0.8rem;
    }

    .sage-partner-kicker {
        font-size: 0.9rem;
    }

    .sage-partner-copy p:last-child {
        font-size: 1.08rem;
    }

    .sage-partner-badge,
    .sage-partner-panel .sage-partner-badge {
        height: 58px;
    }

    .footer-partner-badges img {
        height: 44px;
    }

}


/* =========================================================
   HERO INSIGHTS TOPICS
   Clickable knowledge-base navigation
   ========================================================= */

.hero-topics {
    position: relative;
    z-index: 1;

    margin: 0 0 2.8rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;

    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.10em;
}

.hero-topics > span {
    opacity: 0.55;
    user-select: none;
}

.hero-topics a {
    position: relative;

    color: var(--green);

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.hero-topics a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -0.15rem;

    width: 0;
    height: 2px;

    background: currentColor;

    transition: width 180ms ease;
}

.hero-topics a:hover,
.hero-topics a:focus-visible {
    color: var(--text-strong);
}

.hero-topics a:hover::after,
.hero-topics a:focus-visible::after {
    width: 100%;
}


/* =========================================================
   CLICKABLE SYSTEM GRID
   ========================================================= */

.system-grid a {
    min-height: 84px;

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

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0 1.4rem;

    font-family: var(--akcs-tech-sans);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.07em;

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

.system-grid a:hover,
.system-grid a:focus-visible {
    border-color: var(--green);

    background: rgba(82, 176, 82, 0.07);

    color: var(--green);

    transform: translateY(-2px);
}

.system-link-arrow {
    flex: 0 0 auto;

    color: var(--green);

    font-size: 1.05rem;
    line-height: 1;

    opacity: 0.42;

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

.system-grid a:hover .system-link-arrow,
.system-grid a:focus-visible .system-link-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* Disable the old div-only styling now that the boxes are links. */
.system-grid div {
    min-height: unset;
    border: 0;
    display: block;
    font-size: inherit;
    letter-spacing: inherit;
    transform: none;
}

.system-grid div:hover {
    border-color: initial;
    background: transparent;
    color: inherit;
    transform: none;
}


/* =========================================================
   MOBILE TOPIC + SYSTEM LINK ADJUSTMENTS
   ========================================================= */

@media (max-width: 650px) {

    .hero-topics {
        margin-bottom: 2.2rem;

        gap: 0.55rem;

        font-size: 0.88rem;
        line-height: 1.7;
    }

    .system-grid a {
        min-height: 74px;

        padding: 0 1rem;

        font-size: 0.9rem;
    }

}



/* =========================================================
   OVERSIZED MONOGRAM BRANDING
   Intentionally large — statement-scale brand mark
   ========================================================= */

.footer-brand {
    width: 220px;
    flex: 0 0 220px;
}

.footer-brand .footer-monogram,
.footer-brand img {
    width: 220px;
    max-width: none;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .footer-brand {
        width: 170px;
        flex-basis: 170px;
    }

    .footer-brand .footer-monogram,
    .footer-brand img {
        width: 170px;
    }
}

@media (max-width: 650px) {
    .footer-brand {
        width: 140px;
        flex-basis: 140px;
    }

    .footer-brand .footer-monogram,
    .footer-brand img {
        width: 140px;
    }
}


/* =========================================================
   HEADER COLLISION FIX
   Keep Sage partner badges out of the primary navigation.
   They remain visible in the homepage partner sections/footer.
   ========================================================= */

.header-sage-badges {
    display: none !important;
}

.header-brand-group {
    min-width: 0;
    max-width: 100%;
}

.site-header {
    grid-template-columns:
        minmax(260px, 1fr)
        auto
        minmax(220px, 1fr);

    gap: clamp(1.5rem, 3vw, 3rem);
}

.site-logo {
    width: min(300px, 100%);
    flex: 0 1 300px;
    min-width: 0;
}

.site-logo img,
.site-logo-image {
    width: 100%;
    max-width: 300px;
    height: auto;
}

@media (max-width: 1280px) {
    .site-header {
        gap: 1.5rem;
    }

    .site-logo {
        width: 250px;
        flex-basis: 250px;
    }
}

@media (max-width: 1100px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 650px) {
    .site-logo {
        width: 190px;
        flex-basis: 190px;
    }
}


/* =========================================================
   GLOBAL TECH GLOW BACKGROUND
   Subtle radial light zones + responsive technical grid
   ========================================================= */

body {
    position: relative;
    isolation: isolate;
}

/* Base ambient glows */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(82, 176, 82, 0.16) 0%,
            rgba(82, 176, 82, 0.08) 16%,
            transparent 36%
        ),
        radial-gradient(
            circle at 84% 32%,
            rgba(74, 126, 185, 0.13) 0%,
            rgba(74, 126, 185, 0.06) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 62% 78%,
            rgba(71, 145, 131, 0.08) 0%,
            transparent 30%
        );

    opacity: 0.95;
}

/* Grid layer — brighter where the hotspots are */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(82, 176, 82, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.07) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    /* Keep the grid faint overall, then reveal it more strongly near glow zones */
    -webkit-mask-image:
        radial-gradient(
            circle at 14% 22%,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.56) 20%,
            rgba(0, 0, 0, 0.16) 42%,
            transparent 58%
        ),
        radial-gradient(
            circle at 84% 32%,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.42) 20%,
            rgba(0, 0, 0, 0.12) 40%,
            transparent 56%
        ),
        linear-gradient(
            rgba(0,0,0,0.14),
            rgba(0,0,0,0.14)
        );

    -webkit-mask-composite: source-over;
    mask-image:
        radial-gradient(
            circle at 14% 22%,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.56) 20%,
            rgba(0, 0, 0, 0.16) 42%,
            transparent 58%
        ),
        radial-gradient(
            circle at 84% 32%,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.42) 20%,
            rgba(0, 0, 0, 0.12) 40%,
            transparent 56%
        ),
        linear-gradient(
            rgba(0,0,0,0.14),
            rgba(0,0,0,0.14)
        );

    opacity: 0.8;
}

/* Dark theme gets slightly stronger, richer glows */
body.dark-theme::before {
    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(82, 176, 82, 0.22) 0%,
            rgba(82, 176, 82, 0.11) 16%,
            transparent 38%
        ),
        radial-gradient(
            circle at 84% 32%,
            rgba(58, 108, 169, 0.18) 0%,
            rgba(58, 108, 169, 0.08) 18%,
            transparent 40%
        ),
        radial-gradient(
            circle at 62% 78%,
            rgba(69, 140, 128, 0.11) 0%,
            transparent 32%
        );
}

body.dark-theme::after {
    background-image:
        linear-gradient(
            rgba(120, 230, 160, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 230, 160, 0.08) 1px,
            transparent 1px
        );

    opacity: 0.9;
}


/* =========================================================
   PAGE-SPECIFIC GLOW PLACEMENT
   Same language, different personality
   ========================================================= */

body.page-about::before {
    background:
        radial-gradient(
            circle at 18% 26%,
            rgba(82, 176, 82, 0.18) 0%,
            rgba(82, 176, 82, 0.08) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 78% 66%,
            rgba(74, 126, 185, 0.10) 0%,
            transparent 34%
        );
}

body.page-expertise::before {
    background:
        radial-gradient(
            circle at 28% 18%,
            rgba(82, 176, 82, 0.17) 0%,
            transparent 36%
        ),
        radial-gradient(
            circle at 72% 48%,
            rgba(74, 126, 185, 0.13) 0%,
            transparent 34%
        );
}

body.page-contact::before {
    background:
        radial-gradient(
            circle at 16% 74%,
            rgba(82, 176, 82, 0.15) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 86% 18%,
            rgba(74, 126, 185, 0.12) 0%,
            transparent 34%
        );
}

body.page-insights::before,
body.page-insight-article::before {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(82, 176, 82, 0.16) 0%,
            transparent 36%
        ),
        radial-gradient(
            circle at 88% 26%,
            rgba(74, 126, 185, 0.15) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 54% 82%,
            rgba(78, 142, 132, 0.08) 0%,
            transparent 28%
        );
}


/* =========================================================
   KEEP CONTENT SURFACES READABLE
   ========================================================= */

.hero-system,
.contact-form,
.insight-card,
.home-expertise-card,
.values-grid > div,
.sage-partner-strip,
.sage-partner-panel,
.page-section,
.contact-section,
.page-cta,
.site-footer {
    position: relative;
}

/* Soft translucent surface so the background remains visible but never fights text */
.hero-system,
.contact-form {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


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

@media (max-width: 1100px) {

    body::after {
        background-size: 48px 48px;
    }

}

@media (max-width: 650px) {

    body::before {
        background:
            radial-gradient(
                circle at 12% 16%,
                rgba(82, 176, 82, 0.13) 0%,
                transparent 38%
            ),
            radial-gradient(
                circle at 88% 30%,
                rgba(74, 126, 185, 0.10) 0%,
                transparent 36%
            );
    }

    body::after {
        background-size: 42px 42px;
        opacity: 0.62;
    }

}


/* =========================================================
   LARGER ALL KLEER HEADER LOGO
   Stronger brand anchor / home button
   ========================================================= */

.site-logo {
    width: min(380px, 100%);
    flex: 0 1 380px;
}

.site-logo img,
.site-logo-image {
    width: 100%;
    max-width: 380px;
    height: auto;
}

@media (max-width: 1280px) {

    .site-logo {
        width: 320px;
        flex-basis: 320px;
    }

    .site-logo img,
    .site-logo-image {
        max-width: 320px;
    }

}

@media (max-width: 1100px) {

    .site-logo {
        width: 280px;
        flex-basis: 280px;
    }

    .site-logo img,
    .site-logo-image {
        max-width: 280px;
    }

}

@media (max-width: 650px) {

    .site-logo {
        width: 220px;
        flex-basis: 220px;
    }

    .site-logo img,
    .site-logo-image {
        max-width: 220px;
    }

}


/* =========================================================
   TECH GLOW VISIBILITY FIX
   Keep the glow/grid above the body background but below site content.
   ========================================================= */

body {
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    z-index: 0;
}

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

/* Make the background effect a touch more visible */
body::before {
    opacity: 1;
}

body::after {
    opacity: 0.92;
}

body.dark-theme::after {
    opacity: 1;
}


/* =========================================================
   TECH GLOW — FOURTH OF JULY MODE
   Much brighter hotspots + a more visible full-page grid.
   ========================================================= */

body::before {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(82, 255, 136, 0.42) 0%,
            rgba(82, 255, 136, 0.22) 14%,
            rgba(82, 255, 136, 0.09) 28%,
            transparent 48%
        ),
        radial-gradient(
            circle at 86% 24%,
            rgba(76, 152, 255, 0.34) 0%,
            rgba(76, 152, 255, 0.18) 16%,
            rgba(76, 152, 255, 0.07) 30%,
            transparent 50%
        ),
        radial-gradient(
            circle at 58% 78%,
            rgba(62, 225, 190, 0.24) 0%,
            rgba(62, 225, 190, 0.10) 18%,
            transparent 38%
        ),
        radial-gradient(
            circle at 32% 62%,
            rgba(82, 176, 82, 0.16) 0%,
            transparent 30%
        );

    filter: saturate(1.25);
    opacity: 1;
}

body::after {
    background-image:
        linear-gradient(
            rgba(100, 220, 150, 0.14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100, 220, 150, 0.14) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.90) 18%,
            rgba(0, 0, 0, 0.60) 34%,
            rgba(0, 0, 0, 0.26) 50%,
            transparent 66%
        ),
        radial-gradient(
            circle at 86% 24%,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.82) 20%,
            rgba(0, 0, 0, 0.50) 36%,
            rgba(0, 0, 0, 0.20) 52%,
            transparent 66%
        ),
        radial-gradient(
            circle at 58% 78%,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.42) 24%,
            transparent 48%
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.30)
        );

    mask-image:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.90) 18%,
            rgba(0, 0, 0, 0.60) 34%,
            rgba(0, 0, 0, 0.26) 50%,
            transparent 66%
        ),
        radial-gradient(
            circle at 86% 24%,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.82) 20%,
            rgba(0, 0, 0, 0.50) 36%,
            rgba(0, 0, 0, 0.20) 52%,
            transparent 66%
        ),
        radial-gradient(
            circle at 58% 78%,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.42) 24%,
            transparent 48%
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.30)
        );

    opacity: 1;
}

/* Dark mode gets the real nightclub treatment */
body.dark-theme::before {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(82, 255, 136, 0.58) 0%,
            rgba(82, 255, 136, 0.28) 16%,
            rgba(82, 255, 136, 0.10) 32%,
            transparent 50%
        ),
        radial-gradient(
            circle at 86% 24%,
            rgba(80, 160, 255, 0.48) 0%,
            rgba(80, 160, 255, 0.24) 18%,
            rgba(80, 160, 255, 0.08) 34%,
            transparent 52%
        ),
        radial-gradient(
            circle at 58% 78%,
            rgba(58, 230, 194, 0.34) 0%,
            rgba(58, 230, 194, 0.12) 20%,
            transparent 42%
        ),
        radial-gradient(
            circle at 34% 64%,
            rgba(92, 210, 110, 0.22) 0%,
            transparent 34%
        );

    filter: saturate(1.4);
}

body.dark-theme::after {
    background-image:
        linear-gradient(
            rgba(130, 255, 178, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(130, 255, 178, 0.18) 1px,
            transparent 1px
        );

    opacity: 1;
}

/* Boost the existing local hero grids so they visually agree */
.hero-content::before,
.page-hero::before {
    opacity: 1;
}

.hero-content::before {
    background-image:
        linear-gradient(
            rgba(82, 176, 82, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.12) 1px,
            transparent 1px
        );
}

.page-hero::before {
    background-image:
        linear-gradient(
            rgba(82, 176, 82, 0.11) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.11) 1px,
            transparent 1px
        );
}

/* Slightly brighter on hover-able technical panels */
.system-grid a:hover,
.system-grid a:focus-visible,
.home-expertise-card:hover,
.insight-card:hover {
    box-shadow:
        0 0 0 1px rgba(82, 176, 82, 0.18),
        0 0 26px rgba(82, 176, 82, 0.12);
}


/* =========================================================
   MOBILE — STILL BRIGHT, NOT BLINDING
   ========================================================= */

@media (max-width: 650px) {

    body::before {
        background:
            radial-gradient(
                circle at 10% 14%,
                rgba(82, 255, 136, 0.34) 0%,
                rgba(82, 255, 136, 0.14) 20%,
                transparent 46%
            ),
            radial-gradient(
                circle at 90% 28%,
                rgba(76, 152, 255, 0.28) 0%,
                rgba(76, 152, 255, 0.10) 22%,
                transparent 48%
            );
    }

    body::after {
        background-size: 44px 44px;

        background-image:
            linear-gradient(
                rgba(100, 220, 150, 0.12) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(100, 220, 150, 0.12) 1px,
                transparent 1px
            );

        opacity: 0.9;
    }

}


/* =========================================================
   TECH GLOW REFINEMENT
   More obvious diffused grid lights + darker central field
   ========================================================= */

/* Pull the broad ambient color back and preserve a darker center. */
body::before {
    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(82, 255, 136, 0.34) 0%,
            rgba(82, 255, 136, 0.16) 12%,
            rgba(82, 255, 136, 0.055) 24%,
            transparent 39%
        ),
        radial-gradient(
            circle at 91% 24%,
            rgba(76, 152, 255, 0.28) 0%,
            rgba(76, 152, 255, 0.13) 13%,
            rgba(76, 152, 255, 0.045) 26%,
            transparent 41%
        ),
        radial-gradient(
            circle at 84% 83%,
            rgba(56, 220, 188, 0.16) 0%,
            rgba(56, 220, 188, 0.055) 18%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.13) 24%,
            transparent 57%
        );

    filter: saturate(1.08);
}

/*
   Main grid stays visible everywhere.
   Hotspot diffusion is created by stacking softly blurred-looking
   radial masks around the brighter grid regions.
*/
body::after {
    background-image:
        linear-gradient(
            rgba(100, 220, 150, 0.125) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(100, 220, 150, 0.125) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    -webkit-mask-image:
        radial-gradient(
            ellipse 33% 28% at 10% 18%,
            #000 0%,
            rgba(0,0,0,0.98) 12%,
            rgba(0,0,0,0.78) 28%,
            rgba(0,0,0,0.42) 48%,
            rgba(0,0,0,0.18) 68%,
            transparent 88%
        ),
        radial-gradient(
            ellipse 34% 29% at 91% 24%,
            #000 0%,
            rgba(0,0,0,0.94) 14%,
            rgba(0,0,0,0.72) 30%,
            rgba(0,0,0,0.38) 50%,
            rgba(0,0,0,0.16) 70%,
            transparent 90%
        ),
        radial-gradient(
            ellipse 28% 23% at 84% 83%,
            rgba(0,0,0,0.78) 0%,
            rgba(0,0,0,0.52) 30%,
            rgba(0,0,0,0.20) 62%,
            transparent 90%
        ),
        linear-gradient(
            rgba(0,0,0,0.36),
            rgba(0,0,0,0.36)
        );

    mask-image:
        radial-gradient(
            ellipse 33% 28% at 10% 18%,
            #000 0%,
            rgba(0,0,0,0.98) 12%,
            rgba(0,0,0,0.78) 28%,
            rgba(0,0,0,0.42) 48%,
            rgba(0,0,0,0.18) 68%,
            transparent 88%
        ),
        radial-gradient(
            ellipse 34% 29% at 91% 24%,
            #000 0%,
            rgba(0,0,0,0.94) 14%,
            rgba(0,0,0,0.72) 30%,
            rgba(0,0,0,0.38) 50%,
            rgba(0,0,0,0.16) 70%,
            transparent 90%
        ),
        radial-gradient(
            ellipse 28% 23% at 84% 83%,
            rgba(0,0,0,0.78) 0%,
            rgba(0,0,0,0.52) 30%,
            rgba(0,0,0,0.20) 62%,
            transparent 90%
        ),
        linear-gradient(
            rgba(0,0,0,0.36),
            rgba(0,0,0,0.36)
        );

    opacity: 0.92;
}


/* Dark mode: mostly black center with brighter perimeter signals. */
body.dark-theme::before {
    background:
        radial-gradient(
            circle at 9% 17%,
            rgba(82, 255, 136, 0.44) 0%,
            rgba(82, 255, 136, 0.20) 12%,
            rgba(82, 255, 136, 0.07) 25%,
            transparent 40%
        ),
        radial-gradient(
            circle at 92% 23%,
            rgba(80, 160, 255, 0.38) 0%,
            rgba(80, 160, 255, 0.17) 14%,
            rgba(80, 160, 255, 0.055) 27%,
            transparent 42%
        ),
        radial-gradient(
            circle at 87% 84%,
            rgba(58, 230, 194, 0.20) 0%,
            rgba(58, 230, 194, 0.06) 18%,
            transparent 35%
        ),
        radial-gradient(
            ellipse at 50% 47%,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.42) 25%,
            rgba(0, 0, 0, 0.16) 48%,
            transparent 68%
        );

    filter: saturate(1.15);
}

body.dark-theme::after {
    background-image:
        linear-gradient(
            rgba(130, 255, 178, 0.155) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(130, 255, 178, 0.155) 1px,
            transparent 1px
        );

    opacity: 0.98;
}


/* Give the existing hero grids the same diffused signal feel. */
.hero-content::before,
.page-hero::before {
    opacity: 0.9;
}

.hero-content::before {
    background-image:
        linear-gradient(
            rgba(105, 220, 150, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105, 220, 150, 0.13) 1px,
            transparent 1px
        );

    mask-image:
        radial-gradient(
            ellipse at 18% 42%,
            black 0%,
            rgba(0,0,0,0.84) 25%,
            rgba(0,0,0,0.42) 52%,
            transparent 88%
        );
}

.page-hero::before {
    background-image:
        linear-gradient(
            rgba(105, 220, 150, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105, 220, 150, 0.12) 1px,
            transparent 1px
        );

    mask-image:
        radial-gradient(
            ellipse at 16% 48%,
            black 0%,
            rgba(0,0,0,0.80) 28%,
            rgba(0,0,0,0.34) 58%,
            transparent 92%
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    body::before {
        background:
            radial-gradient(
                circle at 7% 14%,
                rgba(82, 255, 136, 0.28) 0%,
                rgba(82, 255, 136, 0.10) 20%,
                transparent 42%
            ),
            radial-gradient(
                circle at 94% 27%,
                rgba(76, 152, 255, 0.24) 0%,
                rgba(76, 152, 255, 0.08) 22%,
                transparent 44%
            ),
            radial-gradient(
                ellipse at 50% 52%,
                rgba(0,0,0,0.24) 0%,
                transparent 58%
            );
    }

    body.dark-theme::before {
        background:
            radial-gradient(
                circle at 7% 14%,
                rgba(82, 255, 136, 0.34) 0%,
                rgba(82, 255, 136, 0.12) 20%,
                transparent 44%
            ),
            radial-gradient(
                circle at 94% 27%,
                rgba(76, 152, 255, 0.30) 0%,
                rgba(76, 152, 255, 0.10) 22%,
                transparent 46%
            ),
            radial-gradient(
                ellipse at 50% 50%,
                rgba(0,0,0,0.52) 0%,
                rgba(0,0,0,0.24) 32%,
                transparent 66%
            );
    }

    body::after {
        background-size: 44px 44px;
        opacity: 0.84;
    }
}


/* =========================================================
   RANDOM ELECTRICITY — JAVASCRIPT CANVAS OVERRIDE
   This replaces the old CSS-only traveling light animations.
   ========================================================= */

/* The ambient radial glow + grid on BODY stay intact. */

/* Disable previous CSS-only moving signals on MAIN. */
main::before,
main::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
}

/* The JS-created electricity canvas. */
.akcs-electric-canvas {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 1;

    pointer-events: none;
    mix-blend-mode: screen;

    opacity: 0.92;
}

/* Keep all real site content above the electricity canvas. */
body > *:not(.akcs-electric-canvas) {
    position: relative;
    z-index: 2;
}

main > * {
    position: relative;
    z-index: 2;
}

body.dark-theme .akcs-electric-canvas {
    opacity: 1;
}

@media (max-width: 650px) {
    .akcs-electric-canvas {
        opacity: 0.74;
    }
}

@media (prefers-reduced-motion: reduce) {
    .akcs-electric-canvas {
        display: none !important;
    }
}


/* =========================================================
   RANDOM ELECTRICITY V8 — ZONED EFFECT
   Electricity lives only in:
   1) header + upper half of main/article
   2) footer
   The middle/lower reading area stays completely calm.
   ========================================================= */

body {
    position: relative;
}

/* V8 uses document-positioned canvases, not a viewport-fixed canvas. */
.akcs-electric-canvas {
    position: absolute !important;
    left: 0;
    width: 100%;

    pointer-events: none;
    mix-blend-mode: screen;

    z-index: 1;

    opacity: 0.80;
    filter: blur(0.12px) saturate(1.38);
}

/* Upper-page field */
.akcs-electric-canvas-top {
    top: 0;
}

/* Footer-only field; JS places this exactly over the footer. */
.akcs-electric-canvas-footer {
    top: 0;
}

body.dark-theme .akcs-electric-canvas {
    opacity: 0.94;
}

/* Real content always sits above the electric fields. */
body > *:not(.akcs-electric-canvas) {
    position: relative;
    z-index: 2;
}

@media (max-width: 650px) {
    .akcs-electric-canvas {
        opacity: 0.62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .akcs-electric-canvas {
        display: none !important;
    }
}


/* =========================================================
   RANDOM ELECTRICITY V10 — SMOOTH SCROLL PASS
   Lower compositing cost without changing the visual language.
   ========================================================= */

.akcs-electric-canvas-top {
    opacity: 0.76;
    filter: saturate(1.30);
}

body.dark-theme .akcs-electric-canvas-top {
    opacity: 0.88;
}

.akcs-electric-canvas-footer {
    opacity: 0.54;
    filter: saturate(1.18);
}

body.dark-theme .akcs-electric-canvas-footer {
    opacity: 0.62;
}

/* Avoid expensive CSS blur on the canvas itself.
   The glow is already drawn inside the canvas renderer. */
.akcs-electric-canvas {
    will-change: opacity;
    transform: translateZ(0);
    contain: strict;
}


/* =========================================================
   LIGHT THEME — DARK FOREST GREEN GRID
   Same zoned electricity behavior, stronger technical grid
   only in the light theme.
   ========================================================= */

body:not(.dark-theme) {
    --grid-line: rgba(20, 72, 49, 0.16);
}

/* Global full-page grid */
body:not(.dark-theme)::after {
    background-image:
        linear-gradient(
            rgba(20, 72, 49, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.18) 1px,
            transparent 1px
        );

    opacity: 0.96;
}

/* Hero grids inherit the same forest-green character */
body:not(.dark-theme) .hero-content::before {
    background-image:
        linear-gradient(
            rgba(20, 72, 49, 0.16) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.16) 1px,
            transparent 1px
        );

    opacity: 0.95;
}

body:not(.dark-theme) .page-hero::before {
    background-image:
        linear-gradient(
            rgba(20, 72, 49, 0.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.15) 1px,
            transparent 1px
        );

    opacity: 0.92;
}

/* Keep the light-theme ambient glow restrained so the darker
   forest grid remains the main technical texture. */
body:not(.dark-theme)::before {
    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(82, 176, 82, 0.20) 0%,
            rgba(82, 176, 82, 0.08) 15%,
            transparent 36%
        ),
        radial-gradient(
            circle at 91% 24%,
            rgba(76, 152, 255, 0.16) 0%,
            rgba(76, 152, 255, 0.06) 16%,
            transparent 38%
        ),
        radial-gradient(
            circle at 84% 83%,
            rgba(56, 180, 150, 0.09) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 56%
        );

    filter: saturate(1.02);
}

/* Mobile: keep it visible but not heavy */
@media (max-width: 650px) {

    body:not(.dark-theme)::after {
        background-image:
            linear-gradient(
                rgba(20, 72, 49, 0.14) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(20, 72, 49, 0.14) 1px,
                transparent 1px
            );

        opacity: 0.90;
    }

}


/* =========================================================
   CONTACT PAGE — DIRECT HUMAN CONTACT
   Contact-page-only refinement
   ========================================================= */

.page-contact .contact-direct {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;

    padding:
        clamp(5.5rem, 8vw, 8.5rem)
        0
        clamp(5rem, 7vw, 7.5rem);

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

.page-contact .contact-direct__intro {
    max-width: 1080px;
}

.page-contact .contact-direct__intro .section-label {
    margin-bottom: clamp(1.75rem, 3vw, 2.6rem);
}

.page-contact .contact-direct__intro h2 {
    max-width: 1100px;

    margin: 0;

    color: var(--text-strong);

    font-size: clamp(4.8rem, 9vw, 9.5rem);
    font-weight: 500;
    line-height: 0.84;
    letter-spacing: -0.065em;
}

.page-contact .contact-direct__intro h2 span {
    display: block;

    color: var(--green);
}

.page-contact .contact-direct__intro > p:not(.section-label) {
    max-width: 790px;

    margin:
        clamp(2.2rem, 4vw, 3.3rem)
        0
        0;

    color: var(--muted);

    font-size: clamp(1.1rem, 1.45vw, 1.3rem);
    line-height: 1.72;
}

.page-contact .contact-direct__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: clamp(3.5rem, 6vw, 5.75rem);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.page-contact .contact-direct__card {
    min-width: 0;
    min-height: 220px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 1.4rem;

    padding: clamp(1.7rem, 2.6vw, 2.6rem);

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

    background: rgba(255, 255, 255, 0.018);
    color: var(--text);

    text-decoration: none;

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

.page-contact .contact-direct__card:hover,
.page-contact .contact-direct__card:focus-visible {
    position: relative;
    z-index: 1;

    transform: translateY(-3px);

    border-color: var(--green);
    background: var(--surface-soft);
}

.page-contact .contact-direct__card--primary {
    border-color: rgba(82, 176, 82, 0.52);
}

.page-contact .contact-direct__label,
.page-contact .contact-direct__note {
    font-family: var(--akcs-tech-sans);
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-contact .contact-direct__label {
    color: var(--green);

    font-size: 0.82rem;
}

.page-contact .contact-direct__card strong {
    max-width: 100%;

    color: var(--text-strong);

    font-size: clamp(1.65rem, 2.35vw, 2.55rem);
    font-weight: 600;
    line-height: 1.08;

    overflow-wrap: anywhere;
}

.page-contact .contact-direct__note {
    color: var(--muted);

    font-size: 0.72rem;
}

.page-contact .contact-direct__form-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: clamp(2.4rem, 4vw, 3.5rem);
    padding-top: clamp(2rem, 3vw, 2.8rem);

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

.page-contact .contact-direct__form-link p {
    margin: 0;

    color: var(--text-strong);

    font-size: clamp(1.6rem, 2.6vw, 2.7rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

/* More breathing room before the form itself. */
.page-contact .contact-section {
    padding-top: clamp(5rem, 7vw, 7rem);
}

/* Light theme keeps the cards crisp against the forest grid. */
body:not(.dark-theme).page-contact .contact-direct__card {
    background: rgba(250, 248, 243, 0.62);
}

body:not(.dark-theme).page-contact .contact-direct__card:hover,
body:not(.dark-theme).page-contact .contact-direct__card:focus-visible {
    background: rgba(250, 248, 243, 0.88);
}


/* Tablet */

@media (max-width: 1100px) {

    .page-contact .contact-direct {
        width: min(calc(100% - 3rem), var(--max-width));
    }

    .page-contact .contact-direct__intro h2 {
        font-size: clamp(4.3rem, 10vw, 7.5rem);
    }

    .page-contact .contact-direct__actions {
        grid-template-columns: 1fr;
    }

    .page-contact .contact-direct__card {
        min-height: 155px;
    }

}


/* Mobile */

@media (max-width: 650px) {

    .page-contact .contact-direct {
        width: calc(100% - 2rem);

        padding:
            4.5rem
            0
            4.25rem;
    }

    .page-contact .contact-direct__intro h2 {
        font-size: clamp(4rem, 19vw, 5.8rem);
        line-height: 0.87;
    }

    .page-contact .contact-direct__intro > p:not(.section-label) {
        margin-top: 2rem;

        font-size: 1.05rem;
    }

    .page-contact .contact-direct__actions {
        margin-top: 3rem;
    }

    .page-contact .contact-direct__card {
        min-height: 138px;

        padding: 1.4rem 1.25rem;
    }

    .page-contact .contact-direct__card strong {
        font-size: clamp(1.45rem, 7.3vw, 1.9rem);
    }

    .page-contact .contact-direct__form-link {
        align-items: flex-start;
        flex-direction: column;

        gap: 1.4rem;
    }

    .page-contact .contact-direct__form-link p {
        font-size: 1.75rem;
    }

}


/* =========================================================
   PAGE TIGHTENING PASS
   HOME HERO / ABOUT HERO / CONTACT HERO + DIRECT CONTACT
   ========================================================= */

/* ---------------------------------------------------------
   HOME PAGE HERO
   Keep the impact, reduce the amount of empty vertical space.
   --------------------------------------------------------- */

.home-page .hero {
    min-height: auto;

    padding-top: clamp(3.25rem, 5vw, 5rem);
    padding-bottom: clamp(3.75rem, 5.5vw, 5.5rem);

    gap: clamp(2.5rem, 4vw, 4.5rem);
}

.home-page .hero-content {
    padding-top: 0;
    padding-bottom: 0;
}

.home-page .hero-topics {
    margin-bottom: clamp(1.65rem, 2.4vw, 2.35rem);
}

.home-page .hero h1 {
    margin-bottom: clamp(1.6rem, 2.4vw, 2.25rem);

    font-size: clamp(4.4rem, 7vw, 8rem);
    line-height: 0.90;
}

.home-page .hero-intro {
    margin-bottom: clamp(1.8rem, 2.8vw, 2.6rem);

    max-width: 760px;
}

.home-page .hero-actions {
    margin-top: 0;
}

.home-page .hero-system {
    align-self: center;
}


/* ---------------------------------------------------------
   ABOUT PAGE HERO
   --------------------------------------------------------- */

.page-about .page-hero {
    min-height: auto;

    padding-top: clamp(4rem, 6vw, 6rem);
    padding-bottom: clamp(4rem, 6vw, 6rem);
}

.page-about .page-hero .hero-eyebrow {
    margin-bottom: clamp(1.7rem, 2.8vw, 2.6rem);
}

.page-about .page-hero h1 {
    max-width: 1320px;

    margin-bottom: clamp(1.7rem, 2.8vw, 2.5rem);

    font-size: clamp(4rem, 6.6vw, 7.3rem);
    line-height: 0.91;
}

.page-about .page-hero .hero-intro {
    max-width: 900px;

    margin-top: 0;
}


/* Tighten the long About page sections without making them cramped. */
.page-about .page-section {
    padding-top: clamp(4rem, 5.8vw, 5.8rem);
    padding-bottom: clamp(4rem, 5.8vw, 5.8rem);
}

.page-about .page-copy {
    gap: clamp(2.5rem, 4.5vw, 5rem);
}

.page-about .page-copy h2 {
    font-size: clamp(2.7rem, 4.3vw, 4.9rem);
    line-height: 0.99;
}

.page-about .page-copy-body p {
    margin-bottom: 1.45rem;
}


/* ---------------------------------------------------------
   CONTACT HERO
   The direct-contact section is the star now, so the opening
   hero should get users there faster.
   --------------------------------------------------------- */

.page-contact .page-hero {
    min-height: auto;

    padding-top: clamp(3.75rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 5vw, 5rem);
}

.page-contact .page-hero .hero-eyebrow {
    margin-bottom: clamp(1.5rem, 2.4vw, 2.2rem);
}

.page-contact .page-hero h1 {
    max-width: 1200px;

    margin-bottom: clamp(1.5rem, 2.2vw, 2.1rem);

    font-size: clamp(3.9rem, 6.3vw, 7rem);
    line-height: 0.91;
}

.page-contact .page-hero .hero-intro {
    max-width: 820px;

    margin-top: 0;
}


/* Tighten "Call us. Really." while keeping it dominant. */
.page-contact .contact-direct {
    padding-top: clamp(4.25rem, 6vw, 6rem);
    padding-bottom: clamp(4rem, 5.5vw, 5.5rem);
}

.page-contact .contact-direct__intro .section-label {
    margin-bottom: clamp(1.25rem, 2vw, 1.8rem);
}

.page-contact .contact-direct__intro h2 {
    font-size: clamp(4.5rem, 8vw, 8.4rem);
    line-height: 0.86;
}

.page-contact .contact-direct__intro > p:not(.section-label) {
    margin-top: clamp(1.6rem, 2.7vw, 2.4rem);
}

.page-contact .contact-direct__actions {
    margin-top: clamp(2.6rem, 4vw, 4rem);
}

.page-contact .contact-direct__card {
    min-height: 180px;

    padding: clamp(1.45rem, 2vw, 2rem);
}

.page-contact .contact-direct__form-link {
    margin-top: clamp(1.8rem, 3vw, 2.5rem);
    padding-top: clamp(1.6rem, 2.5vw, 2.2rem);
}

.page-contact .contact-section {
    padding-top: clamp(4rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(4.5rem, 6vw, 6rem);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .home-page .hero {
        padding-top: 3.25rem;
        padding-bottom: 4rem;
    }

    .home-page .hero h1 {
        font-size: clamp(4rem, 9vw, 6.5rem);
    }

    .page-about .page-hero,
    .page-contact .page-hero {
        padding-top: 3.75rem;
        padding-bottom: 4rem;
    }

    .page-about .page-section {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .home-page .hero {
        padding-top: 2.35rem;
        padding-bottom: 3rem;

        gap: 2rem;
    }

    .home-page .hero-topics {
        margin-bottom: 1.35rem;
    }

    .home-page .hero h1 {
        margin-bottom: 1.35rem;

        font-size: clamp(3.55rem, 15.5vw, 5.25rem);
    }

    .home-page .hero-intro {
        margin-bottom: 1.5rem;
    }

    .page-about .page-hero,
    .page-contact .page-hero {
        padding-top: 3rem;
        padding-bottom: 3.25rem;
    }

    .page-about .page-hero .hero-eyebrow,
    .page-contact .page-hero .hero-eyebrow {
        margin-bottom: 1.35rem;
    }

    .page-about .page-hero h1,
    .page-contact .page-hero h1 {
        margin-bottom: 1.4rem;

        font-size: clamp(3.25rem, 14vw, 4.8rem);
    }

    .page-about .page-section {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }

    .page-about .page-copy {
        gap: 2rem;
    }

    .page-contact .contact-direct {
        padding-top: 3.4rem;
        padding-bottom: 3.5rem;
    }

    .page-contact .contact-direct__intro h2 {
        font-size: clamp(3.8rem, 18vw, 5.4rem);
    }

    .page-contact .contact-direct__actions {
        margin-top: 2.4rem;
    }

    .page-contact .contact-direct__card {
        min-height: 125px;
    }

    .page-contact .contact-section {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

}


/* =========================================================
   UNIFIED PAGE HEADER RHYTHM
   Every primary page now begins its hero content on the same
   vertical baseline below the shared site header.
   ========================================================= */

:root {
    --page-hero-top: clamp(4.25rem, 5.5vw, 5.5rem);
    --page-hero-bottom: clamp(4.25rem, 5.5vw, 5.5rem);
}

/* Interior pages: About, Contact, Expertise, etc. */
.page-hero,
.page-about .page-hero,
.page-contact .page-hero {
    min-height: 0;

    justify-content: flex-start;

    padding-top: var(--page-hero-top);
    padding-bottom: var(--page-hero-bottom);
}

/* Put the first label on a consistent line. */
.page-hero .hero-eyebrow,
.page-about .page-hero .hero-eyebrow,
.page-contact .page-hero .hero-eyebrow {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Homepage uses a two-column hero, so align its content column
   to the same starting line instead of vertically centering it. */
.home-page .hero {
    min-height: 0;

    padding-top: 0;
    padding-bottom: 0;
}

.home-page .hero-content {
    justify-content: flex-start;

    padding-top: var(--page-hero-top);
    padding-bottom: var(--page-hero-bottom);
}

.home-page .hero-topics {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Keep the technical system panel visually centered beside the copy. */
.home-page .hero-system {
    align-self: stretch;
    justify-content: center;
}

/* Remove earlier page-specific top-spacing differences. */
.page-about .page-hero,
.page-contact .page-hero {
    padding-top: var(--page-hero-top);
    padding-bottom: var(--page-hero-bottom);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --page-hero-top: 3.75rem;
        --page-hero-bottom: 4rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --page-hero-top: 2.75rem;
        --page-hero-bottom: 3.25rem;
    }

    .page-hero .hero-eyebrow,
    .page-about .page-hero .hero-eyebrow,
    .page-contact .page-hero .hero-eyebrow,
    .home-page .hero-topics {
        margin-bottom: 1.35rem;
    }

}


/* =========================================================
   EXPERTISE PAGE — CAPABILITY MAP
   ========================================================= */

.page-expertise .expertise-intro,
.page-expertise .expertise-reassurance {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: clamp(3rem, 6vw, 7rem);

    padding:
        clamp(4.5rem, 6vw, 6.5rem)
        0;

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

.page-expertise .expertise-intro h2,
.page-expertise .expertise-reassurance h2 {
    max-width: 760px;

    margin: 0;

    color: var(--text-strong);

    font-size: clamp(3rem, 5vw, 5.7rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.page-expertise .expertise-intro__copy p,
.page-expertise .expertise-reassurance__copy p {
    max-width: 780px;

    margin: 0 0 1.5rem;

    color: var(--muted);

    font-size: clamp(1.08rem, 1.25vw, 1.2rem);
    line-height: 1.74;
}

.page-expertise .expertise-capabilities {
    padding-top: clamp(4.5rem, 6vw, 6rem);
    padding-bottom: clamp(4.5rem, 6vw, 6rem);
}

.page-expertise .expertise-list {
    margin-top: clamp(2.5rem, 4vw, 4rem);

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

.page-expertise .expertise-item {
    display: grid;
    grid-template-columns: minmax(72px, 0.18fr) minmax(0, 1fr);

    gap: clamp(1.5rem, 3vw, 3rem);

    padding:
        clamp(2.6rem, 4vw, 4rem)
        0;

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

.page-expertise .expertise-number {
    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.10em;
}

.page-expertise .expertise-item__copy {
    max-width: 1120px;
}

.page-expertise .expertise-item h2 {
    margin: 0 0 1.25rem;

    color: var(--text-strong);

    font-size: clamp(2.35rem, 4vw, 4.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.page-expertise .expertise-item__copy > p {
    max-width: 850px;

    margin: 0 0 1.15rem;

    color: var(--muted);

    font-size: clamp(1.05rem, 1.25vw, 1.18rem);
    line-height: 1.7;
}

.page-expertise .expertise-item__human {
    color: var(--text) !important;
}

.page-expertise .expertise-item__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.7rem 1.5rem;

    margin-top: 1.8rem;
}

.page-expertise .expertise-item__actions a {
    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.page-expertise .expertise-item__actions a:hover,
.page-expertise .expertise-item__actions a:focus-visible {
    color: var(--text-strong);
}

.page-expertise .expertise-cta__question {
    margin-bottom: 1.4rem;

    font-size: clamp(1.3rem, 1.8vw, 1.75rem);
    line-height: 1.3;
    letter-spacing: 0.12em;
}

.page-expertise .expertise-cta__copy {
    max-width: 680px;

    margin: 1.25rem 0 2rem;

    color: var(--muted);

    font-size: clamp(1.08rem, 1.35vw, 1.22rem);
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .page-expertise .expertise-intro,
    .page-expertise .expertise-reassurance {
        width: min(calc(100% - 3rem), var(--max-width));

        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .page-expertise .expertise-intro,
    .page-expertise .expertise-reassurance {
        width: calc(100% - 2rem);

        padding:
            3.5rem
            0;
    }

    .page-expertise .expertise-intro h2,
    .page-expertise .expertise-reassurance h2 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .page-expertise .expertise-item {
        grid-template-columns: 1fr;

        gap: 0.9rem;

        padding:
            2.6rem
            0;
    }

    .page-expertise .expertise-item h2 {
        font-size: clamp(2.25rem, 10vw, 3.4rem);
    }

    .page-expertise .expertise-item__actions {
        display: grid;

        gap: 0.8rem;
    }

    .page-expertise .expertise-cta__question {
        font-size: 1.2rem;
    }

}


/* =========================================================
   GLOBAL TECHNICAL TYPE — LARGE / HIGH LEGIBILITY
   Accessibility-oriented pass for older clients and small text.
   ========================================================= */

/*
   These are the site's small technical / monospace labels.
   Make them visibly larger without changing the main display type.
*/

.section-label,
.hero-eyebrow,
.sage-partner-kicker,
.system-status,
.system-details span,
.hero-topics,
.hero-topics a,
.heritage-line,
.expertise-number,
.contact-direct__label,
.contact-direct__note,
.footer-bottom,
.footer-nav,
.footer-contact-direct span {
    font-size: max(1rem, 16px);
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.09em;
}

/* Primary green labels should read as real information, not decoration. */
.section-label,
.hero-eyebrow,
.sage-partner-kicker,
.system-status,
.expertise-number,
.contact-direct__label {
    font-size: clamp(1.08rem, 1.15vw, 1.28rem);
}

/* Homepage topic strip */
.hero-topics,
.hero-topics a {
    font-size: clamp(1rem, 1.05vw, 1.16rem);
    line-height: 1.55;
}

/* System panel technical details */
.system-status {
    font-size: clamp(1.08rem, 1.2vw, 1.3rem);
}

.system-details span {
    font-size: clamp(0.98rem, 1vw, 1.12rem);
}

.system-details strong {
    font-size: clamp(1.12rem, 1.15vw, 1.28rem);
}

/* Heritage / timeline */
.heritage-line {
    font-size: clamp(1rem, 1.1vw, 1.2rem);
}

/* Contact technical labels */
.page-contact .contact-direct__label {
    font-size: clamp(1rem, 1.05vw, 1.15rem);
}

.page-contact .contact-direct__note {
    font-size: clamp(0.92rem, 0.95vw, 1.04rem);
}

/* Expertise technical number + CTA eyebrow */
.page-expertise .expertise-number {
    font-size: clamp(1.05rem, 1.1vw, 1.2rem);
}

.page-expertise .expertise-cta__question {
    font-size: clamp(1.45rem, 1.9vw, 1.9rem);
}

/* Footer technical details */
.footer-bottom,
.footer-nav {
    font-size: clamp(0.98rem, 1vw, 1.08rem);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .section-label,
    .hero-eyebrow,
    .sage-partner-kicker,
    .system-status,
    .expertise-number,
    .contact-direct__label {
        font-size: 1.05rem;
    }

    .hero-topics,
    .hero-topics a,
    .system-details span,
    .heritage-line {
        font-size: 0.98rem;
    }

}


/* =========================================================
   MOBILE
   Keep technical text comfortably readable instead of shrinking it.
   ========================================================= */

@media (max-width: 650px) {

    .section-label,
    .hero-eyebrow,
    .sage-partner-kicker,
    .system-status,
    .expertise-number,
    .contact-direct__label {
        font-size: 1rem;
        line-height: 1.5;
        letter-spacing: 0.075em;
    }

    .hero-topics,
    .hero-topics a {
        font-size: 0.96rem;
        line-height: 1.6;
    }

    .system-details span {
        font-size: 0.92rem;
    }

    .system-details strong {
        font-size: 1.05rem;
    }

    .heritage-line {
        font-size: 0.94rem;
        line-height: 1.6;
    }

    .page-contact .contact-direct__note {
        font-size: 0.9rem;
    }

    .footer-bottom,
    .footer-nav {
        font-size: 0.94rem;
    }

}


/* =========================================================
   HOME HERO — TYPOGRAPHY CONSISTENCY + FUTURISTIC SYSTEM HUD
   ========================================================= */

/* ---------------------------------------------------------
   HERO TYPOGRAPHY
   Lock the homepage display and technical families explicitly
   so inherited rules cannot make individual pieces drift.
   --------------------------------------------------------- */

.home-page .hero h1,
.home-page .hero h1 span {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-variant: normal;
}

.home-page .hero h1 {
    letter-spacing: -0.062em;
}

.home-page .hero-topics,
.home-page .hero-topics a,
.home-page .hero-topics > span {
    font-family: var(--akcs-tech-sans);
    font-style: normal;
    font-variant: normal;
    font-weight: 800;

    font-size: clamp(1.04rem, 1.08vw, 1.18rem);
    line-height: 1.55;
    letter-spacing: 0.085em;
}

.home-page .hero-topics > span {
    font-size: 0.95em;
    font-weight: 700;
    opacity: 0.38;
}


/* ---------------------------------------------------------
   HERO SYSTEM — FUTURISTIC CONTROL PANEL
   --------------------------------------------------------- */

.home-page .hero-system {
    position: relative;
    overflow: hidden;

    padding:
        clamp(1.5rem, 2vw, 2rem);

    border: 1px solid color-mix(in srgb, var(--green) 34%, var(--border));

    background:
        linear-gradient(
            135deg,
            rgba(82, 176, 82, 0.045),
            transparent 32%
        ),
        linear-gradient(
            315deg,
            rgba(84, 190, 255, 0.035),
            transparent 28%
        ),
        var(--surface-soft);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.018),
        0 0 36px rgba(82, 176, 82, 0.035);
}

/* Fine scan texture contained inside the panel. */
.home-page .hero-system::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 5px,
            rgba(255,255,255,0.018) 6px
        );

    opacity: 0.58;
}

/* Futuristic corner brackets. */
.home-page .hero-system::after {
    content: "";

    position: absolute;
    inset: 10px;

    pointer-events: none;

    background:
        linear-gradient(var(--green), var(--green)) left top / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) left top / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) right top / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) right top / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) left bottom / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) left bottom / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) right bottom / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) right bottom / 2px 28px no-repeat;

    opacity: 0.38;
}

.home-page .hero-system > * {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   SYSTEM / HEALTHY — HUD STATUS BAR
   --------------------------------------------------------- */

.home-page .system-status {
    position: relative;

    width: fit-content;

    min-height: 42px;

    margin-bottom: clamp(1.8rem, 2.5vw, 2.4rem);

    padding:
        0.62rem
        1rem
        0.62rem
        2.9rem;

    border:
        1px solid
        rgba(82, 176, 82, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.13),
            rgba(82, 176, 82, 0.025)
        );

    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: clamp(1.08rem, 1.18vw, 1.28rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.12em;

    text-shadow:
        0 0 12px rgba(82, 176, 82, 0.18);

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px)
        );
}

/* Replace simple dot with a multi-ring live indicator. */
.home-page .status-dot {
    position: absolute;
    left: 1rem;
    top: 50%;

    width: 11px;
    height: 11px;

    transform: translateY(-50%);

    border: 2px solid var(--green);
    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(82, 176, 82, 0.10),
        0 0 0 8px rgba(82, 176, 82, 0.045),
        0 0 12px rgba(82, 176, 82, 0.46);

    animation:
        akcs-status-pulse 2.4s ease-in-out infinite;
}

@keyframes akcs-status-pulse {
    0%, 100% {
        opacity: 0.82;
        box-shadow:
            0 0 0 4px rgba(82, 176, 82, 0.08),
            0 0 0 8px rgba(82, 176, 82, 0.035),
            0 0 10px rgba(82, 176, 82, 0.32);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 0 5px rgba(82, 176, 82, 0.12),
            0 0 0 10px rgba(82, 176, 82, 0.05),
            0 0 18px rgba(82, 176, 82, 0.52);
    }
}


/* ---------------------------------------------------------
   SYSTEM CORE — MORE LIKE A LIVE NODE
   --------------------------------------------------------- */

.home-page .system-core {
    position: relative;

    min-height: 92px;

    padding:
        1.35rem
        1.55rem;

    border:
        1px solid
        color-mix(in srgb, var(--green) 24%, var(--border));

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.055),
            transparent 55%
        );

    font-size: clamp(1.02rem, 1.08vw, 1.16rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-page .system-core::before {
    content: "ACTIVE NODE";

    position: absolute;
    right: 1rem;
    bottom: 0.55rem;

    color: var(--muted);

    font-family: var(--akcs-tech-sans);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;

    opacity: 0.58;
}


/* ---------------------------------------------------------
   SYSTEM GRID — CLEANER FUTURE UI
   --------------------------------------------------------- */

.home-page .system-grid {
    gap: 0.7rem;
}

.home-page .system-grid a {
    position: relative;
    overflow: hidden;

    min-height: 82px;

    border-color:
        color-mix(in srgb, var(--green) 17%, var(--border));

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.025),
            transparent 70%
        );

    font-size: clamp(1rem, 1.02vw, 1.12rem);
}

.home-page .system-grid a::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background: var(--green);

    opacity: 0;

    transition: opacity 180ms ease;
}

.home-page .system-grid a:hover::before,
.home-page .system-grid a:focus-visible::before {
    opacity: 1;
}

.home-page .system-link-arrow {
    font-size: 1.15rem;
}


/* ---------------------------------------------------------
   SYSTEM DETAILS — MORE LEGIBLE DATA READOUT
   --------------------------------------------------------- */

.home-page .system-details {
    margin-top: 2rem;
    padding-top: 1.6rem;

    border-top:
        1px solid
        color-mix(in srgb, var(--green) 18%, var(--border));
}

.home-page .system-details div {
    padding:
        0.72rem
        0;

    font-size: 1rem;
}

.home-page .system-details span {
    color: var(--muted);

    font-size: clamp(0.96rem, 1vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.075em;
}

.home-page .system-details strong {
    font-size: clamp(1.08rem, 1.1vw, 1.2rem);
    font-weight: 800;
    letter-spacing: 0.035em;
}


/* ---------------------------------------------------------
   LIGHT THEME — KEEP FUTURISTIC UI DEFINED
   --------------------------------------------------------- */

body:not(.dark-theme).home-page .hero-system {
    border-color: rgba(20, 72, 49, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(20, 72, 49, 0.045),
            transparent 32%
        ),
        rgba(250, 248, 243, 0.52);
}

body:not(.dark-theme).home-page .system-status {
    border-color: rgba(20, 72, 49, 0.40);

    background:
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.09),
            rgba(20, 72, 49, 0.02)
        );
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .hero-topics,
    .home-page .hero-topics a {
        font-size: 0.98rem;
    }

    .home-page .hero-system {
        padding: 1.15rem;
    }

    .home-page .system-status {
        min-height: 38px;

        padding:
            0.55rem
            0.85rem
            0.55rem
            2.55rem;

        font-size: 1rem;
    }

    .home-page .status-dot {
        left: 0.85rem;
    }

    .home-page .system-core {
        min-height: 82px;
    }

    .home-page .system-grid a {
        min-height: 72px;
        font-size: 0.96rem;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .home-page .status-dot {
        animation: none;
    }

}


/* =========================================================
   FINAL SITE RHYTHM NORMALIZATION — 2026-08-14
   Authoritative cascade layer for Home / About / Contact /
   Expertise. This deliberately sits LAST so older experiments
   cannot create differing hero fonts, baselines, gaps, or
   section dividers.
   ========================================================= */

:root {
    --akcs-content-width: min(calc(100% - 6rem), var(--max-width));

    --akcs-display-font: Arial, Helvetica, sans-serif;
    --akcs-tech-font: var(--akcs-tech-sans);

    --akcs-hero-top: clamp(4.25rem, 5.4vw, 5.5rem);
    --akcs-hero-bottom: clamp(4.5rem, 5.8vw, 5.9rem);

    --akcs-hero-label-gap: clamp(1.55rem, 2vw, 1.9rem);
    --akcs-hero-title-gap: clamp(1.8rem, 2.5vw, 2.25rem);

    --akcs-section-y: clamp(4.5rem, 6vw, 6.25rem);
}


/* =========================================================
   SHARED DISPLAY TYPOGRAPHY
   ========================================================= */

/* Every primary page hero uses exactly the same display face,
   weight, tracking, line-height, and responsive size. */
.home-page .hero h1,
.home-page .hero h1 span,
.page-about .page-hero h1,
.page-about .page-hero h1 span,
.page-contact .page-hero h1,
.page-contact .page-hero h1 span,
.page-expertise .page-hero h1,
.page-expertise .page-hero h1 span {
    font-family: var(--akcs-display-font);
    font-style: normal;
    font-variant: normal;
    font-weight: 600;

    font-size: clamp(4.35rem, 6.8vw, 7.8rem);
    line-height: 0.91;
    letter-spacing: -0.06em;
}

/* All secondary editorial headings use the same family. */
.page-section h2,
.page-cta h2,
.expertise-intro h2,
.expertise-reassurance h2,
.contact-direct__intro h2,
.contact-intro h2,
.home-expertise h2,
.sage-partner-panel h2,
.heritage-band h2 {
    font-family: var(--akcs-display-font);
    font-style: normal;
    font-variant: normal;
}


/* =========================================================
   SHARED TECHNICAL TYPOGRAPHY
   ========================================================= */

/* One technical language across every page header and label. */
.home-page .hero-topics,
.home-page .hero-topics a,
.home-page .hero-topics > span,
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.expertise-number,
.system-status,
.system-core,
.system-grid,
.system-details,
.contact-direct__label,
.contact-direct__note,
.form-field label,
.heritage-line {
    font-family: var(--akcs-tech-font);
    font-style: normal;
    font-variant: normal;
    font-weight: 800;
}

/* The upper small type on Home now matches the eyebrow used
   on About / Contact / Expertise in actual size and rhythm. */
.home-page .hero-topics,
.home-page .hero-topics a,
.hero-eyebrow {
    font-size: clamp(1.06rem, 1.12vw, 1.22rem);
    line-height: 1.55;
    letter-spacing: 0.09em;
}

.home-page .hero-topics > span {
    font-size: 1em;
    line-height: inherit;
    letter-spacing: inherit;
}

.section-label {
    font-size: clamp(1.05rem, 1.1vw, 1.2rem);
    line-height: 1.5;
    letter-spacing: 0.09em;
}


/* =========================================================
   SHARED HERO GEOMETRY
   ========================================================= */

/* Same width and single divider line for every page hero. */
.home-page .hero,
.page-hero {
    width: var(--akcs-content-width);
    margin-left: auto;
    margin-right: auto;

    min-height: 0;

    border-top: 0;
    border-bottom: 1px solid var(--border);
}

/* Interior page hero: identical top/bottom rhythm. */
.page-about .page-hero,
.page-contact .page-hero,
.page-expertise .page-hero {
    padding-top: var(--akcs-hero-top);
    padding-bottom: var(--akcs-hero-bottom);

    justify-content: flex-start;
}

/* Home is two columns, so its content column owns the same
   vertical baseline rather than the outer grid. */
.home-page .hero {
    padding-top: 0;
    padding-bottom: 0;
}

.home-page .hero-content {
    padding-top: var(--akcs-hero-top);
    padding-bottom: var(--akcs-hero-bottom);

    justify-content: flex-start;
}

/* Same gap: technical label -> headline. */
.home-page .hero-topics,
.page-hero .hero-eyebrow {
    margin-top: 0;
    margin-bottom: var(--akcs-hero-label-gap);
}

/* Same headline margin behavior. */
.home-page .hero h1,
.page-hero h1 {
    margin-top: 0;
    margin-bottom: var(--akcs-hero-title-gap);
}

/* Same intro geometry. */
.home-page .hero-intro,
.page-hero .hero-intro {
    max-width: 840px;

    margin-top: 0;
    margin-bottom: 0;

    font-size: clamp(1.18rem, 1.42vw, 1.4rem);
    line-height: 1.68;
}

/* Home alone has buttons inside the hero. */
.home-page .hero-actions {
    margin-top: clamp(2rem, 2.8vw, 2.6rem);
}


/* =========================================================
   MAJOR SECTION RHYTHM + DIVIDERS
   One clean break between major bands — no accidental
   double borders from old experiments.
   ========================================================= */

.page-about .page-section,
.page-contact .contact-direct,
.page-contact .contact-section,
.page-expertise .expertise-intro,
.page-expertise .expertise-capabilities,
.page-expertise .expertise-reassurance,
.home-page .home-expertise,
.home-page .sage-partner-strip,
.home-page .sage-partner-panel,
.home-page .heritage-band {
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

/* Standard vertical breathing room for editorial sections. */
.page-about .page-section,
.page-contact .contact-section,
.page-expertise .expertise-intro,
.page-expertise .expertise-capabilities,
.page-expertise .expertise-reassurance {
    padding-top: var(--akcs-section-y);
    padding-bottom: var(--akcs-section-y);
}

/* Keep the special Contact statement slightly roomier,
   but still on the same site rhythm. */
.page-contact .contact-direct {
    padding-top: clamp(4.5rem, 6.4vw, 6.6rem);
    padding-bottom: clamp(4.5rem, 6.4vw, 6.6rem);
}

/* CTA is the final band before the footer; footer owns the
   final separator so we do not draw a double rule. */
.page-cta {
    border-top: 0;
    border-bottom: 0;

    padding-top: var(--akcs-section-y);
    padding-bottom: calc(var(--akcs-section-y) + 0.75rem);
}


/* =========================================================
   SECTION LABEL SPACING
   ========================================================= */

.page-section > .section-label,
.expertise-capabilities > .section-label,
.page-cta > .section-label,
.expertise-intro .section-label,
.expertise-reassurance .section-label,
.contact-direct .section-label,
.contact-section .section-label,
.home-expertise > .section-label,
.sage-partner-panel .section-label,
.heritage-band .section-label {
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 2vw, 1.9rem);
}


/* =========================================================
   PAGE-SPECIFIC INTERNAL RHYTHM
   ========================================================= */

/* ABOUT */
.page-about .page-copy {
    gap: clamp(3rem, 5vw, 5.5rem);
}

.page-about .page-copy h2 {
    margin-top: 0;
}

.page-about .page-copy-body p:last-child {
    margin-bottom: 0;
}

/* CONTACT */
.page-contact .contact-direct__intro .section-label {
    margin-bottom: var(--akcs-hero-label-gap);
}

.page-contact .contact-direct__intro > p:not(.section-label) {
    margin-top: clamp(1.7rem, 2.5vw, 2.3rem);
}

.page-contact .contact-direct__actions {
    margin-top: clamp(2.8rem, 4vw, 4rem);
}

.page-contact .contact-direct__form-link {
    margin-top: clamp(2rem, 3vw, 2.7rem);
    padding-top: clamp(1.7rem, 2.5vw, 2.2rem);
}

/* EXPERTISE */
.page-expertise .expertise-intro,
.page-expertise .expertise-reassurance {
    gap: clamp(3rem, 5vw, 5.5rem);
}

.page-expertise .expertise-list {
    margin-top: clamp(2.6rem, 3.8vw, 3.8rem);
}

.page-expertise .expertise-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   HOME BAND DIVIDERS
   ========================================================= */

.home-page .sage-partner-strip {
    border-top: 0;
}

.home-page .sage-partner-panel {
    border-top: 0;
}

.home-page .heritage-band {
    border-top: 0;
}

/* Avoid the card grid creating a visually heavier double rule
   against its containing section. */
.home-page .home-expertise-grid {
    border-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --akcs-content-width: min(calc(100% - 3rem), var(--max-width));

        --akcs-hero-top: 3.75rem;
        --akcs-hero-bottom: 4rem;

        --akcs-section-y: 4rem;
    }

    .home-page .hero h1,
    .page-about .page-hero h1,
    .page-contact .page-hero h1,
    .page-expertise .page-hero h1 {
        font-size: clamp(4rem, 9vw, 6.4rem);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --akcs-content-width: calc(100% - 2rem);

        --akcs-hero-top: 2.85rem;
        --akcs-hero-bottom: 3.35rem;

        --akcs-hero-label-gap: 1.3rem;
        --akcs-hero-title-gap: 1.45rem;

        --akcs-section-y: 3.5rem;
    }

    .home-page .hero h1,
    .page-about .page-hero h1,
    .page-contact .page-hero h1,
    .page-expertise .page-hero h1 {
        font-size: clamp(3.45rem, 14.5vw, 5rem);
        line-height: 0.92;
    }

    .home-page .hero-topics,
    .home-page .hero-topics a,
    .hero-eyebrow {
        font-size: 0.98rem;
        line-height: 1.55;
        letter-spacing: 0.075em;
    }

    .section-label {
        font-size: 0.98rem;
        letter-spacing: 0.075em;
    }

    .home-page .hero-intro,
    .page-hero .hero-intro {
        font-size: 1.08rem;
    }

    .page-contact .contact-direct {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

}


/* =========================================================
   HOME HERO — TYPOGRAPHY CONSISTENCY + FUTURISTIC SYSTEM HUD
   ========================================================= */

/* ---------------------------------------------------------
   HERO TYPOGRAPHY
   Lock the homepage display and technical families explicitly
   so inherited rules cannot make individual pieces drift.
   --------------------------------------------------------- */

.home-page .hero h1,
.home-page .hero h1 span {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-variant: normal;
}

.home-page .hero h1 {
    letter-spacing: -0.062em;
}

.home-page .hero-topics,
.home-page .hero-topics a,
.home-page .hero-topics > span {
    font-family: var(--akcs-tech-sans);
    font-style: normal;
    font-variant: normal;
    font-weight: 800;

    font-size: clamp(1.04rem, 1.08vw, 1.18rem);
    line-height: 1.55;
    letter-spacing: 0.085em;
}

.home-page .hero-topics > span {
    font-size: 0.95em;
    font-weight: 700;
    opacity: 0.38;
}


/* ---------------------------------------------------------
   HERO SYSTEM — FUTURISTIC CONTROL PANEL
   --------------------------------------------------------- */

.home-page .hero-system {
    position: relative;
    overflow: hidden;

    padding:
        clamp(1.5rem, 2vw, 2rem);

    border: 1px solid color-mix(in srgb, var(--green) 34%, var(--border));

    background:
        linear-gradient(
            135deg,
            rgba(82, 176, 82, 0.045),
            transparent 32%
        ),
        linear-gradient(
            315deg,
            rgba(84, 190, 255, 0.035),
            transparent 28%
        ),
        var(--surface-soft);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.018),
        0 0 36px rgba(82, 176, 82, 0.035);
}

/* Fine scan texture contained inside the panel. */
.home-page .hero-system::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 5px,
            rgba(255,255,255,0.018) 6px
        );

    opacity: 0.58;
}

/* Futuristic corner brackets. */
.home-page .hero-system::after {
    content: "";

    position: absolute;
    inset: 10px;

    pointer-events: none;

    background:
        linear-gradient(var(--green), var(--green)) left top / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) left top / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) right top / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) right top / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) left bottom / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) left bottom / 2px 28px no-repeat,

        linear-gradient(var(--green), var(--green)) right bottom / 28px 2px no-repeat,
        linear-gradient(var(--green), var(--green)) right bottom / 2px 28px no-repeat;

    opacity: 0.38;
}

.home-page .hero-system > * {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   SYSTEM / HEALTHY — HUD STATUS BAR
   --------------------------------------------------------- */

.home-page .system-status {
    position: relative;

    width: fit-content;

    min-height: 42px;

    margin-bottom: clamp(1.8rem, 2.5vw, 2.4rem);

    padding:
        0.62rem
        1rem
        0.62rem
        2.9rem;

    border:
        1px solid
        rgba(82, 176, 82, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.13),
            rgba(82, 176, 82, 0.025)
        );

    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: clamp(1.08rem, 1.18vw, 1.28rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.12em;

    text-shadow:
        0 0 12px rgba(82, 176, 82, 0.18);

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px)
        );
}

/* Replace simple dot with a multi-ring live indicator. */
.home-page .status-dot {
    position: absolute;
    left: 1rem;
    top: 50%;

    width: 11px;
    height: 11px;

    transform: translateY(-50%);

    border: 2px solid var(--green);
    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 0 4px rgba(82, 176, 82, 0.10),
        0 0 0 8px rgba(82, 176, 82, 0.045),
        0 0 12px rgba(82, 176, 82, 0.46);

    animation:
        akcs-status-pulse 2.4s ease-in-out infinite;
}

@keyframes akcs-status-pulse {
    0%, 100% {
        opacity: 0.82;
        box-shadow:
            0 0 0 4px rgba(82, 176, 82, 0.08),
            0 0 0 8px rgba(82, 176, 82, 0.035),
            0 0 10px rgba(82, 176, 82, 0.32);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 0 5px rgba(82, 176, 82, 0.12),
            0 0 0 10px rgba(82, 176, 82, 0.05),
            0 0 18px rgba(82, 176, 82, 0.52);
    }
}


/* ---------------------------------------------------------
   SYSTEM CORE — MORE LIKE A LIVE NODE
   --------------------------------------------------------- */

.home-page .system-core {
    position: relative;

    min-height: 92px;

    padding:
        1.35rem
        1.55rem;

    border:
        1px solid
        color-mix(in srgb, var(--green) 24%, var(--border));

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.055),
            transparent 55%
        );

    font-size: clamp(1.02rem, 1.08vw, 1.16rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-page .system-core::before {
    content: "ACTIVE NODE";

    position: absolute;
    right: 1rem;
    bottom: 0.55rem;

    color: var(--muted);

    font-family: var(--akcs-tech-sans);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;

    opacity: 0.58;
}


/* ---------------------------------------------------------
   SYSTEM GRID — CLEANER FUTURE UI
   --------------------------------------------------------- */

.home-page .system-grid {
    gap: 0.7rem;
}

.home-page .system-grid a {
    position: relative;
    overflow: hidden;

    min-height: 82px;

    border-color:
        color-mix(in srgb, var(--green) 17%, var(--border));

    background:
        linear-gradient(
            90deg,
            rgba(82, 176, 82, 0.025),
            transparent 70%
        );

    font-size: clamp(1rem, 1.02vw, 1.12rem);
}

.home-page .system-grid a::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background: var(--green);

    opacity: 0;

    transition: opacity 180ms ease;
}

.home-page .system-grid a:hover::before,
.home-page .system-grid a:focus-visible::before {
    opacity: 1;
}

.home-page .system-link-arrow {
    font-size: 1.15rem;
}


/* ---------------------------------------------------------
   SYSTEM DETAILS — MORE LEGIBLE DATA READOUT
   --------------------------------------------------------- */

.home-page .system-details {
    margin-top: 2rem;
    padding-top: 1.6rem;

    border-top:
        1px solid
        color-mix(in srgb, var(--green) 18%, var(--border));
}

.home-page .system-details div {
    padding:
        0.72rem
        0;

    font-size: 1rem;
}

.home-page .system-details span {
    color: var(--muted);

    font-size: clamp(0.96rem, 1vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.075em;
}

.home-page .system-details strong {
    font-size: clamp(1.08rem, 1.1vw, 1.2rem);
    font-weight: 800;
    letter-spacing: 0.035em;
}


/* ---------------------------------------------------------
   LIGHT THEME — KEEP FUTURISTIC UI DEFINED
   --------------------------------------------------------- */

body:not(.dark-theme).home-page .hero-system {
    border-color: rgba(20, 72, 49, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(20, 72, 49, 0.045),
            transparent 32%
        ),
        rgba(250, 248, 243, 0.52);
}

body:not(.dark-theme).home-page .system-status {
    border-color: rgba(20, 72, 49, 0.40);

    background:
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.09),
            rgba(20, 72, 49, 0.02)
        );
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .hero-topics,
    .home-page .hero-topics a {
        font-size: 0.98rem;
    }

    .home-page .hero-system {
        padding: 1.15rem;
    }

    .home-page .system-status {
        min-height: 38px;

        padding:
            0.55rem
            0.85rem
            0.55rem
            2.55rem;

        font-size: 1rem;
    }

    .home-page .status-dot {
        left: 0.85rem;
    }

    .home-page .system-core {
        min-height: 82px;
    }

    .home-page .system-grid a {
        min-height: 72px;
        font-size: 0.96rem;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .home-page .status-dot {
        animation: none;
    }

}


/* =========================================================
   HOME DIAGNOSTIC HUD — LT STOPWATCH
   Compact segmented readouts + pure-CSS wireframe cube.
   Keep this block LAST.
   ========================================================= */

/*
   IMPORTANT:
   Put your licensed LTStopwatch-Regular.ttf here:

   /fonts/LTStopwatch-Regular.ttf

   The font file is intentionally NOT bundled with this package.
*/
@font-face {
    font-family: "LT Stopwatch";
    src: url("/fonts/LTStopwatch-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.home-page .hero-system--diagnostic {
    justify-content: center;
    gap: clamp(1.15rem, 1.7vw, 1.6rem);

    padding: clamp(1.4rem, 2vw, 2rem);

    background:
        linear-gradient(135deg, rgba(82,176,82,0.045), transparent 32%),
        linear-gradient(315deg, rgba(95,188,255,0.028), transparent 30%),
        rgba(255,255,255,0.012);
}

.home-page .system-hud-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 1.25rem;
    align-items: start;

    padding-bottom: 1.2rem;

    border-bottom: 1px solid color-mix(in srgb, var(--green) 20%, var(--border));
}

.home-page .system-status-block {
    min-width: 0;
}

.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note {
    display: block;

    font-family: var(--akcs-tech-sans);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.home-page .system-status-label {
    margin-bottom: 0.48rem;

    color: var(--muted);

    font-size: clamp(0.82rem, 0.86vw, 0.94rem);
}

.home-page .system-status-value {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    min-width: 0;
}

.home-page .system-status-value strong {
    color: #87ff9c;

    font-family: "LT Stopwatch", var(--akcs-tech-sans);
    font-size: clamp(2.15rem, 3vw, 3.35rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.04em;

    text-shadow:
        0 0 8px rgba(112,255,144,0.38),
        0 0 18px rgba(82,176,82,0.16);
}

.home-page .system-status-sub {
    margin-top: 0.55rem;

    color: var(--muted);

    font-size: clamp(0.72rem, 0.76vw, 0.82rem);
}

.home-page .system-status-value .status-dot {
    position: static;

    width: 8px;
    height: 8px;

    transform: none;

    border: 0;
    border-radius: 50%;

    background: #87ff9c;

    box-shadow:
        0 0 0 3px rgba(112,255,144,0.08),
        0 0 8px rgba(112,255,144,0.45);

    animation: akcs-status-pulse-soft 2.8s ease-in-out infinite;
}

@keyframes akcs-status-pulse-soft {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}


/* ---------------------------------------------------------
   SEGMENTED READOUTS
   Secondary values are intentionally dimmer than HEALTHY.
   --------------------------------------------------------- */

.home-page .system-readouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.home-page .system-readout {
    min-width: 0;

    padding: 0.95rem 0.9rem 0.85rem;

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

    background: rgba(255,255,255,0.012);
}

.home-page .system-readout-label {
    margin-bottom: 0.48rem;

    color: var(--muted);

    font-size: clamp(0.68rem, 0.72vw, 0.78rem);
}

.home-page .segment-readout {
    display: block;

    min-height: 1.8rem;

    overflow-wrap: anywhere;

    color: rgba(139, 236, 160, 0.66);

    font-family: "LT Stopwatch", var(--akcs-tech-sans);
    font-size: clamp(1.35rem, 1.72vw, 1.85rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.035em;

    text-shadow:
        0 0 6px rgba(82,176,82,0.12);
}

.home-page .system-readout-note {
    margin-top: 0.42rem;

    color: var(--muted);

    font-size: clamp(0.62rem, 0.66vw, 0.72rem);
}


/* ---------------------------------------------------------
   PURE-CSS WIREFRAME CUBE
   --------------------------------------------------------- */

.home-page .system-wireframe {
    position: relative;

    width: 112px;
    height: 92px;

    opacity: 0.58;
}

.home-page .wireframe-cube {
    position: absolute;
    inset: 13px 15px 15px 13px;

    transform: rotate(-2deg);
}

.home-page .cube-face {
    position: absolute;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(125, 218, 154, 0.62);

    box-shadow:
        0 0 9px rgba(82,176,82,0.035);
}

.home-page .cube-face--front {
    left: 8px;
    top: 16px;
}

.home-page .cube-face--back {
    left: 29px;
    top: 0;

    border-color: rgba(128, 202, 232, 0.42);
}

.home-page .cube-edge {
    position: absolute;

    width: 29px;
    height: 1px;

    background: rgba(128, 218, 164, 0.52);

    transform-origin: left center;
}

.home-page .cube-edge--1 {
    left: 10px;
    top: 17px;
    transform: rotate(-37deg);
}

.home-page .cube-edge--2 {
    left: 57px;
    top: 17px;
    transform: rotate(-37deg);
}

.home-page .cube-edge--3 {
    left: 10px;
    top: 65px;
    transform: rotate(-37deg);
}

.home-page .cube-edge--4 {
    left: 57px;
    top: 65px;
    transform: rotate(-37deg);
}

.home-page .wireframe-node {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(150, 232, 178, 0.82);

    box-shadow: 0 0 6px rgba(150,232,178,0.28);
}

.home-page .wireframe-node--1 {
    right: 4px;
    top: 12px;
}

.home-page .wireframe-node--2 {
    left: 4px;
    bottom: 18px;
}

.home-page .wireframe-node--3 {
    right: 17px;
    bottom: 4px;

    background: rgba(144, 214, 244, 0.72);
}


/* ---------------------------------------------------------
   COMPACT CORE + MODULES
   --------------------------------------------------------- */

.home-page .system-core--compact {
    min-height: 54px;

    padding: 0.9rem 1rem;

    font-size: clamp(0.88rem, 0.96vw, 1.02rem);

    background: rgba(82,176,82,0.025);
}

.home-page .system-grid {
    gap: 0.55rem;
}

.home-page .system-grid a {
    min-height: 56px;

    padding: 0 0.9rem;

    font-size: clamp(0.82rem, 0.9vw, 0.96rem);

    background: rgba(255,255,255,0.009);
}

.home-page .system-details--compact {
    margin-top: 0.2rem;
    padding-top: 1rem;
}

.home-page .system-details--compact div {
    padding: 0.45rem 0;
}


/* ---------------------------------------------------------
   LIGHT THEME
   --------------------------------------------------------- */

body:not(.dark-theme).home-page .system-status-value strong {
    color: #24703c;

    text-shadow:
        0 0 7px rgba(36,112,60,0.12);
}

body:not(.dark-theme).home-page .segment-readout {
    color: rgba(36,112,60,0.68);

    text-shadow: none;
}

body:not(.dark-theme).home-page .cube-face {
    border-color: rgba(20,72,49,0.45);
}

body:not(.dark-theme).home-page .cube-face--back {
    border-color: rgba(50,104,128,0.35);
}

body:not(.dark-theme).home-page .cube-edge {
    background: rgba(20,72,49,0.42);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .home-page .hero-system--diagnostic {
        padding: 1.6rem;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .home-page .system-wireframe {
        width: 96px;
        transform: scale(0.88);
        transform-origin: top right;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 0.7rem;
    }

    .home-page .system-status-value strong {
        font-size: clamp(1.95rem, 11vw, 2.55rem);
    }

    .home-page .system-wireframe {
        width: 78px;
        height: 74px;

        transform: scale(0.72);
        transform-origin: top right;
    }

    .home-page .system-readouts {
        grid-template-columns: 1fr;
    }

    .home-page .system-readout {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 0.25rem 0.8rem;

        padding: 0.8rem 0.9rem;
    }

    .home-page .system-readout-label,
    .home-page .system-readout-note {
        grid-column: 1;
    }

    .home-page .segment-readout {
        grid-column: 2;
        grid-row: 1 / span 2;

        align-self: center;

        font-size: 1.45rem;
    }

    .home-page .system-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-page .system-grid a {
        min-height: 52px;
        font-size: 0.84rem;
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .home-page .system-status-value .status-dot {
        animation: none;
    }
}


/* =========================================================
   HOME HUD — DARKER / CLEANER / SEXIER TECH PASS
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-hud-bg: rgba(7, 10, 9, 0.94);
    --akcs-hud-bg-soft: rgba(12, 16, 14, 0.88);
    --akcs-hud-border: rgba(148, 160, 154, 0.20);
    --akcs-hud-border-hot: rgba(116, 255, 151, 0.30);

    --akcs-hud-gray: #929a96;
    --akcs-hud-gray-dim: #68716d;
    --akcs-hud-text: #d9dfdc;

    --akcs-hud-green: #8cff9f;
    --akcs-hud-green-dim: rgba(140, 255, 159, 0.64);

    --akcs-tech-sans:
        "Bahnschrift",
        "DIN Alternate",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* ---------------------------------------------------------
   PANEL SHELL
   --------------------------------------------------------- */

.home-page .hero-system--diagnostic {
    border: 1px solid var(--akcs-hud-border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            transparent 22%
        ),
        radial-gradient(
            circle at 72% 18%,
            rgba(88, 255, 154, 0.035),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--akcs-hud-bg-soft),
            var(--akcs-hud-bg)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        inset 0 0 42px rgba(0,0,0,0.36),
        0 20px 60px rgba(0,0,0,0.18);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* faint dark scanlines */
.home-page .hero-system--diagnostic::before {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.012) 0,
            rgba(255,255,255,0.012) 1px,
            transparent 1px,
            transparent 5px
        );

    opacity: 0.34;
}

/* make the old green corner brackets much quieter */
.home-page .hero-system--diagnostic::after {
    opacity: 0.16;
}


/* ---------------------------------------------------------
   SMALL TECH TYPE
   Gray, sans serif, tight, expensive-looking.
   --------------------------------------------------------- */

.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note,
.home-page .system-core--compact,
.home-page .system-grid a,
.home-page .system-details--compact,
.home-page .system-details--compact span,
.home-page .system-details--compact strong {
    font-family: var(--akcs-tech-sans);
    font-style: normal;
    font-variant: normal;
}

.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note,
.home-page .system-details--compact span {
    color: var(--akcs-hud-gray);

    font-weight: 650;
    letter-spacing: 0.12em;
}

.home-page .system-status-label {
    font-size: clamp(0.76rem, 0.8vw, 0.86rem);
}

.home-page .system-status-sub {
    color: var(--akcs-hud-gray-dim);

    font-size: clamp(0.66rem, 0.7vw, 0.76rem);
}

.home-page .system-readout-label {
    color: var(--akcs-hud-gray);

    font-size: clamp(0.65rem, 0.68vw, 0.73rem);
}

.home-page .system-readout-note {
    color: var(--akcs-hud-gray-dim);

    font-size: clamp(0.59rem, 0.62vw, 0.67rem);
}


/* ---------------------------------------------------------
   HEALTHY — BRIGHTEST ELEMENT
   --------------------------------------------------------- */

.home-page .system-status-value strong {
    color: var(--akcs-hud-green);

    text-shadow:
        0 0 7px rgba(140,255,159,0.44),
        0 0 18px rgba(86,229,125,0.18),
        0 0 34px rgba(86,229,125,0.08);
}

.home-page .system-status-value .status-dot {
    background: var(--akcs-hud-green);

    box-shadow:
        0 0 0 3px rgba(140,255,159,0.06),
        0 0 8px rgba(140,255,159,0.42);
}


/* ---------------------------------------------------------
   READOUT CELLS
   Smaller, darker, more instrument-like.
   --------------------------------------------------------- */

.home-page .system-readouts {
    border-top-color: var(--akcs-hud-border);
    border-left-color: var(--akcs-hud-border);
}

.home-page .system-readout {
    border-right-color: var(--akcs-hud-border);
    border-bottom-color: var(--akcs-hud-border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.014),
            rgba(255,255,255,0.003)
        );
}

.home-page .segment-readout {
    color: var(--akcs-hud-green-dim);

    text-shadow:
        0 0 5px rgba(140,255,159,0.10);
}


/* ---------------------------------------------------------
   CORE / MODULE BUTTONS
   --------------------------------------------------------- */

.home-page .system-core--compact {
    border-color: var(--akcs-hud-border);

    background:
        linear-gradient(
            90deg,
            rgba(140,255,159,0.028),
            rgba(255,255,255,0.006)
        );

    color: var(--akcs-hud-text);

    font-size: clamp(0.78rem, 0.86vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0.10em;
}

.home-page .system-core--compact span:last-child {
    color: var(--akcs-hud-gray);
}

.home-page .system-grid a {
    border-color: var(--akcs-hud-border);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.012),
            rgba(255,255,255,0.004)
        );

    color: #b9c1bd;

    font-size: clamp(0.76rem, 0.82vw, 0.88rem);
    font-weight: 650;
    letter-spacing: 0.11em;
}

.home-page .system-grid a:hover,
.home-page .system-grid a:focus-visible {
    border-color: var(--akcs-hud-border-hot);

    background:
        linear-gradient(
            180deg,
            rgba(140,255,159,0.050),
            rgba(140,255,159,0.012)
        );

    color: #e5ebe8;

    box-shadow:
        inset 0 0 18px rgba(140,255,159,0.025),
        0 0 18px rgba(140,255,159,0.035);

    transform: translateY(-1px);
}

.home-page .system-link-arrow {
    color: var(--akcs-hud-gray-dim);
    opacity: 0.72;
}

.home-page .system-grid a:hover .system-link-arrow,
.home-page .system-grid a:focus-visible .system-link-arrow {
    color: var(--akcs-hud-green);
}


/* ---------------------------------------------------------
   LOWER DETAILS
   --------------------------------------------------------- */

.home-page .system-details--compact {
    border-top-color: var(--akcs-hud-border);
}

.home-page .system-details--compact strong {
    color: #cdd4d0;

    font-size: clamp(0.84rem, 0.9vw, 0.96rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-page .system-details--compact a {
    color: var(--akcs-hud-green-dim);
}

.home-page .system-details--compact a:hover,
.home-page .system-details--compact a:focus-visible {
    color: var(--akcs-hud-green);
}


/* ---------------------------------------------------------
   WIREFRAME CUBE
   cooler gray-green, less neon
   --------------------------------------------------------- */

.home-page .system-wireframe {
    opacity: 0.42;
}

.home-page .cube-face {
    border-color: rgba(153, 176, 164, 0.42);

    box-shadow: none;
}

.home-page .cube-face--back {
    border-color: rgba(108, 141, 157, 0.34);
}

.home-page .cube-edge {
    background: rgba(146, 168, 157, 0.40);
}

.home-page .wireframe-node {
    background: rgba(171, 193, 182, 0.72);

    box-shadow:
        0 0 4px rgba(171,193,182,0.18);
}

.home-page .wireframe-node--3 {
    background: rgba(143, 175, 191, 0.68);
}


/* ---------------------------------------------------------
   LIGHT THEME
   Keep the calculator itself dark in BOTH themes.
   This makes it feel like a piece of hardware.
   --------------------------------------------------------- */

body:not(.dark-theme).home-page .hero-system--diagnostic {
    border-color: rgba(20, 40, 31, 0.28);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            transparent 22%
        ),
        radial-gradient(
            circle at 72% 18%,
            rgba(88,255,154,0.035),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(13,17,15,0.96),
            rgba(7,10,9,0.98)
        );

    color: #d9dfdc;
}

body:not(.dark-theme).home-page .system-status-value strong {
    color: var(--akcs-hud-green);

    text-shadow:
        0 0 7px rgba(140,255,159,0.40),
        0 0 18px rgba(86,229,125,0.14);
}

body:not(.dark-theme).home-page .segment-readout {
    color: var(--akcs-hud-green-dim);
}

body:not(.dark-theme).home-page .system-status-label,
body:not(.dark-theme).home-page .system-status-sub,
body:not(.dark-theme).home-page .system-readout-label,
body:not(.dark-theme).home-page .system-readout-note,
body:not(.dark-theme).home-page .system-details--compact span {
    color: var(--akcs-hud-gray);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .system-status-label {
        font-size: 0.72rem;
    }

    .home-page .system-status-sub {
        font-size: 0.64rem;
    }

    .home-page .system-readout-label {
        font-size: 0.64rem;
    }

    .home-page .system-readout-note {
        font-size: 0.58rem;
    }

    .home-page .system-core--compact,
    .home-page .system-grid a {
        font-size: 0.78rem;
    }

}


/* =========================================================
   HOME HUD — CALL ALL KLEER EMPHASIS
   Make the answer feel like the actual answer.
   Keep this block LAST.
   ========================================================= */

.home-page .system-details--compact strong a {
    display: inline-block;

    color: #92ffab;

    font-family: "LT Stopwatch", var(--akcs-tech-sans);
    font-size: clamp(1.18rem, 1.38vw, 1.55rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-decoration: none;

    text-shadow:
        0 0 8px rgba(146,255,171,0.34),
        0 0 18px rgba(92,230,129,0.18),
        0 0 34px rgba(92,230,129,0.08);

    filter: drop-shadow(0 0 6px rgba(146,255,171,0.10));
}

.home-page .system-details--compact strong a:hover,
.home-page .system-details--compact strong a:focus-visible {
    color: #b6ffc2;

    text-shadow:
        0 0 10px rgba(182,255,194,0.42),
        0 0 22px rgba(92,230,129,0.22),
        0 0 40px rgba(92,230,129,0.10);
}

.home-page .system-details--compact div:last-child {
    align-items: baseline;
}

body:not(.dark-theme).home-page .system-details--compact strong a {
    color: #92ffab;

    text-shadow:
        0 0 8px rgba(146,255,171,0.30),
        0 0 16px rgba(92,230,129,0.14);
}

@media (max-width: 650px) {

    .home-page .system-details--compact strong a {
        font-size: clamp(1.05rem, 6vw, 1.3rem);
    }

}


/* =========================================================
   FINAL WHOLE-SITE MOBILE TIGHTENING — 2026-08-14
   Authoritative mobile layer. Keep this block LAST.
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --mobile-gutter: 1rem;
        --mobile-section-y: 3rem;
        --mobile-section-y-tight: 2.5rem;
    }

    html {
        scroll-padding-top: 78px;
    }

    body {
        overflow-x: hidden;
    }

    /* -----------------------------------------------------
       SHARED HEADER
       ----------------------------------------------------- */

    .site-header {
        width: calc(100% - 2rem);
        min-height: 76px;
        gap: 0.65rem;

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

    .header-brand-group {
        min-width: 0;
    }

    .site-logo {
        width: min(180px, 60vw);
        flex-basis: auto;
    }

    .site-logo img,
    .site-logo-image {
        width: 100%;
        max-width: 180px;
    }

    .header-actions {
        gap: 0.4rem;
    }

    .theme-toggle {
        width: 40px;
        height: 40px;
    }

    .header-cta,
    .header-sage-badges,
    .main-nav {
        display: none !important;
    }


    /* -----------------------------------------------------
       SHARED PAGE WIDTHS
       ----------------------------------------------------- */

    .hero,
    .page-hero,
    .page-section,
    .page-cta,
    .contact-section,
    .heritage-band,
    .sage-partner-strip,
    .sage-partner-panel,
    .expertise,
    .page-expertise .expertise-intro,
    .page-expertise .expertise-reassurance,
    .page-contact .contact-direct,
    .site-footer {
        width: calc(100% - 2rem);
    }


    /* -----------------------------------------------------
       SHARED HERO RHYTHM
       ----------------------------------------------------- */

    .page-hero,
    .page-about .page-hero,
    .page-contact .page-hero,
    .page-expertise .page-hero {
        min-height: 0;

        padding-top: 2.5rem;
        padding-bottom: 2.8rem;
    }

    .page-hero .hero-eyebrow,
    .page-about .page-hero .hero-eyebrow,
    .page-contact .page-hero .hero-eyebrow,
    .page-expertise .page-hero .hero-eyebrow,
    .home-page .hero-topics {
        margin-bottom: 1.15rem;
    }

    .page-hero h1,
    .page-about .page-hero h1,
    .page-contact .page-hero h1,
    .page-expertise .page-hero h1,
    .home-page .hero h1 {
        margin-bottom: 1.25rem;

        font-size: clamp(3.05rem, 13.2vw, 4.4rem);
        line-height: 0.94;
        letter-spacing: -0.055em;
    }

    .page-hero .hero-intro,
    .home-page .hero-intro {
        max-width: none;

        margin-top: 0;
        margin-bottom: 0;

        font-size: 1.04rem;
        line-height: 1.58;
    }

    .hero-eyebrow,
    .section-label,
    .sage-partner-kicker,
    .hero-topics,
    .hero-topics a {
        font-size: 0.92rem;
        line-height: 1.5;
        letter-spacing: 0.07em;
    }


    /* -----------------------------------------------------
       HOME HERO
       ----------------------------------------------------- */

    .home-page .hero {
        grid-template-columns: 1fr;
        gap: 0;

        padding: 0;
    }

    .home-page .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 2.8rem;
    }

    .home-page .hero-topics {
        gap: 0.42rem;
        line-height: 1.55;
    }

    .home-page .hero-topics > span {
        opacity: 0.32;
    }

    .home-page .hero-actions {
        margin-top: 1.65rem;
        gap: 0.7rem;
    }

    .button {
        min-height: 48px;
        padding: 0.78rem 1.25rem;

        font-size: 0.82rem;
        letter-spacing: 0.08em;
    }

    .home-page .hero-system {
        border-left: 0;
        border-top: 1px solid var(--border);

        margin: 0;
    }


    /* -----------------------------------------------------
       HOME SECTIONS
       ----------------------------------------------------- */

    .sage-partner-strip {
        padding: 2.2rem 0;
        gap: 1.5rem;
    }

    .sage-partner-copy {
        gap: 0.6rem;
    }

    .sage-partner-copy p:last-child {
        font-size: 1rem;
        line-height: 1.55;
    }

    .sage-partner-badges {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.7rem;
    }

    .sage-partner-badge,
    .sage-partner-panel .sage-partner-badge {
        height: 46px;
    }

    .home-expertise,
    .expertise {
        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }

    .expertise h2,
    .sage-partner-panel h2,
    .heritage-band h2,
    .page-copy h2,
    .contact-intro h2,
    .page-cta h2 {
        font-size: clamp(2.35rem, 10.5vw, 3.5rem);
        line-height: 1;
    }

    .home-expertise-grid {
        margin-top: 2.2rem;
    }

    .home-expertise-card {
        min-height: 0;
        padding: 1.65rem 1.25rem;
    }

    .home-expertise-number {
        margin-bottom: 1.3rem;
    }

    .home-expertise-card h3 {
        margin-bottom: 0.65rem;
        font-size: 1.55rem;
    }

    .home-expertise-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .sage-partner-panel {
        padding: var(--mobile-section-y) 0;
        gap: 2rem;
    }

    .sage-partner-panel-copy p {
        margin-bottom: 1.4rem;
        font-size: 1rem;
        line-height: 1.58;
    }

    .heritage-band {
        padding: var(--mobile-section-y) 0;
        gap: 2rem;
    }

    .heritage-copy p {
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.58;
    }

    .heritage-line {
        gap: 0.45rem;
        font-size: 0.86rem;
        line-height: 1.5;
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .page-about .page-section {
        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }

    .page-about .page-copy {
        grid-template-columns: 1fr;
        gap: 1.65rem;
    }

    .page-about .page-copy-body p {
        margin-bottom: 1rem;

        font-size: 1rem;
        line-height: 1.62;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .values-grid > div {
        min-height: 0;
        padding: 1.45rem;
    }

    .values-grid h3 {
        margin-top: 1.25rem;
        font-size: 1.4rem;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .page-contact .contact-direct {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .page-contact .contact-direct__intro .section-label {
        margin-bottom: 1rem;
    }

    .page-contact .contact-direct__intro h2 {
        font-size: clamp(3.4rem, 16vw, 4.8rem);
        line-height: 0.9;
    }

    .page-contact .contact-direct__intro > p:not(.section-label) {
        margin-top: 1.4rem;

        font-size: 1rem;
        line-height: 1.58;
    }

    .page-contact .contact-direct__actions {
        margin-top: 2rem;
    }

    .page-contact .contact-direct__card {
        min-height: 112px;
        padding: 1.05rem 1rem;
        gap: 0.65rem;
    }

    .page-contact .contact-direct__card strong {
        font-size: 1.35rem;
    }

    .page-contact .contact-direct__label {
        font-size: 0.88rem;
    }

    .page-contact .contact-direct__note {
        font-size: 0.78rem;
    }

    .page-contact .contact-direct__form-link {
        gap: 1rem;

        margin-top: 1.5rem;
        padding-top: 1.35rem;
    }

    .page-contact .contact-direct__form-link p {
        font-size: 1.5rem;
    }

    .page-contact .contact-section,
    .contact-section {
        grid-template-columns: 1fr;
        gap: 2rem;

        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }

    .contact-form {
        padding: 1.15rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-field {
        margin-bottom: 1.1rem;
    }

    .form-field label {
        margin-bottom: 0.5rem;
        font-size: 0.82rem;
    }

    .form-field input,
    .form-field select {
        min-height: 48px;
    }

    .form-field textarea {
        min-height: 140px;
    }


    /* -----------------------------------------------------
       EXPERTISE
       ----------------------------------------------------- */

    .page-expertise .expertise-intro,
    .page-expertise .expertise-reassurance {
        grid-template-columns: 1fr;
        gap: 1.7rem;

        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }

    .page-expertise .expertise-intro h2,
    .page-expertise .expertise-reassurance h2 {
        font-size: clamp(2.45rem, 11vw, 3.6rem);
    }

    .page-expertise .expertise-intro__copy p,
    .page-expertise .expertise-reassurance__copy p {
        margin-bottom: 1rem;

        font-size: 1rem;
        line-height: 1.6;
    }

    .page-expertise .expertise-capabilities {
        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }

    .page-expertise .expertise-list {
        margin-top: 1.8rem;
    }

    .page-expertise .expertise-item {
        gap: 0.65rem;

        padding: 2rem 0;
    }

    .page-expertise .expertise-item h2 {
        margin-bottom: 0.85rem;

        font-size: clamp(2.1rem, 9.5vw, 3rem);
    }

    .page-expertise .expertise-item__copy > p {
        margin-bottom: 0.85rem;

        font-size: 0.98rem;
        line-height: 1.58;
    }

    .page-expertise .expertise-item__actions {
        gap: 0.55rem;
        margin-top: 1.25rem;
    }

    .page-expertise .expertise-item__actions a {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .page-expertise .expertise-number {
        font-size: 0.94rem;
    }

    .page-expertise .expertise-cta__question {
        font-size: 1.05rem;
    }


    /* -----------------------------------------------------
       SHARED CTA
       ----------------------------------------------------- */

    .page-cta {
        padding-top: var(--mobile-section-y);
        padding-bottom: 3.5rem;
    }

    .page-cta h2 {
        margin-bottom: 1.7rem;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .site-footer {
        margin-top: 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 1.6rem;

        padding: 2.8rem 0;
    }

    .footer-brand {
        width: 115px;
        flex-basis: 115px;
    }

    .footer-brand .footer-monogram,
    .footer-brand img {
        width: 115px;
    }

    .footer-tagline {
        font-size: 1.65rem;
    }

    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem 1.2rem;

        font-size: 0.82rem;
        line-height: 1.4;
    }

    .footer-partner-badges {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .footer-partner-badges img {
        height: 36px;
    }

    .footer-bottom {
        gap: 0.8rem;

        padding: 1.2rem 0;

        font-size: 0.8rem;
        line-height: 1.45;
    }

}


/* =========================================================
   EXTRA-SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .site-header {
        width: calc(100% - 1.5rem);
    }

    .site-logo {
        width: min(160px, 58vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 160px;
    }

    .hero,
    .page-hero,
    .page-section,
    .page-cta,
    .contact-section,
    .heritage-band,
    .sage-partner-strip,
    .sage-partner-panel,
    .expertise,
    .page-expertise .expertise-intro,
    .page-expertise .expertise-reassurance,
    .page-contact .contact-direct,
    .site-footer {
        width: calc(100% - 1.5rem);
    }

    .page-hero h1,
    .page-about .page-hero h1,
    .page-contact .page-hero h1,
    .page-expertise .page-hero h1,
    .home-page .hero h1 {
        font-size: clamp(2.7rem, 13vw, 3.55rem);
    }

    .hero-eyebrow,
    .section-label,
    .sage-partner-kicker,
    .hero-topics,
    .hero-topics a {
        font-size: 0.84rem;
    }

    .sage-partner-badge,
    .sage-partner-panel .sage-partner-badge {
        height: 40px;
    }

    .footer-nav {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   HOME HUD — ULTRA COMPACT PASS
   WAY smaller / tighter on desktop + mobile.
   Keep this block LAST.
   ========================================================= */

.home-page .hero-system--diagnostic {
    gap: 0.65rem;

    padding: 0.9rem;

    max-width: 520px;
    width: 100%;

    align-self: center;
    justify-self: end;
}

.home-page .system-hud-top {
    grid-template-columns: minmax(0, 1fr) 64px;

    gap: 0.55rem;

    padding-bottom: 0.6rem;
}

.home-page .system-status-label {
    margin-bottom: 0.22rem;

    font-size: 0.64rem;
    letter-spacing: 0.09em;
}

.home-page .system-status-value {
    gap: 0.38rem;
}

.home-page .system-status-value strong {
    font-size: clamp(1.6rem, 2.2vw, 2.25rem);
    line-height: 0.9;
}

.home-page .system-status-value .status-dot {
    width: 6px;
    height: 6px;
}

.home-page .system-status-sub {
    margin-top: 0.25rem;

    font-size: 0.56rem;
    letter-spacing: 0.08em;
}


/* Tiny cube ornament */
.home-page .system-wireframe {
    width: 64px;
    height: 54px;

    transform: scale(0.52);
    transform-origin: top right;

    opacity: 0.28;
}


/* Readouts */
.home-page .system-readouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .system-readout {
    padding: 0.5rem 0.45rem 0.46rem;
}

.home-page .system-readout-label {
    margin-bottom: 0.2rem;

    font-size: 0.52rem;
    letter-spacing: 0.08em;
}

.home-page .segment-readout {
    min-height: 1.15rem;

    font-size: clamp(0.98rem, 1.35vw, 1.25rem);
    line-height: 0.95;
}

.home-page .system-readout-note {
    margin-top: 0.18rem;

    font-size: 0.46rem;
    line-height: 1.1;
    letter-spacing: 0.06em;
}


/* Core */
.home-page .system-core--compact {
    min-height: 38px;

    padding: 0.5rem 0.65rem;

    font-size: 0.64rem;
    letter-spacing: 0.075em;
}


/* Modules */
.home-page .system-grid {
    gap: 0.3rem;
}

.home-page .system-grid a {
    min-height: 38px;

    padding: 0 0.55rem;

    font-size: 0.64rem;
    letter-spacing: 0.075em;
}

.home-page .system-link-arrow {
    font-size: 0.8rem;
}


/* Bottom details */
.home-page .system-details--compact {
    margin-top: 0;
    padding-top: 0.45rem;
}

.home-page .system-details--compact div {
    gap: 0.6rem;

    padding: 0.22rem 0;
}

.home-page .system-details--compact span {
    font-size: 0.58rem;
    letter-spacing: 0.075em;
}

.home-page .system-details--compact strong {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
}

.home-page .system-details--compact strong a {
    font-size: clamp(0.92rem, 1.15vw, 1.08rem);

    text-shadow:
        0 0 6px rgba(146,255,171,0.30),
        0 0 12px rgba(92,230,129,0.12),
        0 0 20px rgba(92,230,129,0.05);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .home-page .hero-system--diagnostic {
        max-width: 100%;

        padding: 0.85rem;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 56px;
    }

    .home-page .system-wireframe {
        width: 56px;
        transform: scale(0.48);
    }

}


/* ---------------------------------------------------------
   MOBILE
   VERY compact — reads like one tight instrument panel.
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .hero-system--diagnostic {
        gap: 0.5rem;

        padding: 0.68rem 0.65rem 0.72rem;

        max-width: none;

        margin-top: 0;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 40px;

        gap: 0.35rem;

        padding-bottom: 0.45rem;
    }

    .home-page .system-status-label {
        font-size: 0.56rem;
    }

    .home-page .system-status-value strong {
        font-size: clamp(1.4rem, 8vw, 1.8rem);
    }

    .home-page .system-status-sub {
        font-size: 0.50rem;
    }

    .home-page .system-wireframe {
        width: 40px;
        height: 38px;

        transform: scale(0.36);
        transform-origin: top right;
    }

    .home-page .system-readout {
        padding: 0.4rem 0.32rem 0.36rem;
    }

    .home-page .system-readout-label {
        font-size: 0.46rem;
    }

    .home-page .segment-readout {
        min-height: 1rem;

        font-size: clamp(0.9rem, 4.8vw, 1.08rem);
    }

    .home-page .system-readout-note {
        display: none;
    }

    .home-page .system-core--compact {
        min-height: 34px;

        padding: 0.42rem 0.5rem;

        font-size: 0.58rem;
    }

    .home-page .system-grid {
        gap: 0.25rem;
    }

    .home-page .system-grid a {
        min-height: 34px;

        padding: 0 0.48rem;

        font-size: 0.58rem;
    }

    .home-page .system-link-arrow {
        font-size: 0.72rem;
    }

    .home-page .system-details--compact {
        padding-top: 0.35rem;
    }

    .home-page .system-details--compact div {
        padding: 0.16rem 0;
    }

    .home-page .system-details--compact span {
        font-size: 0.52rem;
    }

    .home-page .system-details--compact strong {
        font-size: 0.58rem;
    }

    .home-page .system-details--compact strong a {
        font-size: clamp(0.85rem, 4.6vw, 1rem);
    }

}


/* Extra-small phones */
@media (max-width: 390px) {

    .home-page .hero-system--diagnostic {
        padding: 0.58rem;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 30px;
    }

    .home-page .system-wireframe {
        width: 30px;
        transform: scale(0.30);
    }

    .home-page .system-status-value strong {
        font-size: 1.3rem;
    }

    .home-page .segment-readout {
        font-size: 0.84rem;
    }

    .home-page .system-grid a {
        min-height: 32px;

        font-size: 0.54rem;
    }

}


/* =========================================================
   RESPONSIVE HEADER — KEEP NAV + TALK TO US VISIBLE
   Authoritative override. Keep this block LAST.
   ========================================================= */

/* ---------------------------------------------------------
   SMALL DESKTOP / TABLET
   Keep the complete header alive below 1100px.
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .site-header {
        width: min(calc(100% - 2rem), var(--max-width));

        min-height: 88px;

        grid-template-columns:
            minmax(180px, 0.9fr)
            auto
            auto;

        gap: clamp(0.75rem, 1.7vw, 1.4rem);
    }

    .header-brand-group {
        min-width: 0;
    }

    .site-logo {
        width: clamp(180px, 20vw, 245px);
        flex: 0 1 clamp(180px, 20vw, 245px);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 245px;
    }

    .main-nav {
        display: flex !important;

        gap: clamp(0.8rem, 1.6vw, 1.5rem);

        font-size: clamp(0.78rem, 1.05vw, 0.9rem);
        letter-spacing: 0.085em;

        white-space: nowrap;
    }

    .main-nav a {
        padding:
            0.55rem
            0;
    }

    .header-actions {
        display: flex;

        gap: 0.55rem;
    }

    .header-cta {
        display: inline-flex !important;

        padding:
            0.78rem
            1.05rem;

        font-size: clamp(0.72rem, 0.95vw, 0.82rem);
        letter-spacing: 0.075em;

        white-space: nowrap;
    }

    .theme-toggle {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

}


/* ---------------------------------------------------------
   NARROW TABLET
   Let the nav move onto a second row instead of disappearing.
   --------------------------------------------------------- */

@media (max-width: 860px) {

    .site-header {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "brand actions"
            "nav nav";

        min-height: 0;

        padding:
            0.8rem
            0
            0.7rem;

        row-gap: 0.4rem;
    }

    .header-brand-group {
        grid-area: brand;
    }

    .header-actions {
        grid-area: actions;
        justify-self: end;
    }

    .main-nav {
        grid-area: nav;

        justify-self: stretch;

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

        gap: 0;

        width: 100%;

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

    .main-nav a {
        min-height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding:
            0.65rem
            0.4rem;

        font-size: 0.76rem;
        letter-spacing: 0.07em;

        text-align: center;
    }

    .main-nav a::after {
        bottom: 3px;
    }

    .site-logo {
        width: min(210px, 45vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 210px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   Keep all four nav buttons and Talk to Us.
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .site-header {
        width: calc(100% - 1rem);

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

        grid-template-areas:
            "brand actions"
            "nav nav";

        padding:
            0.65rem
            0
            0.55rem;

        row-gap: 0.35rem;
    }

    .site-logo {
        width: min(165px, 46vw);
        flex-basis: auto;
    }

    .site-logo img,
    .site-logo-image {
        max-width: 165px;
    }

    .header-actions {
        display: flex !important;

        gap: 0.35rem;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .header-cta {
        display: inline-flex !important;

        min-height: 36px;

        padding:
            0.58rem
            0.72rem;

        font-size: 0.66rem;
        letter-spacing: 0.06em;
    }

    .main-nav {
        display: grid !important;

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

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

    .main-nav a {
        min-height: 38px;

        padding:
            0.55rem
            0.2rem;

        font-size: clamp(0.62rem, 2.7vw, 0.72rem);
        letter-spacing: 0.045em;
    }

}


/* ---------------------------------------------------------
   EXTRA-SMALL PHONES
   Still keep everything visible; reduce only the typography.
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .site-logo {
        width: min(145px, 43vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 145px;
    }

    .header-cta {
        padding:
            0.52rem
            0.58rem;

        font-size: 0.60rem;
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .main-nav a {
        min-height: 36px;

        font-size: 0.58rem;
        letter-spacing: 0.035em;
    }

}


/* =========================================================
   HOME HUD — POLISHED / BRIGHTER / ROUNDED REFINEMENT
   Bigger gray tech type, brighter segmented readouts,
   softer radius, richer depth. Keep this block LAST.
   ========================================================= */

.home-page .hero-system--diagnostic {
    border-radius: 18px;

    padding: 1rem 1.05rem;

    border-color: rgba(150, 164, 157, 0.24);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.024),
            rgba(255,255,255,0.004) 20%
        ),
        radial-gradient(
            circle at 78% 12%,
            rgba(140,255,159,0.045),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(13,17,15,0.97),
            rgba(6,9,8,0.99)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        inset 0 0 40px rgba(0,0,0,0.30),
        0 18px 50px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,255,255,0.01);

    overflow: hidden;
}

/* round the internal cells too */
.home-page .system-readouts,
.home-page .system-core--compact,
.home-page .system-grid a {
    border-radius: 10px;
}

.home-page .system-readouts {
    overflow: hidden;

    border: 1px solid rgba(150,164,157,0.16);
}

.home-page .system-readout {
    border-right-color: rgba(150,164,157,0.14);
    border-bottom-color: rgba(150,164,157,0.12);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.004)
        );
}

.home-page .system-readout:last-child {
    border-right: 0;
}


/* ---------------------------------------------------------
   GRAY TECH TYPE — BIGGER / SHARPER
   --------------------------------------------------------- */

.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note,
.home-page .system-core--compact,
.home-page .system-grid a,
.home-page .system-details--compact,
.home-page .system-details--compact span,
.home-page .system-details--compact strong {
    font-family:
        "Bahnschrift",
        "DIN Alternate",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

.home-page .system-status-label {
    font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    letter-spacing: 0.105em;
}

.home-page .system-status-sub {
    font-size: clamp(0.67rem, 0.74vw, 0.78rem);
    letter-spacing: 0.09em;
}

.home-page .system-readout-label {
    font-size: clamp(0.68rem, 0.76vw, 0.8rem);
    letter-spacing: 0.09em;
}

.home-page .system-readout-note {
    font-size: clamp(0.60rem, 0.68vw, 0.72rem);
    letter-spacing: 0.07em;
}

.home-page .system-details--compact span {
    font-size: clamp(0.66rem, 0.74vw, 0.78rem);
}

.home-page .system-details--compact strong {
    font-size: clamp(0.72rem, 0.8vw, 0.86rem);
}

.home-page .system-core--compact {
    font-size: clamp(0.72rem, 0.82vw, 0.88rem);
}

.home-page .system-grid a {
    font-size: clamp(0.72rem, 0.8vw, 0.86rem);
}


/* ---------------------------------------------------------
   HEALTHY — KEEP THE STAR
   --------------------------------------------------------- */

.home-page .system-status-value strong {
    font-size: clamp(1.9rem, 2.6vw, 2.7rem);

    color: #98ffad;

    text-shadow:
        0 0 7px rgba(152,255,173,0.48),
        0 0 16px rgba(92,230,129,0.22),
        0 0 30px rgba(92,230,129,0.09);
}


/* ---------------------------------------------------------
   SMALL 7-SEGMENT READOUTS — BRIGHTER
   --------------------------------------------------------- */

.home-page .segment-readout {
    color: rgba(158, 255, 178, 0.82);

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

    text-shadow:
        0 0 6px rgba(158,255,178,0.22),
        0 0 13px rgba(92,230,129,0.10);
}


/* ---------------------------------------------------------
   SEXIER MODULE BUTTONS
   --------------------------------------------------------- */

.home-page .system-grid a {
    border-color: rgba(150,164,157,0.16);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.016),
            rgba(255,255,255,0.004)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.014);

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

.home-page .system-grid a:hover,
.home-page .system-grid a:focus-visible {
    border-color: rgba(140,255,159,0.34);

    background:
        linear-gradient(
            180deg,
            rgba(140,255,159,0.060),
            rgba(140,255,159,0.012)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        inset 0 0 18px rgba(140,255,159,0.025),
        0 0 18px rgba(140,255,159,0.045);
}


/* ---------------------------------------------------------
   CORE / DETAILS POLISH
   --------------------------------------------------------- */

.home-page .system-core--compact {
    border-color: rgba(150,164,157,0.16);

    background:
        linear-gradient(
            90deg,
            rgba(140,255,159,0.032),
            rgba(255,255,255,0.005)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.014);
}

.home-page .system-details--compact {
    border-top-color: rgba(150,164,157,0.14);
}


/* ---------------------------------------------------------
   CUBE — cleaner, more premium
   --------------------------------------------------------- */

.home-page .system-wireframe {
    opacity: 0.38;
}

.home-page .cube-face {
    border-color: rgba(170, 194, 182, 0.48);
}

.home-page .cube-face--back {
    border-color: rgba(126, 160, 177, 0.40);
}

.home-page .cube-edge {
    background: rgba(162, 188, 175, 0.44);
}


/* ---------------------------------------------------------
   MOBILE — still tight, but no tiny gray type
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .hero-system--diagnostic {
        border-radius: 14px;

        padding: 0.78rem 0.75rem;
    }

    .home-page .system-status-label {
        font-size: 0.64rem;
    }

    .home-page .system-status-sub {
        font-size: 0.56rem;
    }

    .home-page .system-readout-label {
        font-size: 0.56rem;
    }

    .home-page .system-readout-note {
        display: none;
    }

    .home-page .system-status-value strong {
        font-size: clamp(1.55rem, 8.6vw, 1.95rem);
    }

    .home-page .segment-readout {
        font-size: clamp(0.98rem, 5.2vw, 1.18rem);

        color: rgba(158,255,178,0.88);
    }

    .home-page .system-core--compact {
        font-size: 0.62rem;
    }

    .home-page .system-grid a {
        font-size: 0.62rem;
    }

    .home-page .system-details--compact span {
        font-size: 0.58rem;
    }

    .home-page .system-details--compact strong {
        font-size: 0.64rem;
    }

    .home-page .system-readouts,
    .home-page .system-core--compact,
    .home-page .system-grid a {
        border-radius: 8px;
    }

}


/* Extra-small phones */
@media (max-width: 390px) {

    .home-page .system-status-label {
        font-size: 0.60rem;
    }

    .home-page .system-status-sub {
        font-size: 0.52rem;
    }

    .home-page .system-readout-label {
        font-size: 0.52rem;
    }

    .home-page .system-core--compact,
    .home-page .system-grid a {
        font-size: 0.58rem;
    }

}


/* =========================================================
   SITE-WIDE JSON UI — SHARED MICRO-INTERACTIONS
   ========================================================= */

/* Boot sequence */
.akcs-boot {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: grid;
    place-items: center;

    pointer-events: none;

    background: rgba(5, 8, 7, 0.82);

    opacity: 0;

    transition: opacity 180ms ease;
}

.akcs-boot.is-visible {
    opacity: 1;
}

.akcs-boot__screen {
    min-width: 250px;

    display: grid;
    gap: 0.32rem;

    padding: 1.05rem 1.2rem;

    border: 1px solid rgba(140,255,159,0.25);
    border-radius: 12px;

    background: rgba(7,10,9,0.96);

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #8d9792;
}

.akcs-boot__screen strong {
    margin-top: 0.15rem;

    color: #98ffad;

    font-family: "LT Stopwatch", var(--akcs-tech-sans);
    font-size: 1.4rem;
    font-weight: 400;

    text-shadow: 0 0 10px rgba(152,255,173,0.28);
}


/* HUD telemetry */
.hud-telemetry {
    display: flex;
    flex-wrap: wrap;

    gap: 0.35rem 0.7rem;

    padding-top: 0.45rem;

    border-top: 1px solid rgba(150,164,157,0.12);

    color: #646e69;

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.56rem;
    font-weight: 650;
    letter-spacing: 0.10em;
}

.hud-telemetry span:last-child {
    color: #777f7b;
}


/* Insights topic counts */
.insights-topic-card {
    position: relative;
}

.insights-topic-count {
    min-width: 1.6rem;
    height: 1.6rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    border: 1px solid var(--insight-line, var(--border));
    border-radius: 999px;

    color: var(--insight-muted, var(--muted));

    font-size: 0.72rem;
    line-height: 1;
}

.insights-live-badge {
    position: absolute;
    right: 1rem;
    top: 1rem;

    padding: 0.32rem 0.48rem;

    border: 1px solid rgba(82,176,82,0.28);
    border-radius: 999px;

    background: rgba(7,10,9,0.88);
    color: #98ffad;

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.insights-featured-card,
.insights-article-card__link {
    position: relative;
}


/* Article related systems strip */
.insight-system-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.45rem;

    margin-top: 1.25rem;
    padding-top: 1rem;

    border-top: 1px solid var(--insight-line, var(--border));

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.075em;
}

.insight-system-strip > span {
    color: var(--insight-muted, var(--muted));
    margin-right: 0.3rem;
}

.insight-system-strip a {
    padding: 0.38rem 0.55rem;

    border: 1px solid var(--insight-line, var(--border));
    border-radius: 999px;

    color: var(--green);
}


/* Expertise knowledge-base counter */
.expertise-kb-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.34rem 0.5rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--muted);

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
}


/* About history data strip */
.about-history-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.5rem;

    margin-top: 1.6rem;
    padding-top: 1.15rem;

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

    color: var(--muted);

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.about-history-strip i {
    color: var(--green);
    font-style: normal;
}


/* Footer rotating technical line */
.footer-live-line {
    color: var(--green) !important;
}


/* Mobile back-to-top */
.back-to-top {
    position: fixed;
    right: 0.85rem;
    bottom: 0.85rem;

    z-index: 120;

    min-width: 48px;
    height: 48px;

    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.26rem;

    padding: 0 0.7rem;

    border: 1px solid rgba(140,255,159,0.26);
    border-radius: 999px;

    background: rgba(7,10,9,0.92);
    color: #98ffad;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.025);

    font-family: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;

    opacity: 0;
    transform: translateY(8px);

    pointer-events: none;

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        border-color 160ms ease;
}

.back-to-top span {
    font-size: 1.05rem;
}

.back-to-top b {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .back-to-top {
        display: inline-flex;
    }

    .hud-telemetry {
        gap: 0.28rem 0.55rem;

        font-size: 0.50rem;
    }

    .about-history-strip {
        gap: 0.36rem;

        margin-top: 1.25rem;
        padding-top: 0.9rem;

        font-size: 0.72rem;
    }

    .insights-topic-count {
        min-width: 1.45rem;
        height: 1.45rem;

        font-size: 0.66rem;
    }

    .insights-live-badge {
        right: 0.7rem;
        top: 0.7rem;

        font-size: 0.56rem;
    }

    .insight-system-strip {
        font-size: 0.66rem;
    }

    .expertise-kb-badge {
        font-size: 0.66rem;
    }

}

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

    .akcs-boot {
        display: none !important;
    }

    .back-to-top {
        transition: none;
    }

}


/* =========================================================
   HUD / FOOTER / TECH FONT REFINEMENT — 2026-08-14
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-tech-sans:
        system-ui,
        "Segoe UI Variable",
        "Segoe UI",
        "Aptos",
        "Helvetica Neue",
        Arial,
        sans-serif;
}


/* ---------------------------------------------------------
   SITE-WIDE GREEN TECH FONT
   Replace the old typewriter feel with a cleaner modern sans.
   --------------------------------------------------------- */

.hero-topics,
.hero-topics a,
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.home-expertise-number,
.expertise-number,
.heritage-line,
.values-grid span,
.insight-type,
.insight-arrow,
.form-field label,
.footer-bottom,
.footer-nav,
.footer-live-line,
.insight-eyebrow,
.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insight-breadcrumbs,
.insight-meta,
.insight-tag,
.insights-card-tags span,
.insights-card-meta,
.insights-card-number,
.expertise-item__actions a,
.expertise-kb-badge,
.about-history-strip,
.insight-system-strip,
.insights-topic-count,
.insights-live-badge {
    font-family: var(--akcs-tech-sans) !important;
    font-weight: 720;
    letter-spacing: 0.085em;
}

/* Slightly soften the green so the new sans feels expensive rather than loud. */
.hero-topics,
.hero-topics a,
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.home-expertise-number,
.expertise-number,
.heritage-line span,
.insight-type,
.insight-arrow,
.footer-live-line,
.insight-eyebrow,
.expertise-item__actions a {
    text-rendering: geometricPrecision;
}


/* ---------------------------------------------------------
   HUD — REMOVE LEFTOVER CODE LABEL
   --------------------------------------------------------- */

.home-page .system-core::before {
    content: none !important;
    display: none !important;
}


/* ---------------------------------------------------------
   HUD — BIGGER GRAY TYPE / BETTER BALANCE
   --------------------------------------------------------- */

.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note,
.home-page .system-core--compact,
.home-page .system-grid a,
.home-page .system-details--compact,
.home-page .system-details--compact span,
.home-page .system-details--compact strong,
.home-page .hud-telemetry {
    font-family: var(--akcs-tech-sans) !important;
}

.home-page .system-status-label {
    font-size: clamp(0.86rem, 0.95vw, 1rem);
    color: #a2aaa6;
}

.home-page .system-status-sub {
    font-size: clamp(0.72rem, 0.8vw, 0.84rem);
    color: #777f7b;
}

.home-page .system-readout-label {
    font-size: clamp(0.74rem, 0.82vw, 0.86rem);
    color: #9ba39f;
}

.home-page .system-readout-note {
    font-size: clamp(0.64rem, 0.72vw, 0.76rem);
    color: #6f7773;
}

.home-page .system-grid a {
    font-size: clamp(0.78rem, 0.88vw, 0.94rem);
}

.home-page .system-details--compact span {
    font-size: clamp(0.7rem, 0.8vw, 0.84rem);
}

.home-page .system-details--compact strong {
    font-size: clamp(0.78rem, 0.88vw, 0.94rem);
}

.home-page .hud-telemetry {
    font-size: clamp(0.58rem, 0.66vw, 0.7rem);
}


/* ---------------------------------------------------------
   HUD CORE — CENTERED SINGLE LINE
   --------------------------------------------------------- */

.home-page .system-core--compact {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.7rem;

    padding: 0.7rem 0.85rem;

    text-align: center;

    font-size: clamp(0.82rem, 0.92vw, 0.98rem);
    letter-spacing: 0.10em;
}

.home-page .system-core--compact span {
    color: #c5ccc8;
}

.home-page .system-core--compact .system-core-separator {
    color: rgba(152,255,173,0.62);

    font-weight: 500;
}


/* ---------------------------------------------------------
   HUD — "DYING BATTERY" GLOW
   Tiny irregular breathing, intentionally subtle.
   --------------------------------------------------------- */

@keyframes akcs-hud-dying-battery {
    0% {
        opacity: 0.92;
        filter: brightness(0.94);
    }
    14% {
        opacity: 1;
        filter: brightness(1.08);
    }
    31% {
        opacity: 0.94;
        filter: brightness(0.97);
    }
    49% {
        opacity: 0.86;
        filter: brightness(0.90);
    }
    54% {
        opacity: 0.98;
        filter: brightness(1.06);
    }
    72% {
        opacity: 0.91;
        filter: brightness(0.95);
    }
    100% {
        opacity: 0.96;
        filter: brightness(1.00);
    }
}

@keyframes akcs-hud-glow-bloom {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(152,255,173,0.26),
            0 0 14px rgba(92,230,129,0.11);
    }
    47% {
        text-shadow:
            0 0 9px rgba(152,255,173,0.42),
            0 0 20px rgba(92,230,129,0.18),
            0 0 30px rgba(92,230,129,0.07);
    }
    53% {
        text-shadow:
            0 0 4px rgba(152,255,173,0.18),
            0 0 10px rgba(92,230,129,0.07);
    }
}

.home-page .system-status-value strong,
.home-page .segment-readout,
.home-page .system-details--compact strong a {
    animation:
        akcs-hud-dying-battery 4.8s steps(1, end) infinite,
        akcs-hud-glow-bloom 5.6s ease-in-out infinite;
}

.home-page .system-readout:nth-child(2) .segment-readout {
    animation-delay: -1.3s, -0.8s;
}

.home-page .system-readout:nth-child(3) .segment-readout {
    animation-delay: -2.1s, -1.7s;
}

.home-page .system-details--compact strong a {
    font-size: clamp(1.1rem, 1.32vw, 1.42rem);

    color: #a4ffb6;

    text-shadow:
        0 0 8px rgba(164,255,182,0.34),
        0 0 18px rgba(92,230,129,0.14);
}


/* ---------------------------------------------------------
   FOOTER — PRETTIER DIRECT CONTACT
   --------------------------------------------------------- */

.footer-main {
    align-items: start;
}

.footer-message {
    min-width: 0;
}

.footer-tagline {
    margin-bottom: 1.35rem;
}

.footer-contact-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.55rem;

    max-width: 920px;
}

.footer-contact-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 0.32rem;

    padding: 0.9rem 0.95rem;

    border: 1px solid rgba(150,164,157,0.18);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.005)
        );

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

.footer-contact-item:hover,
.footer-contact-item:focus-visible {
    border-color: rgba(140,255,159,0.32);

    background:
        linear-gradient(
            180deg,
            rgba(140,255,159,0.05),
            rgba(140,255,159,0.01)
        );

    transform: translateY(-1px);
}

.footer-contact-label {
    color: var(--green);

    font-family: var(--akcs-tech-sans);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.10em;
}

.footer-contact-item strong {
    color: var(--text-strong);

    font-family: var(--akcs-tech-sans);
    font-size: clamp(0.98rem, 1.1vw, 1.16rem);
    font-weight: 700;
    line-height: 1.2;

    overflow-wrap: anywhere;
}

.footer-contact-item--email strong {
    font-size: clamp(0.9rem, 1vw, 1.06rem);
}

.footer-partner-badges {
    margin-top: 1.25rem;
}

.footer-nav {
    padding-top: 0.25rem;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .system-status-label {
        font-size: 0.72rem;
    }

    .home-page .system-status-sub {
        font-size: 0.62rem;
    }

    .home-page .system-readout-label {
        font-size: 0.62rem;
    }

    .home-page .system-grid a {
        font-size: 0.66rem;
    }

    .home-page .system-core--compact {
        min-height: 40px;

        gap: 0.42rem;

        font-size: 0.68rem;
    }

    .home-page .system-details--compact span {
        font-size: 0.62rem;
    }

    .home-page .system-details--compact strong {
        font-size: 0.68rem;
    }

    .home-page .system-details--compact strong a {
        font-size: clamp(1rem, 5.4vw, 1.18rem);
    }

    .footer-contact-panel {
        grid-template-columns: 1fr;

        gap: 0.45rem;
    }

    .footer-contact-item {
        padding: 0.8rem 0.85rem;
    }

    .footer-contact-label {
        font-size: 0.64rem;
    }

    .footer-contact-item strong,
    .footer-contact-item--email strong {
        font-size: 0.98rem;
    }

}

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

    .home-page .system-status-value strong,
    .home-page .segment-readout,
    .home-page .system-details--compact strong a {
        animation: none !important;
    }

}


/* =========================================================
   ULTRA-LEAN TECH TYPE — THINNER / TALLER / CLEANER
   Authoritative override for the site's small green technical font.
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-tech-ultralean:
        "Barlow Condensed",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

/* Site-wide small technical language */
.hero-topics,
.hero-topics a,
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.home-expertise-number,
.expertise-number,
.heritage-line,
.values-grid span,
.insight-type,
.insight-arrow,
.form-field label,
.footer-bottom,
.footer-nav,
.footer-live-line,
.expertise-item__actions a,
.expertise-kb-badge,
.about-history-strip,
.insight-system-strip,
.insights-topic-count,
.insights-live-badge,
.contact-direct__label,
.contact-direct__note {
    font-family: var(--akcs-tech-ultralean) !important;

    font-weight: 300 !important;
    font-style: normal !important;
    font-variant: normal !important;

    letter-spacing: 0.12em !important;
    line-height: 1.28;

    text-transform: uppercase;

    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Slight hierarchy without becoming bold */
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.home-expertise-number,
.expertise-number {
    font-weight: 400 !important;
}

/* Keep the green elegant and slightly cooler */
.hero-eyebrow,
.section-label,
.sage-partner-kicker,
.home-expertise-number,
.expertise-number,
.insight-type,
.insight-arrow,
.expertise-item__actions a,
.footer-live-line {
    color: color-mix(in srgb, var(--green) 78%, white 22%);
}

/* Make the tall/narrow character a touch more apparent */
.hero-eyebrow,
.section-label,
.sage-partner-kicker {
    transform: scaleX(0.96);
    transform-origin: left center;
}

.hero-topics,
.hero-topics a {
    letter-spacing: 0.105em !important;
    font-weight: 300 !important;
}

.heritage-line,
.footer-nav,
.footer-bottom,
.form-field label {
    font-weight: 300 !important;
}

/* Contact tech labels */
.page-contact .contact-direct__label,
.page-contact .contact-direct__note {
    font-family: var(--akcs-tech-ultralean) !important;
    font-weight: 300 !important;
    letter-spacing: 0.11em !important;
}

/* Expertise links should stay slim */
.page-expertise .expertise-item__actions a {
    font-family: var(--akcs-tech-ultralean) !important;
    font-weight: 300 !important;
    letter-spacing: 0.10em !important;
}

/* HUD gray labels: same tall, thin language */
.home-page .system-status-label,
.home-page .system-status-sub,
.home-page .system-readout-label,
.home-page .system-readout-note,
.home-page .system-core--compact,
.home-page .system-grid a,
.home-page .system-details--compact,
.home-page .system-details--compact span,
.home-page .system-details--compact strong,
.home-page .hud-telemetry {
    font-family: var(--akcs-tech-ultralean) !important;
    font-weight: 300 !important;
    letter-spacing: 0.105em !important;
}

/* Keep the segmented readouts special */
.home-page .system-status-value strong,
.home-page .segment-readout,
.home-page .system-details--compact strong a {
    font-family: "LT Stopwatch", var(--akcs-tech-sans) !important;
}

/* Mobile keeps the thin look without getting unreadably tiny */
@media (max-width: 650px) {

    .hero-eyebrow,
    .section-label,
    .sage-partner-kicker,
    .hero-topics,
    .hero-topics a {
        font-weight: 300 !important;
        letter-spacing: 0.095em !important;
    }

}


/* =========================================================
   FOOTER — DYNAMIC / ELEGANT / TECHNICAL
   More movement and hierarchy without becoming busy.
   Keep this block LAST.
   ========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
}

/* subtle animated technical wash */
.site-footer::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 32%,
            rgba(82,176,82,0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(95,188,255,0.055),
            transparent 28%
        );

    opacity: 0.72;

    transform: translate3d(0, 0, 0);

    animation: akcs-footer-wash 16s ease-in-out infinite;
}

@keyframes akcs-footer-wash {
    0%, 100% {
        transform: translate3d(-1.5%, 0, 0);
        opacity: 0.52;
    }
    50% {
        transform: translate3d(1.5%, -1%, 0);
        opacity: 0.82;
    }
}

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

/* Contact cards become a cleaner instrument cluster. */
.footer-contact-panel {
    gap: 0.55rem;
}

.footer-contact-item {
    position: relative;
    overflow: hidden;

    border-color: rgba(150,164,157,0.12);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.010),
            rgba(255,255,255,0.002)
        );

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

/* tiny scan line on hover */
.footer-contact-item::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(152,255,173,0.55),
            transparent
        );

    opacity: 0;

    transform: translateY(0);

    transition: opacity 180ms ease;
}

.footer-contact-item:hover,
.footer-contact-item:focus-visible {
    transform: translateY(-2px);

    border-color: rgba(140,255,159,0.28);

    background:
        linear-gradient(
            180deg,
            rgba(140,255,159,0.035),
            rgba(255,255,255,0.003)
        );

    box-shadow:
        0 12px 26px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.016);
}

.footer-contact-item:hover::after,
.footer-contact-item:focus-visible::after {
    opacity: 1;

    animation: akcs-footer-scan 1.4s ease-out;
}

@keyframes akcs-footer-scan {
    from {
        transform: translateY(0);
        opacity: 0.55;
    }
    to {
        transform: translateY(72px);
        opacity: 0;
    }
}

.footer-contact-label {
    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 0.72rem;
    font-weight: 300 !important;
    letter-spacing: 0.11em !important;
}

.footer-contact-item strong {
    font-weight: 430;
}

/* Make footer navigation feel like a live control rail. */
.footer-nav a {
    position: relative;

    opacity: 0.78;

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

.footer-nav a::before {
    content: "";

    position: absolute;
    left: -0.75rem;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--green);

    opacity: 0;

    transform: translateY(-50%) scale(0.6);

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

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--green);
    opacity: 1;

    transform: translateX(3px);
}

.footer-nav a:hover::before,
.footer-nav a:focus-visible::before {
    opacity: 0.9;
    transform: translateY(-50%) scale(1);
}

/* Rotating footer technical line gets a soft status-dot treatment. */
.footer-live-line {
    position: relative;

    padding-left: 1rem;

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-weight: 300 !important;
    letter-spacing: 0.095em !important;
}

.footer-live-line::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--green);

    transform: translateY(-50%);

    box-shadow:
        0 0 0 3px rgba(82,176,82,0.05),
        0 0 8px rgba(82,176,82,0.16);

    animation: akcs-footer-status-breathe 7.5s ease-in-out infinite;
}

@keyframes akcs-footer-status-breathe {
    0%, 100% {
        opacity: 0.4;
        box-shadow:
            0 0 0 3px rgba(82,176,82,0.03),
            0 0 4px rgba(82,176,82,0.08);
    }
    50% {
        opacity: 0.95;
        box-shadow:
            0 0 0 4px rgba(82,176,82,0.06),
            0 0 10px rgba(82,176,82,0.20);
    }
}

/* Slight dynamic lift on Sage partner badges. */
.footer-partner-badges img {
    transition:
        transform 220ms ease,
        opacity 220ms ease,
        filter 220ms ease;
}

.footer-partner-badges img:hover {
    transform: translateY(-2px);
    opacity: 1;

    filter:
        drop-shadow(0 6px 14px rgba(0,0,0,0.08));
}

/* Mobile keeps motion, just quieter. */
@media (max-width: 650px) {

    .footer-contact-item {
        border-radius: 11px;
    }

    .footer-nav a::before {
        left: -0.55rem;
    }

    .site-footer::before {
        opacity: 0.46;
    }
}

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

    .site-footer::before,
    .footer-live-line::before {
        animation: none !important;
    }

    .footer-contact-item:hover::after,
    .footer-contact-item:focus-visible::after {
        animation: none !important;
    }
}


/* =========================================================
   PRIVACY / LEGAL / SEO INFRASTRUCTURE — AUGUST 2026
   ========================================================= */

.footer-nav-groups {
    display: grid;
    gap: 2rem;
    align-content: start;
}

.footer-legal-nav {
    display: grid;
    gap: .75rem;
    font-family: var(--font-tech, monospace);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-legal-nav a,
.footer-cookie-settings,
.inline-cookie-settings,
.cookie-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.footer-cookie-settings,
.inline-cookie-settings,
.cookie-text-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(104, 255, 183, .58);
    background: rgba(6, 8, 11, .96);
    box-shadow: 0 20px 70px rgba(0,0,0,.46);
    backdrop-filter: blur(14px);
    color: #f6f7f8;
}

.cookie-banner[hidden] { display: none !important; }
.cookie-banner__copy p:last-child { margin: .35rem 0 0; max-width: 64rem; line-height: 1.55; }
.cookie-banner__actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cookie-banner .button { min-height: 44px; white-space: nowrap; }
.cookie-text-button { padding: .65rem .35rem; color: #f6f7f8; text-decoration: underline; text-underline-offset: .2em; }

.cookie-dialog {
    width: min(720px, calc(100vw - 2rem));
    max-height: min(780px, calc(100vh - 2rem));
    border: 1px solid rgba(104, 255, 183, .58);
    padding: 0;
    background: #090b0e;
    color: #f6f7f8;
    box-shadow: 0 25px 90px rgba(0,0,0,.65);
}
.cookie-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.cookie-dialog__panel { padding: 1.6rem; }
.cookie-dialog__header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.cookie-dialog__header h2 { margin: .2rem 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.cookie-dialog__close { border: 0; background: transparent; color: inherit; font-size: 2rem; cursor: pointer; line-height: 1; }
.cookie-preference-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.cookie-preference-row p { margin: .25rem 0 0; opacity: .76; line-height: 1.5; }
.cookie-preference-row input { width: 1.3rem; height: 1.3rem; }
.cookie-always-on { font-family: var(--font-tech, monospace); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #68ffb7; }
.cookie-dialog__actions { display: flex; gap: .75rem; flex-wrap: wrap; padding-top: 1.35rem; }

.legal-hero { padding-bottom: 2rem; }
.legal-page { width: min(100% - 2rem, 1100px); margin: 0 auto; padding: 2rem 0 7rem; }
.legal-page__content { max-width: 860px; }
.legal-page__content h2 { margin: 3rem 0 .9rem; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.legal-page__content p,
.legal-page__content li { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.72; }
.legal-page__content ul { padding-left: 1.25rem; }
.legal-updated { font-family: var(--font-tech, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.legal-data-table { margin: 1.6rem 0; border: 1px solid rgba(255,255,255,.18); }
.legal-data-row { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(130px,.6fr) minmax(0,2fr); gap: 1rem; padding: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.legal-data-row:first-child { border-top: 0; }
.legal-data-row--head { font-family: var(--font-tech, monospace); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.form-privacy-note { margin-top: 1rem; max-width: 52rem; font-size: .9rem; line-height: 1.55; opacity: .75; }
.form-privacy-note a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

body:not(.dark-theme) .cookie-banner,
body:not(.dark-theme) .cookie-dialog {
    background: rgba(250, 251, 252, .98);
    color: #101216;
    border-color: rgba(20, 130, 95, .42);
}
body:not(.dark-theme) .cookie-text-button { color: #101216; }
body:not(.dark-theme) .legal-data-table { border-color: rgba(0,0,0,.18); }
body:not(.dark-theme) .legal-data-row { border-top-color: rgba(0,0,0,.12); }

@media (max-width: 780px) {
    .cookie-banner { grid-template-columns: 1fr; padding: 1rem; }
    .cookie-banner__actions { justify-content: flex-start; }
    .legal-data-row { grid-template-columns: 1fr; gap: .35rem; }
    .legal-data-row--head { display: none; }
}

/* =========================================================
   STEP 3 — SEO SERVICE PAGES
   Sage 100 Consulting / Upgrades / Crystal Reports
   ========================================================= */

.service-page .service-hero {
    padding-bottom: clamp(5rem, 7vw, 7rem);
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
}

.service-section,
.service-faq {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    padding: clamp(5rem, 7vw, 7rem) 0;
    border-bottom: 1px solid var(--border);
}

.service-section {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
}

.service-section__heading h2,
.service-faq__heading h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.05em;
}

.service-section__copy {
    max-width: 850px;
}

.service-section__copy p {
    margin: 0 0 1.55rem;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.25vw, 1.2rem);
    line-height: 1.76;
}

.service-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.service-list li {
    position: relative;
    margin: 0;
    padding: 1.15rem 1rem 1.15rem 2rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: clamp(1.05rem, 1.18vw, 1.16rem);
    line-height: 1.55;
}

.service-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 1.12rem;
    color: var(--green);
    font-family: var(--akcs-tech-sans);
    font-weight: 800;
}

.service-faq {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 6vw, 7rem);
}

.service-faq__list {
    border-top: 1px solid var(--border);
}

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

.service-faq__item summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 1.5rem 3rem 1.5rem 0;
    color: var(--text-strong);
    font-size: clamp(1.2rem, 1.55vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
}

.service-faq__item summary::-webkit-details-marker {
    display: none;
}

.service-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 1.35rem;
    color: var(--green);
    font-family: var(--akcs-tech-sans);
    font-size: 1.5rem;
    font-weight: 800;
}

.service-faq__item[open] summary::after {
    content: "−";
}

.service-faq__item summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
}

.service-faq__answer {
    max-width: 760px;
    padding: 0 3rem 1.5rem 0;
}

.service-faq__answer p {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.service-cta__copy {
    max-width: 760px;
    margin: -1.5rem 0 2.5rem;
    color: var(--muted);
    font-size: clamp(1.08rem, 1.3vw, 1.2rem);
    line-height: 1.7;
}

.page-expertise .expertise-intro__service-link {
    margin-top: 2rem !important;
}

.page-expertise .expertise-intro__service-link a,
.page-expertise .expertise-service-link {
    color: var(--green) !important;
    font-family: var(--akcs-tech-sans);
    font-size: 1rem !important;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-expertise .expertise-intro__service-link a:hover,
.page-expertise .expertise-intro__service-link a:focus-visible,
.page-expertise .expertise-service-link:hover,
.page-expertise .expertise-service-link:focus-visible {
    color: var(--text-strong) !important;
}

@media (max-width: 1100px) {
    .service-section,
    .service-faq {
        width: min(calc(100% - 3rem), var(--max-width));
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }
}

@media (max-width: 650px) {
    .service-section,
    .service-faq {
        width: calc(100% - 2rem);
        padding: 4rem 0;
    }

    .service-section__heading h2,
    .service-faq__heading h2 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .service-hero__actions {
        display: grid;
    }

    .service-faq__item summary {
        padding-right: 2.5rem;
    }
}

/* =========================================================
   BATCH 2 SERVICE DISCOVERY
   ========================================================= */

.home-service-bridge,
.insights-service-links {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--border);
}

.home-service-bridge__links,
.insights-service-links__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.home-service-bridge__links a,
.insights-service-links__grid a {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    font-family: var(--akcs-tech-sans);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.home-service-bridge__links a:hover,
.home-service-bridge__links a:focus-visible,
.insights-service-links__grid a:hover,
.insights-service-links__grid a:focus-visible {
    border-color: var(--green);
    color: var(--green);
    background: rgba(82, 176, 82, 0.06);
}

@media (max-width: 1100px) {
    .home-service-bridge,
    .insights-service-links {
        width: min(calc(100% - 3rem), var(--max-width));
    }
}

@media (max-width: 650px) {
    .home-service-bridge,
    .insights-service-links {
        width: calc(100% - 2rem);
        padding: 2.5rem 0;
    }

    .home-service-bridge__links,
    .insights-service-links__grid {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   AUTHORITY + CONVERSION PASS
   ========================================================= */

.authority-band,
.about-proof {
    width: min(calc(100% - 6rem), var(--max-width));
    margin: 0 auto;
    padding: clamp(4.5rem, 7vw, 7rem) 0;
    border-bottom: 1px solid var(--border);
}

.authority-band {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
}

.authority-band__intro h2,
.about-proof__heading h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: clamp(2.8rem, 4.8vw, 5.2rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.authority-band__intro > p:last-child {
    max-width: 690px;
    margin: 1.7rem 0 0;
    color: var(--muted);
    font-size: clamp(1.04rem, 1.2vw, 1.16rem);
    line-height: 1.7;
}

.authority-band__grid,
.about-proof__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.authority-card,
.about-proof__item {
    min-height: 170px;
    padding: 1.3rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.authority-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.authority-card:hover,
.authority-card:focus-visible {
    background: rgba(82, 176, 82, 0.055);
    border-color: var(--green);
    transform: translateY(-2px);
}

.authority-card__value,
.about-proof__item strong {
    color: var(--text-strong);
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.authority-card__label {
    margin-top: auto;
    padding-top: 2rem;
    color: var(--green);
    font-family: var(--akcs-tech-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.authority-card__note,
.about-proof__item span {
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.about-proof__heading {
    max-width: 960px;
    margin-bottom: 3rem;
}

.about-proof__item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.about-proof__note {
    max-width: 950px;
    margin: 1.4rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.contact-availability {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.8rem 0 1.5rem;
}

.contact-availability span {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--akcs-tech-sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.contact-availability strong {
    color: var(--green);
    letter-spacing: 0.08em;
}

.footer-availability {
    margin: 0.55rem 0 1.2rem;
    color: var(--muted);
    font-family: var(--akcs-tech-sans);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    .authority-band,
    .about-proof {
        width: min(calc(100% - 3rem), var(--max-width));
    }

    .authority-band {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 650px) {
    .authority-band,
    .about-proof {
        width: calc(100% - 2rem);
        padding: 4rem 0;
    }

    .authority-band__grid,
    .about-proof__grid {
        grid-template-columns: 1fr;
    }

    .authority-card,
    .about-proof__item {
        min-height: 145px;
    }

    .contact-availability {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HUD WIREFRAME CUBE — GEOMETRY FIX
   2026-08-14
   Authoritative override. Keep this block LAST.
   Straightens the cube without changing HUD scale/layout.
   ========================================================= */

.home-page .wireframe-cube {
    /*
       Previous geometry rotated the entire cube -2deg and then
       approximated the four connecting edges. That made the
       ornament read as skewed/crooked once the HUD was scaled.

       Front face:  x 8,  y 16
       Back face:   x 29, y 0
       Offset:      +21, -16
       Connector:   26.4px @ -37.3deg
    */
    transform: none;
}

.home-page .cube-face--front {
    left: 8px;
    top: 16px;
}

.home-page .cube-face--back {
    left: 29px;
    top: 0;
}

/* Exact connectors between corresponding corners. */
.home-page .cube-edge {
    width: 26.4px;
    height: 1px;

    transform-origin: left center;
    transform: rotate(-37.3deg);
}

.home-page .cube-edge--1 {
    left: 8px;
    top: 16px;
}

.home-page .cube-edge--2 {
    left: 56px;
    top: 16px;
}

.home-page .cube-edge--3 {
    left: 8px;
    top: 64px;
}

.home-page .cube-edge--4 {
    left: 56px;
    top: 64px;
}

/* Keep the ornament centered and stable when its parent is scaled. */
.home-page .system-wireframe {
    transform-origin: top right;
}


/* =========================================================
   HUD WIREFRAME CUBE — CONTAINER / CLIPPING FIX
   2026-08-14
   Authoritative override. KEEP THIS BLOCK LAST.
   The prior compact pass reduced the wireframe box and then
   scaled that same reduced box again. Give the cube a stable
   drawing canvas and scale the artwork INSIDE it instead.
   ========================================================= */

/* Stable layout slot inside the HUD header. */
.home-page .system-hud-top {
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: start;
}

/* Do NOT scale the layout container itself. */
.home-page .system-wireframe {
    position: relative;

    width: 78px;
    height: 68px;

    transform: none !important;
    transform-origin: center center !important;

    overflow: visible !important;
    opacity: 0.42;
}

/*
   Use a full-size internal drawing canvas.
   This keeps all face/edge coordinates in one stable coordinate
   system instead of changing them at every breakpoint.
*/
.home-page .wireframe-cube {
    position: absolute;

    width: 84px;
    height: 80px;

    inset: auto !important;
    right: -2px;
    top: 0;

    transform: scale(0.72) !important;
    transform-origin: top right !important;

    overflow: visible !important;
}

/* Exact square geometry. */
.home-page .cube-face {
    width: 48px;
    height: 48px;
}

.home-page .cube-face--front {
    left: 8px;
    top: 20px;
}

.home-page .cube-face--back {
    left: 28px;
    top: 4px;
}

/*
   Back face is offset +20 / -16 from front.
   Connector length = sqrt(20² + 16²) = 25.61px
   Angle = atan2(-16, 20) = -38.66deg
*/
.home-page .cube-edge {
    width: 25.61px;
    height: 1px;

    transform-origin: left center;
    transform: rotate(-38.66deg) !important;
}

.home-page .cube-edge--1 {
    left: 8px;
    top: 20px;
}

.home-page .cube-edge--2 {
    left: 56px;
    top: 20px;
}

.home-page .cube-edge--3 {
    left: 8px;
    top: 68px;
}

.home-page .cube-edge--4 {
    left: 56px;
    top: 68px;
}

/* Keep decorative nodes out of the cube geometry itself. */
.home-page .wireframe-node--1 {
    right: 1px;
    top: 5px;
}

.home-page .wireframe-node--2 {
    left: 1px;
    bottom: 4px;
}

.home-page .wireframe-node--3 {
    right: 8px;
    bottom: 1px;
}


/* ---------------------------------------------------------
   TABLET
   Preserve the stable canvas; only scale the inner artwork.
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    .home-page .system-wireframe {
        width: 70px;
        height: 62px;

        transform: none !important;
    }

    .home-page .wireframe-cube {
        right: -2px;
        top: 1px;

        transform: scale(0.64) !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   Same geometry, smaller artwork.
   --------------------------------------------------------- */

@media (max-width: 650px) {

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 54px;
    }

    .home-page .system-wireframe {
        width: 54px;
        height: 48px;

        transform: none !important;
    }

    .home-page .wireframe-cube {
        right: -1px;
        top: 0;

        transform: scale(0.49) !important;
    }

}


/* ---------------------------------------------------------
   EXTRA-SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .home-page .system-wireframe {
        width: 46px;
        height: 42px;

        transform: none !important;
    }

    .home-page .wireframe-cube {
        transform: scale(0.42) !important;
    }

}


/* =========================================================
   GLOBAL HORIZONTAL OVERFLOW + HUD POSITION REFINEMENT
   2026-08-14
   KEEP THIS BLOCK LAST.
   ========================================================= */

/*
   Prevent tiny decorative/fixed elements from creating a
   horizontal document scrollbar.
   `clip` avoids introducing another scroll container.
*/
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/*
   100vw includes the browser scrollbar gutter on some desktop
   browsers. Since the canvas is already position:fixed; inset:0,
   100% fills the viewport without adding those extra pixels.
*/
.akcs-electric-canvas {
    width: 100% !important;
    height: 100% !important;
}

/*
   The compact HUD was explicitly pinned to the far RIGHT edge
   of the second hero column with justify-self:end.
   Put it against the INNER edge of that column instead so it
   sits closer to the center of the composition.
*/
@media (min-width: 1101px) {

    .home-page .hero-system--diagnostic {
        justify-self: start !important;
    }

}

/*
   At tablet/mobile widths the hero collapses and the HUD should
   remain naturally full-width rather than trying to hug an edge.
*/
@media (max-width: 1100px) {

    .home-page .hero-system--diagnostic {
        justify-self: stretch !important;
    }

}

/* =========================================================
   HEADER LOGO — DOMINANT HOME BUTTON
   Authoritative final override.
   Bigger brand presence without competing with hero headlines.
   ========================================================= */

@media (min-width: 1101px) {
    .site-header {
        min-height: 148px;

        grid-template-columns:
            minmax(400px, 1.15fr)
            auto
            minmax(220px, 0.85fr);
    }

    .site-logo {
        width: clamp(400px, 30vw, 460px);
        flex: 0 1 clamp(400px, 30vw, 460px);
    }

    .site-logo img,
    .site-logo-image {
        width: 100%;
        max-width: 460px;
        height: auto;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    .site-header {
        min-height: 132px;

        grid-template-columns:
            minmax(330px, 1fr)
            auto
            minmax(200px, 0.8fr);

        gap: 1.25rem;
    }

    .site-logo {
        width: clamp(330px, 29vw, 385px);
        flex-basis: clamp(330px, 29vw, 385px);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 385px;
    }
}

@media (max-width: 1100px) {
    .site-logo {
        width: clamp(240px, 27vw, 310px);
        flex-basis: clamp(240px, 27vw, 310px);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 310px;
    }
}

@media (max-width: 860px) {
    .site-logo {
        width: min(260px, 52vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 260px;
    }
}

@media (max-width: 650px) {
    .site-logo {
        width: min(205px, 52vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 205px;
    }
}

@media (max-width: 390px) {
    .site-logo {
        width: min(175px, 49vw);
    }

    .site-logo img,
    .site-logo-image {
        max-width: 175px;
    }
}

/* =========================================================
   ELECTRIC TRAILS — SUBTLE REFINEMENT
   Slightly quieter without losing the effect.
   Keep this block LAST.
   ========================================================= */

.akcs-electric-canvas-top {
    opacity: 0.66 !important;
}

body.dark-theme .akcs-electric-canvas-top {
    opacity: 0.78 !important;
}

.akcs-electric-canvas-footer {
    opacity: 0.46 !important;
}

body.dark-theme .akcs-electric-canvas-footer {
    opacity: 0.54 !important;
}

@media (max-width: 650px) {
    .akcs-electric-canvas-top {
        opacity: 0.54 !important;
    }

    .akcs-electric-canvas-footer {
        opacity: 0.40 !important;
    }
}

/* =========================================================
   LAUNCH FOOTER + CONTACT FORM — AUTHORITATIVE FINAL LAYOUT
   2026-08-14
   Keep this block LAST.
   ========================================================= */

/* Contact form utility styles live in the main stylesheet. */
.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-form-status {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-form-status--success {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 7%, transparent);
}

.contact-form-status--error {
    color: #ff9a9a;
    background: rgba(255, 120, 120, 0.045);
}

/* Footer: brand/contact first, compact navigation underneath. */
.site-footer {
    overflow: hidden;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    grid-template-areas:
        "brand message"
        "nav nav" !important;
    gap: 2rem 3rem !important;
    align-items: start !important;
    padding: 3.1rem 0 1.8rem !important;
}

.footer-brand {
    grid-area: brand !important;
    width: 150px !important;
    max-width: 150px !important;
    align-self: start;
}

.footer-message {
    grid-area: message !important;
    min-width: 0;
}

.footer-tagline {
    margin-bottom: 1.1rem !important;
}

.footer-contact-panel {
    max-width: 900px;
}

.footer-partner-badges {
    margin-top: 1rem !important;
}

.footer-nav-groups--compact {
    grid-area: nav !important;
    display: grid !important;
    gap: 1rem !important;
    min-width: 0;
    align-content: start;
}

.footer-nav-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.1rem 2rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.footer-nav.footer-nav--compact {
    display: flex !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 0.42rem !important;
    min-width: 0;
    padding-top: 0 !important;
    font-size: 0.76rem;
}

.footer-nav-title {
    margin: 0 0 0.35rem;
    color: var(--muted);
    font-family: var(--akcs-tech-ultralean, "Arial Narrow", Arial, sans-serif);
    font-size: 0.72rem;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    line-height: 1;
    text-transform: uppercase;
}

.footer-nav--compact a {
    line-height: 1.22;
}

.footer-legal-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
}

.footer-bottom {
    min-height: 0 !important;
    padding: 0.95rem 0 1.05rem !important;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .footer-main {
        grid-template-columns: 125px minmax(0, 1fr) !important;
        gap: 1.8rem 2rem !important;
        padding-top: 2.7rem !important;
    }

    .footer-brand {
        width: 115px !important;
        max-width: 115px !important;
    }

    .footer-nav-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 650px) {
    .footer-main {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "message"
            "nav" !important;
        gap: 1.45rem !important;
        padding: 2.25rem 0 1.35rem !important;
    }

    .footer-brand {
        width: 102px !important;
        max-width: 102px !important;
    }

    .footer-tagline {
        margin-bottom: 0.95rem !important;
    }

    .footer-nav-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.15rem 1.25rem !important;
        padding-top: 1rem;
    }

    .footer-nav.footer-nav--compact {
        font-size: 0.73rem;
    }

    .footer-legal-nav {
        align-items: flex-start;
        font-size: 0.69rem;
    }

    .footer-bottom {
        gap: 0.35rem !important;
        padding: 0.9rem 0 1rem !important;
    }
}

@media (max-width: 330px) {
    .footer-nav-compact-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Final mobile service-page overflow guard. */
.service-section__heading,
.service-section__copy,
.service-faq__heading,
.service-faq__list {
    min-width: 0;
}

@media (max-width: 650px) {
    .service-section__heading h2,
    .service-faq__heading h2 {
        font-size: clamp(2.55rem, 10.8vw, 4rem);
        overflow-wrap: break-word;
    }
}


/* =========================================================
   LAUNCH FOOTER V2 — ACTUALLY COMPACT
   2026-08-14
   This block is authoritative and MUST remain last.
   ========================================================= */

.site-footer {
    overflow: hidden !important;
}

.footer-main {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-areas:
        "brand message"
        "nav nav" !important;
    gap: 1.35rem 2rem !important;
    align-items: start !important;
    padding: 2rem 0 1rem !important;
}

.footer-brand {
    grid-area: brand !important;
    width: 104px !important;
    max-width: 104px !important;
    min-width: 0 !important;
}

.footer-brand img,
.footer-brand .footer-monogram {
    width: 104px !important;
    height: auto !important;
}

.footer-message {
    grid-area: message !important;
    min-width: 0 !important;
}

.footer-message .section-label {
    margin-bottom: 0.3rem !important;
}

.footer-tagline {
    margin: 0 0 0.7rem !important;
    font-size: clamp(1.35rem, 1.9vw, 2rem) !important;
}

.footer-contact-panel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    max-width: 860px !important;
}

.footer-contact-item {
    min-height: 0 !important;
    padding: 0.62rem 0.72rem !important;
    gap: 0.14rem !important;
    border-radius: 10px !important;
}

.footer-contact-label {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
}

.footer-contact-item strong,
.footer-contact-item--email strong {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
}

.footer-partner-badges {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin-top: 0.65rem !important;
}

.footer-partner-badges img {
    width: auto !important;
    height: 30px !important;
}

.footer-nav-groups--launch {
    grid-area: nav !important;
    display: grid !important;
    gap: 0.7rem !important;
    min-width: 0 !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid var(--border) !important;
}

.footer-nav.footer-nav--launch {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.42rem 1.15rem !important;
    padding: 0 !important;
    font-size: 0.73rem !important;
    line-height: 1.2 !important;
}

.footer-nav--launch a {
    display: inline-flex !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0.15rem 0 !important;
    white-space: nowrap;
}

.footer-nav--launch .footer-nav-all {
    color: var(--green) !important;
    opacity: 1 !important;
}

.footer-legal-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem 0.85rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid var(--border) !important;
    font-size: 0.67rem !important;
    line-height: 1.2 !important;
}

.footer-bottom {
    min-height: 0 !important;
    padding: 0.7rem 0 0.8rem !important;
    gap: 0.35rem 1rem !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
}

@media (max-width: 760px) {
    .footer-main {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 1rem 1.15rem !important;
        padding: 1.55rem 0 0.9rem !important;
    }

    .footer-brand,
    .footer-brand img,
    .footer-brand .footer-monogram {
        width: 74px !important;
        max-width: 74px !important;
    }

    .footer-contact-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .footer-contact-item--email {
        grid-column: 1 / -1 !important;
    }

    .footer-partner-badges img {
        height: 27px !important;
    }
}

@media (max-width: 520px) {
    .footer-main {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "message"
            "nav" !important;
        gap: 0.85rem !important;
        padding: 1.35rem 0 0.8rem !important;
    }

    .footer-brand,
    .footer-brand img,
    .footer-brand .footer-monogram {
        width: 68px !important;
        max-width: 68px !important;
    }

    .footer-tagline {
        font-size: 1.35rem !important;
        margin-bottom: 0.55rem !important;
    }

    .footer-contact-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .footer-contact-item {
        padding: 0.52rem 0.58rem !important;
    }

    .footer-contact-item strong,
    .footer-contact-item--email strong {
        font-size: 0.82rem !important;
    }

    .footer-nav.footer-nav--launch {
        gap: 0.38rem 0.85rem !important;
        font-size: 0.68rem !important;
    }

    .footer-nav--launch a {
        white-space: normal;
    }

    .footer-legal-nav {
        font-size: 0.64rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.62rem 0 0.72rem !important;
    }
}


/* =========================================================
   SITE-WIDE TECH TYPOGRAPHY CLEANUP — V4
   No typewriter/slab-serif tech face anywhere in the platform.
   LT Stopwatch remains only for intentional digital HUD readouts.
   ========================================================= */

:root {
    --font-tech: var(--akcs-tech-sans);
    --akcs-tech-font: var(--akcs-tech-sans);
}

/* Legacy technical labels that may still inherit a browser monospace. */
code,
kbd,
samp,
pre {
    font-family: var(--akcs-tech-sans);
}

/* Keep source/code blocks readable without reintroducing a serifed monospace. */
pre,
code {
    font-variant-ligatures: none;
}

/* Compact partner panel no longer reserves visual space for duplicate badges. */
.home-page .sage-partner-panel--compact .sage-partner-panel-copy {
    align-self: center;
}

.home-page .sage-partner-panel--compact .sage-partner-panel-copy > p {
    margin-bottom: 0;
    max-width: 820px;
}



/* =========================================================
   HOME SAGE SUPPORT BRIDGE — V4
   Bigger service choices, aligned beside the section label.
   ========================================================= */

.home-page .home-service-bridge {
    display: grid;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
    gap: clamp(2.2rem, 5vw, 6rem);
    align-items: start;

    padding: clamp(3.6rem, 5.5vw, 5.6rem) 0;
}

.home-page .home-service-bridge > .section-label {
    margin: 0;
    padding-top: 0.95rem;

    font-size: clamp(0.9rem, 1vw, 1.05rem);
    font-weight: 560;
    letter-spacing: 0.14em;
    line-height: 1.3;
}

.home-page .home-service-bridge__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.home-page .home-service-bridge__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 74px;
    padding: 1.1rem 1.25rem;

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

    font-family: var(--akcs-tech-sans) !important;
    font-size: clamp(0.96rem, 1.08vw, 1.12rem);
    font-weight: 590 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.18;
    text-transform: uppercase;

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

.home-page .home-service-bridge__links a::after {
    content: "↗";
    margin-left: 0.8rem;
    color: var(--muted);
    font-size: 0.86em;
    font-weight: 400;
    transition: color 180ms ease, transform 180ms ease;
}

.home-page .home-service-bridge__links a:hover,
.home-page .home-service-bridge__links a:focus-visible {
    border-color: var(--green);
    color: var(--green);
    background: rgba(82, 176, 82, 0.06);
    transform: translateY(-2px);
}

.home-page .home-service-bridge__links a:hover::after,
.home-page .home-service-bridge__links a:focus-visible::after {
    color: var(--green);
    transform: translate(2px, -2px);
}

@media (max-width: 1100px) {
    .home-page .home-service-bridge {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-page .home-service-bridge > .section-label {
        padding-top: 0;
    }

    .home-page .home-service-bridge__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .home-page .home-service-bridge {
        padding: 2.8rem 0;
    }

    .home-page .home-service-bridge__links {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .home-page .home-service-bridge__links a {
        min-height: 62px;
        padding: 0.95rem 1rem;
    }
}



/* =========================================================
   GLOBAL V5 — ENDLESS "TRON" SCROLL FIX
   Footer electricity canvas is intentionally disabled.
   The document must end at the actual footer.
   ========================================================= */

.akcs-electric-canvas-footer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/*
   Absolutely positioned decorative body children must never
   be allowed to create document scrollable overflow.
*/
html,
body {
    overflow-x: clip;
}

body {
    overflow-y: visible;
}


/* =========================================================
   FOOTER LIVE MESSAGE — V6
   Restores the rotating Pacific-time greeting and AKCS phrases
   without restoring the removed footer electricity canvas.
   ========================================================= */

.akcs-launch-footer__live {
    display: flex;
    align-items: center;
    gap: 0.65rem;

    min-height: 34px;
    padding: 0.55rem 0;

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

    font-family: var(--akcs-tech-ultralean, Arial, sans-serif);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    line-height: 1.25;
    text-transform: uppercase;

    color: var(--muted);
}

.akcs-launch-footer__live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border-radius: 50%;
    background: var(--green);

    box-shadow:
        0 0 7px rgba(105, 255, 140, 0.65),
        0 0 16px rgba(105, 255, 140, 0.24);

    animation: akcsFooterLivePulse 4.8s ease-in-out infinite;
}

.akcs-launch-footer__live .footer-live-line {
    margin: 0;
    min-width: 0;
}

@keyframes akcsFooterLivePulse {
    0%, 100% {
        opacity: 0.46;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .akcs-launch-footer__live-dot {
        animation: none;
    }
}

@media (max-width: 650px) {
    .akcs-launch-footer__live {
        font-size: 0.61rem;
        letter-spacing: 0.085em;
    }
}


/* =========================================================
   HUD SMALL-PHONE GEOMETRY FIX — V7
   Target: ~320–390px widths, including 370px.
   Desktop/tablet HUD remains unchanged.
   ========================================================= */

@media (max-width: 390px) {

    .home-page .hero-system--diagnostic,
    .home-page .system-hud {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-page .system-hud {
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: hidden;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        gap: 8px !important;
    }

    .home-page .system-wireframe {
        width: 42px !important;
        height: 40px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .home-page .wireframe-cube {
        right: 0 !important;
        top: 0 !important;
        transform: scale(0.38) !important;
        transform-origin: top right !important;
    }

    /* Status triptych: force genuinely equal tracks and allow text to shrink. */
    .home-page .system-hud__stats,
    .home-page .system-hud-stats,
    .home-page .system-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-width: 0 !important;
    }

    .home-page .system-hud__stats > *,
    .home-page .system-hud-stats > *,
    .home-page .system-stats > * {
        min-width: 0 !important;
    }

    /* Main module/action grid: one column at narrow phone widths. */
    .home-page .system-hud__modules,
    .home-page .system-hud-modules,
    .home-page .system-module-grid,
    .home-page .system-links {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .home-page .system-hud a,
    .home-page .system-hud button,
    .home-page .system-module-grid a,
    .home-page .system-links a {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-page .system-hud .system-module,
    .home-page .system-hud .system-link,
    .home-page .system-hud .hud-module {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Prevent long status labels from forcing width. */
    .home-page .system-hud,
    .home-page .system-hud * {
        overflow-wrap: anywhere;
    }

    .home-page .system-hud .system-status-label,
    .home-page .system-hud .system-stat-label,
    .home-page .system-hud .system-stat-value,
    .home-page .system-hud .system-status-value {
        white-space: normal !important;
        min-width: 0 !important;
    }

    /* Bottom diagnostic/status rows should stack if they are still split columns. */
    .home-page .system-hud__footer,
    .home-page .system-hud-footer,
    .home-page .system-diagnostic-footer {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

}

@media (max-width: 350px) {

    .home-page .system-hud {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 36px !important;
    }

    .home-page .system-wireframe {
        width: 36px !important;
        height: 34px !important;
    }

    .home-page .wireframe-cube {
        transform: scale(0.32) !important;
    }

}


/* =========================================================
   DISPLAY THEME TOGGLE — V8
   Keep the full DISPLAY / DARK|LIGHT treatment at ALL widths.
   No icon-only or collapsed mobile variant.
   ========================================================= */

.theme-toggle,
#theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;

    width: auto !important;
    min-width: 108px !important;
    max-width: none !important;
    min-height: 42px !important;

    padding: 0.62rem 0.82rem !important;

    white-space: nowrap !important;
    overflow: visible !important;
}

.theme-toggle-label,
.theme-toggle-value {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    max-width: none !important;

    clip: auto !important;
    clip-path: none !important;

    position: static !important;

    font-family: var(--akcs-tech-sans) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.theme-toggle-label {
    font-size: 0.64rem !important;
    font-weight: 520 !important;
    letter-spacing: 0.12em !important;
}

.theme-toggle-value {
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.09em !important;
}

/* Never allow small-screen rules to hide either word. */
@media (max-width: 900px) {
    .theme-toggle,
    #theme-toggle {
        min-width: 104px !important;
        min-height: 40px !important;
        padding: 0.58rem 0.74rem !important;
        gap: 0.38rem !important;
    }

    .theme-toggle-label {
        display: inline !important;
        font-size: 0.61rem !important;
    }

    .theme-toggle-value {
        display: inline !important;
        font-size: 0.69rem !important;
    }
}

@media (max-width: 390px) {
    .theme-toggle,
    #theme-toggle {
        min-width: 100px !important;
        min-height: 38px !important;
        padding: 0.54rem 0.68rem !important;
        gap: 0.34rem !important;
    }

    .theme-toggle-label {
        font-size: 0.59rem !important;
        letter-spacing: 0.105em !important;
    }

    .theme-toggle-value {
        font-size: 0.67rem !important;
        letter-spacing: 0.08em !important;
    }
}


/* =========================================================
   DISPLAY TOGGLE — AUTHORITATIVE MOBILE FIX V10
   Preserve full "DISPLAY / DARK|LIGHT" wording at every width.
   This block MUST remain last.
   ========================================================= */

html body #theme-toggle.theme-toggle,
html body #theme-toggle,
html body .theme-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.42rem !important;

    width: auto !important;
    min-width: 108px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 40px !important;

    padding: 0.58rem 0.78rem !important;

    overflow: visible !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    text-indent: 0 !important;
}

html body #theme-toggle .theme-toggle-label,
html body #theme-toggle .theme-toggle-value,
html body .theme-toggle .theme-toggle-label,
html body .theme-toggle .theme-toggle-value {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;
    inset: auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;

    white-space: nowrap !important;
    text-indent: 0 !important;
    transform: none !important;

    font-family: var(--akcs-tech-sans) !important;
    line-height: 1 !important;
}

html body #theme-toggle .theme-toggle-label,
html body .theme-toggle .theme-toggle-label {
    font-size: 0.61rem !important;
    font-weight: 520 !important;
    letter-spacing: 0.115em !important;
}

html body #theme-toggle .theme-toggle-value,
html body .theme-toggle .theme-toggle-value {
    font-size: 0.70rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.085em !important;
}

/* Kill any mobile icon-only/collapsed treatment. */
@media (max-width: 900px) {
    html body #theme-toggle.theme-toggle,
    html body #theme-toggle,
    html body .theme-toggle {
        display: inline-flex !important;
        width: auto !important;
        min-width: 104px !important;
        max-width: none !important;
        padding: 0.55rem 0.72rem !important;
        overflow: visible !important;
    }

    html body #theme-toggle .theme-toggle-label,
    html body #theme-toggle .theme-toggle-value,
    html body .theme-toggle .theme-toggle-label,
    html body .theme-toggle .theme-toggle-value {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        font-size: revert !important;
    }

    html body #theme-toggle .theme-toggle-label,
    html body .theme-toggle .theme-toggle-label {
        font-size: 0.59rem !important;
    }

    html body #theme-toggle .theme-toggle-value,
    html body .theme-toggle .theme-toggle-value {
        font-size: 0.68rem !important;
    }
}

@media (max-width: 390px) {
    html body #theme-toggle.theme-toggle,
    html body #theme-toggle,
    html body .theme-toggle {
        min-width: 100px !important;
        min-height: 38px !important;
        padding: 0.52rem 0.64rem !important;
        gap: 0.32rem !important;
    }

    html body #theme-toggle .theme-toggle-label,
    html body .theme-toggle .theme-toggle-label {
        font-size: 0.57rem !important;
        letter-spacing: 0.10em !important;
    }

    html body #theme-toggle .theme-toggle-value,
    html body .theme-toggle .theme-toggle-value {
        font-size: 0.66rem !important;
        letter-spacing: 0.075em !important;
    }
}


/* =========================================================
   HUD MID-MOBILE CUBE FIX — V11
   Target: 391–460px, including the 422px failure point.
   The 320–390px V7 rules remain in control below this band.
   ========================================================= */

@media (min-width: 391px) and (max-width: 460px) {

    .home-page .hero-system--diagnostic,
    .home-page .system-hud {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 46px !important;
        gap: 9px !important;
        align-items: start !important;
    }

    .home-page .system-wireframe {
        width: 46px !important;
        height: 42px !important;
        min-width: 0 !important;

        transform: none !important;
        overflow: visible !important;
    }

    .home-page .wireframe-cube {
        right: 0 !important;
        top: 0 !important;

        transform: scale(0.42) !important;
        transform-origin: top right !important;

        overflow: visible !important;
    }

}

/* Slightly more room once we leave the fragile 422px band. */
@media (min-width: 461px) and (max-width: 520px) {

    .home-page .system-hud-top {
        grid-template-columns: minmax(0, 1fr) 50px !important;
        gap: 10px !important;
    }

    .home-page .system-wireframe {
        width: 50px !important;
        height: 45px !important;
    }

    .home-page .wireframe-cube {
        right: 0 !important;
        transform: scale(0.455) !important;
        transform-origin: top right !important;
    }

}


/* =========================================================
   HUD CUBE V12 — SINGLE VECTOR / INDESTRUCTIBLE GEOMETRY
   Replaces the accumulated face/edge transform stack.
   One drawing, one coordinate system, responsive at every width.
   KEEP THIS BLOCK LAST.
   ========================================================= */

.home-page .system-hud {
    --akcs-cube-slot: 72px;
}

.home-page .system-hud-top {
    grid-template-columns: minmax(0, 1fr) var(--akcs-cube-slot) !important;
    gap: clamp(8px, 1vw, 12px) !important;
    align-items: start !important;
}

.home-page .system-wireframe {
    position: relative !important;

    width: var(--akcs-cube-slot) !important;
    height: calc(var(--akcs-cube-slot) * 0.86) !important;
    min-width: 0 !important;

    transform: none !important;
    transform-origin: center !important;

    overflow: visible !important;
    opacity: 0.42 !important;
}

/*
   Hide the old multi-piece cube completely.
   Its HTML can stay in place, but it no longer participates visually.
*/
.home-page .wireframe-cube {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    transform: none !important;
    transform-origin: center !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 80' fill='none'%3E%3Crect x='8.5' y='20.5' width='47' height='47' stroke='%239fc2ad' stroke-opacity='.46'/%3E%3Crect x='28.5' y='4.5' width='47' height='47' stroke='%237ea0b1' stroke-opacity='.38'/%3E%3Cpath d='M8.5 20.5L28.5 4.5M55.5 20.5L75.5 4.5M8.5 67.5L28.5 51.5M55.5 67.5L75.5 51.5' stroke='%23a2bcaf' stroke-opacity='.42'/%3E%3Ccircle cx='79' cy='11' r='1.5' fill='%239fc2ad' fill-opacity='.42'/%3E%3Ccircle cx='4' cy='72' r='1.2' fill='%237ea0b1' fill-opacity='.34'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    overflow: visible !important;
}

.home-page .wireframe-cube > .cube-face,
.home-page .wireframe-cube > .cube-edge {
    display: none !important;
}

/* Old decorative nodes are now represented inside the vector too. */
.home-page .system-wireframe > .wireframe-node {
    display: none !important;
}


/* Responsive slot sizing only. Geometry never changes. */
@media (max-width: 1100px) {
    .home-page .system-hud {
        --akcs-cube-slot: 62px;
    }
}

@media (max-width: 650px) {
    .home-page .system-hud {
        --akcs-cube-slot: 50px;
    }
}

@media (max-width: 460px) {
    .home-page .system-hud {
        --akcs-cube-slot: 44px;
    }
}

@media (max-width: 390px) {
    .home-page .system-hud {
        --akcs-cube-slot: 40px;
    }
}

@media (max-width: 350px) {
    .home-page .system-hud {
        --akcs-cube-slot: 36px;
    }
}


/* =========================================================
   RESPONSIVE HEADER — V13 FINAL AUTHORITY
   Fixes:
   • DISPLAY / DARK|LIGHT text always visible
   • no clipped top-row controls
   • no competing mobile header geometry
   KEEP THIS BLOCK LAST.
   ========================================================= */

/* Correct selectors for the ACTUAL toggle markup. */
html body #theme-toggle .theme-toggle-copy {
    position: static !important;
    inset: auto !important;

    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;

    gap: 0.04rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    transform: none !important;
}

html body #theme-toggle .theme-toggle-kicker,
html body #theme-toggle .theme-toggle-value {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;

    white-space: nowrap !important;
    text-indent: 0 !important;

    font-family: var(--akcs-tech-sans) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html body #theme-toggle .theme-toggle-kicker {
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    opacity: 0.62 !important;
}

html body #theme-toggle .theme-toggle-value {
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.095em !important;
}

/* Stable action group — never translate outside the header. */
html body .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;

    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    overflow: visible !important;
}

html body #theme-toggle {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;

    min-height: 44px !important;
    height: auto !important;

    padding: 0.5rem 0.72rem 0.5rem 0.56rem !important;
    gap: 0.55rem !important;

    justify-content: flex-start !important;

    overflow: visible !important;
    transform: none !important;
}

html body #theme-toggle .theme-toggle-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
}

html body .header-cta {
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   TABLET / NARROW DESKTOP: logo + controls, nav below.
   --------------------------------------------------------- */
@media (max-width: 860px) {

    html body .site-header {
        width: calc(100% - 1.25rem) !important;
        max-width: var(--max-width) !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "nav nav" !important;

        column-gap: 0.75rem !important;
        row-gap: 0.45rem !important;

        padding: 0.8rem 0 0.7rem !important;

        overflow: visible !important;
    }

    html body .header-brand-group {
        grid-area: brand !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .site-logo {
        width: min(220px, 38vw) !important;
        max-width: 220px !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    html body .site-logo img,
    html body .site-logo-image {
        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
    }

    html body .header-actions {
        grid-area: actions !important;
        justify-self: end !important;
        gap: 0.45rem !important;
    }

    html body #theme-toggle {
        min-width: 108px !important;
        min-height: 42px !important;
        padding: 0.46rem 0.66rem 0.46rem 0.52rem !important;
        gap: 0.48rem !important;
    }

    html body .header-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 42px !important;
        padding: 0.68rem 0.82rem !important;

        font-size: 0.68rem !important;
        letter-spacing: 0.065em !important;
    }

    html body .main-nav {
        grid-area: nav !important;
        justify-self: stretch !important;

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

        width: 100% !important;
        min-width: 0 !important;

        gap: 0 !important;
        border-top: 1px solid var(--border) !important;
    }

    html body .main-nav a {
        min-width: 0 !important;
        min-height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0.64rem 0.35rem !important;

        font-size: 0.75rem !important;
        letter-spacing: 0.065em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}


/* ---------------------------------------------------------
   PHONE: preserve both controls without clipping.
   --------------------------------------------------------- */
@media (max-width: 650px) {

    html body .site-header {
        width: calc(100% - 1rem) !important;
        column-gap: 0.45rem !important;
    }

    html body .site-logo {
        width: min(150px, 36vw) !important;
        max-width: 150px !important;
    }

    html body .site-logo img,
    html body .site-logo-image {
        max-width: 150px !important;
    }

    html body .header-actions {
        gap: 0.32rem !important;
    }

    html body #theme-toggle {
        min-width: 104px !important;
        min-height: 38px !important;
        padding: 0.4rem 0.56rem 0.4rem 0.46rem !important;
        gap: 0.42rem !important;
    }

    html body #theme-toggle .theme-toggle-icon {
        width: 25px !important;
        height: 25px !important;
        flex-basis: 25px !important;
    }

    html body #theme-toggle .theme-toggle-kicker {
        font-size: 0.50rem !important;
        letter-spacing: 0.12em !important;
    }

    html body #theme-toggle .theme-toggle-value {
        font-size: 0.66rem !important;
    }

    html body .header-cta {
        min-height: 38px !important;
        padding: 0.56rem 0.62rem !important;

        font-size: 0.62rem !important;
        letter-spacing: 0.05em !important;
    }

    html body .main-nav a {
        font-size: clamp(0.62rem, 2.5vw, 0.72rem) !important;
        letter-spacing: 0.045em !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }
}


/* ---------------------------------------------------------
   SMALL PHONE: give top controls their own full-width row.
   Nothing gets cut, and the wording survives.
   --------------------------------------------------------- */
@media (max-width: 460px) {

    html body .site-header {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "brand"
            "actions"
            "nav" !important;

        row-gap: 0.42rem !important;
    }

    html body .header-brand-group {
        justify-self: start !important;
    }

    html body .site-logo {
        width: min(150px, 52vw) !important;
        max-width: 150px !important;
    }

    html body .header-actions {
        width: 100% !important;
        justify-self: stretch !important;
        justify-content: space-between !important;
    }

    html body #theme-toggle {
        min-width: 108px !important;
    }

    html body .header-cta {
        min-width: 94px !important;
    }
}


/* =========================================================
   FLOATING BACK-TO-TOP CONTROL — V14
   A persistent, compact site control that follows the viewport.
   ========================================================= */

.akcs-back-to-top {
    position: fixed;
    right: clamp(14px, 1.8vw, 26px);
    bottom: clamp(14px, 2vw, 26px);
    z-index: 2400;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;

    min-width: 76px;
    min-height: 40px;
    padding: 0.58rem 0.72rem;

    border: 1px solid rgba(103, 209, 112, 0.48);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(9, 18, 14, 0.92),
            rgba(5, 10, 8, 0.94)
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);

    color: var(--green);
    cursor: pointer;

    font-family: var(--akcs-tech-sans);
    font-size: 0.65rem;
    font-weight: 560;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.akcs-back-to-top.is-visible {
    opacity: 0.88;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.akcs-back-to-top:hover,
.akcs-back-to-top:focus-visible {
    opacity: 1;
    color: var(--text);
    border-color: var(--green);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.26),
        0 0 16px rgba(92, 215, 102, 0.12);
}

.akcs-back-to-top:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.akcs-back-to-top__arrow {
    position: relative;
    top: -1px;

    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1;
}

@media (max-width: 650px) {
    .akcs-back-to-top {
        right: 10px;
        bottom: 12px;

        min-width: 68px;
        min-height: 38px;

        padding: 0.52rem 0.62rem;

        font-size: 0.59rem;
        letter-spacing: 0.10em;

        background: rgba(6, 12, 9, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .akcs-back-to-top {
        transition:
            opacity 120ms linear,
            visibility 120ms linear;
    }
}


/* =========================================================
   BACK TO TOP — V15 FINAL RELIABLE CONTROL
   Inline JS in footer; independent of main.js/config loading.
   ========================================================= */

html body #akcs-back-to-top.akcs-back-to-top {
    position: fixed !important;
    right: clamp(12px, 1.6vw, 24px) !important;
    bottom: clamp(12px, 1.8vw, 24px) !important;
    left: auto !important;
    top: auto !important;
    z-index: 9998 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;

    width: auto !important;
    min-width: 74px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0.56rem 0.7rem !important;

    border: 1px solid rgba(103, 209, 112, 0.62) !important;
    border-radius: 999px !important;

    background: rgba(5, 12, 8, 0.94) !important;
    color: var(--green) !important;

    font-family: var(--akcs-tech-sans) !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 0 14px rgba(92, 215, 102, 0.10) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(8px) !important;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        border-color 180ms ease !important;
}

html body #akcs-back-to-top.akcs-back-to-top.is-visible {
    opacity: 0.96 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

html body #akcs-back-to-top.akcs-back-to-top:hover,
html body #akcs-back-to-top.akcs-back-to-top:focus-visible {
    opacity: 1 !important;
    border-color: var(--green) !important;
    color: var(--text) !important;
}

@media (max-width: 650px) {
    html body #akcs-back-to-top.akcs-back-to-top {
        right: 9px !important;
        bottom: 10px !important;
        min-width: 68px !important;
        min-height: 38px !important;
        padding: 0.5rem 0.6rem !important;
        font-size: 0.59rem !important;
    }
}