and lays out its children
(num + label) via the grid declared on the box itself. */
.fl-col.mc-oa-stats-col > .fl-col-content {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Box module declares `include_wrapper: false` in box.php so it renders
as a single
with its children rendered directly inside — there's no extra
.fl-module-content wrapper to target. */
.fl-module.mc-oa-stat-box {
background: #cfe7d8;
padding: 20px 24px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 22px;
align-items: center;
}
.fl-module.mc-oa-stat-num,
.fl-module.mc-oa-stat-label {
align-self: center;
}
.fl-module.mc-oa-stat-num .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 44px;
color: #0f3a24;
line-height: 1;
margin: 0;
text-align: left;
letter-spacing: -0.01em;
}
.fl-module.mc-oa-stat-label .fl-rich-text p {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #0f3a24;
margin: 0;
text-align: left;
}
/* --- Section heading rows (eyebrow with green dash) ---
These rows sit immediately above the pillars / steps grids, so their
bottom padding is small — the grid row below carries the bulk of the
section's bottom space. Backgrounds match the row below so the two
adjacent rows read as a single visual section. */
.fl-row.mc-oa-pillars-heading > .fl-row-content-wrap {
padding: 90px 20px 24px;
background: #ffffff;
}
.fl-row.mc-oa-steps-heading > .fl-row-content-wrap {
padding: 90px 20px 24px;
background: #ffffff;
}
.fl-module.mc-oa-section-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #219f5a;
margin: 0;
display: flex;
align-items: center;
gap: 14px;
}
.fl-module.mc-oa-section-heading .fl-heading::before {
content: "";
display: block;
width: 28px;
height: 2px;
background: #219f5a;
flex-shrink: 0;
}
/* --- Pillars row (4 cards spaced apart) ---
Each pillar is its own card now, with breathing room between them.
Visual link between the four is preserved by the colored top stripes:
bright green → gray → deep green → near-black, in the same clockwise
reading order as the logo glyph. Panel-wide shadow and dividers
removed; each card carries a subtle individual shadow instead. */
.fl-row.mc-oa-pillars > .fl-row-content-wrap {
padding: 20px 14px 90px; /* horizontal padding so outer cards aren't flush with the viewport */
background: #ffffff;
}
.fl-row.mc-oa-pillars .fl-row-content {
max-width: none;
padding: 0;
}
.fl-row.mc-oa-pillars .fl-col-group {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* equalize card heights to the tallest */
row-gap: 28px; /* vertical gap when cards wrap to 2-up / stacked */
}
/* Four-color identity — one per cell, sourced from the McBean logo glyph. */
.fl-col.mc-oa-pillar:nth-child(1) { --mc-pillar-color: #219f5a; } /* bright brand green */
.fl-col.mc-oa-pillar:nth-child(2) { --mc-pillar-color: #6e6e6e; } /* mid gray */
.fl-col.mc-oa-pillar:nth-child(3) { --mc-pillar-color: #0f3a24; } /* deep brand green */
.fl-col.mc-oa-pillar:nth-child(4) { --mc-pillar-color: #1f1f1f; } /* near-black */
/* Column padding is set in BB editor (Column Settings → Style →
Padding) so Jenn can tweak it freely. Keep this rule for the
counter-* and other non-padding concerns only. */
.fl-col.mc-oa-pillar > .fl-col-content {
background: #ffffff;
border-radius: 0;
border-top: 8px solid var(--mc-pillar-color);
padding: 0 0 32px;
height: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px rgba(15, 58, 36, 0.07);
transition: background-color 200ms ease-out,
transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fl-col.mc-oa-pillar > .fl-col-content:hover {
background: #f6faf7;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(15, 58, 36, 0.10);
}
/* Photo strip — continuous row across the top of the panel. The
.fl-photo-content override is needed because BB's default centered-
align photo wraps the image in a shrink-to-fit element; without
width:100% the image renders at its natural width (square thumbs
come out 200px wide regardless of the cell). */
.fl-module.mc-oa-pillar-photo {
margin: 0;
}
.fl-module.mc-oa-pillar-photo .fl-photo,
.fl-module.mc-oa-pillar-photo .fl-photo-content,
.fl-module.mc-oa-pillar-photo .fl-photo-img-wrap {
margin: 0;
line-height: 0;
width: 100%;
display: block;
}
.fl-module.mc-oa-pillar-photo .fl-photo-img {
display: block;
width: 100%;
height: 280px;
object-fit: cover;
}
/* Horizontal padding inside the text portion of each cell */
.fl-col.mc-oa-pillar .fl-module.mc-oa-pillar-title,
.fl-col.mc-oa-pillar .fl-module.mc-oa-pillar-text {
padding-left: 28px;
padding-right: 28px;
}
.fl-module.mc-oa-pillar-title .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #0f3a24;
margin: 32px 0 20px;
}
.fl-module.mc-oa-pillar-text .fl-rich-text p {
color: #4a4a4a;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* --- Banner row (full-bleed photo between Pillars and How We Work) --- */
.fl-row.mc-oa-banner > .fl-row-content-wrap {
padding: 0;
background: #ffffff;
}
.fl-row.mc-oa-banner .fl-row-content {
max-width: none;
width: 100%;
padding: 0;
}
.fl-row.mc-oa-banner .fl-col-content {
padding: 0;
}
.fl-module.mc-oa-banner-photo,
.fl-module.mc-oa-banner-photo .fl-photo,
.fl-module.mc-oa-banner-photo .fl-photo-content,
.fl-module.mc-oa-banner-photo .fl-photo-img-wrap {
margin: 0;
line-height: 0;
}
.fl-module.mc-oa-banner-photo .fl-photo-img {
display: block;
width: 100%;
height: 380px;
object-fit: cover;
}
/* --- How We Work steps row (3 columns: circular photo + number badge) ---
Each step is a flex column: photo (order 0) → number circle (order 1,
coming from ::before) → title → text. The dashed connector behind the
row of circles is unchanged (now aligned to where the circle sits). */
.fl-row.mc-oa-steps > .fl-row-content-wrap {
padding: 80px 20px 100px;
background: #ffffff;
}
.fl-row.mc-oa-steps .fl-row-content {
max-width: 1100px;
}
.fl-row.mc-oa-steps .fl-col-group {
counter-reset: step-num;
flex-wrap: wrap;
align-items: stretch;
position: relative;
}
/* Dashed connector line behind the circles, between columns. Hidden on
the BB editor view to keep the editor canvas clean. Offset accounts
for photo height (180px) + gap before the small number circle. */
body:not(.fl-builder-edit) .fl-row.mc-oa-steps .fl-col-group::before {
content: "";
position: absolute;
top: 215px; /* aligns roughly with circle centre */
left: 12%;
right: 12%;
height: 0;
border-top: 2px dashed #cfe7d8;
z-index: 0;
}
.fl-col.mc-oa-step {
/* Padding set in BB editor (Column → Style → Padding) so it's
editable from there. */
counter-increment: step-num;
position: relative;
z-index: 1;
}
.fl-col.mc-oa-step > .fl-col-content {
padding: 0 18px 24px;
height: 100%;
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Number circle. Sits BELOW the photo (order 1) thanks to the flex
reordering — photo module is order 0 by default. */
.fl-col.mc-oa-step > .fl-col-content::before {
content: counter(step-num);
order: 1;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin: -27px auto 18px; /* negative top margin to overlap photo bottom */
background: #219f5a;
color: #ffffff;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 22px;
border-radius: 50%;
border: 4px solid #ffffff;
box-shadow: 0 6px 16px rgba(33, 159, 90, 0.28);
position: relative;
z-index: 2;
}
/* Circular step photo at the top of each step column */
.fl-module.mc-oa-step-photo {
order: 0;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
}
.fl-module.mc-oa-step-photo .fl-photo,
.fl-module.mc-oa-step-photo .fl-photo-content,
.fl-module.mc-oa-step-photo .fl-photo-img-wrap {
margin: 0;
line-height: 0;
}
.fl-module.mc-oa-step-photo .fl-photo-img {
display: block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 10px 28px rgba(15, 58, 36, 0.14);
}
.fl-module.mc-oa-step-title {
order: 2;
}
.fl-module.mc-oa-step-text {
order: 3;
}
.fl-module.mc-oa-step-title .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: #0f3a24;
margin: 0 0 12px;
text-align: center;
}
.fl-module.mc-oa-step-text .fl-rich-text p {
color: #4a4a4a;
font-size: 15px;
line-height: 1.6;
margin: 0;
text-align: center;
}
/* --- CTA (background photo + brand-green overlay) — 50/50 text + form --- */
.fl-row.mc-oa-cta > .fl-row-content-wrap {
background:
linear-gradient(rgba(20, 100, 55, 0.92), rgba(10, 40, 20, 0.95)),
url("/wp-content/uploads/2026/05/new-header-2.jpg") center/cover no-repeat;
padding: 80px 20px;
}
/* Vertically centre the heading/intro block against the taller form card */
.fl-row.mc-oa-cta .fl-col-group {
align-items: center;
}
/* Left half — heading, intro line, Call now button */
.fl-col.mc-oa-cta-text .fl-col-content {
text-align: left;
padding-right: 40px;
}
.fl-module.mc-oa-cta-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 34px;
color: #ffffff;
text-align: left;
margin: 0 0 18px;
line-height: 1.2;
}
.fl-module.mc-oa-cta-intro .fl-rich-text p {
font-family: "Open Sans", sans-serif;
font-size: 17px;
line-height: 1.6;
color: #cfe7d8;
margin: 0 0 28px;
max-width: 460px;
}
.fl-module.mc-oa-cta-button .fl-button-wrap {
text-align: left;
}
.fl-module.mc-oa-cta-button a.fl-button,
.fl-module.mc-oa-cta-button a.fl-button span,
.fl-module.mc-oa-cta-button a.fl-button .fl-button-text {
background: #ffffff !important;
color: #0f3a24 !important;
}
.fl-module.mc-oa-cta-button a.fl-button:hover,
.fl-module.mc-oa-cta-button a.fl-button:hover span,
.fl-module.mc-oa-cta-button a.fl-button:hover .fl-button-text {
background: #f6faf7 !important;
color: #0f3a24 !important;
}
/* Right half — white card with Gravity Form */
.fl-module.mc-oa-cta-form-card .fl-module-content {
background: #ffffff;
border-radius: 10px;
padding: 40px;
box-shadow: 0 18px 40px rgba(15, 58, 36, 0.18);
}
.mc-oa-cta-form-card .gform_wrapper input[type="text"],
.mc-oa-cta-form-card .gform_wrapper input[type="email"],
.mc-oa-cta-form-card .gform_wrapper input[type="tel"],
.mc-oa-cta-form-card .gform_wrapper textarea {
background: #ffffff !important;
border: 1px solid #cfe7d8 !important;
border-radius: 6px !important;
padding: 12px 16px !important;
font-family: "Open Sans", sans-serif;
font-size: 15px !important;
color: #1f1f1f;
width: 100%;
height: auto !important;
line-height: 1.4 !important;
box-shadow: none !important;
}
.mc-oa-cta-form-card .gform_wrapper select {
background: #ffffff !important;
border: 1px solid #cfe7d8 !important;
border-radius: 6px !important;
padding: 12px 16px !important;
font-family: "Open Sans", sans-serif;
font-size: 15px !important;
color: #1f1f1f;
width: 100%;
height: auto !important;
line-height: 1.4 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e6e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
background-color: #ffffff !important;
padding-right: 40px !important;
cursor: pointer;
}
.mc-oa-cta-form-card .gform_wrapper select:has(option.gf_placeholder:checked) {
color: #999999 !important;
}
.mc-oa-cta-form-card .gform_wrapper textarea { min-height: 120px; }
.mc-oa-cta-form-card .gform_wrapper input::placeholder,
.mc-oa-cta-form-card .gform_wrapper textarea::placeholder {
color: #999999 !important;
opacity: 1 !important;
}
.mc-oa-cta-form-card .gform_wrapper .gfield_label { display: none; }
.mc-oa-cta-form-card .gform_wrapper .gfield { margin-bottom: 16px !important; padding-bottom: 0 !important; }
.mc-oa-cta-form-card .gform_wrapper .gform_fields { gap: 0 !important; }
.mc-oa-cta-form-card .gform_wrapper .gfield_consent_label,
.mc-oa-cta-form-card .gform_wrapper .ginput_container_consent label {
font-family: "Open Sans", sans-serif;
font-size: 13px;
color: #6e6e6e;
}
.mc-oa-cta-form-card .gform_wrapper .ginput_container_consent a {
color: #219f5a;
}
.mc-oa-cta-form-card .gform_wrapper .gform_footer input[type="submit"],
.mc-oa-cta-form-card .gform_wrapper .gform_button {
background: #219f5a;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 14px 32px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background 0.2s ease;
}
.mc-oa-cta-form-card .gform_wrapper .gform_footer input[type="submit"]:hover,
.mc-oa-cta-form-card .gform_wrapper .gform_button:hover {
background: #1a7544;
}
.mc-oa-cta-form-card .gform_wrapper .gform_confirmation_message {
color: #219f5a;
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
/* --- Mobile --- */
@media (max-width: 900px) {
/* Hero row padding is set in BB editor (Row Settings → Responsive →
Medium) — see note next to the desktop .mc-oa-hero rule above. */
.fl-row.mc-oa-hero .fl-col-group {
gap: 32px;
}
.fl-col.mc-oa-intro-col,
.fl-col.mc-oa-stats-col {
flex: 1 1 100%;
max-width: 100%;
}
/* Column padding at mobile is owned by BB editor's responsive
padding controls — no reset here. */
.fl-module.mc-oa-intro .fl-rich-text p {
font-size: 17px;
}
.fl-module.mc-oa-stat-num .fl-heading {
font-size: 38px;
}
.fl-module.mc-oa-stat-label .fl-rich-text p {
font-size: 10px;
letter-spacing: 0.16em;
}
.fl-row.mc-oa-pillars-heading > .fl-row-content-wrap,
.fl-row.mc-oa-steps-heading > .fl-row-content-wrap {
padding: 60px 20px 18px;
}
.fl-row.mc-oa-pillars > .fl-row-content-wrap {
padding: 14px 12px 60px;
}
.fl-row.mc-oa-steps > .fl-row-content-wrap {
padding: 50px 12px 60px;
}
.fl-col.mc-oa-pillar {
flex: 1 1 50%;
max-width: 50%;
}
.fl-module.mc-oa-pillar-photo .fl-photo-img {
height: 220px;
}
.fl-module.mc-oa-banner-photo .fl-photo-img {
height: 240px;
}
/* Stack the steps; drop the horizontal dashed connector */
body:not(.fl-builder-edit) .fl-row.mc-oa-steps .fl-col-group::before {
display: none;
}
.fl-col.mc-oa-step {
flex: 1 1 100%;
max-width: 100%;
}
.fl-module.mc-oa-step-photo .fl-photo-img {
width: 180px;
height: 180px;
}
.fl-module.mc-oa-cta-heading .fl-heading {
font-size: 26px;
}
.fl-row.mc-oa-cta > .fl-row-content-wrap {
padding: 56px 20px;
}
/* Stack the text + form card */
.fl-col.mc-oa-cta-text,
.fl-col.mc-oa-cta-form {
flex: 1 1 100%;
max-width: 100%;
}
.fl-col.mc-oa-cta-text .fl-col-content {
padding-right: 0;
margin-bottom: 32px;
}
.fl-module.mc-oa-cta-intro .fl-rich-text p {
max-width: 100%;
}
}
@media (max-width: 600px) {
.fl-col.mc-oa-pillar {
flex: 1 1 100%;
max-width: 100%;
}
.fl-module.mc-oa-banner-photo .fl-photo-img {
height: 200px;
}
}
/* ==========================================================================
Careers page (.mc-cr-*).
Three rows: intro paragraph, why-work-with-mcbean (60/40 text + photo),
brand-green CTA band with two buttons. Row paddings live in the BB
layout data so they're editable from the editor.
========================================================================== */
/* Intro paragraph — sits below the global sub-page header. */
.fl-module.mc-cr-intro-text .fl-rich-text {
max-width: 820px;
margin: 0 auto;
}
.fl-module.mc-cr-intro-text .fl-rich-text p {
font-size: 19px;
line-height: 1.7;
color: #1a1a1a;
margin: 0;
}
/* Why-work-with-mcbean section — 60/40 text + photo */
.fl-row.mc-cr-why .fl-col-group {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.fl-module.mc-cr-why-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 32px;
color: #0f3a24;
margin: 0 0 18px;
line-height: 1.2;
}
.fl-module.mc-cr-why-body .fl-rich-text p {
font-size: 17px;
line-height: 1.7;
color: #1a1a1a;
margin: 0 0 28px;
}
.fl-module.mc-cr-why-body .fl-rich-text p:last-child {
margin-bottom: 0;
}
/* Photo treatment matches the homepage Multi-Trade Service video — same
rounded corners + soft shadow — since the photo col now also carries
the `mc-video-card` class. */
.fl-module.mc-cr-why-photo,
.fl-module.mc-cr-why-photo .fl-photo,
.fl-module.mc-cr-why-photo .fl-photo-content {
width: 100%;
display: block;
margin: 0;
position: relative;
z-index: 1;
}
.fl-module.mc-cr-why-photo .fl-photo-img {
display: block;
width: 100%;
height: auto;
min-height: 360px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
}
/* CTA band — brand green via BB row settings; CSS only handles text /
button colors that need to be inverted against the dark background. */
.fl-row.mc-cr-cta .fl-row-content {
max-width: 980px;
text-align: center;
}
/* Override BB's flex-column on the col so the two button modules can
sit side-by-side as inline-blocks (text-align: center on the parent
handles their horizontal centering). */
.fl-row.mc-cr-cta .fl-col-content {
display: block;
text-align: center;
}
.fl-module.mc-cr-cta-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 32px;
color: #ffffff;
margin: 0 0 16px;
line-height: 1.2;
text-align: center;
}
.fl-module.mc-cr-cta-text .fl-rich-text {
max-width: 720px;
margin: 0 auto 28px;
}
.fl-module.mc-cr-cta-text .fl-rich-text p {
color: #e6f1ea;
font-size: 18px;
line-height: 1.65;
margin: 0;
text-align: center;
}
/* Two button modules side-by-side within the centered CTA column. BB
modules are block by default, which would stack them — make them
inline-block so the column's text-align: center lays them out
horizontally. */
.fl-module.mc-cr-cta-button {
display: inline-block;
vertical-align: middle;
margin: 0 6px;
}
.fl-module.mc-cr-cta-button .fl-button-wrap {
margin: 0;
text-align: center;
}
.fl-module.mc-cr-cta-button a.fl-button,
.fl-module.mc-cr-cta-button a.fl-button span,
.fl-module.mc-cr-cta-button a.fl-button .fl-button-text {
background: #ffffff !important;
color: #0f3a24 !important;
font-family: "Montserrat", sans-serif !important;
font-weight: 600 !important;
padding: 14px 28px !important;
border-radius: 4px !important;
text-decoration: none !important;
display: inline-block;
}
.fl-module.mc-cr-cta-button a.fl-button:hover,
.fl-module.mc-cr-cta-button a.fl-button:hover span,
.fl-module.mc-cr-cta-button a.fl-button:hover .fl-button-text {
background: #f6faf7 !important;
color: #0f3a24 !important;
}
@media (max-width: 900px) {
.fl-col.mc-cr-why-text,
.fl-col.mc-cr-why-photo-col {
flex: 1 1 100%;
max-width: 100%;
}
.fl-module.mc-cr-why-photo .fl-photo-img {
min-height: 280px;
}
.fl-module.mc-cr-why-heading .fl-heading,
.fl-module.mc-cr-cta-heading .fl-heading {
font-size: 26px;
}
}
/* ==========================================================================
Divisions overview page (.mc-dv-*).
3×2 grid of clickable cards, one per division. Each card is a BB Box
module rendered as
(link set on the box) containing
logo, division name + tagline, short description, and an "Explore"
nudge at the bottom. Card layout is column-flex so the explore link
pins to the bottom regardless of description length.
========================================================================== */
.fl-module.mc-dv-intro-text .fl-rich-text {
max-width: 820px;
margin: 0 auto;
}
.fl-module.mc-dv-intro-text .fl-rich-text p {
font-size: 19px;
line-height: 1.7;
color: #1a1a1a;
margin: 0;
text-align: center;
}
/* Mobile: extra top + side padding on top of the global 20px row gutter */
@media (max-width: 768px) {
.fl-module.mc-dv-intro-text .fl-rich-text {
padding: 24px 12px 0;
}
}
/* The grid container — BB column-group with flex-wrap so 6 cols of
33.33% wrap into 3-up rows. */
.fl-row.mc-dv-grid .fl-col-group {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
/* Each card: Box module rendered as , full-height, lifts on hover. */
.fl-module.mc-dv-card {
display: flex !important;
flex-direction: column;
background: #ffffff;
color: inherit;
text-decoration: none;
padding: 32px 28px 28px;
height: 100%;
box-sizing: border-box;
box-shadow: 0 6px 18px rgba(15, 58, 36, 0.07);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
background-color 200ms ease-out;
}
.fl-module.mc-dv-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(15, 58, 36, 0.12);
background: #f6faf7;
}
/* Logo — fixed height band at the top of the card */
.fl-module.mc-dv-card-logo {
margin: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
min-height: 70px;
}
.fl-module.mc-dv-card-logo .fl-photo,
.fl-module.mc-dv-card-logo .fl-photo-content {
margin: 0;
display: inline-block;
}
.fl-module.mc-dv-card-logo .fl-photo-img {
display: block;
max-height: 64px;
width: auto;
object-fit: contain;
}
/* Division name + tagline */
.fl-module.mc-dv-card-title .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 22px;
color: #0f3a24;
line-height: 1.25;
margin: 0 0 6px;
text-align: center;
}
.fl-module.mc-dv-card-title .mc-dv-card-tagline {
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
color: #4a4a4a;
margin-top: 4px;
letter-spacing: 0;
}
/* Short description */
.fl-module.mc-dv-card-text {
margin: 14px 0 22px;
}
.fl-module.mc-dv-card-text .fl-rich-text p {
font-size: 15px;
line-height: 1.6;
color: #4a4a4a;
margin: 0;
text-align: center;
}
/* "Explore →" nudge — pinned to the bottom of the card via margin-top: auto */
.fl-module.mc-dv-card-cta {
margin-top: auto;
}
.fl-module.mc-dv-card-cta .fl-rich-text p {
margin: 0;
text-align: center;
}
.mc-dv-card-explore {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #219f5a;
transition: color 160ms ease-out, letter-spacing 160ms ease-out;
}
.fl-module.mc-dv-card:hover .mc-dv-card-explore {
color: #1a7544;
letter-spacing: 0.12em;
}
@media (max-width: 900px) {
.fl-col.mc-dv-card-col {
flex: 1 1 50%;
max-width: 50%;
}
}
@media (max-width: 600px) {
.fl-col.mc-dv-card-col {
flex: 1 1 100%;
max-width: 100%;
}
}
/* ==========================================================================
Individual division pages (.mc-dvp-*).
Shared skeleton across all six division pages (PROCON, GoodFix,
Ashley Cooper, Clean Direct, Living Green, Roofit). Sections:
intro (text + photo) → services list → expertise (photo + text)
→ gallery → CTA. Each page is its own BB layout so individual
tweaks are independent.
========================================================================== */
/* Intro tagline above the H2 — small brand-green eyebrow */
.fl-module.mc-dvp-tagline .fl-rich-text p {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #219f5a;
margin: 0 0 14px;
}
/* Intro logo above the H2 (.mc-dvp-intro-logo). Size is controlled per-module
in the Beaver Builder editor — Photo module → Style → Width. No CSS size
lock here, so each division logo's width can be adjusted freely in the
editor; height follows the logo's own aspect ratio. Left alignment comes
from the module's Align setting; bottom spacing from its margin setting.
Widths were initially set to give a uniform ~72px height across all six. */
.fl-module.mc-dvp-intro-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.15;
color: #0f3a24;
margin: 0 0 20px;
}
.fl-module.mc-dvp-intro-body .fl-rich-text p {
font-size: 17px;
line-height: 1.7;
color: #1a1a1a;
margin: 0 0 16px;
}
.fl-module.mc-dvp-intro-body .fl-rich-text p:last-child {
margin-bottom: 0;
}
/* Intro row layout: stretched flex columns. The photo column carries
its image as a CSS background (set via BB column settings), so the
.fl-col-content needs to fill the full column height for the bg to
show — without content of its own, col-content would collapse to 0. */
.fl-row.mc-dvp-intro .fl-col-group {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.fl-col.mc-dvp-intro-photo-col {
display: flex;
flex-direction: column;
min-height: 480px;
}
.fl-col.mc-dvp-intro-photo-col > .fl-col-content {
flex: 1;
width: 100%;
}
/* Services section — "What We Do" with services as flex-wrap pills */
.fl-row.mc-dvp-services > .fl-row-content-wrap {
background: #f6faf7;
}
.fl-row.mc-dvp-services .fl-row-content {
max-width: 1100px;
}
.fl-module.mc-dvp-services-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 30px;
color: #0f3a24;
margin: 0 0 28px;
text-align: center;
}
.fl-module.mc-dvp-services-list .fl-rich-text ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.fl-module.mc-dvp-services-list .fl-rich-text ul li {
background: #ffffff;
border: 1px solid #cfe7d8;
padding: 12px 22px;
border-radius: 999px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 14px;
color: #0f3a24;
margin: 0;
line-height: 1;
}
/* Expertise section (photo left, text right) */
.fl-row.mc-dvp-expertise .fl-col-group {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.fl-module.mc-dvp-expertise-photo,
.fl-module.mc-dvp-expertise-photo .fl-photo,
.fl-module.mc-dvp-expertise-photo .fl-photo-content {
width: 100%;
display: block;
margin: 0;
height: 100%;
}
.fl-module.mc-dvp-expertise-photo .fl-photo-img {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
}
.fl-module.mc-dvp-expertise-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 30px;
color: #0f3a24;
margin: 0 0 20px;
}
.fl-module.mc-dvp-expertise-body .fl-rich-text p {
font-size: 17px;
line-height: 1.7;
color: #1a1a1a;
margin: 0 0 16px;
}
.fl-module.mc-dvp-expertise-body .fl-rich-text p:last-child {
margin-bottom: 0;
}
/* Gallery section */
.fl-row.mc-dvp-gallery > .fl-row-content-wrap {
background: #ffffff;
}
.fl-module.mc-dvp-gallery-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 28px;
color: #0f3a24;
margin: 0 0 28px;
text-align: center;
}
/* Brickwork gallery: 6-column grid where photos alternate row patterns
— 3 photos per row (each span 2 of 6 = wider thirds), then 2 photos
per row (each span 3 of 6 = halves). Wookmark (BB's bundled masonry
JS) sets absolute positioning on every .fl-gallery-item inline, so
we force-clear that. */
.fl-module.mc-dvp-gallery-grid .fl-gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
/* BB's Wookmark JS sets an inline height assuming absolute-
positioned items; with our grid that under-counts the real
height and the load-more button below overlaps the bottom
row. Force the wrapper to size to its grid content. */
height: auto !important;
min-height: 0 !important;
}
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item {
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: 240px; /* fix the cell height; image fills it below */
margin: 0 !important;
padding: 0 !important;
grid-column: span 2; /* default: 3-per-row */
overflow: hidden;
}
/* Every 4th and 5th item in the repeating pattern span 3 cols (2-per-row) */
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item:nth-child(5n+4),
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item:nth-child(5n+5) {
grid-column: span 3;
}
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item .fl-photo,
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item .fl-photo-content {
width: 100%;
height: 100%;
}
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item img,
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item .fl-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- Gallery "Load more" clamp ---
Galleries marked with `.mc-gallery-clamp` (server-side via
fl_builder_module_attributes in functions.php) hide every item
past the threshold until the user clicks the button injected
by /js/mc-gallery-loadmore.js. `--mc-clamp-after` is set by the
JS to the threshold so this single rule works for any gallery
regardless of grid pattern. */
/* CSS :nth-child() doesn't accept var() yet, so apply the actual
threshold per known marker class. Add a rule for each new clamp
target you add in functions.php.
!important needed because the per-gallery base styles set
`display: block !important` on items to defeat the Wookmark JS. */
.fl-module.mc-dvp-gallery-grid.mc-gallery-clamp--ready:not(.is-expanded)
.fl-gallery-item:nth-child(n + 6) {
display: none !important;
}
.fl-module.mc-pj-gallery-grid.mc-gallery-clamp--ready:not(.is-expanded)
.fl-gallery-item:nth-child(n + 5) {
display: none !important;
}
.mc-gallery-loadmore {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 28px auto 0;
padding: 12px 28px;
border: 1px solid #219f5a;
border-radius: 6px;
background: transparent;
color: #219f5a;
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition:
background 180ms ease,
color 180ms ease,
transform 180ms ease;
}
/* Centre the button under its gallery — the gallery row is centred
so a margin trick is enough; if we ever right-align a gallery we
can change this then. */
.mc-gallery-loadmore {
display: flex;
justify-content: center;
width: max-content;
margin-left: auto;
margin-right: auto;
}
.mc-gallery-loadmore:hover,
.mc-gallery-loadmore:focus {
background: #219f5a;
color: #ffffff;
transform: translateY(-1px);
}
.mc-gallery-loadmore:focus-visible {
outline: 3px solid rgba(33, 159, 90, 0.45);
outline-offset: 3px;
}
/* CTA band (same structure as careers CTA — white text + buttons on green) */
.fl-row.mc-dvp-cta .fl-row-content {
max-width: 980px;
text-align: center;
}
.fl-row.mc-dvp-cta .fl-col-content {
display: block;
text-align: center;
}
.fl-module.mc-dvp-cta-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 32px;
color: #ffffff;
margin: 0 0 14px;
line-height: 1.2;
text-align: center;
}
.fl-module.mc-dvp-cta-text .fl-rich-text {
max-width: 720px;
margin: 0 auto 28px;
}
.fl-module.mc-dvp-cta-text .fl-rich-text p {
color: #e6f1ea;
font-size: 18px;
line-height: 1.65;
margin: 0;
text-align: center;
}
.fl-module.mc-dvp-cta-button {
display: inline-block;
vertical-align: middle;
margin: 0 6px;
}
.fl-module.mc-dvp-cta-button .fl-button-wrap {
margin: 0;
text-align: center;
}
.fl-module.mc-dvp-cta-button a.fl-button,
.fl-module.mc-dvp-cta-button a.fl-button span,
.fl-module.mc-dvp-cta-button a.fl-button .fl-button-text {
background: #ffffff !important;
color: #0f3a24 !important;
font-family: "Montserrat", sans-serif !important;
font-weight: 600 !important;
padding: 14px 28px !important;
border-radius: 4px !important;
text-decoration: none !important;
}
.fl-module.mc-dvp-cta-button a.fl-button:hover,
.fl-module.mc-dvp-cta-button a.fl-button:hover span,
.fl-module.mc-dvp-cta-button a.fl-button:hover .fl-button-text {
background: #f6faf7 !important;
color: #0f3a24 !important;
}
@media (max-width: 900px) {
.fl-col.mc-dvp-intro-text,
.fl-col.mc-dvp-intro-photo-col,
.fl-col.mc-dvp-expertise-photo-col,
.fl-col.mc-dvp-expertise-text {
flex: 1 1 100%;
max-width: 100%;
}
.fl-module.mc-dvp-intro-heading .fl-heading {
font-size: 28px;
}
.fl-module.mc-dvp-services-heading .fl-heading,
.fl-module.mc-dvp-expertise-heading .fl-heading,
.fl-module.mc-dvp-cta-heading .fl-heading {
font-size: 24px;
}
.fl-module.mc-dvp-gallery-grid .fl-gallery {
grid-template-columns: repeat(2, 1fr);
}
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item,
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item:nth-child(5n+4),
.fl-module.mc-dvp-gallery-grid .fl-gallery .fl-gallery-item:nth-child(5n+5) {
grid-column: span 1;
}
/* --- Vertical rhythm once columns stack (same principles as the
rest of the mobile pass: BB auto-spacing strips the gaps) --- */
/* Section breathing room */
.fl-row.mc-dvp-intro > .fl-row-content-wrap,
.fl-row.mc-dvp-services > .fl-row-content-wrap,
.fl-row.mc-dvp-expertise > .fl-row-content-wrap,
.fl-row.mc-dvp-gallery > .fl-row-content-wrap,
.fl-row.mc-dvp-cta > .fl-row-content-wrap {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Clear gap between the division logo and the heading, all six pages */
.fl-module.mc-dvp-intro-logo {
margin-bottom: 28px !important;
}
/* GoodFix logo PNG carries internal whitespace — optical left-align
nudge, this page only (other divisions' logos differ) */
body.page-id-14 .fl-module.mc-dvp-intro-logo {
margin-left: -16px !important;
}
/* The intro text column carries desktop-design padding in its BB
settings (130 top / 140 bottom / 80 right) — far too much once
the columns stack. Compact it for mobile. */
.fl-row.mc-dvp-intro .fl-col.mc-dvp-intro-text > .fl-col-content {
padding: 32px 0 16px !important;
}
/* Expertise → gallery reads too far apart at 40+40 — tighten */
.fl-row.mc-dvp-expertise > .fl-row-content-wrap {
padding-bottom: 24px !important;
}
.fl-row.mc-dvp-gallery > .fl-row-content-wrap {
padding-top: 24px !important;
}
/* Gaps between stacked columns (photo under text, text under photo) */
.fl-col.mc-dvp-intro-photo-col,
.fl-col.mc-dvp-expertise-text {
margin-top: 24px;
}
/* Gaps between modules inside a section */
.fl-module.mc-dvp-intro-body,
.fl-module.mc-dvp-expertise-body,
.fl-module.mc-dvp-cta-text {
margin-top: 10px;
}
.fl-module.mc-dvp-services-list {
margin-top: 14px;
}
.fl-module.mc-dvp-gallery-grid {
margin-top: 0;
}
.fl-module.mc-dvp-gallery-heading .fl-heading {
margin-bottom: 16px;
}
.fl-module.mc-dvp-cta-button {
margin-top: 12px;
}
}
@media (max-width: 600px) {
.fl-module.mc-dvp-gallery-grid .fl-gallery {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Projects archive (.mc-projects-archive*, .mc-project-tile*).
Rendered by themes/bb-theme-child/archive-mcbean_project.php.
Image-led tiles in a 3-col grid; first tile spans 2 cols as a
feature. Photo fills the tile; title and "View project" overlay
on a dark gradient scrim at the bottom. Hover lifts the scrim
and gently zooms the image. Sub-page header is auto-applied by
the fl_before_content hook in functions.php.
========================================================================== */
/* Break the bb-theme `.container` constraint for this archive — the
parent theme wraps everything in a max-width container with a
`col-md-8` content column, which leaves the grid feeling cramped.
Force the archive to span the full viewport width. */
.fl-archive-mcbean-project {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
}
.fl-archive-mcbean-project .row {
margin: 0 !important;
width: 100%;
}
.fl-archive-mcbean-project .fl-content {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.mc-projects-archive {
padding: 70px 24px 100px;
background: #ffffff;
}
.mc-projects-archive__inner {
max-width: 1320px;
margin: 0 auto;
}
.mc-projects-archive__intro {
font-size: 19px;
line-height: 1.7;
color: #1a1a1a;
margin: 0 auto 56px;
max-width: 760px;
text-align: center;
}
.mc-projects-archive__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 280px;
gap: 20px;
}
/* Each tile: image fills the tile, title overlays bottom-left over a
dark gradient scrim. Whole tile is the link. */
.mc-project-tile {
position: relative;
display: block;
text-decoration: none;
color: #ffffff;
overflow: hidden;
background: #0f3a24;
box-shadow: 0 8px 24px rgba(15, 58, 36, 0.10);
transition: box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mc-project-tile:hover {
box-shadow: 0 18px 36px rgba(15, 58, 36, 0.20);
}
/* First tile is a feature — spans 2 cols and 2 rows for editorial rhythm */
.mc-project-tile--feature {
grid-column: span 2;
grid-row: span 2;
}
.mc-project-tile__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mc-project-tile:hover .mc-project-tile__img {
transform: scale(1.06);
}
.mc-project-tile__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0f3a24 0%, #219f5a 100%);
}
/* Dark scrim at the bottom — strong enough that white title reads on
any photo. Hover deepens the scrim slightly. */
.mc-project-tile__scrim {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.45) 25%,
rgba(0, 0, 0, 0.05) 55%,
transparent 100%);
transition: background 280ms ease-out;
}
.mc-project-tile:hover .mc-project-tile__scrim {
background: linear-gradient(to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.62) 30%,
rgba(0, 0, 0, 0.18) 60%,
transparent 100%);
}
.mc-project-tile__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 26px 28px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mc-project-tile__title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.25;
color: #ffffff;
margin: 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.mc-project-tile--feature .mc-project-tile__title {
font-size: 32px;
line-height: 1.15;
max-width: 80%;
}
.mc-project-tile__cta {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9bd1ad;
transform: translateY(6px);
opacity: 0;
transition: transform 260ms ease-out, opacity 260ms ease-out;
}
.mc-project-tile:hover .mc-project-tile__cta,
.mc-project-tile:focus-visible .mc-project-tile__cta {
transform: translateY(0);
opacity: 1;
}
.mc-projects-archive__nav {
margin-top: 56px;
text-align: center;
}
@media (max-width: 900px) {
.mc-projects-archive {
padding: 50px 16px 70px;
}
.mc-projects-archive__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 240px;
gap: 14px;
}
/* Feature collapses to a single wide tile on tablet (still 2 cols, 1 row) */
.mc-project-tile--feature {
grid-column: span 2;
grid-row: span 2;
}
.mc-project-tile--feature .mc-project-tile__title {
font-size: 26px;
}
/* Reveal CTA persistently on touch */
.mc-project-tile__cta { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
.mc-projects-archive__grid {
grid-template-columns: 1fr;
grid-auto-rows: 260px;
}
.mc-project-tile--feature {
grid-column: span 1;
grid-row: span 1;
}
.mc-project-tile--feature .mc-project-tile__title {
font-size: 22px;
}
}
/* ==========================================================================
News page (.mc-nw-*).
On-brand news listing built with a Beaver Builder Posts module — NOT the
default WordPress archive (the page is no longer assigned as the "Posts
page" in Reading settings, so it renders this layout). Intro band + a
responsive card grid. BB's "grid" layout uses JS masonry; we neutralise
that and use a plain CSS grid so the cards lay out predictably.
========================================================================== */
.fl-row.mc-nw-intro > .fl-row-content-wrap { padding: 72px 20px 12px; }
.fl-row.mc-nw-feed > .fl-row-content-wrap { padding: 28px 20px 100px; }
/* Intro band — eyebrow + heading + lead line (sits below the green title bar) */
.fl-module.mc-nw-eyebrow .fl-heading {
font-family: "Montserrat", sans-serif;
font-size: 13px;
color: #219f5a;
letter-spacing: 0.2em;
margin: 0 0 14px;
}
.fl-module.mc-nw-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.15;
color: #0f3a24;
margin: 0 0 16px;
}
.fl-module.mc-nw-intro-text .fl-rich-text { max-width: 760px; }
.fl-module.mc-nw-intro-text .fl-rich-text p {
font-size: 18px;
line-height: 1.7;
color: #1a1a1a;
margin: 0;
}
/* Card grid — override BB masonry (absolute positioning + fixed container
height) with a clean, equal-height CSS grid. */
.mc-nw-grid .fl-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
/* BB's masonry JS sets inline width/height on this container; !important
in the stylesheet overrides those JS-set inline styles. */
width: 100% !important;
height: auto !important;
}
/* Kill the theme's clearfix ::before/::after — in a grid container they become
grid items and steal the first/last cells, shoving real posts sideways. */
.mc-nw-grid .fl-post-grid::before,
.mc-nw-grid .fl-post-grid::after { display: none !important; }
.mc-nw-grid .fl-post-grid .fl-post-grid-sizer { display: none !important; }
/* Masonry wraps each post in a ul.masonry-brick and positions it absolutely;
display:contents removes that wrapper from layout so the post itself becomes
the grid cell (and masonry's inline positioning no longer applies). */
.mc-nw-grid .fl-post-grid .masonry-brick:not(.fl-post-grid-sizer) { display: contents !important; }
/* The post card (a ). High specificity to beat BB's generated
`.fl-module-post-grid :not(.fl-builder-pagination) > ul { background:unset }`. */
.mc-nw-grid .fl-post-grid .fl-post-grid-post {
position: static !important;
left: auto !important;
top: auto !important;
width: auto !important;
float: none !important;
transform: none !important; /* masonry positions items via translate() */
margin: 0 !important;
padding: 0;
list-style: none;
background: #ffffff !important;
border: 1px solid #d7e6dd;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(15, 58, 36, 0.10);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mc-nw-grid .fl-post-grid .fl-post-grid-post:hover {
box-shadow: 0 18px 44px rgba(15, 58, 36, 0.16);
transform: translateY(-3px);
}
/* Featured image (rendered when a post has one) */
.mc-nw-grid .fl-post-grid-image { margin: 0; height: 220px; overflow: hidden; }
.mc-nw-grid .fl-post-grid-image img {
display: block;
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
}
.mc-nw-grid .fl-post-grid-text { padding: 26px 26px 28px; }
.mc-nw-grid .fl-post-grid-title { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.mc-nw-grid .fl-post-grid-title a {
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: #0f3a24;
text-decoration: none;
}
.mc-nw-grid .fl-post-grid-title a:hover { color: #219f5a; }
.mc-nw-grid .fl-post-grid-meta,
.mc-nw-grid .fl-post-grid-date {
font-family: "Montserrat", sans-serif;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6e6e6e;
margin: 0 0 12px;
}
.mc-nw-grid .fl-post-grid-content p {
font-size: 15px;
line-height: 1.65;
color: #444444;
margin: 0 0 16px;
}
.mc-nw-grid .fl-post-grid-content p:last-child { margin-bottom: 0; }
.mc-nw-grid .fl-post-more-link,
.mc-nw-grid .fl-post-grid-more {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 14px;
color: #219f5a;
text-decoration: none;
}
.mc-nw-grid .fl-post-more-link:hover,
.mc-nw-grid .fl-post-grid-more:hover { color: #1a7544; }
/* Empty / "coming soon" state — shown until news posts are published. */
.mc-nw-grid .fl-post-grid-empty,
.mc-nw-grid .fl-post-no-results {
grid-column: 1 / -1;
text-align: center;
font-size: 17px;
line-height: 1.6;
color: #6e6e6e;
background: #f6faf7;
border: 1px dashed #cfe7d8;
border-radius: 12px;
padding: 56px 24px;
margin: 0;
}
.mc-nw-grid .fl-post-grid-empty p { margin: 0; }
/* BB appends a search form to the no-results block; not wanted on a
"coming soon" notice (real posts replace this state entirely). */
.mc-nw-grid .fl-post-grid-empty form { display: none; }
@media (max-width: 980px) {
.mc-nw-grid .fl-post-grid { grid-template-columns: repeat(2, 1fr); }
.fl-module.mc-nw-heading .fl-heading { font-size: 30px; }
.fl-row.mc-nw-intro > .fl-row-content-wrap { padding: 56px 20px 8px; }
.fl-row.mc-nw-feed > .fl-row-content-wrap { padding: 24px 20px 72px; }
}
@media (max-width: 600px) {
.mc-nw-grid .fl-post-grid { grid-template-columns: 1fr; }
}
/* =============================================
Single Post template (.mc-sp-*)
BB Themer layout for individual news articles.
============================================= */
/* --- Hide sidebar, comments, subheader, and default nav on single posts --- */
.single-post .mc-subheader,
.single-post .fl-page-content .sidebar,
.single-post .fl-comments,
.single-post #comments,
.single-post .fl-post-navigation { display: none; }
.single-post .fl-content-full { max-width: 100%; }
/* --- Header row --- */
.fl-row.mc-sp-header > .fl-row-content-wrap {
padding: 64px 20px 20px;
max-width: 820px;
margin: 0 auto;
}
/* Back to News — quiet text link, first thing in the header container,
left-aligned with the eyebrow/title below it. It's a BB button module,
so the site-wide green pill styling has to be unwound here. */
.fl-module.mc-sp-back {
margin: 0 0 26px;
}
.fl-module.mc-sp-back.fl-button-wrap,
.fl-module.mc-sp-back .fl-button-wrap {
text-align: left;
}
.fl-module.mc-sp-back a.fl-button {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
display: inline-block !important;
font-family: "Montserrat", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
}
.fl-module.mc-sp-back a.fl-button .fl-button-text {
color: #219f5a !important;
transition: color 0.2s ease;
}
.fl-module.mc-sp-back a.fl-button:hover,
.fl-module.mc-sp-back a.fl-button:focus {
background: transparent !important;
box-shadow: none !important;
transform: none;
}
.fl-module.mc-sp-back a.fl-button:hover .fl-button-text,
.fl-module.mc-sp-back a.fl-button:focus .fl-button-text {
color: #1a7544 !important;
}
.fl-module.mc-sp-eyebrow .fl-heading {
font-family: "Montserrat", sans-serif;
font-size: 13px;
font-weight: 700;
color: #219f5a;
text-transform: uppercase;
letter-spacing: 0.2em;
margin: 0 0 24px !important;
}
.fl-module.mc-sp-title .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 1.2;
color: #0f3a24;
margin: 0 0 20px !important;
}
.fl-module.mc-sp-date .fl-heading {
font-family: "Open Sans", sans-serif;
font-size: 15px;
color: #6e6e6e;
margin: 0;
}
/* --- Featured image --- */
.fl-row.mc-sp-image > .fl-row-content-wrap {
padding: 20px 20px 0;
max-width: 960px;
margin: 0 auto;
}
.fl-module.mc-sp-featured .fl-photo img {
width: 100%;
height: auto;
border-radius: 12px;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* --- Post content --- */
.fl-row.mc-sp-content > .fl-row-content-wrap {
padding: 40px 20px 60px;
max-width: 760px;
margin: 0 auto;
}
.fl-module.mc-sp-body {
font-family: "Open Sans", sans-serif;
font-size: 17px;
line-height: 1.75;
color: #1f1f1f;
}
.fl-module.mc-sp-body p {
margin-bottom: 1.4em;
}
.fl-module.mc-sp-body h2,
.fl-module.mc-sp-body h3 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: #0f3a24;
margin-top: 2em;
margin-bottom: 0.6em;
}
.fl-module.mc-sp-body blockquote {
border-left: 4px solid #219f5a;
padding: 16px 20px;
margin: 1.8em 0;
background: #f6faf7;
font-style: italic;
color: #0f3a24;
}
/* --- Read More section --- */
.fl-row.mc-sp-readmore > .fl-row-content-wrap {
padding: 60px 20px 80px;
border-top: 1px solid #cfe7d8;
}
.fl-module.mc-sp-readmore-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 28px;
color: #0f3a24;
margin: 0 0 40px !important;
text-align: center;
}
/* Reuse same card grid as the News page */
.mc-sp-readmore-grid .fl-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
width: 100% !important;
height: auto !important;
}
.mc-sp-readmore-grid .fl-post-grid::before,
.mc-sp-readmore-grid .fl-post-grid::after { display: none !important; }
.mc-sp-readmore-grid .fl-post-grid .fl-post-grid-sizer { display: none !important; }
.mc-sp-readmore-grid .fl-post-grid .masonry-brick:not(.fl-post-grid-sizer) {
display: contents !important;
}
.mc-sp-readmore-grid .fl-post-grid .fl-post-grid-post {
position: static !important;
left: auto !important;
top: auto !important;
width: auto !important;
float: none !important;
transform: none !important;
margin: 0 !important;
padding: 0;
list-style: none;
background: #ffffff !important;
border: 1px solid #d7e6dd;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(15, 58, 36, 0.10);
display: flex;
flex-direction: column;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-image img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-text {
padding: 20px;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.3;
margin: 0 0 8px;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-title a {
color: #0f3a24;
text-decoration: none;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-title a:hover {
color: #219f5a;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-meta {
font-size: 13px;
color: #6e6e6e;
margin-bottom: 10px;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-content {
font-size: 15px;
line-height: 1.6;
color: #1f1f1f;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-more a {
display: inline-block;
margin-top: 12px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 14px;
color: #219f5a;
text-decoration: none;
}
.mc-sp-readmore-grid .fl-post-grid-post .fl-post-grid-more a:hover {
color: #1a7544;
}
.mc-sp-readmore-grid .fl-post-grid-empty form { display: none; }
/* --- Responsive --- */
@media (max-width: 980px) {
.fl-module.mc-sp-title .fl-heading { font-size: 32px; }
.mc-sp-readmore-grid .fl-post-grid { grid-template-columns: repeat(2, 1fr); }
.fl-row.mc-sp-header > .fl-row-content-wrap { padding: 48px 20px 16px; }
}
@media (max-width: 600px) {
.fl-module.mc-sp-title .fl-heading { font-size: 26px; }
.mc-sp-readmore-grid .fl-post-grid { grid-template-columns: 1fr; }
.fl-row.mc-sp-content > .fl-row-content-wrap { padding: 28px 16px 48px; }
}
/* =============================================
Contact Us page (.mc-ct-*)
============================================= */
/* The standard subheader strip shows for Contact — hide the custom hero row */
.page-id-12 .fl-row.mc-ct-hero { display: none; }
/* Form + CTA section */
.fl-row.mc-ct-form-section > .fl-row-content-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 60px 0;
}
/* Form column — dark card */
.fl-col.mc-ct-form-col > .fl-col-content {
background: #2a2a2a;
border-radius: 12px;
padding: 60px 40px 40px;
}
.fl-module.mc-ct-form-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 26px;
color: #ffffff;
margin: 0 0 36px !important;
}
/* Gravity Forms styling inside the dark card */
.mc-ct-form-embed .gform_wrapper input[type="text"],
.mc-ct-form-embed .gform_wrapper input[type="email"],
.mc-ct-form-embed .gform_wrapper input[type="tel"],
.mc-ct-form-embed .gform_wrapper textarea {
background: #ffffff !important;
border: none !important;
border-radius: 6px !important;
padding: 12px 16px !important;
font-family: "Open Sans", sans-serif;
font-size: 15px !important;
color: #1f1f1f;
width: 100%;
height: auto !important;
line-height: 1.4 !important;
box-shadow: none !important;
}
.mc-ct-form-embed .gform_wrapper select {
background: #ffffff;
border: none !important;
border-radius: 6px !important;
padding: 12px 16px !important;
font-family: "Open Sans", sans-serif;
font-size: 15px !important;
color: #1f1f1f;
width: 100%;
height: auto !important;
box-shadow: none !important;
line-height: 1.4 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e6e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
background-color: #ffffff !important;
padding-right: 40px !important;
cursor: pointer;
}
.mc-ct-form-embed .gform_wrapper select option.gf_placeholder {
color: #999999;
}
.mc-ct-form-embed .gform_wrapper select:has(option.gf_placeholder:checked) {
color: #999999 !important;
}
.mc-ct-form-embed .gform_wrapper textarea { min-height: 140px; }
.mc-ct-form-embed .gform_wrapper input::placeholder,
.mc-ct-form-embed .gform_wrapper textarea::placeholder {
color: #999999 !important;
opacity: 1 !important;
}
.mc-ct-form-embed .gform_wrapper .gfield_label { display: none; }
.mc-ct-form-embed .gform_wrapper .gfield { margin-bottom: 20px !important; padding-bottom: 0 !important; }
.mc-ct-form-embed .gform_wrapper .gform_fields { gap: 0 !important; }
.mc-ct-form-embed .gform_wrapper .gfield_consent_label,
.mc-ct-form-embed .gform_wrapper .ginput_container_consent label {
font-family: "Open Sans", sans-serif;
font-size: 13px;
color: #cfe7d8;
}
.mc-ct-form-embed .gform_wrapper .ginput_container_consent a {
color: #9bd1ad;
}
.mc-ct-form-embed .gform_wrapper .gform_footer input[type="submit"],
.mc-ct-form-embed .gform_wrapper .gform_button {
background: #219f5a;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 14px 32px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background 0.2s ease;
}
.mc-ct-form-embed .gform_wrapper .gform_footer input[type="submit"]:hover,
.mc-ct-form-embed .gform_wrapper .gform_button:hover {
background: #1a7544;
}
.mc-ct-form-embed .gform_wrapper .gform_confirmation_message {
color: #9bd1ad;
font-family: "Open Sans", sans-serif;
font-size: 16px;
}
/* CTA column — vertically centred */
.fl-col.mc-ct-cta-col > .fl-col-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0 0 60px;
height: 100%;
}
.fl-module.mc-ct-cta-heading .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 28px;
color: #0f3a24;
line-height: 1.3;
margin: 0 0 20px;
}
.fl-module.mc-ct-cta-heading .fl-heading strong {
font-weight: 700;
}
.fl-module.mc-ct-cta-heading .fl-heading a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.fl-module.mc-ct-cta-heading .fl-heading a:hover {
color: #219f5a;
}
.fl-module.mc-ct-cta-text .fl-rich-text p {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.7;
color: #3b3b3b;
}
.fl-module.mc-ct-cta-text .fl-rich-text a[href^="mailto"] {
color: #219f5a;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.fl-module.mc-ct-cta-text .fl-rich-text a[href^="mailto"]::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23219f5a'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fl-module.mc-ct-cta-text .fl-rich-text a[href^="mailto"]:hover {
color: #1a7544;
}
.fl-module.mc-ct-cta-text .fl-rich-text a[href^="mailto"]:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a7544'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
/* Newsletter signup — same stock subscribe-form module as the footer
(shared MailChimp list), restyled for the light CTA column. Jenn's
"Subscribe to our mailing list" heading sits directly above it. */
.fl-module.mc-ct-subscribe {
margin-top: 4px;
max-width: 380px;
}
.fl-module.mc-ct-subscribe .fl-form-field {
margin-bottom: 10px;
}
.fl-module.mc-ct-subscribe .fl-form-field input[type="text"],
.fl-module.mc-ct-subscribe .fl-form-field input[type="email"] {
width: 100%;
background: #fff;
border: 1px solid #cfe7d8;
border-radius: 6px;
color: #0f3a24;
font-family: "Open Sans", sans-serif;
font-size: 15px;
line-height: 1.4;
padding: 11px 14px;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.fl-module.mc-ct-subscribe .fl-form-field input::placeholder {
color: rgba(15, 58, 36, 0.45);
}
.fl-module.mc-ct-subscribe .fl-form-field input:focus {
border-color: #219f5a;
box-shadow: 0 0 0 3px rgba(33, 159, 90, 0.12);
outline: none;
}
.fl-module.mc-ct-subscribe .fl-form-button a.fl-button {
display: block;
width: 100%;
background: #219f5a !important;
border: 0 !important;
border-radius: 6px;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
padding: 12px 20px;
transition: background 180ms ease, transform 180ms ease;
}
.fl-module.mc-ct-subscribe .fl-form-button a.fl-button:hover {
background: #1a7544 !important;
transform: translateY(-1px);
}
.fl-module.mc-ct-subscribe .fl-form-button a.fl-button .fl-button-text {
color: #fff !important;
}
.fl-module.mc-ct-subscribe .fl-form-error-message {
font-size: 12px;
margin-top: 6px;
}
.fl-module.mc-ct-subscribe .fl-form-success-message {
color: #1a7544;
font-size: 14px;
}
/* Office sections — full-width edge-to-edge */
.fl-row.mc-ct-office > .fl-row-content-wrap {
max-width: 100%;
padding: 0;
}
.fl-row.mc-ct-office .fl-row-content { max-width: 100%; }
.fl-row.mc-ct-office .fl-col-group { margin: 0; }
.fl-row.mc-ct-office .fl-col { padding: 0 !important; }
/* Map */
.mc-ct-map iframe { display: block; width: 100%; height: 450px; border-radius: 0; }
/* Glasgow details — green band */
.fl-col.mc-ct-details-glasgow > .fl-col-content {
background: #0f3a24;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 450px;
}
/* Edinburgh details — dark band */
.fl-col.mc-ct-details-edinburgh > .fl-col-content {
background: #1f1f1f;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 450px;
}
.fl-module.mc-ct-office-name .fl-heading {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 26px;
color: #ffffff;
margin: 0 0 24px !important;
display: flex;
align-items: baseline;
gap: 8px;
}
.fl-module.mc-ct-office-name .fl-heading .mc-ct-office-logo {
height: 28px;
width: auto;
position: relative;
top: 2px;
}
.fl-module.mc-ct-office-name .fl-heading strong { font-weight: 700; }
.fl-module.mc-ct-office-address .fl-rich-text p {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #cfe7d8;
margin: 0 0 16px;
}
.fl-module.mc-ct-office-phone .fl-rich-text p {
font-family: "Montserrat", sans-serif;
font-size: 18px;
font-weight: 700;
margin: 0 0 24px;
}
.fl-module.mc-ct-office-phone .fl-rich-text a {
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.fl-module.mc-ct-office-phone .fl-rich-text a::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fl-module.mc-ct-office-phone .fl-rich-text a:hover { color: #9bd1ad; }
/* Directions button */
.fl-module.mc-ct-directions-btn .fl-button {
background: transparent !important;
border: 2px solid #ffffff !important;
border-radius: 6px;
padding: 10px 24px !important;
transition: background 0.2s ease, border-color 0.2s ease;
}
.fl-module.mc-ct-directions-btn .fl-button .fl-button-text {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 14px;
color: #ffffff;
}
.fl-module.mc-ct-directions-btn .fl-button:hover {
background: rgba(255,255,255,0.1) !important;
}
/* Responsive */
@media (max-width: 980px) {
.fl-row.mc-ct-form-section > .fl-row-content-wrap { padding: 40px 20px; }
.fl-col.mc-ct-cta-col > .fl-col-content { padding: 30px 0 0 0; }
}
@media (max-width: 768px) {
.fl-col.mc-ct-details-glasgow > .fl-col-content,
.fl-col.mc-ct-details-edinburgh > .fl-col-content { min-height: auto; padding: 40px; }
.mc-ct-map iframe { height: 300px; }
/* Breathing room between the email address and the subscribe heading */
.fl-module.mc-ct-subscribe-heading {
margin-top: 28px;
}
/* Both office rows stack full-width: details card first, map after.
(Glasgow needs an order swap — its map comes first in the DOM.) */
body .fl-row.mc-ct-office .fl-col-group {
display: flex !important;
flex-direction: column;
}
body .fl-row.mc-ct-office .fl-col {
width: 100% !important;
max-width: 100% !important;
}
body .fl-row.mc-ct-glasgow .fl-col.mc-ct-map-col {
order: 2;
}
}