:root {
    --color-bg: #191b27;
    --color-surface: #202332;
    --color-surface-light: #262a3a;

    --color-primary: #2596be;
    --color-primary-bright: #37b7e5;

    --color-text: #f4f7f8;
    --color-text-muted: #9ba8b3;

    --color-border:
        rgba(37, 150, 190, 0.28);

    --color-border-strong:
        rgba(37, 150, 190, 0.68);

    --color-grid:
        rgba(37, 150, 190, 0.055);

    --container-width: 1440px;
}


/* ==========================================================
   Global
   ========================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    color: var(--color-text);

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

    background-image:
        linear-gradient(
            var(--color-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--color-grid) 1px,
            transparent 1px
        );

    background-size:
        40px 40px;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}


a {
    color: inherit;
}


a:focus-visible {
    outline:
        2px solid
        var(--color-primary-bright);

    outline-offset: 4px;
}


/* ==========================================================
   Header
   ========================================================== */

.site-header {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    min-height: 110px;

    margin-inline: auto;

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

    gap: 2rem;

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


.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 0.8rem;

    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.site-brand__mark {
    width: 12px;
    height: 12px;

    background:
        var(--color-primary);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 18px
        rgba(37, 150, 190, 0.45);
}


.page-nav {
    display: flex;
    align-items: center;

    gap:
        clamp(
            1rem,
            3vw,
            2.5rem
        );
}


.page-nav a {
    position: relative;

    padding:
        0.5rem 0;

    text-decoration: none;

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

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.page-nav a:hover,
.page-nav a[aria-current="page"] {
    color:
        var(--color-primary-bright);
}


.page-nav a[aria-current="page"]::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background:
        var(--color-primary);
}


/* ==========================================================
   Shared typography
   ========================================================== */

.eyebrow {
    margin:
        0 0 1.2rem;

    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.16em;
}


.section-header {
    max-width: 760px;

    margin-bottom:
        clamp(
            3rem,
            7vw,
            6rem
        );
}


.section-header h2 {
    margin:
        0 0 1.25rem;

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

    line-height: 0.95;

    letter-spacing:
        -0.045em;
}


.section-header > p:last-child {
    margin: 0;

    max-width: 650px;

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

    line-height: 1.75;
}


/* ==========================================================
   Services hero
   ========================================================== */

.services-hero {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    min-height: 70vh;

    margin-inline: auto;

    padding:
        clamp(
            5rem,
            10vw,
            10rem
        )
        0;

    display: grid;

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

    align-items: center;

    gap:
        clamp(
            3rem,
            9vw,
            10rem
        );
}


.services-hero__content {
    max-width: 880px;
}


.services-hero h1 {
    margin: 0;

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

    line-height: 0.9;

    letter-spacing:
        -0.055em;

    font-weight: 650;
}


.services-hero h1 span {
    display: block;

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


.services-hero__description {
    max-width: 700px;

    margin:
        2.5rem 0 0;

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

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

    line-height: 1.75;
}


.services-hero__note {
    max-width: 700px;

    margin:
        1.5rem 0 0;

    padding-left: 1rem;

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

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

    font-size: 0.85rem;

    line-height: 1.7;
}


.services-hero__panel {
    position: relative;

    padding:
        2rem;

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

    background:
        linear-gradient(
            135deg,
            rgba(37, 150, 190, 0.08),
            rgba(25, 27, 39, 0.88)
        );

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


.panel-code {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;

    letter-spacing: 0.15em;
}


.panel-line {
    height: 1px;

    margin:
        1.5rem 0;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            transparent
        );
}


.services-hero__panel p {
    margin: 0;

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

    line-height: 1.7;
}


/* ==========================================================
   Hero actions
   ========================================================== */

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 2.5rem;
}


/* ==========================================================
   Buttons
   ========================================================== */

.contact-button,
.secondary-button {
    display: inline-flex;

    min-height: 52px;

    padding:
        0 1.6rem;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    font-size: 0.72rem;

    white-space: nowrap;

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

    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}


.contact-button {
    border:
        1px solid
        var(--color-primary);

    background:
        var(--color-primary);

    color: #101820;
}


.contact-button:hover {
    background:
        var(--color-primary-bright);

    border-color:
        var(--color-primary-bright);
}


.secondary-button {
    border:
        1px solid
        var(--color-border-strong);

    background:
        rgba(25, 27, 39, 0.75);

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


.secondary-button:hover {
    border-color:
        var(--color-primary);

    background:
        rgba(37, 150, 190, 0.1);

    color:
        var(--color-primary-bright);
}


/* ==========================================================
   Services
   ========================================================== */

.services {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    margin-inline: auto;

    padding:
        8rem 0;

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


.service-list {
    display: grid;

    gap: 1px;

    background:
        var(--color-border);
}


.service {
    display: grid;

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

    gap:
        clamp(
            2rem,
            7vw,
            7rem
        );

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

    background:
        rgba(25, 27, 39, 0.97);

    transition:
        background 180ms ease;
}


.service:hover {
    background:
        rgba(32, 35, 50, 0.98);
}


.service__header {
    display: flex;

    gap: 1.5rem;
}


.service__number {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;
}


.service__category {
    margin:
        0 0 0.7rem;

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

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.13em;
}


.service h3 {
    margin: 0;

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

    line-height: 1.05;
}


.service__body {
    display: grid;

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

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );
}


.service__body p {
    margin: 0;

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

    line-height: 1.75;
}


.service__body ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.service__body li {
    position: relative;

    padding:
        0.7rem 0
        0.7rem 1rem;

    border-bottom:
        1px solid
        rgba(37, 150, 190, 0.14);

    font-size: 0.82rem;
}


.service__body li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    background:
        var(--color-primary);

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==========================================================
   Process
   ========================================================== */

.process {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    margin-inline: auto;

    padding:
        8rem 0;

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


.process-grid {
    display: grid;

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

    gap: 1rem;
}


.process-grid article {
    min-height: 280px;

    padding:
        2rem;

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

    background:
        rgba(32, 35, 50, 0.45);

    transition:
        border-color 160ms ease,
        background 160ms ease;
}


.process-grid article:hover {
    border-color:
        var(--color-border-strong);

    background:
        rgba(32, 35, 50, 0.7);
}


.process-grid span {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;

    letter-spacing: 0.12em;
}


.process-grid h3 {
    margin:
        3rem 0 1rem;

    font-size: 1.35rem;
}


.process-grid p {
    margin: 0;

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

    line-height: 1.7;
}


/* ==========================================================
   Quotation
   ========================================================== */

.quotation {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    margin-inline: auto;

    padding:
        clamp(
            5rem,
            9vw,
            8rem
        )
        clamp(
            2rem,
            5vw,
            5rem
        );

    display: flex;

    flex-wrap: wrap;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap: 4rem;

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

    background:
        linear-gradient(
            120deg,
            rgba(37, 150, 190, 0.1),
            rgba(25, 27, 39, 0.96) 55%
        );

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


.quotation__content {
    max-width: 760px;
}


.quotation h2 {
    margin:
        0 0 1.5rem;

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

    line-height: 0.95;

    letter-spacing:
        -0.045em;
}


.quotation__content > p {
    color:
        var(--color-text-muted);

    line-height: 1.75;
}


.quotation__notice {
    margin-top: 1.5rem;

    padding-left: 1rem;

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

    font-size: 0.82rem;
}


.quotation-button {
    flex-shrink: 0;
}


.quotation-form {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 2rem;
    scroll-margin-top: 2rem;
    border: 1px solid var(--color-border);
    background: rgba(25, 27, 39, 0.72);
    overflow: hidden;
}


.quotation-form iframe {
    display: block;
    width: 100%;
    min-height: min(720px, 90vh);
    border: 0;
}


/* ==========================================================
   Direct contact
   ========================================================== */

.contact {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    margin-inline: auto;

    padding:
        8rem 0;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 4rem;

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


.contact__intro {
    max-width: 720px;
}


.contact h2 {
    margin:
        0 0 1.5rem;

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

    line-height: 0.95;

    letter-spacing:
        -0.045em;
}


.contact__intro > p:last-child {
    max-width: 620px;

    margin: 0;

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

    line-height: 1.75;
}


.contact-details {
    width:
        min(
            100%,
            430px
        );

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


.contact-detail {
    display: grid;

    grid-template-columns:
        100px 1fr;

    align-items: center;

    gap: 1.5rem;

    min-height: 70px;

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


.contact-detail__label {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.62rem;

    letter-spacing: 0.14em;
}


.contact-detail a {
    color:
        var(--color-text);

    text-decoration: none;

    overflow-wrap: anywhere;
}


.contact-detail a:hover {
    color:
        var(--color-primary-bright);
}


.contact-detail p {
    margin: 0;

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


/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    min-height: 100px;

    margin-inline: auto;

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

    gap: 2rem;

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

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

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.12em;
}

.service__access {
    grid-column:
        1 / -1;

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

    gap: 1.5rem;

    margin-top: 1rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(37, 150, 190, 0.18);
}


.service__access span {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.service__access p {
    margin: 0;

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

    font-size: 0.78rem;

    letter-spacing: 0.04em;
}


@media (max-width: 700px) {

    .service__access {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }

}

/* ==========================================================
   Company feature grid
   ========================================================== */

.company-feature-grid {
    display: grid;

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

    gap: 1rem;
}


.company-feature {
    min-height: 320px;

    padding:
        clamp(
            2rem,
            4vw,
            3rem
        );

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

    background:
        linear-gradient(
            145deg,
            rgba(37, 150, 190, 0.07),
            rgba(25, 27, 39, 0.94)
        );
}


.company-feature__code {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.14em;
}


.company-feature h3 {
    margin:
        3.5rem 0 1.25rem;

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

    line-height: 1.05;
}


.company-feature p {
    margin: 0;

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

    line-height: 1.75;
}


/* ==========================================================
   Mission / Vision
   ========================================================== */

.company-statement-grid {
    display: grid;

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

    gap: 1rem;
}


.company-statement {
    min-height: 380px;

    padding:
        clamp(
            2rem,
            5vw,
            4rem
        );

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

    background:
        rgba(32, 35, 50, 0.5);
}


.company-statement__label {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;

    letter-spacing: 0.16em;
}


.company-statement h3 {
    max-width: 600px;

    margin:
        4rem 0 1.5rem;

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

    line-height: 0.98;

    letter-spacing:
        -0.035em;
}


.company-statement p {
    max-width: 650px;

    margin: 0;

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

    line-height: 1.75;
}


/* ==========================================================
   Company principles
   ========================================================== */

.company-principles {
    display: grid;

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

    gap: 1px;

    background:
        var(--color-border);
}


.company-principles article {
    min-height: 300px;

    padding:
        2rem;

    background:
        rgba(25, 27, 39, 0.98);
}


.company-principles span {
    color:
        var(--color-primary);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;
}


.company-principles h3 {
    margin:
        4rem 0 1rem;

    font-size: 1.5rem;
}


.company-principles p {
    margin: 0;

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

    line-height: 1.7;
}


/* ==========================================================
   Future direction
   ========================================================== */

.company-future {
    width:
        min(
            calc(100% - 5rem),
            var(--container-width)
        );

    margin-inline: auto;

    padding:
        8rem 0;

    display: grid;

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

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

    align-items: center;

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


.company-future__content {
    max-width: 760px;
}


.company-future h2 {
    margin:
        0 0 2rem;

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

    line-height: 0.92;

    letter-spacing:
        -0.05em;
}


.company-future__content > p {
    color:
        var(--color-text-muted);

    line-height: 1.8;
}


.company-future__stack {
    display: grid;

    gap: 1px;

    background:
        var(--color-border);
}


.company-future__stack span {
    padding:
        1.25rem 1.5rem;

    background:
        rgba(25, 27, 39, 0.98);

    color:
        var(--color-text);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;

    letter-spacing: 0.14em;

    transition:
        padding-left 160ms ease,
        color 160ms ease,
        background 160ms ease;
}


.company-future__stack span:hover {
    padding-left: 2rem;

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

    background:
        var(--color-surface);
}


/* ==========================================================
   Social buttons
   ========================================================== */

.social-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    flex-shrink: 0;
}


.social-button {
    min-width: 150px;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 900px) {

    .services-hero {
        grid-template-columns: 1fr;
    }


    .services-hero__panel {
        max-width: 600px;
    }


    .service {
        grid-template-columns: 1fr;
    }


    .process-grid {
        grid-template-columns: 1fr;
    }


    .quotation {
        display: grid;

        align-items: start;
    }


    .contact {
        display: grid;
    }


    .contact-details {
        max-width: 600px;
    }

    .company-feature-grid {
        grid-template-columns: 1fr;
    }


    .company-statement-grid {
        grid-template-columns: 1fr;
    }


    .company-principles {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .company-future {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .site-header,
    .services-hero,
    .services,
    .process,
    .quotation,
    .company-future
    .contact,
    .site-footer {
        width:
            min(
                calc(100% - 2rem),
                var(--container-width)
            );
    }


    .site-header {
        align-items: flex-start;

        flex-direction: column;

        padding:
            1.5rem 0;
    }


    .page-nav {
        width: 100%;

        overflow-x: auto;

        padding-bottom: 0.4rem;
    }


    .services-hero {
        min-height: auto;

        padding:
            5rem 0;
    }


    .services-hero h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                5rem
            );
    }


    .service__body {
        grid-template-columns: 1fr;
    }


    .services,
    .process,
    .contact {
        padding:
            5rem 0;
    }


    .quotation {
        padding:
            4rem 1.5rem;
    }


    .contact-detail {
        grid-template-columns: 1fr;

        gap: 0.4rem;

        padding:
            1rem 0;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-button,
    .secondary-button {
        width: 100%;
    }


    .site-footer {
        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        padding:
            1.5rem 0;
    }

    .company-principles {
        grid-template-columns: 1fr;
    }


    .company-future {
        padding:
            5rem 0;
    }


    .social-actions {
        width: 100%;
    }


    .social-button {
        width: 100%;
    }

}


/* ==========================================================
   Accessibility
   ========================================================== */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;
    }

}