/* ==========================================================
   320 FM · LEGAL
   Premium editorial presentation
   ========================================================== */

.fm-legal-page,
.fm-legal-page *{
    box-sizing:border-box;
}

.fm-legal-page{
    width:100%;
    color:#d9e1e5;
}

.fm-legal-shell{
    width:100%;
    max-width:1180px;
    margin:0 auto;
}


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

.fm-legal-hero{
    position:relative;
    overflow:hidden;

    margin:0 0 22px;
    padding:36px 38px 34px;

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

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(42,175,225,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 5% 115%,
            rgba(213,45,148,.12),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            #151119 0%,
            #11171b 46%,
            #0d1e25 100%
        );
}

.fm-legal-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:72px 100%;
    opacity:.35;

    pointer-events:none;
}

.fm-legal-hero::after{
    content:"320";

    position:absolute;
    right:26px;
    bottom:-38px;

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

    font-size:122px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.09em;

    pointer-events:none;
}

.fm-legal-kicker{
    position:relative;
    z-index:1;

    display:block;
    margin:0 0 9px;

    color:#38b5e3;

    font-size:8px;
    font-weight:900;
    letter-spacing:.17em;
}

.fm-legal-hero h1{
    position:relative;
    z-index:1;

    margin:0;

    color:#fff;

    font-size:38px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.035em;
}

.fm-legal-hero p{
    position:relative;
    z-index:1;

    max-width:670px;

    margin:13px 0 0;

    color:#9eabb1;

    font-size:12px;
    line-height:1.65;
}


/* ==========================================================
   MAIN LAYOUT
   ========================================================== */

.fm-legal-content{
    display:grid;
    grid-template-columns:minmax(0,1fr) 214px;
    gap:22px;
    align-items:start;
}


/* ==========================================================
   ARTICLE
   ========================================================== */

.fm-legal-main{
    position:relative;
    overflow:hidden;

    border:1px solid #202b30;
    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #0e1519 0%,
            #0b1114 100%
        );
}

.fm-legal-page .fm-legal-card{
    position:relative;

    margin:0;
    padding:31px 34px 31px 78px;

    border:0;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.065);

    background:transparent;
    color:#9ca9af;

    transition:background .18s ease;
}

.fm-legal-page .fm-legal-card:last-child{
    border-bottom:0;
}

.fm-legal-page .fm-legal-card:hover{
    background:rgba(255,255,255,.012);
}


/* section numbering */

.fm-legal-section-head{
    position:static;

    display:block;

    margin:0 0 15px;
}

.fm-legal-section-head > span{
    position:absolute;

    left:28px;
    top:33px;

    color:#2aafe1;

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
}

.fm-legal-section-head > span::after{
    content:"";

    position:absolute;
    left:0;
    top:22px;

    width:18px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            #2aafe1
        );
}

.fm-legal-page .fm-legal-card h2,
.fm-legal-page .fm-legal-section-head h2{
    margin:0 0 14px;

    color:#f3f6f7;

    font-size:18px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.015em;
}

.fm-legal-page .fm-legal-section-head h2{
    margin:0;
}


/* body copy */

.fm-legal-page .fm-legal-card p{
    max-width:790px;

    margin:0 0 13px;

    color:#9aa8ae;

    font-size:11px;
    line-height:1.82;
}

.fm-legal-page .fm-legal-card p:last-child{
    margin-bottom:0;
}

.fm-legal-page .fm-legal-card strong{
    color:#e7edef;
    font-weight:750;
}

.fm-legal-page .fm-legal-card a{
    color:#40b8e4;
    text-decoration:none;

    transition:color .15s ease;
}

.fm-legal-page .fm-legal-card a:hover{
    color:#82d6f4;
}


/* ==========================================================
   OPERATOR BLOCK
   ========================================================== */

.fm-legal-highlight{
    position:relative;

    max-width:650px;

    margin-top:2px;
    padding:17px 19px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;

    background:
        linear-gradient(
            110deg,
            rgba(213,45,148,.055),
            rgba(42,175,225,.025)
        );
}

.fm-legal-highlight::before{
    content:"";

    position:absolute;
    left:-1px;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            #d52d94,
            #2aafe1
        );
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.fm-legal-sidebar{
    position:sticky;
    top:90px;

    display:grid;
    gap:10px;
}

.fm-legal-info{
    padding:16px 17px;

    border:1px solid #202b30;
    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            #10171b,
            #0b1114
        );
}

