*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#eee9df}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#4d542e}
.page{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}
.hero{position:relative;width:100%;max-width:1536px;line-height:0;overflow:hidden}
.hero-image{display:block;width:100%;height:auto}
.notify-form{position:absolute;left:11.05%;top:56.65%;width:34.7%;height:55px;display:flex;gap:0;line-height:normal}
.email-field{height:55px;flex:1;display:flex;align-items:center;background:rgba(255,255,255,.96);border-radius:4px 0 0 4px;box-shadow:0 3px 10px rgba(52,44,28,.08)}
.mail-icon{margin:0 14px 0 17px;font-size:23px;color:#56622d;line-height:1}
.email-field input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#4c4c4c;font-size:17px;padding:0 12px 0 0}
.email-field input::placeholder{color:#a2a2a2}
.notify-form button{width:35%;min-width:150px;border:0;border-radius:0 4px 4px 0;background:#56622d;color:#fff;letter-spacing:3px;font-size:15px;font-weight:500;cursor:pointer;transition:.2s}
.notify-form button:hover{background:#475324}
.notify-form button:focus-visible,.email-field input:focus-visible{outline:2px solid #8b9560;outline-offset:-2px}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.notice{position:absolute;left:11.05%;top:63.1%;max-width:34.7%;padding:9px 14px;border-radius:4px;font-size:14px;line-height:1.3;background:rgba(255,255,255,.94);box-shadow:0 4px 15px rgba(0,0,0,.08)}
.notice.success{color:#56622d}
.notice.error{color:#9a3f35}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:900px){
    .page{align-items:flex-start;background:#f2ede5}
    .hero{width:100%;max-width:none}
    .notify-form{left:10.5%;top:56.7%;width:79%;height:47px}
    .email-field{height:47px}
    .mail-icon{font-size:19px;margin-left:12px;margin-right:10px}
    .email-field input{font-size:14px}
    .notify-form button{height:47px;min-width:105px;width:32%;font-size:11px;letter-spacing:2px}
    .notice{left:10.5%;top:63%;max-width:79%;font-size:12px}
}
@media (max-width:520px){
    /* The artwork is kept intact; the functional form is scaled with it. */
    .notify-form{height:34px}
    .email-field{height:34px}
    .notify-form button{height:34px;min-width:75px;font-size:8px;letter-spacing:1px}
    .email-field input{font-size:10px}
    .mail-icon{font-size:13px;margin-left:7px;margin-right:5px}
    .notice{font-size:9px;padding:5px 8px}
}

/* ANIMO mobile composition — fixed overlay using CSS Grid.
   The background image and text share exactly the same 9:16 box. */
.mobile-copy{display:none}

@media (max-width:700px){
    .hero{
        position:relative;
        width:100%;
        max-width:none;
        margin:0 auto;
        overflow:hidden;
        background:#f1e9dd;
        display:grid;
    }
    .hero picture,
    .hero .mobile-copy{
        grid-area:1 / 1;
    }
    .hero picture{
        display:block;
        line-height:0;
        width:100%;
        height:auto;
        z-index:1;
    }
    .hero-image{
        display:block;
        width:100%;
        height:auto;
    }

    .mobile-copy{
        display:block;
        position:relative;
        inset:auto;
        width:100%;
        height:100%;
        z-index:2;
        pointer-events:none;
        color:#4f5731;
        font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    }

    .mobile-logo{
        position:absolute;
        top:7%;
        left:0;
        width:100%;
        text-align:center;
        font-size:42px;
        line-height:1;
        letter-spacing:9px;
        font-weight:300;
        color:#111;
    }
    .mobile-logo .paw{
        position:absolute;
        font-size:9px;
        letter-spacing:0;
        top:-5px;
        margin-left:-24px;
        color:#111;
    }

    .mobile-copy h1{
        position:absolute;
        top:13.8%;
        left:0;
        width:100%;
        margin:0;
        text-align:center;
        font-size:37px;
        line-height:.95;
        letter-spacing:1px;
        font-weight:300;
        color:#56622d;
    }

    .mobile-copy p{
        position:absolute;
        top:26.3%;
        left:6%;
        width:88%;
        margin:0;
        text-align:center;
        font-size:12.5px;
        line-height:1.45;
        color:#55564d;
    }

    .mobile-benefits{
        position:absolute;
        top:40.5%;
        left:6%;
        width:88%;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:0;
        text-align:center;
    }
    .mobile-benefits>div{
        min-width:0;
        border-right:1px solid rgba(80,82,58,.28);
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:0 3px;
    }
    .mobile-benefits>div:last-child{border-right:0}
    .mobile-benefits span{
        font-size:25px;
        line-height:1;
        height:28px;
        color:#56622d;
        font-weight:300;
    }
    .mobile-benefits b,.mobile-benefits small{
        font-size:7.5px;
        letter-spacing:1px;
        line-height:1.35;
        font-weight:500;
        color:#59604a;
    }
    .mobile-benefits small{font-weight:400}

    .mobile-slogan{
        position:absolute;
        top:47%;
        left:0;
        width:100%;
        text-align:center;
        font-family:cursive;
        font-size:23px;
        line-height:1.05;
        color:#56622d;
        transform:rotate(-4deg);
    }

    /* Existing working PHP form — only its mobile position/size is adjusted. */
    .notify-form{
        position:absolute;
        z-index:5;
        left:8%;
        top:32.9%;
        width:84%;
        height:45px;
    }
    .email-field{
        height:45px;
        background:rgba(255,255,255,.98);
        border-radius:5px 0 0 5px;
    }
    .mail-icon{
        font-size:14px;
        margin-left:9px;
        margin-right:6px;
        color:#56622d;
    }
    .email-field input{
        font-size:11.5px;
        background:#fff;
    }
    .notify-form button{
        height:45px;
        min-width:0;
        width:31%;
        font-size:8.5px;
        letter-spacing:1.5px;
        border-radius:0 5px 5px 0;
    }
    .notice{
        position:absolute;
        z-index:6;
        left:8%;
        top:36%;
        max-width:84%;
        font-size:9px;
        padding:5px 8px;
    }
}

@media (max-width:380px){
    .mobile-logo{font-size:35px;letter-spacing:7px}
    .mobile-copy h1{font-size:32px}
    .mobile-copy p{font-size:11px}
    .mobile-benefits b,.mobile-benefits small{font-size:6.5px}
    .mobile-slogan{font-size:20px}
    .notify-form{top:32.5%;height:41px}
    .email-field{height:41px}
    .notify-form button{height:41px;font-size:8px}
}

/* FINAL MOBILE VISUAL POLISH
   Exact approved ANIMO wordmark + stronger text contrast. */
@media (max-width:700px){
    .mobile-logo{
        top:6.4%;
        left:0;
        width:100%;
        height:auto;
        text-align:center;
    }
    .mobile-logo img{
        display:block;
        width:48%;
        max-width:390px;
        height:auto;
        margin:0 auto;
    }

    .mobile-copy h1{
        color:#4f5b2d;
        text-shadow:0 1px 8px rgba(245,238,225,.72);
    }
    .mobile-copy p{
        color:#30352b;
        text-shadow:0 1px 7px rgba(245,238,225,.82);
        font-weight:450;
    }

    .mobile-benefits{
        top:40.1%;
        padding:7px 4px 8px;
        background:rgba(245,238,225,.74);
        border-radius:8px;
        box-sizing:border-box;
        backdrop-filter:blur(2px);
    }
    .mobile-benefits>div{
        border-right-color:rgba(80,82,58,.34);
    }
    .mobile-benefits span,
    .mobile-benefits b,
    .mobile-benefits small{
        color:#4f5b2d;
        text-shadow:0 1px 4px rgba(245,238,225,.65);
    }

    .mobile-slogan{
        top:47.0%;
        color:#4f5b2d;
        text-shadow:0 1px 8px rgba(245,238,225,.85);
        background:rgba(245,238,225,.34);
        padding:3px 0 5px;
    }
}

@media (max-width:380px){
    .mobile-logo img{width:50%}
}