/* ==========================================================



   IMM RADIO



   Premium Single-Page Radio Interface



========================================================== */











/* ==========================================================



   RESET



========================================================== */







*,



*::before,



*::after {



    box-sizing: border-box;



    margin: 0;



    padding: 0;



}











:root {







    --navy-950: #030b19;



    --navy-900: #06142b;



    --navy-850: #081b38;



    --navy-800: #0b264b;







    --red: #e41e46;



    --red-bright: #ff3159;



    --red-dark: #a90b2b;







    --white: #ffffff;







    --surface: #f5f7fa;







    --text: #172135;



    --text-soft: #697486;







    --white-soft: #d9e0e9;



    --white-muted: #95a3b6;







    --border:



        rgba(255,255,255,0.12);







    --shadow:



        0 30px 80px



        rgba(0,0,0,0.35);



}











html {



    scroll-behavior: smooth;



}











body {







    min-height: 100vh;







    font-family:



        Inter,



        "Segoe UI",



        Arial,



        Helvetica,



        sans-serif;







    -webkit-font-smoothing:



        antialiased;







    text-rendering:



        optimizeLegibility;







    background:



        var(--navy-950);



}











button,



input {



    font: inherit;



}











button {







    border: 0;







    cursor: pointer;







    color: inherit;







    -webkit-tap-highlight-color:



        transparent;



}











img {







    display: block;







    max-width: 100%;



}















/* ==========================================================



   VIEW SYSTEM



========================================================== */







.site-view {



    display: none;



}











.site-view.active-view {



    display: block;



}











.player-view {







    position: relative;







    min-height: 100vh;



    min-height: 100svh;







    color: white;







    overflow: hidden;







    isolation: isolate;



}











.about-view {







    min-height: 100vh;







    background:



        var(--surface);







    color:



        var(--text);



}















/* ==========================================================



   PLAYER BACKGROUND



========================================================== */







.player-background {







    position: absolute;







    inset: 0;







    z-index: -4;







    background:



        url("assets/images/radio-hero.jpg")



        67% center / cover



        no-repeat;







    transform:



        scale(1.02);



}











.player-overlay {







    position: absolute;







    inset: 0;







    z-index: -3;







    background:







        linear-gradient(



            90deg,



            rgba(3,11,25,0.97) 0%,



            rgba(4,14,31,0.94) 38%,



            rgba(5,17,37,0.74) 68%,



            rgba(5,16,34,0.36) 100%



        ),







        linear-gradient(



            0deg,



            rgba(3,10,23,0.55),



            transparent 55%



        );



}











.player-glow {







    position: absolute;







    z-index: -2;







    width: 650px;



    height: 650px;







    left: 50%;







    top: 50%;







    transform:



        translate(-50%, -50%);







    border-radius: 50%;







    background:



        rgba(213,21,59,0.10);







    filter:



        blur(110px);







    pointer-events: none;



}















/* ==========================================================



   PLAYER HEADER



========================================================== */







.player-header {

    position: relative;
    z-index: 10;
    width:
        min(1180px, calc(100% - 48px));
    min-height: 100px;
    margin: 0 auto;
    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: 30px;



}











.brand-button {







    padding: 0;







    background: transparent;



}











.logo {







    width: 175px;







    max-height: 86px;







    object-fit: contain;



}











.header-about {







    display: inline-flex;







    align-items: center;







    gap: 10px;







    padding: 10px 0;







    background: transparent;







    color:



        rgba(255,255,255,0.72);







    font-size: 12px;







    font-weight: 650;







    transition:



        color 0.2s ease;



}











.header-about span {







    color:



        var(--red-bright);







    font-size: 18px;







    transition:



        transform 0.2s ease;



}











.header-about:hover {



    color: white;



}











.header-about:hover span {







    transform:



        translateX(4px);



}















/* ==========================================================



   CENTERED PLAYER CONTENT



========================================================== */