.fm-legal-info small{
    display:block;

    color:#65757d;

    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.fm-legal-info strong{
    display:block;

    margin-top:7px;

    color:#f1f5f6;

    font-size:11px;
    font-weight:800;
}

.fm-legal-info span{
    display:block;

    margin-top:5px;

    color:#74848b;

    font-size:8px;
    line-height:1.5;
}


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

.fm-legal-links{
    display:grid;

    padding:5px;

    border:1px solid #202b30;
    border-radius:9px;

    background:#0b1114;
}

.fm-legal-links a{
    position:relative;

    display:flex;
    align-items:center;

    min-height:35px;

    padding:0 11px;

    border-radius:6px;

    color:#78888f;

    font-size:8px;
    font-weight:800;
    text-decoration:none;

    transition:
        color .16s ease,
        background .16s ease;
}

.fm-legal-links a:hover{
    color:#fff;
    background:rgba(255,255,255,.025);
}

.fm-legal-links a.active{
    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(213,45,148,.13),
            rgba(42,175,225,.035)
        );
}

.fm-legal-links a.active::before{
    content:"";

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

    width:2px;

    border-radius:2px;

    background:#d52d94;
}


/* ==========================================================
   PRIVACY SETTINGS
   ========================================================== */

.fm-legal-consent-settings{
    width:100%;
    min-height:37px;

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

    padding:0 12px;

    border:1px solid #202b30;
    border-radius:9px;

    background:#0b1114;

    color:#78888f;

    font:inherit;
    font-size:8px;
    font-weight:800;

    cursor:pointer;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease;
}

.fm-legal-consent-settings:hover,
.fm-legal-consent-settings:focus-visible{
    color:#fff;

    border-color:#2b4956;

    background:#10191d;
}

.fm-legal-consent-settings b{
    color:#31afe0;
    font-size:15px;
    font-weight:500;
}


/* ==========================================================
   RICH TEXT
   ========================================================== */

.fm-legal-card ul,
.fm-legal-card ol{
    max-width:790px;

    margin:12px 0;
    padding-left:18px;

    color:#9aa8ae;

    font-size:11px;
    line-height:1.8;
}

.fm-legal-card li + li{
    margin-top:4px;
}

.fm-legal-card blockquote{
    max-width:760px;

    margin:18px 0;
    padding:8px 0 8px 17px;

    border-left:2px solid #d52d94;

    color:#acb8bd;

    font-size:11px;
    line-height:1.7;
}


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

@media(max-width:950px){

    .fm-legal-content{
        grid-template-columns:1fr;
    }

    .fm-legal-sidebar{
        position:static;
        grid-template-columns:1fr 1fr;
    }

    .fm-legal-consent-settings{
        grid-column:1/-1;
    }
}

@media(max-width:650px){

    .fm-legal-hero{
        padding:27px 22px;
    }

    .fm-legal-hero h1{
        font-size:31px;
    }

    .fm-legal-hero::after{
        right:10px;
        font-size:82px;
    }

    .fm-legal-page .fm-legal-card{
        padding:
            24px
            20px
            24px
            54px;
    }

    .fm-legal-section-head > span{
        left:19px;
        top:27px;
    }

    .fm-legal-sidebar{
        grid-template-columns:1fr;
    }

    .fm-legal-consent-settings{
        grid-column:auto;
    }
}

/* ==========================================================
   320 FM · LEGAL HERO · MENU FLOW
   ========================================================== */

.fm-legal-hero{
    position:relative;
    overflow:hidden;

    margin:
        -44px
        -54px
        28px;

    padding:
        58px
        54px
        44px;

    border:0;
    border-radius:0;

    background:
        radial-gradient(
            ellipse at 88% 18%,
            rgba(42,175,225,.16),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 9% 108%,
            rgba(213,45,148,.13),
            transparent 34%
        ),
        linear-gradient(
            118deg,
            #070b0e 0%,
            #0b1115 42%,
            #0d1c23 100%
        );
}

.fm-legal-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.022) 50%,
            transparent 100%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 86px,
            rgba(255,255,255,.018) 86px 87px
        );

    mask-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.32)
        );

    pointer-events:none;
}

.fm-legal-hero::after{
    content:"320";

    position:absolute;

    right:-22px;
    bottom:-70px;

    color:transparent;

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.055);

    font-size:180px;
    line-height:.8;
    font-weight:950;
    letter-spacing:-.10em;

    transform:rotate(-4deg);

    pointer-events:none;
}

