/* Header nav tweaks to match the reference (font family is set in Elementor, not here). */
html body header.elementor-location-header nav.ekit-wid-con .elementskit-navbar-nav > li > a{color:#111!important;letter-spacing:.01em!important}
html body header.elementor-location-header nav.ekit-wid-con .elementskit-navbar-nav > li:hover > a,html body header.elementor-location-header nav.ekit-wid-con .elementskit-navbar-nav > li > a:hover,html body header.elementor-location-header nav.ekit-wid-con .elementskit-navbar-nav .elementskit-dropdown > li > a:hover{color:#0F52BA!important}
html body header.elementor-location-header nav.ekit-wid-con .elementskit-navbar-nav .elementskit-dropdown > li > a{font-size:15px!important;font-weight:600!important;color:#111!important}

/* ---- Elementor's .e-con { height/min-height/width: var(--...) } loads after the package CSS and wins.
        Re-assert the package's sizing with higher specificity. ---- */
html body .e-con.ue-hero-stage{height:80vh;min-height:620px}
html body .e-con.ue-hero-copy{width:calc(38% - max(56px,calc((100% - 1440px) / 2 + 56px)) - 72px)}
html body .e-con.ue-svc-media{height:72vh;min-height:560px}
@media (max-width:1024px){
	html body .e-con.ue-hero-stage{height:auto;min-height:0}
	html body .e-con.ue-hero-media{height:60vh;min-height:420px}
	html body .e-con.ue-hero-copy{width:auto;max-width:680px}
	html body .e-con.ue-svc-media{height:420px;min-height:0}
}
@media (max-width:767px){
	html body .e-con.ue-hero-media{height:52vh;min-height:320px}
	html body .e-con.ue-svc-media{height:280px}
}

/* Elementor's .e-con { overflow: var(--overflow) } also beats the package's overflow:hidden, so parallax/Ken Burns
   photos spilled out of their frames and covered neighbouring content. */
html body .e-con.ue-frame,
html body .e-con.ue-hero-media,
html body .e-con.ue-svc-media{overflow:hidden}

/* Mobile/tablet hero: copy above the photo (copy is second in the DOM) with the page gutters. */
@media (max-width:1024px){
	html body .e-con.ue-hero-stage{flex-direction:column-reverse;gap:40px}
	html body .e-con.ue-hero-copy{padding:0 32px}
}
@media (max-width:767px){
	html body .e-con.ue-hero-copy{padding:0 20px}
}

/* Services rows: keep title/text left and the arrow on the right on mobile too (Elementor wraps rows on mobile by default). */
html body .e-con.ue-svc-item{flex-wrap:nowrap}
html body .e-con > .elementor-widget.ue-svc-arrow{width:auto;flex:0 0 auto}

/* Services photo swap: Elementor's widget transition list has no opacity, so the package's fade never ran (instant swap).
   Restore a smooth cross-fade: the incoming photo (is-active) fades in over the outgoing one (is-prev), so there is no dip.
   Selectors include .is-ready and .elementor-widget-image to out-rank the package's first-child rule. */
html body .e-con.ue-svc-media.is-ready > .elementor-widget-image{transition:opacity .9s ease;z-index:0}
html body .e-con.ue-svc-media.is-ready > .elementor-widget-image.is-prev{opacity:1;z-index:1}
html body .e-con.ue-svc-media.is-ready > .elementor-widget-image.is-active{opacity:1;z-index:2}
html body .e-con.ue-svc-media.is-ready > .elementor-widget-image img{transition:filter 1.4s ease .15s}

/* ---- Mobile header to match the reference: logo | "Menu" + two bars | phone icon | Contact, in one 84px row ---- */
@media (max-width:1024px){
	html body header.elementor-location-header .elementskit-menu-hamburger{border:0!important;background:none!important;box-shadow:none!important;display:flex!important;align-items:center;gap:10px;padding:12px 0!important;color:#111!important;font-size:15px;font-weight:600;line-height:1;width:auto!important;height:auto!important}
	html body header.elementor-location-header .elementskit-menu-hamburger::before{content:'Menu'}
	html body header.elementor-location-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{display:none!important}
	html body header.elementor-location-header .elementskit-menu-hamburger::after{content:'';display:block;width:22px;height:1.5px;background:currentColor;box-shadow:0 6.5px 0 currentColor;margin-bottom:6.5px}
}
@media (max-width:767px){
	html body header.elementor-location-header .ue-header-inner{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;flex-wrap:nowrap;padding:0 20px!important;width:100%;box-sizing:border-box;min-height:var(--ue-header-h,84px)}
	html body header.elementor-location-header.is-compact .ue-header-inner{min-height:var(--ue-header-h-sm,64px)}
	html body header.elementor-location-header .ue-header-left,
	html body header.elementor-location-header .ue-header-center,
	html body header.elementor-location-header .ue-header-right{width:auto!important;min-height:0!important;padding:0!important}
	html body header.elementor-location-header .ue-header-center{justify-self:end}
	html body header.elementor-location-header .ue-header-right{display:flex!important;flex-direction:row!important;align-items:center;gap:6px!important;flex-wrap:nowrap!important}
	html body header.elementor-location-header .ue-header-right .elementor-widget{width:auto!important}
	html body header.elementor-location-header .ue-header-right .elementor-widget-divider{display:none!important}
	html body header.elementor-location-header .ue-header-right .elementor-icon-list-text{display:none!important}
	html body header.elementor-location-header .ue-header-right .elementor-icon-list-item a{padding:12px;display:flex}
	html body header.elementor-location-header .ue-header-right .elementor-icon-list-icon i{font-size:28px!important}
	html body header.elementor-location-header .ue-header-right .elementor-button{padding:12px 14px!important;font-size:14px!important}
}

/* ---- Parallax on the About and Urban Difference photo bands (.ue-parallax-fast): the photo moves UP inside its frame as you
        scroll down. Uses a scroll-driven animation (Chrome/Edge 115+, Safari 26+); other browsers keep the script's gentle drift.
        The frame owns the timeline because an overflow:hidden parent would otherwise freeze the animation. ---- */
html body .ue-parallax-fast img{
	position: absolute !important;   /* the package only positions images under .ue-parallax; without this the photo stays in the flow and a gap shows */
	left: 0 !important;
	width: 100% !important;
	max-width: none !important;
	top: -30% !important;
	height: 160% !important;
}
@supports (animation-timeline: view()) {
	html body .e-con.ue-frame{
		view-timeline-name: --ue-frame;
		view-timeline-axis: block;
	}
	html body .ue-parallax-fast img{
		animation: ue-parallax-up linear both;
		animation-timeline: --ue-frame;
		animation-range: cover;
	}
	@keyframes ue-parallax-up {
		from { transform: translate3d(0,  18%, 0); }
		to   { transform: translate3d(0, -18%, 0); }
	}
}

/* ---- Blueprint grid preset used by the part-2 pages (the package ships --bottom-left but not --bottom-right) ---- */
.ue-grid--bottom-right .ue-grid-layer{
	-webkit-mask-image: radial-gradient(ellipse 40% 40% at 100% 100%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 40% 40% at 100% 100%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 70%, transparent 100%);
}

/* ---- Accordion icon (.ue-accordion): the reference uses a thin + / - in a 32px square. Elementor's accordion draws a bold
        Font Awesome icon, so hide it and draw the plus/minus with two 1.5px lines. ---- */
html body .ue-accordion .elementor-accordion-icon{position:relative;box-sizing:border-box;width:32px;height:32px;flex:none;border:1px solid #cfcfcb;color:#0F52BA}
html body .ue-accordion .elementor-accordion-icon > span{display:none !important}
html body .ue-accordion .elementor-accordion-icon::before,
html body .ue-accordion .elementor-accordion-icon::after{content:"";position:absolute;left:50%;top:50%;background:#0F52BA;transform:translate(-50%,-50%)}
html body .ue-accordion .elementor-accordion-icon::before{width:11px;height:1.5px}
html body .ue-accordion .elementor-accordion-icon::after{width:1.5px;height:11px;transition:opacity .2s ease}
html body .ue-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon::after{opacity:0}

/* ---- Blueprint grid preset used by the Installation page (top-left corner) ---- */
.ue-grid--top-left .ue-grid-layer{
	-webkit-mask-image: radial-gradient(ellipse 40% 24% at 0% 0%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 70%, transparent 100%);
	mask-image: radial-gradient(ellipse 40% 24% at 0% 0%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.12) 70%, transparent 100%);
}

/* ---- "Elevator down?" callout: the charcoal blend over the photo's edge (reference: 90deg #161616 -> transparent at 68%).
        Elementor draws a container's background overlay as ::before, but the absolutely-positioned image widget paints on top of it,
        so the blend was hidden and the photo showed a hard edge. Lift the overlay above the image and use the reference's soft gradient. ---- */
#emergency > .ue-frame::before{z-index:3 !important;opacity:1 !important}
@media (min-width:1025px){
	#emergency > .ue-frame::before{background:linear-gradient(to right,#161616 0%,rgba(22,22,22,.85) 12%,rgba(22,22,22,.45) 30%,rgba(22,22,22,.12) 50%,rgba(22,22,22,0) 68%) !important}
}
@media (max-width:1024px){
	#emergency > .ue-frame::before{background:linear-gradient(to bottom,#161616 0%,rgba(22,22,22,.6) 18%,rgba(22,22,22,0) 45%) !important}
}

/* ---- Phone lines (Icon List widgets): the reference turns the whole line Sapphire on hover (colour fades in 0.2s).
        Applies to the header phone and the "On call / Call now" lines; not to the checklists (.ue-checks). ---- */
html body .elementor-widget-icon-list:not(.ue-checks) .elementor-icon-list-item > a,
html body .elementor-widget-icon-list:not(.ue-checks) .elementor-icon-list-text,
html body .elementor-widget-icon-list:not(.ue-checks) .elementor-icon-list-icon{transition:color .2s ease}
html body .elementor-widget-icon-list:not(.ue-checks) .elementor-icon-list-item > a:hover .elementor-icon-list-text{color:#0F52BA !important}

/* ---- Phone / email links inside Text Editor widgets (Contact details rows, body copy): Sapphire on hover like the reference.
        The "Elevator down?" panel uses the light blue from the reference instead. ---- */
html body .elementor-widget-text-editor a[href^="tel:"],
html body .elementor-widget-text-editor a[href^="mailto:"]{transition:color .2s ease}
html body .elementor-widget-text-editor a[href^="tel:"]:hover,
html body .elementor-widget-text-editor a[href^="mailto:"]:hover{color:#0F52BA !important}
html body #emergency a[href^="tel:"]:hover{color:#9cb8ea !important}

/* ---- Form footnote "Elevator emergency? Call (708) 656-5512": the reference shows the number as a default Sapphire, underlined link
        (hover = darker Sapphire). The site's link styles had made it plain black. ---- */
html body .elementor-field-type-html a[href^="tel:"]{color:#0F52BA !important;text-decoration:underline !important;transition:color .2s ease}
html body .elementor-field-type-html a[href^="tel:"]:hover{color:#0B3F8F !important}

/* Inline body-copy links (bold + blue underline) hover */
html body .elementor-widget-text-editor a[style*="text-decoration-color"]{transition:color .2s ease,text-decoration-color .2s ease}
html body .elementor-widget-text-editor a[style*="text-decoration-color"]:hover{color:#0F52BA !important;text-decoration-color:#0F52BA !important}

/* H1 inside a Text Editor (eyebrow used as the page H1): look identical to the eyebrow paragraph */
html body .elementor-widget-text-editor h1{font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;color:inherit !important;margin:0 !important;padding:0 !important}

/* Desktop menu (ElementsKit) to match the reference header */
@media(min-width:1025px){
html body .ue-desktop-nav .elementskit-navbar-nav > li > a{color:#111 !important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;font-size:15px !important;font-weight:700 !important;letter-spacing:.01em;padding:12px 0 !important;background:none !important;transition:color .2s ease}
html body .ue-desktop-nav .elementskit-navbar-nav > li:hover > a,
html body .ue-desktop-nav .elementskit-navbar-nav > li > a:hover,
html body .ue-desktop-nav .elementskit-navbar-nav > li > a:focus{color:#0F52BA !important;background:none !important}
html body .ue-desktop-nav .elementskit-navbar-nav > li.current-menu-item > a{color:#111 !important}
html body .ue-desktop-nav .elementskit-navbar-nav > li{margin:0 0 0 clamp(24px,2.4vw,36px) !important}
html body .ue-desktop-nav .elementskit-navbar-nav > li:first-child{margin-left:0 !important}
html body .ue-desktop-nav .elementskit-navbar-nav > li > .elementskit-submenu-panel{left:-28px !important;top:83px !important;margin:0 !important}
html body .ue-desktop-nav .elementskit-navbar-nav > li > .elementskit-submenu-panel::before{content:"";position:absolute;left:-1px;right:-1px;top:-8px;height:8px}
/* dropdown panel */
html body .ue-desktop-nav .elementskit-navbar-nav .elementskit-submenu-panel{background:#fff !important;border:1px solid #e3e3e0 !important;box-shadow:0 4px 16px rgba(0,0,0,.08) !important;width:300px !important;min-width:300px !important;padding:14px 28px 18px !important;border-radius:0 !important;margin-top:0 !important}
html body .ue-desktop-nav .elementskit-navbar-nav .elementskit-submenu-panel > li > a{display:block;color:#111 !important;font-size:15px !important;font-weight:600 !important;padding:9px 0 !important;border-bottom:1px solid #efefec !important;background:none !important;transition:color .2s ease}
html body .ue-desktop-nav .elementskit-navbar-nav .elementskit-submenu-panel > li:last-child > a{border-bottom:0 !important}
html body .ue-desktop-nav .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover,
html body .ue-desktop-nav .elementskit-navbar-nav .elementskit-submenu-panel > li:hover > a{color:#0F52BA !important;background:none !important}
}