.radio-content {







    position: relative;







    z-index: 3;







    width:



        min(1180px, calc(100% - 48px));







    min-height:



        calc(100svh - 100px);







    margin:



        0 auto;







    padding:



        35px 0 65px;







    display: flex;







    align-items: center;







    justify-content: center;



}











.radio-column {







    width:



        min(650px, 100%);







    margin:



        0 auto;







    text-align:



        center;



}















/* ==========================================================



   LIVE BADGE



========================================================== */







.live-badge {







    width: fit-content;







    margin:



        0 auto;







    display: flex;







    align-items: center;







    gap: 10px;







    padding:



        8px 14px;







    border:



        1px solid



        rgba(255,255,255,0.12);







    border-radius:



        999px;







    background:



        rgba(6,21,45,0.68);







    backdrop-filter:



        blur(10px);







    color:



        rgba(255,255,255,0.90);







    font-size: 10px;







    font-weight: 800;







    letter-spacing:



        1.7px;



}











.live-dot {







    width: 8px;



    height: 8px;







    border-radius:



        50%;







    background:



        var(--red-bright);







    animation:



        livePulse



        1.8s



        infinite;



}











@keyframes livePulse {







    0% {







        box-shadow:



            0 0 0 0



            rgba(255,49,89,0.50);







    }







    70% {







        box-shadow:



            0 0 0 8px



            rgba(255,49,89,0);







    }







    100% {







        box-shadow:



            0 0 0 0



            rgba(255,49,89,0);







    }







}















/* ==========================================================



   TITLE



========================================================== */







.title-block {







    margin-top:



        23px;







    text-align:



        center;



}











.ministry-label {







    margin-bottom:



        10px;







    color:



        rgba(255,255,255,0.47);







    font-size:



        9px;







    font-weight:



        750;







    letter-spacing:



        2.4px;



}











.title-block h1 {







    max-width:



        620px;







    margin:



        0 auto;







    font-size:



        clamp(44px, 5.2vw, 70px);







    line-height:



        0.98;







    letter-spacing:



        -2.8px;







    font-weight:



        750;



}











.title-block h1 span {







    display:



        block;







    color:



        var(--red-bright);



}















/* ==========================================================



   PLAYER CARD



========================================================== */







.player-card {







    position:



        relative;







    width:



        100%;







    margin-top:



        31px;







    padding:



        22px 24px 20px;







    border:



        1px solid



        rgba(255,255,255,0.13);







    border-radius:



        28px;







    background:



        linear-gradient(



            145deg,



            rgba(8,28,57,0.91),



            rgba(4,16,35,0.94)



        );







    backdrop-filter:



        blur(18px);







    -webkit-backdrop-filter:



        blur(18px);







    box-shadow:



        var(--shadow);







    overflow:



        hidden;







    text-align:



        left;



}











.player-card::before {







    content: "";







    position:



        absolute;







    inset:



        0;







    pointer-events:



        none;







    background:



        linear-gradient(



            120deg,



            rgba(255,255,255,0.055),



            transparent 28%



        );



}















/* ==========================================================



   STATION ROW



========================================================== */







.station-row {







    position:



        relative;







    display:



        flex;







    align-items:



        center;







    justify-content:



        space-between;







    gap:



        20px;







    padding-bottom:



        17px;







    border-bottom:



        1px solid



        rgba(255,255,255,0.08);



}











.station-status {







    display:



        flex;







    align-items:



        center;







    gap:



        13px;



}











.on-air-dot {







    flex-shrink:



        0;







    width:



        9px;







    height:



        9px;







    border-radius:



        50%;







    background:



        var(--red-bright);







    box-shadow:



        0 0 0 5px



        rgba(255,49,89,0.11);



}











.station-status div {







    display:



        flex;







    flex-direction:



        column;







    gap:



        3px;



}











.station-status small {







    color:



        var(--red-bright);







    font-size:



        9px;







    font-weight:



        800;







    letter-spacing:



        1.5px;



}











.station-status strong {







    color:



        white;







    font-size:



        14px;







    font-weight:



        650;



}











