/* =========================================================
   FRANVAGU 1.0
   HEADER + HERO
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --bg: #0b0d10;

    --bg-soft: #111419;

    --text: #f5f7fa;

    --text-soft: #a9b0ba;

    --text-muted: #727a86;

    --border:
        rgba(255, 255, 255, 0.10);

    --container: 1180px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

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

    margin-inline:
        auto;

}


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

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        backdrop-filter 0.3s ease;

}


.site-header.scrolled {

    background:
        rgba(11, 13, 16, 0.85);

    backdrop-filter:
        blur(18px);

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

}


.navbar {

    height: 84px;

}


.navbar-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-symbol {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

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

    border-radius: 9px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        -0.10em;

}


.brand-name {

    font-size: 20px;

    font-weight: 700;

    letter-spacing:
        -0.04em;

}


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

.navbar-menu {

    display: flex;

    align-items: center;

    gap: 30px;

}


.navbar-menu > a:not(.nav-cta) {

    position: relative;

    color:
        var(--text-soft);

    font-size: 13px;

    transition:
        color 0.25s ease;

}


.navbar-menu > a:not(.nav-cta):hover {

    color:
        var(--text);

}


.nav-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 16px;

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

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}


.nav-cta:hover {

    background: white;

    color:
        var(--bg);

}


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

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    background: transparent;

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

    border-radius: 9px;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 18px;

    height: 1px;

    margin: 4px auto;

    background:
        var(--text);

}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

}


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

.hero-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: 0.35;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 72%
        );

}


/* =========================================================
   GLOW
========================================================= */

.hero-glow {

    position: absolute;

    width: 650px;

    height: 650px;

    right: -200px;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: -2;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.08),
            transparent 68%
        );

}


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

.hero-container {

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

    margin-inline:
        auto;

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 50px;

    padding-top:
        84px;

}


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

.hero-content {

    max-width: 700px;

}


.hero-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color:
        var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.18em;

}


.hero-label-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 14px
        rgba(255,255,255,0.8);

}


/* =========================================================
   H1
========================================================= */

.hero h1 {

    font-size:
        clamp(
            52px,
            6vw,
            86px
        );

    line-height:
        0.97;

    letter-spacing:
        -0.065em;

    font-weight: 700;

}


.hero h1 span {

    display: block;

    color:
        var(--text-soft);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {

    max-width: 600px;

    margin-top: 30px;

    color:
        var(--text-soft);

    font-size: 17px;

    line-height: 1.75;

}


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

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 36px;

}


.hero-button {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding:
        0 21px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.hero-button:hover {

    transform:
        translateY(-2px);

}


.hero-button-primary {

    background:
        white;

    color:
        var(--bg);

}


.hero-button-secondary {

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

    color:
        var(--text);

}


.hero-button-secondary:hover {

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

}


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

.hero-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;

    color:
        var(--text-muted);

    font-size: 10px;

    letter-spacing:
        0.06em;

}


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

.hero-visual {

    position: relative;

    height: 570px;

    display: grid;

    place-items: center;

}


/* =========================================================
   RINGS
========================================================= */

.hero-ring {

    position: absolute;

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

    border-radius: 50%;

}


.hero-ring-1 {

    width: 510px;

    height: 510px;

}


.hero-ring-2 {

    width: 390px;

    height: 390px;

    transform:
        rotate(45deg);

}


.hero-ring-3 {

    width: 260px;

    height: 260px;

    transform:
        rotate(-30deg);

}


/* =========================================================
   FVA
========================================================= */

.fva-mark {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

}


.fva-mark span {

    font-size:
        clamp(
            100px,
            12vw,
            175px
        );

    line-height:
        0.8;

    font-weight: 800;

    letter-spacing:
        -0.17em;

}


.fva-f {

    transform:
        translateY(5px);

}


.fva-v {

    transform:
        translateY(25px)
        translateX(-4px);

}


.fva-a {

    transform:
        translateY(-18px)
        translateX(-7px);

}


/* =========================================================
   NODES
========================================================= */

.hero-node {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 18px
        rgba(255,255,255,0.7);

}


.hero-node-1 {

    top: 18%;

    right: 24%;

}


.hero-node-2 {

    bottom: 21%;

    left: 18%;

}


.hero-node-3 {

    top: 53%;

    right: 8%;

}


