/* ==========================================================
   EDM Landing Page — /get-in-touch/
   Palm trees + beach + form layout.
   Mirrors the approach used in cyber-resilience-check.css.
   ========================================================== */

/* Mirrors .cyber-resilience-main-container exactly — plain block, no flex */
.tbg-edm-main-container {
    background: linear-gradient(0deg, #fed384 0%, #5ac3b9 39%);
    min-height: 100vh;
    position: relative;
    padding: 2rem 0 0;
}

/*
 * min-height: 80vh mirrors the #cyber-resilience-root rule on the security-checks page
 * (min-height:80vh set inline). This pushes the trees block below the fold so they
 * appear as you scroll — the same "transition" effect.
 */
.tbg-edm-content-wrap {
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
    padding: 30px 20px 40px;
    box-sizing: border-box;
    min-height: 80vh;
    position: relative;
    z-index: 2;
}

/* 2-column field grids */
.tbg-edm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Trees — sticky, anchored bottom-right, fades in via JS scroll listener */
#tbg-edm-trees-fixed {
    position: sticky;
    right: 0;
    margin-left: auto;
    bottom: -265px;
    width: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

#tbg-edm-trees-fixed img {
    width: 100%;
    height: auto;
    display: block;
}

/* Beach — above trees via z-index, overlaps trees base */
.tbg-edm-beach-section {
    position: relative;
    z-index: 2;
}

.tbg-edm-beach-section span.span-bottom {
    padding: 0 !important;
    display: block;
    margin-bottom: -10px;
}

.tbg-edm-beach-section img.wp-image-472 {
    margin-top: -150px;
    width: 100%;
    position: relative;
    z-index: 9999999;
    display: block;
}

@media (max-width: 650px) {
    .tbg-edm-grid { grid-template-columns: 1fr; }
    .tbg-edm-content-wrap { padding: 20px 16px 30px; }
}