.fm-legal-kicker{
    position:relative;
    z-index:2;

    margin-bottom:11px;

    color:#39b7e6;

    font-size:8px;
    font-weight:900;
    letter-spacing:.19em;
}

.fm-legal-hero h1{
    position:relative;
    z-index:2;

    max-width:720px;

    margin:0;

    color:#fff;

    font-size:42px;
    line-height:.98;
    font-weight:950;
    letter-spacing:-.04em;
}

.fm-legal-hero p{
    position:relative;
    z-index:2;

    max-width:650px;

    margin-top:14px;

    color:#aab6bc;

    font-size:12px;
    line-height:1.7;
}

.fm-legal-hero::selection{
    background:#d52d94;
    color:#fff;
}


/* Hero läuft optisch direkt aus dem Menü */

.site-header + .content-page-shell .fm-legal-page{
    position:relative;
}

.site-header + .content-page-shell .fm-legal-hero{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* Content startet ohne optische Boxkante */

.fm-legal-content{
    position:relative;
    z-index:2;
}

@media(max-width:760px){

    .fm-legal-hero{
        margin:
            -44px
            -20px
            22px;

        padding:
            42px
            20px
            32px;
    }

    .fm-legal-hero h1{
        font-size:32px;
    }

    .fm-legal-hero::after{
        right:-28px;
        bottom:-42px;
        font-size:110px;
    }
}

/* ==========================================================
   320 FM · LEGAL HERO · SOFTER MENU TRANSITION
   ========================================================== */

.fm-legal-hero{
    background:
        radial-gradient(
            ellipse at 86% 34%,
            rgba(42,175,225,.105),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 8% 112%,
            rgba(213,45,148,.09),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #050709 0%,
            #070b0e 18%,
            #0a1014 48%,
            #0d171c 100%
        );
}

.fm-legal-hero::before{
    background:
        linear-gradient(
            180deg,
            rgba(5,7,9,.98) 0%,
            rgba(5,7,9,.74) 11%,
            rgba(5,7,9,.22) 27%,
            transparent 48%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 86px,
            rgba(255,255,255,.014) 86px 87px
        );

    mask-image:none;
    -webkit-mask-image:none;
}

.site-header + .content-page-shell .fm-legal-hero{
    box-shadow:none;
}

/* ==========================================================
   320 FM · LEGAL CONTENT FRAME RESTORE
   ========================================================== */

.fm-legal-main{
    position:relative;
    overflow:hidden;

    border:1px solid #202b30;
    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #0e1519 0%,
            #0b1114 100%
        );

    box-shadow:
        0 1px 0 rgba(255,255,255,.015),
        0 14px 34px rgba(0,0,0,.08);
}

.fm-legal-page .fm-legal-card{
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.fm-legal-page .fm-legal-card:last-child{
    border-bottom:0;
}

/* ==========================================================
   320 FM · LEGAL · FULL PAGE CONTENT AREA
   Hero bleibt offen, darunter wieder normale Seitenfläche
   ========================================================== */

/*
 * Die Legal-Seite nutzt wieder die gleiche durchgehende
 * Contentfläche wie die übrigen öffentlichen Seiten.
 */
.content-page-shell:has(.fm-legal-page){
    position:relative;

    max-width:1440px;
    min-height:calc(100vh - 100px);

    margin:0 auto;

    padding:
        44px
        54px
        90px;

    background:#080d10;
}

/*
 * Die eigentliche Legal-Fläche füllt den Contentbereich
 * vollständig aus.
 */
.content-page-shell:has(.fm-legal-page) .fm-legal-page{
    width:100%;
    min-height:100%;
}

/*
 * Der Hero darf weiterhin optisch bis an das Menü laufen.
 * Nur oben wird die normale Content-Einrückung aufgehoben.
 */
.content-page-shell:has(.fm-legal-page) .fm-legal-hero{
    margin:
        -44px
        -54px
        28px;
}

/*
 * Unterhalb des Heroes läuft die Contentfläche wieder
 * sauber bis zum Footer weiter.
 */
.content-page-shell:has(.fm-legal-page) .fm-legal-content{
    width:100%;
    margin:0;
}

/* Mobile */
@media(max-width:760px){

    .content-page-shell:has(.fm-legal-page){
        padding:
            44px
            20px
            72px;
    }

    .content-page-shell:has(.fm-legal-page) .fm-legal-hero{
        margin:
            -44px
            -20px
            22px;
    }
}

/* ==========================================================
   320 FM · LEGAL HERO · BRAND DEPTH
   Datenschutz + Impressum + Kontakt
   ========================================================== */

.fm-legal-hero{
    min-height:205px;

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

    isolation:isolate;
}


/*
 * Subtile Audiostruktur.
 * Keine harte Grafik, sondern sehr feine Pegellinien.
 */
.fm-legal-hero::before{
    content:"";

    position:absolute;
    z-index:-1;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,7,9,.98) 0%,
            rgba(5,7,9,.67) 13%,
            rgba(5,7,9,.17) 34%,
            transparent 55%
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 13px,
            rgba(255,255,255,.013) 13px 14px,
            transparent 14px 27px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 78px,
            rgba(42,175,225,.025) 78px 79px,
            transparent 79px 156px
        );

    pointer-events:none;
}


