/* =====================================================
   FYRE SEARCH STORIES
   TERMS & CONDITIONS
====================================================== */

:root {

    --fs-purple-dark: #526b82;
    --fs-purple-mid: #687f94;
    --fs-purple-bright: #8194a5;

    --fs-magenta: #b00061;
    --fs-magenta-dark: #92004f;

    --fs-text-dark: #111111;
    --fs-text: #30343a;
    --fs-text-gray: #70777e;

    --fs-border: #ddd9d3;

    --fs-bg-page: #f7f4ee;
    --fs-bg-card: #ffffff;

}


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

* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

    /*font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;*/

    background: var(--fs-bg-page);

}


body {

    min-height: 100vh;

}


/* =====================================================
   PAGE
====================================================== */

.fs-terms-page {

    width: 100%;

    max-width: 760px;
    
    margin: auto;

    min-height: 100vh;

    background: var(--fs-bg-card);

    display: flex;

    flex-direction: column;

    position: relative;
    
    margin-top: 100px;
    
    margin-bottom: 50px;

    box-shadow:
        0 0 0 1px rgba(20, 10, 50, .04);

}


@media (min-width: 760px) {

    .fs-terms-page {

        min-height:
            calc(100vh - 80px);

        border-radius: 24px;

        overflow: hidden;

        box-shadow:

            0 30px 60px -20px
            rgba(40, 30, 30, .18),

            0 8px 24px -8px
            rgba(40, 30, 30, .10);

    }

}


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

.fs-terms-header {

    background: linear-gradient(
        135deg,
        #82004a 0%,
        #a00058 40%,
        #b00061 75%,
        #c0006a 100%
    );

    padding:
        32px 38px 40px;

    flex-shrink: 0;

}


.fs-terms-header-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

}


.fs-terms-back {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        rgba(255,255,255,.10);

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.fs-terms-back:hover {

    background:
        rgba(255,255,255,.18);

    transform:
        translateX(-2px);

}


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

.fs-terms-header-brand {

    margin-bottom: 25px;

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

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: rgba(255,255,255,.78);

}


.fs-terms-header-greeting {

    margin: 0 0 10px;

    font-family:
        "Caveat",
        cursive;

    font-size: 56px;

    font-weight: 500;

    line-height: .9;

    color: #ffffff;

}


.fs-terms-header-title {

    margin: 0;

    color: #ffffff;

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

    font-size: 29px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.8px;

}


.fs-terms-header-sub {

    max-width: 530px;

    margin: 15px 0 0;

    color:
        rgba(255,255,255,.88);

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;

}


.fs-terms-header-sub strong {

    color: #ffffff;

    font-weight: 700;

}


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

.fs-terms-content {

    flex: 1;

    padding:
        40px 38px 40px;

}


/* =====================================================
   PAGE TITLE
====================================================== */

.fs-terms-title {

    margin: 0 0 12px;

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

    font-size: 35px;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -1px;

    color: var(--fs-text-dark);

}


.fs-terms-updated {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--fs-magenta);

    font-size: 13px;

    font-weight: 600;

    margin: 0 0 30px;

}


.fs-terms-updated svg {

    flex-shrink: 0;

}


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

.fs-terms-intro {

    padding-bottom: 28px;

    margin-bottom: 28px;

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

}


.fs-terms-intro p {

    font-size: 15.5px;

    line-height: 1.75;

    color: var(--fs-text);

    margin: 0 0 17px;

}


.fs-terms-intro p:last-child {

    margin-bottom: 0;

}


.fs-terms-intro strong {

    color: var(--fs-text-dark);

    font-weight: 700;

}


/* =====================================================
   SECTIONS
====================================================== */

.fs-terms-section {

    margin-bottom: 34px;

    padding-bottom: 30px;
    
    padding-top: 0;
    
    padding-left: 0;
    
    padding-right: 0;

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

}


.fs-terms-section:last-child {

    border-bottom: 0;

}


