shows banner-1.png (1920×1080) on desktop and swaps to
banner-1-mobile.png (1080×1920) at ≤767px. No slider, no
theme/plugin classes — just a full-bleed image with the same
headline, sub-line and "Send Enquiry" CTA as before.
============================================================ */
.saburi-hero {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: 600px;
height: 100vh;
height: 100svh;
display: flex;
overflow: hidden;
isolation: isolate;
}
.saburi-hero__media,
.saburi-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
}
.saburi-hero__media img {
display: block;
object-fit: cover;
/* Anchor to the top-right so the person stays in frame and the bright,
open upper area of the photo sits behind the header. */
object-position: right top;
}
/* Soft light scrim on the lower-left keeps the dark headline legible over
the bright clinic photo without dulling the airy, open feel. */
.saburi-hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* text-side wash on the left (unchanged) */
linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 32%, rgba(255,255,255,0) 60%),
/* mirror a softer white fade on the right so the fade reads balanced */
linear-gradient(270deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 26%),
/* melt the bottom edge to solid white so the hero transitions cleanly into
the white companies/insurance section directly below it */
linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.55) 10%, rgba(255,255,255,0) 34%);
}
.saburi-hero__inner {
position: relative;
z-index: 2;
width: 100%;
/* Match the site content width + gutter used by every other section
(the insurance strip: max-width 1180 + 32px padding) so the hero title's
left edge lines up with the content of the sections below it. */
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: flex-end; /* bottom-left, matching the old slider layout */
}
.saburi-hero__content {
max-width: 640px;
padding: 70px 0;
}
.saburi-hero__title {
margin: 0;
font-family: 'Marcellus', serif;
font-weight: 400;
color: #2A2F2C;
line-height: 1.02;
letter-spacing: -0.5px;
font-size: clamp(2.75rem, 6vw, 6.25rem); /* ~44px → 100px, as before */
}
.saburi-hero__subtitle {
margin: 20px 0 0;
max-width: 34em;
font-family: 'Marcellus', serif;
color: #2A2F2C;
letter-spacing: 0.2px;
line-height: 1.6;
font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); /* 15px → 17px, sentence case */
}
.saburi-hero__btn {
display: inline-block;
margin-top: 32px;
padding: 0 56px;
height: 56px;
line-height: 56px;
border-radius: 100px;
background: var(--brand-green-hover); /* #78933D — original hero fill */
color: #fff;
font-family: 'Marcellus', serif;
font-size: 1rem;
text-align: center;
text-decoration: none;
box-shadow: 0 10px 24px rgba(42, 47, 44, 0.14);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.saburi-hero__btn:hover,
.saburi-hero__btn:focus-visible {
background: #2c2c2c;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(42, 47, 44, 0.22);
}
@media (max-width: 1279px) {
.saburi-hero__inner { padding: 0 32px; }
.saburi-hero__content { padding-bottom: 56px; }
}
/* Mobile — portrait banner (1080×1920). Subjects sit low in the frame and
the top is open wall, so pin the image to its top edge and anchor the
copy to the top over that clear space. */
@media (max-width: 767px) {
.saburi-hero {
/* Match the container to the portrait banner's own ratio so object-fit:cover
shows the WHOLE image (both people, head-to-foot) at every width up to
767px — no max-height cap, which previously cropped the subjects' legs on
wider phones (≈377–767px) while narrow phones happened to escape it. */
height: auto;
min-height: 0;
aspect-ratio: 1080 / 1920;
}
.saburi-hero__media img { object-position: center top; }
/* Extend the light wash further down so the copy clears the top of the
frame and stays readable where it meets the subjects. */
.saburi-hero__scrim {
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.15) 52%, rgba(255,255,255,0) 62%);
}
.saburi-hero__inner {
align-items: flex-start;
/* The content is a flex child; without this it shrink-wraps and sits on the
left, so the inner text-align:center only centred text inside a
left-hugging box. Centre the box itself so the copy is truly centred. */
justify-content: center;
padding: 0 24px;
}
/* Top padding clears the overlaid header logo/menu. */
.saburi-hero__content {
width: 100%;
max-width: 100%;
padding: 96px 0 0;
text-align: center;
}
.saburi-hero__title {
font-size: clamp(2rem, 9vw, 2.75rem);
letter-spacing: -0.3px;
line-height: 1.08;
}
.saburi-hero__subtitle {
margin: 14px auto 0;
font-size: 0.8125rem;
letter-spacing: 0.4px;
line-height: 1.55;
max-width: 30em;
}
/* Pin the CTA to the bottom-centre of the hero (the copy stays at the top
over the open upper area of the portrait banner). */
.saburi-hero__btn {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
margin: 0;
padding: 0 44px;
height: 52px;
line-height: 52px;
white-space: nowrap;
z-index: 3;
}
.saburi-hero__btn:hover,
.saburi-hero__btn:focus-visible {
transform: translateX(-50%) translateY(-2px);
}
}
/* ==========================================================================
Mobile menu close button — replace the fontello glyph with a clean,
circular X icon that reads well on the dark fullscreen menu.
========================================================================== */
.menu_mobile .menu_mobile_close {
position: absolute;
top: 20px;
right: 20px;
z-index: 20;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #ffffff;
margin: 0 !important;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.menu_mobile .menu_mobile_close:hover {
background-color: #78933D;
border-color: #78933D;
color: #ffffff;
}
@media (max-width: 767px) {
.menu_mobile .menu_mobile_close {
top: 16px;
right: 16px;
width: 34px;
height: 34px;
}
}
/* Keep the "Close" label available to screen readers but out of view. */
.menu_mobile .menu_mobile_close .menu_button_close_text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Draw the X with the icon's pseudo-elements instead of the fontello font. */
.menu_mobile .menu_mobile_close .menu_button_close_icon {
position: relative;
width: 14px;
height: 14px;
font-size: 0;
color: inherit;
transform: none;
transition: transform 0.3s ease;
}
.menu_mobile .menu_mobile_close:hover .menu_button_close_icon {
transform: rotate(90deg);
}
.menu_mobile .menu_mobile_close .menu_button_close_icon:before,
.menu_mobile .menu_mobile_close .menu_button_close_icon:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 2px;
background-color: currentColor;
font-family: inherit;
}
.menu_mobile .menu_mobile_close .menu_button_close_icon:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.menu_mobile .menu_mobile_close .menu_button_close_icon:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* --------------------------------------------------------------------------
Mobile menu extra-item links ("Send Enquiry", "Our Services") — replace the
broken fontello arrow glyph with a clean, crisp arrow.
-------------------------------------------------------------------------- */
.menu_mobile .menu_mobile_widgets_area .widget_custom_html .extra_item a:not([href*="mailto"]) {
padding-right: 1.4em;
}
.menu_mobile .menu_mobile_widgets_area .widget_custom_html .extra_item a:not([href*="mailto"]):after {
content: '\2192'; /* → rightwards arrow */
font-family: inherit;
font-size: 0.7em;
line-height: 1;
right: 0;
color: var(--theme-color-text_link);
}
.menu_mobile .menu_mobile_widgets_area .widget_custom_html .extra_item a:not([href*="mailto"]):hover:after {
right: -4px;
}
/* ==========================================================================
Contact-form checkbox tick — the theme draws the checked state with the
fontello glyph \e9f6, but the fontello font was never exported, so a ticked
box rendered as an empty square. Fill the box green and paint a crisp white
check via an inline SVG. Applies to every wpcf7 checkbox site-wide (contact
page + homepage / About CTA consent).
========================================================================== */
div.wpcf7 input[type="checkbox"]:checked + .wpcf7-list-item-label:before,
.wpcf7 input[type="checkbox"]:checked + label:before,
.wpcf7-checkbox .wpcf7-list-item-checked.wpcf7-list-item-right:before {
content: '' !important;
background-color: #78933D !important;
border-color: #78933D !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.4 6.3l2.2 2.2 4.9-5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 11px 11px !important;
}
/* ==========================================================================
Contact page (page-id-1453) — spread the submit button full width with a
centered label, and place the consent checkbox + text on its own centered
line directly ABOVE the button. The submit comes before the acceptance in
the DOM, so a reversed flex column stacks them the other way round.
========================================================================== */
body.page-id-1453 div.wpcf7 .form-style-1 > p:last-child {
display: flex !important;
flex-direction: column-reverse !important;
align-items: stretch !important;
text-align: center !important;
}
body.page-id-1453 div.wpcf7 .form-style-1 .wpcf7-submit,
body.page-id-1453 div.wpcf7 .form-style-1 .wpcf7-submit-style {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
body.page-id-1453 div.wpcf7 .form-style-1 .wpcf7-submit {
text-align: center !important;
justify-content: center !important;
padding: 14px 24px !important;
}
/* Drop the absolutely-positioned paper-plane so the centered label stays clean. */
body.page-id-1453 div.wpcf7 .form-style-1 .submit-style-in:before {
content: none !important;
}
/* Consent line: full-width block, left-aligned like the other fields,
sitting above the button. */
body.page-id-1453 div.wpcf7 .form-style-1 [data-name="acceptance"] {
display: block !important;
margin: 0 0 16px !important;
text-align: left !important;
vertical-align: baseline !important;
}
body.page-id-1453 div.wpcf7 .form-style-1 .wpcf7-acceptance {
display: block !important;
margin: 0 !important;
text-align: left !important;
}
body.page-id-1453 div.wpcf7 .form-style-1 .wpcf7-acceptance .wpcf7-list-item {
display: inline-block !important;
margin: 0 !important;
text-align: left !important;
}
/* ==========================================================================
Our Services — "Relax & Restore / Unveil the ultimate rest experience" as a
fixed-background parallax band. The two-column (side image + text) layout is
replaced by the image used as the section's own fixed background, with the
copy + button centred over a soft dark scrim. `background-attachment: fixed`
gives the parallax drift on desktop; mobile browsers ignore fixed cleanly, so
they fall back to a normal cover.
========================================================================== */
.saburi-relax-parallax.elementor-element-8107f3a {
background-color: #1b2415 !important;
background-image:
linear-gradient(rgba(20, 28, 16, 0.62), rgba(20, 28, 16, 0.62)),
url("../images/unveil-the-ultimate-rest-experience.jpg") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
padding: 0 !important;
}
/* drop the (now redundant) side-image column and let the copy span + centre */
.saburi-relax-parallax .elementor-element-19de8f6 { display: none !important; }
.saburi-relax-parallax > .elementor-container {
justify-content: center !important;
align-items: center !important;
padding-top: 120px !important;
padding-bottom: 120px !important;
padding-left: 32px !important;
padding-right: 32px !important;
min-height: 0 !important;
}
.saburi-relax-parallax .elementor-element-53181ca {
width: 100% !important;
max-width: 760px !important;
margin: 0 auto !important;
}
.saburi-relax-parallax .elementor-element-53181ca > .elementor-widget-wrap {
align-items: center !important;
}
.saburi-relax-parallax .elementor-element-53f8623 { width: 100% !important; max-width: 100% !important; }
.saburi-relax-parallax .sc_title,
.saburi-relax-parallax .sc_title_descr { text-align: center !important; }
/* light copy over the dark scrim */
.saburi-relax-parallax.saburi-unveil-section .sc_item_subtitle {
color: #C8DCB0 !important;
display: block;
text-align: center;
}
.saburi-relax-parallax.saburi-unveil-section .sc_item_title_text { color: #ffffff !important; }
.saburi-relax-parallax .saburi-unveil-descr {
color: rgba(255, 255, 255, 0.9) !important;
max-width: 620px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* re-centre the "Book a Session" button (the base unveil rules left-align it) */
.saburi-relax-parallax.saburi-unveil-section .elementor-element-ad6e726 > .elementor-widget-wrap {
justify-content: center !important;
align-items: center !important;
}
.saburi-relax-parallax.saburi-unveil-section .elementor-element-b515ffb,
.saburi-relax-parallax.saburi-unveil-section .elementor-element-b515ffb .sc_title,
.saburi-relax-parallax.saburi-unveil-section .sc_title_button {
text-align: center !important;
}
@media (max-width: 1024px) {
.saburi-relax-parallax.elementor-element-8107f3a {
background-attachment: scroll !important;
}
.saburi-relax-parallax > .elementor-container {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
}
/* ==========================================================================
About Us — "What We Do / Featured services" icon cards. The theme's float
columns left the cards touching with no gap and swapped the text colour on
hover (poor contrast). Lay the cards out as a real gapped grid, give each a
clean rounded white card, and keep the card white on hover (lift only) so the
title + description stay fully readable.
========================================================================== */
.elementor-element-6b9c9c13 .sc_icons_columns_wrap {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
margin: 0 !important;
width: 100% !important;
}
.elementor-element-6b9c9c13 .sc_icons_columns_wrap > [class*="trx_addons_column-"] {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
.elementor-element-6b9c9c13 .sc_icons_item {
background: #ffffff !important;
border: 1px solid rgba(120, 147, 61, 0.14) !important;
border-radius: 16px !important;
padding: 34px 24px !important;
margin: 0 !important;
text-align: center !important;
box-shadow: 0 4px 16px rgba(56, 68, 66, 0.05) !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
height: 100% !important;
box-sizing: border-box !important;
}
.elementor-element-6b9c9c13 .sc_icons_item:hover {
background: #ffffff !important; /* stay white so text stays readable */
border-color: rgba(120, 147, 61, 0.32) !important;
box-shadow: 0 12px 30px rgba(56, 68, 66, 0.12) !important;
transform: translateY(-4px) !important;
}
.elementor-element-6b9c9c13 .sc_icons_icon,
.elementor-element-6b9c9c13 .sc_icons_item [class*="icon-new-sr-icon-"] {
color: #86A96E !important;
font-size: 40px !important;
margin: 0 0 16px !important;
display: block !important;
line-height: 1 !important;
}
.elementor-element-6b9c9c13 .sc_icons_icon::before,
.elementor-element-6b9c9c13 .sc_icons_item [class*="icon-new-sr-icon-"]::before {
font-size: 40px !important;
color: #86A96E !important;
line-height: 1 !important;
margin: 0 !important;
}
.elementor-element-6b9c9c13 .sc_icons_item_title {
margin: 0 0 8px !important;
}
.elementor-element-6b9c9c13 .sc_icons_item_title,
.elementor-element-6b9c9c13 .sc_icons_item_title a {
font-family: 'Marcellus', serif !important;
font-size: 19px !important;
line-height: 1.3 !important;
color: #2A2F2C !important;
transition: color .25s ease !important;
}
.elementor-element-6b9c9c13 .sc_icons_item:hover .sc_icons_item_title,
.elementor-element-6b9c9c13 .sc_icons_item:hover .sc_icons_item_title a { color: #78933D !important; }
.elementor-element-6b9c9c13 .sc_icons_item_description,
.elementor-element-6b9c9c13 .sc_icons_item_description span {
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #6B716C !important;
}
.elementor-element-6b9c9c13 .sc_icons_item:hover .sc_icons_item_description,
.elementor-element-6b9c9c13 .sc_icons_item:hover .sc_icons_item_description span { color: #6B716C !important; }
@media (max-width: 1024px) {
.elementor-element-6b9c9c13 .sc_icons_columns_wrap { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.elementor-element-6b9c9c13 .sc_icons_columns_wrap { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
Round content images site-wide (Elementor image widgets). Brand logos live
in .sc_layouts_logo, not here, so they stay square.
========================================================================== */
.elementor-widget-image img { border-radius: 14px; }
/* ==========================================================================
Homepage — "Our Services" cards adopt the same rounded tile as the Our
Services page (both use the sc_services_classic tiles with a background-image
thumbnail on _content).
========================================================================== */
.elementor-element-our-services-home .sc_services_item,
.elementor-element-our-services-home .sc_services_item_content {
border-radius: 16px !important;
overflow: hidden !important;
}
/* ==========================================================================
Our Services — services grid: drop the grey offset panel behind the whole
list and round each service tile (image + card) like the rest of the cards.
The section's own background is left untouched.
========================================================================== */
/* The column carried a `sc_extra_bg_extra_left` decorative offset panel (drawn
via ::after) plus a #FCFCFC widget-wrap fill — together they read as a grey
block behind the entire list. Remove both. */
.elementor-44881 .elementor-element-42595b9 > .elementor-widget-wrap {
background-color: transparent !important;
}
.elementor-44881 .elementor-element-42595b9.sc_extra_bg_extra_left > .elementor-widget-wrap::after,
.elementor-44881 .elementor-element-42595b9 > .elementor-widget-wrap::after {
display: none !important;
content: none !important;
}
/* Round each service tile — the thumbnail is a background-image on _content. */
.elementor-element-a01b993 .sc_services_item,
.elementor-element-a01b993 .sc_services_item_content {
border-radius: 16px !important;
overflow: hidden !important;
}
/* ==========================================================================
FAQs — accordion trim: drop the divider line directly above the accordion
(the "start line") and the trailing border under the last toggle item (the
"last line"), so the accordion reads as a clean list with separators only
BETWEEN questions. Ids are unique to faqs/index.html.
========================================================================== */
.elementor-element-b392a99 { display: none !important; }
.elementor-element-9e14a2f .elementor-toggle-item:last-child .elementor-tab-title,
.elementor-element-9e14a2f .elementor-toggle-item:last-child .elementor-tab-content {
border-block-end: none !important;
border-bottom: none !important;
}
/* ==========================================================================
Homepage header + hero — tablet range (768–1279px)
--------------------------------------------------------------------------
On tablet the site swaps to the compact header (section e1237df) and the
hero still uses the landscape banner. Two problems were fixed here:
1. The tablet header carried a near-black gradient overlay (built for a
dark hero) that cast an ugly shade over the light banner and made the
header look like it was "not showing". Drop it and keep the burger
dark, exactly as the mobile rules already do below 767px.
2. The hero copy sat bottom-left over a left/right white wash. Per design,
centre the copy + CTA, crop the banner centre-centre so both people
stay in frame, and move the white wash to top+bottom so the header
(top) and the headline (bottom) both read clearly over the photo.
========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
/* 1 — kill the dark header overlay + force dark header icons */
.elementor-element-e1237df > .elementor-background-overlay { display: none !important; }
.elementor-element-e1237df .sc_layouts_menu_mobile_button .trx_addons_icon-menu::before,
.elementor-element-e1237df .sc_layouts_iconed_text_icon,
.elementor-element-e1237df a { color: #2A2F2C !important; }
/* 2 — the people sit on the centre-RIGHT of the landscape banner while the
left third is empty window/floor. On the tall tablet viewport a true
centre crop landed on that empty area, so bias the crop rightwards to keep
both the therapist and the patient in frame. */
.saburi-hero__media img { object-position: 72% center; }
/* white wash on top (header legibility) + bottom (headline legibility and a
clean melt into the white insurance strip below), clear middle for the photo */
.saburi-hero__scrim {
background: linear-gradient(180deg,
rgba(255,255,255,0.92) 0%,
rgba(255,255,255,0.45) 16%,
rgba(255,255,255,0) 34%,
rgba(255,255,255,0) 48%,
rgba(255,255,255,0.85) 74%,
rgba(255,255,255,1) 100%);
}
/* centre the copy block + everything in it, anchored to the bottom wash */
.saburi-hero__inner {
align-items: flex-end;
justify-content: center;
}
.saburi-hero__content {
max-width: 760px;
margin: 0 auto;
padding: 0 0 64px;
text-align: center;
}
.saburi-hero__subtitle {
margin-left: auto;
margin-right: auto;
}
}
/* ==========================================================================
Desktop header (>=1280px) — logo left, nav + CTA grouped right.
--------------------------------------------------------------------------
The nav was previously yanked out of flow and absolutely centred against the
header container. That pinned the widget box (not the visible menu) to the
centre, so the links read ~12px left of true centre, and the theme's 8.5px
vertical widget margin dropped the nav ~8.5px below the logo/button centre
line. Back to the original flow layout: the right column is a centred flex
row, so the nav and the "Let's Talk" button sit on one baseline next to each
other and the logo stays left. The 1.7vw gap between nav and button comes
from the theme's own per-widget margin, so nothing extra is needed here.
Only the vertical centring is asserted, to keep logo / nav / button on a
single centre line regardless of their differing intrinsic heights. Applies
to the standard header (61b5914) and the sticky header (55e7547); below
1280px the compact burger header takes over.
========================================================================== */
@media (min-width: 1280px) {
.elementor-element-61b5914 > .elementor-container,
.elementor-element-55e7547 > .elementor-container {
align-items: center;
}
.elementor-element-af5d127 > .elementor-widget-wrap,
.elementor-element-e81fef9 > .elementor-widget-wrap,
.elementor-element-14b7fe3 > .elementor-widget-wrap,
.elementor-element-a991d20 > .elementor-widget-wrap {
display: flex;
align-items: center;
align-content: center;
}
/* The theme gives header widgets an 8.5px block margin. It is symmetric, so
it does not shift the flex centring, but zeroing it keeps the nav's own
box flush with the button's and avoids the row growing taller than the
72px header bar. */
.elementor-element-6045eca,
.elementor-element-39d42a5,
.elementor-element-e131658,
.elementor-element-3889059 {
margin-top: 0;
margin-bottom: 0;
}
}
/* ==========================================================================
Footer redesign — light sage footer (replaces the heavy olive slab)
--------------------------------------------------------------------------
The solid #78933D fill read heavier/darker than the (same-green) logo, so
the footer now sits on the site's soft sage (#EFF2E7) with dark brand ink
and green links — airy, on-palette, and it lets the logo/content breathe.
Applies site-wide so every page's footer stays consistent. !important beats
the per-page inline #78933D fill in each page's wp-custom-css block.
========================================================================== */
footer.footer_wrap.footer_custom,
footer.footer_wrap .elementor-element-108e4b21 {
background-color: #EFF2E7 !important;
background-image: none !important;
}
/* base text tone */
footer.footer_wrap,
footer.footer_wrap p,
footer.footer_wrap .sc_layouts_item { color: #3a4038 !important; }
/* headline + section headings in dark brand ink */
footer.footer_wrap h2.saburi-foot-headline { color: #2A2F2C !important; }
footer.footer_wrap .sc_item_title_text,
footer.footer_wrap h6.sc_item_title { color: #2A2F2C !important; }
/* links: brand green, hover to dark ink */
footer.footer_wrap .saburi-foot-quicklinks a,
footer.footer_wrap .title-heading a, /* email */
footer.footer_wrap .elementor-element-1dd2c10 a { /* phone */
color: #5f7d2f !important;
transition: color .2s ease;
}
footer.footer_wrap .saburi-foot-quicklinks a:hover,
footer.footer_wrap .title-heading a:hover,
footer.footer_wrap .elementor-element-1dd2c10 a:hover { color: #2A2F2C !important; }
/* address labels + lines */
footer.footer_wrap .saburi-foot-address-text .saburi-foot-tag { color: #2A2F2C !important; }
footer.footer_wrap .saburi-foot-address-text .saburi-foot-addr { color: #4a5147 !important; }
/* social icons: dark outline on light bg, fill brand green on hover */
footer.footer_wrap .saburi-fsoc a {
border-color: rgba(42, 47, 44, 0.28) !important;
color: #2A2F2C !important;
}
footer.footer_wrap .saburi-fsoc a:hover {
background: #78933D !important;
border-color: #78933D !important;
color: #ffffff !important;
}
/* divider line — subtle dark hairline on the light bg */
footer.footer_wrap .elementor-divider-separator {
border-top-color: rgba(42, 47, 44, 0.14) !important;
border-block-start-color: rgba(42, 47, 44, 0.14) !important;
}
/* bottom bar: copyright + credit muted dark, credit link green (beats the
inline color:white on the credit link) */
footer.footer_wrap .elementor-element-7de25e5 p,
footer.footer_wrap .elementor-element-e5105c1 { color: #6b7264 !important; }
footer.footer_wrap .elementor-element-e5105c1 a { color: #5f7d2f !important; }
footer.footer_wrap .elementor-element-e5105c1 a:hover { color: #2A2F2C !important; }
/* ==========================================================================
Homepage "Our Services" — restore the 3-up grid
--------------------------------------------------------------------------
The three cards are inline-block columns (.trx_addons_column-1_3, 33.33%
each). When index.html was reformatted, newlines between the column s
introduced inline-block whitespace gaps, so 3×33.33% + gaps overflowed and
the third card dropped to a second row (2-up, 1-down). Lay the wrapper out
with flex: whitespace text nodes are ignored, so the three cards sit on one
row again. Columns keep their 33.33% width and stack on mobile (where the
theme sets them to width:100%). Scoped to the homepage services section.
========================================================================== */
body.home .elementor-element-our-services-home .sc_services_columns_wrap {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}