/*
 * Großes 320 FM als Markenwasserzeichen.
 */
.fm-legal-hero::after{
    content:"320 FM";

    position:absolute;
    z-index:-1;

    right:-52px;
    bottom:-56px;

    color:transparent;

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.070);

    font-size:clamp(150px,15vw,245px);
    line-height:.76;

    font-weight:950;
    letter-spacing:-.105em;

    transform:
        rotate(-3deg)
        skewX(-2deg);

    transform-origin:center;

    white-space:nowrap;

    pointer-events:none;
}


/*
 * Cyan/Magenta liegen erst tiefer in der Fläche.
 * Oben bleibt der Übergang zum Menü weich.
 */
.fm-legal-hero{
    background:

        radial-gradient(
            ellipse at 84% 54%,
            rgba(42,175,225,.115),
            transparent 39%
        ),

        radial-gradient(
            ellipse at 8% 118%,
            rgba(213,45,148,.095),
            transparent 43%
        ),

        linear-gradient(
            180deg,
            #050709 0%,
            #070a0d 16%,
            #091015 46%,
            #0c171c 100%
        );
}


/*
 * Titel bekommt mehr räumliche Präsenz,
 * bleibt aber in der vorhandenen Typografie.
 */
.fm-legal-hero h1{
    max-width:710px;

    font-size:clamp(34px,4vw,48px);

    text-shadow:
        0 1px 0 rgba(255,255,255,.025),
        0 16px 36px rgba(0,0,0,.24);
}

.fm-legal-hero p{
    max-width:610px;
}


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

.fm-contact-main .fm-legal-card{
    min-height:0;
}

.fm-contact-channel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    max-width:760px;

    margin-top:18px;
    padding:15px 16px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;

    background:
        linear-gradient(
            110deg,
            rgba(213,45,148,.045),
            rgba(42,175,225,.028)
        );
}

.fm-contact-channel > div{
    min-width:0;
}

.fm-contact-channel small,
.fm-contact-channel strong,
.fm-contact-channel span{
    display:block;
}

.fm-contact-channel small{
    margin-bottom:5px;

    color:#657780;

    font-size:7px;
    font-weight:900;
    letter-spacing:.13em;
}

.fm-contact-channel strong{
    color:#eef4f6;

    font-size:12px;
}

.fm-contact-channel span{
    margin-top:3px;

    color:#7f9097;

    font-size:8px;
}

.fm-contact-channel > a{
    flex:0 0 auto;

    padding:9px 12px;

    border:1px solid #29424e;
    border-radius:6px;

    background:#101a1f;

    color:#41b8e4 !important;

    font-size:8px;
    font-weight:850;
    text-decoration:none;
}

.fm-contact-channel > a:hover{
    border-color:#2aafe1;

    background:
        rgba(42,175,225,.07);

    color:#fff !important;
}

.fm-contact-legal-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:17px;
}

.fm-contact-legal-links a{
    padding:8px 11px;

    border:1px solid #26363e;
    border-radius:6px;

    background:#10181c;

    font-size:8px;
    font-weight:800;
}


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

@media(max-width:700px){

    .fm-legal-hero{
        min-height:185px;
    }

    .fm-legal-hero::after{
        right:-34px;
        bottom:-28px;

        font-size:105px;
    }

    .fm-contact-channel{
        align-items:flex-start;
        flex-direction:column;
        gap:13px;
    }
}

/* ==========================================================
   320 FM · CONTACT FORM
   ========================================================== */

.fm-contact-form{
    max-width:790px;
    margin-top:24px;
}

.fm-contact-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.fm-contact-field{
    display:block;
    margin-bottom:14px;
}

