/* ============================================================
   SERVICE TECH VAULT
   ABOUT + CONTACT EXPERIENCE
   ============================================================ */

body.stv-story-page,
body.stv-contact-page{
    background:
        radial-gradient(
            circle at 50% 4%,
            rgba(255,93,16,.21),
            transparent 29%
        ),
        radial-gradient(
            circle at 10% 48%,
            rgba(157,37,8,.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 91% 70%,
            rgba(255,99,18,.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #070504,
            #120a06 33%,
            #070605 100%
        ) !important;
}


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

.stv-story-hero{
    width:min(
        calc(100% - 28px),
        1050px
    );

    margin:
        58px auto
        42px;

    text-align:center;
}

.stv-story-hero .runes{
    color:#c64a16;

    font-family:Georgia,serif;

    font-size:17px;

    letter-spacing:.53em;
}

.stv-story-hero .kicker{
    display:inline-block;

    margin-top:15px;

    padding:
        7px 13px;

    border:
        1px solid rgba(255,113,27,.26);

    border-radius:999px;

    background:
        rgba(255,90,12,.055);

    color:#e8aa72;

    font-size:10px;
    font-weight:900;

    letter-spacing:.23em;

    text-transform:uppercase;
}

.stv-story-hero h1{
    max-width:930px;

    margin:
        18px auto
        12px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(43px,7vw,82px) !important;

    line-height:.95;

    letter-spacing:-.04em;

    background:
        linear-gradient(
            180deg,
            #fff9ef,
            #ffd09a 39%,
            #ff741e 72%,
            #aa2909
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
}

.stv-story-hero p{
    max-width:735px;

    margin:
        17px auto
        0 !important;

    color:#c0ac97 !important;

    font-size:
        clamp(15px,2vw,19px);

    line-height:1.72;
}

.stv-story-hero .statement{
    margin-top:19px;

    color:#ff9638;

    font-family:Georgia,serif;

    font-size:
        clamp(17px,2.5vw,24px);

    font-weight:700;
}


/* ============================================================
   ABOUT — LONGSHIP HORIZON
   ============================================================ */

#stv-about-horizon{
    position:relative;

    width:min(
        calc(100% - 28px),
        940px
    );

    height:165px;

    margin:
        -8px auto
        46px;

    overflow:hidden;

    border:
        1px solid rgba(255,108,24,.22);

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #1b0906,
            #6d1e0b 49%,
            #0c0b09 50%,
            #030505 100%
        );

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.64),
        0 18px 55px rgba(0,0,0,.24);
}

#stv-about-horizon::before{
    content:"";

    position:absolute;

    top:24px;
    left:50%;

    width:76px;
    height:76px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #ffd080,
            #ff741b 47%,
            #b42c08 72%
        );

    box-shadow:
        0 0 55px rgba(255,82,7,.38);
}

#stv-about-horizon .ship{
    position:absolute;

    left:50%;
    bottom:31px;

    transform:
        translateX(-50%);

    color:#040302;

    font-size:72px;

    filter:
        drop-shadow(
            0 0 8px rgba(255,90,12,.20)
        );
}

#stv-about-horizon .waves{
    position:absolute;

    left:0;
    right:0;
    bottom:13px;

    color:#91401f;

    font-size:18px;

    letter-spacing:.55em;

    white-space:nowrap;

    opacity:.54;

    text-align:center;
}


/* ============================================================
   ABOUT JOURNEY
   ============================================================ */

#stv-about-journey{
    width:min(
        calc(100% - 28px),
        1080px
    );

    margin:
        0 auto
        65px;

    display:grid;

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

    gap:13px;
}

.stv-journey-card{
    position:relative;

    padding:
        25px 19px;

    border:
        1px solid rgba(255,107,23,.24);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(28,17,10,.97),
            rgba(8,7,6,.98)
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.23);

    text-align:center;
}

.stv-journey-card:not(:last-child)::after{
    content:"›";

    position:absolute;

    right:-12px;
    top:50%;

    transform:translateY(-50%);

    z-index:2;

    color:#e95b18;

    font-size:30px;
    font-weight:900;
}

.stv-journey-card .icon{
    font-size:28px;
}

