/* ========================================================================== International Care Group — phone layout (added 24 Oct 2026) Loaded only on screens up to 760px wide: and wrapped in the same query below, so desktop never applies a rule from this file even if the link loses its media attribute. Desktop layout lives in styles.css and is not touched by anything here. The only phone-only markup is the bottom action bar (.m-actionbar), which styles.css hides everywhere with .m-only and this file switches on. ========================================================================== */ @media (max-width: 760px) { /* --- type scale --------------------------------------------------------- Desktop clamps all bottom out above phone sizes (h1 was 33.6px, 6 ragged lines in the hero at 390px). Inputs go to 16px so iOS doesn't zoom. */ body { font-size: 16px; line-height: 1.6; } h1 { font-size: clamp(1.75rem, 7.6vw, 1.9rem); line-height: 1.15; } h2 { font-size: 1.5rem; line-height: 1.2; } h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; } .eyebrow { font-size: .75rem; letter-spacing: .08em; line-height: 1.5; text-wrap: balance; } .lead { font-size: 1.04rem; } .section-head p, .page-hero p, .cta-band p { font-size: 1rem; } .crumbs, .chip, .form-note, .footer-bottom { font-size: .875rem; } .product-tag, .badge-hq { font-size: .75rem; letter-spacing: .06em; } .office-code { font-size: .78rem; letter-spacing: .08em; } .partner .country { font-size: .8125rem; letter-spacing: .05em; } .field input, .field select, .field textarea { font-size: 16px; } .field-row { gap: 0; } /* stacked pairs: the row gap doubled the field margin */ /* --- rhythm ------------------------------------------------------------- */ .section { padding: 44px 0; } .section-head { margin-bottom: 24px; } .section-head--center { text-align: left; margin-inline: 0; } .grid { gap: 14px; } .card, .partner, .office { padding: 22px; } .card-icon { width: 44px; height: 44px; margin-bottom: 14px; } /* Buttons may wrap: "Request a quote for Electrical Cardiometry™" was 385px and pushed the products page 19px off the side of the screen. */ .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; } .btn:hover, .card:hover, .product:hover, .office:hover { transform: none; } /* --- header ------------------------------------------------------------ The top bar's phone and email move to the bottom action bar. */ .topbar { display: none; } .site-header { background: #fff; backdrop-filter: none; } .site-header .wrap { min-height: 62px; } .brand img { height: 34px; } html { scroll-padding-top: 76px; } .nav.is-open { box-shadow: 0 0 0 100vmax rgba(8, 25, 43, .45); max-height: calc(100dvh - 62px); overflow-y: auto; } /* --- home hero: same words, sized so both buttons sit on the first screen */ .hero .wrap { padding-block: 36px 34px; } .hero::before { width: 460px; height: 460px; border-width: 50px; right: -55%; top: -10%; } .hero h1 { margin-bottom: 16px; } .hero p { font-size: 1.0625rem; line-height: 1.6; } .hero .btn-row { margin-top: 24px; gap: 10px; } .hero .btn-row .btn, .cta-band .btn-row .btn { flex: 1 1 100%; } .hero-stats { margin-top: 30px; padding-top: 22px; gap: 16px 18px; } .hero-stats dt { font-size: 1.75rem; font-variant-numeric: lining-nums tabular-nums; } .hero-stats dd { font-size: .875rem; line-height: 1.45; } /* --- inner page banners and closing band -------------------------------- */ .page-hero .wrap { padding-block: 36px; } .page-hero::before { width: 420px; height: 420px; border-width: 46px; right: -50%; } .crumbs a { display: inline-block; padding: 12px 0; } .crumbs { margin-bottom: 4px; } .cta-band .wrap { padding-block: 44px; } .cta-band::before { width: 420px; height: 420px; border-width: 46px; top: -60%; right: -40%; } /* --- swipe rows --------------------------------------------------------- Product, partner and office cards scroll sideways instead of stacking six deep (the home page was 14,300px tall). The next card peeks in at the edge. The Contact page keeps its offices as a list. Browsers without :has() simply keep the stacked layout. */ .grid--3:has(> .product), .grid--3:has(> .partner), main > .section:not(#offices) .grid--3:has(> .office) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .grid--3:has(> .product)::-webkit-scrollbar, .grid--3:has(> .partner)::-webkit-scrollbar, .grid--3:has(> .office)::-webkit-scrollbar { display: none; } .grid--3:has(> .product) > *, .grid--3:has(> .partner) > *, main > .section:not(#offices) .grid--3:has(> .office) > * { flex: 0 0 84%; scroll-snap-align: start; } /* Off-screen cards never cross the viewport, so they'd stay faded out. */ .grid--3:has(> .product) > .reveal, .grid--3:has(> .partner) > .reveal, .grid--3:has(> .office) > .reveal { opacity: 1; transform: none; } .product-media { aspect-ratio: 16 / 10; padding: 14px; } .product-body { padding: 20px; } /* --- academy band (home) ------------------------------------------------ */ .academy-sec { padding: 36px 0 44px; } .academy-text { padding: 30px 22px 0; } .academy-text .btn-row .btn { flex: 1 1 100%; } .academy-photo { height: 300px; } .academy-band .academy-wave { height: 300px; } /* matches the photo strip */ /* --- split feature (heart illustration, about, solutions) --------------- */ .split { gap: 28px; } .split-visual { min-height: 0; padding: 20px; } .split-visual img { max-height: 200px; } /* --- products page ------------------------------------------------------ */ .detail { padding: 36px 0; scroll-margin-top: 80px; } .detail h2 { font-size: 1.375rem; } .detail-grid { gap: 22px; } .detail-grid > * { min-width: 0; } .detail-figure { min-height: 0; padding: 18px; } .detail-figure img { max-height: 210px; } .detail .btn { width: 100%; } /* The six jump links become one sideways row instead of four lines. */ .page-hero + .section .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; } .page-hero + .section .chip-row::-webkit-scrollbar { display: none; } .page-hero + .section .chip { flex: none; } /* --- contact page: the form comes straight after its heading ------------ The "who we help" list and the email note drop below the form. */ .contact-tile { padding: 14px 16px; align-items: center; } .contact-tile p { display: none; } #enquiry .split { gap: 0; } #enquiry .split > div:first-child { display: contents; } /* (The selectors still name the wrapper div: display:contents removes its box, not its place in the document tree.) */ #enquiry .split > div:first-child > .eyebrow { justify-self: start; } #enquiry .form-card { margin-top: 8px; } #enquiry .split > div:first-child > .checklist { order: 2; margin-top: 32px; } #enquiry .split > div:first-child > .form-note { order: 3; } /* --- tap targets -------------------------------------------------------- */ .office .contact-line { gap: 0; } .office .contact-line a { padding: 9px 0; } .site-footer li { margin: 0; } .site-footer li a { display: inline-block; padding: 10px 0; } .footer-contact li { padding: 6px 0; } .footer-contact svg { margin-top: 14px; } .footer-bottom nav a { display: inline-block; padding: 10px 0; } /* --- footer: Company and Products side by side -------------------------- */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .footer-brand, .footer-grid > :last-child { grid-column: 1 / -1; } .site-footer h4 { letter-spacing: .1em; margin-bottom: 8px; } .footer-bottom { margin-top: 32px; } /* --- bottom action bar (replaces the floating WhatsApp bubble) ---------- */ .wa-float { display: none; } body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } .m-actionbar { display: grid; grid-template-columns: .85fr 1.1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(14, 27, 44, .08); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } .m-actionbar a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink); background: #fff; } .m-actionbar svg { width: 18px; height: 18px; flex: none; } .m-actionbar .is-wa svg { color: #1FA855; } .m-actionbar .is-primary { background: var(--blue); border-color: var(--blue); color: #fff; } /* Out of the way while someone types, so it never sits on the keyboard. */ body:has(.field :focus) .m-actionbar { display: none; } }