/* =========================================================
   CAPTION
========================================================= */

.hero-visual-caption {

    position: absolute;

    right: 2%;

    bottom: 12%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;

    color:
        var(--text-muted);

    font-size: 9px;

    letter-spacing:
        0.18em;

}


.hero-visual-caption span:first-child {

    color:
        var(--text);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   SCROLL
========================================================= */

.hero-scroll {

    position: absolute;

    bottom: 28px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--text-muted);

    font-size: 8px;

    letter-spacing:
        0.2em;

}


.hero-scroll-line {

    width: 50px;

    height: 1px;

    background:
        var(--text-muted);

}


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

@media (max-width: 900px) {

    .menu-toggle {

        display: block;

    }


    .navbar-menu {

        position: absolute;

        top: 84px;

        left: 16px;

        right: 16px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        padding: 25px;

        background:
            rgba(17,20,25,0.98);

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

        border-radius: 14px;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            all 0.3s ease;

    }


    .navbar-menu.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .hero-container {

        grid-template-columns: 1fr;

        padding-top: 120px;

        padding-bottom: 80px;

    }


    .hero-content {

        text-align: center;

        margin-inline: auto;

    }


    .hero-label {

        justify-content: center;

    }


    .hero-description {

        margin-inline: auto;

    }


    .hero-actions {

        justify-content: center;

    }


    .hero-trust {

        justify-content: center;

    }


    .hero-visual {

        height: 360px;

        order: -1;

    }


    .hero-ring-1 {

        width: 350px;

        height: 350px;

    }


    .hero-ring-2 {

        width: 270px;

        height: 270px;

    }


    .hero-ring-3 {

        width: 190px;

        height: 190px;

    }

}


@media (max-width: 600px) {

    .container {

        width:
            calc(100% - 32px);

    }


    .navbar {

        height: 72px;

    }


    .navbar-menu {

        top: 72px;

    }


    .hero-container {

        padding-top: 100px;

    }


    .hero h1 {

        font-size: 46px;

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-button {

        width: 100%;

    }


    .hero-visual {

        height: 280px;

    }


    .hero-ring-1 {

        width: 270px;

        height: 270px;

    }


    .hero-ring-2 {

        width: 210px;

        height: 210px;

    }


    .hero-ring-3 {

        width: 150px;

        height: 150px;

    }


    .fva-mark span {

        font-size: 90px;

    }


    .hero-scroll {

        display: none;

    }

}

/* =========================================================
   SERVICIOS
========================================================= */

.services-section {

    padding:
        130px 0;

    background:
        var(--bg-soft);

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

}


/* =========================================================
   ENCABEZADO
========================================================= */

.section-heading {

    display: grid;

    grid-template-columns:
        1fr 0.5fr;

    gap: 80px;

    margin-bottom: 65px;

}


.section-eyebrow {

    margin-bottom: 20px;

    color:
        var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.18em;

}


.section-heading h2 {

    max-width: 700px;

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

    line-height:
        0.98;

    letter-spacing:
        -0.06em;

}


.section-intro {

    align-self:
        end;

    max-width: 350px;

    color:
        var(--text-soft);

    font-size: 15px;

    line-height: 1.7;

}


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

.services-grid {

    display: grid;

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

    gap: 1px;

    background:
        var(--border);

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

}


/* =========================================================
   CARD
========================================================= */

.service-card {

    position: relative;

    min-height: 340px;

    padding: 40px;

    background:
        var(--bg-soft);

    transition:
        background 0.3s ease;

}


.service-card:hover {

    background:
        #15191f;

}


.service-number {

    color:
        var(--text-muted);

    font-size: 11px;

    letter-spacing:
        0.1em;

}


.service-content {

    margin-top: 70px;

}


.service-content h3 {

    max-width: 400px;

    font-size: 28px;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

}


.service-content p {

    max-width: 470px;

    margin-top: 17px;

    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 1.7;

}


.service-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    font-size: 12px;

    font-weight: 600;

}


.service-link span {

    transition:
        transform 0.25s ease;

}


.service-link:hover span {

    transform:
        translateX(4px);

}


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

