) are preserved when the consumer wants them. */
.subheading-strong,
.why-choose-us__subheading,
.roof-installation-intro__subtitle {
font-family: var(--ff-primary);
font-size: var(--font24);
font-weight: 600;
line-height: 1.5;
color: var(--clr-ink);
margin-bottom: 10px;
}
.roof-installation-intro__subtitle { margin: 0; }
/* Font-size utilities (kept for legacy markup) */
.font72 { font-size: var(--font72); }
.font60 { font-size: var(--font60); }
.font30 { font-size: var(--font30); }
.font24 { font-size: var(--font24); }
.font20 { font-size: var(--font20); }
.font18 { font-size: var(--font18); }
.fw800 { font-weight: 800; }
.fw700 { font-weight: 700; }
.fw600 { font-weight: 600; }
.fw500 { font-weight: 500; }
.fw400 { font-weight: 400; }
/* ==========================================================================
4. Layout Atoms
========================================================================== */
/* ----- Universal utilities ---------------------------------------------------
.wrapper → horizontal container (the ONLY place width/padding-inline lives)
.cblock → vertical section rhythm (the ONLY place section padding-block lives)
Every section follows this pattern in markup:
BEM "__inner" / "__grid" / "__container" classes are still allowed as hooks
for layout (display: grid/flex, gap, etc.) but MUST NOT redeclare width,
max-width, margin, padding-inline, or padding-block — that's the utility's job.
*/
.wrapper {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: 30px;
position: relative;
z-index: 1;
}
/* Edge-to-edge variant for bands that need to span beyond --container-width
(e.g., header utility band, footer columns). Use sparingly. */
.wrapper--wide { max-width: 100%; }
.cblock {
padding-block: var(--section-pad-y);
/* Defaults so a `section_background_image` set in ACF always displays correctly.
Harmless when no image is set. Sections that need different values override below. */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Layout composition primitives.
`.stack` is the canonical vertical-flex recipe; the BEM aliases below pull
every section's column-flex block into this single source of truth so we
don't repeat `display: flex; flex-direction: column;` 30+ times.
Section-specific deltas (gap, align-items, padding, max-width, etc.) stay
in the relevant section block. */
.stack,
.footer__tile-body,
.footer__brand-col,
.footer__links,
.hero-banner__content,
.hero-banner__title-copy,
.technology__container,
.technology__header,
.technology__card,
.about__content,
.global-cta__content,
.explore-our-services > .wrapper,
.explore-our-services__header,
.services-card__inner,
.services-card__body,
.why-choose-us__content,
.why-choose-us__bullets-block,
.trusted-media__content,
.trusted-media__features,
.our-work__inner,
.our-work__title-group,
.our-work__col,
.testimonials-section__inner,
.testimonials-section__header,
.testimonial-card,
.testimonial-card__meta,
.financing-section__inner,
.financing-section__intro,
.financing-card,
.financing-card__features,
.locations__content,
.locations__project-card-body,
.page-banner__inner,
.roof-installation-intro__inner,
.services-panel,
.services-panel__list,
.services-panel__cta,
.info-card,
.info-card__features {
display: flex;
flex-direction: column;
}
.stack { gap: var(--gap-md); }
.stack--lg { gap: var(--gap-lg); }
.stack--sm { gap: var(--gap-sm); }
.stack--center { align-items: center; text-align: center; }
/* List-reset atom — every BEM list block that hides its bullets + zeros its
box. Section-specific layout (display, gap, grid-template) stays inline. */
.num-card-list,
.header__menu,
.mobile-drawer__list,
.footer__social-list,
.footer__links,
.footer__legal,
.action-bar__list,
.why-choose-us__bullets,
.financing-card__features,
.services-panel__list,
.info-card__features {
list-style: none;
margin: 0;
padding: 0;
}
/* Decorative corner pattern — single source of truth for the top-right
"pattern-1.png" decoration used as a ::before on multiple sections.
Section-specific size overrides (e.g., responsive scale-downs for
.technology-section) stay in the relevant section block. */
.locations-section::before,
.reasons-to-replace::before,
.explore-our-services--grid:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 557px;
max-width: 32%;
height: 257px;
z-index: 0;
pointer-events: none;
opacity: 0.85;
background: url(/wp-content/uploads/2026/05/pattern-1.png);
background-repeat: no-repeat;
background-size: contain;
}
/* Swiper pagination atoms — container, bullet, bullet-active. Section-only
deltas (bullet bg colour, margin-top) are kept inline in section blocks. */
.explore-our-services__pagination.swiper-pagination,
.testimonials-section__pagination.swiper-pagination {
position: relative;
bottom: auto;
text-align: center;
margin-top: 46px;
}
.explore-our-services__pagination .swiper-pagination-bullet,
.testimonials-section__pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
opacity: 1;
transition: all 0.3s ease;
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px) !important;
}
.explore-our-services__pagination .swiper-pagination-bullet-active,
.testimonials-section__pagination .swiper-pagination-bullet-active {
background: var(--clr-gold);
border-radius: 8px;
position: relative;
}
.explore-our-services__pagination .swiper-pagination-bullet-active:after, .testimonials-section__pagination .swiper-pagination-bullet-active:after {
width: 16px;
height: 16px;
background: transparent;
content: '';
position: absolute;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%, -50%);
border: 1px solid var(--clr-gold);
}
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--gap-md);
align-items: center;
}
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
/* Card primitive — white surface with shadow + radius.
Section-specific cards (services, testimonial, financing) compose from this. */
.card {
background: var(--clr-white);
color: var(--clr-ink-2);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(var(--rgb-black), 0.08);
overflow: hidden;
}
/* Media wrapper with object-fit cover */
.media {
overflow: hidden;
border-radius: 8px;
}
.media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Split primitive — two-column media+content grid (50/50 default).
Modifiers:
.split--reverse → image on the right, content on the left
.split--media-sm → narrower media column (40/60)
Collapses to a single column under 768px. */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.split > * { min-width: 0; } /* prevents grid blowout from long content */
.split--reverse > :first-child { order: 2; }
.split--media-sm { grid-template-columns: 2fr 3fr; }
@media (max-width: 767.98px) {
.split,
.split--media-sm { grid-template-columns: 1fr; gap: 32px; }
.split--reverse > :first-child { order: 0; }
}
/* Numbered card primitive — sequence card whose number is rendered as a
::before counter-style display. Markup options:
for automatic counter increment. */
.num-card-list {
counter-reset: numcard;
display: grid;
gap: var(--gap-md);
}
.num-card {
counter-increment: numcard;
position: relative;
padding: clamp(24px, 3vw, 36px);
padding-left: clamp(80px, 8vw, 110px);
background: var(--clr-white);
color: var(--clr-ink-2);
border-radius: 12px;
box-shadow: 0 6px 24px rgba(var(--rgb-black), 0.06);
}
.num-card .number {
font-size: var(--font60);
color: #A88F5C47;
position: relative;
font-family: 'Montserrat';
}
.num-card .number:before {
content: '';
width: 4px;
height: 100%;
background: #A88F5C;
display: block;
position: absolute;
left: -36px;
}
/* .num-card--stacked → number renders as a block ABOVE the title (not as an
absolutely-positioned overlay), with a thin gold accent line on the card's
left edge. Used by "Reasons to Replace" — matches Figma's stacked layout. */
.num-card--stacked {
padding-left: 36px;
}
/* ==========================================================================
5. Eyebrow Atom
========================================================================== */
.eyebrow {
margin: 0;
font-family: var(--ff-primary);
font-weight: 600;
font-size: var(--font18);
line-height: 1;
text-transform: uppercase;
color: var(--clr-gold-dark);
display: inline-flex;
gap: 10px;
align-items: flex-start;
}
.eyebrow::before{
content: '';
width: 12px;
height: 12px;
background: url('assets/images/vector-stroke-3.svg') no-repeat center / contain;
display: block;
flex-shrink: 0;
position: relative;
top: 2px;
}
/* ==========================================================================
6. Button System (single source of truth)
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 210px;
padding: 17px 36px;
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 600;
line-height: 1.11;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); }
.primary-btn {
position: relative;
color: var(--clr-ink);
background: var(--grad-gold);
border-color: var(--clr-gold);
}
.primary-btn::before {
content: "";
position: absolute;
inset: -8px;
border: 2px solid rgba(var(--rgb-gold), 0.2);
pointer-events: none;
border-radius: 5px;
}
.primary-btn:hover,
.primary-btn:focus-visible {
color: var(--clr-white);
border-color: var(--clr-gold-dark);
}
.secondary-btn {
background: transparent;
color: var(--clr-white);
border-color: var(--clr-white);
}
.secondary-btn:hover,
.secondary-btn:focus-visible {
background: var(--clr-ink);
color: var(--clr-gold);
border-color: var(--clr-ink);
}
.btn--on-dark {
color: var(--clr-white);
border-color: var(--clr-white);
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
background: var(--clr-white);
color: var(--clr-ink);
border-color: var(--clr-white);
}
.large-btn { min-width: 260px; padding: 24px 48px; }
.small-btn { min-width: 160px; padding: 16px 28px; font-size: 16px; }
/* ==========================================================================
7. Accessibility
========================================================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--clr-neutral-100);
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(var(--rgb-black), 0.6);
clip: auto !important;
clip-path: none;
color: var(--clr-link-default);
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
#primary[tabindex="-1"]:focus { outline: 0; }
.alignleft { float: left; margin: 0 1.5em 1.5em 0; }
.alignright { float: right; margin: 0 0 1.5em 1.5em; }
.aligncenter { clear: both; display: block; margin: 0 auto 1.5em; }
.sticky { display: block; }
.post, .page { margin: 0 0 1.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
.widget { margin: 0 0 1.5em; }
.widget select { max-width: 100%; }
.custom-logo-link { display: inline-block; }
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }
/* ==========================================================================
8. Site Header
========================================================================== */
.site-header {
background-color: var(--clr-ink-2);
color: var(--clr-white);
position: relative;
}
.site-header.stickyhead {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 3;
}
.site-header__utility {
background-color: var(--clr-ink-3);
color: var(--clr-white);
font-family: var(--ff-primary);
font-size: 14px;
line-height: 20px;
padding-left: 30px;
}
.site-header.stickyhead .site-header__utility {
display: none;
}
.bottomheaderWrap {
padding-left: 54px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
padding-right: 21px;
padding-block: 18px;
gap: 20px;
}
.quotebtn {
padding: 14px 20px;
min-width: auto;
font-size: 14px;
}
.mobile-drawer__inner .quotebtn {
display: block;
margin-top: 20px;
}
.site-header__utility-inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
padding-block: 11px;
flex-wrap: wrap;
padding-right: clamp(1.875rem, calc(0.015rem + 3.876vw), 4.375rem);
}
.site-header__utility-text {margin: 0;color: var(--clr-white);font-size: 14px;}
.site-header__utility-lead { font-weight: 400; }
.site-header__utility-emphasis { font-weight: 700; margin-left: 4px; }
.site-header__phone,
.site-header__email {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--clr-gold);
font-weight: 700;
font-size: 14px;
}
.site-header__phone:hover,
.site-header__email:hover { color: var(--clr-white); }
.site-header__email { color: var(--clr-white); font-weight: 400; }
.site-header__phone-icon {
display: inline-flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
padding: 5px;
}
.site-header__phone-icon svg path{
fill: #000;
}
.site-header__follow { display: inline-flex; align-items: center; gap: 12px; }
.site-header__follow-label { color: var(--clr-white); font-weight: 400; }
.site-header__follow-icons { display: inline-flex; gap: 8px; align-items: center; color: var(--clr-white); }
.site-header__follow-icons .sociallink { width: 24px;
height: 24px;
transition: color 0.3s ease;
background: #DBC487;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
}
.site-header__follow-icons .sociallink img {
object-fit: contain;
width: 100%;
height: 100%;
filter: brightness(0) saturate(100%);
}
.site-header__follow-icons .sociallink:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) grayscale(100%);
}
.site-header__main { background-color: var(--clr-ink-2); position: relative; }
.site-header__main::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 100%;
max-width: 21%;
background: var(--clr-ink);
z-index: 4;
pointer-events: none;
clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
}
.site-header__inner {
display: flex;
align-items: center;
padding-left: 30px;
}
.logoWrap {
max-width: 16%;
width: 100%;
position: relative;
z-index: 4;
min-width: 180px;
}
.rightheaderWrap {
max-width: 84%;
width: 100%;
z-index: 3;
position: relative;
}
.header__brand { flex-shrink: 0; }
.header__logo {
display: block;
width: 305px;
max-width: 100%;
height: auto;
}
.primary-nav__list,
.header__menu {
display: flex;
align-items: center;
gap: clamp(0.625rem, calc(-0.770rem + 2.907vw), 2.500rem);
}
.primary-nav__list a,
.header__menu a {
color: var(--clr-white);
font-family: var(--ff-primary);
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 10px 0;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a,
.header__menu a:hover { color: var(--clr-gold); }
/* ==========================================================================
9. Nav + Hamburger + Mobile Drawer
========================================================================== */
.nav-toggle {
display: none;
margin-left: 16px;
width: 40px;
height: 40px;
padding: 8px;
background: transparent;
border: 0;
cursor: pointer;
position: relative;
z-index: 1001;
color: var(--clr-white);
}
.nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
margin: 3px auto;
background: currentColor;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
.nav-toggle.is-open .nav-toggle__bar--top { transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar--bottom { transform: translateY(-10px) rotate(-45deg); }
.mobile-drawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100vh;
background: #0A0A0A;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1000;
overflow-y: auto;
box-shadow: -4px 0 24px rgba(var(--rgb-black), 0.08);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__close {
position: absolute;
top: 36px;
right: 20px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #fff;
z-index: 2;
padding: 0;
}
.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
background: rgba(var(--rgb-black), 0.06);
outline: none;
}
.mobile-drawer__inner { padding: 80px 24px 32px; }
/* .mobile-drawer__list → uses .list-reset composed atom (no delta) */
.mobile-drawer__list a {
display: block;
padding: 14px 0;
font-size: 18px;
color: #fff;
border-bottom: 1px solid #fff;
position: relative;
}
.mobile-drawer .header__cta {
display: inline-flex;
margin-top: 24px;
padding: 14px 24px;
}
.mobile-drawer__phone {
display: inline-block;
margin-top: 16px;
font-weight: 700;
color: var(--clr-gold-dark);
}
body.nav-locked { overflow: hidden; }
.mobile-handler {
display: none;
}
.mobile-handler .button {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.mobile-handler .button.callbtn {
font-size: 0;
width: 80px;
height: 80px;
margin-top: -40px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.primary-nav__list .sub-menu {
display: none;
background-color: #fff;
overflow: hidden;
position: absolute;
left: 0;
top: 32px;
width: auto;
margin: 0;
z-index: inherit;
padding: 0;
}
.primary-nav__list .menu-item:hover .sub-menu {
display: block;
}
.primary-nav__list .menu-item {
position: relative;
}
.primary-nav__list .sub-menu a {
color: #000;
display: block;
padding: 10px 10px;
width: 100%;
min-width: 180px;
}
.header__menu li.menu-item-has-children .menu-item.current_page_item a,
.primary-nav__list .sub-menu .menu-item:hover {
background: var(--grad-gold);
}
.mobile-drawer__list .sub-menu .menu-item.current_page_item a{
color: var(--clr-gold-dark);
}
.header__menu li.menu-item-has-children a{
padding-right: 15px;
position: relative;
}
.header__menu li.menu-item-has-children > a:after , .mobile-drawer__list li.menu-item-has-children > a:after {
content: "";
height: 5px;
width: 10px;
background: url(/wp-content/uploads/2026/05/g-select-arrow.png);
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -2px;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.5s;
}
.mobile-drawer__list .sub-menu {
display: none;
}
.mobile-drawer__list .menu-item-has-children.active > a {
color: var(--clr-gold-dark);
}
.mobile-drawer__list .menu-item-has-children.active > a::after {
transform: translateY(-50%) rotate(180deg);
}
.mobile-drawer__list .sub-menu {
padding: 0 15px;
list-style: none;
margin: 0;
}
@media (max-width: 1281px) {
.primary-nav { display: none; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
.quotebtn{display:none;}
.site-header__main::before {
max-width: 25%;
}
}
@media (min-width: 1281px) {
.mobile-drawer { display: none; }
}
@media (min-width: 1400px) {
.primary-nav__list a, .header__menu a{
font-size:15px;
}
.site-header__utility {
font-size: 15px;
}
.site-header__utility-text {
font-size: 15px;
}
.site-header__phone, .site-header__email {
font-size: 15px;
}
}
@media (min-width: 1600px) {
.primary-nav__list a, .header__menu a{
font-size:16px;
}
.site-header__utility {
font-size: 16px;
}
.site-header__utility-text {
font-size: 16px;
}
.site-header__phone, .site-header__email {
font-size: 16px;
}
.bottomheaderWrap {
justify-content: flex-end;
gap: 20px;
}
.quotebtn {
padding: 15px 32px;
min-width: auto;
font-size: 16px;
line-height: 1.25;
}
}
@media (min-width: 1800px) {
.primary-nav__list a, .header__menu a{
font-size:18px;
}
.site-header__utility {
font-size: 16px;
}
.site-header__utility-text {
font-size: 16px;
}
.site-header__phone, .site-header__email {
font-size: 16px;
}
.bottomheaderWrap {
padding-right: 70px;
}
.site-header__inner {
padding-left: 70px;
}
.site-header__main::before {
max-width: 23%;
}
}
@media (min-width: 1900px) {
.bottomheaderWrap {
gap: 78px;
}
}
@media (max-width: 1024px) {
.site-header__utility { display: none; }
.site-header__inner { padding-block: 16px; }
.header__nav { display: none; }
.site-header .header__cta { display: none; }
.site-header__main::before{display: none;}
.mobile-handler {
position: fixed;
left: 0;
width: 100%;
bottom: 0;
background: #252525;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
}
}
@media (max-width: 768px) {
.header__logo { width: 180px; }
.site-header__main::before { display: none; }
}
/* ==========================================================================
10. Site Footer
========================================================================== */
.site-footer {
background-color: var(--clr-ink);
color: var(--clr-white);
position: relative;
overflow: hidden;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--clr-gold); }
.site-footer__top { border-bottom: 1px solid rgba(var(--rgb-white), 0.08); }
.site-footer__top-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.footer__tile {
display: flex;
align-items: center;
gap: 20px;
padding: 40px 30px;
position: relative;
border-right: 1px solid #3B3B3B;
}
.footer__tile:last-child { border-right: 0; }
.footer__tile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
color: var(--clr-ink);
flex-shrink: 0;
background: linear-gradient(294.74deg, #745F39 -15.83%, #FBE789 46.97%, #745F39 99.4%);
}
.footer__tile-icon svg { fill: var(--clr-ink); }
.footer__tile-body { gap: 6px; }
.footer__tile-label {
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 500;
color: var(--clr-ink-muted);
line-height: 1.3;
}
.footer__tile-value {
font-family: var(--ff-primary);
font-size: var(--font20);
font-weight: 500;
color: var(--clr-white);
line-height: 1.3;
}
.site-footer__middle { position: relative; }
.site-footer__middle::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 509px;
max-width: 40%;
height: 293px;
background-image: url('assets/images/vector-9.png');
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.site-footer__middle-inner {
padding-block: 55px;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 64px;
}
.footer__brand-col { gap: 20px; }
.footer__logo { display: inline-block; }
.footer__logo img {
display: block;
width: 305px;
max-width: 100%;
height: auto;
}
.footer__tagline {
margin: 0;
font-family: var(--ff-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.35;
color: var(--clr-ink-muted);
max-width: 421px;
}
.footer__social {
margin-top: 4px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.footer__social-heading,
.footer__col-heading {
margin: 0;
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--clr-gold);
text-transform: uppercase;
white-space: nowrap;
}
.footer__col-heading { margin-bottom: 24px; }
.footer__social-list {
display: inline-flex;
gap: 10px;
align-items: center;
}
.footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--clr-ink-3);
color: var(--clr-white);
transition: all 0.3s ease;
}
.footer__social-link:hover {
background: var(--clr-gold);
color: var(--clr-ink);
transform: translateY(-2px);
}
.footer__links { gap: 12px; }
.footer__links a {
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 400;
line-height: 30px;
color: var(--clr-ink-muted);
}
.footer__links a:hover { color: var(--clr-gold); }
.site-footer__bottom { border-top: 1px solid rgba(var(--rgb-white), 0.08); }
.site-footer__bottom-inner {
padding-block: 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.footer__copyright {
margin: 0;
font-family: var(--ff-primary);
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: var(--clr-ink-muted);
}
.footer__legal {
display: flex;
gap: 32px;
align-items: center;
}
.footer__legal-link {
font-family: var(--ff-primary);
font-size: 16px;
font-weight: 400;
color: var(--clr-ink-muted);
}
.footer__legal-link:hover { color: var(--clr-gold); }
@media (max-width: 1024px) {
.site-footer__top-inner { grid-template-columns: 1fr; }
.footer__tile { padding: 28px 0; }
.footer__tile + .footer__tile::before {
left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
}
.site-footer__middle-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__brand-col { grid-column: 1 / -1; }
.site-footer__middle::after { opacity: 0.15; }
.footer__tile{
border-right: 0;
}
.site-footer {
padding-bottom: 100px;
}
}
@media (max-width: 768px) {
.site-footer__middle-inner { grid-template-columns: 1fr; padding-block: 48px 56px; gap: 32px; }
.site-footer__bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; }
.footer__legal { gap: 20px; }
.site-footer__middle::after { display: none; }
.footer__tile-icon {
width: 50px;
height: 50px;
}
.footer__tile {
gap: 14px;
}
}
@media (min-width: 1024px) {
.site-footer__top-inner {
grid-template-columns: 1fr 40% 1fr;
}
.footer__tile:first-child {
padding-left: 0;
}
.footer__tile:last-child {
padding-right: 0;
display: flex;
justify-content: flex-end;
}
.footer__tile:nth-child(2) {display: flex;justify-content: center;}
}
/* ==========================================================================
11. Section — Hero Banner + Action Bar
========================================================================== */
.hero-banner-and-action-bar { position: relative; color: var(--clr-white); }
.hero-banner {
position: relative;
width: 100%;
min-height: 940px;
}
.hero-banner__bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Hero uses the bare .wrapper in markup; this scoped rule layers
hero-specific block padding + min-height onto it without redefining width. */
.hero-banner > .wrapper {
z-index: 2;
padding-block: 120px 200px;
display: flex;
align-items: center;
min-height: 940px;
flex-wrap: wrap;
}
.hero-banner__content {
gap: 40px;
max-width: 760px;
}
.hero-banner__title-copy { gap: 22px; }
.hero-banner__headline {
font-family: var(--ff-secondary);
font-size: var(--font72);
font-weight: 800;
line-height: 1.1;
color: var(--clr-white);
}
.hero-banner__subtitle {
font-family: var(--ff-primary);
font-size: var(--font20);
font-weight: 400;
line-height: 1.6;
color: var(--clr-white);
max-width: 742px;
}
.hero-banner__cta {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.hero-banner__rating {
display: inline-flex;
align-items: center;
gap: 14px;
}
.hero-banner__rating-image {
width: 147px;
height: auto;
border-radius: 999px;
}
.hero-banner__rating-text {
font-size: var(--font18);
font-weight: 500;
color: var(--clr-white);
}
.hero-banner__rating-text::before {
content: '';
width: 102px;
height: 18px;
display: block;
background: url('/wp-content/uploads/2026/05/star.png') no-repeat center / contain;
margin-bottom: 10px;
}
.action-bar {
position: absolute;
z-index: 3;
width: 100%;
bottom: -8%;
left: 0;
padding: 0 30px;
}
.action-bar__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.action-bar__item {
background-color: var(--clr-white);
padding: 28px 36px;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(var(--rgb-black), 0.1);
display: flex;
align-items: center;
justify-content: center;
min-height: 166px;
}
.action-bar__badge-image {
max-width: 100%;
max-height: 110px;
width: auto;
height: auto;
object-fit: contain;
}
@media (max-width: 1024px) {
.hero-banner,
.hero-banner > .wrapper { min-height: 760px; }
.hero-banner > .wrapper { padding-block: 80px 80px; }
.action-bar { position: relative;
bottom: 0;
margin-top: 50px;
padding: 0; }
.action-bar__list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.action-bar__item { min-height: 140px; padding: 24px; }
.btn{
padding: 14px 20px;
}
}
@media (max-width: 768px) {
.hero-banner,
.hero-banner > .wrapper { min-height: 620px; }
.hero-banner__cta { gap: 16px; }
.action-bar { bottom: -4%; }
.action-bar__item { min-height: 110px; padding: 16px; }
.action-bar__badge-image { max-height: 80px; }
.hero-banner__rating {
display: inline-flex;
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 480px) {
.hero-banner__content { max-width: 100%; }
}
@media (max-width: 375px) {
.action-bar__list { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
12. Section — Technology
========================================================================== */
.technology-section {
position: relative;
isolation: isolate;
overflow: hidden;
color: var(--clr-ink);
}
.technology--process-icons{
background: linear-gradient(104.7deg, rgba(219, 196, 135, 0.5) -2.34%, rgba(219, 196, 135, 0) 95.29%);
}
.technology-section::before {
content: "";
position: absolute;
inset: 0;
background-image: url(assets/images/union.svg);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
pointer-events: none;
z-index: 0;
}
.technology--default::before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 557px;
max-width: 32%;
height: 257px;
z-index: 0;
pointer-events: none;
opacity: 0.85;
background-image: url(/wp-content/uploads/2026/05/pattern-1.png);
background-repeat: no-repeat;
background-size: contain;
left: inherit;
}
/* .technology-section::before → corner pattern from Layout Atoms (no delta) */
.technology__container {
align-items: center;
gap: 36px;
}
.technology__header {
align-items: center;
gap: 22px;
width: 100%;
text-align: center;
}
/* delta over .section-intro atom: ink text + max-width */
.technology__subheading {
color: var(--clr-ink);
max-width: 914px;
}
.technology__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
width: 100%;
}
.technology__card {
align-items: flex-start;
gap: 28px;
padding: 32px;
background: linear-gradient(125deg, rgba(var(--rgb-gold), 0.1), rgba(var(--rgb-gold), 0));
border: 1px solid var(--clr-border-light);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(var(--rgb-black), 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.technology__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(var(--rgb-black), 0.08);
}
.technology__card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
flex-shrink: 0;
position: relative;
}
.technology__card-icon::before {
content: '';
width: 4px;
height: 100%;
background: var(--clr-gold);
position: absolute;
left: -32px;
}
.technology__card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* .technology__card-body → uses .section-intro atom (no delta) */
@media (max-width: 1024px) {
.technology__cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.technology-section::before { width: 320px; height: 180px; }
}
@media (max-width: 768px) {
.technology__cards { grid-template-columns: 1fr; gap: 20px; }
.technology__card { padding: 28px; gap: 24px; }
.technology__card-icon { width: 64px; height: 64px; }
.technology-section::before { width: 220px; height: 120px; opacity: 0.4; }
}
/* ==========================================================================
13. Section — About
========================================================================== */
.about-section {
position: relative;
color: var(--clr-ink-2);
background: var(--grad-gold-tint);
}
#about .about__inner{
align-items: end;
column-gap: 30px;
}
#about .about__content{
padding-bottom: clamp(1.875rem, calc(-3.567rem + 11.337vw), 9.188rem);
padding-left: 30px;
}
.about-section::before {
content: "";
position: absolute;
inset: 0;
background-image: url('assets/images/aboutbg.jpg');
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
pointer-events: none;
z-index: 0;
}
.about__inner {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 92px;
}
.pullLeft .wrapper{
max-width: calc(((100% - var(--container-width)) / 2) + var(--container-width));
margin-left: 0;
padding-left: 0;
grid-template-columns: minmax(0, 936fr) minmax(0, 700fr);
}
.about-section.pullLeft{
padding-bottom: 0;
}
.about-section.pullLeft::after {
content: "";
position: absolute;
background-image: url(/wp-content/uploads/2026/05/About-Section-icon.png);
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
z-index: 0;
bottom: 0;
right: 0;
width: 325px;
height: 275px;
mix-blend-mode: difference;
}
.about__media {
position: relative;
width: 100%;
}
.about__media-primary {
position: relative;
width: 100%;
overflow: hidden;
height: 100%;
}
.about__media-primary img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0% 0%;
}
.about__content {
align-items: flex-start;
gap: clamp(0.625rem, calc(-0.119rem + 1.550vw), 1.625rem);
}
.about__tagline {
margin: 0;
font-family: var(--ff-primary);
font-weight: 600;
font-size: var(--font24);
line-height: 1.5;
color: var(--clr-ink-2);
}
/* delta over .section-intro atom: small top margin under heading */
.about__body {
margin-top: 0;
}
.about__body p { margin: 0 0 1em; }
.about__body p:last-child { margin-bottom: 0; }
.about__body p a:hover{
color: var(--clr-gold);
}
.about__cta { margin-top: 20px; }
@media (max-width: 1024px) {
.about__inner {
grid-template-columns: 1fr !important;
row-gap: 60px;
max-width: var(--container-width);
padding-inline: 30px;
margin: 0 auto; }
.about__media { min-height: 0; aspect-ratio: 4 / 3; }
.about-section{
padding-top: 80px;
}
}
@media (max-width: 768px) {
.about__inner { row-gap: 40px; }
.about__content { gap: 20px; }
.about__tagline { margin-top: 10px; }
.about__body { margin-top: 10px; }
.about__cta { margin-top: 20px; }
}
/* ==========================================================================
14. Section — Global CTA
========================================================================== */
.global-cta {
position: relative;
width: 100%;
color: var(--clr-white);
padding: 0;
}
.global-cta:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: linear-gradient(273.69deg, #A88F5C 4.23%, #634F2E 81.95%);
}
.global-cta__inner {
display: flex;
}
.global-cta__image {
max-width: 40%;
width: 100%;
margin-top: -39px;
position: relative;
}
.global-cta__image:before {
width: 40px;
height: 40px;
content: '';
background: #737373;
position: absolute;
top: 0;
right: -20px;
clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
}
.global-cta__image img {
width: 100%;
object-fit: cover;
height: 100%;
position: relative;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.global-cta__content {
padding: 70px 50px;
max-width: 60%;
justify-content: center;
}
.global-cta__headline {
margin: 0 0 16px;
font-family: var(--ff-secondary);
font-size: var(--font48);
font-weight: 800;
line-height: 1.1;
color: var(--clr-white);
}
.global-cta__subtext {
margin: 0 0 22px;
font-family: var(--ff-primary);
font-size: var(--font18);
line-height: 1.5;
color: var(--clr-white);
max-width: 831px;
}
.global-cta__features {
list-style: none;
margin: 0 0 30px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 32px;
border-top: 1px solid;
border-bottom: 1px solid;
border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%) 1;
padding: 18px 0;
}
.global-cta__feature {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ff-primary);
font-size: var(--font18);
color: var(--clr-white);
}
.global-cta__feature-icon {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--clr-gold);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.global-cta__feature-icon::before {
content: "";
width: 8px;
height: 4px;
border-left: 2px solid var(--clr-ink);
border-bottom: 2px solid var(--clr-ink);
transform: translateY(-1px) rotate(-45deg);
}
.global-cta__feature-text { white-space: nowrap; }
.global-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 1024px) {
.global-cta__inner { min-height: 0; justify-content: flex-start; }
.global-cta__content { width: 100%;
max-width: 100%;
padding-inline: 30px; }
}
@media (max-width: 991px) {
.global-cta__inner{
flex-wrap: wrap;
}
.global-cta__image {
max-width: 97.5%;
}
}
@media (max-width: 768px) {
.global-cta__features { flex-direction: column; gap: 12px; }
.global-cta__feature-text { white-space: normal; }
.global-cta__actions { flex-direction: column; width: 100%; gap: 12px; }
.global-cta__image {
max-width: 94.5%;
}
}
/* ==========================================================================
15. Section — Explore Our Services
========================================================================== */
.explore-our-services {
position: relative;
background-color: var(--clr-bg-dark);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--clr-white);
isolation: isolate;
overflow: hidden;
}
/* Markup uses bare ; layout is scoped here. */
.explore-our-services > .wrapper {
align-items: center;
gap: 50px;
padding-inline: 90px;
}
.explore-our-services__header {
align-items: center;
gap: 30px;
text-align: center;
}
.explore-our-services__heading { color: var(--clr-white); text-wrap: balance; }
/* delta over .section-intro atom: white text + max-width */
.explore-our-services__intro {
color: var(--clr-white);
max-width: 903px;
}
.explore-our-services__slider-wrap { position: relative; width: 100%; }
.explore-our-services__nav {
position: absolute;
top: 45%;
transform: translateY(-50%);
width: 51px;
height: 51px;
border-radius: 50%;
border: 0;
background: rgba(var(--rgb-white), 0.08);
color: var(--clr-white);
cursor: pointer;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.explore-our-services__nav:hover { background: var(--grad-gold); color: var(--clr-ink); }
.explore-our-services__nav--prev { left: -75px; }
.explore-our-services__nav--next { right: -75px; color: var(--clr-ink); }
.explore-our-services__nav--next:hover { background: linear-gradient(294.74deg, #745F39 -15.83%, #FBE789 46.97%, #745F39 99.4%); color: var(--clr-white); }
.explore-our-services__nav--next:hover svg path{ fill: #0A0A0A; }
.explore-services-swiper { width: 100%; padding-bottom: clamp(0.000rem, calc(-1.860rem + 3.876vw), 2.500rem); }
.services-card { height: auto; display: flex; }
.services-card__inner {
background: var(--clr-white);
border-radius: 12px;
overflow: hidden;
width: 100%;
box-shadow: 0 10px 40px rgba(var(--rgb-black), 0.18);
}
.services-card__media {
position: relative;
aspect-ratio: 460 / 263;
}
.services-card__image,
.services-card__media-link {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.services-card__image { object-fit: cover; }
.services-card__image--placeholder {
background: linear-gradient(135deg, var(--clr-ink-3) 0%, var(--clr-ink-2) 100%);
}
.services-card__badge {
position: absolute;
left: 50%;
bottom: -3px;
transform: translateX(-50%);
width: 139px;
height: 48px;
background: url(/wp-content/uploads/2026/05/content-frame-icon.svg);
display: inline-flex;
z-index: 2;
background-size: contain;
background-repeat: no-repeat;
background-position: top;
display: flex;
justify-content: center;
align-items: center;
}
.services-card__icon { width: 80px;
height: 50px;
object-fit: contain;
position: absolute;
top: 13px; }
.services-card__body {
padding: 60px 45px 52px;
text-align: center;
gap: 25px;
flex-grow: 1;
}
.services-card__title {
margin: 0;
font-family: var(--ff-secondary);
font-size: var(--font30);
font-weight: 700;
line-height: 1.2;
color: var(--clr-ink);
}
.services-card__title a { color: inherit; }
.services-card__title a:hover { color: var(--clr-gold-dark); }
/* .services-card__description → uses .section-intro atom (no delta) */
/* Pagination shared recipes in §4 atoms above.
Section-only delta retained here: solid gold-dark base-bullet bg.
Active state is re-asserted to beat the base-bullet rule's source order. */
.explore-our-services__pagination .swiper-pagination-bullet {
background: #A88F5C;
opacity: 0.3;
}
.explore-our-services__pagination .swiper-pagination-bullet-active {
background: var(--clr-gold);
opacity: 1;
}
.explore-our-services__cta { margin-top: 10px; text-align: center; }
@media (max-width: 1024px) {
.explore-our-services > .wrapper { gap: 40px; }
.explore-our-services__nav { width: 44px; height: 44px; }
.explore-our-services__nav--prev { left: -52px; }
.explore-our-services__nav--next { right: -52px; }
.services-card__body { padding: 50px 32px 40px; }
.explore-our-services__pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
}
}
@media (max-width: 768px) {
.explore-our-services > .wrapper { gap: 32px; max-width: var(--container-width);
padding-inline: 30px; }
.explore-our-services__nav { display: none; }
.services-card__body { padding: 48px 24px 32px; }
}
/* ==========================================================================
16. Section — Why Choose Us
========================================================================== */
.why-choose-us {
position: relative;
background-color: var(--clr-white);
color: var(--clr-ink-2);
overflow: hidden;
isolation: isolate;
}
.why-choose-us::before,
.why-choose-us::after {
content: "";
position: absolute;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.why-choose-us::before {
top: 0; left: 0;
width: 56%;
max-width: 1121px;
height: 286px;
background-image: url('assets/images/top-left-pattern.png');
}
.why-choose-us::after {
bottom: 0; right: 0;
width: 100%;
max-width: 949px;
height: 328px;
background-image: url('assets/images/bottom-right-pattern.png');
background-position: bottom;
}
.why-choose-us__grid {
display: grid;
grid-template-columns: minmax(0, 729fr) minmax(0, 634fr);
gap: 77px;
align-items: center;
}
.why-choose-us__content {
gap: 25px;
max-width: 729px;
}
/* .why-choose-us__subheading → uses .subheading-strong atom (no delta) */
.why-choose-us__bullets-block { gap: 16px; }
/* .why-choose-us__intro-label, .why-choose-us__closing → use .section-intro atom */
.why-choose-us__closing { max-width: 651px; }
.why-choose-us__bullets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 64px;
}
/* delta over .section-intro atom: inline-flex layout for icon + label */
.why-choose-us__bullet {
display: inline-flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) 1;
padding: 21px 0;
}
.why-choose-us__bullet:nth-last-child(2){
border-bottom: 0;
}
.why-choose-us__bullet:last-child {
border-bottom: 0;
}
.why-choose-us__bullet-text {
font-weight: 600;
}
.why-choose-us__bullet-dot {
flex-shrink: 0;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: url('assets/images/are-licensed-and-insured-button-icon.svg') no-repeat center / contain;
}
.why-choose-us__cta { align-self: flex-start; margin-top: 20px; }
.why-choose-us__media {
position: relative;
width: 100%;
}
.why-choose-us__photo {
margin: 0;
border-radius: 8px;
}
.why-choose-us__photo img {
display: block;
object-fit: cover;
margin: 0 auto;
}
.why-choose-us__photo--primary {
position: relative;
width: 100%;
aspect-ratio: 317 / 367;
z-index: 1;
}
.why-choose-us__badge {
position: absolute;
left: 30%;
top: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
z-index: 3;
pointer-events: none;
}
.why-choose-us__badge img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 6px 12px rgba(var(--rgb-black), 0.2));
}
@media (max-width: 1280px) {
.why-choose-us__grid { gap: 48px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
.why-choose-us__grid { grid-template-columns: 1fr; gap: 60px; }
.why-choose-us__media { aspect-ratio: 4/3; }
.why-choose-us__photo--primary { aspect-ratio: 4/3; }
.why-choose-us__badge { width: 140px; height: 140px; }
}
@media (max-width: 768px) {
.why-choose-us__bullets { grid-template-columns: 1fr; gap: 12px; }
.why-choose-us__badge { width: 110px; height: 110px; }
}
/* ==========================================================================
17. Section — Trusted Media Solutions
========================================================================== */
.trusted-media-solutions {
position: relative;
background: var(--grad-gold-tint);
color: var(--clr-ink);
overflow: hidden;
isolation: isolate;
}
.trusted-media-solutions::before {
content: "";
position: absolute;
inset: 0;
background-image: url('assets/images/union.svg');
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
pointer-events: none;
z-index: 0;
}
.trusted-media__pattern {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: top right;
background-size: 60%;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.trusted-media__grid {
display: grid;
grid-template-columns: 574fr 705fr;
gap: 161px;
align-items: center;
}
.trusted-media__collage {
width: 100%;
max-width: 574px;
position: relative;
margin: 0 auto;
}
.trusted-media__collage-image {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.trusted-media__content {
gap: 17px;
align-items: flex-start;
}
.trusted-media__heading { margin-bottom: 30px; }
.trusted-media__features {
list-style: none;
margin: 0 0 24px;
padding: 0;
gap: 20px;
}
.trusted-media__feature {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
align-items: center;
padding: 8px 0;
}
.trusted-media__feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--clr-white);
color: var(--clr-gold-dark);
flex-shrink: 0;
}
/* delta over .card-title atom: 6px bottom margin */
.trusted-media__feature-title { margin: 0 0 6px; }
/* .trusted-media__feature-description → uses .section-intro atom (no delta) */
@media (max-width: 1280px) {
.trusted-media__grid { gap: 80px; }
}
@media (max-width: 1024px) {
.trusted-media__grid { grid-template-columns: 1fr; gap: 48px; }
.trusted-media__feature-icon { width: 64px; height: 64px; }
.trusted-media__feature { grid-template-columns: 64px 1fr; }
}
@media (max-width: 768px) {
.trusted-media__heading { margin-bottom: 16px; }
.trusted-media__feature-icon { width: 56px; height: 56px; }
.trusted-media__feature { grid-template-columns: 56px 1fr; gap: 12px; }
.trusted-media__feature-icon img { width: 32px; height: 32px; }
.why-choose-us__bullet:nth-last-child(2) {
border-bottom: 1px solid transparent;
}
}
/* ==========================================================================
18. Section — Our Work
========================================================================== */
.our-work {
position: relative;
background-color: var(--clr-bg-dark);
color: var(--clr-white);
isolation: isolate;
overflow: hidden;
}
.our-work--masonry::before {
content: "";
position: absolute;
inset: 0;
background-image: url(assets/images/union.svg);
background-repeat: no-repeat;
background-position: top right;
background-size: 100%;
pointer-events: none;
z-index: 0;
}
.our-work__inner { gap: 50px; }
.our-work__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
flex-wrap: wrap;
}
.our-work__title-group { gap: 30px; }
.our-work__heading { color: var(--clr-white); }
/* CTA uses .btn.primary-btn atom — markup applies those classes directly,
so no per-section CTA recipe lives here. */
.our-work__gallery {
display: flex;
gap: 23px;
align-items: stretch;
}
.our-work__col {
flex: 1 1 0;
min-width: 0;
gap: 23px;
}
.our-work__photo {
margin: 0;
overflow: hidden;
border-radius: 16px;
background: rgba(var(--rgb-white), 0.05);
}
.our-work__photo-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.our-work__photo:hover .our-work__photo-img { transform: scale(1.04); }
.our-work__photo--1 { aspect-ratio: 465 / 386; }
.our-work__photo--2 { aspect-ratio: 465 / 224; }
.our-work__photo--3 { aspect-ratio: 465 / 633; flex: 1 1 auto; }
.our-work__photo--4 { aspect-ratio: 465 / 224; }
.our-work__photo--5 { aspect-ratio: 465 / 386; }
@media (max-width: 1024px) {
.our-work__gallery { gap: 16px; }
.our-work__col { gap: 16px; }
}
@media (max-width: 768px) {
.our-work__inner { gap: 32px; }
.our-work__header { align-items: flex-start; flex-direction: column; gap: 24px; }
.our-work__gallery { flex-direction: column; }
.our-work__col { width: 100%; }
.our-work__photo--1, .our-work__photo--2, .our-work__photo--3,
.our-work__photo--4, .our-work__photo--5 { aspect-ratio: 16/10; }
}
/* --------------------------------------------------------------------------
18b. Section — Our Work (Masonry Grid modifier, Our Work page)
Triggered by ACF display_mode = 'masonry-grid'. Cream surface, centered
title group, 3-column CSS masonry, primary CTA below.
-------------------------------------------------------------------------- */
.our-work--masonry {
background-color: var(--clr-cream);
background-image: none;
color: var(--clr-ink);
}
.our-work--masonry .our-work__inner {
gap: 50px;
}
.our-work--masonry .our-work__header--centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
.our-work--masonry .our-work__title-group {
align-items: center;
text-align: center;
gap: 30px;
}
.our-work--masonry .our-work__heading {
color: var(--clr-ink);
}
.our-work--masonry .our-work__masonry {
column-count: 3;
column-gap: 23px;
width: 100%;
}
.our-work--masonry .our-work__masonry .our-work__photo {
margin: 0 0 23px;
overflow: hidden;
border-radius: 16px;
background: rgba(0, 0, 0, 0.04);
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
display: block;
}
.our-work--masonry .our-work__masonry .our-work__photo-img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.our-work--masonry .our-work__masonry .our-work__photo:hover .our-work__photo-img {
transform: scale(1.04);
}
.our-work--masonry .our-work__footer {
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.our-work--masonry .our-work__masonry { column-count: 2; column-gap: 16px; }
.our-work--masonry .our-work__masonry .our-work__photo { margin-bottom: 16px; }
}
@media (max-width: 768px) {
.our-work--masonry .our-work__inner { gap: 32px; align-items: center;}
.our-work--masonry .our-work__masonry { column-count: 1; }
.our-work--masonry .our-work__footer .btn { width: 100%; padding: 16px 24px; }
}
/* ==========================================================================
19. Section — Testimonials
========================================================================== */
.testimonials-section {
position: relative;
background-color: var(--clr-white);
color: var(--clr-ink-2);
overflow: hidden;
isolation: isolate;
}
.testimonials-section:before {
content: '';
background: url(/wp-content/uploads/2026/05/About-Bg-1-1.png);
background-repeat: no-repeat;
background-size: contain;
width: 654px;
height: 264px;
position: absolute;
right: 0;
top: 0;
}
.testimonials-section:after {
content: '';
background: url(/wp-content/uploads/2026/05/5-55431931-1.png);
background-repeat: no-repeat;
background-size: contain;
width: 247px;
height: 279px;
position: absolute;
bottom: 0;
left: 0;
}
.testimonials-section--has-pattern .testimonials-section__pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, rgba(var(--rgb-gold-dark), 0.06) 25%, transparent 25%),
linear-gradient(-45deg, rgba(var(--rgb-gold-dark), 0.06) 25%, transparent 25%);
background-size: 28px 28px;
pointer-events: none;
z-index: 0;
}
.testimonials-section__inner {
align-items: center;
gap: 10px;
}
.testimonials-section__header {
align-items: center;
gap: 22px;
text-align: center;
max-width: 760px;
}
/* delta over .section-intro atom: max-width */
.testimonials-section__subheading {
max-width: 621px;
}
.testimonials-section__slider-wrap { width: 100%; }
.testimonials-swiper { width: 100%; padding-bottom: 0; margin: 0 -15px;}
.testimonial-card {
position: relative;
background: var(--clr-white);
padding: 50px 45px 40px;
border-radius: 20px;
box-shadow: 0 0px 15px rgba(var(--rgb-black), 0.07);
gap: 24px;
height: 100%;
margin: 15px;
margin-top:50px;
}
.testimonial-card__top {
display: flex;
align-items: center;
gap: 24px;
}
.testimonial-card__avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background:var(--grad-gold);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: absolute;
top: -36px;
}
.queticon {
display: flex;
}
.testimonial-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-card__stars {
display: inline-flex;
gap: 4px;
align-items: center;
}
.testimonial-card__star { width: 20px; height: 20px; }
/* delta over .section-intro atom: flex-grow + divider under quote */
.testimonial-card__quote {
flex-grow: 1;
border-bottom: 1px solid #D4D4D4;
padding-bottom: 30px;
}
.testimonial-card__read-more {
color: var(--clr-gold-dark);
font-weight: 400;
letter-spacing: 0.04em;
}
.testimonial-card__read-more:hover { color: var(--clr-ink); }
.testimonial-card__meta { gap: 4px; }
.testimonial-card__name {
margin: 0;
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 600;
line-height: 20px;
color: var(--clr-ink);
}
.testimonial-card__role {
margin: 0;
font-family: var(--ff-primary);
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--clr-ink-muted);
}
/* Pagination shared recipes in §4 atoms above. Section-only deltas. */
.testimonials-section__pagination.swiper-pagination { margin-top: 45px; }
.testimonials-section__pagination .swiper-pagination-bullet {
background: rgb(168 143 92 / 30%);
}
.testimonials-section__pagination .swiper-pagination-bullet-active {
background: var(--clr-gold);
}
@media (max-width: 1024px) {
.testimonials-section__inner { gap: 40px; }
.testimonial-card { padding: 40px 32px 32px; }
}
@media (max-width: 768px) {
.testimonials-section__inner { gap: 32px; }
.testimonial-card { padding: 32px 24px 24px; }
.testimonial-card__top { gap: 16px; }
.testimonial-card__avatar { width: 56px; height: 56px; }
}
/* ==========================================================================
20. Section — Financing
========================================================================== */
.financing-section {
position: relative;
background-color: var(--clr-bg-darker);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--clr-white);
overflow: hidden;
isolation: isolate;
}
.financing-section::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: linear-gradient(60deg, transparent 49%, rgba(var(--rgb-gold), 0.04) 50%, transparent 51%);
background-size: 80px 80px;
pointer-events: none;
z-index: 0;
}
.financing-section__inner { gap: 64px; }
.financing-section__intro {
align-items: center;
gap: 20px;
text-align: center;
max-width: 914px;
margin: 0 auto;
}
.financing-section__heading { color: var(--clr-white); }
/* delta over .section-intro atom: light text on dark bg + max-width */
.financing-section__subheading {
color: rgba(var(--rgb-white), 0.85);
max-width: 914px;
}
.financing-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.financing-card {
position: relative;
background: var(--clr-white);
color: var(--clr-ink-2);
padding: 38px 45px;
border-radius: 16px;
gap: 22px;
box-shadow: 0 10px 40px rgba(var(--rgb-black), 0.25);
align-items: flex-start;
}
.financing-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
width:100%;
}
.financing-card__icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--clr-gold-dark);
}
.financing-card__icon img {object-fit: contain; }
.financing-card__tag {
display: inline-flex;
align-items: center;
padding: 11px 20px;
background: var(--clr-gold-soft);
color: var(--clr-gold-dark);
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
line-height: 1;
}
/* .financing-card__title → uses .card-title atom (no delta) */
/* .financing-card__body → uses .section-intro atom (no delta) */
.financing-card__features { gap: 0; }
.financing-card .btn {
border: 2px solid #A88F5C;
color: #0A0A0A;
gap: 10px;
}
.financing-card .btn:hover {
background: #fff;
color: #A88F5C;
}
.financing-card .btn:hover svg path{
fill: #A88F5C;
}
/* delta over .section-intro atom: inline-flex layout for icon + label */
.financing-card__feature {
display: inline-flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) 1;
padding: 10px 0;
}
.financing-card__feature:last-child {
border-bottom: 0;
}
.checkIcon {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--clr-gold-dark);
flex-shrink: 0;
}
@media (max-width: 1280px) {
.financing-section__grid { gap: 20px; }
.financing-card { padding: 30px; }
}
@media (max-width: 1024px) {
.financing-section__inner { gap: 48px; }
.financing-section__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.financing-section__inner { gap: 32px; }
.financing-section__grid { grid-template-columns: 1fr; gap: 20px; }
.financing-card { padding: 24px; }
}
/* ==========================================================================
21. Section — Locations
========================================================================== */
.locations-section {
position: relative;
background-color: var(--clr-white);
color: var(--clr-ink-2);
overflow: hidden;
isolation: isolate;
}
/* .locations-section::before → corner pattern from Layout Atoms (no delta) */
.locations__inner {
display: grid;
grid-template-columns: 520px 1fr;
gap: 60px;
align-items: flex-start;
}
.locations__content {
gap: 30px;
max-width: 720px;
}
.locations__desc {
font-family: var(--ff-primary); line-height: 1.5;
font-size: var(--font20);
}
.locations__city-list {
list-style: none; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 25px clamp(1.875rem, calc(0.945rem + 1.938vw), 3.125rem); background: var(--clr-white); border: 1px solid var(--clr-border); border-radius: 16px; padding: clamp(1.875rem, calc(1.131rem + 1.550vw), 2.875rem) clamp(1.875rem, calc(0.945rem + 1.938vw), 3.125rem); align-self: stretch;
}
.locations__city-item {
display: inline-flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid rgb(71 68 66 / 15%);
padding-bottom: 24px;
}
.locations__city-item:nth-child(5) {
border-bottom: 0;
padding-bottom: 0;
}
/* Second column last item */
.locations__city-item:last-child {
border-bottom: 0;
padding-bottom:0;
}
.locations__city-pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--clr-gold-dark);
}
.locations__city-pin img {
width: 100%;
height: 100%;
object-fit: contain;
}
.locations__city-link,
.locations__city-name {
font-family: var(--ff-primary);
font-size: var(--font20);
font-weight: 500;
line-height: 1.4;
color: var(--clr-ink);
}
.locations__city-link:hover { color: var(--clr-gold-dark); }
.locations__map-wrap {
position: relative;
width: 100%;
height: 100%;
}
.locations__map {
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
background: var(--clr-map-bg);
}
.locations__map img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.locations__project-card {
position: absolute;
left: 10%;
bottom: 12%;
width: 224px;
background: var(--clr-white);
border-radius: 16px;
box-shadow: 0 10px 43px rgba(var(--rgb-black), 0.1);
overflow: hidden;
z-index: 2;
}
.locations__project-card-image {
display: block;
width: 100%;
aspect-ratio: 7 / 5;
overflow: hidden;
background: var(--clr-neutral-300);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.locations__project-card-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 12%;
}
.locations__project-card-body {
padding: 14px 18px 18px;
gap: 4px;
}
.locations__project-card-title {
font-family: var(--ff-primary);
font-size: 15px;
font-weight: 700;
line-height: 20px;
color: var(--clr-ink);
}
a.locations__project-card-title:hover { color: var(--clr-gold-dark); }
.locations__project-card-date {
margin: 0;
font-family: var(--ff-primary);
font-size: 13px;
font-weight: 400;
line-height: 16px;
color: var(--clr-ink-muted);
}
@media (max-width: 1280px) {
.locations__inner { gap: 30px;grid-template-columns: 440px 1fr; }
}
@media (max-width: 1024px) {
.locations__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
.locations__inner { gap: 32px; }
.locations__city-list {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
gap: 12px;
padding: 20px 24px;
}
.locations__map { height: 320px; }
.locations__map-wrap { min-height: 320px; }
.locations__project-card { width: 180px; left: 8%; bottom: 10%; }
.locations__city-item:nth-child(5){
border-bottom: 1px solid rgb(71 68 66 / 15%);
padding-bottom: 24px;
}
}
/* ==========================================================================
21. Section — Page Banner (inner-page H1 hero)
Used by: layout_page_banner. Full-bleed background image + H1 + optional CTA.
========================================================================== */
.page-banner {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
color: var(--clr-white);
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Left-strong gradient overlay: dark on the left half, fading to transparent
on the right so text stays legible without obscuring the imagery. */
.page-banner__inner {
position: relative;
z-index: 1;
align-items: flex-start;
text-align: left;
gap: clamp(24px, 3vw, 40px);
}
.page-banner__heading {
margin: 0;
font-family: var(--ff-secondary);
font-size: var(--font72);
font-weight: 800;
line-height: 1.1;
color: var(--clr-white);
max-width: 560px;
margin-bottom: 28px;
}
@media (max-width: 768px) {
.page-banner { min-height: 420px; }
/* On small viewports the background image scales down — keep the overlay
full-coverage so the heading stays readable across the full width. */
.page-banner::before {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.55) 60%,
rgba(0, 0, 0, 0.45) 100%
);
}
}
@media(min-width: 1920px){
.page-banner__heading{max-width: 600px;}
}
/* ==========================================================================
22. Section — Reasons To Replace (numbered grid on dark bg)
Used by: layout_reasons_to_replace. Eyebrow + heading + intro + 3-up
numbered cards + outro + optional CTA.
========================================================================== */
.reasons-to-replace {
background-color: #242424;
color: var(--clr-white);
position: relative;
}
/* .reasons-to-replace::before → corner pattern from Layout Atoms (no delta) */
.reasons-to-replace__header { max-width: 1288px; margin-inline: auto; }
/* delta over .section-title atom: light text on dark bg, centered */
.reasons-to-replace__heading {
color: var(--clr-white);
text-align: center;
}
/* delta over .section-intro atom: light text on dark bg, centered */
.reasons-to-replace__intro {
color: rgba(var(--rgb-white), 0.82);
text-align: center;
margin-inline: auto;
}
.reasons-to-replace__grid {
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.5vw, 36px);
}
.reasons-to-replace__card-title {
margin: 0;
font-family: var(--ff-secondary);
font-size: var(--font30);
font-weight: 700;
line-height: 1.25;
color: var(--clr-ink);
}
/* delta over .section-intro atom: light text on dark bg, centered */
.reasons-to-replace__outro {
color: rgba(var(--rgb-white), 0.82);
text-align: center;
max-width: 800px;
margin-inline: auto;
}
@media (max-width: 1280px) {
.reasons-to-replace__card-title br{
display: none;
}
}
@media (max-width: 1024px) {
.reasons-to-replace__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.reasons-to-replace__grid { grid-template-columns: 1fr; }
.reasons-to-replace__heading { font-size: var(--font48, var(--font60)); }
}
/* ==========================================================================
23. Section — Roof Installation Intro (inner-page editorial intro)
Used by: layout_roof_installation_intro. Three-stack:
1) top split → editorial left column beside dark "services panel" right column
2) info card → gold-tinted feature card
3) bottom block → editorial column with full-width image
========================================================================== */
.roof-installation-intro {
position: relative;
background: linear-gradient(360deg, #FFFCF2 0%, #FFFFFF 100%);
color: var(--clr-ink-2);
}
.roof-installation-intro__pattern {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
opacity: 0.25;
pointer-events: none;
z-index: 0;
}
.roof-installation-intro__inner {
position: relative;
z-index: 1;
gap: clamp(48px, 6vw, 96px);
}
/* ----- Top split (editorial + services sidebar) ----------------------------*/
.roof-installation-intro__split {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(360px, 28vw, 420px);
gap: clamp(40px, 5vw, 96px);
align-items: start;
}
.roof-installation-intro__content { min-width: 0; }
/* .roof-installation-intro__heading → uses .section-title atom (no delta) */
/* .roof-installation-intro__subtitle → uses .subheading-strong atom + margin delta above */
/* .roof-installation-intro__body p → uses .section-intro atom (no delta) */
.roof-installation-intro__body p + p { margin-top: 1em; }
.roof-installation-intro__media {
border-radius: 10px;
overflow: hidden;
}
.roof-installation-intro__media img {
width: 100%;
height: auto;
display: block;
}
/* ----- Services sidebar panel (right column, dark) -------------------------*/
.roof-installation-intro__sidebar {
position: sticky;
top: 100px;
}
.services-panel {
background: #242424;
color: var(--clr-white);
border-radius: 16px;
padding: clamp(28px, 2.5vw, 40px);
gap: clamp(20px, 2vw, 32px);
box-shadow: 0 20px 60px rgba(var(--rgb-black), 0.18);
}
.services-panel__heading {
margin: 0;
font-family: var(--ff-secondary);
font-size: clamp(1.5rem, 0.85rem + 1.35vw, 2.125rem); /* ~24→34 */
font-weight: 700;
line-height: 1.2;
color: var(--clr-white);
}
/* .services-panel__list → uses .list-reset + .stack atoms (no delta) */
.services-panel__item {
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.services-panel__item:last-child { border-bottom: 1px solid rgba(var(--rgb-white), 0.08); }
.services-panel__item:has(.services-panel__link[aria-current="page"]) {
background: var(--clr-gold-dark);
}
.services-panel__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
font-family: var(--ff-primary);
font-size: var(--font20);
font-weight: 500;
line-height: 1.5;
color: var(--clr-white);
text-decoration: none;
transition: color 0.2s ease, padding-inline 0.2s ease;
}
.services-panel__link:hover {
background: #A88F5C;
}
.services-panel__arrow {
flex-shrink: 0;
width: 14px;
height: 14px;
color: currentColor;
transform: translateY(-1px);
transition: transform 0.2s ease;
}
.services-panel__link:hover .services-panel__arrow {
transform: translate(2px, -3px);
}
/* CTA card sitting inside the services panel */
.services-panel__cta {
position: relative;
background-color: var(--clr-gold-dark);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px;
padding: clamp(24px, 2vw, 36px) clamp(20px, 2vw, 32px);
text-align: center;
color: var(--clr-white);
align-items: center;
gap: 12px;
overflow: hidden;
margin-top: 30px;
}
.services-panel__cta > * { position: relative; z-index: 1; }
.services-panel__cta-icon {
width: 64px;
height: 64px;
object-fit: contain;
}
.services-panel__cta-heading {
margin: 0;
font-family: var(--ff-secondary);
font-size: var(--font30);
font-weight: 700;
line-height: 1.2;
color: var(--clr-white);
}
.services-panel__cta-body {
margin: 0;
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 400;
line-height: 1.55;
color: rgba(var(--rgb-white), 0.92);
max-width: 32ch;
}
.services-panel__cta-phone {
font-family: var(--ff-primary);
font-size: var(--font24);
font-weight: 700;
line-height: 1.1;
color: #0A0A0A;
text-decoration: none;
margin-top: 6px;
}
.services-panel__cta-phone:hover { color: var(--clr-white); }
/* ----- Info card (gold-tinted feature card) --------------------------------*/
.info-card {
background: var(--clr-gold-soft);
border-radius: 16px;
padding: clamp(28px, 3vw, 40px);
gap: clamp(20px, 2vw, 32px);
}
.info-card__heading {
margin: 0;
font-family: var(--ff-secondary);
font-size: var(--font30);
font-weight: 700;
line-height: 1.2;
color: var(--clr-ink);
}
/* .info-card__body → uses .section-intro atom (no delta) */
/* .info-card__features → uses .list-reset + .stack atoms (no delta) */
.info-card__feature {
display: flex;
align-items: center;
gap: 15px;
padding: 21px 0;
border-top: 1px solid rgba(var(--rgb-black), 0.06);
}
.info-card__feature:first-child { border-top: 0; }
.info-card__feature-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
object-fit: contain;
}
.info-card__feature-title {
font-family: var(--ff-primary);
font-size: var(--font20);
font-weight: 500;
line-height: 1.5;
color: var(--clr-ink-2);
}
/* ----- Bottom block (full-width editorial) ---------------------------------*/
/* ----- Responsive collapse -------------------------------------------------*/
@media (max-width: 1024px) {
.roof-installation-intro__split {
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 64px);
}
.roof-installation-intro__sidebar {
position: static;
}
.info-card,
.roof-installation-intro__bottom { max-width: 100%; }
}
@media (max-width: 600px) {
.services-panel { padding: 24px 20px; }
.services-panel__link { font-size: var(--font18); }
.info-card__feature { gap: 12px; padding: 16px 0; }
}
/* ==========================================================================
24. Section — Our Mission (dark, two-row alternating split)
Used by: layout_our_mission. Dark section (#242424). Each row is a
two-column split — text + image — with the image position toggled per row
via .our-mission__row--image-left / .our-mission__row--image-right.
Optional decorative gold corner triangle in the bottom-left (rendered
from ACF image field at .our-mission__corner).
========================================================================== */
.our-mission {
background-color: var(--clr-ink-2);
color: var(--clr-white);
position: relative;
overflow: hidden;
}
.our-mission .our-mission__inner {
gap: clamp(64px, 7vw, 110px);
position: relative;
z-index: 1;
}
/* ----- Row ----------------------------------------------------------------*/
.our-mission__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 88px);
align-items: center;
}
.our-mission__row--image-right .our-mission__content { order: 1; }
.our-mission__row--image-right .our-mission__media { order: 2; }
.our-mission__row--image-left .our-mission__content { order: 2; }
.our-mission__row--image-left .our-mission__media { order: 1; }
/* ----- Content column -----------------------------------------------------*/
.our-mission__content {
gap: 25px;
}
/* delta over .section-title atom: light text on dark bg */
.our-mission__heading {
color: var(--clr-white);
}
.our-mission__body {
color: var(--clr-white);
}
.our-mission__body p {
margin: 0;
}
/* ----- Media column -------------------------------------------------------*/
.our-mission__media img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
object-fit: cover;
}
/* ----- Decorative gold corner --------------------------------------------*/
.our-mission__corner {
position: absolute;
left: 0;
bottom: 0;
width: clamp(180px, 20vw, 283px);
height: auto;
pointer-events: none;
z-index: 0;
user-select: none;
}
/* ----- Responsive collapse ------------------------------------------------*/
@media (max-width: 1024px) {
.our-mission__row {
grid-template-columns: 1fr;
gap: clamp(24px, 4vw, 40px);
}
.our-mission__row--image-right .our-mission__content,
.our-mission__row--image-left .our-mission__content { order: 1; }
.our-mission__row--image-right .our-mission__media,
.our-mission__row--image-left .our-mission__media { order: 2; }
}
@media (max-width: 600px) {
.our-mission__corner { width: 140px; }
}
/* ==========================================================================
25. Section — Meet The Team (3-up team-member grid)
Used by: layout_meet_the_team. Light section base (#FFFFFF). Cards are
stacked: portrait (rounded top corners) + gold name plate (rounded bottom
corners) holding the member's Name (.card-title) and uppercase Role.
Optional decorative hex pattern positioned top-left behind the grid via
.meet-the-team__decoration.
========================================================================== */
.meet-the-team {
position: relative;
overflow: hidden;
}
.meet-the-team:before {
content: "";
position: absolute;
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
top: 0;
left: 0;
width: 100%;
max-width: 1121px;
height: 286px;
background-image: url('assets/images/top-left-pattern.png');
}
.meet-the-team__inner {
gap: 55px;
position: relative;
z-index: 1;
}
.meet-the-team__header {
gap: 20px;
text-align: center;
}
/* delta over .section-title atom: centered */
.meet-the-team__heading {
text-align: center;
}
/* ----- Grid ---------------------------------------------------------------*/
.meet-the-team__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin: 0;
padding: 0;
}
/* ----- Card ---------------------------------------------------------------*/
.meet-the-team__card {
display: flex;
flex-direction: column;
background: transparent;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border-radius: 20px;
position: relative;
background: var(--clr-gold);
}
.meet-the-team__card:before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 4px;
background: linear-gradient(180deg, #DBC487 0%, rgba(0, 0, 0, 0) 53.17%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.meet-the-team__portrait {
aspect-ratio: 316 / 320;
overflow: hidden;
background: #f4f4f4;
}
.meet-the-team__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.3);
}
.meet-the-team__nameplate {
display: flex;
flex-direction: column;
gap: 5px;
background: var(--clr-gold);
padding: 30px 40px;
color: var(--clr-ink);
align-items: flex-start;
}
.meet-the-team__name {
margin: 0;
}
.meet-the-team__role {
margin: 0;
font-family: var(--ff-primary);
font-size: var(--font18);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-ink);
text-align: left;
}
/* ----- Decorative hex pattern --------------------------------------------*/
.meet-the-team__decoration {
position: absolute;
top: 0;
left: 0;
width: clamp(180px, 22vw, 360px);
height: auto;
pointer-events: none;
z-index: 0;
opacity: 0.7;
user-select: none;
}
/* ----- Responsive ---------------------------------------------------------*/
@media (max-width: 1024px) {
.meet-the-team__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
}
@media (max-width: 600px) {
.meet-the-team__grid {
grid-template-columns: 1fr;
}
.meet-the-team__decoration { width: 140px; opacity: 0.5; }
}
/* ==========================================================================
26. About Us — surgical repairs (2026-05-18)
Three additive deltas, all scoped to About Us section/variant classes so
homepage / roof-installation / residential-roofing render unchanged.
========================================================================== */
/* ---- 26.1 Technology — process_icons variant -------------------------
Drives the "Our Insurance Claims Process" row on About Us. Reuses the
.technology-section base shell + decorative wedge; overrides the card
grid into a 5-up centered icon-only row.
----------------------------------------------------------------------*/
.technology--process-icons .technology__cards {
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-inline: 0;
}
.technology--process-icons .technology__card {
border: 1px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 41px;
gap: 32px;
border-radius: 16px;
background: linear-gradient(135deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}
.technology--process-icons .technology__card:hover {
transform: none;
box-shadow: none;
}
.technology--process-icons .technology__card-icon {
width: 73px;
height: 73px;
}
.technology--process-icons .technology__card-icon::before {
display: none;
}
.technology--process-icons .technology__card-title {
font-family: var(--ff-secondary);
font-size: 24px;
line-height: 28px;
font-weight: 700;
color: var(--clr-ink);
max-width: 200px;
margin: 0;
}
.technology--process-icons .technology__card-body {
display: none; /* icon-only variant */
}
@media (max-width: 1024px) {
.technology--process-icons .technology__cards { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 767px) {
.technology--process-icons .technology__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.technology--process-icons .technology__cards { grid-template-columns: repeat(1, 1fr); }
}
/* ---- 26.2 Our Mission — top-right gold wedge --------------------------
Adds a CSS-driven wedge in the top-right corner using the existing
cornerimage.png asset (theme-bundled). No new ACF field required.
The existing bottom-left .our-mission__corner img (ACF-driven) is
suppressed so the section root owns wedge rendering.
----------------------------------------------------------------------*/
.our-mission { padding-top: clamp(80px, 9vw, 140px); }
.our-mission > .our-mission__corner { display: none; } /* legacy ACF img */
.our-mission::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: clamp(280px, 26vw, 499px);
aspect-ratio: 499 / 253;
background-image: url("assets/images/cornerimage.png");
background-repeat: no-repeat;
background-size: contain;
background-position: top right;
pointer-events: none;
z-index: 0;
}
.our-mission__body p {
line-height: 1.7; /* Figma spec: 30px / 18px = 1.667 — tighten density */
font-size: 18px;
}
@media (max-width: 600px) {
.our-mission::after { width: 200px; opacity: 0.7; }
}
/* ---- 26.3 Meet The Team — portrait dark backdrop ---------------------
Replaces the light #f4f4f4 fallback with a dark backdrop that blends
with the photo subjects' own dark studio backgrounds for a seamless
edge where portraits sit on transparent PNG cutouts.
----------------------------------------------------------------------*/
.meet-the-team__portrait {
background: #2d2d2d;
}
/* ==========================================================================
27. Section — Let's Build CTA (FC layout `cta_lets_build`)
Used by About Us in body flow (global CTA is suppressed on that page).
Composes from atoms: cblock, eyebrow, btn, primary-btn, secondary-btn,
btn--on-dark. Visual mirrors .global-cta but is scoped to its own root
so we never touch global_cta rules.
========================================================================== */
.cta-lets-build {
position: relative;
width: 100%;
color: var(--clr-white);
padding: 0;
}
.cta-lets-build:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: linear-gradient(273.69deg, #A88F5C 4.23%, #634F2E 81.95%);
}
.cta-lets-build__inner { display: flex; position: unset; }
.cta-lets-build__image {
max-width: 64%;
width: 100%;
margin-top: 0;
right: 0;
position: absolute;
height: 100%;
}
.cta-lets-build__image img {
width: 100%;
object-fit: cover;
height: 100%;
position: relative;
}
.cta-lets-build__content {
max-width: 651px;
justify-content: center;
padding: 150px 0;
position: relative;
z-index: 2;
}
.cta-lets-build__eyebrow {
color: var(--clr-white);
margin: 0 0 10px;
}
.cta-lets-build__heading {
margin: 0 0 20px;
font-family: var(--ff-secondary);
font-size: var(--font60);
font-weight: 700;
line-height: 1.2;
color: var(--clr-white);
}
.cta-lets-build__subheading {
margin: 0 0 36px;
font-family: var(--ff-primary);
font-size: var(--font18);
line-height: 1.5;
color: var(--clr-white);
max-width: 831px;
}
.cta-lets-build__features {
list-style: none;
margin: 0 0 30px;
padding: 18px 0;
display: flex;
flex-wrap: wrap;
gap: 32px;
border-top: 1px solid;
border-bottom: 1px solid;
border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%) 1;
}
.cta-lets-build__feature {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ff-primary);
font-size: var(--font18);
color: var(--clr-white);
}
.cta-lets-build__feature-text { white-space: nowrap; }
.cta-lets-build__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 1024px) {
.cta-lets-build__inner { min-height: 0; justify-content: flex-start; }
.cta-lets-build__content { width: 100%; }
}
@media (max-width: 991px) {
.cta-lets-build__inner { flex-wrap: wrap; }
.cta-lets-build__image { max-width: 97.5%; }
}
@media (max-width: 768px) {
.cta-lets-build__features { flex-direction: column; gap: 12px; }
.cta-lets-build__feature-text { white-space: normal; }
.cta-lets-build__actions { flex-direction: column; width: 100%; gap: 12px; align-items: flex-start;}
.cta-lets-build__image { max-width: 94.5%; display: none;}
.cta-lets-build__content { padding: 50px 24px; }
}
/* ==========================================================================
28. Section — Location Intro (FC layout `location_intro`)
Two-column split on a cream surface: left rounded image, right column
with eyebrow + H2 + body + 3-feature stack (icon + title + body).
========================================================================== */
.location-intro {
padding-block: var(--section-pad-y);
background-color: var(--clr-cream);
position: relative;
}
.location-intro::before {
content: "";
position: absolute;
inset: 0;
background-image: url(assets/images/union.svg);
background-repeat: no-repeat;
background-position: top right;
background-size: 100%;
pointer-events: none;
z-index: 0;
}
.location-intro__inner {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 80px;
}
.location-intro__media {
flex: 0 0 auto;
max-width: 720px;
width: 50%;
overflow: hidden;
border-radius: 10px;
}
.location-intro__image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: 0 0;
border-radius: 10px;
}
.location-intro__content {
flex: 1 1 0;
max-width: 600px;
min-width: 0;
}
.location-intro__header {
gap: 24px;
}
.location-intro__eyebrow {
color: var(--clr-gold-dark);
}
.location-intro__heading {
color: var(--clr-ink);
}
.location-intro__body {
color: var(--clr-ink-2);
letter-spacing: 0;
}
.location-intro__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 50px;
}
.location-intro__feature {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.location-intro__feature-icon {
flex: 0 0 auto;
width: 80px;
height: 80px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-gold-dark);
}
.location-intro__feature-icon img {
display: block;
max-width: 100%;
height: auto;
}
.location-intro__feature-text {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.location-intro__feature-title {
color: var(--clr-ink);
margin: 0;
}
.location-intro__feature-body {
color: var(--clr-ink-2);
letter-spacing: 0;
margin: 0;
}
/* Default feature icon (inline gold star fallback when ACF icon image is absent).
Sized to fill the 48px icon slot. */
.location-intro__feature-icon-star {
display: block;
width: 100%;
height: 100%;
color: var(--clr-gold-dark);
}
@media (max-width: 1199px) {
.location-intro__inner { gap: 56px; }
}
@media (max-width: 991px) {
.location-intro__inner {
flex-direction: column;
align-items: stretch;
gap: 40px;
}
.location-intro__media {
max-width: 100%;
margin: 0 auto;}
.location-intro__content { max-width: 100%; }
}
@media (max-width: 767px) {
.location-intro__media {
width: 100%;
max-width: 100%;
margin: 0 auto;}
}
@media (max-width: 600px) {
.location-intro__features { gap: 32px; }
.location-intro__feature { gap: 14px; }
.location-intro__feature-icon { width: 56px; height: 56px; }
}
/* ==========================================================================
29. Section — Service Marquee (FC layout `service_marquee`)
Pure-CSS infinite horizontal marquee of service names with inline gold
star separators. Track duplicated in PHP; @keyframes translates -50%
for a seamless loop. Section clips at edges via overflow:hidden.
========================================================================== */
.service-marquee {
padding-top: 59px;
padding-bottom: 54px;
overflow: hidden;
background-color: transparent;
}
.service-marquee__viewport {
overflow: hidden;
width: 100%;
}
.service-marquee__track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 30px;
width: max-content;
white-space: nowrap;
animation: service-marquee-scroll 60s linear infinite;
will-change: transform;
}
.service-marquee__item {
font-family: var(--ff-secondary);
font-weight: 600;
font-size: var(--font30);
line-height: 24px;
color: var(--clr-ink);
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
flex: 0 0 auto;
}
.service-marquee__sep {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--clr-gold);
width: 17px;
height: 17px;
}
.service-marquee__star {
display: block;
width: 17px;
height: 17px;
}
@keyframes service-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.service-marquee__track { animation: none; }
}
@media (max-width: 768px) {
.service-marquee__track { gap: 22px; animation-duration: 45s; }
}
/* ==========================================================================
30. Section — Explore Our Services (static-grid modifier)
Adds an `explore-our-services--grid` variant that renders the service cards
in a fixed CSS grid (no Swiper init, no prev/next arrows, no pagination
dots). Triggered by the `display_mode` ACF field on the FC row.
Card visual treatment (`.services-card__inner`, `.services-card__media`,
`.services-card__body`, etc.) is shared with the slider — defined in §15.
This section only owns the outer grid layout + hides the slider chrome
on the rare chance the grid wrapper sits inside the same section.
Gap matches the slider's desktop `spaceBetween: 30` (Swiper config in
template-parts/flex-blocks/explore_our_services.php).
========================================================================== */
/* Outer wrapper sets the grid. `.explore-our-services--grid` is the section-
level mode class; `.explore-our-services__grid` is the inner grid container
the PHP template renders inside the static-grid branch. */
.explore-our-services__bottom_content {
font-family: var(--ff-primary);
font-size: var(--font18);
line-height: 1.5;
color: var(--clr-white);
max-width: 968px;
text-align: center;
}
.explore-our-services--grid .explore-our-services__grid {
display: grid;
gap: 30px;
width: 100%;
}
/* 2-card layout — desktop = 2 columns, stack at <=768px. */
.explore-our-services--grid .explore-our-services__grid--2col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3-card layout — desktop = 3 columns, tablet (<=991px) = 2, mobile (<=600px) = 1. */
.explore-our-services--grid .explore-our-services__grid--3col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* In static-grid mode the swiper-slide flex hack is irrelevant — let the card
fill its grid cell. (`.services-card` defaults to `display: flex` from §15.) */
.explore-our-services--grid .services-card {
height: 100%;
}
.explore-our-services--grid .services-card__inner {
height: 100%;
display: flex;
flex-direction: column;
}
/* Stretch the body so the card bottoms align across columns. */
.explore-our-services--grid .services-card__body {
flex-grow: 1;
padding: 38px 45px;
}
/* Belt-and-braces: if a future edit ever leaks slider chrome into the grid
wrapper, suppress it. (Current PHP branch never renders these in grid mode.) */
.explore-our-services--grid .explore-our-services__nav,
.explore-our-services--grid .explore-our-services__pagination {
display: none;
}
@media (max-width: 991px) {
.explore-our-services--grid .explore-our-services__grid--3col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.explore-our-services--grid .explore-our-services__grid {
gap: 24px;
}
.explore-our-services--grid .explore-our-services__grid--2col {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.explore-our-services--grid .explore-our-services__grid--3col {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
31. Atom — Image Lightbox (site-wide; activates on .our-work__photo + [data-lightbox])
-------------------------------------------------------------------------- */
.sr-lightbox {
position: fixed;
inset: 0;
z-index: 1000000; /* above nav-toggle (100000) and any FC content */
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.sr-lightbox[hidden] {
display: none;
}
.sr-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.sr-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.88); /* derived from --clr-ink (#0A0A0A) at 88% */
cursor: zoom-out;
}
.sr-lightbox__figure {
position: relative;
z-index: 1;
max-width: min(1280px, 100%);
max-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
transform: scale(0.96);
transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sr-lightbox.is-open .sr-lightbox__figure {
transform: scale(1);
}
.sr-lightbox__image {
display: block;
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
background: var(--clr-ink-2);
opacity: 1;
transition: opacity 150ms ease;
}
/* Gallery prev/next fade: drop opacity, swap src, fade back in. */
.sr-lightbox__image.is-fading {
opacity: 0;
}
.sr-lightbox__caption {
color: var(--clr-light);
font-family: inherit;
font-size: 0.875rem;
line-height: 1.4;
text-align: center;
max-width: 72ch;
opacity: 0.78;
display: none;
}
.sr-lightbox__close {
position: absolute;
top: clamp(12px, 2.4vw, 28px);
right: clamp(12px, 2.4vw, 28px);
z-index: 2;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
color: var(--clr-white);
cursor: pointer;
padding: 0;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.sr-lightbox__close:hover,
.sr-lightbox__close:focus-visible {
background: var(--clr-gold);
border-color: var(--clr-gold);
color: var(--clr-ink);
outline: none;
transform: scale(1.04);
}
.sr-lightbox__close svg {
display: block;
}
/* Gallery prev/next arrow buttons — vertically centered, inside overlay edges. */
.sr-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
color: var(--clr-white);
cursor: pointer;
padding: 0;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.sr-lightbox__nav[hidden] {
display: none;
}
.sr-lightbox__nav--prev {
left: clamp(12px, 2.4vw, 28px);
}
.sr-lightbox__nav--next {
right: clamp(12px, 2.4vw, 28px);
}
.sr-lightbox__nav:hover,
.sr-lightbox__nav:focus-visible {
background: var(--clr-gold);
border-color: var(--clr-gold);
color: var(--clr-ink);
outline: none;
transform: translateY(-50%) scale(1.04);
}
.sr-lightbox__nav svg {
display: block;
}
/* Image counter — top-left, matches close-button visual language. */
.sr-lightbox__counter {
position: absolute;
top: clamp(12px, 2.4vw, 28px);
left: clamp(12px, 2.4vw, 28px);
z-index: 2;
min-width: 56px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.35);
color: var(--clr-light);
font-family: var(--ff-primary);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
letter-spacing: 0.02em;
pointer-events: none;
}
.sr-lightbox__counter[hidden] {
display: none;
}
/* Body scroll-lock while modal is open. */
body.sr-lightbox-locked {
overflow: hidden;
}
/* Make any .our-work__photo feel clickable. */
.our-work__photo {
cursor: zoom-in;
}
/* Mobile tweaks */
@media (max-width: 600px) {
.sr-lightbox__image {
max-height: calc(100vh - 96px);
border-radius: 8px;
}
.sr-lightbox__close {
width: 40px;
height: 40px;
}
.sr-lightbox__nav {
width: 40px;
height: 40px;
}
.sr-lightbox__nav svg {
width: 22px;
height: 22px;
}
.sr-lightbox__nav--prev {
left: 8px;
}
.sr-lightbox__nav--next {
right: 8px;
}
.sr-lightbox__counter {
top: 8px;
left: 8px;
font-size: 0.8125rem;
padding: 5px 10px;
min-width: 50px;
}
}
/* Honour reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
.sr-lightbox,
.sr-lightbox__figure,
.sr-lightbox__image {
transition: none;
}
.sr-lightbox__figure {
transform: none;
}
/* No fade on prev/next either — paint is instant. */
.sr-lightbox__image.is-fading {
opacity: 1;
}
}
.twoColSec__inner {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(1.875rem, calc(-1.009rem + 6.008vw), 5.750rem);
}
/* ---------- 1. DARK CARD CONTAINER ---------- */
.twoColSecLeft {
background: #0a0a0a;
padding: 44px 36px;
border-radius: 14px;
color: #fcfaf7;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
box-sizing: border-box;
height: 100%;
}
/* ---------- 2. MAIN HEADING (h2) ---------- */
.twoColSecLeft .twoColSec__heading {
font-family: var(--ff-secondary);
font-size: 30px;
color: #fcfaf7;
margin: 0 0 12px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.2;
}
/* Gold accent line below heading */
.twoColSecLeft .twoColSec__heading::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: #a88f5c;
margin-top: 20px;
border-radius: 2px;
}
/* ---------- 3. BODY WRAPPER ---------- */
.twoColSecLeft .twoColSec__body {
margin-top: 32px;
}
/* ---------- 4. SECTION HEADINGS (h3) ---------- */
.twoColSecLeft .twoColSec__body h3 {
font-family: var(--ff-secondary);
font-size: 11px;
font-weight: 600;
color: #dbc487;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 26px 0 10px;
padding-top: 26px;
border-top: 1px solid rgba(252, 250, 247, 0.08);
}
/* First h3 - no top border/padding */
.twoColSecLeft .twoColSec__body h3:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* ---------- 5. PARAGRAPHS ---------- */
.twoColSecLeft .twoColSec__body p {
margin: 0 0 4px;
font-size: 15px;
line-height: 1.6;
color: #fcfaf7;
}
/* Last paragraph in each group - extra spacing */
.twoColSecLeft .twoColSec__body p:last-child {
margin-bottom: 0;
}
.twoColSecLeft .twoColSec__body p a:hover{
color: var(--clr-gold);
}
/* ---------- 6. MOBILE RESPONSIVE ---------- */
@media (max-width: 640px) {
.twoColSecLeft {
padding: 32px 24px;
border-radius: 12px;
}
.twoColSecLeft .twoColSec__heading {
font-size: 24px;
}
.twoColSecLeft .twoColSec__heading::after {
margin-top: 16px;
}
.twoColSecLeft .twoColSec__body {
margin-top: 24px;
}
.twoColSecLeft .twoColSec__body h3 {
margin: 22px 0 10px;
padding-top: 22px;
}
}
/* ---------- 1. CONTAINER ---------- */
.twoColSec__form {
background: #fcfaf7;
padding: 40px 36px;
border-radius: 14px;
border: 1px solid rgba(168, 143, 92, 0.18);
box-shadow: 0 4px 20px rgba(10, 10, 10, 0.04);
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
max-width: 720px;
margin: 0 auto;
}
/* ---------- 2. HEADING ---------- */
.twoColSec__form .dmform-title {
font-family: var(--ff-secondary);
font-size: 32px;
color: #0a0a0a;
margin: 0 0 28px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.2;
}
/* Hide duplicate Gravity Forms heading */
.gform_heading {
display: none !important;
}
/* ---------- 3. OVERRIDE GRAVITY FORMS THEME TOKENS ---------- */
#gform_wrapper_1[data-form-index="0"].gform-theme,
[data-parent-form="1_0"] {
--gf-color-primary: #a88f5c;
--gf-color-primary-rgb: 168, 143, 92;
--gf-color-primary-darker: #8a7449;
--gf-color-primary-lighter: #dbc487;
--gf-color-primary-contrast: #fcfaf7;
--gf-color-primary-contrast-rgb: 252, 250, 247;
--gf-ctrl-border-color: #e8e3d6;
--gf-radius: 8px;
}
/* ---------- 4. GRID LAYOUT ---------- */
.gform_wrapper .gform_fields {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 20px !important;
}
.gform_wrapper .gfield--width-half {
grid-column: span 1;
width: 100% !important;
}
/* Full-width fields */
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-html,
.gform_wrapper .gfield--type-email:not(.gfield--width-half),
.gform_wrapper .gfield--type-phone:not(.gfield--width-half) {
grid-column: span 2;
}
/* ---------- 5. LABELS ---------- */
.gform_wrapper .gfield_label {
font-family: var(--ff-secondary);
font-size: 12px;
font-weight: 600;
color: #405450;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-bottom: 8px;
display: block;
}
/* Required indicator: replace "(Required)" with gold asterisk */
.gform_wrapper .gfield_required .gfield_required_text {
display: none !important;
}
.gform_wrapper .gfield_required::after {
content: ' *';
color: #a88f5c;
font-weight: 700;
margin-left: 2px;
}
/* ---------- 6. INPUT FIELDS ---------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea {
width: 100% !important;
padding: 13px 15px !important;
border: 1.5px solid #e8e3d6 !important;
border-radius: 8px !important;
font-family: var(--ff-secondary) !important;
font-size: 15px !important;
color: #242424 !important;
background: #ffffff !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
box-sizing: border-box !important;
outline: none !important;
line-height: 1.5 !important;
}
.gform_wrapper input[type="text"]:hover,
.gform_wrapper input[type="email"]:hover,
.gform_wrapper input[type="tel"]:hover,
.gform_wrapper textarea:hover {
border-color: #c4b896 !important;
}
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper textarea:focus {
border-color: #a88f5c !important;
box-shadow: 0 0 0 4px rgba(168, 143, 92, 0.14) !important;
}
/* ---------- 7. TEXTAREA ---------- */
.gform_wrapper textarea {
min-height: 140px !important;
resize: vertical !important;
font-family: var(--ff-secondary) !important;
}
/* ---------- 8. HTML NOTICE (terms text) ---------- */
.gform_wrapper .gfield_html {
font-size: 12.5px;
color: #6b6b6b;
line-height: 1.6;
padding: 14px 16px;
background: rgba(240, 228, 214, 0.4);
border-radius: 8px;
border-left: 3px solid #a88f5c;
margin-top: 4px;
}
/* ---------- 9. SUBMIT BUTTON ---------- */
.gform_wrapper .gform_footer {
padding-top: 8px !important;
margin-top: 4px !important;
}
.gform_wrapper .gform_footer .gform_button {
width: 100% !important;
background: #0a0a0a !important;
color: #fcfaf7 !important;
border: none !important;
border-radius: 8px !important;
padding: 16px 40px !important;
font-family: var(--ff-secondary) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
cursor: pointer !important;
transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease !important;
box-shadow: 0 2px 8px rgba(10, 10, 10, 0.08) !important;
}
.gform_wrapper .gform_footer .gform_button:hover {
background: #a88f5c !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(168, 143, 92, 0.28) !important;
}
.gform_wrapper .gform_footer .gform_button:active {
transform: translateY(0);
}
/* ---------- 10. VALIDATION / ERROR STATES ---------- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
border-color: #c0392b !important;
background: #fdf5f4 !important;
}
.gform_wrapper .gfield_error .gfield_label {
color: #c0392b !important;
}
.gform_wrapper .validation_message {
color: #c0392b !important;
font-size: 13px !important;
margin-top: 6px !important;
font-weight: 500 !important;
}
.gform_wrapper .gform_validation_errors {
background: #fdf5f4 !important;
border: 1px solid #f5d6d2 !important;
border-left: 4px solid #c0392b !important;
border-radius: 8px !important;
padding: 16px 20px !important;
color: #c0392b !important;
}
/* ---------- 11. SUCCESS CONFIRMATION ---------- */
.gform_confirmation_message {
background: rgba(63, 144, 91, 0.08) !important;
border: 1px solid rgba(63, 144, 91, 0.2) !important;
border-left: 4px solid #3f905b !important;
border-radius: 8px !important;
padding: 20px 24px !important;
color: #2d6b42 !important;
font-size: 15px !important;
}
/* ---------- 12. MOBILE RESPONSIVE ---------- */
@media (max-width: 991px) {
.twoColSec__inner{
grid-template-columns: 1fr;
row-gap: 40px;
}
}
@media (max-width: 640px) {
.twoColSec__form {
padding: 28px 22px;
border-radius: 12px;
}
.twoColSec__form .dmform-title {
font-size: 26px;
margin-bottom: 20px;
}
.gform_wrapper .gform_fields {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.gform_wrapper .gfield--width-half,
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-html {
grid-column: span 1;
}
.gform_wrapper .gform_footer .gform_button {
padding: 14px 32px !important;
}
}
.fullcontentSec__inner .heading{
margin-bottom: 30px;
}
.fullcontentSec__inner .body{
font-family: var(--ff-primary);
font-size: var(--font18);
line-height: 1.5;
color: var(--clr-ink-2);
}
.fullcontentSec__inner .body h3 , .fullcontentSec__inner .body h2 , .fullcontentSec__inner .body h4 , .fullcontentSec__inner .body h5 , .fullcontentSec__inner .body h6 {
margin-bottom: 30px;
font-family: var(--ff-secondary);
}
.fullcontentSec__inner .body ul{
margin-left: 0;
}
.fullcontentSec__inner .body a{
color: var(--clr-gold-dark);
}
.fullcontentSec__inner .body a:hover{
color: var(--clr-ink);
}
@media (max-width: 1024px) {
#livesite_engage_button.ls-visible {
bottom: 10% !important;
right: 0 !important;
background-image: none !important;
display: none;
}
}
#livesite_engage_button , #livesite_active_engage{
zoom: 1 !important;
}
.content-center .fullcontentSec_header {
align-items: center;
}
ul {
margin: 0;
padding-left: 30px;
margin-bottom: 20px;
margin-top: 20px;
}
.error-404 h2 {
margin-bottom: 20px;
}
@media(max-width: 1330px) and (min-width: 1281px){
.primary-nav__list a, .header__menu a{font-size: 12px;}
}