.fm-contact-field > span{
    display:block;
    margin-bottom:7px;

    color:#87969d;

    font-size:8px;
    font-weight:850;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.fm-contact-field input,
.fm-contact-field select,
.fm-contact-field textarea{
    width:100%;

    border:1px solid #26343b;
    border-radius:7px;

    outline:0;

    background:#0a1013;

    color:#edf3f5;

    font:inherit;
    font-size:11px;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.fm-contact-field input,
.fm-contact-field select{
    height:43px;
    padding:0 13px;
}

.fm-contact-field textarea{
    min-height:170px;
    resize:vertical;

    padding:12px 13px;

    line-height:1.65;
}

.fm-contact-field input:hover,
.fm-contact-field select:hover,
.fm-contact-field textarea:hover{
    border-color:#34464f;
}

.fm-contact-field input:focus,
.fm-contact-field select:focus,
.fm-contact-field textarea:focus{
    border-color:#2aafe1;

    background:#0d1519;

    box-shadow:
        0 0 0 3px rgba(42,175,225,.07);
}

.fm-contact-field small{
    display:block;

    margin-top:6px;

    color:#65767e;

    font-size:7px;
}

.fm-contact-privacy{
    display:flex;
    align-items:flex-start;
    gap:9px;

    max-width:720px;

    margin-top:4px;

    color:#839198;

    font-size:9px;
    line-height:1.55;
}

.fm-contact-privacy input{
    flex:0 0 auto;
    margin-top:3px;

    accent-color:#d52d94;
}

.fm-contact-privacy a{
    color:#3db6e4;
    text-decoration:none;
}

.fm-contact-submit-row{
    display:flex;
    justify-content:flex-start;

    margin-top:20px;
}

.fm-contact-submit{
    min-height:42px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    padding:0 17px;

    border:1px solid #d52d94;
    border-radius:7px;

    background:
        linear-gradient(
            110deg,
            #c6298a,
            #d52d94
        );

    color:#fff;

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

    cursor:pointer;

    transition:
        transform .15s ease,
        opacity .15s ease,
        box-shadow .15s ease;
}

.fm-contact-submit:hover{
    transform:translateY(-1px);

    box-shadow:
        0 9px 24px rgba(213,45,148,.18);
}

.fm-contact-submit:disabled{
    opacity:.55;
    cursor:wait;
    transform:none;
}

.fm-contact-submit b{
    font-size:14px;
    font-weight:500;
}

.fm-contact-status{
    display:none;

    margin-top:17px;
    padding:11px 13px;

    border-radius:7px;

    font-size:9px;
    line-height:1.5;
}

.fm-contact-status.is-success{
    display:block;

    border:1px solid rgba(44,190,137,.24);

    background:rgba(44,190,137,.07);

    color:#8bdec0;
}

.fm-contact-status.is-error{
    display:block;

    border:1px solid rgba(213,45,94,.28);

    background:rgba(213,45,94,.075);

    color:#ef9aae;
}

.fm-contact-honeypot{
    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip:rect(0 0 0 0);

    white-space:nowrap;
}

@media(max-width:650px){

    .fm-contact-form-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .fm-contact-submit{
        width:100%;
    }
}

/* ==========================================================
   320 FM · CONTACT LANDINGPAGE
   ========================================================== */

.fm-contact-page .fm-legal-shell{
    max-width:1180px;
}


/* HERO */

.fm-contact-hero{
    min-height:238px;
    justify-content:center;

    padding-top:62px;
    padding-bottom:50px;
}

.fm-contact-hero-copy{
    position:relative;
    z-index:3;

    max-width:680px;
}

.fm-contact-hero h1{
    font-size:clamp(42px,5vw,62px);
    letter-spacing:-.055em;
}

.fm-contact-hero p{
    max-width:570px;

    font-size:13px;
    line-height:1.7;
}

.fm-contact-hero::after{
    content:"320 FM";

    right:-66px;
    bottom:-72px;

    font-size:clamp(175px,17vw,270px);

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.078);
}

.fm-contact-hero-meta{
    position:absolute;
    z-index:2;

    right:38px;
    top:38px;

    display:grid;
    justify-items:end;
    gap:3px;

    opacity:.7;
}

.fm-contact-hero-meta span{
    color:#607179;

    font-size:7px;
    font-weight:900;
    letter-spacing:.17em;
}

.fm-contact-hero-meta strong{
    color:#819198;

    font-size:9px;
    letter-spacing:.08em;
}


/* WORKSPACE */

.fm-contact-workspace{
    display:grid;

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

    gap:18px;

    align-items:start;
}


/* MAIN PANEL */

.fm-contact-panel{
    position:relative;

    padding:31px 34px 34px;

    border:1px solid #202c32;
    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            #0e1519,
            #0a1013
        );

    overflow:hidden;
}