.fs-terms-section h2 {

    margin: 0 0 10px;

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

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;

    color: var(--fs-text-dark);

}


.fs-terms-section p {

    font-size: 15px;

    line-height: 1.75;

    color: var(--fs-text);

    margin: 0 0 16px;

}


.fs-terms-section p:last-child {

    margin-bottom: 0;

}


.fs-terms-section strong {

    color: var(--fs-text-dark);

    font-weight: 700;

}


/* =====================================================
   LINKS
====================================================== */

.fs-terms-section a {

    color: var(--fs-magenta);

    text-decoration: underline;

    font-weight: 600;

}


.fs-terms-section a:hover {

    color:
        var(--fs-magenta-dark);

}


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

.fs-terms-list {

    margin: 8px 0 0;

    padding: 0;

    list-style: none;

}


.fs-terms-list li {

    position: relative;

    padding:
        5px 0 5px 24px;

    font-size: 15px;

    line-height: 1.65;

    color: var(--fs-text);

}


.fs-terms-list li::before {

    content: "➜";

    position: absolute;

    left: 0;

    top: 5px;

    color:
        var(--fs-magenta);

    font-size: 13px;

}


/* =====================================================
   POLICY HIGHLIGHT
====================================================== */

.fs-terms-policy {

    display: inline;

    color:
        var(--fs-magenta);

    font-weight: 700;

}


/* =====================================================
   OUR PRINCIPLE
====================================================== */

.fs-terms-principle {

    margin-top: 20px;

    padding:
        40px 32px;

    background:
        #f1ede6;

    border-radius: 8px;
    
    border: 1px solid #8f0050;

}


.fs-terms-principle-label {

    display: block;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color:
        var(--fs-magenta);

}


.fs-terms-principle-title {

    margin: 0 0 20px;

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

    font-size: 31px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -1px;

    color:
        var(--fs-purple-dark);

}


.fs-terms-principle-text {

    margin: 0 0 15px;

    font-size: 15px;

    line-height: 1.75;

    color:
        var(--fs-text-gray);

}


.fs-terms-principle-brand {

    margin-top: 28px;

    padding-top: 22px;

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

}


.fs-terms-principle-brand-name {

    display: block;

    margin-bottom: 4px;

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

    font-size: 17px;

    font-weight: 800;

    color:
        var(--fs-text-dark);

}


.fs-terms-principle-brand-tagline {

    font-family:
        "Caveat",
        cursive;

    font-size: 27px;

    line-height: 1;

    color:
        var(--fs-magenta);

}

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

@media (max-width: 640px) {

    body {

        display: block;

    }


    .fs-terms-page {
        
        width: calc(100% - 30px);
        
        border-radius: 10px;

        max-width: none;

        min-height: 100vh;

    }


    .fs-terms-header {

        padding:
            25px 24px 32px;
            
        border-top-left-radius: 10px;
            
        border-top-right-radius: 10px;

    }


    .fs-terms-header-nav {

        margin-bottom: 25px;

    }


    .fs-terms-header-greeting {

        font-size: 52px;

    }


    .fs-terms-header-title {

        font-size: 25px;

    }


    .fs-terms-header-sub {

        font-size: 14px;

    }


    .fs-terms-content {

        padding:
            32px 24px 32px;

    }


    .fs-terms-title {

        font-size: 31px;

    }


    .fs-terms-intro p {

        font-size: 15px;

    }


    .fs-terms-section {

        margin-bottom: 28px;

        padding-bottom: 27px;

    }


    .fs-terms-section h2 {

        font-size: 17px;

    }


    .fs-terms-section p {

        font-size: 14.5px;

        line-height: 1.72;

    }


    .fs-terms-list li {

        font-size: 14.5px;

    }


    .fs-terms-principle {

        padding:
            34px 25px;

    }


    .fs-terms-principle-title {

        font-size: 28px;

    }

}


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

