/* ============================================================
UCG SERVICE PAGES — RESTYLE LAYER
------------------------------------------------------------
Applies to the six service detail pages via body class .ucg-svc
(added server-side in ucg-home-v2-noindex.php).
This file does NOT change page content. It only restyles the
existing Elementor widgets so the long-form SEO copy, images
and FAQ accordions match the new site design.
The page hero is a separate .ucgp block (see ucg-page.css).
============================================================ */
/* ---- 1. CANVAS -------------------------------------------- */
.ucg-svc .site-content .ast-container{max-width:none !important;padding:0 !important}
.ucg-svc .elementor-widget-container{font-family:'Poppins',system-ui,sans-serif}
/* Give every top-level Elementor container the page rhythm.
:not() guards keep our own hero untouched. */
.ucg-svc .elementor-section-wrap > .elementor-element:not(.ucg-svc-hero),
.ucg-svc .elementor > .e-con:not(.ucg-svc-hero){
--ucgs-pad:clamp(34px,3.4vw,58px);
}
/* ---- 2. TYPOGRAPHY ---------------------------------------- */
.ucg-svc .elementor-widget-heading .elementor-heading-title,
.ucg-svc .elementor-widget-elementskit-heading .ekit-heading--title{
font-family:'Poppins',system-ui,sans-serif !important;
color:var(--ucg-navy) !important;
letter-spacing:-.02em !important;
line-height:1.16 !important;
font-weight:600 !important;
}
.ucg-svc h2.elementor-heading-title{font-size:clamp(26px,2.5vw,38px) !important}
.ucg-svc h3.elementor-heading-title{font-size:clamp(20px,1.7vw,25px) !important}
.ucg-svc h4.elementor-heading-title{font-size:clamp(17px,1.3vw,20px) !important}
/* orange accent rule under section headings */
.ucg-svc .elementor-widget-heading:has(h2) .elementor-heading-title::after{
content:"";display:block;width:52px;height:3px;border-radius:2px;
background:var(--ucg-orange);margin-top:14px;
}
.ucg-svc .elementor-widget-heading:has(h2).elementor-widget__width-initial
.elementor-heading-title::after{margin-inline:auto}
.ucg-svc .elementor-widget-heading[class*="text-align-center"] .elementor-heading-title::after,
.ucg-svc .elementor-widget-heading .elementor-heading-title[style*="center"]::after{margin-inline:auto}
/* body copy */
.ucg-svc .elementor-widget-text-editor{
font-family:'Poppins',system-ui,sans-serif !important;
color:#41506B !important;
font-size:clamp(15px,1.06vw,16.5px) !important;
line-height:1.78 !important;
}
.ucg-svc .elementor-widget-text-editor p{margin:0 0 1.05em}
.ucg-svc .elementor-widget-text-editor p:last-child{margin-bottom:0}
.ucg-svc .elementor-widget-text-editor strong,
.ucg-svc .elementor-widget-text-editor b{color:var(--ucg-navy);font-weight:600}
.ucg-svc .elementor-widget-text-editor a{
color:var(--ucg-orange) !important;font-weight:500;text-decoration:none !important;
border-bottom:1px solid rgba(249,113,4,.34);transition:border-color .2s ease;
}
.ucg-svc .elementor-widget-text-editor a:hover{border-bottom-color:var(--ucg-orange)}
/* bulleted lists inside copy */
.ucg-svc .elementor-widget-text-editor ul{list-style:none;margin:0 0 1.05em;padding:0}
.ucg-svc .elementor-widget-text-editor ul li{position:relative;padding-left:26px;margin-bottom:9px}
.ucg-svc .elementor-widget-text-editor ul li::before{
content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
border-radius:50%;background:var(--ucg-orange);
}
.ucg-svc .elementor-widget-text-editor ol{padding-left:20px;margin:0 0 1.05em}
.ucg-svc .elementor-widget-text-editor ol li{margin-bottom:9px;padding-left:6px}
.ucg-svc .elementor-widget-text-editor ol li::marker{color:var(--ucg-orange);font-weight:600}
/* ---- 3. IMAGES -------------------------------------------- */
.ucg-svc .elementor-widget-image img{
border-radius:18px !important;
box-shadow:0 18px 44px -26px rgba(7,28,72,.42);
display:block;
}
.ucg-svc .elementor-widget-image figcaption{
font-size:13px;color:#7A889F;margin-top:10px;font-family:'Poppins',sans-serif;
}
/* ---- 4. VIDEO --------------------------------------------- */
.ucg-svc .elementor-widget-video .elementor-wrapper,
.ucg-svc .elementor-widget-video .elementor-fit-aspect-ratio{
border-radius:20px !important;overflow:hidden !important;
box-shadow:0 24px 60px -32px rgba(7,28,72,.52);
}
/* ---- 5. DIVIDERS + SPACERS -------------------------------- */
.ucg-svc .elementor-widget-divider .elementor-divider-separator{
border-top-color:var(--ucg-rule) !important;
}
.ucg-svc .elementor-widget-divider{max-width:1180px;margin-inline:auto}
/* the pages carry 33 spacers, many oversized — cap them */
.ucg-svc .elementor-widget-spacer .elementor-spacer-inner{
height:clamp(18px,2.2vw,34px) !important;
}
/* ---- 6. BUTTONS ------------------------------------------- */
.ucg-svc .elementor-widget-button .elementor-button{
font-family:'Poppins',sans-serif !important;
border-radius:var(--ucg-r) !important;
font-weight:600 !important;
letter-spacing:.01em !important;
padding:14px 30px !important;
background:var(--ucg-orange) !important;
color:#fff !important;
border:0 !important;
box-shadow:0 12px 26px -14px rgba(249,113,4,.7);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ucg-svc .elementor-widget-button .elementor-button:hover{
background:var(--ucg-orange-2) !important;
transform:translateY(-2px);
box-shadow:0 18px 34px -14px rgba(249,113,4,.8);
}
/* ---- 7. FAQ ACCORDION (Essential Addons) ------------------ */
.ucg-svc .eael-adv-accordion{
max-width:920px;margin-inline:auto;
display:flex;flex-direction:column;gap:12px;
}
.ucg-svc .eael-adv-accordion .eael-accordion-list{
border:1px solid rgba(7,28,72,.10) !important;
border-radius:16px !important;
overflow:hidden;
background:#fff !important;
transition:border-color .2s ease, box-shadow .2s ease;
}
.ucg-svc .eael-adv-accordion .eael-accordion-list:hover{
border-color:rgba(249,113,4,.42) !important;
box-shadow:0 10px 28px -20px rgba(7,28,72,.4);
}
.ucg-svc .eael-adv-accordion .eael-accordion-header{
background:var(--ucg-cream) !important;
font-family:'Poppins',sans-serif !important;
font-weight:600 !important;
color:var(--ucg-navy) !important;
font-size:clamp(15px,1.08vw,17px) !important;
padding:18px 22px !important;
border:0 !important;
line-height:1.4 !important;
transition:background .2s ease, color .2s ease;
display:flex;align-items:center;gap:14px;
}
.ucg-svc .eael-adv-accordion .eael-accordion-list.active .eael-accordion-header,
.ucg-svc .eael-adv-accordion .eael-accordion-header.active{
background:var(--ucg-navy) !important;
color:#fff !important;
}
.ucg-svc .eael-adv-accordion .eael-accordion-header .fa-toggle,
.ucg-svc .eael-adv-accordion .eael-accordion-header i{
color:var(--ucg-orange) !important;
transition:transform .24s ease;
}
.ucg-svc .eael-adv-accordion .eael-accordion-list.active .eael-accordion-header i,
.ucg-svc .eael-adv-accordion .eael-accordion-header.active i{
color:var(--ucg-orange-2) !important;
}
.ucg-svc .eael-adv-accordion .eael-accordion-content{
background:#fff !important;
padding:20px 22px 24px !important;
font-family:'Poppins',sans-serif !important;
color:#41506B !important;
font-size:15.5px !important;
line-height:1.78 !important;
border:0 !important;
}
.ucg-svc .eael-adv-accordion .eael-accordion-content p:last-child{margin-bottom:0}
.ucg-svc .eael-adv-accordion .eael-accordion-content a{
color:var(--ucg-orange) !important;font-weight:500;
}
/* ---- 8. MEDIA CAROUSEL ------------------------------------ */
.ucg-svc .elementor-widget-media-carousel .swiper-slide img,
.ucg-svc .elementor-widget-media-carousel .elementor-carousel-image{
border-radius:16px !important;
}
.ucg-svc .elementor-widget-media-carousel .swiper-pagination-bullet-active{
background:var(--ucg-orange) !important;
}
.ucg-svc .elementor-widget-media-carousel .elementor-swiper-button{
color:var(--ucg-navy) !important;
}
/* ---- 9. IMAGE BOX (ElementsKit) --------------------------- */
.ucg-svc .elementor-widget-elementskit-image-box .ekit-wid-con .box-body h3,
.ucg-svc .elementor-widget-elementskit-image-box .elementskit-box-header h3{
font-family:'Poppins',sans-serif !important;color:var(--ucg-navy) !important;
}
/* ---- 10. LINK GUARD --------------------------------------- */
.ucg-svc .elementor a{text-decoration:none}
/* ---- 11. MOBILE ------------------------------------------- */
@media (max-width:782px){
.ucg-svc .elementor-widget-spacer .elementor-spacer-inner{height:16px !important}
.ucg-svc .eael-adv-accordion .eael-accordion-header{padding:15px 17px !important;font-size:15px !important}
.ucg-svc .eael-adv-accordion .eael-accordion-content{padding:16px 17px 20px !important;font-size:15px !important}
.ucg-svc .elementor-widget-image img{border-radius:14px !important}
.ucg-svc .elementor-widget-button .elementor-button{width:100%;text-align:center}
}
/* ---- 12. CONTRAST GUARD ------------------------------------
.ucgs-ondark is applied by ucg-service.js to any widget whose
effective background is dark, so brand-navy text stays legible. */
.ucg-svc .ucgs-ondark .elementor-heading-title,
.ucg-svc .ucgs-ondark .ekit-heading--title{color:#fff !important}
.ucg-svc .ucgs-ondark.elementor-widget-text-editor,
.ucg-svc .ucgs-ondark.elementor-widget-text-editor p,
.ucg-svc .ucgs-ondark .elementor-widget-container{color:rgba(255,255,255,.80) !important}
.ucg-svc .ucgs-ondark.elementor-widget-text-editor strong,
.ucg-svc .ucgs-ondark.elementor-widget-text-editor b{color:#fff !important}
.ucg-svc .ucgs-ondark .elementor-heading-title::after{background:var(--ucg-orange) !important}
/* ---- 13. PROCESS STEP CARDS -------------------------------
The 'Our Remodeling Process' cards use an ElementsKit shape
mask on the image WIDGET, which was slicing the figcaption
(the step title) into a blob. ucg-service.js moves the mask
onto the ![]()
; these rules style the freed caption as the
step title it was always meant to be. */
.ucg-svc .elementor-widget-image.ucgs-mask-moved .elementor-widget-container,
.ucg-svc .elementor-widget-image.ucgs-mask-moved figure{overflow:visible !important}
.ucg-svc .elementor-widget-image.ucgs-mask-moved img{border-radius:0 !important;box-shadow:none !important}
.ucg-svc .elementor-widget-image figcaption.wp-caption-text,
.ucg-svc .elementor-widget-image .widget-image-caption{
font-family:'Poppins',system-ui,sans-serif !important;
font-weight:600 !important;
color:var(--ucg-navy) !important;
font-size:clamp(18px,1.45vw,22px) !important;
line-height:1.3 !important;
text-align:center !important;
margin:18px 0 0 !important;
letter-spacing:-.01em !important;
font-style:normal !important;
}
.ucg-svc .ucgs-ondark .elementor-widget-image figcaption.wp-caption-text,
.ucg-svc .ucgs-ondark figcaption.wp-caption-text{color:#fff !important}
/* ---- 14. ORPHAN LIST MARKERS ------------------------------
— a list item with no text of its own —
was showing our bullet next to the child list's bullet.
ucg-service.js tags those with .ucgs-nomarker. */
.ucg-svc .elementor-widget-text-editor li.ucgs-nomarker::before{content:none !important}
.ucg-svc .elementor-widget-text-editor li.ucgs-nomarker{padding-left:0 !important;margin-bottom:0 !important}
.ucg-svc .elementor-widget-text-editor li ul,
.ucg-svc .elementor-widget-text-editor li ol{margin:9px 0 0 !important}
.ucg-svc .elementor-widget-text-editor li li::before{width:6px !important;height:6px !important;
background:rgba(249,113,4,.55) !important}
/* ---- 13. 'PLAN. DESIGN. BUILD YOUR DREAMS.' CTA - UCG CTA HEADING WHITE ---
This CTA band sits on a dark photo background, but the JS contrast guard
does not detect it, so section 2 was painting the heading brand-navy.
Force white on the specific CTA heading + lede on each service page. */
.ucg-svc .elementor-element-567d878e .elementor-heading-title,
.ucg-svc .elementor-element-567d878e .elementor-widget-container,
.ucg-svc .elementor-element-567d878e p,
.ucg-svc .elementor-element-411147b1 .elementor-heading-title,
.ucg-svc .elementor-element-411147b1 .elementor-widget-container,
.ucg-svc .elementor-element-411147b1 p,
.ucg-svc .elementor-element-44308e83 .elementor-heading-title,
.ucg-svc .elementor-element-44308e83 .elementor-widget-container,
.ucg-svc .elementor-element-44308e83 p,
.ucg-svc .elementor-element-1da42721 .elementor-heading-title,
.ucg-svc .elementor-element-1da42721 .elementor-widget-container,
.ucg-svc .elementor-element-1da42721 p,
.ucg-svc .elementor-element-7bd2e1f7 .elementor-heading-title,
.ucg-svc .elementor-element-7bd2e1f7 .elementor-widget-container,
.ucg-svc .elementor-element-7bd2e1f7 p,
.ucg-svc .elementor-element-379acf55 .elementor-heading-title,
.ucg-svc .elementor-element-379acf55 .elementor-widget-container,
.ucg-svc .elementor-element-379acf55 p,
.ucg-svc .elementor-element-63f74901 .elementor-heading-title,
.ucg-svc .elementor-element-63f74901 .elementor-widget-container,
.ucg-svc .elementor-element-63f74901 p,
.ucg-svc .elementor-element-3b723 .elementor-heading-title,
.ucg-svc .elementor-element-3b723 .elementor-widget-container,
.ucg-svc .elementor-element-3b723 p,
.ucg-svc .elementor-element-34ede6f3 .elementor-heading-title,
.ucg-svc .elementor-element-34ede6f3 .elementor-widget-container,
.ucg-svc .elementor-element-34ede6f3 p,
.ucg-svc .elementor-element-7fbd0f02 .elementor-heading-title,
.ucg-svc .elementor-element-7fbd0f02 .elementor-widget-container,
.ucg-svc .elementor-element-7fbd0f02 p,
.ucg-svc .elementor-element-94ecbf3 .elementor-heading-title,
.ucg-svc .elementor-element-94ecbf3 .elementor-widget-container,
.ucg-svc .elementor-element-94ecbf3 p,
.ucg-svc .elementor-element-c8f02d0 .elementor-heading-title,
.ucg-svc .elementor-element-c8f02d0 .elementor-widget-container,
.ucg-svc .elementor-element-c8f02d0 p,
.ucg-svc .elementor-element-2814cc36 .elementor-heading-title,
.ucg-svc .elementor-element-2814cc36 .elementor-widget-container,
.ucg-svc .elementor-element-2814cc36 p,
.ucg-svc .elementor-element-7d8bcfc8 .elementor-heading-title,
.ucg-svc .elementor-element-7d8bcfc8 .elementor-widget-container,
.ucg-svc .elementor-element-7d8bcfc8 p{color:#fff !important}
/* ---- 15. PAGE GUTTERS + CONTENT WIDTH — UCG SERVICE GUTTERS ----
Section 1 stripped the Astra container padding so section
backgrounds could run full-bleed, but nothing put the gutter
back, so the copy ran edge to edge. Backgrounds still span the
full width; only the content inside each top-level container
is inset and capped.
--ucgs-gut side gutter --ucgs-max content max-width */
.ucg-svc{
--ucgs-gut:clamp(20px,5vw,64px);
--ucgs-max:1240px;
}
/* top-level containers on the page itself. Header and footer
templates use a different data-elementor-type and are untouched. */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent{
padding-inline:var(--ucgs-gut) !important;
}
/* boxed containers: cap the inner wrapper and centre it */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent > .e-con-inner{
max-width:var(--ucgs-max) !important;
margin-inline:auto !important;
width:100% !important;
}
/* Full containers carry their own background, so they must NEVER be
capped - that boxes the coloured band and leaves white at the edges.
They get the gutter as padding only, which does not inset a background. */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-con-full.e-parent{
max-width:none !important;
margin-inline:0 !important;
}
/* our own hero manages its own spacing */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.ucg-svc-hero{
padding-inline:0 !important;max-width:none !important;
}
/* NOTE: nested containers never receive the gutter - section 15 applies
it only to '> .e-con.e-parent'. An earlier blanket
'.e-con.e-child{padding-inline:0}' rule lived here and was stripping the
authored left/right padding off every card on these pages. Do not
reinstate it. */
/* escape hatch: add .ucgs-bleed to any container that should
still touch both edges */
.ucg-svc .ucgs-bleed{padding-inline:0 !important;max-width:none !important}
/* ---- 16. MOBILE COMFORT -----------------------------------
The pages were cramped on phones: no side gutter, desktop
two-column splits squeezed instead of stacked, and images
and tables overflowing the viewport. */
@media (max-width:1024px){
.ucg-svc{--ucgs-gut:clamp(20px,4vw,40px)}
}
@media (max-width:767px){
.ucg-svc{--ucgs-gut:20px}
/* stack any side-by-side container */
.ucg-svc [data-elementor-type="wp-page"] .e-con.e-flex{
flex-direction:column !important;
}
.ucg-svc [data-elementor-type="wp-page"] .e-con.e-child{
width:100% !important;max-width:100% !important;flex-basis:auto !important;
}
/* nothing may push the page wider than the screen */
.ucg-svc .elementor-widget-image img,
.ucg-svc .elementor-widget-video,
.ucg-svc iframe,
.ucg-svc table{max-width:100% !important;height:auto !important}
.ucg-svc table{display:block;overflow-x:auto}
/* type that fits a 360px screen */
.ucg-svc h2.elementor-heading-title{font-size:25px !important;line-height:1.22 !important}
.ucg-svc h3.elementor-heading-title{font-size:20px !important;line-height:1.28 !important}
.ucg-svc h4.elementor-heading-title{font-size:17px !important}
.ucg-svc .elementor-widget-text-editor{font-size:15.5px !important;line-height:1.75 !important}
/* breathing room between stacked blocks */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent{
padding-block:clamp(30px,7vw,46px) !important;
}
.ucg-svc [data-elementor-type="wp-page"] .e-con.e-flex{row-gap:22px !important}
}
/* ---- 17. FULL-BLEED BANDS + FORM CARD CENTRING ----
.ucgs-bleed also has to release the inner wrapper, otherwise a
coloured band painted on a child container gets capped at
--ucgs-max and shows white down both sides. */
.ucg-svc .ucgs-bleed,
.ucg-svc .ucgs-bleed > .e-con-inner{
max-width:none !important;
padding-inline:0 !important;
width:100% !important;
}
/* keep the text inside a bled band off the screen edges */
.ucg-svc .ucgs-bleed .elementor-widget{
padding-inline:var(--ucgs-gut);
}
/* The CTA intake card sat in a 15% / 70% / 15% spacer row that did
not resolve symmetrically, so the card read as left-of-centre.
Drop the spacers and centre the card column outright. */
.ucg-svc .ucgs-formrow{
justify-content:center !important;
align-items:flex-start !important;
}
.ucg-svc .ucgs-formrow > .ucgs-formspacer{display:none !important}
.ucg-svc .ucgs-formcol{
width:100% !important;
max-width:780px !important;
flex:0 1 780px !important;
margin-inline:auto !important;
}
.ucg-svc .ucgf-panel{margin-inline:auto !important;width:100% !important}
@media (max-width:767px){
.ucg-svc .ucgs-formcol{max-width:100% !important;flex:1 1 auto !important}
}
/* ---- 18. FULL-BLEED BAND + CTA FORM CENTRING (by element id) ----
Elementor is not emitting the containers' custom CSS classes on this
install, so section 17's .ucgs-* hooks never reach the markup. These
rules target the same elements by their Elementor element id, which
does render. Keep 17 in place: if custom classes start rendering
again, both routes agree. */
/* the navy "Your Commercial Space Awaits" band paints its background on
a child container, so the boxed wrapper above it must be released or
the band shows white down both sides */
.ucg-svc .elementor-element-9660633,
.ucg-svc .elementor-element-9660633 > .e-con-inner{
max-width:none !important;
padding-inline:0 !important;
width:100% !important;
}
.ucg-svc .elementor-element-9660633 .elementor-widget{padding-inline:var(--ucgs-gut)}
/* CTA intake card sat in a 15%/70%/15% spacer row that did not resolve
symmetrically, so the card read left-of-centre. Drop the empty spacer
columns and centre the card column outright. */
.ucg-svc .elementor-element-28d3ac5f,
.ucg-svc .elementor-element-44ce47e8,
.ucg-svc .elementor-element-d84c890,
.ucg-svc .elementor-element-67eca1ce,
.ucg-svc .elementor-element-32d2e870,
.ucg-svc .elementor-element-b712a4f{justify-content:center !important;align-items:flex-start !important}
.ucg-svc .elementor-element-72d464bf,
.ucg-svc .elementor-element-41236104,
.ucg-svc .elementor-element-79f0ca0d,
.ucg-svc .elementor-element-54cc037b,
.ucg-svc .elementor-element-75ded711,
.ucg-svc .elementor-element-1356c69f,
.ucg-svc .elementor-element-61f1dcd1,
.ucg-svc .elementor-element-1f96acf6,
.ucg-svc .elementor-element-67c88d59,
.ucg-svc .elementor-element-19624748,
.ucg-svc .elementor-element-48fc2ba,
.ucg-svc .elementor-element-f610336{display:none !important}
.ucg-svc .elementor-element-e6f390,
.ucg-svc .elementor-element-3563d94b,
.ucg-svc .elementor-element-65e3604d,
.ucg-svc .elementor-element-7753bf0b,
.ucg-svc .elementor-element-234eacc5,
.ucg-svc .elementor-element-9416858{
width:100% !important;
max-width:780px !important;
flex:0 1 780px !important;
margin-inline:auto !important;
}
.ucg-svc .ucgf-panel{margin-inline:auto !important;width:100% !important}
@media (max-width:767px){
.ucg-svc .elementor-element-e6f390,
.ucg-svc .elementor-element-3563d94b,
.ucg-svc .elementor-element-65e3604d,
.ucg-svc .elementor-element-7753bf0b,
.ucg-svc .elementor-element-234eacc5,
.ucg-svc .elementor-element-9416858{max-width:100% !important;flex:1 1 auto !important}
}
/* ---- 19. SERVICE HERO RUNS FULL WIDTH ----
The hero is an html widget (.ucgp-svc-hero) inside a top-level
container, so section 15's gutter padding showed as white bars down
both sides of the photo. Release the hero container; the hero block
applies its own internal padding, so the text inside stays aligned.
Matched two ways - by structure and by element id - so a rebuilt
hero keeps working. */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(.ucgp-svc-hero),
.ucg-svc .elementor-element-72f57fc,
.ucg-svc .elementor-element-db77b2f,
.ucg-svc .elementor-element-f526c5a,
.ucg-svc .elementor-element-debc9c6,
.ucg-svc .elementor-element-955f28b,
.ucg-svc .elementor-element-38dbaa4{
padding:0 !important;
max-width:none !important;
margin:0 !important;
width:100% !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(.ucgp-svc-hero) > .e-con-inner,
.ucg-svc .elementor-element-72f57fc > .e-con-inner,
.ucg-svc .elementor-element-db77b2f > .e-con-inner,
.ucg-svc .elementor-element-f526c5a > .e-con-inner,
.ucg-svc .elementor-element-debc9c6 > .e-con-inner,
.ucg-svc .elementor-element-955f28b > .e-con-inner,
.ucg-svc .elementor-element-38dbaa4 > .e-con-inner{
max-width:none !important;
padding-inline:0 !important;
width:100% !important;
}
/* ---- 20. FAQ HOVER + LIST + VERTICAL RHYTHM ----
FAQ hover: the accordion header only defined an active state, so
hovering a closed question left near-white text on the cream
header and the question became unreadable. Hover now uses the
brand orange with white text. */
.ucg-svc .eael-adv-accordion .eael-accordion-list:not(.active) .eael-accordion-header:hover,
.ucg-svc .eael-adv-accordion .eael-accordion-header:not(.active):hover{
background:var(--ucg-orange) !important;
color:#fff !important;
}
.ucg-svc .eael-adv-accordion .eael-accordion-header:not(.active):hover i,
.ucg-svc .eael-adv-accordion .eael-accordion-header:not(.active):hover .fa-toggle{
color:#fff !important;
}
/* the open question keeps the navy state; make its hover legible too */
.ucg-svc .eael-adv-accordion .eael-accordion-list.active .eael-accordion-header:hover{
background:var(--ucg-navy) !important;
color:#fff !important;
}
/* Feature list: the source markup nested each item three deep
with stray
tags, which is what opened the big gaps. The
markup is now a flat list, so it only needs normal list spacing. */
.ucg-svc .elementor-widget-text-editor ul li{margin-bottom:11px}
.ucg-svc .elementor-widget-text-editor ul li:last-child{margin-bottom:0}
.ucg-svc .elementor-widget-text-editor ul li br{display:none}
.ucg-svc .elementor-widget-text-editor ul ul{margin-top:9px}
/* Section rhythm: spacer-only containers are gone, so tighten the
remaining band-to-content gap rather than leaving a hole. */
.ucg-svc .elementor-widget-media-carousel.elementor-skin-slideshow
.elementor-main-swiper:not(.elementor-thumbnails-swiper){
margin-bottom:14px !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent{
padding-block:clamp(26px,3vw,44px);
}
/* ---- 21. HERO SITS FLUSH UNDER THE HEADER ----
Section 20 gave every top-level container vertical padding, which
reintroduced white bars above and below the hero photo. Section 19
now zeroes the hero container outright; these rules clear the rest
of the chain (Astra's article padding, the widget wrapper and the
hero block's own margins) so the banner meets the header edge to
edge with nothing above or below it. */
.ucg-svc .site-content .ast-container,
.ucg-svc .ast-article-single,
.ucg-svc .ast-article-post,
.ucg-svc .entry-content{
padding:0 !important;
margin:0 !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(.ucgp-svc-hero) .elementor-widget,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(.ucgp-svc-hero) .elementor-widget-container{
padding:0 !important;
margin:0 !important;
}
.ucg-svc .ucgp-svc-hero,
.ucg-svc .ucgp-svc-hero .ucgp-hero{
margin:0 !important;
display:block;
}
/* the first content section after the hero still needs its top padding */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(.ucgp-svc-hero) + .e-con.e-parent{
padding-block-start:clamp(30px,3.4vw,52px) !important;
}
/* ---- 22. SHAPE DIVIDER GUARD ----
The wave dividers were authored at 131%-157% width and up to 160px
tall with no mobile override, so on a phone an arbitrary slice of a
~600px-wide SVG was cropped into a 390px viewport and collided with
the heading. Widths are now 100% and heights are clamped in the page
data; these rules are the backstop so any divider added later, on any
of these pages, cannot overflow again. */
.ucg-svc .elementor-shape svg{
width:100% !important;
left:0 !important;
transform:none !important;
}
/* NOTE: Elementor rotates the .elementor-shape WRAPPER, not the svg
(see shapes.min.css). Never add rotation to the svg here - doing so
double-rotates negative shapes and shears them across the section. */
/* a divider must never take more than a slice of the section */
.ucg-svc .elementor-shape svg{max-height:70px}
@media (max-width:1024px){
.ucg-svc .elementor-shape svg{max-height:46px}
}
@media (max-width:767px){
.ucg-svc .elementor-shape svg{max-height:28px}
/* keep the heading clear of the crest on small screens */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(> .elementor-shape-top){
padding-block-start:max(34px,var(--ucgs-gut)) !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent:has(> .elementor-shape-bottom){
padding-block-end:max(34px,var(--ucgs-gut)) !important;
}
}
/* ---- 23. NAVY HEADING BANDS RUN FULL WIDTH ----
These bands paint their background on a CHILD container, so the boxed
parent caps them at --ucgs-max and leaves white down both sides. The
two parent ids below are shared across all six service pages
('...Awaits' band and 'Picture Gallery' band). Section 18 already
handles 9660633; this extends the same treatment to 74fbc44 and keeps
both in one place. */
.ucg-svc .elementor-element-9660633,
.ucg-svc .elementor-element-9660633 > .e-con-inner,
.ucg-svc .elementor-element-74fbc44,
.ucg-svc .elementor-element-74fbc44 > .e-con-inner{
max-width:none !important;
padding-inline:0 !important;
width:100% !important;
}
/* text inside a bled band still needs a gutter */
.ucg-svc .elementor-element-9660633 .elementor-widget,
.ucg-svc .elementor-element-74fbc44 .elementor-widget{
padding-inline:var(--ucgs-gut);
}
/* and the band itself needs vertical breathing room */
.ucg-svc .elementor-element-9660633 > .e-con-inner > .e-con,
.ucg-svc .elementor-element-74fbc44 > .e-con-inner > .e-con{
padding-block:clamp(30px,3.4vw,52px) !important;
}
/* ---- 24. CARD PADDING FLOOR ----
Card padding is set per-container in the page data (30px desktop,
22px mobile) so it stays editable in Elementor. This is only a floor
for any card added later that ships with a tighter value. */
.ucg-svc .e-con[class*="elementor-element-"] > .e-con-inner > .elementor-widget:first-child{margin-top:0}
.ucg-svc .elementor-widget-heading + .elementor-widget-text-editor{margin-top:10px}
/* ---- 25. BAND BLEED - SPECIFICITY FIX ----
Sections 18 and 23 targeted the bands as '.ucg-svc .elementor-element-X'
(2-3 classes). Section 15 caps the inner wrapper with
'.ucg-svc [data-elementor-type] > .e-con.e-parent > .e-con-inner'
(5 classes). Both carry !important, so the higher-specificity cap won
and the bands stayed boxed. These selectors mirror section 15's shape
exactly and add the element id, so they outrank it. */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633 > .e-con-inner,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44 > .e-con-inner{
max-width:none !important;
width:100% !important;
padding-inline:0 !important;
margin-inline:0 !important;
}
/* the coloured child fills the full width, text inside keeps a gutter */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633 .e-con,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44 .e-con{
max-width:none !important;
width:100% !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633 .elementor-widget,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44 .elementor-widget{
padding-inline:var(--ucgs-gut) !important;
}
/* ---- 26. MOBILE: FAQ, BAND SPACING, OVERFLOW ----
FAQ: the accordion widget carries a hard 70% custom width
(_element_custom_width) with no mobile override, so on a phone the
questions were squeezed into roughly half the screen and every title
wrapped to five or six lines. Any widget using Elementor's custom
width is released to full width on tablet and below. */
@media (max-width:1024px){
.ucg-svc .elementor-widget.elementor-widget__width-initial,
.ucg-svc .elementor-widget[class*="elementor-widget__width-"]{
width:100% !important;
max-width:100% !important;
--container-widget-width:100% !important;
}
}
/* the header is a flex row: let the question take the space and keep
the chevron from being squashed */
.ucg-svc .eael-adv-accordion .eael-accordion-header{
justify-content:space-between;
}
.ucg-svc .eael-adv-accordion .eael-accordion-tab-title{
flex:1 1 auto;
min-width:0;
margin:0;
}
.ucg-svc .eael-adv-accordion .eael-accordion-header > svg,
.ucg-svc .eael-adv-accordion .eael-accordion-header .fa-toggle{
flex:0 0 auto;
}
@media (max-width:767px){
/* 24px titles were far too large in a narrow column */
.ucg-svc .eael-adv-accordion .eael-accordion-tab-title{
font-size:16px !important;
line-height:1.35 !important;
}
.ucg-svc .eael-adv-accordion .eael-accordion-header{
padding:14px 16px !important;
gap:10px;
}
.ucg-svc .eael-adv-accordion .eael-accordion-content{
padding:14px 16px 18px !important;
}
.ucg-svc .eael-adv-accordion{gap:10px}
/* the gap between a navy band and the content under it was the band's
own bottom padding plus the next section's top padding stacking up */
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633{
padding-block:0 !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44 > .e-con-inner > .e-con,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633 > .e-con-inner > .e-con{
padding-block:26px !important;
}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-74fbc44 + .e-con.e-parent,
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent.elementor-element-9660633 + .e-con.e-parent{
padding-block-start:22px !important;
}
/* ElementsKit parallax translates elements on scroll; on a phone that
can drag an image over the paragraph below it */
.ucg-svc .elementor-widget-image,
.ucg-svc .elementor-widget-image .elementor-widget-container,
.ucg-svc .elementor-widget-text-editor{
transform:none !important;
position:relative !important;
}
}
/* nothing on these pages may cause a horizontal scroll */
.ucg-svc,
.ucg-svc .site-content{overflow-x:clip}
.ucg-svc [data-elementor-type="wp-page"] > .e-con.e-parent{max-width:100vw}
/* ---- 27. NO ENTRANCE ANIMATIONS ON MOBILE ----
Measured at 386px on v64: the image/text block stacks correctly and
the page reports zero overlapping siblings. The overlap that shows up
in phone screenshots is transient - Elementor entrance animations
(fadeInUp) start an element translated and semi-transparent, and
while it travels it passes over the block above it. On a slow phone
that window is long enough to see and to screenshot.
Entrance animations add nothing on a small screen and cause both this
artifact and a flash of invisible content if the script is late, so
they are switched off below the tablet breakpoint. */
@media (max-width:767px){
.ucg-svc .elementor-invisible{visibility:visible !important}
.ucg-svc [class*="elementor-animation-"],
.ucg-svc .animated{
animation:none !important;
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.ucg-svc .elementor-widget,
.ucg-svc .e-con{
animation-name:none !important;
}
}
/* ---- 28. IMAGE BOXES CANNOT COLLAPSE ----
Measured at 390px: the image widget box reported 16px tall while the
image inside it was 173px, overflowing 157px past its own box and
painting over the paragraph underneath. Once the image finished
loading the box corrected itself to 172px with a clean gap, so the
collapse is a layout-timing problem rather than a fixed rule.
Rather than rely on diagnosing why the box collapses, force every
link in that chain to be at least as tall as its content. fit-content
is a floor, never a cap, so a correctly-sized box is unaffected. */
/* min-height:fit-content was tried here and does not contain these
boxes - the collapse is imposed from outside the widget. The real
containment now happens in ucg-service.js (fixCollapsedImageBoxes),
which measures scrollHeight and pins a min-height. Leave the CSS to
the parts that do work. */
.ucg-svc .elementor-widget-image > .elementor-widget-container{
height:auto !important;
}
.ucg-svc .elementor-widget-image img{
display:block !important;
height:auto !important;
max-width:100% !important;
box-sizing:border-box !important;
}