landmark (via Elementor's html_tag control) and each page section is nested inside as its own separately-selectable child container. The outer

wrapper itself doesn't directly hold an HTML widget (its children are containers), so the selector above doesn't reach it — reset it the same way, matched by its actual rendered tag rather than any Elementor-internal class. */ main.e-con { display: block !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; position: static !important; } main.e-con > .e-con-inner { display: block !important; } /* == Force centered section headers == .section-hd.is-center should center its eyebrow/heading/lead text (main.css already has this rule), but centered content was rendering flush-left on some sections. Reinforced here with !important since this stylesheet loads last in the cascade. */ .section-hd.is-center { text-align: center !important; } .section-hd.is-center .eyebrow { /* .eyebrow is display:inline-flex — margin:auto has no effect on inline boxes, only block-level ones. Force it block-level and shrink-to-fit so margin:auto can actually center it (text-align:center alone should do this for an inline-flex child, but wasn't taking effect reliably). */ display: flex !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } /* == Keep content visible inside the Elementor editor == main.css hides .reveal elements (opacity:0) until main.js's IntersectionObserver adds .is-visible on scroll. That observer doesn't reliably fire inside Elementor's edit-mode preview iframe, leaving large sections (hero, stats, etc.) permanently invisible while editing even though they render fine for real visitors on the live site. Force visibility whenever Elementor's editor is active. */ body.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; } /* == Restore mobile responsiveness (bug in the original main.css) == main.css contains a duplicate, unconditional re-declaration of core layout classes near the end of the file (nav, buttons, stats, process grid, hamburger menu, etc.) with no media-query guard. Because it comes later in the file, it wins the cascade over the EARLIER responsive @media rules for the same classes/properties — most critically `.nav-links`/`.nav-cta`/`.nav-ham`, which is the rule that's supposed to swap the desktop nav for the hamburger menu below 1100px. The result: the hamburger never appears and the desktop nav links stay visible and cramped on every page at every screen size. This is a bug in the source file itself (present even in the original static HTML), reinforced here with !important since this stylesheet loads last. */ @media (max-width: 1100px) { .nav-links, .nav-cta { display: none !important; } .nav-ham { display: flex !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; } .process-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .section { padding: 64px 0 !important; } .section--lg { padding: 80px 0 !important; } .hero { padding: 128px 0 72px !important; } .inner-hero { padding: 120px 0 52px !important; } .stats-section { padding: 56px 0 !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; } .process-grid { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .container { padding-left: 16px !important; padding-right: 16px !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } } /* == Restore the mobile menu panel itself == Same duplicate-block bug, different casualty. main.js toggles `.is-open` directly on #mobile-nav (a simple show/hide dropdown below the navbar — see the ORIGINAL, correct rule: `#mobile-nav.is-open { display: block; }`). The duplicate block later in main.css redeclares #mobile-nav as a position:fixed slide-in panel gated on `#navbar.is-open #mobile-nav` instead — a selector that never matches anything, since JS never adds `.is-open` to #navbar. Net effect: tapping the hamburger correctly animates it into an X (that part isn't broken), but the link list never appears — users just see the page underneath. Restore the original, correct show/hide behavior. */ #mobile-nav { display: none !important; position: static !important; transform: none !important; } #mobile-nav.is-open { display: block !important; box-shadow: 0 12px 24px -8px rgba(13, 30, 61, 0.18) !important; } /* == Restore correct (light-theme) mobile link colors + add polish == Same duplicate-block bug again: .mob-nav-link/.mob-nav-sub-link/etc. get redefined later in main.css with near-white text colors meant for the dark, full-screen panel version of #mobile-nav that never actually renders. Against the real (white-background) panel restored above, that would mean pale text on a white background — unreadable. Restore the original light-theme colors, and add a bit more visual polish: clearer spacing, a subtle divider above the CTA buttons, larger tap targets. */ #mobile-nav.is-open { padding: 8px 20px 20px !important; } .mob-nav-link { display: block !important; padding: 15px 4px !important; font-size: 15.5px !important; font-weight: 500 !important; color: var(--gray-700) !important; background: none !important; border-bottom: 1px solid var(--gray-100) !important; } .mob-nav-link:hover { color: var(--navy) !important; background: var(--gray-50) !important; } .mob-nav-sub-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--blue) !important; padding: 14px 4px 6px !important; border-bottom: none !important; background: none !important; } .mob-nav-sub { padding-left: 14px !important; background: none !important; } .mob-nav-sub-link { display: block !important; padding: 10px 4px !important; font-size: 14px !important; color: var(--text-2) !important; background: none !important; border-bottom: 1px solid var(--gray-50) !important; } .mob-nav-sub-link:hover { color: var(--navy) !important; background: var(--gray-50) !important; } .mob-nav-cta { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 20px 4px 4px !important; margin-top: 8px !important; border-top: 1px solid var(--gray-100) !important; } /* == Support click/tap on the Services dropdown, not just hover == Works together with tdp-nav-dropdown-fix.js, which toggles `.is-open` on .nav-dropdown when its button is clicked/tapped. main.css only reveals the panel via `.nav-dropdown:hover`, which never fires on touch devices — this adds the same reveal styles for the `.is-open` class so both mouse-hover and click/tap work. */ .nav-dropdown.is-open .nav-dropdown-panel { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; } .nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg) !important; }