/* Keep text readable beside the artwork at tablet and phone widths. */
@media (min-width: 768px) and (max-width: 1100px) {
    .hero-copy { max-width: 58%; }
    .address-card { flex-wrap: wrap; gap: 8px; }
    .hero-actions .button { padding: 13px 16px; font-size: 13px; }
    .about { gap: 22px; }
    .faq-layout { gap: 24px; }
}

@media (max-width: 767px) {
    .header-button { padding: 10px 12px; font-size: 12px; }
    /* Reserve space below the copy so faces stay clear of buttons at every text height. */
    .hero { background-image: url("../images/hero-mobile.webp"); background-position: center bottom; background-size: auto 700px; }
    .hero-inner { min-height: 0; align-items: flex-start; padding-top: 30px; padding-bottom: 460px; }
    .hero-copy { width: 100%; }
    .hero-eyebrow { font-size: 25px; }
    .hero h1 { margin-bottom: 14px; font-size: 40px; }
    .hero-description { max-width: 430px; font-size: 15px; }
    /* A full-width main action sits above two equal secondary actions. */
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 390px; gap: 10px; margin-top: 18px; }
    .hero-actions .button { min-width: 0; min-height: 48px; padding: 12px 14px; }
    .hero-actions .button:first-child { grid-column: 1 / -1; min-height: 50px; font-size: 15px; }
    .address-card { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 390px; margin-top: 20px; padding: 14px 16px; gap: 10px; }
    .domain { font-size: 23px; }
    .address-hint { font-size: 12px; }
    .address-hint br { display: none; }
    .content-inner { padding-block: 50px 40px; }
    .about, .faq-layout { grid-template-columns: 1fr; }
    .about { gap: 24px; }
    .about-image { max-width: 400px; margin-inline: auto; }
    .section-block + .section-block { margin-top: 30px; padding-top: 28px; }
    .eyebrow { font-size: 15px; }
    .info-card { padding: 16px; gap: 12px; }
    .info-card p { font-size: 14px; }
    .faq-section { padding-block: 40px; }
    .faq-image { max-width: 540px; margin-inline: auto; }
    .faq-content summary { font-size: 16px; }
    .footer-links { gap: 12px 18px; font-size: 13px; }
    .back-to-top { right: 12px; bottom: 12px; }
}