@media (max-width: 400px) {

    .fs-terms-header {

        padding-left: 20px;

        padding-right: 20px;

    }


    .fs-terms-content {

        padding-left: 20px;

        padding-right: 20px;

    }


    .fs-terms-title {

        font-size: 28px;

    }


    .fs-terms-header-title {

        font-size: 23px;

    }


    .fs-terms-header-greeting {

        font-size: 48px;

    }

}

@media (min-width: 768px) {
    section {
        padding-bottom: 30px;
        padding: 0;
    }
}


/* =========================================================
   FYRE SEARCH STORIES — ABOUT SECTION
========================================================= */

.fs-about-section {

    width: 100%;

    background: #fff;

    padding: 160px 0 110px;

    position: relative;

    overflow: hidden;

}


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

.fs-about-container {

    margin: 0 8%;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;
    
    border: 1px solid #e8e5e9;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .02);

}


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

.fs-about-hero {

    height: 80vh;

    position: relative;

    overflow: hidden;

}


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

.fs-about-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.fs-about-hero-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   OPTIONAL IMAGE OVERLAY
========================================================= */

.fs-about-hero-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.05) 100%
        );

    pointer-events: none;

}


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

.fs-about-focus-card {

    position: absolute;

    z-index: 3;

    top: 200px;

    right: 140px;

    width: 380px;

    padding: 64px 68px;

    box-sizing: border-box;

    background: #ffffff;

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

}


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

.fs-about-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #25262b;

}


.fs-about-label-line {

    width: 19px;

    height: 2px;

    background: #a00058;

    display: block;

}


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

.fs-about-focus-card h2 {

    margin: 0;

    font-size: 20px;

    line-height: 1.32;

    font-weight: 600;

    color: #20212b;

}


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

.fs-about-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 26px;

    min-width: 137px;

    height: 43px;

    padding: 0 24px;

    box-sizing: border-box;

    background: #a00058;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .2px;

    transition:
        background .25s ease,
        transform .25s ease;

}


.fs-about-button:hover {

    background: #820048;
    
    color: #fff;

    transform: translateY(-2px);

}


/* =========================================================
   CONTENT AREA
========================================================= */

.fs-about-content {

    background: #ffffff;

    padding: 76px 140px 85px;

}


/* =========================================================
   MISSION BOX
========================================================= */

.fs-about-info-box {

    background: #eef6f8;

    padding: 43px 35px 40px;

}

.fs-about-info-box h3:first-child {
    margin-top: 0;
}


.fs-about-info-box h3 {

    margin: 30px 0 30px;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 800;

    color: #171b28;

}


.fs-about-info-box p {

    margin: 0 0 13px;

    font-size: 14px;

    line-height: 1.7;

    color: #30343a;

}

.fs-about-info-box p span {
    font-weight: 800;
}

.fs-about-info-box .line-height p {
    margin-bottom: 0;
}

.fs-about-info-box .line-height p:last-child {

    margin-bottom: 1rem;

}


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

.fs-about-story-grid {

    display: grid;

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

    gap: 22px;

    margin-top: 26px;

}


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

.fs-about-story-card {

    padding: 34px 35px;

    border: 1px solid #e3e1de;

    background: #ffffff;

}


.fs-about-small-label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    color: #242730;

}


.fs-about-small-label span {

    width: 20px;

    height: 2px;

    display: block;

    background: #a00058;

}


.fs-about-story-card h3 {

    margin: 0 0 12px;

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

    font-size: 22px;

    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -.4px;

    color: #20212b;

}


.fs-about-story-card p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    line-height: 1.7;

    color: #60666d;

}


/* =========================================================
   BOTTOM DIVIDER
========================================================= */

.fs-about-bottom {

    display: grid;

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

    margin-top: 42px;

    padding-top: 32px;

    border-top: 1px solid #dedbd7;

}


/* =========================================================
   BOTTOM ITEM
========================================================= */

.fs-about-bottom-item {

    min-height: 75px;

    padding: 0 38px;

    border-right: 1px solid #dedbd7;

}


