/* Palette taken from sustainablehosting.com. All text/background pairs meet WCAG AA. */
:root {
    --base: #0a1418;
    --surface: #10212a;
    --border: #1f3a43;
    --text: #eef7f5;
    --muted: #a3bcc0;
    --primary: #2dd4bf;
    --secondary: #8fe3b0;
    --on-primary: #04211d;
    --error: #ffb4a8;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
    margin: 0;
    background: var(--base);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--primary); }
a:hover { color: var(--secondary); }
:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--primary); color: var(--on-primary);
    padding: .75rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

.site-header { border-bottom: 1px solid var(--border); padding: 1.25rem 0 1.5rem; }
.host-logo { display: inline-block; }
.host-logo img { display: block; width: 11.5rem; max-width: 60%; height: auto; }
.site-title {
    margin: 1rem 0 0;
    font-size: clamp(2.2rem, 8vw, 3.75rem);
    font-weight: 800; line-height: 1.1;
    color: var(--primary);
}

main { padding-top: 2rem; padding-bottom: 3rem; }
h1, h2 { line-height: 1.25; color: var(--secondary); }
h1 { font-size: 1.6rem; margin-top: 0; }
h2 { font-size: 1.35rem; margin-top: 2.5rem; }

form { background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; padding: 1.25rem; }
.field { margin-bottom: 1.25rem; }
label, legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.hint { color: var(--muted); font-size: .95rem; margin: 0 0 .4rem; }
input[type=text], input[type=email], input[type=tel], textarea {
    width: 100%; font: inherit; color: var(--text);
    background: var(--base); border: 2px solid var(--border);
    border-radius: .35rem; padding: .6rem .75rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, textarea:focus { border-color: var(--primary); outline: 3px solid var(--secondary); outline-offset: 2px; }
fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.choice { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.choice input { width: 1.4rem; height: 1.4rem; accent-color: var(--primary); flex: none; }
.choice label { margin: 0; font-weight: 400; }
[aria-invalid=true] { border-color: var(--error); }
.error-text { color: var(--error); margin: .3rem 0 0; font-weight: 600; }

.notice { border: 2px solid var(--primary); border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice.error { border-color: var(--error); }
.notice h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.notice ul { margin: 0; padding-left: 1.25rem; }
.notice.error a { color: var(--error); }

button {
    font: inherit; font-weight: 700; cursor: pointer;
    background: var(--primary); color: var(--on-primary);
    border: 0; border-radius: .35rem; padding: .75rem 1.5rem;
}
button:hover { background: var(--secondary); }

/* Honeypot: hidden from sight and from assistive tech */
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.site-footer { border-top: 1px solid var(--border); padding: 1.25rem 0; font-size: .9rem; color: var(--muted); }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }