/* Homepage only. Keep every rule inside the mobile breakpoint. */
@media (max-width: 760px) {
    :root {
        --mobile-header: 64px;
        --mobile-body: 14px;
        --mobile-title: clamp(28px, 7.5vw, 34px);
    }

    html { scroll-padding-top: calc(var(--mobile-header) + 16px); }
    body { font-size: var(--mobile-body); }

    /* Compact service cards: no forced height or automatic blank spacer. */
    .service-grid { gap: 12px; border: 0; }
    .service-card {
        min-height: 0;
        padding: 20px;
        border: 1px solid var(--line);
    }
    .card-top { font-size: 10px; line-height: 1.5; letter-spacing: 1.2px; }
    .service-card h3 { margin-top: 14px; font-size: 22px; line-height: 1.3; }
    .service-card p { margin-top: 10px; font-size: var(--mobile-body); line-height: 1.7; }
    .service-card ul { margin-top: 16px; padding-top: 0; padding-right: 24px; gap: 6px; }
    .service-card li { padding: 4px 7px; font-size: 11px; line-height: 1.5; }
    .service-card::after { right: 18px; bottom: 22px; color: currentColor; transform: none; }

    /* Keep the whole product visible, with less height given to the image. */
    .project-grid { gap: 20px; }
    .project-photo { aspect-ratio: 4 / 3; max-height: 320px; }
    .project-photo img { object-fit: contain; object-position: center; }
    .project-copy { padding: 20px; flex: initial; }
    .project-label { font-size: 10px; line-height: 1.5; letter-spacing: 1.2px; }
    .project-copy h3 { margin-top: 10px; font-size: 22px; line-height: 1.3; }
    .project-copy p { margin-top: 10px; font-size: var(--mobile-body); line-height: 1.7; }
    .project-copy ul { margin-top: 14px; padding-top: 0; gap: 6px; }
    .project-copy li { padding: 4px 7px; font-size: 11px; line-height: 1.5; }
    .project-card-action { min-height: 44px; margin-top: 16px; padding-top: 12px; font-size: 13px; }

    /* Natural hero height: both calls to action stay close to the introduction. */
    .hero { min-height: 0; height: auto; align-items: flex-start; }
    .hero-content { padding: 112px 0 32px; }
    .hero .eyebrow { font-size: 9px; line-height: 1.6; letter-spacing: 1.3px; }
    .hero h1 {
        margin-top: 16px;
        font-size: clamp(36px, 10.7vw, 52px);
        line-height: 1.08;
        letter-spacing: -0.055em;
    }
    .hero-intro { margin-top: 20px; font-size: var(--mobile-body); line-height: 1.75; }
    .hero-actions { margin-top: 24px; gap: 10px; }
    .button { min-height: 48px; padding: 0 16px; font-size: 14px; line-height: 1.4; }
    .hero-points { margin-top: 24px; }
    .hero-points li { gap: 7px; padding-top: 14px; }
    .hero-points span { font-size: 11px; line-height: 1.5; }

    /* One navigation height before and after scrolling, with 44px tap targets. */
    .site-header, .site-header.is-scrolled, .site-header.is-open {
        height: var(--mobile-header);
        padding: 0 16px;
    }
    .logo { gap: 10px; }
    .logo-mark { width: 36px; height: 36px; font-size: 15px; }
    .logo-copy { font-size: 12px; letter-spacing: 1.8px; }
    .menu-toggle { width: 44px; height: 44px; }
    .site-nav {
        top: var(--mobile-header);
        max-height: calc(100svh - var(--mobile-header));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 20px 16px;
    }
    .site-nav a { min-height: 48px; display: flex; align-items: center; padding: 12px 0; font-size: 15px; }

    /* Shared spacing and type scale across the mobile homepage. */
    .section, .fit-section, .quality-section, .contact { padding: 56px 0; }
    .section-heading { gap: 18px; margin-bottom: 28px; }
    .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: 1.6px; }
    .section-heading h2, .fit-intro h2, .materials h2,
    .quality-heading h2, .faq-intro h2, .contact-copy h2 {
        font-size: var(--mobile-title);
        line-height: 1.2;
        letter-spacing: -0.045em;
    }
    .section-lead, .fit-intro p:not(.eyebrow), .faq-intro p:not(.eyebrow),
    .contact-copy > p:not(.eyebrow), .fit-list p, .process-list p, .quality-grid p,
    .faq-list details p { font-size: var(--mobile-body); line-height: 1.75; }
    .fit-intro p:not(.eyebrow), .faq-intro p:not(.eyebrow), .contact-copy > p:not(.eyebrow) { margin-top: 18px; }
    .fit-layout, .faq-layout, .contact-layout { gap: 32px; }
    .fit-list article { padding: 24px 0; grid-template-columns: 28px 1fr; }
    .fit-list h3, .process-list h3, .quality-grid h3 { font-size: 20px; line-height: 1.4; }
    .fit-list p, .quality-grid p { margin-top: 8px; }
    .text-link { min-height: 44px; align-items: center; margin-top: 20px; padding-bottom: 8px; font-size: 14px; }
    .capability-track { min-height: 48px; gap: 16px; }
    .materials { padding: 40px 0; }
    .materials-layout { gap: 24px; }
    .material-tags { gap: 8px; }
    .material-tags span { padding: 8px 12px; }
    .process-list li { padding: 22px 0; }
    .quality-grid { margin-top: 28px; }
    .quality-grid article { min-height: 0; padding: 22px 20px; }
    .quality-grid h3 { margin-top: 16px; }
    .faq-list summary { min-height: 56px; padding: 20px 0; gap: 16px; font-size: 15px; line-height: 1.6; }
    .faq-list details p { padding: 0 0 20px; }
    .contact-checklist { margin-top: 24px; padding-top: 18px; }
    .contact-checklist ul { gap: 10px; margin-top: 14px; }
    .brief-form { padding: 24px 20px; }
    .form-heading { flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
    .form-heading b { font-size: 17px; }
    .brief-form label { margin-top: 20px; font-size: 13px; }
    .brief-form input:not([type="checkbox"]), .brief-form select, .brief-form textarea { font-size: 16px; line-height: 1.6; }
    .brief-form input:not([type="checkbox"]), .brief-form select { min-height: 48px; }
    .brief-form .contact-consent { font-size: 12px; }
    .form-intro, .form-help, .brief-form .form-status { font-size: 12px; line-height: 1.75; }
    .form-submit, .reference-picker, #new-inquiry { min-height: 48px; font-size: 14px; }
    .reference-previews button { min-height: 44px; }
    footer { padding: 32px 0; }
    .footer-layout { gap: 20px; }
    .footer-layout > p { font-size: 11px; line-height: 1.75; }
    .public-contact { gap: 8px; flex-direction: column; align-items: flex-start; padding-top: 20px; }
    .public-contact a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
}

@media (max-width: 359px) {
    .service-card, .project-copy { padding: 18px 16px; }
    .hero .eyebrow { letter-spacing: 0.7px; }
    .hero h1 { font-size: 34px; }
    .brief-form { padding: 22px 16px; }
}