.live-chip {







    padding:



        6px 10px;







    border:



        1px solid



        rgba(255,49,89,0.20);







    border-radius:



        999px;







    background:



        rgba(228,30,70,0.10);







    color:



        #ff6682;







    font-size:



        8px;







    font-weight:



        850;







    letter-spacing:



        1.4px;



}















/* ==========================================================



   MAIN PLAY CONTROL



========================================================== */







.main-player {







    position:



        relative;







    display:



        flex;







    align-items:



        center;







    gap:



        24px;







    padding:



        25px 0 16px;



}











.play-area {







    position:



        relative;







    flex:



        0 0 82px;



}











.play-button {







    position:



        relative;







    width:



        82px;







    height:



        82px;







    display:



        grid;







    place-items:



        center;







    border-radius:



        50%;







    background:



        linear-gradient(



            145deg,



            #f12a52,



            #b20b30



        );







    color:



        white;







    box-shadow:



        0 14px 35px



        rgba(219,16,57,0.34);







    transition:



        transform 0.2s ease,



        box-shadow 0.2s ease;



}











.play-button:hover {







    transform:



        scale(1.045);







    box-shadow:



        0 18px 44px



        rgba(219,16,57,0.47);



}











.play-button:active {







    transform:



        scale(0.97);



}











.play-ring {







    position:



        absolute;







    inset:



        -7px;







    border:



        1px solid



        rgba(255,49,89,0.18);







    border-radius:



        50%;







    animation:



        playerRing



        2.4s



        infinite;



}











@keyframes playerRing {







    0% {







        transform:



            scale(0.92);







        opacity:



            0.9;







    }







    70% {







        transform:



            scale(1.16);







        opacity:



            0;







    }







    100% {







        transform:



            scale(1.16);







        opacity:



            0;







    }







}











.play-button.is-playing .play-ring {







    animation:



        none;







    opacity:



        0;



}











.play-icon {







    position:



        relative;







    width:



        31px;







    height:



        31px;







    fill:



        currentColor;



}















/* ==========================================================



   PLAYER TEXT



========================================================== */







.player-text {







    min-width:



        0;







    display:



        flex;







    flex-direction:



        column;



}











.now-label {







    margin-bottom:



        5px;







    color:



        var(--red-bright);







    font-size:



        8px;







    font-weight:



        800;







    letter-spacing:



        1.7px;



}











.player-text strong {







    color:



        white;







    font-size:



        21px;







    font-weight:



        700;







    letter-spacing:



        -0.3px;



}











.player-text > span:last-child {







    margin-top:



        5px;







    color:



        var(--white-muted);







    font-size:



        11px;







    line-height:



        1.4;



}















/* ==========================================================



   VISUALIZER



========================================================== */







.visualizer-row {







    height:



        39px;







    display:



        flex;







    align-items:



        center;



}











.audio-bars {







    width:



        100%;







    height:



        34px;







    display:



        flex;







    align-items:



        center;







    justify-content:



        center;







    gap:



        5px;







    opacity:



        0.23;







    transition:



        opacity 0.3s ease;



}











.audio-bars span {







    width:



        3px;







    height:



        5px;







    border-radius:



        5px;







    background:



        linear-gradient(



            to top,



            var(--red),



            #ff5d79



        );



}











.audio-bars span:nth-child(2n) {



    height: 11px;



}











.audio-bars span:nth-child(3n) {



    height: 19px;



}











.audio-bars span:nth-child(4n) {



    height: 26px;



}











.audio-bars span:nth-child(5n) {



    height: 15px;



}











.audio-bars.playing {







    opacity:



        0.95;



}











.audio-bars.playing span {







    animation:



        soundWave



        0.72s



        ease-in-out



        infinite



        alternate;



}











.audio-bars.playing span:nth-child(2n) {



    animation-delay: 0.13s;



}











.audio-bars.playing span:nth-child(3n) {



    animation-delay: 0.25s;



}











.audio-bars.playing span:nth-child(4n) {



    animation-delay: 0.38s;



}











.audio-bars.playing span:nth-child(5n) {



    animation-delay: 0.50s;



}