.fs-about-bottom-item:first-child {

    padding-left: 0;

}


.fs-about-bottom-item:last-child {

    border-right: none;

}


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

.fs-about-bottom-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 12px;

}


.fs-about-bottom-heading span {

    width: 38px;

    height: 2px;

    background: #a00058;

    flex-shrink: 0;

}


.fs-about-bottom-heading h4 {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    color: #292d35;

}


.fs-about-bottom-item p {

    margin: 0;

    padding-left: 54px;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    line-height: 1.6;

    color: #555c64;

}


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

@media (max-width: 1200px) {

    .fs-about-container {

        width: calc(100% - 80px);

    }


    .fs-about-focus-card {

        right: 80px;

    }


    .fs-about-content {

        padding-left: 80px;

        padding-right: 80px;

    }

}


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

@media (max-width: 900px) {

    .fs-about-section {

        padding: 120px 0 70px;

    }


    .fs-about-container {

        width: calc(100% - 40px);

    }


    .fs-about-hero {

        height: 620px;

    }


    .fs-about-focus-card {

        top: auto;

        right: 40px;

        bottom: 40px;

        width: 390px;

        min-height: auto;

        padding: 42px 45px;

    }


    .fs-about-focus-card h2 {

        font-size: 26px;

    }


    .fs-about-content {

        padding: 55px 55px 65px;

    }

}


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

@media (max-width: 650px) {

    .fs-about-section {

        padding: 100px 0 45px;

    }


    .fs-about-container {

        width: 100%;
        
        margin: auto;

        border-radius: 12px;

    }


    /* HERO */

    .fs-about-hero {

        height: auto;

        display: flex;

        flex-direction: column;

    }


    .fs-about-hero-image {

        position: relative;

        height: 360px;

    }


    .fs-about-focus-card {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        width: calc(100% - 30px);

        margin: -65px auto 0;

        min-height: auto;

        padding: 35px 30px 38px;

    }


    .fs-about-focus-card h2 {

        font-size: 25px;

        line-height: 1.3;

    }


    .fs-about-content {

        padding: 45px 22px 50px;

    }


    /* MISSION */

    .fs-about-info-box {

        padding: 30px 24px;

    }


    .fs-about-info-box h3 {

        font-size: 16px;

    }


    .fs-about-info-box p {

        font-size: 13px;

        line-height: 1.65;

    }


    /* STORY */

    .fs-about-story-grid {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 18px;

    }


    .fs-about-story-card {

        padding: 28px 25px;

    }


    /* BOTTOM */

    .fs-about-bottom {

        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 30px;

        padding-top: 0;

    }


    .fs-about-bottom-item {

        padding: 25px 0;

        min-height: auto;

        border-right: none;

        border-bottom: 1px solid #dedbd7;

    }


    .fs-about-bottom-item:first-child {

        padding-top: 25px;

    }


    .fs-about-bottom-item:last-child {

        border-bottom: none;

    }


    .fs-about-bottom-item p {

        padding-left: 0;

    }

}


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

@media (max-width: 400px) {

    .fs-about-container {

        width: 100%;
        
        margin: auto;

    }


    .fs-about-hero-image {

        height: 300px;

    }


    .fs-about-focus-card {

        width: calc(100% - 20px);

        padding: 30px 24px 32px;

    }


    .fs-about-focus-card h2 {

        font-size: 23px;

    }


    .fs-about-content {

        padding-left: 15px;

        padding-right: 15px;

    }

}

/* =========================================================
   FYRE SEARCH STORIES
   CONTACT PAGE
========================================================= */

.fs-contact-page {
    width: 100%;
}


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

.fs-contact-hero {

    height: 620px;

    position: relative;

    overflow: hidden;

    padding: 160px 0 110px;
    
    margin: 0 8%;
    
    margin-top: 160px;
    
    background: #ffffff;
    
    border-radius: 18px;
    
    border-bottom-left-radius: 0;
    
    border-bottom-right-radius: 0;
    
    overflow: hidden;
    
    border: 1px solid #e8e5e9;
    
    box-shadow: 0 2px 8px rgba(0, 0, 0, .02);

}


