/* ================================================================ Site — responsive layer (v5) Mobile-first. Loaded AFTER styles-compat.css and also inlined in so the site can never render unstyled. ================================================================ */ /* ---------- 0. Global guards ---------- */ html { -webkit-text-size-adjust: 100%; } html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { min-width: 0; } img, video, iframe, svg { max-width: 100%; } p, h1, h2, h3, h4, h5, li, a, span, div, td, th, label { overflow-wrap: break-word; } img { height: auto; } /* ---------- 1. Consistent containers ---------- */ [class*="max-w-screen-2xl"] { max-width: 1440px !important; margin-inline: auto !important; padding-inline: clamp(1.125rem, 4vw, 3rem) !important; width: 100%; } @media (min-width: 1600px) { [class*="max-w-screen-2xl"] { max-width: 1520px !important; } } /* ---------- 2. Section rhythm + heading scale (fluid) ---------- */ section, footer { padding-block: clamp(2.5rem, 5.5vw, 5rem) !important; } h2.heading-serif { font-size: clamp(1.5rem, 3.6vw, 3rem) !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; } h3 { line-height: 1.25; } .text-6xl { font-size: clamp(1.9rem, 4.4vw, 3.75rem) !important; } .text-5xl { font-size: clamp(1.75rem, 3.8vw, 3rem) !important; } .text-4xl { font-size: clamp(1.6rem, 3.2vw, 2.25rem) !important; } .text-3xl { font-size: clamp(1.4rem, 2.6vw, 1.875rem) !important; } .text-2xl { font-size: clamp(1.2rem, 2.1vw, 1.5rem) !important; } .tracking-tighter { letter-spacing: -0.015em !important; } /* ---------- 3. HERO ---------- */ /* 3a. Background image: local, optimized, responsive, always a color fallback */ header.bg-cover { background-color: #0C2340 !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.4)), url(/assets/hero-640.jpg) !important; } @supports (background-image: image-set(url("/assets/hero-640.webp") type("image/webp"))) { header.bg-cover { background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.4)), image-set(url(/assets/hero-640.webp) type("image/webp"), url(/assets/hero-640.jpg) type("image/jpeg")) !important; } } @media (min-width: 641px) { header.bg-cover { background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.45)), url(/assets/hero-960.jpg) !important; } @supports (background-image: image-set(url("/assets/hero-960.webp") type("image/webp"))) { header.bg-cover { background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.45)), image-set(url(/assets/hero-960.webp) type("image/webp"), url(/assets/hero-960.jpg) type("image/jpeg")) !important; } } } @media (min-width: 1100px) { header.bg-cover { background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.45)), url(/assets/hero-1280.jpg) !important; } @supports (background-image: image-set(url("/assets/hero-1280.webp") type("image/webp"))) { header.bg-cover { background-image: linear-gradient(rgba(12,35,64,0.55), rgba(12,35,64,0.45)), image-set(url(/assets/hero-1280.webp) type("image/webp"), url(/assets/hero-1280.jpg) type("image/jpeg")) !important; } } } /* 3b. Hero box model — mobile first, no dvh trap */ header.bg-cover { height: auto !important; min-height: 0 !important; align-items: flex-start !important; padding-top: 5.75rem !important; padding-bottom: 3rem !important; } header.bg-cover > div { padding-top: 0 !important; padding-bottom: 0 !important; } header.bg-cover .max-w-3xl { max-width: 46rem; } /* 3c. Hero type — fluid at every size */ header.bg-cover h1 { font-size: clamp(1.6rem, 6.6vw, 4.5rem) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem) !important; } header.bg-cover p { font-size: clamp(1rem, 1.55vw, 1.4rem) !important; line-height: 1.55 !important; margin-bottom: clamp(1.5rem, 2.4vw, 2.25rem) !important; max-width: 42rem; } header.bg-cover .rounded-3xl.mb-6 { margin-bottom: clamp(1rem, 1.6vw, 1.5rem) !important; } header.bg-cover .text-xs { font-size: clamp(0.65rem, 0.8vw, 0.75rem) !important; line-height: 1.35; } /* 3d. Hero CTAs — stacked full width on phones, inline from sm up */ header.bg-cover button, header.bg-cover a[href^="tel:"] { width: 100%; justify-content: center; } header.bg-cover a[href^="tel:"] { font-size: clamp(0.85rem, 1.6vw, 1.5rem) !important; line-height: 1.35; flex-wrap: nowrap !important; column-gap: 0.5rem !important; min-height: 44px; } header.bg-cover a[href^="tel:"] i { font-size: 1em !important; } /* 3e. Hero stats bar */ header.bg-cover .flex-wrap.mt-10 { margin-top: clamp(1.5rem, 2.6vw, 2.5rem) !important; flex-direction: column; align-items: flex-start !important; row-gap: 0.4rem !important; font-size: 0.8rem !important; } @media (min-width: 480px) { header.bg-cover .flex-wrap.mt-10 { flex-direction: row; flex-wrap: wrap; align-items: center !important; column-gap: 1.25rem; row-gap: 0.5rem !important; } } @media (min-width: 640px) { header.bg-cover .flex-col.items-start { flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; } header.bg-cover button, header.bg-cover a[href^="tel:"] { width: auto; } } @media (min-width: 768px) { header.bg-cover { align-items: center !important; min-height: 74svh !important; padding-top: 6.5rem !important; padding-bottom: 4rem !important; } } @media (min-width: 1024px) { header.bg-cover { min-height: 86svh !important; } } @media (min-width: 1536px) { header.bg-cover { min-height: 800px !important; } } /* browsers without svh support */ @supports not (height: 1svh) { @media (min-width: 768px) { header.bg-cover { min-height: 620px !important; } } } /* ---------- 4. Navigation ---------- */ nav button { min-height: 40px; } nav a[href^="#"] { min-height: 44px; display: inline-flex; align-items: center; } @media (max-width: 767px) { nav .md\:hidden .flex-col { row-gap: 0.15rem !important; } nav .md\:hidden { padding-top: 0.75rem !important; padding-bottom: 1.25rem !important; } nav .md\:hidden a[href^="#"] { padding-block: 0.6rem; } } /* ---------- 5. Bars directly under the hero ---------- */ .bg-coral .heading-serif { font-size: clamp(1.2rem, 2.6vw, 2.25rem) !important; line-height: 1.3 !important; } .bg-white.border-b .flex-wrap { flex-direction: column; row-gap: 0.6rem !important; text-align: center; font-size: 0.82rem !important; } @media (min-width: 640px) { .bg-white.border-b .flex-wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: clamp(1.25rem, 3vw, 2.5rem) !important; font-size: 0.875rem !important; } } /* ---------- 6. Grids: 1 col phones, 2 col tablets, full at lg ---------- */ @media (min-width: 640px) and (max-width: 1023px) { .grid.md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid.md\:grid-cols-12 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } @media (max-width: 639px) { .grid.grid-cols-2:not(.gap-3) { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } } .grid { row-gap: clamp(1rem, 2vw, 1.5rem); } @media (max-width: 767px) { .p-10, .p-8 { padding: 1.5rem !important; } .gap-x-10 { column-gap: 1.5rem !important; } .gap-x-12, .gap-x-16 { column-gap: 0 !important; } } /* ---------- 7. Tap targets & contact links ---------- */ @media (max-width: 1024px) { a[href^="tel:"], a[href^="mailto:"], a[href*="maps.google.com"], a[href*="google.com/maps"], a[href*="maps.app"] { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.35rem; word-break: break-word; } footer a[href^="tel:"], footer a[href^="mailto:"] { font-size: 1rem !important; } } /* ---------- 8. Media, maps, gallery, modal ---------- */ iframe { width: 100% !important; max-width: 100%; border: 0; } @media (max-width: 767px) { iframe { min-height: 260px; } } /* modal/lightbox never overflow the viewport */ .fixed.inset-0 { max-width: 100vw; overflow-x: hidden; } .fixed.inset-0 img { max-height: 82vh; width: auto; object-fit: contain; } /* ---------- 9. Large screens: keep content from stretching ---------- */ @media (min-width: 1280px) { header.bg-cover .max-w-3xl { max-width: 52rem; } section p, footer p { max-width: 78ch; } } /* ================================================================ 10. FINAL VISUAL-CONSISTENCY PASS (v6) ================================================================ */ /* 10a. Hero headline: smooth scale phone -> desktop, no jumps */ header.bg-cover h1 { font-size: clamp(1.7rem, 5.9vw, 4.25rem) !important; line-height: 1.1 !important; text-wrap: balance; hyphens: none; } header.bg-cover p { font-size: clamp(0.98rem, 1.45vw, 1.3rem) !important; max-width: 40rem; } /* 10b. Hero CTA + phone + stats: never overlap, never clipped */ header.bg-cover .flex-col.items-start { row-gap: 0.75rem !important; } header.bg-cover button { min-height: 52px; padding-block: 0.9rem !important; white-space: normal; text-align: center; } header.bg-cover a[href^="tel:"] { color: #F5F0E6 !important; background: rgba(12, 35, 64, 0.55); border: 1px solid rgba(245, 240, 230, 0.35); border-radius: 9999px; padding: 0.6rem 1rem !important; text-align: center; white-space: normal; overflow-wrap: break-word; } header.bg-cover a[href^="tel:"] i { color: #E07A5F !important; } header.bg-cover .flex-wrap.mt-10 { align-items: center !important; text-align: center; justify-content: center; width: 100%; } @media (min-width: 640px) { header.bg-cover .flex-wrap.mt-10 { align-items: center !important; justify-content: flex-start; text-align: left; } header.bg-cover a[href^="tel:"] { background: transparent; border-color: transparent; padding-inline: 0 !important; } } /* 10c. Consistent vertical rhythm between sections on mobile */ @media (max-width: 767px) { section, footer { padding-block: 2.75rem !important; } section > div > h2, section > div > div > h2 { margin-bottom: 1rem !important; } section .mb-16, section .mb-14, section .mb-12 { margin-bottom: 1.75rem !important; } section .mt-16, section .mt-14, section .mt-12 { margin-top: 1.75rem !important; } section + section { border-top: 0; } } /* 10d. Hero readability if the photo is slow/blocked (iOS + Android) */ header.bg-cover { background-color: #0C2340 !important; } header.bg-cover h1, header.bg-cover p { text-shadow: 0 1px 12px rgba(12, 35, 64, 0.55); }