.folded-horizon {
    --accent: #00E5FF;
    --muted: #0099D6;
    --bg-dark: #041D2E;
    --text: #D9F7FF;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    position: relative;
    padding: 64px 24px;
    color: var(--text);
    overflow: hidden;
    background: radial-gradient(circle at 20% 30%, #041D2E, #041D2E 90%);
}



.fh-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.fh-head {
    text-align: center;
    margin-bottom: 40px;
}

    .fh-head h2 {
        color: var(--accent);
        font-size: 2.2rem;
        text-shadow: 0 0 10px rgba(0,229,255,0.5);
    }

.fh-lead {
    color: var(--text);
    opacity: 0.85;
    font-size: 1.05rem;
}

/* Two-column layout */
.fh-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    perspective: 1200px;
}

/* Left info panel */
.fh-panel-left {
    position: relative;
    background: rgba(0,229,255,0.03);
    border: 1px solid rgba(0,229,255,0.1);
    padding: 32px;
    color: var(--text);
    box-shadow: inset 0 0 12px rgba(0,229,255,0.1), 0 0 20px rgba(0,229,255,0.15);
    transform: rotateY(-8deg);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    transition: all 0.4s cubic-bezier(.2,.9,.2,1);
}

    .fh-panel-left:hover {
        transform: rotateY(-3deg) translateZ(20px);
        box-shadow: inset 0 0 16px rgba(0,229,255,0.2), 0 0 30px rgba(0,229,255,0.25);
    }

    .fh-panel-left::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid rgba(0,229,255,0.2);
        border-radius: 4px;
        pointer-events: none;
        animation: pulseOutline 4s ease-in-out infinite;
    }

.panel-content h3 {
    color: var(--accent);
    font-size: 1rem;
    margin-top: 12px;
}

.tx-ws {
 
    color: var(--accent);
}
.contact-phone{
    text-decoration:none;
}
.panel-content p {
    color: var(--text);
    opacity: 0.85;
    font-size: 1rem;
    line-height: 1.5;
}

/* Decorative Fold */
.panel-fold {
    position: absolute;
    top: 0;
    right: -40px;
    width: 100px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,229,255,0.15), rgba(0,153,214,0.05));
    transform: skewX(-18deg);
    filter: blur(1.2px) drop-shadow(0 0 10px rgba(0,229,255,0.4));
}

