text next to it — that's why only the icon was clickable.
Fixed below with a "stretched link" technique: the wrapper becomes the
positioning context, and the real is stretched to cover the entire
row invisibly, so a click anywhere (icon or text) lands on the link,
without touching Elementor's own markup or requiring a widget change. */
.services-rail {
padding-top: 24px;
}
.services-rail .elementor-icon-box-wrapper {
position: relative;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 14px !important;
border-radius: 10px;
text-align: left !important;
transition: background 0.2s ease;
}
.services-rail .elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
background: rgba(232, 225, 212, 0.5);
}
.services-rail .elementor-icon-box-icon {
margin: 0 !important;
}
.services-rail .elementor-icon-box-icon .elementor-icon {
position: absolute;
inset: 0;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding-left: 14px !important;
z-index: 2;
}
.services-rail .elementor-icon-box-icon .elementor-icon svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0;
}
.services-rail .elementor-icon-box-content {
padding-left: 30px;
}
.services-rail .elementor-icon-box-description {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: #6B6B63 !important;
margin: 0 !important;
transition: color 0.2s ease;
}
.services-rail .elementor-widget-icon-box:hover .elementor-icon-box-description {
color: #1C1C1A !important;
}
/* ==================== MOBILE NAV: HAMBURGER TOGGLE ICON ==================== */
/* JetMenu's own public.css hardcodes the toggle icon's SVG to 16px via
`.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-toggle-icon svg`
— the widget's Style tab "Dropdown Toggle > Icon Size" field does NOT
target this element (it appears to control the per-item dropdown chevrons
instead), so that field has zero visible effect on the hamburger icon.
Overriding the actual rendered class directly here instead. */
.jet-mega-menu-toggle-icon svg {
width: 26px !important;
height: 26px !important;
}
/* ==================== MOBILE NAV: ROLLED-UP DROPDOWN PANEL ==================== */
/* On mobile, Roll Up: Yes stacks the top-level items (About/Services/Blog)
vertically inside `.jet-mega-menu-container`. The Container widget holding
the Mega Menu (the one we shrank to hug the collapsed hamburger icon back
when fixing the navbar row wrap) is only ~40px wide once collapsed — and
the rolled-up list was rendering TRAPPED inside that same 40px box instead
of breaking out, which is why it looked clipped/overlapping the navbar
instead of sitting below it like a normal dropdown.
Fix: pull `.jet-mega-menu-container` out of that box with
`position: absolute`, anchored to the pill navbar itself (`.floating-navbar`,
given `position: relative` here so it becomes the anchor) instead of its
immediate 40px-wide parent — same approach as the HTML prototype's
`.mobile-menu`, which was a sibling of the navbar, not nested inside a
flex item sized by other content. */
@media (max-width: 767px) {
.floating-navbar {
position: relative !important;
}
/* Found via live inspection: the Container holding the Mega Menu widget
(elementor-element-18d59f96) is explicitly locked to `--width: 100px` on
mobile — that's correct and wanted for the COLLAPSED row (snug hamburger
next to the logo). But `position: absolute` on `.jet-mega-menu-container`
only escapes that 100px box if nothing narrower BETWEEN it and
`.floating-navbar` is also positioned (which would make IT the
containing block instead). Forcing every wrapper in between back to
`position: static` guarantees `.floating-navbar` is the one that
actually anchors it. */
.elementor-widget-jet-mega-menu,
.elementor-widget-jet-mega-menu > .elementor-widget-container,
.jet-mega-menu {
position: static !important;
}
/* elementor-element-18d59f96 (the 100px Container itself, directly holding
the Mega Menu widget) is an .e-con — and Elementor's own base .e-con
rule sets `position: relative` on every container by default. That's
almost certainly still the real containing block even with the wrapper
above neutralized. Flattening it too. */
.elementor-element-18d59f96 {
position: static !important;
}
.jet-mega-menu-container {
position: absolute !important;
top: calc(100% + 10px) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: auto !important;
max-width: none !important;
transform: none !important;
z-index: 10001 !important;
background: #ffffff !important;
border-radius: 10px !important;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
/* Deliberately NOT !important on these two: confirmed via live inspection
that JetMenu toggles this element via CSS classes only (element.style
was empty — no inline max-height set by JS). Its own default-closed
rule (`.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-container`)
lives in JetMenu's plugin stylesheet, which loads/parses after our
custom CSS in the page's source order — so on every fresh page load
there's a real window where OUR background/shadow/shape is already
painted but THEIR max-height:0 hasn't applied yet, rendering this as
a full-height white box for a frame or two (the "flash on page load").
Setting the same closed default here, in our own stylesheet, removes
the dependency on their load order entirely. Left as plain (non-
!important) so whatever more-specific rule/class JetMenu adds when
actually opening the panel still normally wins via specificity. */
max-height: 0;
overflow: hidden;
}
/* Forcing the container full-width isn't enough on its own — max-width:100%
only clips things that are too WIDE, it doesn't stretch things that are
too NARROW. Each row is very likely a flex child that's hugging its own
content (align-items other than stretch) rather than filling the column,
so force width explicitly down through every level: the list, each row,
and each row's inner flex wrapper. */
.jet-mega-menu-list {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
}
.jet-mega-menu-item,
.jet-mega-menu-item__inner {
width: 100% !important;
}
.jet-mega-menu-container,
.jet-mega-menu-container * {
max-width: 100% !important;
}
/* The desktop mega-content template's own panel chrome (shadow/radius) is
redundant once it's living inside the mobile panel above — flatten it. */
.jet-mega-menu-mega-container {
position: relative !important;
width: 100% !important;
background: #ffffff !important;
box-shadow: none !important;
border-radius: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* This targets the mega-content template's own OUTER Container (a direct
child of .jet-mega-menu-mega-container) — it carries its own native
white-bg/shadow/radius, built for floating independently as the
DESKTOP hover panel. Nested inside our already-white mobile accordion,
that second layer of chrome is exactly the "two different backgrounds"
look — flattening it so the whole thing reads as one continuous flat
white surface, matching the prototype. */
.jet-mega-menu-mega-container > * {
margin-top: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding-top: 4px !important;
}
/* Contact button widget stays hidden on mobile — abandoned trying to
reposition it via CSS (position:fixed pinned to the viewport, then
position:absolute calc'd against a height-capped panel) since it
lives outside JetMenu's own generated markup as a sibling of the Mega
Menu widget, not a real child of the accordion panel. Two attempts
confirmed CSS can't reliably attach a sibling to another element's
dynamic content this way. New plan: add "Contact" as an actual menu
item (Appearance → Menus → Primary Navigation, plain link, no mega
content, last position) so it's a genuine row in the same as
About/Services/Work/Blog on mobile — no positioning math needed. See
the CLAUDE.md session entry for the follow-up styling/desktop-hiding
step once that item exists. */
.elementor-element-73d05171 {
display: none;
}
/* --- Top-level row treatment on mobile: match the HTML prototype's
accordion rows (inset divider, chevron on the right, darker text)
instead of the desktop gold-underline-on-hover + shadow treatment,
which doesn't work as a touch/tap affordance. Desktop keeps its own
underline + lighter title color untouched — all of this is scoped
inside the 767px media query. */
/* Darker top-level text by default (desktop keeps it lighter since it
relies on :hover to go full-opacity — mobile has no hover, so it
should just read dark all the time). Redefining the same CSS var
JetMenu set at the widget root, rather than guessing at whichever
nested element actually consumes it. */
.elementor-293 .elementor-element.elementor-element-435aae5c {
--jmm-top-item-title-color: #213D2F !important;
}
.jet-mega-menu-item__inner,
.jet-mega-menu-item__inner * {
color: #213D2F !important;
}
/* The catch-all above apparently loses to something more specific still
rendering the text gray — likely JetMenu's own title-span rule using
the same compound-class pattern seen elsewhere in their CSS
(`.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-list
.jet-mega-menu-item__inner ...`). When both sides carry !important,
specificity breaks the tie, not which declaration is "more" important —
matching that same compound pattern here instead of guessing again. */
.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-list .jet-mega-menu-item__inner,
.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-list .jet-mega-menu-item__inner * {
color: #213D2F !important;
}
/* Found the actual culprit via live inspection: JetMenu auto-generates
`.elementor-293 .elementor-element.elementor-element-435aae5c
.jet-mega-menu-item__label { color: rgba(33,61,47,0.55) !important; }`
— a literal computed color baked directly onto the label div, not
routed through the CSS variable at all (hence overriding the variable
did nothing). It's 4 classes deep, identical specificity to the
catch-alls above, and wins the tie because JetMenu's own generated CSS
loads after ours on the page. Targeting the exact same element
(`.jet-mega-menu-item__label`) with a 5-class compound .elementor-kit-9 to
genuinely outrank it instead of just matching it. */
.jet-mega-menu.jet-mega-menu--layout-dropdown .jet-mega-menu-list .jet-mega-menu-item__inner .jet-mega-menu-item__label {
color: #213D2F !important;
}
/* Tighter left/right inset on each row, matching the prototype's 12px
(the rule that actually sets this padding — `.jet-mega-menu.jet-mega-menu--layout-dropdown
.jet-mega-menu-list .jet-mega-menu-item__inner` — falls back to 20px
when this var is unset, which is why it read as too much left padding). */
.elementor-293 .elementor-element.elementor-element-435aae5c {
--jmm-dropdown-top-items-hor-padding: 12px !important;
}
/* The toggle button (hamburger/X) has its own background var
(`--jmm-dropdown-toggle-bg-color`) that was rendering as a visible gray
square behind the icon — the prototype's toggle has no background at
all, just the bare icon. */
.jet-mega-menu-toggle {
background: transparent !important;
background-color: transparent !important;
}
/* Kill any native shadow on the row / its states. */
.jet-mega-menu-item,
.jet-mega-menu-item__inner,
.jet-mega-menu-item__inner:hover,
.jet-mega-menu-item__inner:active,
.jet-mega-menu-item__inner:focus {
box-shadow: none !important;
border-bottom: none !important;
}
/* Inset hairline divider (not edge-to-edge, matching the prototype's
padded look) — drawn as a background gradient rather than a border, so
it can fade out 20px in from each side without touching the box model
(padding/margin) that the row's own content alignment depends on. */
.jet-mega-menu-item {
background-image: linear-gradient(
to right,
transparent 12px,
rgba(33, 61, 47, 0.08) 12px,
rgba(33, 61, 47, 0.08) calc(100% - 12px),
transparent calc(100% - 12px)
) !important;
background-repeat: no-repeat !important;
background-position: bottom !important;
background-size: 100% 1px !important;
}
.jet-mega-menu-item:last-child {
background-image: none !important;
}
/* Chevron on the right of each row that actually expands (has-children) —
same glyph as the prototype's .nav-chevron. Using ::after (not
::before) so it renders AFTER the label in source order — combined
with the row's own `justify-content: space-between`, that alone puts
the label at the far left and the chevron at the far right, no
margin/order hacks needed. `position: static` overrides desktop's
absolute positioning for this same ::after (used there for the
underline bar). Rotates via aria-expanded, same attribute JetMenu
already toggles. */
.jet-mega-menu-item-has-children .jet-mega-menu-item__inner::after {
content: '' !important;
position: static !important;
display: block !important;
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
opacity: 0.5 !important;
background: no-repeat center / contain url("data:image/svg+xml;utf8,") !important;
transform: none !important;
/* Found via live inspection: the old desktop underline rule on this
same ::after sets `transform-origin: left !important`, and we never
contested that property ourselves, so it was silently still in
effect — rotating this box around its left edge instead of its
center, causing it to swing through an arc (and likely clip against
the row) instead of spinning in place. */
transform-origin: center !important;
transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.jet-mega-menu-item-has-children .jet-mega-menu-item__inner[aria-expanded="true"]::after {
transform: rotate(180deg) !important;
opacity: 1 !important;
}
/* Found the cause of the chevron "jumping" mid-rotation (confirmed via
extracted video frames — it visibly shrinks and shifts up-left only
during the transition, not at rest in either state): JetMenu's own
native dropdown-icon element (.jet-mega-menu-item__dropdown, the same
one this project's desktop chevron rotation is built on) is still
rendering here too, with its own unscoped rotation/positioning CSS
from the earlier desktop-only build. Two icons animating slightly out
of sync on top of each other reads as one icon jumping around. Hiding
it on mobile so only our custom ::after chevron shows. */
.jet-mega-menu-item__dropdown {
display: none !important;
}
/* Items with no mega content (e.g. "Work") get no chevron at all — kill
the underline's ::after for them without adding a replacement. */
.jet-mega-menu-item:not(.jet-mega-menu-item-has-children) .jet-mega-menu-item__inner::after {
content: none !important;
}
/* Compact the icon/label/subtitle rows inside the expanded panel (Our
Story, Team, etc.) to match the prototype's tight spacing. Confirmed
via live inspection: the actual row is an tag (e.g.
elementor-element-68645d5d, classes `e-con-full e-flex e-con e-child`,
linking to /about) nested one level deeper than originally guessed —
.jet-mega-menu-mega-container > [boxed .e-con] > .e-con-inner > [the
row .e-con] — which is why the previous .elementor-kit-9 (`> * > .e-con`,
only 2 levels deep) matched nothing at all. Also: the row's own
--flex-direction was already `row`, not `column` as assumed — the real
cause of the "stacked" look is --flex-wrap-mobile: wrap on the row,
which wraps the text column onto its own line below the icon once the
two don't fit side by side. Using a plain descendant .elementor-kit-9
(`a.e-con` under the mega-container) instead of hardcoding the exact
depth, so this holds even if Services' template turns out to nest
slightly differently than About's. */
.jet-mega-menu-mega-container a.e-con {
flex-wrap: nowrap !important;
--flex-wrap: nowrap !important;
flex-direction: row !important;
--flex-direction: row !important;
align-items: center !important;
--align-items: center !important;
gap: 8px !important;
--gap: 8px !important;
padding: 4px 6px !important;
--padding-top: 4px !important;
--padding-bottom: 4px !important;
--padding-left: 6px !important;
--padding-right: 6px !important;
}
/* The row's own gap (above) controls icon-to-text spacing, but the
nested column holding the label + subtitle (e.g.
elementor-element-8a5e24f, a direct child .e-con of the row) has its
OWN separate native gap — found via inspection to be 11px — which is
the actual source of the two lines of text not sitting tight. */
.jet-mega-menu-mega-container a.e-con > .e-con {
gap: 2px !important;
--gap: 2px !important;
row-gap: 2px !important;
--row-gap: 2px !important;
}
.jet-mega-menu-mega-container .elementor-icon svg,
.jet-mega-menu-mega-container .e-icon svg {
width: 22px !important;
height: 22px !important;
}
.jet-mega-menu-mega-container .elementor-heading-title {
line-height: 1.3 !important;
margin-bottom: 1px !important;
}
.jet-mega-menu-mega-container .elementor-widget-text-editor,
.jet-mega-menu-mega-container .elementor-widget-text-editor p {
line-height: 1.3 !important;
margin: 0 !important;
}
}
/* ==================== DESKTOP: HIDE THE MOBILE-ONLY "CONTACT" MENU ITEM ==================== */
/* Added "Contact" as a plain 4th top-level item to Primary Navigation so it
would appear as a genuine row in the mobile Roll Up list (no positioning
hacks needed, unlike the separate coral Contact button widget, which
lives outside JetMenu's own markup). That pushed the desktop nav past its
available width, so JetMenu automatically tucked it behind a "..."
overflow trigger — confirmed via live inspection that the item's real
id is `jet-mega-menu-item-961` (nested inside `.jet-mega-menu-sub-menu__list`,
JetMenu's own overflow wrapper). Hiding it at desktop widths only; mobile
keeps it as a normal accordion row. This id is tied to the WordPress menu
item itself, so it stays stable through reordering and Work coming back
post-launch. If the "..." trigger itself doesn't disappear once this is
hidden (depends on whether JetMenu recalculates overflow on resize or
only once on load), that's the next thing to chase — it would need its
own .elementor-kit-9, since it has no id of its own in the markup. */
@media (min-width: 768px) {
#jet-mega-menu-item-961 {
display: none !important;
}
}
/* ==================== MOBILE: STYLE THE "CONTACT" ROW AS A PILL BUTTON ==================== */
/* Same stable id as above (#jet-mega-menu-item-961) — this one's low-risk
since it's a real, uniquely-identified row, not fighting a sibling
widget's layout the way the earlier Contact-button attempt was. An ID
.elementor-kit-9 outranks the class-based rules from the top-level row styling
above (e.g. the forest-green label-color rule), so no specificity war
here. */
@media (max-width: 767px) {
#jet-mega-menu-item-961 {
width: calc(100% - 24px) !important;
margin: 16px 12px 14px 12px !important;
}
/* Blog (the row immediately before Contact) was showing its own bottom
divider right up against the button — using nth-last-child(2) instead
of Blog's specific id so this stays correct if the row order changes
(e.g. once Work returns), since it always targets "whatever sits right
before the last item" rather than a hardcoded id. */
.jet-mega-menu-item:nth-last-child(2) {
background-image: none !important;
}
#jet-mega-menu-item-961 .jet-mega-menu-item__inner {
background-color: #F07060 !important;
border-radius: 100px !important;
justify-content: center !important;
padding: 10px 12px !important;
}
#jet-mega-menu-item-961 .jet-mega-menu-item__label,
#jet-mega-menu-item-961 .jet-mega-menu-item__inner,
#jet-mega-menu-item-961 .jet-mega-menu-item__inner * {
color: #ffffff !important;
}
}
/* ==================== MOBILE: HOMEPAGE SERVICES LIST ==================== */
/* Confirmed via live inspection (Sept 3, 2026): each service row is itself
an Container (Elementor's atomic Flexbox), so it
is already a real link site-wide — no click/JS fix needed here, unlike
the nav items. The icon-wrapping Container (the row's first child div)
had no explicit mobile Width override, so it inherited Elementor's own
default full-width behavior for flex children on mobile and stretched
edge-to-edge (measured 347px on a 375px-wide viewport) instead of staying
icon-sized. The desktop-only hover effect (padding shift, background
tint, chevron reveal — from the `.service-list > .elementor-element`
rules earlier in this file) still fires on `:hover` here since these rows
carry the generic `elementor-element` class too — on touch devices this
reads as an unwanted flash/shift on tap (same underlying mechanism as the
JetMenu hover/touch conflict documented above), so it's suppressed below
rather than removed globally, since desktop should keep it. */
@media (max-width: 767px) {
/* Uses the .service-icon-box class (added directly to each icon
Container's Advanced > CSS Classes field) rather than the original
positional :first-child .elementor-kit-9 — purely for resilience going
forward, not because the DOM actually differed (see next comment). */
.service-list .service-icon-box {
--width: 44px !important;
width: 44px !important;
max-width: 44px !important;
flex: 0 0 44px !important;
}
/* Confirmed via live inspection (Sept 9, 2026): every row had IDENTICAL
DOM structure and computed styles — the icon-box width fix above was
never the actual bug for the icon-above-text stacking. Every row has
`flex-wrap: wrap` on the row itself; short titles ("Impact Evaluation",
"Visioning and Strategy") happened to fit icon+heading on one line and
looked "correct," while longer titles didn't fit and wrapped as a
WHOLE flex item onto a new line — instead of the heading wrapping its
own text internally, which is what should happen. Root cause: the
heading item had no `min-width: 0`, so its default `min-width: auto`
was preventing it from shrinking to fit the remaining row width.
Fix: force the row to never break into two flex lines, and let the
heading shrink/wrap its own text instead. Same underlying bug pattern
already documented above for the JetMenu mega-menu rows
(`--flex-wrap-mobile: wrap`, Sept 3 fix). */
.service-list > a {
flex-wrap: nowrap !important;
}
.service-list > a > div:last-child {
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* Confirmed via live inspection (Sept 9, 2026): each row's icon is
correctly centered within its OWN 18px/18px padding (verified — 19px
above, 18px below). The visual "not centered between the dividers"
complaint is because `.service-list` has a 20px row-gap (desktop flex
Gaps setting, inherited on mobile with no override) sitting entirely
AFTER each row's content and BEFORE the next row's border-top divider
— so the space a viewer perceives as "inside" one row (divider above
to divider below) is actually 87px of padded content + 20px of gap,
all bunched at the bottom, not the symmetric 87px each row's own
padding already provides. Removing the gap on mobile makes each row's
own border-box exactly equal to the divider-to-divider band, since
adjacent rows' padding already supplies matching spacing. */
.service-list {
gap: 0 !important;
}
.service-list > a:hover,
.service-list > a:active,
.service-list > a:focus {
padding-left: 0 !important;
background: transparent !important;
}
.service-list > a::after {
display: none !important;
}
}
/* ==================== MOBILE: TESTIMONIALS CAROUSEL ==================== */
/* Confirmed via live inspection (Sept 3, 2026): `.testimonial-card` has a
hardcoded `min-width: 700px; max-width: 700px;` (set for the desktop
horizontal-scroll carousel) with no mobile override, so on a ~375px-wide
phone each card rendered far wider than the viewport and hung off both
edges, with `.testimonial-grid`'s side padding/scroll-padding formulas
(built around that same 700px assumption) compounding the overhang.
Sized the card to the viewport instead so the full quote is always
visible. The existing prev/next-arrow and dot-indicator JS (Testimonial
carousel controls, in Custom Code) reads each card's actual width via
`getBoundingClientRect()` at scroll time rather than assuming 700px, so
it keeps working unchanged — manual navigation between cards still
functions exactly as before. */
@media (max-width: 767px) {
.testimonial-grid {
padding-left: 20px !important;
padding-right: 20px !important;
scroll-padding: 0 20px !important;
}
.testimonial-card {
min-width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
}
}/* End custom CSS */