:root {
    --accent: #ffb000;
    --accent-start: #ffd45c;
    --accent-end: #e07800;
    --accent-rgb: 255,176,0;
}

.content.subpage {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4vh 5vh 5vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #000;
    background-image:
        linear-gradient(160deg, rgba(0,0,0,0.86) 0%, rgba(30,14,0,0.84) 55%, rgba(0,0,0,0.88) 100%),
        url("/Itx-TropicalSunset-logo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: #e6e6e6;
}
.content.subpage::-webkit-scrollbar { display:none; }

.subpage-inner {
    width: min(100%, 100vh);
    margin: 0 auto;
    font-family: 'Oswald', sans-serif;
    font-size: 1.9vh;
    line-height: 1.6;
    color: #e6e6e6;
}

.contact-intro h2 {
    font-size: 4vh;
    color: var(--accent);
    border-bottom: 0.35vh solid var(--accent);
    padding-bottom: .6vh;
    margin: 0;
}

.contact-intro p {
    margin: 1.5vh 0 2.8vh;
    color: #bdbdbd;
    font-size: 1.75vh;
}

.itx-form.contact-form {
    display: grid;
    gap: 1.8vh;
    margin-top: 0;
    padding: 2.5vh;
    border: .15vh solid #292929;
    border-radius: 1.2vh;
    background: linear-gradient(180deg, rgba(8,8,8,0.82) 0%, rgba(5,5,5,0.78) 100%);
    -webkit-backdrop-filter: blur(0.6vh);
    backdrop-filter: blur(0.6vh);
    box-shadow: 0 1.5vh 4vh rgba(0,0,0,.35);
}

.itx-form .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6vh;
}

.itx-form .field { min-width: 0; }

.itx-form label {
    display: block;
    font-size: 1.55vh;
    color: var(--accent);
    margin-bottom: .65vh;
    font-weight: 600;
}

.itx-form input,
.itx-form select,
.itx-form textarea {
    box-sizing: border-box;
    width: 100%;
    background: #0d0d0d;
    color: #fff;
    border: .16vh solid #303030;
    border-radius: .75vh;
    padding: 1.25vh 1.35vh;
    font-family: 'Oswald', sans-serif;
    font-size: 1.8vh;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.itx-form input::placeholder,
.itx-form textarea::placeholder { color: #6e6e6e; }

.itx-form input:focus,
.itx-form select:focus,
.itx-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #111;
    box-shadow: 0 0 0 .2vh rgba(var(--accent-rgb), .12), 0 0 1.4vh rgba(var(--accent-rgb), .18);
}

.itx-form textarea {
    min-height: 19vh;
    resize: vertical;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.label-row span {
    color: #666;
    font-size: 1.35vh;
}

.itx-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.itx-form button.contact-submit {
    justify-self: start;
    min-width: 18vh;
    background: var(--accent);
    color: #000;
    border: 0;
    border-radius: .75vh;
    padding: 1.25vh 3vh;
    font: 700 2vh 'Oswald', sans-serif;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.itx-form button.contact-submit:hover { filter: brightness(1.08); transform: translateY(-.1vh); }
.itx-form button.contact-submit:disabled { opacity: .55; cursor: wait; transform: none; }

.form-msg {
    display: none;
    padding: 1.35vh 1.5vh;
    border-radius: .75vh;
    font-size: 1.7vh;
    border: .12vh solid transparent;
}
.form-msg.show { display: block; }
.form-msg.ok {
    background: rgba(80,190,100,.10);
    border-color: rgba(80,190,100,.25);
    color: #8dffab;
}
.form-msg.err {
    background: rgba(255,80,80,.08);
    border-color: rgba(255,80,80,.22);
    color: #ff9a9a;
}

.form-note {
    margin: -.5vh 0 0;
    color: #676767;
    font-size: 1.35vh;
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .content.subpage { padding: 4% 4% 7%; }
    .subpage-inner { font-size: min(4vw, 18px); width: 100%; }
    .contact-intro h2 { font-size: min(7.5vw, 34px); }
    .contact-intro p { font-size: min(3.6vw, 16px); }
    .itx-form.contact-form { padding: 5%; }
    .itx-form .row2 { grid-template-columns: 1fr; }
    .itx-form label { font-size: min(3.5vw, 15px); }
    .itx-form input, .itx-form select, .itx-form textarea { font-size: min(4vw, 17px); }
    .itx-form button.contact-submit { font-size: min(4.5vw, 19px); padding: min(2.8vw, 13px) min(7vw, 32px); }
    .form-msg { font-size: min(3.7vw, 16px); }
    .form-note { font-size: min(3.2vw, 14px); }
}

/* subtle fixed backdrop on desktop only (phones keep "scroll" - fixed is heavy/unreliable there) */
@media (min-width: 769px) and (min-height: 501px) {
    .content.subpage { background-attachment: fixed; }
}