/* Right form panel */
.fh-panel-right {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.fold-right {
    left: -40px;
    right: auto;
    transform: skewX(18deg);
    background: linear-gradient(180deg, rgba(0,229,255,0.15), rgba(0,153,214,0.05));
    filter: blur(1px) drop-shadow(0 0 8px rgba(0,229,255,0.3));
}


.rs-form {
    width: 100%;
    max-width: 600px;
    padding: 28px;
    border-radius: 14px;
    background: rgba(0,229,255,0.05);
    border: 1px solid rgba(0,153,214,0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0,229,255,0.15), 0 20px 60px rgba(0,229,255,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .rs-form:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 30px rgba(0,229,255,0.25), 0 40px 100px rgba(0,229,255,0.12);
    }

/* Input fields row container */
.rs-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Field container (label) */
.rs-field {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(50% - 7px);
}

    .rs-field.textarea {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Input and textarea elements */
    .rs-field input,
    .rs-field textarea {
        width: 100%;
        /* Added box-sizing to ensure padding/border don't affect width calculation */
        box-sizing: border-box;
        background: rgba(4,29,46,0.3);
        color: var(--text);
        border: 1px solid rgba(0,229,255,0.1);
        border-radius: 10px;
        padding: 12px;
        font-size:15px;
        outline: none;
        transition: 0.2s ease;
        resize: none;
    }

        .rs-field input:focus,
        .rs-field textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 10px rgba(0,229,255,0.25);
        }


        .rs-field input + span,
        .rs-field textarea + span {
            position: absolute;
            left: 12px;
            top: 12px;
            color: #fff;
            font-size:14px;
            pointer-events: none;
            transition: all 0.2s ease;
            background: transparent;
        }

        /* Float label on focus or filled */
        .rs-field input:focus + span,
        .rs-field input:not(:placeholder-shown) + span,
        .rs-field textarea:focus + span,
        .rs-field textarea:not(:placeholder-shown) + span {
            top: -8px;
            font-size: 11px;
            color: var(--accent);
            background: rgba(4,29,46,0.9);
            padding: 0 6px;
            border-radius: 6px;
        }


/* Buttons */
.actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center; /* centers left/right */
    align-items: center; /* centers top/bottom */
}








@media (max-width: 920px) {

    .fh-stage {
        grid-template-columns: 1fr;
        gap: 20px;
  
    }

    .fh-panel-left {
        transform: none;
        clip-path: none;
        text-align: center;
        min-height: 400px;
    }

    /* FORM FIRST on mobile */
    .fh-panel-right {
        order: 1;
    }

    /* TEXT SECOND on mobile */
    .fh-panel-left {
        order: 2;
        transform: none;
        clip-path: none;
        text-align: center;
        min-height: 400px;
    }
    .panel-fold, .fold-right {
        display: none;
    }
/*    .rs-form h3::after {
        content: " • Serving Tampa & surrounding areas";
        display: block;
        font-size: 0.85rem;
        opacity: 0.75;
        margin-top: 4px;
    }*/
}

@media (max-width: 600px) {
    /* Updated for rs-row */
    .rs-row {
        flex-direction: column;
        gap: 12px;
    }

  

    /* Updated for rs-field and rs-field.textarea */
    .rs-field,
    .rs-field.textarea {
        width: 100%;
    }

    .rs-form {
        padding: 18px;
    }

    .actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .fh-head h2 {
        font-size: clamp(1.2rem, 6vw, 3.6rem) !important;
    }

    .fh-head p, .panel-content p {
        font-size: clamp(0.95rem, 5vw, 3.6rem);
    }
    .C-Form h3 {
        font-size: clamp(1rem, 5,5vw, 3.6rem ) !important;
    }
    .panel-content h3 {
        font-size: clamp(1rem, 6vw, 3.6rem ) !important;
    }
 
}
@media (max-width:350px) {
    .fh-panel-left {
        min-height: 500px;
    }
}
@media (min-width:900px) {
    /* Floating particles */
    .folded-horizon::before, .folded-horizon::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle 1px at 20% 40%, rgba(0,229,255,0.5) 0%, transparent 80%), radial-gradient(circle 1.5px at 80% 60%, rgba(0,229,255,0.5) 0%, transparent 80%), radial-gradient(circle 1px at 50% 80%, rgba(0,229,255,0.4) 0%, transparent 80%);
        animation: floatParticles 20s linear infinite;
        opacity: 0.4;
        pointer-events: none;
    }

    .folded-horizon::after {
        animation-delay: -10s;
        opacity: 0.3;
    }

    /* Depth layers */
    .fh-bg-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .fh-bg-mid {
        background: radial-gradient(800px 400px at 25% 40%, rgba(0,229,255,0.08), transparent), radial-gradient(400px 200px at 80% 70%, rgba(0,153,214,0.05), transparent);
        animation: floatMid 18s ease-in-out infinite alternate;
        mix-blend-mode: screen;
        filter: drop-shadow(0 0 12px rgba(0,229,255,0.25));
    }
    /* Animations */
    @keyframes floatMid {
        0%,100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes floatParticles {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-100px);
        }
    }

    @keyframes pulseOutline {
        0%,100% {
            opacity: 0.3;
            box-shadow: 0 0 8px rgba(0,229,255,0.3);
        }

        50% {
            opacity: 0.7;
            box-shadow: 0 0 20px rgba(0,229,255,0.6);
        }
    }
}
@media(prefers-reduced-motion:reduce) {
    .fh-panel-left::before, .folded-horizon::before, .folded-horizon::after, .fh-bg-mid, .rs-error-message {
        animation: none !important
    }

    .rs-error-message {
        transform: none !important
    }

    .fh-panel-left, .rs-form {
        transition: none !important;
        transform: none !important
    }

        .fh-panel-left:hover, .rs-form:hover {
            transform: none !important;
            box-shadow: none !important
        }
}