.fs-contact-hero-image {

    position: absolute;

    inset: 0;

}


.fs-contact-hero-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.fs-contact-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 10, 18, .72) 0%,
            rgba(20, 10, 18, .38) 45%,
            rgba(20, 10, 18, .08) 100%
        );

}


.fs-contact-hero-content {

    position: relative;

    z-index: 2;

    width: calc(100% - 120px);

    max-width: 1450px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.fs-contact-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

}


.fs-contact-label span {

    width: 30px;

    height: 2px;

    display: block;

    background: #a00058;

}


.fs-contact-label p {

    margin: 0;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    color: #ffffff;

}


.fs-contact-hero-content h1 {

    max-width: 750px;

    margin: 0;

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

    font-size: 64px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;

    color: #ffffff;

}


.fs-contact-hero-content > p {

    margin: 25px 0 0;

    font-family: "DM Sans", sans-serif;

    font-size: 18px;

    line-height: 1.6;

    color: rgba(255,255,255,.9);

}

.fs-contact-us-hero h2 {
    font-size: 28px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
    
    margin-bottom: 20px;

}

.fs-contact-us-hero p {
    
    color: #000;
    
}


/* =========================================================
   CONTENT SECTION
   SIMPLE / NO CARD / NO ANIMATION
========================================================= */

.fs-contact-content {

    width: 100%;

    background: #ffffff;
    
    padding-top: 0;
    
    padding-bottom: 0;

}


.fs-contact-content-inner {

    width: 100%;

}


.fs-contact-intro,
.fs-contact-topics,
.fs-contact-story {

    max-width: 850px;

}


.fs-contact-intro h2,
.fs-contact-topics h2,
.fs-contact-story h2 {

    margin: 0 0 25px;

    font-size: 34px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.8px;

    color: #171b28;

}

.fs-contact-intro h3:first-child {
    margin-top: 0;
}


.fs-contact-intro h3 {

    margin: 30px 0 30px;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
    color: #171b28;

}


.fs-contact-content p {

    margin: 0 0 18px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #444b53;

}


.fs-contact-content strong {

    color: #20232c;

    font-weight: 700;

}



/* =========================================================
   TOPICS
========================================================= */

.fs-contact-topics {

    margin-top: 75px;

    padding-top: 65px;

    border-top: 1px solid #dedbd7;

}


.fs-contact-topics p {

    margin-bottom: 27px;

}


.fs-contact-topics p::first-letter {

    color: #a00058;

}


.fs-contact-topics strong {

    color: #20232c;

}



/* =========================================================
   STORY
========================================================= */

.fs-contact-story {

    margin-top: 70px;

    padding-top: 65px;

    border-top: 1px solid #dedbd7;

}


.fs-contact-story p:last-child {

    margin-top: 25px;

}



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

.fs-contact-form-section {

    width: 100%;

    padding: 0 8%;

}


.fs-contact-form-container {

    min-height: 650px;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    background: #ffffff;

    border: 1px solid #e8e5e9;
    
    box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
    
    border-radius: 5px;
    
    margin: 40px 0;
}



/* =========================================================
   FORM VISUAL / LEFT
========================================================= */

.fs-contact-form-visual {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #c8c8c8;
    
    border-top-left-radius: 5px;
        
    border-bottom-left-radius: 5px;

}


.fs-contact-form-visual-image {

    position: absolute;

    inset: 0;

}


.fs-contact-form-visual-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter: grayscale(100%);

}


.fs-contact-form-visual-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.60)
        );

}


.fs-contact-form-visual-content {

    position: absolute;

    z-index: 2;

    left: 55px;

    right: 55px;

    bottom: 60px;

    color: #ffffff;

}


.fs-contact-form-brand {

    font-size: 17px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1px;

}


