/* Enxura theme stylesheet — ported from the approved homepage sandbox (reference-sandbox.html). Selectors and custom properties are kept as-is; this file is the single source of styling for the site. */ :root{ --ink:#000033; --ink-deep:#071722; --ink-soft:#2C4256; --bg:#F6F7F9; --bg-panel:#FFFFFF; --line:#E1E5EA; --accent:#1B6FC4; --accent-soft:#DCEAF8; --slate:#5A6C7D; --display: 'Inter', sans-serif; --sans: 'Inter', sans-serif; --mono: 'Inter', sans-serif; --maxw: clamp(1240px, 90vw, 1760px); --maxw-header: var(--maxw); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none;} button{font-family:inherit; cursor:pointer; border:none; background:none;} :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .eyebrow{ font-family: var(--mono); font-size: 15.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } /* ===== Top utility bar ===== */ .util-bar{ background: var(--ink-deep); color: #BFCBD6; font-family: var(--mono); font-size: 12px; } .util-bar .wrap{ display:flex; justify-content: space-between; align-items:center; padding-top:8px; padding-bottom:8px; gap: 16px; flex-wrap: wrap; } .util-bar a{ color:#BFCBD6; } .util-bar a:hover{ color:#fff; } .util-links{ display:flex; gap:24px; align-items:center; } .util-links span{ opacity:0.55; } .lang-switcher{ display:flex; gap:12px; align-items:center; } .lang-switcher a{ opacity:0.7; } .lang-switcher a.current-lang{ opacity:1; color:#fff; font-weight:600; } .lang-switcher a:hover{ opacity:1; color:#fff; } /* ===== Header / Mega nav ===== */ /* body > header (not a bare `header` selector) — scoped to the site's actual nav header specifically. A bare tag selector here also matched every other semantic

used for a section heading (page.php, index.php, search.php, and the coverage-page template all use

for a section's heading block), sticking them to the top of the viewport with this same white background mid-scroll — a real, visible bug once a page had more than the one intended header. */ body > header{ background: var(--bg-panel); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index: 100; } /* WordPress's own admin toolbar is position:fixed;top:0 — competing with our header (position:sticky;top:0 above) for the same spot once you scroll, for logged-in users. WordPress only ever adds the .admin-bar class to when that toolbar is actually showing (logged in AND enabled in the user's profile — never present for a logged-out visitor), so this has zero effect on the live site for real visitors; it only nudges the sticky point down to sit below the toolbar for admins/editors. 32px matches the toolbar's own default desktop height; WordPress core switches it to 46px below 782px (its own responsive breakpoint, not ours) and this mirrors that exactly so the two stay in sync at any width. */ .admin-bar body > header{ top: 32px; } @media screen and (max-width: 782px){ .admin-bar body > header{ top: 46px; } } /* WordPress core ALSO switches #wpadminbar from position:fixed to position:absolute at its own ≤600px breakpoint (confirmed directly in wp-includes/css/admin-bar.min.css) — below that width the toolbar scrolls away WITH the page instead of staying pinned, same as any other document content. Reserving 46px of sticky offset for it here regardless means that once scrolled far enough, header pins 46px down from the real viewport top with nothing left there to justify the gap (the toolbar already scrolled off with whatever used to sit at the top of the page) — showing through whatever page content now happens to be behind it. Below 600px there's no longer a fixed element to sit below at all, so revert to top:0, same as the logged-out case. */ @media screen and (max-width: 600px){ .admin-bar body > header{ top: 0; } } .header-row{ max-width: var(--maxw-header); display:flex; flex-wrap: wrap; align-items:center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; column-gap: 15px; row-gap: 24px; } /* Desktop only: with 3 flex children (logo, nav, header-cta), justify-content:space-between spreads all three apart evenly, leaving a big gap between the last nav item and the search icon. An auto left-margin on nav absorbs all the free space on its own left side instead, so logo stays pinned left while nav+search sit together as a tight group at the row's right edge (column-gap above still governs the actual nav-to-search spacing). Left alone on mobile — the hamburger/centered-logo/search layout there uses its own `order` values further down, not this space-between flow. */ .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) nav.ubermenu{ margin-left: auto; } /* Right at the desktop-nav breakpoint (1024px), the full 5-item mega menu + logo + search icon need slightly more room than the default 24px column-gap leaves — the search icon was wrapping to its own row. Tightened just for this narrow "barely desktop" range; wider screens have plenty of room and keep the normal 24px gap. */ @media (min-width: 1024px) and (max-width: 1150px){ .header-row{ column-gap: 2px; } } /* The mobile nav sits on its own wrapped flex line (see the ubermenu-mobile-view rule below) even while collapsed to 0 height — row-gap still reserves 24px for that line regardless, which read as dead space under the header at all times on mobile. Zero it out specifically while the nav carries UberMenu's own "collapsed" class, and let it revert to the base 24px once that class is removed (nav actually expanded), so the accordion still gets proper breathing room when it's really open. */ .header-row:has(nav.ubermenu-mobile-view.ubermenu-responsive-collapse){ row-gap: 0; } /* Taller, roomier icon row on mobile specifically (desktop keeps its original 14px). Row total is pinned to 70px (15 padding + 40px icon content + 15 padding) to match the open search bar's own 70px height. Changing this shifts where row 1 actually ends, so the .proinput offset/height and

's open-state padding-bottom further below are recomputed to match — see the comments there. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view){ padding-top: 15px; padding-bottom: 15px; /* Tighter than .wrap's default 32px so the hamburger/search icons align with the mobile accordion's own list-item edge below, rather than sitting inset further than the content it toggles. */ padding-left: 20px; padding-right: 20px; } /* Separates the icon row from the search input row below it once open, matching the reference layout — only relevant while there's a search row underneath to separate from. Drawn as a pseudo-element on

(not a border-bottom on .header-row) so it isn't bounded by .header-row's own box the way a literal border would be — full viewport width (left/right:0), unlike the desktop version below which insets to match its own wrap's 32px content edge; mobile's full-width search/results rows (edge-to-edge already) called for an edge-to-edge divider to match, rather than reusing the wrap-centering calc used everywhere else in this file. top = 70px is .header-row's own natural height here (15 padding + 40px icon content + 15 padding), i.e. exactly the icon row's bottom edge. */ header:has(nav.ubermenu.ubermenu-mobile-view):has(#ajaxsearchpro1_1[data-asp-compact="open"])::after{ content: ''; position: absolute; left: 0; right: 0; top: 70px; height: 1px; background: var(--line); } /* UberMenu's mobile/responsive view: force the nav onto its own full-width row below logo + toggle + CTA, instead of being squeezed into whatever space is left on the same flex row as those items. */ .header-row nav.ubermenu.ubermenu-mobile-view{ flex: 1 1 100%; order: 10; } /* Mobile accordion positioning. Several approaches were tried here before landing on this one — each fixed the specific bug it was built for but kept surfacing new edge cases, because each one made only the individual OPEN SUBMENU its own position:fixed, independently scrolled box, nested inside an otherwise-static header/toggle row. That's TWO nested scroll contexts (the fixed submenu's own scroll, sitting inside... nothing scrollable above it, in our case, but still a fixed element sitting inside other fixed-adjacent chrome) — and nested scrollable regions, especially involving position:fixed, are a well-known trouble spot for WebKit's compositor specifically (Chrome/Android was never affected by any of these bugs). A reference site with a working sticky-header + accordion combo uses a simpler structure: ONE single position:fixed, independently scrolled panel for the WHOLE mobile nav (toggle row list + whichever submenu is expanded, all together) — individual submenus inside it are plain position:static, normal in-flow content that just pushes the rest of the list down when opened, exactly like an ordinary accordion. Rebuilt to match: the fixed+scrollable treatment moves to

itself (below), and the submenu-drop rule becomes a plain position:static override again. Setting BOTH top and bottom on a fixed element makes the browser compute "fill exactly what's left of the viewport" natively — no dvh/lvh viewport-unit quirks, no JS-timing races, and no address- bar-driven gap for a stray touch to land in, because the browser itself is doing the fill, not an approximation of it. --header-open-height is set live by main.js the moment the toggle opens — NOT a hardcoded pixel value, since Dynamic Island/notch safe-area insets, status bar height, and system text-size settings all change how tall the header actually renders per device. The 192px fallback only matters before that JS has run once. overscroll-behavior-y:contain addresses a well-known iOS Safari failure mode: this panel's own scroll reaching ITS OWN boundary while is locked (main.js) — by default iOS tries to "chain" the leftover scroll gesture to the page behind once the panel runs out of room, but the page has nowhere to go while locked, and the gesture gets stuck rather than just stopping, unable to scroll back up afterward either. This tells the browser explicitly not to chain scroll past the panel's own boundary. translateZ(0) forces this panel onto its own GPU compositing layer — the standard fix for a separate, well-documented WebKit bug where a position:fixed scrollable region can fail to repaint correctly on a fast scroll-direction reversal, leaving stale blank tiles until something forces a repaint; with its own layer, the browser can't reuse a stale raster of it. (-webkit-overflow-scrolling:touch was deliberately left out — it's a legacy pre-iOS-13 property for enabling momentum scroll, which is native/default behavior on any current iOS version, and on modern iOS it forces an older compositing path that's itself a known source of this kind of rendering glitch rather than fixing anything anymore.) */ header:has(.ubermenu-responsive-toggle-open) nav.ubermenu.ubermenu-mobile-view{ position: fixed !important; top: var(--header-open-height, 192px) !important; bottom: 0 !important; left: 0 !important; right: 0 !important; /* nav previously had no background of its own — it didn't need one, sitting visually "inside" header's white background. Now that it's an independent fixed panel, not visually connected to header at all, it needs its own opaque fill or the page behind (the hero section, initially) shows straight through it. */ background: var(--bg-panel); overflow-y: auto !important; overscroll-behavior-y: contain; padding-bottom: 32px !important; box-sizing: border-box !important; transform: translateZ(0); } nav.ubermenu.ubermenu-mobile-view .ubermenu-item.ubermenu-active > .ubermenu-submenu-drop{ position: static !important; } /* Desktop dropdown: sit flush against the header's bottom border, no gap, no overlap. margin-top:0 alone isn't reliable here — this element is position:absolute with its `top` calculated by UberMenu's own JS (positionSubmenus()), and that value drifted between page loads in testing (+5px one load, -15px — genuine overlap — the next, with nothing else different), so margin-top:0 sometimes lands flush and sometimes doesn't depending on whatever that JS came up with. li/ul.ubermenu-nav/nav/.wrap.header-row are all position:static, so this element's actual containing block is

(position:sticky, the nearest positioned ancestor). top:100% is a plain CSS percentage of that containing block's own height — "exactly at the containing block's bottom edge" — with no JS calculation involved at all, so there's nothing left to drift between loads. */ /* UberMenu's "Shift" transition animates the panel in from margin-top:20px (closed) to margin-top:0 (open) over .3s — visible as the panel sliding up from below its final position, with the header-to-panel gap briefly showing partway through and closing as the animation finishes. The active-state rule below already forces margin-top:0 for the OPEN state, but the CLOSED state still starts at UberMenu's own 20px, so the browser dutifully animates between the two on every open — pinning margin-top:0 here too, unconditional on active state, removes the animated property's start/end difference entirely. Opacity still transitions (a fade, not a slide), which reads as intentional polish rather than a glitch. */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item > .ubermenu-submenu-drop{ margin-top: 0 !important; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item.ubermenu-active > .ubermenu-submenu-drop{ top: 100% !important; /* Centering: "Bound Submenu To" is set to Unbounded (checked the plugin's own settings before writing this — UberMenu's own description for that option says it explicitly expects the THEME to constrain an unbounded submenu: "bound by the next relatively positioned ancestor in your theme"). Tried toggling it "bound" instead — it shrinks the whole mega-panel to the width of just the trigger item (221px), which is right for a simple dropdown but wrong for a wide mega-panel, so reverted that. Left unbounded, the panel spans left:0 to the raw viewport edge instead of the site's actual 1240px content column, reading as uncentered on any screen wider than that. Same wrap-centering calc used everywhere else in this file for this exact problem (the search bar, the header dividers) — constrains the panel to the same left/right edges as the logo, nav, and CTA above it. */ left: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px) !important; right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px) !important; width: auto !important; } /* Height/leaking: also checked the plugin settings first — there's no backdrop/overlay option anywhere in UberMenu's admin (Position & Layout, Submenus, Style Customizations, Responsive & Mobile, Miscellaneous all checked). A dropdown panel that's shorter than the viewport will always let whatever's on the page behind it show through below its own bottom edge — the panel itself already sizes correctly to its content (confirmed: scrollHeight===clientHeight, nothing clipped), so there's no "height" to fix on the panel itself, just nothing covering the gap between its bottom and the screen's. A semi-transparent backdrop behind the open panel is the standard fix — reads as intentional regardless of viewport height, rather than chasing an exact height match. :has() (already used elsewhere in this file, e.g. the mobile body-scroll-lock trigger) toggles it based on whether any desktop submenu is currently active, no JS needed. z-index:15 sits below header (100) and the dropdown itself (20, from UberMenu's own CSS) but above ordinary page content (auto/no competing stacking context), so it covers the hero section etc. without covering the header or the dropdown. */ body:has(nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item.ubermenu-active > .ubermenu-submenu-drop)::after{ content: ''; position: fixed; inset: 0; background: rgba(0,0,51,0.4); z-index: 15; pointer-events: none; } /* The desktop mega-panel dropdown is built assuming a normal tall desktop/laptop viewport: it's position:absolute with UberMenu's own max-height:900px and overflow:hidden (not auto — no scrollbar, just a hard clip) once open. Originally only fixed for landscape phones specifically (~844-932px wide, which exceeds UberMenu's 768px responsive breakpoint and so gets this dropdown instead of the mobile accordion) via a max-height:500px media query, on the assumption that a normal desktop window is always tall enough for content to fit without needing its own scroll. That assumption broke once background scroll got locked while a desktop submenu is open (main.js) — before that, content taller than the viewport was still technically reachable by scrolling the PAGE (ugly, since the panel doesn't move with it, but reachable); locking the background removed that fallback entirely, so any viewport where content doesn't fit — not just short/landscape-phone ones — needs the panel to scroll internally instead. Unconditional now, not scoped to a height media query. var(--header-open-height) reuses the same live measurement main.js already keeps updated (on load and on resize, unconditionally — not gated to mobile view) for the mobile panel's own positioning: the real distance from the viewport's top to where the header visually ends, accounting for the WP admin bar, the utility bar, Dynamic Island insets, whatever's actually true for this device — so "100vh minus that" is the real remaining space below the header, not another hardcoded guess. */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item.ubermenu-active .ubermenu-submenu-type-mega{ max-height: calc(100vh - var(--header-open-height, 100px)) !important; overflow-y: auto !important; overscroll-behavior-y: contain; transform: translateZ(0); } /* Subcategory grid inside an open mega-panel: icon + title + description per row, three fixed columns with a divider line between them (not flowing columns — items stay put regardless of their own height, so the grid always reads left-to-right, top-to-bottom in list order). */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega{ display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 8px 0 !important; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega > .ubermenu-item-header{ padding: 16px 28px !important; margin: 0 !important; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega > .ubermenu-item-header:not(:nth-child(3n+1)){ border-left: 1px solid var(--line); } /* Icon, title, and description are three sibling inline elements in UberMenu's own markup (no wrapper around title+description) — flexbox would treat all three as separate row items and squeeze the description into a sliver. Grid positions them by cell instead: icon spans both rows in column 1, title/description stack in column 2, so the text column gets the full remaining width. */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target-with-image{ display: grid !important; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; padding: 0 !important; } /* UberMenu's own base CSS for the image_left layout gives .ubermenu-target-text (the class title and description both carry) a padding-left of 50px, then 1em, meant for its default float:left image technique — our grid above already handles the icon-to-text gap via column-gap, so that inherited padding was stacking on top of it and pushing the text much further right than intended. */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target-text{ padding-left: 0 !important; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-image{ grid-column: 1; grid-row: 1 / 3; width: 28px !important; height: 28px !important; margin-top: 2px; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target-title{ grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target-divider{ display: none; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target-description{ grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 400; color: var(--ink-soft); line-height: 1.45; white-space: normal; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-submenu-type-mega .ubermenu-target:hover .ubermenu-target-title{ color: var(--accent); } /* Animated Lottie icon on the five top-level category items — static on its first frame until hovered (nav-lottie-icons.js triggers play), same "calm at rest, brief flourish on hover" behavior as the original 6 hero icons. .nav-lottie-icon is inserted by that script, not present in the server-rendered markup. */ nav.ubermenu .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon{ display: flex !important; align-items: center; } /* .ubermenu-sub-indicator (the dropdown arrow) is position:absolute, right:10px, pinned relative to this same link — inline-flex above would shrink the link to hug just the icon+text, moving that positioning context and overlapping the arrow onto the text. Plain flex keeps the link full-width like it was before, so the arrow's existing absolute positioning still measures from the real right edge of the row. */ nav.ubermenu .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon .ubermenu-target-title{ flex-shrink: 0; } /* Desktop and mobile get their own gap/font-size — mobile reads a little tight at the desktop values once the row is this wide. */ nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon{ gap: 8px; } nav.ubermenu:not(.ubermenu-mobile-view) .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon .ubermenu-target-title{ font-size: 15px !important; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon{ gap: 12px; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target.has-lottie-icon .ubermenu-target-title{ font-size: 14px !important; } .nav-lottie-icon{ width: 28px; height: 28px; flex-shrink: 0; } .nav-lottie-icon svg{ width: 100%; height: 100%; display: block; } /* Business's bar-chart-growth artwork sits low in its own canvas — likely headroom reserved above it for the hover animation (bars/ arrow growing upward) — so at rest it reads as bottom-heavy next to the text. Nudging up within the fixed 28px container. !important because the Lottie player sets its own inline `transform` on this same

is the actual fix; .ubermenu-target then fills it as an ordinary block/grid child with no float of its own, no explicit width needed. Fixes the tap target too (same shrink-wrapped hit area, unnoticeable but real). */ nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-1{ float: none !important; width: 100% !important; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-1:not(:last-child) > .ubermenu-target::after{ content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--line); } /* Second, independent cause of the same "freeze then catch up" symptom: html has scroll-behavior:smooth (line ~25) for anchor-link scrolling elsewhere on the site (e.g. the homepage's #categories tab links). Continuous touch/trackpad scrolling fires many small scroll deltas in quick succession — each one restarts the smooth-scroll easing animation before the previous one finishes, so the visible content barely advances until the input stops, at which point the last animation finally completes and the content "jumps" to catch up. Scoped to the open mobile menu only (via the toggle button's own open-state class), so anchor-link smooth scrolling elsewhere on the site is untouched. */ html:has(.ubermenu-responsive-toggle-open){ scroll-behavior: auto !important; } /* UberMenu's own dropdown-arrow indicator on the top-level accordion rows (SERVICES/INDUSTRIES) sits only 10px from the row's own right edge by default — reads as cramped/too close to the edge. Once a row is active/open, UberMenu swaps the arrow for a SEPARATE close element — .ubermenu-sub-indicator-close, sitting flush at right:0 by default — so it needs the same treatment on its own. The two aren't the same size, though: the arrow is a 12px glyph, but the close element is a 28px-wide flex box (a bigger tap target, its own icon centered inside it) — matching `right` values lines up their BOXES' right edges, not the icons themselves, so the wider close box's glyph ends up visibly further left than the arrow's. 13.75px (vs the arrow's 24px) puts the close box's right edge far enough right that its centered icon lands at the same spot the arrow glyph does. The close element's own icon was fa-times (×) — swapped to fa-angle-up's glyph (still Font Awesome 5 Free Solid, same font already loaded, no extra request) via a raw content override, since nothing about the MARKUP itself is ours to change (both icons are UberMenu's own generated output) — an upward chevron reads as "this collapses" the same directional way the downward one reads as "this expands," rather than an unrelated × shape. Both bumped from 12px to 18px (noticeably larger than the 14px row title, where 12px read as undersized next to it) — sized identically so the open/ closed pair reads as one indicator flipping, not two different icons. */ nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target .ubermenu-sub-indicator{ right: 24px !important; font-size: 18px !important; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target .ubermenu-sub-indicator-close{ right: 13.75px !important; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target .ubermenu-sub-indicator-close i.fa-times{ font-size: 18px !important; } nav.ubermenu.ubermenu-mobile-view .ubermenu-item-level-0 > a.ubermenu-target .ubermenu-sub-indicator-close i.fa-times::before{ content: "\f106" !important; } /* Mobile header layout: toggle (left) / logo (center) / search (right) in a single row, matching the reference pattern — order-based so the markup itself doesn't need to change between desktop and mobile. Scoped to :has(...ubermenu-mobile-view) throughout so the toggle button's box styling (and everything else here) only ever applies once UberMenu itself has switched into mobile view — the toggle is display:none at desktop width by UberMenu's own CSS, and must stay that way; giving it display:flex unconditionally here was the bug that made it show up at desktop widths too. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view){ /* The base .header-row uses space-between to lay out 3 desktop items (logo / nav / cta). On mobile, once the search bar wraps to its own row, only 2 items are left in row 1 (toggle, logo) — space-between then shoves them to opposite ends instead of leaving the logo centered. flex-start + the logo's own auto side-margins (below) center it correctly regardless of how many siblings share row 1. */ justify-content: flex-start; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle{ width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; padding: 0; order: 1; flex-shrink: 0; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .logo-link{ order: 2; margin: 0 auto; min-width: 0; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .logo-mark{ height: 35px; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .header-cta{ order: 3; flex-shrink: 0; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .header-cta .btn-accent{ display: none; } .logo-mark{ display:flex; align-items:center; height: 40px; color: var(--ink); } .logo-mark svg{ height: 100%; width: auto; display:block; } .logo-link{ display:flex; align-items:center; } .header-cta{ display:flex; align-items:center; gap: 12px; flex-shrink:0; } /* Desktop only: small vertical rule separating the nav from the search icon. Skipped on mobile, where header-cta holds the compact search trigger in a totally different (order:3, edge-pinned) layout — a divider there wouldn't sit next to anything nav-related. */ .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) .header-cta{ padding-left: 20px; border-left: 1px solid var(--line); } .btn{ font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 7px; display:inline-flex; align-items:center; gap:8px; white-space: nowrap; } .btn-primary{ background: var(--ink); color:#fff; } .btn-primary:hover{ background: var(--ink-deep); } .btn-accent{ background: var(--accent); color: #fff; } .btn-accent:hover{ background: #144F8C; } .btn-ghost{ color: var(--ink); font-weight: 500; padding: 11px 14px; } .btn-ghost:hover{ color: var(--accent); } .header-cta .asp_w_container{ display:flex; align-items:center; flex: 0 0 auto; } /* Mobile: larger, borderless, more tappable toggle + search icons. The icon buttons stay pinned in the header row at all times — only the search INPUT breaks out to a full-width row below (see the .proinput rule further down), so the icon never visually "moves" or disappears when opened; it just morphs in place into an X. Sizing itself (40x40) is already set on the base rule above this comment — nothing new to add here. */ /* Replace UberMenu's bundled Font Awesome bars/times glyph (a much bolder weight than our own hand-drawn search icon) with matching thin lines: same 2px stroke, same navy, same rotate-to-X technique. The class never actually swaps between fa-bars/fa-times — UberMenu only toggles ubermenu-responsive-toggle-open on the button — so both states are keyed off that instead. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle i.fa-bars{ display: block; position: relative; width: 20px; height: 2px; background: #000033; border-radius: 1px; font-size: 0; transition: background .15s ease; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle i.fa-bars::before, .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle i.fa-bars::after{ content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: #000033; border-radius: 1px; transition: transform .15s ease, top .15s ease; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle i.fa-bars::before{ top: -6px; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle i.fa-bars::after{ top: 6px; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle-open i.fa-bars{ background: transparent; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle-open i.fa-bars::before{ top: 0; transform: rotate(45deg); } .header-row:has(nav.ubermenu.ubermenu-mobile-view) .ubermenu-responsive-toggle-open i.fa-bars::after{ top: 0; transform: rotate(-45deg); } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1 .promagnifier{ width: 40px !important; height: 40px !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1 .promagnifier svg{ width: 24px !important; height: 24px !important; } /* The icon is now our own hand-drawn stroke-only circle+line (see main.js, which also embeds stroke="#000033"/fill="none" directly in the markup) — not ASP's original solid-fill path. This rule used to fight ASP's own fill:...!important on that old path; now that there's no path left, an unqualified fill:#000033 here would win over the icon's own fill="none" and render it as a solid disc instead of a hollow ring, so force fill:none explicitly instead. */ .header-cta #ajaxsearchpro1_1 .promagnifier svg{ fill: none !important; } /* Desktop never got the explicit square sizing mobile has (line ~364 above) — some rule sets the svg's height to 100% of its 28px button without a matching width override, stretching the (natively square, 22x22) icon into a 22x28 non-square box. */ .header-cta #ajaxsearchpro1_1 .promagnifier svg{ width: 20px !important; height: 20px !important; } /* Now that the svg is a fixed 20px inside its 28px button, it's just a normal top-aligned block-flow child (neither .promagnifier nor .innericon is a flex container here) — center it properly instead of leaving it flush at the top. */ .header-cta #ajaxsearchpro1_1 .promagnifier .innericon{ display: flex !important; align-items: center !important; justify-content: center !important; } /* .probox is only 28px tall (ASP's own sizing) but the magnifier button inside it is pinned to 40px above — align-items:stretch (ASP's default) can't actually stretch a child with a fixed height, so it falls back to top-aligning it, pushing the icon down instead of centering the overflow evenly. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1 .probox{ align-items: center !important; } /* asp_w_container/probox/#ajaxsearchpro1_1 all default to sizing themselves off their content, which was bubbling up through header-cta and perturbing the row's flex layout (shoving the centered logo sideways), even though the actual VISIBLE input escapes separately via its own negative-margin breakout below. Pin every level to the icon's own 40px at all times in mobile view, open or closed, so nothing here can ever influence the row's layout — only the .proinput breakout (unaffected by a fixed-width, non-overflow-hidden ancestor) is allowed to visually go full-width. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) .header-cta, .header-row:has(nav.ubermenu.ubermenu-mobile-view) .header-cta .asp_w_container, .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1, .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1 .probox{ width: 40px !important; max-width: 40px !important; min-width: 0 !important; flex: 0 0 40px !important; overflow: visible !important; /* ASP's own .probox has a default margin:0 8px — inside an already exactly-icon-sized 40px box that shifts it 8px off from its parent's (correctly wrap-aligned) edge, overflowing the right side past the page's own 32px content padding. */ margin: 0 !important; } /* ASP's own .probox styling (Custom CSS field, admin > Ajax Search Pro) draws a bordered/background box around the icon at all times. On mobile the actual text field now lives in its own full-width block below (.proinput, absolutely positioned) — .probox here is just the 40px icon slot in both states, so the border reads as a stray outline around the icon either way and is stripped in both. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1 .probox{ border: none !important; border-radius: 0 !important; background: transparent !important; } /* WebKit/Blink browsers draw their own native round "clear" button inside type="search" inputs on real devices (not reproduced by desktop dev-tool viewport emulation, which is why this wasn't visible while building/testing) — it sat right next to our own custom X, reading as two overlapping close icons. Ours already covers "clear + close", so suppress the native one everywhere. */ #ajaxsearchpro1_1 input[type="search"]::-webkit-search-cancel-button, #ajaxsearchpro1_1 input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; display: none; } /* Search icon morphs into an X while open. This restyles .promagnifier itself (rather than swapping to ASP's separate .proclose element) specifically so the SAME element stays the click target — .proclose's own click handler only clears the search text, it doesn't collapse the compact box, so swapping to it would silently break "click to close". Drawing the X with pseudo-elements keeps the existing close-compact click handler intact. */ #ajaxsearchpro1_1 .promagnifier{ position:relative; } #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier svg{ opacity:0; } #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::before, #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::after{ content:''; position:absolute; top:50%; left:50%; width:16px; height:2px; background:#1B6FC4; border-radius:1px; transition: transform .15s ease; } /* Match the hamburger's navy AND its 20px thin-line size on mobile specifically (desktop keeps the original 16px accent-blue X). */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::before, .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::after{ background: #000033; width: 20px; } #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::before{ transform:translate(-50%,-50%) rotate(45deg); } #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::after{ transform:translate(-50%,-50%) rotate(-45deg); } /* Mobile: once opened, only the INPUT breaks out to a full-width row below the header — the icon stays exactly where it always is, at the end of the header row, and just visually becomes the X above. This anchors off

itself (already position:sticky, so it's a valid containing block) rather than the narrow .probox — .probox sits off to the right edge, not centered on the viewport, so a vw/negative-margin break-out computed from ITS width doesn't cancel out correctly and blows the layout wide. Positioning absolutely against the full-width header sidesteps that. top is a FIXED px, not a %, because .header-row already reserves a 24px row-gap for the mobile nav's own wrapped line even while that nav is collapsed to 0 height — a % of

's total height inherits that pre-existing dead space on top of whatever we add here, which is what was producing the oversized gap. Anchoring to a fixed offset sidesteps it entirely. 62 (+ the 8px margin below = 70px visual start) lands the input's own top edge exactly on the divider below — i.e. exactly at header-row's own bottom edge (70px: 15 padding + 40px icon content + 15 padding) — rather than a few px earlier, into the icon row's own space. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput{ position: absolute; /* .proinput is anchored to

, which spans the full viewport — but the rest of the header's content sits inside .header-row, which is also .wrap (max-width:1240px, centered, 32px padding). At viewports wider than ~1240px+64px these diverge: a flat left/right:0 hugs the raw viewport edge while the logo/nav/CTA stay centered in the 1240px column, so the search bar visibly spills past the rest of the header's content the wider the screen gets. This calc reproduces .wrap's own centering + padding math exactly, so the search bar's edges always land in the same place the logo and CTA do, at any width. */ left: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 20px); right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 20px); top: 62px; /* ASP's own inline CSS sets a stray margin:0 0 0 10px on .proinput — override in full (not just margin-top) so that leftover 10px doesn't shift the calc'd left position over. */ margin: 8px 0 0 0 !important; width: auto; max-width: none; box-sizing: border-box; z-index: 20; /* ASP's own CSS sets .proinput{height:100%}, meant to fill .probox (28px). Percentage heights on an absolutely-positioned element resolve against the nearest POSITIONED ancestor instead — which is now

— so without this override the input balloons to header's full height and overlaps content below it. Pinned to 70px to match the icon row's own (now-equal) height. */ height: 70px !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput form{ height: 100% !important; width: 100% !important; } /* The outer box was already sized, but the actual text was still ASP's default 12px with an off top-heavy padding (2px 0 0), which read as small and poorly centered inside the taller box. Flex-center the form so the (naturally-sized) input centers within it — forcing height:100% onto the INPUT itself (as an earlier version of this rule did) defeats that: the input becomes as tall as its 72px container with nothing left to center, and pairing that with a matching line-height is unreliable on elements specifically (it can misalign the text/cursor instead of centering it, unlike on a div/span). Leaving the input at its natural height and centering it via the flex parent is the robust version of the same effect. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput form{ display: flex !important; align-items: center !important; } /* ASP's ghost-text autocomplete input is a SECOND flex item sharing this same form, and it also has width:100% from ASP's own CSS — the two compete for space and flex-shrink squeezes both down to roughly half the row instead of the visible .orig input getting it all. Taking it out of flow entirely (it's meant to overlay .orig exactly, not sit beside it) frees the real input to actually fill the row. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.autocomplete{ position: absolute !important; width: 0 !important; flex: 0 0 0 !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig{ /* ASP's own input has an intrinsic/content-based width (measured at 270px against a much wider row) and nothing tells it to grow to fill the flex form — width:100% stretches it the rest of the way to the row's edge, matching the reference's full-width bar. */ width: 100% !important; box-sizing: border-box !important; font-size: 18px !important; line-height: normal !important; padding: 0 !important; padding-left: 0 !important; /* Room for both the new functional search-trigger button AND .proclose/.proloading, which can show at the same time once there's typed text. */ padding-right: 65px !important; } /* The visible placeholder text ("Search") is drawn by a SEPARATE pseudo-element, not the input's own font-size — ASP ships its own ::-webkit-input-placeholder rule fixed at 12px that the input's font-size change above never touches. That's the actual cause of the "small, low-looking" placeholder text: a 12px glyph rendering inside a text box laid out for 28px reads as sitting low/small relative to where properly-sized text would land. */ /* Split into separate rules (not comma-grouped) — an unrecognized vendor-prefixed pseudo-element in a grouped selector list can invalidate the entire rule in stricter engines. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::-webkit-input-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig:-ms-input-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::-moz-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } /* Real, independently-clickable search-trigger button (added by main.js — not ASP markup), sitting flush at .proinput's own right edge — .proclose/.proloading now sit 36px further in (28px width + 8px gap) so the two never overlap once there's typed text. Unlike .proclose (anchored to

, elsewhere in the DOM), this button is a CHILD of .proinput — which is itself position:absolute, so it's the containing block here: right:0 lines up with .proinput's own edge directly, and (70-28)/2=21, +2px for the same optical nudge this had at the old 72px height, centers a 28px button vertically in its 70px box. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput .asp-search-trigger{ display: flex !important; align-items: center; justify-content: center; position: absolute; right: 0; top: 23px; width: 28px; height: 28px; padding: 0; background: none; border: none; cursor: pointer; z-index: 22; } .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput .asp-search-trigger svg{ width: 24px; height: 24px; } /* Relocate ASP's own .proclose (still the real clear-text button — same click handler, just repositioned) and its loading spinner from the default spot inside .probox down into the search bar's own right end, so users see them where the automatic search is actually happening — anchored to

, the same containing block .proinput already uses, so the two align on one coordinate system. Vertical center is proinput's own visual center: 62px top + 8px margin-derived offset + half of 70px height = 105px from header's top; centering a 28px icon there needs a top of 91px. */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proclose{ position: absolute !important; left: auto !important; /* Sits 36px further in than .proinput's own right edge (matching the search-trigger button's own width + an 8px gap), now that the trigger button itself has taken the flush outer-edge slot these used to occupy. 56 = 20 (proinput's own inset) + 36. */ right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 56px); top: 91px; z-index: 22; } /* Loading spinner sits in the EXACT same slot as .proclose (not beside it) — the two are meant to swap in place: ASP shows the spinner while a search is in flight and hides it in favor of .proclose once results land, so they need identical position/size for that swap to read as "the icon changed", not "a second icon appeared". */ .header-row:has(nav.ubermenu.ubermenu-mobile-view) #ajaxsearchpro1_1[data-asp-compact="open"] .proloading{ position: absolute !important; right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 56px); top: 91px; width: 28px; height: 28px; z-index: 22; margin-top: 1px; } /* Now that the collapsed nav's row-gap is zeroed out above, header's natural height (70px: 15 top padding + 40px icon content + 15 bottom padding) is 70px short of the 140px needed for the absolutely-positioned input (62 top offset + 8 margin + 70 height) to fit without overlapping what's below — reserve exactly that deficit, only while open. Padding-bottom landing on the same 70px as the row height and the input height isn't a coincidence: the input's own top is deliberately set (see .proinput above) to start exactly at the row's bottom edge, so all three end up equal. */ header:has(nav.ubermenu.ubermenu-mobile-view):has(#ajaxsearchpro1_1[data-asp-compact="open"]){ padding-bottom: 70px; } /* DESKTOP: same clean full-width search row treatment as mobile (borderless, thin separator lines, block layout that pushes content down) instead of the old compact 280px inline pill expansion — matches the reference, and now matches mobile's own 70px height too. Numbers below use the desktop row's own dimensions: .proinput's own top:73px (see that rule below — DevTools-measured against the 87px-tall header, not recomputed from padding/content here) + 8px margin + 70px height = 151px needed from header's top for the input to fit without overlap; header's own natural (closed) height is 87px, 64px short of that. */ .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1 .probox{ border: none !important; border-radius: 0 !important; background: transparent !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) .header-cta .asp_w_container, .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1, .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1 .probox{ width: 30px !important; max-width: 30px !important; min-width: 0 !important; flex: 0 0 30px !important; overflow: visible !important; margin: 0 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::before, .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .promagnifier::after{ background: #000033; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput{ position: absolute; /* Same reasoning as the mobile version above — .proinput is anchored to the full-viewport

, but the rest of the header's content is centered inside .header-row's 1240px .wrap. This calc reproduces that same centering + padding so the search bar's edges track the logo/nav/CTA at any screen width instead of hugging the raw viewport edge. */ left: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px); right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px); /* Was 60px (14 padding-top + 46px assumed tallest row-1 content). Adding the top-level Lottie icons grew that row to ~59px (measured header height 87px, up from 74px) — 14 + 59 = 73px. */ top: 73px; /* ASP's own inline CSS sets a stray margin:0 0 0 10px on .proinput — override in full (not just margin-top) so that leftover 10px doesn't shift the calc'd left position over. */ margin: 8px 0 0 0 !important; width: auto; max-width: none; box-sizing: border-box; z-index: 20; height: 70px !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput form{ height: 100% !important; width: 100% !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput form{ display: flex !important; align-items: center !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.autocomplete{ position: absolute !important; width: 0 !important; flex: 0 0 0 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig{ width: 100% !important; box-sizing: border-box !important; font-size: 18px !important; line-height: normal !important; padding: 0 !important; padding-left: 0 !important; padding-right: 65px !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::-webkit-input-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig:-ms-input-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput input.orig::-moz-placeholder{ font-size: 18px !important; line-height: normal !important; opacity: 1 !important; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput .asp-search-trigger{ display: flex !important; align-items: center; justify-content: center; position: absolute; right: 0; top: 23px; width: 28px; height: 28px; padding: 0; background: none; border: none; cursor: pointer; z-index: 22; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proinput .asp-search-trigger svg{ width: 24px; height: 24px; } /* Desktop equivalent of the mobile relocation (.proclose + spinner, header icon stays put). Vertical center is proinput's own visual center: 73px top + 8px margin + half of 70px height = 116px from header's top; centering a 28px icon there needs a top of 102px. */ .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proclose{ position: absolute !important; left: auto !important; right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 68px); top: 102px; z-index: 22; } .header-row:not(:has(nav.ubermenu.ubermenu-mobile-view)) #ajaxsearchpro1_1[data-asp-compact="open"] .proloading{ position: absolute !important; right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 68px); top: 102px; width: 28px; height: 28px; z-index: 22; margin-top: 1px; } header:not(:has(nav.ubermenu.ubermenu-mobile-view)):has(#ajaxsearchpro1_1[data-asp-compact="open"]){ padding-bottom: 64px; } /* Same reasoning/technique as the mobile version above — pseudo- element on

, inset to the wrap's 32px content edge rather than a border-bottom on .header-row (which would span the wrap's own full 1240px-max width, sitting 32px past the content). top=87px is .header-row's actual measured natural height (grew from 74px once the top-level Lottie icons were added — DevTools-measured, not recalculated from the padding/content breakdown this time). */ header:not(:has(nav.ubermenu.ubermenu-mobile-view)):has(#ajaxsearchpro1_1[data-asp-compact="open"])::after{ content: ''; position: absolute; left: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px); right: calc(max(0px, (100vw - var(--maxw-header)) / 2) + 32px); top: 87px; height: 1px; background: var(--line); } /* Was static, in normal document flow — meaning it scrolled away with the rest of the page like any other content the moment the user swiped/scrolled, even though the header (and the search bar itself) stayed pinned via position:sticky above it. A first attempt fixed that by anchoring it to

's live bottom edge via a JS-measured CSS variable (position:fixed; top:var(--header-open-height)) — but that variable only updates in response to JS-observed events (scroll/resize/attribute changes), and a fast scroll/fling outruns how quickly those fire, so the panel visibly lagged behind or detached from the header for a frame or more. Moved to be an actual DOM child of

instead (see header.php) and positioned absolute; top:100% — this tracks header's real (sticky) position the same way .proinput already does, natively, with zero JS in the loop, so there's nothing for a fast scroll to outrun. max-height still uses the JS-measured variable, but only to cap how tall the (separately, correctly-positioned) panel can grow before it needs its own internal scrollbar — being a frame stale there just means the cap is briefly a few px off, not a visible detached gap. */ .site-search-results{ position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-open-height, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg-panel); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(10,32,51,0.18); z-index: 5; } .site-search-results:empty, .site-search-results .wrap:empty{ display:none; } /* Divider between the search box and its results, inset to match the results text's own left/right margin (same 32px/20px the .wrap padding below uses) rather than a full-width border — a plain border can't be inset on its own, hence the pseudo-element. Ajax Search Pro's own results markup (.asp_w, .asp_nores, etc.) sits flush against .site-search-results' own top edge with an opaque white background and, on some of its own wrapper divs, a z-index — which sits on top of this z-index:auto pseudo-element in testing despite being position:static (where z-index should have no effect at all) — an explicit z-index here is the pragmatic fix, empirically verified against ASP's real rendered output rather than assumed from the stacking spec alone. */ .site-search-results::before{ content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--line); z-index: 2; } body:has(nav.ubermenu.ubermenu-mobile-view) .site-search-results::before{ left: 20px; right: 20px; } .site-search-results .wrap{ padding: 0 32px; } /* Mobile header row's icons sit at a tighter 20px inset (see .header-row:has(nav.ubermenu.ubermenu-mobile-view) above) — follow suit here too, or result text would land 12px right of where the hamburger/search icons above it do. */ body:has(nav.ubermenu.ubermenu-mobile-view) .site-search-results .wrap{ padding: 0 20px; } /* ASP's own results markup carries its own small left paddings (.asp_content: 8px, .item: 3px) that stacked with the wrap's own — zero those out so the results text lands exactly at the wrap's 32px, matching the hamburger/logo/search-text alignment, instead of 32px + ASP's leftover ~11px. */ .site-search-results .asp_content{ padding-left: 0 !important; } .site-search-results .item{ padding-left: 0 !important; } .site-search-results .asp_w_container{ width:100% !important; } .site-search-results .asp_r{ position:static !important; width:100% !important; max-width:none !important; margin:0 !important; border:none !important; box-shadow:none !important; padding: 24px 0 !important; } /* ===== Hero ===== */ .hero{ position:relative; overflow:hidden; background: var(--ink); color:#fff; padding: 88px 0 0; } .hero-hexfield{ position:absolute; inset:0; opacity:0.08; background-image: repeating-linear-gradient(60deg, transparent, transparent 51px, rgba(255,255,255,0.6) 51px, rgba(255,255,255,0.6) 53px), repeating-linear-gradient(-60deg, transparent, transparent 51px, rgba(255,255,255,0.6) 51px, rgba(255,255,255,0.6) 53px), repeating-linear-gradient(0deg, transparent, transparent 51px, rgba(255,255,255,0.6) 51px, rgba(255,255,255,0.6) 53px); background-size: 88px 152px; pointer-events:none; } .hero-inner{ position:relative; display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; padding-bottom: 56px; } .hero h1{ font-family: var(--display); font-weight: 600; font-size: clamp(2.9375rem, 2.38rem + 1.04vw, 3.625rem); line-height: 1.12; letter-spacing: -0.01em; margin: 18px 0 20px; } .hero h1 em{ font-style: italic; color: var(--accent); font-weight: 500; } .hero p.lede{ font-size: 17px; color: #C6D0D9; max-width: 460px; margin-bottom: 32px; } .audience-toggle{ display:inline-flex; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; padding: 4px; margin-bottom: 24px; } .audience-toggle button{ font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 6px; color: #C6D0D9; } .audience-toggle button.active{ background: #fff; color: var(--ink); } .audience-panel{ display:none; } .audience-panel.active{ display:block; } .quick-links{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 28px; } .quick-links a{ font-size: 13.5px; font-weight: 500; padding: 9px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.22); color: #E7ECEF; } .quick-links a:hover{ border-color: var(--accent); color: var(--accent); } .hero-cta-row{ display:flex; gap:14px; align-items:center; } .hero-cta-row .btn-ghost{ color:#E7ECEF; } .hero-cta-row .btn-ghost:hover{ color: var(--accent); } .hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; color: #fff; } .hero-visual svg{ width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35)); opacity: 0.95; } /* ===== Gravity Forms (global, every form) ===== Standing preference: no form title/description heading, and no top-of-form validation-summary banner -- per-field error messages already cover invalid fields, a duplicate list at the top is redundant. Applies to every gform_wrapper, not one specific form ID, so a newly created form gets this automatically. The proper place to turn the summary off is each form's own validationSummary setting (already false on forms 1-3) -- this is the CSS backup for that, and the only mechanism at all for the heading, which doesn't have an equivalent per-form setting. !important -- confirmed live, GF's own theme CSS sets display:flex on .gform_validation_errors at the same specificity this selector has without it, and was winning the tie. */ [id^="gform_wrapper_"] .gform_heading, [id^="gform_wrapper_"] .gform_validation_errors { display: none !important; } /* ===== Quote widget (testing ground — functional layout, icons/spacing to be revisited once the look and feel gets customized) ===== */ .quote-widget{ background:#fff; border-radius:16px; padding:22px 22px 24px; width:100%; min-width:0; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45); color: var(--ink); } /* Calmer, on-brand validation styling instead of Gravity Forms' default red — the summary banner is disabled via the form's own validationSummary setting, this just covers the remaining field-level message. */ #gform_wrapper_1 .gform_validation_errors{ display:none; } /* Page 2 of form 1 is never meant to be seen inside the widget -- a successful zip redirects to the dedicated product page instead. GF shows this page briefly before the redirect fires (a ~50ms internal delay in GF's own JS), so this has to stay permanently hidden rather than toggled reactively. */ #gform_page_1_2{ display:none !important; } .quote-widget__redirecting{ display:none; text-align:center; padding:32px 8px; font-family: var(--sans); color: var(--ink-soft); } .quote-widget__redirecting strong{ color: var(--ink); display:block; margin-bottom:6px; font-size:16px; } #gform_wrapper_1 .gfield_validation_message, #gform_wrapper_1 .validation_message{ color: var(--ink-soft); background: var(--accent-soft); border: none; border-radius: 8px; padding: 10px 12px; font-weight: 500; } #gform_wrapper_1 .gfield_validation_message svg, #gform_wrapper_1 .gfield_validation_message .gform-icon{ display:none; } .hero-visual.quote-widget{ display:block; min-width:0; } .quote-widget__label{ font-size:19px; font-weight:700; text-align:center; margin: 2px 0 16px; } .quote-widget__tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:18px; } .quote-widget__tab{ flex:1; font-family: var(--sans); font-size:14px; font-weight:600; padding:10px 0; color: var(--ink-soft); border-bottom:2px solid transparent; } .quote-widget__tab.active{ color: var(--accent); border-bottom-color: var(--accent); } .quote-widget__panel{ display:none; } .quote-widget__panel.active{ display:block; } .quote-widget__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .quote-widget__item{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border:1px solid var(--line); border-radius:10px; font-family: var(--sans); font-size:12.5px; font-weight:600; color: var(--ink); text-align:center; line-height:1.25; transition: border-color .15s ease, background .15s ease; } .quote-widget__item:hover{ border-color: var(--accent); background: var(--accent-soft); } .quote-widget__icon{ width:30px; height:30px; } .quote-widget__icon svg{ width:100%; height:100%; } .quote-widget__back{ font-family: var(--sans); font-size:13px; font-weight:600; color: var(--accent); margin-bottom:14px; } .quote-widget__back:hover{ text-decoration: underline; } /* Matches acrisure.com's quote flow: the title steps up once on desktop, tab/tile labels stay flat at every width -- same 1024px breakpoint as the rest of the theme, not a new one. */ @media (min-width: 1024px){ .quote-widget__label{ font-size: 25px; line-height: 1.2; } } /* ===== Trust bar ===== */ .trust-bar{ background: var(--ink-deep); border-top: 1px solid rgba(255,255,255,0.08); } .trust-row{ display:grid; grid-template-columns: repeat(3,1fr); padding-top: 22px; padding-bottom: 22px; } .trust-item{ text-align:center; padding: 0 16px; border-left: 1px solid rgba(255,255,255,0.1); } .trust-item:first-child{ border-left:none; } .trust-item .num{ font-family: var(--display); font-size: 26px; font-weight: 600; color: #fff; } .trust-item .lbl{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8FA0AE; margin-top: 4px; } /* ===== Category section ===== */ .section{ padding-top: 96px; padding-bottom: 96px; } /* Single source of truth for spacing around every divider — the sections on either side both zero their own padding-top/bottom (see template) so this margin is the ONLY thing controlling the gap, consistently, on every section transition. */ .section-divider{ border: none; border-top: 1px solid var(--line); margin: 40px 0; } .section-head{ max-width: 620px; margin-bottom: 24px; } .section-head h2{ font-family: var(--display); font-size: clamp(2.125rem, 1.55rem + 0.89vw, 2.625rem); font-weight: 600; margin-top: 12px; letter-spacing: -0.01em; } .section-head p{ color: var(--slate); font-size: 15.5px; margin-top: 12px; } .hex-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hex-card{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 20px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hex-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(10,32,51,0.18); border-color: var(--accent); } .hex-icon{ width: 52px; height: 52px; margin-bottom: 18px; position:relative; } .hex-icon svg{ width:100%; height:100%; } .hex-card h3{ font-size: 16.5px; font-weight: 600; margin-bottom: 8px; } .hex-card p{ font-size: 13.5px; color: var(--slate); line-height:1.5; margin-bottom: 14px; } .hex-card .explore{ font-size: 13px; font-weight: 600; color: var(--accent); display:inline-flex; align-items:center; gap:5px; } .hex-card .explore::after{ content:"→"; transition: transform .15s ease; } .hex-card:hover .explore::after{ transform: translateX(3px); } /* ===== Icon animations (hover-triggered) ===== */ /* Every icon is fully drawn and recognizable at rest. Hover adds a light flourish only — nothing about the base shape ever depends on :hover. */ .hex-icon svg *{ transform-box: fill-box; transform-origin: center; } /* Life & Annuities: pulse ring blooms outward from the heartbeat line */ .icon-ring{ opacity: 0; transform: scale(0.6); } .hex-card:hover .icon-ring{ animation: iconPulseRing 1.1s ease-out; } @keyframes iconPulseRing{ 0%{ opacity: 0.9; transform: scale(0.5); } 100%{ opacity: 0; transform: scale(1.7); } } /* Health & Medicare: cross gives a gentle heartbeat bounce, ring blooms */ .icon-cross{ transition: transform .3s ease; } .hex-card:hover .icon-cross{ animation: iconBeat .5s ease; } @keyframes iconBeat{ 0%, 100%{ transform: scale(1); } 35%{ transform: scale(1.14); } 60%{ transform: scale(0.97); } } /* Auto: wheels spin, car gives a small forward nudge */ .icon-car, .icon-wheel{ transition: transform .35s ease; } .hex-card:hover .icon-car{ transform: translateX(2px); } .hex-card:hover .icon-wheel{ transform: translateX(2px) rotate(300deg); } /* Business: bars give a staggered growth pulse (already at full height) */ .icon-bar{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); transform-origin: bottom; } .hex-card:hover .icon-bar1{ animation: iconGrow .45s ease; animation-delay: 0s; } .hex-card:hover .icon-bar2{ animation: iconGrow .45s ease; animation-delay: .07s; } .hex-card:hover .icon-bar3{ animation: iconGrow .45s ease; animation-delay: .14s; } @keyframes iconGrow{ 0%, 100%{ transform: scaleY(1); } 50%{ transform: scaleY(1.18); } } /* Bonds: seal gives a satisfying little stamp bounce */ .icon-seal{ transition: transform .3s ease; } .hex-card:hover .icon-seal{ animation: iconStamp .45s cubic-bezier(.34,1.56,.64,1); } @keyframes iconStamp{ 0%{ transform: scale(1) rotate(0deg); } 40%{ transform: scale(1.18) rotate(-6deg); } 100%{ transform: scale(1) rotate(0deg); } } /* ===== Process ===== */ .process-section{ background: var(--bg-panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .process-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .process-step{ position:relative; padding-left: 0; } .process-num{ font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 14px; display:block; } .process-step h3{ font-size: 19px; font-weight: 600; margin-bottom: 10px; font-family: var(--display); } .process-step p{ font-size: 14.5px; color: var(--slate); line-height:1.6; } /* ===== Testimonial ===== */ .testimonial-section{ padding: 96px 0; } .testimonial-card{ max-width: 760px; margin: 0 auto; text-align:center; } .quote-mark{ font-family: var(--display); font-size: 64px; color: var(--accent); line-height:1; margin-bottom: 8px; } .testimonial-card p.quote{ font-family: var(--display); font-size: 25px; font-weight: 500; line-height:1.45; color: var(--ink); margin-bottom: 24px; } .testimonial-attrib{ font-family: var(--mono); font-size: 12.5px; color: var(--slate); letter-spacing: 0.02em; } /* ===== Final CTA ===== */ .final-cta{ background: var(--ink); color:#fff; padding: 48px 0; text-align:center; } .final-cta h2{ font-family: var(--display); font-size: 32px; font-weight: 600; margin-bottom: 14px; } .final-cta p{ color:#C6D0D9; margin-bottom: 30px; font-size: 15.5px; } .final-cta .btn-row{ display:flex; gap:14px; justify-content:center; } /* ===== Footer ===== */ footer{ background: var(--ink-deep); color: #8FA0AE; padding: 56px 0 28px; font-size: 13.5px; } .footer-grid{ display:grid; grid-template-columns: 1.2fr repeat(6, 1fr); gap: 20px; margin-bottom: 40px; } .footer-col h5{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6E8494; margin-bottom: 14px; } .footer-col ul li{ margin-bottom: 8px; } .footer-col ul li a:hover{ color: var(--accent); } .footer-logo{ display:block; width: 130px; height: 37px; color:#fff; opacity:0.9; margin-bottom: 14px; } .footer-logo svg{ width:100%; height:100%; display:block; } .footer-brand p{ max-width: 240px; line-height:1.6; color:#6E8494; } .footer-bottom{ padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:flex-start; gap: 24px; } .footer-legal{ color: #5A6D7A; font-size: 12px; line-height: 1.6; } .footer-legal p{ margin-bottom: 8px; } @media (max-width: 1080px){ .hex-grid{ grid-template-columns: repeat(3,1fr); } .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 860px){ .hero-inner{ grid-template-columns: 1fr; } .hero-visual{ display:none; } .hero h1{ font-size: 34px; } .trust-row{ grid-template-columns: repeat(3,1fr); gap: 18px 0; } .hex-grid{ grid-template-columns: 1fr 1fr; } .process-grid{ grid-template-columns: 1fr; gap: 32px; } .footer-grid{ grid-template-columns: 1fr 1fr; } } /* ===== Coverage subcategory pages (Home Insurance, and template for the other ~30 subcategory pages) ===== */ .coverage-hero{ position: relative; background: var(--ink); overflow: hidden; min-height: 600px; display: flex; align-items: center; } .coverage-hero__wrap{ position: relative; z-index: 2; width: 100%; } .coverage-hero__content{ display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 550px; padding: 72px 0; } .coverage-hero__rule{ width: 40px; height: 3px; background: #C9D3DC; border-radius: 2px; margin-top: 6px; } .coverage-hero .eyebrow{ color: #C9D3DC; font-weight: 700; } .coverage-hero h1{ font-family: var(--display); font-weight: 600; color: #fff; font-size: clamp(2.25rem, 5vw + 0.5rem, 4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0; } /* Some coverage-page titles use br.br-desktop for a deliberate 3-line break on desktop — hidden below 1024px so mobile/tablet just wraps naturally instead of forcing the same short lines onto a narrow screen, matching this site's own desktop breakpoint everywhere else. br.br-mobile is the inverse — a break point that only makes sense at a narrow width (different word grouping than the desktop break), hidden once desktop's own breaks take over. */ .coverage-hero h1 br.br-desktop{ display: none; } .coverage-hero h1 br.br-mobile{ display: inline; } @media (min-width: 1024px){ .coverage-hero h1 br.br-desktop{ display: inline; } .coverage-hero h1 br.br-mobile{ display: none; } } /* A title using br-mobile is asking for a specific 2-line grouping at narrow widths — the fluid clamp's own 36px floor is a hair too wide for some phrases to actually land on 2 lines at small phone widths (measured: "Growing Businesses" needs ~348px, only ~311px available at 375px viewport). Scoped to :has(br.br-mobile) specifically, so titles that don't request a mobile break keep the normal fluid size. */ @media (max-width: 600px){ .coverage-hero h1:has(br.br-mobile){ font-size: 30px; } } .coverage-hero__body{ font-family: var(--sans); color: #C9D3DC; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.1875rem); line-height: 1.7; max-width: 640px; margin: 0; } .coverage-hero__actions{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .coverage-hero__contact{ display: flex; align-items: center; gap: 10px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.3); font-family: var(--sans); } .coverage-hero__contact-text{ display: flex; flex-direction: column; gap: 2px; } .coverage-hero__contact-label{ font-size: 13px; color: #C9D3DC; } .coverage-hero__contact-phone{ font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; } .coverage-hero__contact-phone:hover{ color: var(--accent-soft); } /* Full-bleed background photo — text (.coverage-hero__wrap) sits on top of it via z-index, not in its own column beside it. Rebuilt for this after the split (text-left/photo-right column) layout turned out to be the wrong shape for a text-over-photo vignette treatment: the gradient below now reads relative to the FULL hero width, since there's no separate media column left to calculate percentages against. */ .coverage-hero__media{ position: absolute; inset: 0; } .coverage-hero__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .coverage-hero__media::before{ content:""; position:absolute; inset:0; z-index:1; background: /* soft vignette toward the corners, subject/right side untouched */ radial-gradient(ellipse at 68% 45%, rgba(0,0,51,0) 42%, rgba(0,0,51,0.10) 70%, rgba(0,0,51,0.26) 100%), /* Dark scrim behind the text. The headline's actual right edge lands around ~50% of the hero width (measured directly), so the curve holds strong opacity across the full 0-35% text zone and only starts fading after that — a pure smoothstep across the whole width faded fast enough through the middle that it was down to ~4% opacity by 48%, right where "Home." actually sits, which is what made the headline hard to read over the house. Still a smoothstep shape (not linear steps) for the fade itself, just doesn't start fading until past the text. */ linear-gradient(90deg, var(--ink) 0%, rgba(0,0,51,0.96) 10%, rgba(0,0,51,0.92) 20%, rgba(0,0,51,0.88) 27%, rgba(0,0,51,0.78) 35%, rgba(0,0,51,0.63) 42%, rgba(0,0,51,0.46) 50%, rgba(0,0,51,0.29) 57%, rgba(0,0,51,0.14) 65%, rgba(0,0,51,0.04) 72%, rgba(0,0,51,0) 80% ), /* subtle bottom darkening for grounding */ linear-gradient(0deg, rgba(0,0,51,0.20) 0%, rgba(0,0,51,0) 22%); } /* ---- Full-width headers/body text on coverage pages ---- */ /* The sitewide .section-head{max-width:620px} caps headings and intro copy for a section that's immediately followed by a card grid (the grid fills the rest of the row, so a narrower heading above it reads fine there). This template's sections don't all have that grid directly under the heading, so the same cap left an inconsistent, capped-for-no-visible-reason width from section to section. Scoped to this page template (not the sitewide default, which page.php/index.php/search.php still rely on) so every section's heading and body text on every coverage page uses the full column width consistently. A narrower reading-width cap was tried here instead (var(--maxw-text), 760px) but reads as a bug — an obvious empty gap on the right — now that the page shell is wide and fluid; matching the shell avoids that regardless of how wide --maxw grows. */ body.page-template-template-coverage-page-php .section-head, body.page-template-template-coverage-page-php .section-head p, body.page-template-template-coverage-page-php .coverage-overview p{ max-width: 100%; } .coverage-overview .section-head{ margin-bottom: 16px; } .coverage-overview p + p{ margin-top: 16px; } .coverage-overview p{ color: var(--slate); font-size: 16px; line-height: 1.7; } /* ---- FAQ accordion (native

, no JS needed) ---- */ .coverage-faq{ max-width: 100%; } .coverage-faq details{ border-bottom: 1px solid var(--line); padding: 22px 0; } .coverage-faq details:first-of-type{ border-top: 1px solid var(--line); } .coverage-faq summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); } .coverage-faq summary::-webkit-details-marker{ display:none; } .coverage-faq summary::after{ content:"+"; flex: 0 0 auto; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .18s ease; } .coverage-faq details[open] summary::after{ transform: rotate(45deg); } .coverage-faq .faq-answer{ color: var(--slate); font-size: 15px; line-height: 1.7; margin-top: 14px; } /* ---- Final CTA panel ---- */ .coverage-cta{ background: var(--ink); color: #fff; text-align: center; padding: 56px 32px; } .coverage-cta h2{ font-family: var(--display); font-weight: 600; font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); letter-spacing: -0.01em; margin-bottom: 16px; } .coverage-cta p{ color: #C9D3DC; font-size: 16px; max-width: 560px; margin: 0 auto 32px; } .coverage-cta .coverage-cta__phone{ margin-top: 24px; font-size: 14px; color: #9FB0BE; } .coverage-cta .coverage-cta__phone a{ color: #fff; font-weight: 600; text-decoration: none; } .coverage-cta .coverage-cta__phone a:hover{ color: var(--accent-soft); } @media (max-width: 1023px){ /* No room for a "left column only" scrim once text wraps across nearly the full viewport width — darken the whole photo instead of just the left ~55%, so text stays readable wherever it wraps to. */ .coverage-hero__media::before{ background: linear-gradient(90deg, rgba(0,0,51,0.85) 0%, rgba(0,0,51,0.6) 60%, rgba(0,0,51,0.4) 100%), linear-gradient(0deg, rgba(0,0,51,0.25) 0%, rgba(0,0,51,0) 30%); } .coverage-hero{ min-height: 520px; } .coverage-hero__content{ padding: 56px 0; max-width: 100%; } } @media (max-width: 600px){ .coverage-hero__content{ padding: 40px 0; gap: 16px; } .coverage-hero__actions{ gap: 16px; } .coverage-hero__contact{ padding-left: 0; border-left: none; flex-basis: 100%; } .coverage-cta{ padding: 40px 20px; } /* Pre-existing gap: .hex-grid never dropped to a single column at true mobile widths (only 3-col -> 2-col via earlier breakpoints), which overflowed card content badly on the coverage pages. */ .hex-grid{ grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior:auto !important; } }