/* ============================================================================ * Biztoa — mobile layout (phones, ≤ 809px) * ============================================================================ * * WHY THIS FILE EXISTS * -------------------- * The site was built in Framer, which is not responsive by CSS — it is * responsive by swapping markup. Framer ships three separate versions of each * component (desktop / tablet / phone) and hides the two that don't match the * viewport. Because the pages here were captured from a desktop browser, only * the desktop components survive, and Framer never writes mobile styling for * those. So below 810px the desktop components render at their desktop sizes: * fixed-width forms run off the edge, absolutely-positioned decoration * overlaps, and flex "fill" boxes collapse until text wraps one letter per line. * * This file supplies the mobile styling those components never had. * * DESKTOP SAFETY * -------------- * Every rule in this file lives inside one of the two @media blocks below — * `max-width: 809px` (phones and small tablets) and `max-width: 360px` (the * narrowest phones). Neither can apply at 810px or above, so desktop and * tablet rendering are untouched by construction — not by testing. * * If you add anything here, keep it inside one of those blocks. * * CONTENTS * -------- * 1. Page shell * 2. Navbar + hamburger menu (paired with mobile.js) * 3. Newsletter / subscribe form * 4. Footer * 5. Homepage-only (hero orbit, process tabs) * * Class names are Framer's generated hashes; the comment on each block says * which component it is. All eleven shared component classes below are present * on all 60 pages, so these rules fix the whole site at once. * ========================================================================= */ @media (max-width: 809px) { /* ------------------------------------------------------------------------- * 1. PAGE SHELL * ---------------------------------------------------------------------- */ /* The Framer root clips instead of scrolling, so anything wider than the screen is silently cut off rather than reachable. Belt-and-braces guard so a stray wide child can never produce a sideways scrollbar. */ [data-framer-root] { width: 100% !important; overflow-x: hidden; } /* ------------------------------------------------------------------------- * 2. NAVBAR (.framer-nk3bR) * * Desktop lays out logo + links + "Contact Us" in one row: 110 + 206 + 125 * = 466px of content in a 390px viewport, so the button hangs off the edge. * On mobile the link list becomes a drop-down panel and mobile.js adds a * hamburger to toggle it, leaving logo + button + burger on the bar. * ---------------------------------------------------------------------- */ /* Anchor for the drop-down. The wrapper is the full-width inner row, so the panel inherits the page's 25px side margins. */ .framer-nk3bR .framer-9on2oy { position: relative; justify-content: space-between; gap: 14px; } /* The navbar and both of its inner wrappers are `overflow: hidden`, and the bar is only 99px tall. The drop-down hangs BELOW that, so without this it is clipped away completely — the panel is in the DOM, correctly sized and positioned, and simply never painted. All three levels have to be opened up; opening only the innermost one still leaves the outer two clipping. */ .framer-nk3bR, .framer-nk3bR .framer-4dtjlc, .framer-nk3bR .framer-9on2oy { overflow: visible !important; } /* The link list: out of flow, hidden until toggled. */ .framer-nk3bR .framer-1tzbmzx { position: absolute; top: calc(100% + 14px); left: 0; right: 0; /* index.css sets `width: min-content`. left/right alone cannot stretch the panel while an explicit width is in play, so it must be cleared here or the menu collapses to ~103px. */ width: auto !important; z-index: 30; display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 20px; /* Framer writes `background-color: rgba(0,0,0,0)` as an INLINE style on this element, which outranks any selector here — hence !important. Without it the panel is transparent and the links sit on the hero. */ background: #fff !important; overflow: visible; border-radius: 12px; box-shadow: 0 14px 34px rgba(24, 33, 77, 0.14); } /* Desktop spaces links horizontally (margin: 0 13px); stack them instead. */ .framer-nk3bR .framer-1tzbmzx > * { margin: 9px 0; width: auto; } .framer-nk3bR.biztoa-nav-open .framer-1tzbmzx { display: flex; } /* Keep the "Contact Us" button from being squeezed by the burger, and park it next to the burger rather than mid-bar. Once the link list goes absolute above, only three items are left in flow — logo, button, burger — so `space-between` spreads them and strands the button in the middle of the bar. `margin-left: auto` soaks up the free space just after the logo, so the button and burger travel together on the right. */ .framer-nk3bR .framer-61ww1h { flex: none; margin-left: auto; } /* Trim the bar's "Contact Us" button — at desktop size (125 x 48) it is the heaviest thing on a phone header. 111 x 41 sits better against the logo and burger without weakening it as the bar's call to action. Scoped to the navbar: the in-page CTAs ("Book a Free Consultation", "Schedule Now") are meant to be prominent and keep their size. */ .framer-nk3bR .framer-61ww1h a { padding: 9px 16px !important; } /* Beats the site-wide font-size cap, which is two classes to this rule's three. */ .framer-nk3bR .framer-6lcw6s .framer-text { font-size: 15px !important; } /* Hamburger button — created by mobile.js, which only mounts it below 810px, so this markup does not exist at all on desktop. */ .framer-nk3bR .biztoa-burger { display: flex; flex: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .framer-nk3bR .biztoa-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #18214d; transition: transform 0.22s ease, opacity 0.22s ease; } .framer-nk3bR.biztoa-nav-open .biztoa-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .framer-nk3bR.biztoa-nav-open .biztoa-burger span:nth-child(2) { opacity: 0; } .framer-nk3bR.biztoa-nav-open .biztoa-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------------------- * 3. NEWSLETTER / SUBSCRIBE FORM (.framer-Nvwl6) * * The form carries a hard `min-width: 380px` with a 373px input beside a * 114px Submit — about 500px of content. Make the whole thing fluid and * stack the input above the button. * ---------------------------------------------------------------------- */ .framer-Nvwl6, .framer-Nvwl6 .framer-1k5ac4f { width: 100% !important; min-width: 0 !important; } .framer-Nvwl6 .framer-1k5ac4f { flex-direction: column; align-items: stretch; gap: 12px; } /* Desktop sizes the white card to one 71px-tall row. Stacking the input over the button needs roughly double that, so the fixed heights have to be released or the card crops the Submit button in half. `.framer-Nvwl6` carries `height: 100%` as an inline style, hence !important. */ .framer-1pu62r-container, .framer-Nvwl6, .framer-Nvwl6 .framer-1k5ac4f { height: auto !important; min-height: 0 !important; } .framer-Nvwl6 { overflow: visible !important; } /* Input row. */ .framer-Nvwl6 .framer-form-text-input, .framer-Nvwl6 .framer-1li1o8r, .framer-Nvwl6 .framer-form-input { width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* Desktop absolutely-positions BOTH halves of this form: the input is `position: absolute`, and the Submit is pinned to its right. Returning only the button to normal flow is not enough — the still-absolute input is out of flow and paints straight over it. Both have to become static before the column layout above can stack them. */ .framer-Nvwl6 .framer-form-text-input { position: static !important; } /* Submit sits to the right of the input on desktop; bring it back into flow. */ .framer-Nvwl6 .framer-81smzr-container { position: static !important; width: 100%; } .framer-Nvwl6 .framer-81smzr-container .framer-6xFUT { width: 100%; } /* "Submit" label uses `white-space: pre`, which refuses to wrap. */ .framer-Nvwl6 .framer-1exmyya { white-space: normal; width: auto; } /* The footer embeds the newsletter in a 170px column. */ .framer-1pu62r-container { width: 100% !important; } /* ------------------------------------------------------------------------- * 4. FOOTER * * Three separate things overflow here: * - the heading/newsletter row (two 170px columns side by side) * - the 2-column branding/links grid, and the 3-column link grid inside it * (which squeezes each column to ~45px) * - the bottom bar, whose two texts use `white-space: pre` * * The per-letter wrapping you see in "Follow us" comes from Framer's fill * trick: `.framer-kDwkj .framer-1n2a7oe { flex: 1 0 0; width: 1px; * word-break: break-word }`. That only works while the parent has room — * once squeezed, the box collapses toward 1px and every character wraps. * ---------------------------------------------------------------------- */ /* NOTE ON SPECIFICITY Framer writes every footer rule as `.framer-YvgHu .framer-xxxx` — two classes. A bare `.framer-xxxx` here is one class, so it LOSES no matter that this file loads later; source order only breaks ties at equal specificity. Every footer selector below therefore carries the same `.framer-YvgHu` prefix to match Framer's weight and win on order. */ /* THE FOOTER'S OWN HEIGHT The footer is laid out for desktop at a fixed 637px with `overflow: hidden`. Stacking everything for mobile makes the real content ~1366px, so roughly 590px — the entire Quick Links / Main Pages / Follow us block — was being clipped away and was simply unreachable on a phone, at every width, on all 60 pages. Releasing the footer's own height is not enough. Its single child `.framer-1p2hvk4` is another fill item, and because the footer is a ROW flex container that `flex: 1 0 0` governs WIDTH, not height. Zeroing it outright (as the fill fix below does for column rows) collapses the footer to 1px wide. It has to keep growing horizontally — `flex: 1 0 auto` — while its height is freed, and only then does the footer's auto height pick up the full content. */ .framer-YvgHu { height: auto !important; min-height: 0 !important; overflow: visible !important; } .framer-YvgHu .framer-1p2hvk4 { flex: 1 0 auto !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; } /* Both footer grids are shrink-to-fit, so a single-column track leaves them at their content width (~180px) inside a 310px row. Make them span. */ .framer-YvgHu .framer-1xoew7i, .framer-YvgHu .framer-1vn4zbv { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } /* Heading + newsletter: stack. */ .framer-YvgHu .framer-1evl6ke { flex-direction: column; align-items: stretch; gap: 22px; } .framer-YvgHu .framer-1bi9k1, .framer-YvgHu .framer-1otdnau { width: 100% !important; } /* Both halves of that row are Framer "fill" items (`flex: 1 0 0`), which means "ignore my size, share the MAIN axis". Turning the row into a column turns the main axis from width into height, so the same declaration now reads as `height: 0` — and `.framer-1otdnau` is `overflow: hidden`, so the newsletter form inside it gets clipped to nothing and silently disappears. Opting these out of the fill restores their natural height. The bottom bar below is a fill item too, for the same reason. */ .framer-YvgHu .framer-1bi9k1, .framer-YvgHu .framer-1otdnau, .framer-YvgHu .framer-nijjbj { flex: 0 0 auto !important; height: auto !important; } /* Branding | links -> single column. */ .framer-YvgHu .framer-1xoew7i { grid-template-columns: minmax(0, 1fr); gap: 32px; } /* Quick Links / Main Pages / Follow us — one full-width column, stacked. Side by side these were always compromised: at 146px the columns were cramped, and any narrower they crushed. A phone has vertical room and no horizontal room, so stacking is simply the right shape here — each group gets the full 310px, nothing wraps awkwardly, and it behaves identically from 280px up to the 809px breakpoint. */ .framer-YvgHu .framer-1vn4zbv { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* Each link sits in a wrapper Framer sized for the desktop 3-column footer — "About Us" gets a 52px box. That was fine while the text was `white-space: pre` and simply overflowed; now that text wraps, it breaks to "About / Us" inside a column that is 310px wide. Let the wrappers take the width that is actually available. */ .framer-YvgHu .framer-1vn4zbv [class*="framer-"] { width: auto !important; max-width: 100% !important; } /* Social rows: let the label size to its text instead of collapsing to 1px. */ .framer-kDwkj { width: 100%; min-width: 0; } .framer-kDwkj .framer-1n2a7oe { flex: 0 1 auto; width: auto; min-width: 0; word-break: normal; overflow-wrap: anywhere; } /* Bottom bar: stack, and allow the `white-space: pre` texts to wrap. This one line IS centred, unlike the link groups above it. It is a short sign-off with nothing to scan down, so centring costs no legibility and visually closes off the footer. The link lists stay left-aligned: they are read by running the eye down a column, which needs a single shared left edge to anchor on, and the social rows would otherwise zigzag. */ .framer-YvgHu .framer-nijjbj { flex-direction: column; align-items: center; gap: 6px; } .framer-YvgHu .framer-s00z90, .framer-YvgHu .framer-15a86i2 { width: 100% !important; white-space: normal; } /* Framer sets `text-align` on the text elements themselves, so centring the wrapper alone leaves the copy flush left inside a centred box — the descendant selector is what actually does the centring. */ .framer-YvgHu .framer-nijjbj, .framer-YvgHu .framer-nijjbj * { text-align: center !important; } /* ------------------------------------------------------------------------- * 5. HOMEPAGE ONLY * ---------------------------------------------------------------------- */ /* Hero orbit: a 1200px absolutely-positioned decoration with rings up to 1000px, reaching x = -808 on a phone. Framer hides it below 810px too — it is pure decoration and carries no content. */ .framer-yswmfw-container { display: none; } /* Process tab row ("Understanding / Strategy / Execution") is 466px wide, so the outer two tabs hang off both edges of a phone. `!important` is needed twice over: Framer scopes this as `.framer-qQZdz .framer-phlxov` (two classes, so it outranks a bare class here), and its `flex-flow: row` shorthand also resets flex-wrap to nowrap, which would keep the tabs on one line however narrow the screen gets. */ .framer-phlxov { flex-wrap: wrap !important; justify-content: center; gap: 10px; width: 100% !important; } /* HOMEPAGE FEATURES GRID — put the image back above the cards Desktop lays this out as two columns: the four feature cards on the left, the image on the right, both under the "Reliable expertise…" heading. On a phone the grid collapses to one column and follows DOM order, so the cards come first and the image drops underneath them — reading heading, cards, image instead of heading, image, cards. `order` fixes the sequence without touching the markup. The grid's rows are content-sized, so they re-measure after the swap and nothing gets cropped. These are per-page class hashes (index.html only); a re-scrape would rename them and this rule would quietly stop matching. */ .framer-1mf87h2 > .framer-1kizu6q { order: -1; } /* ------------------------------------------------------------------------- * 6. TEXT AND WIDTH CONTAINMENT (site-wide) * * Framer lays text out for a fixed desktop canvas: copy is `white-space: pre` * and the block holding it carries a hard pixel width (the homepage H1 is a * literal 432px). Neither can adapt, so on a 360px phone the text cannot * wrap and the block cannot shrink — headings are sliced off at both edges. * * Where a box IS allowed to shrink, Framer's fill trick (`flex: 1 0 0; * width: 1px; word-break: break-word`) takes over and the box collapses * toward 1px, which is what produces the one-letter-per-line wrapping. * * These two rules fix both, everywhere, rather than per component. * ---------------------------------------------------------------------- */ /* Wrap on word boundaries. The line breaks the designer actually intended are real
elements, so `normal` preserves them while letting long lines reflow; `word-break: normal` stops the per-letter wrapping, and `overflow-wrap` is the escape hatch for a single word too long to fit. */ [data-framer-root] .framer-text { white-space: normal !important; word-break: normal !important; /* `break-word` was splitting words mid-syllable ("Consultati / on.", "Feature / s"). Never break inside a word — if a word genuinely will not fit, let it overhang by a few pixels instead, which is invisible inside the padding Framer already gives these boxes. The font-size cap below is what actually makes long words fit. */ overflow-wrap: normal; /* Framer sizes text for a 1200px canvas, so a hero can be 50px on a 360px phone — one word then exceeds the whole column and has to break mid-word. Framer builds every size from this same calc(), so re-stating it wrapped in min() caps big text without touching body copy: a 50px heading comes down to the ceiling while 16px copy is untouched. 7.5vw (28px on a 375px phone) is set by the longest single words on the site — "Communication" and "Administration" in the HR page headings, which sit in boxes Framer pinned to 230px. At 7.5vw they fit; any larger and they cannot, and with no wrap point available the word would spill over whatever sits beside it. */ font-size: min( calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1)), 7.5vw ) !important; } /* Keep BUTTON labels on one line — "Book a Free / Consultation" reads badly. This must target the button label wrapper, not `a .framer-text`: whole cards are wrapped in links too, so the broader selector also pinned blog card titles to one line and chopped them off at the card edge. `.framer-6lcw6s` is Framer's label wrapper and is on all 60 pages. */ [data-framer-root] .framer-6lcw6s .framer-text { white-space: nowrap !important; } /* Cap every Framer block to its container so a hard pixel width can never paint past the screen edge. `max-width` beats `width` in CSS, so this works without !important. The ticker/marquee lists are exempt: they are SUPPOSED to run wider than the viewport and are already clipped by an `overflow: hidden` parent — capping them would break the scroll animation. */ [data-framer-root] [class*="framer-"]:not(ul):not(li):not(ul *) { max-width: 100%; } /* Applied by mobile.js to desktop two-column rows that are too cramped to stay side by side. Children must also be opted out of the fill trick, or they collapse to `height: 0` once the main axis becomes vertical — the same trap documented in the footer section above. */ .biztoa-stack { flex-direction: column !important; align-items: stretch !important; } .biztoa-stack > * { flex: 0 0 auto !important; height: auto !important; width: auto !important; max-width: 100% !important; } /* SERVICE-LIST PROGRESS SPINE (.framer-mzvJV — 56 of 60 pages) The step marker beside the spine is pinned to 69px with 12px of horizontal padding, leaving 45px of content box. "Service 1" needs 56px, so once text started wrapping the number dropped onto its own line under the word. The marker sits in a 320px column, so there is plenty of room — letting it size to its content gives 77px and puts the label back on one line. */ .framer-mzvJV, [data-framer-root] :has(> .framer-mzvJV) { width: auto !important; max-width: 100% !important; } /* Applied by mobile.js to sections whose vertical padding was sized for a 1200px desktop canvas (130px / 96px / 128px). Clamped to something a phone can justify — this alone removes roughly 850px of empty scroll from a services page. See the note in mobile.js about why padding-top under the navbar is deliberately left alone. */ .biztoa-pt { padding-top: 48px !important; } .biztoa-pb { padding-bottom: 48px !important; } .biztoa-rg { row-gap: 48px !important; } /* SERVICE LIST PROGRESS SPINE (.framer-1CEU1 — the 6 category pages) Each service sits in a row with a vertical progress spine down its left. Framer gives that spine a 100px column and a 48px gap, which on a 360px phone leaves the text just 172px. mobile.js deliberately does NOT stack this row — doing so collapses the spine to nothing — so the space has to come from the rail column instead. The rail is a 3px line plus a ~30px chevron, so 44px is ample, and the text goes from 172px to 264px. */ .framer-1CEU1 .framer-13ci616 { width: 44px !important; min-width: 0 !important; } .framer-1CEU1 { gap: 12px !important; } /* The FINAL service in each list is a different component — `.framer-ck1IA`, the variant with no trailing rail below its marker — so the rule above did not reach it. It kept Framer's 100px column and 48px gap, putting its chevron at x=38 and its text at x=168 while every row above sat at x=20 and x=76: the last item visibly stepped out of the spine. Same treatment, same numbers, so it lines up with the rest. */ .framer-ck1IA .framer-7iqpvq { width: 44px !important; min-width: 0 !important; } .framer-ck1IA { gap: 12px !important; } /* Both applied by mobile.js to single-line rows whose children cannot fit and cannot shrink (`flex-wrap: nowrap` with `flex: 0 0 auto` children). A blog card's "Article • 5 min read" needs 173px but Framer pinned the row to 122px; centred, it spilled ~26px off BOTH sides and was cut at the screen edge. The row is usually only narrow because of that pinned width, not because the space is missing — that example sits in a 320px card. So the script tries `-fit` first, letting the row take the width it actually needs, and falls back to `-wrap` only when even the full container is too small. Widening is much the better outcome: wrapping that row put "Article", the bullet, and "5 min read" on three separate lines. justify-content is deliberately left alone so centred rows stay centred. */ .biztoa-fit { width: auto !important; max-width: 100% !important; } /* Applied by mobile.js to component wrappers Framer pinned to a desktop pixel height. Their content is taller once it reflows for a phone, and because these wrappers are `overflow: visible` the content spills out rather than being clipped — the wrapper still only occupies its pinned height in the flow, so the NEXT section is laid out over the top of it. On the contact page the "Biztoa HQ" card is 459px inside a 350px wrapper, and the blue CTA panel covered the address and "View Location" entirely. */ .biztoa-grow { height: auto !important; min-height: 0 !important; } /* Service-page hero, tagged by mobile.js: a photo inset behind a card that covers it. Lift the photo out of its overlay position so it becomes a banner above the card and is actually visible. Children are opted out of the fill trick for the usual reason — the main axis is now vertical, and the card would otherwise collapse to `height: 0`. */ .biztoa-hero { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; height: auto !important; } .biztoa-hero > * { flex: 0 0 auto !important; height: auto !important; width: auto !important; max-width: 100% !important; } .biztoa-hero > .biztoa-hero-media { position: relative !important; inset: auto !important; width: 100% !important; height: 200px !important; border-radius: 12px; overflow: hidden; } .biztoa-hero > .biztoa-hero-media img { width: 100% !important; height: 100% !important; } .biztoa-wrap { flex-wrap: wrap !important; } } /* ============================================================================ * NARROW PHONES (≤ 360px — Galaxy Fold, Galaxy S8, iPhone 5/SE 1st gen) * ============================================================================ * * At iPhone SE width (375px) the bar fits: 25px gutters + 110px logo + 125px * button + 30px burger + gaps = 310px inside 325px of content. Below about * 360px it stops fitting and the burger is pushed off the right edge. * * Rather than drop the "Contact Us" button — it is the bar's only call to * action — reclaim the space it needs: tighter gutters, a smaller logo, and * less padding inside the button. At 280px that leaves the burger ending at * 249px inside 265px of viewport, with room to spare. * ========================================================================= */ @media (max-width: 360px) { /* 25px gutters cost 50px of a 280px screen; 16px is plenty on a phone. */ .framer-nk3bR .framer-4dtjlc { padding-left: 16px !important; padding-right: 16px !important; } .framer-nk3bR .framer-9on2oy { gap: 8px !important; } .framer-nk3bR .framer-1t47mji { width: 78px !important; } /* Target the itself, which is what carries the padding. A broader selector here also hits the nested wrapper divs and inflates the button instead of shrinking it. Tighter than the 16px used above 360px, so the button keeps getting smaller as the screen does rather than bouncing back out. */ .framer-nk3bR .framer-61ww1h a { padding-left: 10px !important; padding-right: 10px !important; } /* Tighter type ceiling than the 7.5vw used above 360px. Some service-page cards put headings in boxes Framer pinned to 135px, and at a Galaxy Fold's 280px even "Management" and "reconciliation," exceed that. 6.5vw fits them with nothing left overhanging. */ [data-framer-root] .framer-text { font-size: min( calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1)), 6.5vw ) !important; } }