@keyframes soundWave {







    from {



        height: 4px;



    }







    to {



        height: 30px;



    }







}















/* ==========================================================



   VOLUME



========================================================== */







.volume-row {







    display:



        grid;







    grid-template-columns:



        18px minmax(0,1fr) auto;







    align-items:



        center;







    gap:



        12px;







    margin-top:



        9px;







    padding-top:



        17px;







    border-top:



        1px solid



        rgba(255,255,255,0.075);



}











.volume-icon {







    width:



        17px;







    height:



        17px;







    fill:



        #a7b2c1;



}











.volume-row input {







    width:



        100%;







    cursor:



        pointer;







    accent-color:



        var(--red-bright);



}











.volume-label {







    color:



        #718096;







    font-size:



        7px;







    font-weight:



        800;







    letter-spacing:



        1.2px;



}















/* ==========================================================



   BELOW PLAYER



========================================================== */







.under-player {







    margin-top:



        19px;







    display:



        flex;







    align-items:



        center;







    justify-content:



        center;







    gap:



        30px;



}











.connection-note {







    display:



        flex;







    align-items:



        center;







    gap:



        8px;







    color:



        rgba(255,255,255,0.46);







    font-size:



        10px;



}











.connection-dot {







    width:



        6px;







    height:



        6px;







    border-radius:



        50%;







    background:



        #55d98a;







    box-shadow:



        0 0 8px



        rgba(85,217,138,0.5);



}











.more-button {







    display:



        inline-flex;







    align-items:



        center;







    gap:



        11px;







    padding:



        0;







    background:



        transparent;







    color:



        rgba(255,255,255,0.72);







    font-size:



        11px;







    font-weight:



        650;



}











.more-button > span {







    color:



        var(--red-bright);







    font-size:



        17px;



}















/* ==========================================================



   ABOUT NAVIGATION



========================================================== */







.about-nav {







    background:



        var(--navy-900);







    border-bottom:



        1px solid



        rgba(255,255,255,0.07);



}











.about-nav-inner {







    width:



        min(1120px, calc(100% - 48px));







    min-height:



        88px;







    margin:



        0 auto;







    display:



        flex;







    align-items:



        center;







    justify-content:



        space-between;







    gap:



        25px;



}











.about-nav img {







    width:



        150px;







    max-height:



        72px;







    object-fit:



        contain;



}











.back-radio {







    display:



        inline-flex;







    align-items:



        center;







    gap:



        9px;







    padding:



        10px 15px;







    border:



        1px solid



        rgba(255,255,255,0.12);







    border-radius:



        999px;







    background:



        transparent;







    color:



        white;







    font-size:



        11px;







    font-weight:



        700;



}











.mini-live-dot {







    width:



        7px;







    height:



        7px;







    border-radius:



        50%;







    background:



        var(--red-bright);



}















/* ==========================================================



   ABOUT HERO



========================================================== */







.about-hero {







    position:



        relative;







    min-height:



        510px;







    display:



        flex;







    align-items:



        center;







    overflow:



        hidden;







    isolation:



        isolate;



}











.about-hero-image {







    position:



        absolute;







    inset:



        0;







    z-index:



        -3;







    background:



        url("assets/images/radio-hero.jpg")



        center / cover



        no-repeat;



}











.about-hero-overlay {







    position:



        absolute;







    inset:



        0;







    z-index:



        -2;







    background:



        linear-gradient(



            90deg,



            rgba(4,14,31,0.98),



            rgba(5,22,47,0.88),



            rgba(5,18,39,0.58)



        );



}











.about-hero-inner {







    width:



        min(1120px, calc(100% - 48px));







    margin:



        0 auto;







    padding:



        80px 0;







    color:



        white;



}











.about-eyebrow,



.section-eyebrow {







    color:



        var(--red);







    font-size:



        9px;







    font-weight:



        850;







    letter-spacing:



        2.2px;



}











.about-hero h2 {







    max-width:



        680px;







    margin-top:



        15px;







    font-size:



        clamp(43px,5.5vw,68px);







    line-height:



        1;







    letter-spacing:



        -2.3px;



}