.stv-journey-card .step{
    display:block;

    margin-top:10px;

    color:#ff8d31;

    font-size:9px;
    font-weight:900;

    letter-spacing:.13em;

    text-transform:uppercase;
}

.stv-journey-card strong{
    display:block;

    margin-top:7px;

    color:#fff0dc;

    font-family:Georgia,serif;

    font-size:19px;
}

.stv-journey-card p{
    margin:
        8px 0
        0 !important;

    color:#917d69 !important;

    font-size:11px !important;

    line-height:1.55 !important;
}


/* ============================================================
   TRANSFORM EXISTING ABOUT SECTIONS
   ============================================================ */

body.stv-story-page
.stv-about-section{
    width:min(
        calc(100% - 28px),
        900px
    );

    margin:
        0 auto
        17px;

    padding:
        25px 27px;

    border:
        1px solid rgba(255,108,24,.20);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(25,16,10,.94),
            rgba(8,7,6,.97)
        );

    box-shadow:
        0 12px 40px rgba(0,0,0,.18);
}

body.stv-story-page
.stv-about-section h2{
    margin-top:0 !important;
}

body.stv-story-page
.stv-about-section h2::before{
    color:#db5519;
}


/* ============================================================
   ABOUT FINAL MESSAGE
   ============================================================ */

#stv-about-future{
    width:min(
        calc(100% - 28px),
        860px
    );

    margin:
        48px auto
        75px;

    padding:
        30px;

    text-align:center;

    border:
        1px solid rgba(255,111,25,.25);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(38,19,9,.76),
            rgba(8,7,6,.98)
        );
}

#stv-about-future .rune{
    color:#ff7921;

    font-family:Georgia,serif;

    font-size:27px;
}

#stv-about-future strong{
    display:block;

    margin-top:7px;

    color:#fff0dd;

    font-family:Georgia,serif;

    font-size:
        clamp(22px,3vw,31px);
}

#stv-about-future p{
    max-width:650px;

    margin:
        11px auto
        0 !important;
}


/* ============================================================
   CONTACT — SIGNAL BEACON
   ============================================================ */

#stv-signal-beacon{
    position:relative;

    width:110px;
    height:110px;

    margin:
        27px auto
        7px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid rgba(255,120,29,.38);

    background:
        radial-gradient(
            circle,
            rgba(255,99,17,.18),
            rgba(13,8,5,.88) 56%,
            rgba(5,4,3,.98)
        );

    box-shadow:
        0 0 28px rgba(255,72,6,.10);
}

#stv-signal-beacon::before,
#stv-signal-beacon::after{
    content:"";

    position:absolute;

    border:
        1px solid rgba(255,110,23,.28);

    border-radius:50%;
}

#stv-signal-beacon::before{
    inset:15px;
}

#stv-signal-beacon::after{
    inset:29px;
}

#stv-signal-beacon .rune{
    color:#ff8027;

    font-family:Georgia,serif;

    font-size:30px;

    text-shadow:
        0 0 14px rgba(255,73,7,.45);
}


/* ============================================================
   CONTACT TYPES
   ============================================================ */

#stv-contact-types{
    width:min(
        calc(100% - 28px),
        1040px
    );

    margin:
        27px auto
        39px;

    display:grid;

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

    gap:9px;
}

.stv-contact-type{
    appearance:none;

    min-height:92px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:
        11px 7px;

    cursor:pointer;

    border:
        1px solid rgba(255,107,23,.23) !important;

    border-radius:17px !important;

    background:
        linear-gradient(
            145deg,
            rgba(28,17,10,.96),
            rgba(8,7,6,.98)
        ) !important;

    color:#dac5ae !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.19) !important;
}

.stv-contact-type:hover,
.stv-contact-type.active{
    border-color:
        rgba(255,139,46,.70) !important;

    background:
        linear-gradient(
            145deg,
            rgba(80,29,10,.72),
            rgba(17,9,6,.99)
        ) !important;
}

.stv-contact-type .icon{
    font-size:24px;
}

.stv-contact-type .label{
    color:#fff0dd;

    font-size:10px;

    font-weight:900;

    text-align:center;
}


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