.fm-contact-panel::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(42,175,225,.38),
            rgba(213,45,148,.28),
            transparent
        );
}

.fm-contact-panel-head{
    display:flex;

    justify-content:space-between;
    align-items:flex-start;

    gap:30px;

    margin-bottom:28px;
}

.fm-contact-eyebrow{
    display:block;

    margin-bottom:7px;

    color:#36b5e6;

    font-size:7px;
    font-weight:900;
    letter-spacing:.15em;
}

.fm-contact-panel-head h2{
    margin:0;

    color:#f2f6f8;

    font-size:23px;
    font-weight:850;
    letter-spacing:-.025em;
}

.fm-contact-panel-head p{
    max-width:570px;

    margin:8px 0 0;

    color:#839199;

    font-size:10px;
    line-height:1.65;
}

.fm-contact-panel-index{
    color:#243139;

    font-size:38px;
    line-height:1;
    font-weight:950;
}


/* FORM */

.fm-contact-form{
    max-width:none;
    margin:0;
}

.fm-contact-form-grid{
    gap:14px;
}

.fm-contact-field{
    margin-bottom:16px;
}

.fm-contact-field > span,
.fm-contact-topic legend{
    display:block;

    margin:0 0 7px;

    color:#7f9098;

    font-size:7px;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.fm-contact-field input,
.fm-contact-field textarea{
    border-color:#23323a;
    background:#080d10;
}

.fm-contact-field input{
    height:46px;
}

.fm-contact-field textarea{
    min-height:205px;
}

.fm-contact-field input::placeholder,
.fm-contact-field textarea::placeholder{
    color:#485860;
}


/* TOPIC CHIPS */

.fm-contact-topic{
    margin:3px 0 18px;
    padding:0;

    border:0;
}

.fm-contact-topic-grid{
    display:grid;

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

    gap:8px;
}

.fm-contact-topic-grid label{
    position:relative;

    cursor:pointer;
}

.fm-contact-topic-grid input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
}

.fm-contact-topic-grid label > span{
    min-height:66px;

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

    padding:11px 12px;

    border:1px solid #223139;
    border-radius:7px;

    background:#0b1216;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.fm-contact-topic-grid label:hover > span{
    border-color:#324650;
    background:#10191d;
}

.fm-contact-topic-grid input:checked + span{
    border-color:rgba(42,175,225,.55);

    background:
        linear-gradient(
            120deg,
            rgba(42,175,225,.095),
            rgba(213,45,148,.045)
        );

    box-shadow:
        inset 2px 0 0 #2aafe1;
}

.fm-contact-topic-grid b{
    color:#dde7eb;

    font-size:9px;
    font-weight:800;
}

.fm-contact-topic-grid small{
    margin-top:4px;

    color:#65767e;

    font-size:7px;
    line-height:1.35;
}

.fm-contact-topic-grid input:checked + span b{
    color:#fff;
}


/* PRIVACY */

.fm-contact-privacy{
    max-width:700px;

    padding-top:2px;

    color:#78888f;
}


/* SUBMIT */

.fm-contact-submit-row{
    align-items:center;
    gap:16px;

    margin-top:23px;
}

.fm-contact-submit{
    min-width:170px;
    height:44px;

    border-color:#b9247f;

    background:
        linear-gradient(
            110deg,
            #bb247f,
            #d52d94 58%,
            #c22c91
        );
}

.fm-contact-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(213,45,148,.20);
}

.fm-contact-submit-hint{
    color:#586970;

    font-size:7px;
}


/* STATUS */

.fm-contact-status{
    margin-top:18px;
}

.fm-contact-status.is-success{
    padding:14px 15px;

    border-color:rgba(54,181,230,.28);

    background:
        linear-gradient(
            90deg,
            rgba(42,175,225,.09),
            rgba(44,190,137,.045)
        );

    color:#a9dbea;
}


/* SIDE RAIL */

.fm-contact-rail{
    position:sticky;
    top:88px;

    display:grid;
    gap:9px;
}

.fm-contact-rail-block{
    padding:16px;

    border:1px solid #202c32;
    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            #0e1519,
            #0a1013
        );
}

.fm-contact-rail-block h2{
    margin:0;

    color:#edf3f5;

    font-size:13px;
    line-height:1.25;
}

.fm-contact-rail-block p{
    margin:6px 0 0;

    color:#71828a;

    font-size:8px;
    line-height:1.55;
}