.about-hero h2 span {







    display:



        block;







    color:



        var(--red-bright);



}











.about-hero p {







    max-width:



        640px;







    margin-top:



        21px;







    color:



        #ccd5e1;







    font-size:



        16px;







    line-height:



        1.75;



}















/* ==========================================================



   ABOUT LIVE CONTROL



========================================================== */







.hero-radio-control {







    width:



        fit-content;







    min-width:



        155px;







    margin-top:



        28px;







    padding:



        13px 21px;







    display:



        inline-flex;







    align-items:



        center;







    justify-content:



        center;







    gap:



        11px;







    border-radius:



        999px;







    background:



        linear-gradient(



            135deg,



            var(--red-bright),



            var(--red-dark)



        );







    color:



        white;







    font-size:



        12px;







    font-weight:



        750;







    box-shadow:



        0 12px 30px



        rgba(210,15,54,0.27);







    transition:



        transform 0.2s ease,



        box-shadow 0.2s ease;



}











.hero-radio-control:hover {







    transform:



        translateY(-2px);







    box-shadow:



        0 16px 38px



        rgba(210,15,54,0.36);



}











.hero-radio-control.is-playing {







    background:



        linear-gradient(



            135deg,



            #182d4b,



            #0c1d37



        );







    border:



        1px solid



        rgba(255,255,255,0.18);



}











.small-control-icon {







    width:



        16px;







    height:



        16px;







    fill:



        currentColor;



}















/* ==========================================================



   BROADCASTS



========================================================== */







.broadcast-section {







    padding:



        90px 24px 100px;



}











.section-container {







    width:



        min(1040px,100%);







    margin:



        0 auto;



}











.section-heading {







    max-width:



        650px;







    margin:



        0 auto;







    text-align:



        center;



}











.section-heading h2 {







    margin-top:



        10px;







    color:



        var(--navy-900);







    font-size:



        clamp(31px,4vw,43px);







    letter-spacing:



        -1.3px;



}











.section-heading p {







    margin-top:



        13px;







    color:



        var(--text-soft);







    font-size:



        14px;







    line-height:



        1.7;



}











.broadcast-grid {







    margin-top:



        46px;







    display:



        grid;







    grid-template-columns:



        repeat(2,minmax(0,1fr));







    gap:



        22px;



}











.broadcast-card {







    position:



        relative;







    padding:



        28px;







    border:



        1px solid



        #e7eaf0;







    border-radius:



        20px;







    background:



        white;







    box-shadow:



        0 15px 45px



        rgba(18,37,65,0.06);







    overflow:



        hidden;



}











.broadcast-card::before {







    content:



        "";







    position:



        absolute;







    top:



        0;







    left:



        0;







    width:



        100%;







    height:



        3px;







    background:



        linear-gradient(



            90deg,



            var(--red),



            transparent



        );



}











.broadcast-top {







    display:



        flex;







    justify-content:



        space-between;







    align-items:



        flex-start;



}











.broadcast-day {







    display:



        flex;







    flex-direction:



        column;







    gap:



        3px;



}











.broadcast-day small {







    color:



        var(--red);







    font-size:



        9px;







    font-weight:



        850;







    letter-spacing:



        1.5px;



}











.broadcast-day strong {







    color:



        var(--navy-900);







    font-size:



        15px;



}











.broadcast-live {







    padding:



        5px 9px;







    border-radius:



        999px;







    background:



        rgba(228,30,70,0.08);







    color:



        var(--red);







    font-size:



        7px;







    font-weight:



        850;







    letter-spacing:



        1px;



}











.broadcast-content {







    margin-top:



        38px;



}











.program-type {







    color:



        #9aa4b2;







    font-size:



        8px;







    font-weight:



        800;







    letter-spacing:



        1.3px;



}











.broadcast-content h3 {







    margin-top:



        6px;







    color:



        var(--navy-900);







    font-size:



        27px;



}











.broadcast-content p {







    margin-top:



        12px;







    color:



        var(--text-soft);







    font-size:



        13px;







    line-height:



        1.7;



}















