/* mobile.css: layout below 1024px ONLY. Loaded with media="(max-width:1023.98px)". Its own page: one column, compact. */
h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
.sec { padding: 48px 0; }
.sec-head { margin-bottom: 24px; }
body { padding-bottom: 76px; }

/* Header */
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.logo img { height: 36px; }
.header-row .nav, .header-row .header-cta { display: none; }
.header-tools { display: flex; align-items: center; gap: 10px; }

/* Hero: 400px banner */
.hero { min-height: 440px; display: grid; align-items: center; }
.hero-body { padding: 48px 0 32px; gap: 14px; }
.hero p { font-size: 1rem; }
.hero-actions .btn { flex: 1 1 100%; }

/* Offer: 2 columns */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.offer { padding: 16px; }
.offer h3 { font-size: 1rem; }
.offer p { font-size: .86rem; }

/* Story: photo then text */
.story { display: grid; gap: 20px; }
.story-media { aspect-ratio: 16 / 10; }
.panel-list { grid-template-columns: 1fr 1fr; }
.panel-list li { font-size: .84rem; padding: 8px 10px; }
.story-text .btn { width: 100%; }

/* Why */
.why-grid { display: grid; gap: 10px; }

/* Gallery 2x2, clients */
.gallery { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
.clients { margin-top: 28px; }

/* Reviews, FAQ, contact */
.reviews-grid { display: grid; gap: 12px; }
.faq-grid { display: grid; gap: 10px; }
.faq-head { margin-top: 40px; }
.contact-grid { display: grid; gap: 24px; }
.contact-side { display: grid; gap: 20px; }
.map { height: 220px; }
.form-row { display: grid; gap: 12px; }
.contact-card .btn { width: 100%; }

/* Footer */
.footer-grid { display: grid; gap: 24px; padding: 40px 0 24px; }
.footer-bottom .wrap { display: grid; gap: 6px; }

/* Sticky bar; the floating button is hidden because the bar has WhatsApp */
.sticky-bar { display: grid; }
.wa-float { display: none; }
.drawer-overlay, .drawer { display: flex; }

.hero { min-height: 480px; }

.counters { grid-template-columns: 1fr 1fr; gap: 10px; }
.counters b { font-size: 2rem; }
.cta-actions .btn { flex: 1 1 100%; }

/* client logos */
.logo-track li { height: 40px; padding: 0 18px; }
.logo-track img { height: 32px; max-width: 96px; }
.clients-also { margin-top: 14px; font-size: .88rem; }

.sec.counters-sec, .sec.cta-band { padding: 40px 0; }
:target, [id] { scroll-margin-top: 78px; }

.sec.trust-strip { padding: 28px 0 24px; }

.hero p:not(.hero-line) { font-size: .95rem; }

.hero h1 { font-size: clamp(1.9rem, 7.6vw, 2.5rem); }
.hero-accent { min-height: 2.1em; }
.hero-actions .btn { flex: 1 1 100%; }


.page-hero { padding: 56px 0 48px; }
.page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); }

.steps { grid-template-columns: 1fr; }
.areas { grid-template-columns: 1fr; }
.steps li, .areas li { padding: 18px; }

.panel-cards { grid-template-columns: 1fr; }

/* the quote popup rises from the bottom as a sheet on phones */
.quote-modal { width: 100%; max-width: 100%; margin: auto 0 0; }
.quote-box { border-radius: 22px 22px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 94vh; }