.fs-contact-form-brand span {

    display: block;

    margin-top: 5px;

    font-size: 45px;

    line-height: .7;

    font-weight: 500;

    letter-spacing: 0;

    color: #d00072;

}


.fs-contact-form-visual-content h2 {

    margin: 40px 0 15px;

    font-size: 42px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

}


.fs-contact-form-visual-content p {

    max-width: 350px;

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255,255,255,.88);

}



/* =========================================================
   FORM WRAPPER / RIGHT
========================================================= */

.fs-contact-form-wrapper {

    position: relative;

    padding: 78px 70px 65px;

    background: #ffffff;
    
    border-top-right-radius: 5px;
        
    border-bottom-right-radius: 5px;

}


.fs-contact-close {

    position: absolute;

    top: 28px;

    right: 32px;

    width: 35px;

    height: 35px;

    border: none;

    background: transparent;

    font-family: Arial, sans-serif;

    font-size: 30px;

    line-height: 1;

    font-weight: 400;

    color: #111111;

    cursor: pointer;

}


.fs-contact-form-heading h2 {

    margin: 0 0 12px;

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

    font-size: 43px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #111111;

}


.fs-contact-form-heading p {

    margin: 0 0 34px;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    line-height: 1.6;

    color: #565b61;

}



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

.fs-contact-form {

    width: 100%;

}


.fs-contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}


.fs-contact-field {

    width: 100%;

    margin-bottom: 21px;

}


.fs-contact-field label {

    display: block;

    margin-bottom: 8px;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 500;

    color: #202020;

}


.fs-contact-field label span {

    color: #8b8b8b;

    font-size: 11px;

}


.fs-contact-field input,
.fs-contact-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dedede;

    border-radius: 0;

    outline: none;

    background: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    color: #202020;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.fs-contact-field input {

    height: 49px;

    padding: 0 14px;

}


.fs-contact-field textarea {

    min-height: 145px;

    padding: 14px;

    resize: vertical;

}


.fs-contact-field input::placeholder,
.fs-contact-field textarea::placeholder {

    color: #999999;

}


.fs-contact-field input:focus,
.fs-contact-field textarea:focus {

    border-color: #a00058;

    box-shadow:
        0 0 0 2px rgba(160,0,88,.08);

}



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

.fs-contact-submit {

    display: flex;

    justify-content: flex-end;

    margin-top: 4px;

}