/* ==========================================================



   MINISTRY



========================================================== */







.ministry-section {







    position:



        relative;







    padding:



        100px 24px;







    background:



        linear-gradient(



            135deg,



            var(--navy-950),



            #0a2c56



        );







    overflow:



        hidden;



}











.ministry-glow {







    position:



        absolute;







    width:



        500px;







    height:



        500px;







    top:



        -300px;







    left:



        50%;







    transform:



        translateX(-50%);







    border-radius:



        50%;







    background:



        rgba(229,29,70,0.15);







    filter:



        blur(90px);



}











.ministry-inner {







    position:



        relative;







    width:



        min(780px,100%);







    margin:



        0 auto;







    text-align:



        center;







    color:



        white;



}











.section-eyebrow.light {



    color: #ff607d;



}











.ministry-inner h2 {







    margin-top:



        13px;







    font-size:



        clamp(34px,5vw,48px);







    line-height:



        1.08;



}











.ministry-inner h2 span {







    display:



        block;







    color:



        var(--red-bright);



}











.ministry-inner p {







    max-width:



        680px;







    margin:



        19px auto 0;







    color:



        #bac5d3;







    font-size:



        15px;







    line-height:



        1.8;



}















/* ==========================================================



   ABOUT BOTTOM



========================================================== */







.listen-section {







    padding:



        80px 24px;







    background:



        white;



}











.listen-inner {







    width:



        min(700px,100%);







    margin:



        0 auto;







    text-align:



        center;



}











.listen-inner h2 {







    margin-top:



        9px;







    color:



        var(--navy-900);







    font-size:



        clamp(30px,4vw,39px);



}











.listen-inner p {







    margin-top:



        9px;







    color:



        var(--text-soft);







    font-size:



        14px;



}











.listen-now-button {







    display:



        inline-flex;







    align-items:



        center;







    gap:



        11px;







    margin-top:



        25px;







    padding:



        13px 22px;







    border-radius:



        999px;







    background:



        linear-gradient(



            135deg,



            var(--red-bright),



            var(--red-dark)



        );







    color:



        white;







    font-size:



        12px;







    font-weight:



        750;







    box-shadow:



        0 12px 30px



        rgba(210,15,54,0.25);



}











.button-play {



    font-size: 10px;



}















/* ==========================================================



   TABLET



========================================================== */







@media (max-width: 900px) {







    .player-background {



        background-position:



            70% center;



    }











    .broadcast-grid {



        gap: 18px;



    }







}















/* ==========================================================



   MOBILE



========================================================== */