@media (max-width: 900px) {

    .section-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .section-intro {

        align-self:
            auto;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .services-section {

        padding:
            90px 0;

    }


    .section-heading h2 {

        font-size: 40px;

    }


    .service-card {

        min-height: 300px;

        padding: 30px;

    }


    .service-content {

        margin-top: 55px;

    }


    .service-content h3 {

        font-size: 25px;

    }

}

/* =========================================================
   PROYECTOS
========================================================= */

.projects-section {

    padding:
        140px 0;

    background:
        var(--bg);

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

}


/* =========================================================
   PROJECT HEADING
========================================================= */

.projects-heading {

    margin-bottom:
        90px;

}


/* =========================================================
   PROJECT LIST
========================================================= */

.projects-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        90px;

}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {

    display:
        grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap:
        70px;

    align-items:
        center;

}


.project-card-reverse {

    grid-template-columns:
        0.85fr 1.15fr;

}


.project-card-reverse .project-image {

    order:
        2;

}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.project-image {

    position:
        relative;

    min-height:
        400px;

    overflow:
        hidden;

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

    background:
        var(--bg-soft);

}


.project-image::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.project-placeholder {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

}


.project-placeholder span {

    font-size:
        clamp(55px, 8vw, 110px);

    font-weight:
        800;

    letter-spacing:
        -0.09em;

    opacity:
        0.12;

}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {

    max-width:
        500px;

}


.project-meta {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        25px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.project-info h3 {

    font-size:
        clamp(32px, 4vw, 50px);

    line-height:
        1;

    letter-spacing:
        -0.055em;

}


.project-info p {

    margin-top:
        22px;

    color:
        var(--text-soft);

    font-size:
        15px;

    line-height:
        1.75;

}


/* =========================================================
   TAGS
========================================================= */

.project-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;

}


.project-tags span {

    padding:
        7px 10px;

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

    border-radius:
        6px;

    color:
        var(--text-muted);

    font-size:
        9px;

    letter-spacing:
        0.05em;

}


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

.projects-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        110px;

    padding-top:
        40px;

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

}


.projects-cta p {

    max-width:
        500px;

    color:
        var(--text-soft);

    font-size:
        15px;

}


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