.fm-contact-direct > a{
    display:flex;

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

    gap:12px;

    margin-top:14px;
    padding-top:12px;

    border-top:1px solid rgba(255,255,255,.06);

    color:#35b3e3;

    font-size:8px;
    font-weight:850;

    text-decoration:none;
}

.fm-contact-direct > a:hover{
    color:#fff;
}

.fm-contact-direct > a b{
    font-size:12px;
    font-weight:500;
}


/* TOPIC LIST */

.fm-contact-rail-list{
    display:grid;
}

.fm-contact-rail-list span{
    position:relative;

    padding:8px 0 8px 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

    color:#7d8d94;

    font-size:8px;
}

.fm-contact-rail-list span:last-child{
    border-bottom:0;
}

.fm-contact-rail-list span::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#2aafe1;
}


/* LEGAL NAV */

.fm-contact-legal-nav{
    display:grid;
}

.fm-contact-legal-nav a{
    display:flex;

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

    min-height:34px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

    color:#7f9097;

    font-size:8px;
    font-weight:800;

    text-decoration:none;
}

.fm-contact-legal-nav a:last-child{
    border-bottom:0;
}

.fm-contact-legal-nav a:hover{
    color:#fff;
}

.fm-contact-legal-nav b{
    color:#2aafe1;

    font-size:11px;
    font-weight:500;
}


/* BRAND SIGNATURE */

.fm-contact-rail-signature{
    position:relative;

    min-height:112px;

    padding:17px;

    overflow:hidden;

    border:1px solid #202c32;
    border-radius:9px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(42,175,225,.11),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #0d1418,
            #090e11
        );
}

.fm-contact-rail-signature span,
.fm-contact-rail-signature b{
    position:relative;
    z-index:2;

    font-weight:950;
    letter-spacing:-.07em;
}

.fm-contact-rail-signature span{
    color:#e9eef0;

    font-size:29px;
}

.fm-contact-rail-signature b{
    margin-left:3px;

    color:#d52d94;

    font-size:17px;
}

.fm-contact-rail-signature small{
    position:absolute;

    left:17px;
    bottom:15px;

    color:#52636b;

    font-size:6px;
    font-weight:900;
    letter-spacing:.14em;
}


/* SUCCESS MICRO STATE */

.fm-contact-form.is-complete .fm-contact-submit{
    border-color:#2aafe1;

    background:
        linear-gradient(
            110deg,
            #198bb5,
            #2aafe1
        );
}


/* MOBILE */