.fs-contact-submit-button {

    min-width: 190px;

    height: 48px;

    padding: 0 30px;

    border: none;

    border-radius: 0;

    background: #a00058;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}


.fs-contact-submit-button:hover {

    background: #820048;

    transform: translateY(-2px);

}



/* =========================================================
   COLLABORATE
========================================================= */

.fs-contact-collaborate {

    width: 100%;

    background: #ffffff;

}


.fs-contact-collaborate-inner {

    width: calc(100% - 120px);

    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 0;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    border-bottom: 1px solid #dedbd7;

}


.fs-contact-collaborate-inner .fs-contact-label p {

    color: #252832;

}


.fs-contact-collaborate-inner h2 {

    margin: 0;

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

    font-size: 38px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1px;

    color: #171b28;

}


.fs-contact-collaborate-text p {

    margin: 0 0 25px;

    font-family: "DM Sans", sans-serif;

    font-size: 15px;

    line-height: 1.8;

    color: #4b525a;

}


.fs-contact-collaborate-text strong {

    color: #20232c;

}


.fs-contact-collaborate-text a {

    color: #a00058;

    text-decoration: none;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    font-weight: 700;

}


.fs-contact-collaborate-text a span {

    display: inline-block;

    margin-left: 8px;

    transition: transform .2s ease;

}


.fs-contact-collaborate-text a:hover span {

    transform: translateX(5px);

}



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

.fs-contact-final {

    background: #ffffff;

}


.fs-contact-final-inner {

    width: calc(100% - 120px);

    max-width: 1200px;

    margin: 0 auto;

    padding: 65px 0 80px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

}


.fs-contact-final-logo {

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

    font-size: 16px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #171b28;

}


.fs-contact-final-logo span {

    display: block;

    margin-top: 5px;

    font-family: "Caveat", cursive;

    font-size: 46px;

    line-height: .7;

    font-weight: 500;

    letter-spacing: 0;

    color: #a00058;

}


.fs-contact-final-text {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;

}


.fs-contact-final-text strong {

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

    font-size: 14px;

    line-height: 1.5;

    font-weight: 700;

    color: #4b525a;

}



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

@media (max-width: 1000px) {

    .fs-contact-hero {

        height: 540px;

    }


    .fs-contact-hero-content {

        width: calc(100% - 80px);

    }


    .fs-contact-hero-content h1 {

        font-size: 52px;

    }


    .fs-contact-form-container {

        margin: 40px 0;

        grid-template-columns: 1fr;

    }


    .fs-contact-form-visual {

        min-height: 400px;

    }


    .fs-contact-form-wrapper {

        padding: 60px 55px;

    }


    .fs-contact-collaborate-inner {

        width: calc(100% - 80px);

        gap: 50px;

    }


    .fs-contact-final-inner {

        width: calc(100% - 80px);

    }

}



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

@media (max-width: 650px) {

    .fs-contact-hero {

        height: 470px;
        
        margin: 0 15px;
        
        margin-top: 100px;

    }


    .fs-contact-hero-content {

        width: calc(100% - 40px);

    }


    .fs-contact-hero-content h1 {

        font-size: 38px;

        letter-spacing: -1px;

    }


    .fs-contact-hero-content > p {

        font-size: 15px;

    }


    .fs-contact-content-inner {

        padding: 0;

    }


    .fs-contact-intro h2,
    .fs-contact-topics h2,
    .fs-contact-story h2 {

        font-size: 28px;

    }


    .fs-contact-content p {

        font-size: 14px;

        line-height: 1.75;

    }


    .fs-contact-topics {

        margin-top: 50px;

        padding-top: 45px;

    }


    .fs-contact-story {

        margin-top: 50px;

        padding-top: 45px;

    }


    /* FORM */

    .fs-contact-form-section {

        padding: 0;

    }


    .fs-contact-form-container {

        margin: 40px 0;

    }


    .fs-contact-form-visual {

        min-height: 350px;
        
        border-top-left-radius: 5px;
        
        border-top-right-radius: 5px;
        
        border-bottom-left-radius: 0;

    }


    .fs-contact-form-visual-content {

        left: 30px;

        right: 30px;

        bottom: 35px;

    }


    .fs-contact-form-visual-content h2 {

        margin-top: 28px;

        font-size: 32px;

    }


    .fs-contact-form-wrapper {

        padding: 55px 25px 35px;
        
        border-bottom-left-radius: 5px;
        
        border-bottom-right-radius: 5px;

    }


    .fs-contact-close {

        top: 18px;

        right: 18px;

    }


    .fs-contact-form-heading h2 {

        font-size: 34px;

    }


    .fs-contact-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .fs-contact-submit {

        justify-content: stretch;

    }


    .fs-contact-submit-button {

        width: 100%;

    }


    /* COLLABORATION */

    .fs-contact-collaborate-inner {

        width: calc(100% - 40px);

        padding: 60px 0;

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .fs-contact-collaborate-inner h2 {

        font-size: 31px;

    }


    /* FINAL */

    .fs-contact-final-inner {

        width: calc(100% - 40px);

        padding: 50px 0 60px;

        display: block;

    }


    .fs-contact-final-text {

        margin-top: 35px;

        align-items: flex-start;

    }

}



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

@media (max-width: 400px) {

    .fs-contact-hero-content h1 {

        font-size: 34px;

    }


    .fs-contact-form-wrapper {

        padding-left: 20px;

        padding-right: 20px;

    }

}