* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; margin:0; padding:0; }

body {
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0066ff;
}

/* --------------------------------
   YOUR FULL CONTROL PANEL – change only here!
   -------------------------------- */
:root {
    /* Desktop – move text left/right and up/down */
    --desktop-offset-x: 95px;   /* positive = right, negative = left */
    --desktop-offset-y: -10px;    /* positive = down,  negative = up   */

    /* Mobile portrait – separate control */
    --mobile-offset-x: 35.5px;   /* ? change this to move left/right on phone */
    --mobile-offset-y: 5px;   /* ? change this to move up/down on phone */

    /* Text sizes & spacing (you already love these) */
    --company-size: 2rem;
    --company-margin: 10px;
    --line-size: 1.1rem;
    --line-margin: 5px;
    --line-height: 1.25;

    --mobile-company: 1.1rem;
    --mobile-line: 0.69rem;
    --mobile-margin: 1px;
}
/* -------------------------------- */

.top-banner {
    width: 100%; max-width: 980px; height: 85px;
    margin: 0 auto; display: block; object-fit: cover;
}

main {
    flex: 1;
    padding: 60px 20px;
    text-align: center;
    color: white;
}

footer { 
    width:100%; 
    height:250px; 
    flex-shrink:0; 
    overflow:hidden; 
}

.footer-wrapper {
    position: relative;
    width: 980px; 
    max-width: 100%; 
    height: 250px;
    margin: 0 auto;
}

.footer-bg {
    position: absolute;
    inset: 0;
    background: url('/images/footer.jpg') center center no-repeat;
    background-size: contain;
}

.footer-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
    width: 90%;
    padding: 0 20px;
    z-index: 2;

    /* Desktop positioning – uses your variables */
    margin-left: var(--desktop-offset-x);
    margin-top:  var(--desktop-offset-y);
}

.footer-content h2 {
    font-size: var(--company-size);
    margin-bottom: var(--company-margin);
}

.footer-content p {
    font-size: var(--line-size);
    margin: var(--line-margin) 0;
    line-height: var(--line-height);
}

/* Mobile & tablet */
@media (max-width: 980px) {
    .top-banner { max-width:none; width:100vw; height:auto; }
    footer { height: calc(250 / 980 * 100vw); }
    .footer-wrapper { width:100vw; height:100%; margin:0; }
    .footer-bg { background-size:100% 100%; }
}

/* Mobile portrait – tighter text + your custom X/Y offset */
@media (orientation: portrait) and (max-width: 600px) {
    .footer-content {
        /* Override desktop offset with mobile values */
        margin-left: var(--mobile-offset-x) !important;
        margin-top:  var(--mobile-offset-y) !important;
    }

    .footer-content h2 {
        font-size: var(--mobile-company);
        margin-bottom: var(--mobile-margin);
    }
    .footer-content p {
        font-size: var(--mobile-line);
        margin: var(--mobile-margin) 0;
        line-height: 1.2;
    }
}