/* Shared responsive refinements, loaded after each page's existing styles. */
html { scroll-padding-top: 6rem; }
body { overflow-wrap: break-word; }
.container { width: 100%; max-width: 1280px; }
.grid > *, .flex > * { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
h1, h2 { text-wrap: balance; }
.btn { max-width: 100%; min-height: 48px; text-align: center; line-height: 1.45; }
.btn svg, summary svg, .flex.items-start > :first-child { flex-shrink: 0; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #65a30d; outline-offset: 4px; }
input:not([type="checkbox"]):not([type="hidden"]), select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
input:not([type="checkbox"]):not([type="hidden"]), select { min-height: 48px; }
textarea { min-height: 150px; resize: vertical; }
input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; }
summary { min-height: 56px; gap: 1rem; }
#menu-toggle { width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; }
#mobile-menu { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
#mobile-menu a { min-height: 48px; display: flex; align-items: center; padding-inline: 12px; border-radius: 8px; }
#mobile-menu a:hover, #mobile-menu a:focus-visible { background: #f0fdf4; }
nav > .container { min-height: 76px; padding-block: 12px; }
footer a { display: inline-block; padding-block: 6px; }
/* A full navigation bar needs more room than a portrait tablet offers. */
@media (max-width: 1023px) {
    nav > .container > div.hidden { display: none; }
    #menu-toggle { display: inline-flex; }
    #mobile-menu:not(.hidden) { display: block; }
    footer .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
    .grid.md\:grid-cols-3:not(.lg\:grid-cols-3) { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) { #menu-toggle, #mobile-menu { display: none; } }
@media (max-width: 767px) {
    .container { padding-inline: 20px; }
    nav > .container { padding-inline: 16px; }
    section.py-24, section.py-16 { padding-block: 56px; }
    section.py-20 { padding-block: 56px; }
    section.hero-gradient.py-32 { padding-top: 64px; padding-bottom: 112px; }
    h1.text-4xl { font-size: clamp(1.875rem, 7.6vw, 2.5rem); line-height: 1.15; }
    h2.text-3xl { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.2; }
    .text-lg { font-size: 1rem; line-height: 1.65; }
    .gap-16 { gap: 2rem; }
    .mb-20 { margin-bottom: 2.5rem; }
    .mt-20 { margin-top: 2.5rem; }
    .p-12, .p-10, .p-8 { padding: 24px; }
    .img-frame.h-\[450px\] { height: clamp(240px,70vw,360px); }
    .hero-gradient .flex.flex-col.gap-4 { width: 100%; max-width: 360px; }
    .btn { padding-inline: 20px; }
    form button[type="submit"] { width: 100%; white-space: normal; min-height: 48px; }
    footer .grid { grid-template-columns: 1fr; }
}
/* Keep content readable even when scroll animations are disabled or JS fails. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (hover: none) { .card:hover, .card-premium:hover, .btn:hover, .img-frame:hover img { transform: none; } }