@media (max-width: 650px) {







    .player-view {



        min-height: 100svh;



    }











    .player-background {







        background-position:



            67% center;







        opacity:



            0.52;



    }











    .player-overlay {







        background:



            linear-gradient(



                180deg,



                rgba(3,11,25,0.76) 0%,



                rgba(3,11,25,0.91) 42%,



                rgba(3,11,25,0.99) 100%



            );



    }











    .player-header {







        width:



            calc(100% - 32px);







        min-height:



            78px;



    }











    .logo {



        width: 135px;



    }











    .header-about {



        display: none;



    }











    .radio-content {







        width:



            calc(100% - 32px);







        min-height:



            calc(100svh - 78px);







        padding:



            25px 0 35px;



    }











    .ministry-label {







        font-size:



            7px;







        letter-spacing:



            1.7px;



    }











    .title-block h1 {







        font-size:



            clamp(37px,11vw,49px);







        letter-spacing:



            -1.8px;



    }











    .player-card {







        margin-top:



            25px;







        padding:



            18px;







        border-radius:



            22px;



    }











    .station-status strong {



        font-size: 12px;



    }











    .station-status small {



        font-size: 8px;



    }











    .main-player {







        gap:



            18px;







        padding:



            22px 0 14px;



    }











    .play-area {







        flex-basis:



            70px;



    }











    .play-button {







        width:



            70px;







        height:



            70px;



    }











    .play-icon {







        width:



            27px;







        height:



            27px;



    }











    .player-text strong {







        font-size:



            18px;



    }











    .player-text > span:last-child {







        font-size:



            10px;



    }











    .audio-bars {



        gap: 4px;



    }











    .volume-label {



        display: none;



    }











    .volume-row {







        grid-template-columns:



            17px 1fr;



    }











    .under-player {







        flex-direction:



            column;







        gap:



            13px;



    }











    .more-button {







        order:



            1;







        padding:



            10px 15px;







        border:



            1px solid



            rgba(255,255,255,0.11);







        border-radius:



            999px;







        background:



            rgba(255,255,255,0.035);



    }











    .connection-note {



        order: 2;



    }











    /* ABOUT */







    .about-nav-inner {







        width:



            calc(100% - 32px);







        min-height:



            75px;



    }











    .about-nav img {



        width: 120px;



    }











    .back-radio {







        padding:



            9px 12px;







        font-size:



            10px;



    }











    .about-hero {







        min-height:



            500px;







        text-align:



            center;



    }











    .about-hero-image {







        background-position:



            67% center;



    }











    .about-hero-overlay {







        background:



            linear-gradient(



                rgba(4,14,31,0.78),



                rgba(4,14,31,0.97)



            );



    }











    .about-hero-inner {







        width:



            calc(100% - 36px);







        padding:



            70px 0;



    }











    .about-hero h2 {







        margin-left:



            auto;







        margin-right:



            auto;







        font-size:



            clamp(38px,11vw,52px);



    }











    .about-hero p {







        font-size:



            14px;



    }











    .hero-radio-control {







        margin-left:



            auto;







        margin-right:



            auto;



    }











    .broadcast-section {







        padding:



            65px 18px 70px;



    }











    .broadcast-grid {







        margin-top:



            34px;







        grid-template-columns:



            1fr;



    }











    .broadcast-card {



        padding: 23px;



    }











    .broadcast-content {



        margin-top: 30px;



    }











    .ministry-section {







        padding:



            75px 20px;



    }











    .listen-section {







        padding:



            65px 20px;



    }







}















/* ==========================================================



   VERY SMALL PHONES



========================================================== */







@media (max-width: 360px) {







    .player-header,



    .radio-content {







        width:



            calc(100% - 24px);



    }











    .logo {



        width: 120px;



    }











    .title-block h1 {



        font-size: 35px;



    }











    .player-card {







        padding:



            16px 14px;



    }











    .main-player {



        gap: 14px;



    }











    .play-area {



        flex-basis: 62px;



    }











    .play-button {







        width:



            62px;







        height:



            62px;



    }











    .player-text strong {



        font-size: 16px;



    }











    .station-status strong {







        max-width:



            165px;







        overflow:



            hidden;







        text-overflow:



            ellipsis;







        white-space:



            nowrap;



    }







}















/* ==========================================================



   ACCESSIBILITY



========================================================== */







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







    *,



    *::before,



    *::after {







        scroll-behavior:



            auto !important;







        animation-duration:



            0.01ms !important;







        animation-iteration-count:



            1 !important;







        transition-duration:



            0.01ms !important;



    }







}



/* ==========================================================

   FINAL PLAYER VIEWPORT FIT

   Keeps original component sizes; only reclaims vertical space.

========================================================== */

body:not(.showing-about) {

    height: 100vh;

    height: 100dvh;

    overflow: hidden;

}

.player-view {

    height: 100vh;

    height: 100dvh;

    min-height: 0;

    overflow: hidden;

}

.radio-content {

    min-height: 0;

    height: calc(100dvh - 100px);

    padding: 0 0 12px;

    transform: translateY(-28px);

}

@media (max-width: 650px) {

    body:not(.showing-about) { height: 100dvh; overflow: hidden; }

    .player-view { height: 100dvh; min-height: 0; overflow: hidden; }

    .radio-content {

        min-height: 0;

        height: calc(100dvh - 78px);

        padding: 0 0 8px;

        transform: translateY(-18px);

    }

}

@media (min-width: 651px) and (max-height: 800px) {

    .radio-content { transform: translateY(-22px); }

    .title-block { margin-top: 16px; }

    .player-card { margin-top: 22px; }

    .under-player { margin-top: 12px; }

}

@media (max-width: 650px) and (max-height: 720px) {

    .radio-content { transform: translateY(-14px); }

    .title-block { margin-top: 15px; }

    .player-card { margin-top: 17px; }

    .under-player { margin-top: 9px; gap: 8px; }

}



/* Text fallback brand used in this portable package. Replace with your imm-logo.png if preferred. */

.logo-text {

    display: inline-block;

    color: #ff3159;

    font-size: 42px;

    line-height: 1;

    font-weight: 900;

    font-style: italic;

    letter-spacing: -4px;

    text-shadow: 0 2px 0 #06142b;

}

.logo-text-small { font-size: 34px; }

@media (max-width:650px) { .logo-text { font-size:34px; } }

body[data-theme="slate"] .radio-player,body[data-theme="slate"] .about-card{background:linear-gradient(145deg,#171d27,#0e131b)!important}body[data-theme="light"]{background:#eef3f9!important;color:#172135}body[data-theme="light"] .radio-player,body[data-theme="light"] .about-card{background:linear-gradient(145deg,#fff,#f7f9fc)!important;border-color:#d3deea!important;box-shadow:0 24px 65px rgba(36,55,80,.16)!important;color:#172135}body[data-theme="light"] .radio-player h2,body[data-theme="light"] .radio-player h3,body[data-theme="light"] .about-card h2{color:#172135!important}body[data-theme="light"] .stream-status{color:#6b7a90!important}



/* ===== Premium header Install / Share action ===== */
.header-app-action{
  position:absolute;
  top:20px;
  right:28px;
  z-index:30;
  min-height:50px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 9px;
  border:1px solid rgba(130,166,216,.34);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(16,37,68,.96),rgba(5,18,38,.96));
  color:#f7fbff;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.header-app-action:hover{transform:translateY(-1px);border-color:rgba(114,189,255,.68);box-shadow:0 13px 32px rgba(0,0,0,.34),0 0 0 1px rgba(114,189,255,.08)}
.header-app-action:active{transform:scale(.96)}
.header-app-action:focus-visible{outline:3px solid rgba(114,189,255,.34);outline-offset:3px}
.header-app-icon{
  width:31px;height:31px;flex:0 0 31px;border-radius:10px;
  background-color:#eef7ff;
  -webkit-mask:url('/assets/icons/install-cloud.svg') center/23px 23px no-repeat;
  mask:url('/assets/icons/install-cloud.svg') center/23px 23px no-repeat;
  animation:immInstallBreathe 2.5s ease-in-out infinite;
}
.header-app-label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.header-app-label strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.header-app-label small{font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#9fb5d2}
.header-app-action.is-share{width:48px;min-width:48px;height:48px;min-height:48px;padding:0;justify-content:center;border-radius:14px}
.header-app-action.is-share .header-app-label{display:none}
.header-app-action.is-share .header-app-icon{
  width:24px;height:24px;flex-basis:24px;background-color:#eef7ff;
  -webkit-mask:url('/assets/icons/share.svg') center/22px 22px no-repeat;
  mask:url('/assets/icons/share.svg') center/22px 22px no-repeat;
  animation:none;
}
@keyframes immInstallBreathe{0%,100%{transform:translateY(0);opacity:.92}50%{transform:translateY(2px);opacity:1}}
@media(max-width:700px){
  .player-header{position:relative}
  .header-app-action{top:15px;right:16px;min-height:45px;padding:6px 11px 6px 8px;border-radius:14px;gap:8px}
  .header-app-icon{width:27px;height:27px;flex-basis:27px;-webkit-mask-size:21px 21px;mask-size:21px 21px}
  .header-app-label strong{font-size:10px}.header-app-label small{font-size:7px}
  .header-app-action.is-share{top:15px;right:16px;width:44px;min-width:44px;height:44px;min-height:44px}
}