#stv-signal-form-shell{
    width:min(
        calc(100% - 28px),
        870px
    );

    margin:
        0 auto
        43px;

    padding:5px;

    border-radius:25px;

    background:
        linear-gradient(
            135deg,
            rgba(255,114,27,.58),
            rgba(111,27,7,.14) 47%,
            rgba(255,138,42,.50)
        );

    box-shadow:
        0 24px 78px rgba(0,0,0,.31);
}

#stv-signal-form{
    padding:
        28px;

    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            rgba(24,15,10,.99),
            rgba(7,6,5,.99)
        );
}

#stv-signal-form h2{
    margin:
        0 0
        7px !important;

    padding:0 !important;

    font-family:Georgia,serif !important;
}

#stv-signal-form h2::before{
    display:none !important;
}

#stv-signal-form .form-note{
    margin:
        0 0
        20px !important;

    color:#8f7b67 !important;

    font-size:11px !important;
}

.stv-form-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:13px;
}

.stv-form-field.full{
    grid-column:
        1 / -1;
}

#stv-signal-form label{
    display:block;

    margin-bottom:6px;

    color:#b79e84;

    font-size:10px;

    font-weight:900;

    letter-spacing:.07em;

    text-transform:uppercase;
}

#stv-signal-form input,
#stv-signal-form textarea,
#stv-signal-form select{
    width:100%;

    min-height:48px;

    padding:
        10px 13px !important;

    color:#fff1de !important;

    background:
        rgba(4,4,3,.82) !important;

    border:
        1px solid rgba(255,110,24,.25) !important;

    border-radius:11px !important;

    font-size:13px !important;
}

#stv-signal-form textarea{
    min-height:125px;

    resize:vertical;
}

#stv-signal-send{
    width:100%;

    min-height:51px;

    margin-top:15px;

    cursor:pointer;

    border-radius:12px !important;

    border:
        1px solid rgba(255,194,111,.65) !important;

    color:#1b0802 !important;

    background:
        linear-gradient(
            180deg,
            #ffa447,
            #ff6819 56%,
            #dc400b
        ) !important;

    font-size:13px !important;

    font-weight:950 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 9px 25px rgba(255,64,5,.18) !important;
}


/* ============================================================
   CONTACT EXISTING SECTIONS
   ============================================================ */

body.stv-contact-page
.stv-contact-existing-section{
    width:min(
        calc(100% - 28px),
        870px
    );

    margin:
        0 auto
        14px;

    padding:
        22px 25px;

    border:
        1px solid rgba(255,108,23,.18);

    border-radius:18px;

    background:
        rgba(14,10,7,.74);
}

body.stv-contact-page
.stv-contact-existing-section h2{
    margin-top:0 !important;
}


/* ============================================================
   SECURITY WARNING
   ============================================================ */

#stv-contact-security{
    width:min(
        calc(100% - 28px),
        870px
    );

    margin:
        28px auto
        72px;

    padding:
        20px 23px;

    display:flex;

    gap:16px;

    align-items:flex-start;

    border:
        1px solid rgba(255,110,24,.22);

    border-radius:17px;

    background:
        rgba(75,24,8,.12);
}

#stv-contact-security .shield{
    color:#ff7620;

    font-family:Georgia,serif;

    font-size:26px;
}

#stv-contact-security strong{
    display:block;

    color:#ffc178;

    font-size:13px;
}

#stv-contact-security p{
    margin:
        5px 0
        0 !important;

    color:#8d7965 !important;

    font-size:11px !important;

    line-height:1.6 !important;
}


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

@media(max-width:850px){

    #stv-about-journey{
        grid-template-columns:
            repeat(2,1fr);
    }

    .stv-journey-card::after{
        display:none;
    }

    #stv-contact-types{
        grid-template-columns:
            repeat(2,1fr);
    }

    .stv-contact-type:last-child{
        grid-column:
            1 / -1;
    }

}

@media(max-width:600px){

    #stv-about-journey{
        grid-template-columns:1fr;
    }

    .stv-form-grid{
        grid-template-columns:1fr;
    }

    .stv-form-field.full{
        grid-column:auto;
    }

    #stv-signal-form{
        padding:
            23px 15px;
    }

    #stv-about-horizon{
        height:140px;
    }

}

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

    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
    }

}