@media(max-width:950px){

    .fm-contact-workspace{
        grid-template-columns:1fr;
    }

    .fm-contact-rail{
        position:static;

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

    .fm-contact-rail-signature{
        grid-column:1/-1;
    }
}

@media(max-width:760px){

    .fm-contact-hero{
        min-height:210px;
    }

    .fm-contact-hero-meta{
        display:none;
    }

    .fm-contact-panel{
        padding:24px 20px;
    }

    .fm-contact-topic-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){

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

    .fm-contact-topic-grid{
        grid-template-columns:1fr;
    }

    .fm-contact-rail{
        grid-template-columns:1fr;
    }

    .fm-contact-rail-signature{
        grid-column:auto;
    }

    .fm-contact-submit-row{
        align-items:stretch;
        flex-direction:column;
    }

    .fm-contact-submit-hint{
        text-align:center;
    }
}

/* ==========================================================
   320 FM · CONTACT LINK LEGIBILITY
   ========================================================== */

.fm-contact-direct > a{
    min-height:38px;
    font-size:9px;
    line-height:1.35;
}

.fm-contact-legal-nav a{
    min-height:40px;
    font-size:9px;
}

.fm-contact-rail-list span{
    min-height:34px;
    display:flex;
    align-items:center;
    font-size:9px;
}

.fm-contact-topic-grid b{
    font-size:10px;
}

.fm-contact-topic-grid small{
    font-size:8px;
}

.fm-contact-privacy{
    font-size:9px;
}

.fm-contact-privacy a{
    font-size:inherit;
    font-weight:800;
}

.fm-contact-submit{
    font-size:10px;
}

.fm-contact-submit-hint{
    font-size:8px;
}

.fm-contact-page .fm-legal-links a{
    min-height:38px;
    display:flex;
    align-items:center;
    font-size:9px;
}

@media(max-width:700px){

    .fm-contact-direct > a,
    .fm-contact-legal-nav a,
    .fm-contact-page .fm-legal-links a{
        min-height:42px;
        font-size:10px;
    }
}

/* 320 FM · SUPPORT PHASE 2 */

.fm-contact-attachment{
    margin-top:18px;
}

.fm-contact-attachment input[type="file"]{
    min-height:48px;
    padding:11px 12px;
    cursor:pointer;
}

.fm-contact-context{
    margin-top:4px;
}

.fm-contact-direct > a,
.fm-contact-legal-nav a{
    font-size:10px;
}

.fm-contact-rail-list span{
    font-size:10px;
}

.fm-contact-topic-grid b{
    font-size:11px;
}

.fm-contact-topic-grid small{
    font-size:9px;
}

.fm-contact-privacy{
    font-size:10px;
    line-height:1.55;
}

.fm-contact-privacy a{
    font-size:10px;
}

/* ==========================================================
   320 FM · CONTACT FORM MESSAGE LAYER
   ========================================================== */

.fm-contact-form{
    position:relative;
}

.fm-contact-message-layer{
    position:absolute;
    z-index:30;

    inset:0;

    display:grid;
    place-items:center;

    padding:26px;

    border-radius:10px;

    overflow:hidden;
}

.fm-contact-message-layer[hidden]{
    display:none;
}

.fm-contact-message-backdrop{
    position:absolute;
    inset:0;

    background:
        rgba(5,9,12,.79);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}

.fm-contact-message-dialog{
    position:relative;
    z-index:2;

    width:min(430px,100%);

    padding:32px 30px 28px;

    text-align:center;

    border:1px solid rgba(42,175,225,.28);
    border-radius:12px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(42,175,225,.13),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(213,45,148,.09),
            transparent 42%
        ),
        linear-gradient(
            155deg,
            #10191e,
            #090f12
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.fm-contact-message-dialog::before{
    content:"";

    position:absolute;
    top:0;
    left:48px;
    right:48px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2aafe1,
            rgba(213,45,148,.7),
            transparent
        );
}

.fm-contact-message-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin:0 auto 17px;

    border:1px solid rgba(42,175,225,.44);
    border-radius:50%;

    background:
        rgba(42,175,225,.10);

    color:#5bc9f1;

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

.fm-contact-message-kicker{
    display:block;

    margin-bottom:7px;

    color:#36b5e6;

    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

.fm-contact-message-dialog strong{
    display:block;

    color:#f2f7f9;

    font-size:18px;
    font-weight:850;
    letter-spacing:-.025em;
}

.fm-contact-message-dialog p{
    max-width:340px;

    margin:10px auto 0;

    color:#8b9ba2;

    font-size:10px;
    line-height:1.6;
}

.fm-contact-message-ticket{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:34px;

    margin-top:18px;
    padding:0 14px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:6px;

    background:#080d10;

    color:#e2edf1;

    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
}

.fm-contact-message-action{
    min-width:160px;
    height:40px;

    margin-top:20px;
    padding:0 18px;

    border:1px solid rgba(42,175,225,.40);
    border-radius:6px;

    background:
        linear-gradient(
            110deg,
            rgba(42,175,225,.14),
            rgba(213,45,148,.08)
        );

    color:#dceaf0;

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

    cursor:pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.fm-contact-message-action:hover{
    transform:translateY(-1px);

    border-color:rgba(42,175,225,.72);

    background:
        linear-gradient(
            110deg,
            rgba(42,175,225,.21),
            rgba(213,45,148,.12)
        );
}


/* ERROR */

.fm-contact-message-layer.is-error
.fm-contact-message-dialog{
    border-color:rgba(213,45,148,.34);

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(213,45,148,.14),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            #181017,
            #0c0b0e
        );
}

.fm-contact-message-layer.is-error
.fm-contact-message-dialog::before{
    background:
        linear-gradient(
            90deg,
            transparent,
            #d52d94,
            transparent
        );
}

.fm-contact-message-layer.is-error
.fm-contact-message-icon{
    font-size:0;

    border-color:rgba(213,45,148,.42);

    background:
        rgba(213,45,148,.11);

    color:#ee61b7;
}

.fm-contact-message-layer.is-error
.fm-contact-message-icon::after{
    content:"×";

    font-size:23px;
}


/* MOBILE */

@media(max-width:620px){

    .fm-contact-message-layer{
        padding:14px;
    }

    .fm-contact-message-dialog{
        padding:27px 20px 23px;
    }

    .fm-contact-message-dialog strong{
        font-size:16px;
    }

    .fm-contact-message-action{
        width:100%;
    }
}