@media (max-width: 900px) {

    .projects-section {

        padding:
            110px 0;

    }


    .project-card,
    .project-card-reverse {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .project-card-reverse .project-image {

        order:
            initial;

    }


    .project-image {

        min-height:
            330px;

    }


    .projects-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (max-width: 600px) {

    .projects-section {

        padding:
            90px 0;

    }


    .projects-list {

        gap:
            65px;

    }


    .project-image {

        min-height:
            260px;

    }


    .project-info h3 {

        font-size:
            34px;

    }

}

/* =========================================================
   NOSOTROS
========================================================= */

.about-section {

    padding:
        150px 0;

    background:
        var(--bg-soft);

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

}


/* =========================================================
   HEADING
========================================================= */

.about-heading {

    margin-bottom:
        90px;

}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        100px;

    align-items:
        start;

}


/* =========================================================
   STATEMENT
========================================================= */

.about-statement {

    position:
        sticky;

    top:
        130px;

    min-height:
        420px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        45px;

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

    background:
        var(--bg);

}


.about-symbol {

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    color:
        var(--text-muted);

}


.about-statement p {

    max-width:
        330px;

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

    line-height:
        1;

    letter-spacing:
        -0.06em;

}


.about-statement strong {

    color:
        var(--text);

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {

    max-width:
        620px;

}


.about-content > p {

    margin-bottom:
        25px;

    color:
        var(--text-soft);

    font-size:
        16px;

    line-height:
        1.8;

}


.about-content .about-lead {

    color:
        var(--text);

    font-size:
        23px;

    line-height:
        1.45;

    letter-spacing:
        -0.025em;

}


/* =========================================================
   VALUES
========================================================= */

.about-values {

    margin-top:
        55px;

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

}


.about-value {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        25px;

    padding:
        25px 0;

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

}


.about-value > span {

    color:
        var(--text-muted);

    font-size:
        10px;

    letter-spacing:
        0.1em;

}


.about-value h3 {

    font-size:
        18px;

    letter-spacing:
        -0.025em;

}


.about-value p {

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.6;

}


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

@media (max-width: 900px) {

    .about-section {

        padding:
            110px 0;

    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .about-statement {

        position:
            relative;

        top:
            auto;

        min-height:
            330px;

    }

}


@media (max-width: 600px) {

    .about-section {

        padding:
            90px 0;

    }


    .about-heading {

        margin-bottom:
            60px;

    }


    .about-statement {

        min-height:
            280px;

        padding:
            30px;

    }


    .about-statement p {

        font-size:
            40px;

    }


    .about-content .about-lead {

        font-size:
            20px;

    }

}

/* =========================================================
   CONTACTO
========================================================= */

.contact-section {

    padding:
        150px 0;

    background:
        var(--bg);

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

}


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

.contact-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        100px;

    align-items:
        start;

}


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

.contact-intro {

    max-width:
        520px;

}


.contact-intro h2 {

    margin-top:
        20px;

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.065em;

}


.contact-intro h2 span {

    display:
        block;

    color:
        var(--text-soft);

}


.contact-description {

    max-width:
        480px;

    margin-top:
        30px;

    color:
        var(--text-soft);

    font-size:
        16px;

    line-height:
        1.75;

}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {

    margin-top:
        55px;

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

}


.contact-detail {

    padding:
        20px 0;

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

}


.contact-detail > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.contact-detail a,
.contact-detail p {

    color:
        var(--text);

    font-size:
        14px;

}


.contact-detail a:hover {

    text-decoration:
        underline;

    text-underline-offset:
        4px;

}


/* =========================================================
   FORM
========================================================= */

.contact-form-wrapper {

    padding:
        45px;

    background:
        var(--bg-soft);

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

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        25px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.form-group label {

    color:
        var(--text-soft);

    font-size:
        11px;

    font-weight:
        600;

}


.form-group input,
.form-group textarea {

    width:
        100%;

    padding:
        15px 16px;

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

    border-radius:
        7px;

    outline:
        none;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;

}


.form-group textarea {

    resize:
        vertical;

    min-height:
        150px;

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        var(--text-muted);

}


.form-group input:focus,
.form-group textarea:focus {

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

    background:
        #0e1115;

}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    border:
        none;

    border-radius:
        8px;

    background:
        white;

    color:
        var(--bg);

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.contact-submit:hover {

    transform:
        translateY(-2px);

    background:
        #e5e7ea;

}


.contact-submit:disabled {

    opacity:
        0.6;

    cursor:
        wait;

    transform:
        none;

}


/* =========================================================
   FORM NOTE
========================================================= */

.form-note {

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height:
        1.6;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.form-message {

    display:
        none;

    padding:
        12px 14px;

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

    border-radius:
        6px;

    color:
        var(--text-soft);

    font-size:
        12px;

}


.form-message.visible {

    display:
        block;

}


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

@media (max-width: 900px) {

    .contact-section {

        padding:
            110px 0;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .contact-intro {

        max-width:
            700px;

    }


    .contact-form-wrapper {

        padding:
            35px;

    }

}


@media (max-width: 600px) {

    .contact-section {

        padding:
            90px 0;

    }


    .contact-intro h2 {

        font-size:
            48px;

    }


    .contact-form-wrapper {

        padding:
            25px;

    }

}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding:
        75px 0 30px;

    background:
        #080a0d;

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

}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {

    display:
        grid;

    grid-template-columns:
        1.5fr 0.7fr 0.8fr;

    gap:
        60px;

    padding-bottom:
        70px;

}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

    max-width:
        360px;

}


.footer-brand p {

    max-width:
        300px;

    margin-top:
        20px;

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   FOOTER NAV
========================================================= */

.footer-nav {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.footer-nav a {

    width:
        fit-content;

    color:
        var(--text-soft);

    font-size:
        12px;

    transition:
        color 0.25s ease;

}


.footer-nav a:hover {

    color:
        var(--text);

}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.footer-contact {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-contact > span {

    color:
        var(--text-muted);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.footer-contact a {

    width:
        fit-content;

    color:
        var(--text-soft);

    font-size:
        13px;

}


.footer-contact a:hover {

    color:
        var(--text);

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    padding-top:
        25px;

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

    color:
        var(--text-muted);

    font-size:
        9px;

    letter-spacing:
        0.04em;

}


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

@media (max-width: 700px) {

    .site-footer {

        padding-top:
            60px;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap:
            40px;

        padding-bottom:
            50px;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;

    }

}