/* ==========================================================================
   Arock Construction — homepage visual enhancements

   Loaded last in <head> so it wins on cascade order. Where an Elementor page
   rule has to be beaten, the selector deliberately mirrors that rule's
   specificity rather than reaching for !important.
   ========================================================================== */

:root {
	/* Amber sampled straight out of assets/img/logo.png (#FFB214). */
	--arock-accent: #FFB214;
	--arock-accent-strong: #D98D00; /* darker cut, for accent text on white */
	--arock-ink: #0C0C0C;
	--arock-hairline: rgba(0, 0, 0, 0.09);
	--arock-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* --------------------------------------------------------------------------
   1. Reading progress + back-to-top
   Both elements are injected by the inline script at the bottom of index.html.
   -------------------------------------------------------------------------- */

.arock-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 99999;
	pointer-events: none;
	background: transparent;
}

.arock-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--arock-accent-strong), var(--arock-accent));
	box-shadow: 0 0 10px rgba(255, 178, 20, 0.5);
}

.arock-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 9998;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: var(--arock-ink);
	background-color: var(--arock-accent);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .35s, transform .35s var(--arock-ease), visibility .35s, background-color .3s;
}

.arock-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.arock-top:hover {
	background-color: #ffffff;
	transform: translateY(-3px);
}


/* --------------------------------------------------------------------------
   2. Header / navigation — Silky Smooth Scroll & Transition
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1100 !important;
	background-color: transparent !important;
	border-bottom: 1px solid transparent !important;
	box-shadow: none !important;
	transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            -webkit-backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header .header-wrap {
	background: transparent !important;
	transition: line-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header .header-wrap:before,
.site-header .header-wrap:after,
.header-wrap:before,
.header-wrap:after {
	display: none !important;
	opacity: 0 !important;
	content: none !important;
}

.is-header-float .site-header ~ .elementor,
.is-header-float .site-header + .site-main,
.site-header ~ .elementor,
.site-header + .site-main,
.elementor,
.site-main {
	margin-top: 0 !important;
}

/* Logo Cross-fade */
.site-branding-center .site-title {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.site-branding-center .site-title a,
.site-branding-center .site-title a.site-logo-link {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 32px !important;
	min-width: 120px !important;
	text-decoration: none !important;
}

.site-branding-center img.logo-colored {
	display: inline-block !important;
	max-height: 30px !important;
	width: auto !important;
	opacity: 0 !important;
	transform: scale(1) !important;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-branding-center img.logo-negative,
.site-branding-center img.logo-white {
	display: inline-block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(1) !important;
	max-height: 30px !important;
	width: auto !important;
	opacity: 1 !important;
	pointer-events: none !important;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Top State Nav Menu Links */
.site-header .nav-menu > ul > li > a {
	color: #ffffff !important;
	transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

.site-header .search-toggle {
	color: #ffffff !important;
	transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

.site-header .menu-toggle .lines,
.site-header .menu-toggle .lines:before,
.site-header .menu-toggle .lines:after {
	background-color: #ffffff !important;
	transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease !important;
}

/* Active Nav Item - Black Box with White Text */
.site-header .nav-menu > ul > li.current-menu-item > a {
	color: #ffffff !important;
}

.site-header .nav-menu li.current-menu-item > a .link-text:before {
	background-color: #0a0101 !important;
	border-color: #0a0101 !important;
	opacity: 1 !important;
}

.site-header .nav-menu > ul > li.current-menu-item > a::after,
.nav-menu > ul > li.current-menu-item > a::after {
	display: none !important;
}

/* Underline hover effect for non-active links */
@media (min-width: 1025px) {
	.nav-menu > ul > li > a .link-text {
		position: relative;
	}

	.nav-menu > ul > li > a .link-text::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -5px;
		height: 2px;
		background-color: var(--arock-accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .35s var(--arock-ease);
	}

	.nav-menu > ul > li:not(.current-menu-item):hover > a .link-text::after {
		transform: scaleX(1);
	}
}

/* ==========================================================================
   SCROLLED STATE — Crisp White Header, Dark Text, Gold Logo
   ========================================================================== */
.site-header.is-scrolled,
.site-header.is-sticky-scrolled {
	background-color: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(16px) saturate(1.2) !important;
	-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Scrolled: Colored logo crossfades in, white logo crossfades out */
.site-header.is-scrolled .site-branding-center img.logo-colored,
.site-header.is-sticky-scrolled .site-branding-center img.logo-colored {
	opacity: 1 !important;
}

.site-header.is-scrolled .site-branding-center img.logo-negative,
.site-header.is-scrolled .site-branding-center img.logo-white,
.site-header.is-sticky-scrolled .site-branding-center img.logo-negative,
.site-header.is-sticky-scrolled .site-branding-center img.logo-white {
	opacity: 0 !important;
}

/* Scrolled: Navigation text turns sleek dark */
.site-header.is-scrolled .nav-menu > ul > li:not(.current-menu-item) > a,
.site-header.is-sticky-scrolled .nav-menu > ul > li:not(.current-menu-item) > a {
	color: #0a0a0a !important;
}

.site-header.is-scrolled .nav-menu > ul > li:not(.current-menu-item) > a:hover,
.site-header.is-sticky-scrolled .nav-menu > ul > li:not(.current-menu-item) > a:hover {
	color: var(--arock-accent-strong, #D98D00) !important;
}

.site-header.is-scrolled .search-toggle,
.site-header.is-sticky-scrolled .search-toggle {
	color: #0a0a0a !important;
}

.site-header.is-scrolled .menu-toggle .lines,
.site-header.is-scrolled .menu-toggle .lines:before,
.site-header.is-scrolled .menu-toggle .lines:after,
.site-header.is-sticky-scrolled .menu-toggle .lines,
.site-header.is-sticky-scrolled .menu-toggle .lines:before,
.site-header.is-sticky-scrolled .menu-toggle .lines:after {
	background-color: #0a0a0a !important;
}

/* Active Nav Item stays prominent black pill with white text */
.site-header.is-scrolled .nav-menu > ul > li.current-menu-item > a,
.site-header.is-sticky-scrolled .nav-menu > ul > li.current-menu-item > a {
	color: #ffffff !important;
}

/* Scrolled search field input */
.site-header.is-scrolled .search-box #search-field,
.site-header.is-sticky-scrolled .search-box #search-field {
	color: #0a0a0a !important;
}

.site-header.is-scrolled .search-box label span,
.site-header.is-sticky-scrolled .search-box label span {
	color: #0a0a0a !important;
}

/* ==========================================================================
   Mobile Menu Open State
   ========================================================================== */
html.is-menu-toggled-on .site-header,
.site-header.is-active {
	background-color: #0a0a0a !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

html.is-menu-toggled-on .site-header .nav-menu > ul > li > a,
.site-header.is-active .nav-menu > ul > li > a {
	color: #ffffff !important;
}

html.is-menu-toggled-on .site-header .site-branding-center img.logo-colored,
.site-header.is-active .site-branding-center img.logo-colored {
	opacity: 0 !important;
}

html.is-menu-toggled-on .site-header .site-branding-center img.logo-negative,
html.is-menu-toggled-on .site-header .site-branding-center img.logo-white,
.site-header.is-active .site-branding-center img.logo-negative,
.site-header.is-active .site-branding-center img.logo-white {
	opacity: 1 !important;
}

html.is-menu-toggled-on .site-header .search-toggle,
.site-header.is-active .search-toggle {
	color: #ffffff !important;
}

html.is-menu-toggled-on .site-header .menu-toggle .lines,
html.is-menu-toggled-on .site-header .menu-toggle .lines:before,
html.is-menu-toggled-on .site-header .menu-toggle .lines:after,
.site-header.is-active .menu-toggle .lines,
.site-header.is-active .menu-toggle .lines:before,
.site-header.is-active .menu-toggle .lines:after {
	background-color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   3. Hero slider
   -------------------------------------------------------------------------- */

/* Cinematic scrim in place of the flat wash: keeps the footage bright on the
   right while the headline sits on real contrast at bottom-left. */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-slideshow .bdt-overlay-default {
	background-color: transparent;
	background-image:
		linear-gradient(100deg, rgba(6, 6, 6, 0.74) 0%, rgba(6, 6, 6, 0.38) 46%, rgba(6, 6, 6, 0.10) 100%),
		linear-gradient(to top, rgba(6, 6, 6, 0.60) 0%, rgba(6, 6, 6, 0) 58%);
}

/* Slow push-in on the slide footage. 24s per cycle is below the 12s slide
   interval doubled, so no slide ever sits on a static frame. */
#bdt-733b2ef5 .bdt-ps-slide-video video {
	animation: arock-kenburns 24s ease-in-out infinite alternate;
}

@keyframes arock-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* The headline is centred inside its block, so the rule centres with it. */
#bdt-733b2ef5 .bdt-prime-slider-desc .bdt-main-title::before {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 0 auto 26px;
	background-color: var(--arock-accent);
}

#bdt-733b2ef5 .bdt-prime-slider-desc .bdt-title-tag {
	letter-spacing: -0.02em;
	text-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* Accent rule across the white excerpt panel that anchors the hero. */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider-skin-slide .bdt-slide-featured {
	border-top: 2px solid var(--arock-accent);
}

/* The theme's own translucent slab is redundant now that the overlay carries
   a gradient, and its hard edge shows against the brighter right side. */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider-skin-slide .bdt-slide-shape {
	background: transparent;
}

/* "Details" becomes a filled pill instead of bare text. The skin makes the
   button a stretched flex child, so it needs centring on the cross axis. */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-btn {
	display: inline-flex;
	align-items: center;
	align-self: center;
	padding: 12px 26px;
	border-radius: 999px;
	color: var(--arock-ink);
	background-color: var(--arock-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color .35s, color .35s, transform .35s var(--arock-ease), box-shadow .35s;
}

.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-btn:hover {
	background-color: var(--arock-ink);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* The skin sets this to inline-grid, which would drop the arrow onto its own
   row. */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-btn .bdt-prime-slider-button-text {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-btn .bdt-prime-slider-button-text::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
	transition: transform .35s var(--arock-ease);
}

.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-btn:hover .bdt-prime-slider-button-text::after {
	transform: translateX(5px);
}


/* Below 768px the slider swaps the white panel for text laid straight over the
   footage, but the widget's excerpt colour (#080808) follows it there and goes
   near-invisible on bright frames. */
@media (max-width: 767px) {
	.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-slideshow .bdt-overlay-default {
		background-image: linear-gradient(to top, rgba(6, 6, 6, 0.80) 0%, rgba(6, 6, 6, 0.46) 55%, rgba(6, 6, 6, 0.28) 100%);
	}

	.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-slide-text-mobile .bdt-slider-excerpt {
		color: #ffffff;
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	}

}


/* --------------------------------------------------------------------------
   4. Display headings — amber highlight under the closing word
   A background stroke rather than coloured text, so contrast survives on the
   light sections where these headings sit.
   -------------------------------------------------------------------------- */

.qodef-qi-animated-text .qodef-m-title .qodef-e-word-holder:last-child {
	background-image: linear-gradient(var(--arock-accent), var(--arock-accent));
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.05em;
}


/* --------------------------------------------------------------------------
   5. "What We Do" service lists
   Scoped to the three homepage columns so footer/contact icon lists are
   untouched.
   -------------------------------------------------------------------------- */

.elementor-element-5d72f86 .elementor-icon-list-item,
.elementor-element-b63746b .elementor-icon-list-item,
.elementor-element-a112358 .elementor-icon-list-item {
	border-top: 1px solid var(--arock-hairline);
	transition: background-color .35s;
}

.elementor-element-5d72f86 .elementor-icon-list-item:last-child,
.elementor-element-b63746b .elementor-icon-list-item:last-child,
.elementor-element-a112358 .elementor-icon-list-item:last-child {
	border-bottom: 1px solid var(--arock-hairline);
}

.elementor-element-5d72f86 .elementor-icon-list-item > a,
.elementor-element-b63746b .elementor-icon-list-item > a,
.elementor-element-a112358 .elementor-icon-list-item > a {
	transition: color .3s, transform .35s var(--arock-ease);
}

.elementor-element-5d72f86 .elementor-icon-list-item:hover > a,
.elementor-element-b63746b .elementor-icon-list-item:hover > a,
.elementor-element-a112358 .elementor-icon-list-item:hover > a {
	color: var(--arock-accent-strong);
	transform: translateX(6px);
}

.elementor-element-5d72f86 .elementor-icon-list-icon i,
.elementor-element-b63746b .elementor-icon-list-icon i,
.elementor-element-a112358 .elementor-icon-list-icon i {
	display: inline-block;
	transition: transform .45s var(--arock-ease), color .3s;
}

.elementor-element-5d72f86 .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.elementor-element-b63746b .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.elementor-element-a112358 .elementor-icon-list-item:hover .elementor-icon-list-icon i {
	color: var(--arock-accent);
	transform: rotate(90deg);
}


/* --------------------------------------------------------------------------
   6. Stat counters
   -------------------------------------------------------------------------- */

/* Outline digits pick up the brand amber (matches the plugin's own 4-class
   specificity for the stroke colour). */
.qodef-qi-counter.qodef-layout--simple.qodef-digit-stroke-effect .qodef-m-digit {
	-webkit-text-stroke-color: var(--arock-accent);
	-webkit-text-stroke-width: 1px;
}

.qodef-qi-counter {
	transition: transform .45s var(--arock-ease);
}

.qodef-qi-counter:hover {
	transform: translateY(-6px);
}

.qodef-qi-counter .qodef-m-separator .qodef-m-line {
	background-color: var(--arock-accent);
	border-color: var(--arock-accent);
}


/* --------------------------------------------------------------------------
   7. Marquee band — alternate outlined / solid amber
   The plugin sets `color: transparent !important` on every item, so the solid
   fill has to be important too.
   -------------------------------------------------------------------------- */

.qodef-qi-text-marquee.qodef-text-stroke-effect .qodef-m-text-item {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.90);
	text-shadow: 0 0 18px rgba(0,0,0,0.4);
}

.qodef-qi-text-marquee.qodef-text-stroke-effect .qodef-m-text-item:nth-child(2n) {
	color: var(--arock-accent) !important;
	-webkit-text-stroke-width: 0;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}


/* --------------------------------------------------------------------------
   8. Numbered service cards
   -------------------------------------------------------------------------- */

.qodef-qi-process .qodef-process-item .qodef-e-inner {
	height: 100%;
	padding: 40px 34px 38px;
	border: 1px solid var(--arock-hairline);
	border-radius: 4px;
	background-color: #fbfaf8;
	transition: transform .45s var(--arock-ease), box-shadow .45s, border-color .45s, background-color .45s;
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-inner {
	transform: translateY(-6px);
	border-color: var(--arock-accent);
	background-color: #ffffff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
}

/* The skin's connector runs between icons and now crosses the card edges into
   the gutter. The cards group the steps on their own. */
.qodef-qi-process .qodef-e-line {
	display: none;
}

.qodef-qi-process .qodef-e-number {
	color: var(--arock-accent);
	font-weight: 700;
}

.qodef-qi-process .qodef-e-icon i {
	color: var(--arock-accent-strong);
	transition: transform .45s var(--arock-ease);
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-icon i {
	transform: translateY(-4px) scale(1.1);
}

.qodef-qi-process .qodef-e-title {
	transition: color .3s;
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-title {
	color: var(--arock-accent-strong);
}


/* --------------------------------------------------------------------------
   9. Gallery + project imagery
   -------------------------------------------------------------------------- */

a.qodef-popup-item {
	display: block;
	overflow: hidden;
	border-radius: 3px;
}

a.qodef-popup-item img {
	display: block;
	transition: transform .7s var(--arock-ease), filter .5s;
}

a.qodef-popup-item:hover img {
	transform: scale(1.05);
	filter: saturate(1.05);
}

/* Project slideshow: amber leading word, amber title on hover. */
.bdt-ps-zinest-container .bdt-title-tag .frist-word {
	color: var(--arock-accent);
}

.bdt-ps-zinest-container .bdt-title-tag a {
	transition: color .35s;
}

.bdt-ps-zinest-container .bdt-title-tag a:hover {
	color: var(--arock-accent);
}


/* --------------------------------------------------------------------------
   10. News cards
   The slider already ships a zoom-out image hover, so the card itself carries
   the lift instead.
   -------------------------------------------------------------------------- */

.qodef-addons-blog-slider .qodef-blog-item .qodef-e-inner {
	transition: transform .45s var(--arock-ease);
}

.qodef-addons-blog-slider .qodef-blog-item:hover .qodef-e-inner {
	transform: translateY(-6px);
}

.qodef-addons-blog-slider .qodef-blog-item .qodef-e-media-image {
	overflow: hidden;
	border-radius: 3px;
}

.qodef-addons-blog-slider .qodef-e-title a:hover {
	color: var(--arock-accent-strong);
}


/* --------------------------------------------------------------------------
   11. Textual buttons ("All Services", "Latest News", …)
   -------------------------------------------------------------------------- */

.qodef-qi-button.qodef-layout--textual {
	transition: color .3s;
}

.qodef-qi-button.qodef-layout--textual:hover {
	color: var(--arock-accent-strong);
}

.qodef-qi-button.qodef-text-underline::after {
	background-color: var(--arock-accent);
}


/* --------------------------------------------------------------------------
   12. Primary CTA — "Let's Talk"
   -------------------------------------------------------------------------- */

.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button {
	color: var(--arock-ink);
	background-color: var(--arock-accent);
	border-color: var(--arock-accent);
	transition: background-color .35s, border-color .35s, color .35s, transform .35s var(--arock-ease), box-shadow .35s;
}

.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button:hover {
	color: var(--arock-ink);
	background-color: #ffffff;
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(255, 178, 20, 0.22);
}

/* The arrow ships with an inline fill="#ffffff", invisible on amber. */
.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button svg polygon {
	fill: var(--arock-ink);
}


/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#bdt-733b2ef5 .bdt-ps-slide-video video {
		animation: none;
	}

	.arock-top,
	.qodef-qi-counter,
	.qodef-qi-process .qodef-process-item .qodef-e-inner,
	.qodef-addons-blog-slider .qodef-blog-item .qodef-e-inner,
	a.qodef-popup-item img {
		transition: none;
	}

	.qodef-qi-counter:hover,
	.qodef-qi-process .qodef-process-item:hover .qodef-e-inner,
	.qodef-addons-blog-slider .qodef-blog-item:hover .qodef-e-inner,
	a.qodef-popup-item:hover img {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   14. Type scale

   The theme ships display type at demo-poster sizes — 116px section headings,
   136px counters, a 96px hero. At real reading distances that shouts rather
   than reads as premium, and it forces the section intros to fight back at
   32px. This pulls the whole ladder down and widens the gap between display
   and supporting text, which is where the restraint comes from.

   Selectors carry `.elementor.elementor-11` (the wrapper holds both classes)
   so they match the page CSS's specificity without going generic on every id.
   -------------------------------------------------------------------------- */

/* Hero headline: standardized clamp sizing */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
	-webkit-text-stroke-width: 0;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}


/* --------------------------------------------------------------------------
   8. Numbered service cards
   -------------------------------------------------------------------------- */

.qodef-qi-process .qodef-process-item .qodef-e-inner {
	height: 100%;
	padding: 40px 34px 38px;
	border: 1px solid var(--arock-hairline);
	border-radius: 4px;
	background-color: #fbfaf8;
	transition: transform .45s var(--arock-ease), box-shadow .45s, border-color .45s, background-color .45s;
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-inner {
	transform: translateY(-6px);
	border-color: var(--arock-accent);
	background-color: #ffffff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
}

/* The skin's connector runs between icons and now crosses the card edges into
   the gutter. The cards group the steps on their own. */
.qodef-qi-process .qodef-e-line {
	display: none;
}

.qodef-qi-process .qodef-e-number {
	color: var(--arock-accent);
	font-weight: 700;
}

.qodef-qi-process .qodef-e-icon i {
	color: var(--arock-accent-strong);
	transition: transform .45s var(--arock-ease);
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-icon i {
	transform: translateY(-4px) scale(1.1);
}

.qodef-qi-process .qodef-e-title {
	transition: color .3s;
}

.qodef-qi-process .qodef-process-item:hover .qodef-e-title {
	color: var(--arock-accent-strong);
}


/* --------------------------------------------------------------------------
   9. Gallery + project imagery
   -------------------------------------------------------------------------- */

a.qodef-popup-item {
	display: block;
	overflow: hidden;
	border-radius: 3px;
}

a.qodef-popup-item img {
	display: block;
	transition: transform .7s var(--arock-ease), filter .5s;
}

a.qodef-popup-item:hover img {
	transform: scale(1.05);
	filter: saturate(1.05);
}

/* Project slideshow: amber leading word, amber title on hover. */
.bdt-ps-zinest-container .bdt-title-tag .frist-word {
	color: var(--arock-accent);
}

.bdt-ps-zinest-container .bdt-title-tag a {
	transition: color .35s;
}

.bdt-ps-zinest-container .bdt-title-tag a:hover {
	color: var(--arock-accent);
}


/* --------------------------------------------------------------------------
   10. News cards
   The slider already ships a zoom-out image hover, so the card itself carries
   the lift instead.
   -------------------------------------------------------------------------- */

.qodef-addons-blog-slider .qodef-blog-item .qodef-e-inner {
	transition: transform .45s var(--arock-ease);
}

.qodef-addons-blog-slider .qodef-blog-item:hover .qodef-e-inner {
	transform: translateY(-6px);
}

.qodef-addons-blog-slider .qodef-blog-item .qodef-e-media-image {
	overflow: hidden;
	border-radius: 3px;
}

.qodef-addons-blog-slider .qodef-e-title a:hover {
	color: var(--arock-accent-strong);
}


/* --------------------------------------------------------------------------
   11. Textual buttons ("All Services", "Latest News", …)
   -------------------------------------------------------------------------- */

.qodef-qi-button.qodef-layout--textual {
	transition: color .3s;
}

.qodef-qi-button.qodef-layout--textual:hover {
	color: var(--arock-accent-strong);
}

.qodef-qi-button.qodef-text-underline::after {
	background-color: var(--arock-accent);
}


/* --------------------------------------------------------------------------
   12. Primary CTA — "Let's Talk"
   -------------------------------------------------------------------------- */

.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button {
	color: var(--arock-ink);
	background-color: var(--arock-accent);
	border-color: var(--arock-accent);
	transition: background-color .35s, border-color .35s, color .35s, transform .35s var(--arock-ease), box-shadow .35s;
}

.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button:hover {
	color: var(--arock-ink);
	background-color: #ffffff;
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(255, 178, 20, 0.22);
}

/* The arrow ships with an inline fill="#ffffff", invisible on amber. */
.elementor-11 .elementor-element.elementor-element-d044966 .qodef-qi-button svg polygon {
	fill: var(--arock-ink);
}


/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#bdt-733b2ef5 .bdt-ps-slide-video video {
		animation: none;
	}

	.arock-top,
	.qodef-qi-counter,
	.qodef-qi-process .qodef-process-item .qodef-e-inner,
	.qodef-addons-blog-slider .qodef-blog-item .qodef-e-inner,
	a.qodef-popup-item img {
		transition: none;
	}

	.qodef-qi-counter:hover,
	.qodef-qi-process .qodef-process-item:hover .qodef-e-inner,
	.qodef-addons-blog-slider .qodef-blog-item:hover .qodef-e-inner,
	a.qodef-popup-item:hover img {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   14. Type scale

   The theme ships display type at demo-poster sizes — 116px section headings,
   136px counters, a 96px hero. At real reading distances that shouts rather
   than reads as premium, and it forces the section intros to fight back at
   32px. This pulls the whole ladder down and widens the gap between display
   and supporting text, which is where the restraint comes from.

   Selectors carry `.elementor.elementor-11` (the wrapper holds both classes)
   so they match the page CSS's specificity without going generic on every id.
   -------------------------------------------------------------------------- */

/* Hero headline: standardized clamp sizing */
.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
	font-size: clamp(44px, 4.8vw, 56px);
	font-weight: 500;
	line-height: 1.08em;
}

/* Section display headings ("What We Do", "Discover Our Story"): standardized scale. */
.elementor.elementor-11 .elementor-element .qodef-qi-animated-text .qodef-m-title {
	font-size: clamp(40px, 4.2vw, 52px);
	font-weight: 600;
	line-height: 1.08em;
	letter-spacing: -0.02em;
}

/* Section intros, all normalised to supporting copy: 18px. */
.elementor.elementor-11 .elementor-element h2.elementor-heading-title {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6em;
}

/* Counters */
.elementor.elementor-11 .elementor-element .qodef-qi-counter .qodef-m-digit {
	font-size: clamp(42px, 4.2vw, 54px);
}

/* Marquee band */
.elementor-11 .elementor-element.elementor-element-bab2a45 .qodef-m-text-item {
	font-size: clamp(36px, 3.5vw, 46px);
}

/* Project slideshow titles */
.elementor-11 .elementor-element.elementor-element-0172485 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
	font-size: clamp(24px, 2.8vw, 32px);
	font-weight: 500;
}

/* Closing CTA */
.elementor-11 .elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
	font-size: clamp(40px, 4.4vw, 52px);
	font-weight: 500;
}

.elementor-11 .elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
	font-size: clamp(17px, 1.8vw, 20px);
	font-weight: 400;
}

/* Card headings. */
.elementor-11 .elementor-element.elementor-element-4d5a2607 .qodef-qi-process .qodef-e-title {
	font-size: 17px;
	line-height: 1.4em;
}

@media (max-width: 1024px) {
	.elementor-11 .elementor-element.elementor-element-bab2a45 .qodef-m-text-item {
		font-size: 36px;
	}

	.elementor-11 .elementor-element.elementor-element-0172485 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
		font-size: 26px;
	}

	.elementor-11 .elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 36px;
	}

	.elementor-11 .elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
		font-size: 16.5px;
	}
}

@media (max-width: 767px) {
	.elementor-11 .elementor-element.elementor-element-733b2ef5 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
		font-size: 30px;
	}

	.elementor.elementor-11 .elementor-element .qodef-qi-animated-text .qodef-m-title {
		font-size: 28px;
	}

	.elementor.elementor-11 .elementor-element h2.elementor-heading-title {
		font-size: 15px;
	}

	.elementor.elementor-11 .elementor-element .qodef-qi-counter .qodef-m-digit {
		font-size: 32px;
	}

	.elementor-11 .elementor-element.elementor-element-bab2a45 .qodef-m-text-item {
		font-size: 28px;
	}

	.elementor-11 .elementor-element.elementor-element-0172485 .bdt-prime-slider .bdt-prime-slider-desc .bdt-main-title .bdt-title-tag {
		font-size: 22px;
	}

	.elementor-11 .elementor-element.elementor-element-7096d60 .qodef-qi-typeout-text .qodef-m-text {
		font-size: 28px;
	}

	.elementor-11 .elementor-element.elementor-element-b403adb .qodef-qi-typeout-text .qodef-m-text {
		font-size: 15px;
	}
}

/* --------------------------------------------------------------------------
   15. "Discover Our Story" tabs — History / Mission / Vision
   -------------------------------------------------------------------------- */

.elementor-11 .elementor-element.elementor-element-5326bc5,
.elementor-element-5326bc5 {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Nav sits on a hairline so the panel below reads as a distinct surface. */
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 28px !important;
	border-bottom: 1px solid var(--arock-hairline, rgba(0, 0, 0, 0.12)) !important;
	margin: 0 0 16px 0 !important;
	padding: 0 0 4px 0 !important;
	list-style: none !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation::-webkit-scrollbar,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation::-webkit-scrollbar {
	display: none !important;
}

/* Tab labels: clean styling */
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li {
	width: auto !important;
	min-width: unset !important;
	max-width: max-content !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	position: relative !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li .qodef-tab-title,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li h3,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li .qodef-tab-title,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li h3 {
	width: auto !important;
	min-width: unset !important;
	max-width: max-content !important;
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a {
	width: auto !important;
	min-width: unset !important;
	max-width: max-content !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	color: #78716C !important;
	padding: 6px 2px 10px 2px !important;
	display: inline-block !important;
	position: relative !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
	-webkit-tap-highlight-color: transparent !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.ui-tabs-active a,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.active a,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a.active,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.ui-tabs-active a,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.active a,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a.active {
	color: #0A0A08 !important;
	font-weight: 700 !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a:after,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a:after {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -5px !important;
	height: 2.5px !important;
	background-color: var(--arock-accent, #FFB214) !important;
	border-radius: 2px !important;
	transform: scaleX(0) !important;
	transform-origin: left center !important;
	transition: transform 0.25s ease, background-color 0.25s ease !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.ui-tabs-active a:after,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.active a:after,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a.active:after,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.ui-tabs-active a:after,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li.active a:after,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a.active:after {
	transform: scaleX(1) !important;
}

/* Panel: highlighted text with vertical yellow bar */
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content {
	font-size: 16px;
	line-height: 1.75;
	color: #4a4a4a;
	max-width: 36em;
	padding-top: 18px;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content.qodef-tab-active,
.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content.active,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content.qodef-tab-active,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content.active {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	animation: arock-tab-in .35s var(--arock-ease, ease-out) both !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p {
	position: relative !important;
	padding-left: 20px !important;
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.75 !important;
	color: var(--arock-ink, #262626) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p::before,
.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 4px !important;
	bottom: 4px !important;
	width: 3.5px !important;
	background-color: var(--arock-accent, #FFB214) !important;
	border-radius: 2px !important;
}

@keyframes arock-tab-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Vertically center both columns so image slider and tab content align cleanly */
@media (min-width: 1025px) {
	.elementor-11 .elementor-element.elementor-element-e46f4b3 > .elementor-element-populated,
	.elementor-11 .elementor-element.elementor-element-24de773 > .elementor-element-populated {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 420px;
	}
}

@media (max-width: 767px) {
	.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation,
	.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation {
		gap: 20px !important;
		margin: 0 0 14px 0 !important;
	}

	.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a,
	.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-navigation li a {
		font-size: 13.5px !important;
		letter-spacing: 0.1em !important;
	}

	.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content,
	.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content {
		font-size: 15px !important;
		line-height: 1.7 !important;
		padding-top: 14px !important;
	}

	.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p,
	.qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content p {
		font-size: 15px !important;
		padding-left: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-11 .elementor-element.elementor-element-5326bc5 .qodef-qi-tabs-horizontal .qodef-tabs-horizontal-content {
		animation: none !important;
	}
}

/* =====================================================
   16. Why Homeowners Choose Arock — two-column benefit section
   ===================================================== */

/* Hide the old heading section — heading now lives in the two-column layout */
section.elementor-element-fbc33a6 {
	display: none !important;
}

/* Content section: full dark background */
section.elementor-element-b29e53e {
	background: #0d0c09 !important;
	padding: 96px 72px 0 !important;
	margin-bottom: 0 !important;
	position: relative;
	overflow: hidden;
}

/* Amber atmospheric glow — top right */
section.elementor-element-b29e53e::before {
	content: '';
	position: absolute;
	top: -120px; right: -120px;
	width: 620px; height: 620px;
	background: radial-gradient(ellipse, rgba(255,178,20,.055) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}
section.elementor-element-b29e53e .elementor-container {
	position: relative;
	z-index: 1;
	max-width: 100% !important;
}

/* ── Two-column wrapper ─────────────────────── */
.arock-choose-wrap {
	display: grid;
	grid-template-columns: 1fr 1.55fr;
	gap: 80px;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
}

/* ── LEFT: heading block ────────────────────── */
.arock-choose-left {
	position: sticky;
	top: 40px;
	padding-bottom: 96px;
	opacity: 0;
	animation: arockChooseUp .7s cubic-bezier(.22,.61,.36,1) .05s forwards;
}

@keyframes arockChooseUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Logo lockup */
.arock-choose-lockup {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}
.arock-choose-logomark {
	width: 30px; height: 30px;
	border-radius: 6px;
	border: 1.5px solid #FFB214;
	display: flex; align-items: center; justify-content: center;
}
.arock-choose-logomark svg { width: 18px; height: 18px; }
.arock-choose-brand {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72) !important;
}

/* Eyebrow */
.arock-choose-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #FFB214 !important;
	margin-bottom: 14px;
}

/* Title */
.arock-choose-title {
	font-family: var(--arock-display-font), "Urbanist", sans-serif !important;
	font-size: 42px !important;
	font-weight: 600 !important;
	line-height: 1.08 !important;
	letter-spacing: -.02em !important;
	color: #ffffff !important;
	margin-bottom: 0 !important;
	text-wrap: balance;
}

/* Amber rule */
.arock-choose-rule {
	width: 52px !important;
	height: 3px !important;
	background: #FFB214 !important;
	border-radius: 2px !important;
	margin: 20px 0 20px !important;
}

/* Subtitle */
.arock-choose-sub {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: rgba(255, 255, 255, .75) !important;
	margin-bottom: 36px !important;
}

/* Stats row */
.arock-choose-stats {
	display: flex;
	gap: 28px;
	margin-bottom: 36px;
}
.arock-stat-num {
	display: block;
	font-size: 26px; font-weight: 800;
	color: #FFB214; letter-spacing: -.02em;
	line-height: 1; margin-bottom: 4px;
}
.arock-stat-label {
	font-size: 11px; color: rgba(255,255,255,.48);
	letter-spacing: .06em; text-transform: uppercase;
}

/* CTA button */
.arock-choose-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 700;
	color: #FFB214; text-decoration: none !important;
	border: 1.5px solid rgba(255,178,20,.3);
	border-radius: 4px;
	padding: 11px 22px;
	transition: background .25s, border-color .25s, gap .25s;
}
.arock-choose-cta:hover {
	background: rgba(255,178,20,.08);
	border-color: #FFB214;
	gap: 14px;
}

/* ── RIGHT: benefit grid ────────────────────── */
.arock-choose-right { position: relative; }

.arock-choose-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(255,178,20,.1);
	border: 1px solid rgba(255,178,20,.1);
	border-radius: 6px;
	overflow: hidden;
}

/* Benefit card */
.arock-benefit-card {
	background: #0d0c09;
	padding: 36px 30px;
	text-align: left;
	text-decoration: none !important;
	color: inherit;
	display: block;
	opacity: 0;
	animation: arockChooseUp .65s cubic-bezier(.22,.61,.36,1) both;
	transition: background .3s;
}
.arock-benefit-card:hover { background: rgba(255,178,20,.04); }

/* Staggered delays for cards */
.arock-benefit-card:nth-child(1) { animation-delay: .12s; }
.arock-benefit-card:nth-child(2) { animation-delay: .18s; }
.arock-benefit-card:nth-child(3) { animation-delay: .24s; }
.arock-benefit-card:nth-child(4) { animation-delay: .30s; }
.arock-benefit-card:nth-child(5) { animation-delay: .36s; }
.arock-benefit-card:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 640px) {
	.arock-benefit-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* Benefit icon circle */
.arock-benefit-icon {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,178,20,.28);
	background: rgba(255,178,20,.07);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
	transition:
		border-color .3s,
		background .3s,
		transform .38s cubic-bezier(.34,1.56,.64,1),
		box-shadow .3s;
}
.arock-benefit-icon svg { color: rgba(255,178,20,.65); transition: color .3s; }

.arock-benefit-card:hover .arock-benefit-icon {
	border-color: #FFB214;
	background: rgba(255,178,20,.12);
	transform: scale(1.08);
	box-shadow: 0 0 22px rgba(255,178,20,.2);
}
.arock-benefit-card:hover .arock-benefit-icon svg { color: #FFB214; }

/* Card text */
.arock-benefit-card h3 {
	font-size: 14px; font-weight: 700;
	color: rgba(255,255,255,.88);
	margin-bottom: 10px; line-height: 1.3;
	transition: color .3s;
	font-family: inherit;
}
.arock-benefit-card:hover h3 { color: #FFB214; }
.arock-benefit-card p {
	font-size: 12.5px; line-height: 1.75;
	color: rgba(255,255,255,.58);
	margin: 0;
}

/* Bottom accreditation strip */
section.elementor-element-b29e53e .elementor-widget-wrap::after {
	content: 'QBCC Licensed · Master Builders QLD · Home Warranty Insurance · Fully Insured';
	display: block;
	font-size: 10.5px; letter-spacing: .09em;
	color: rgba(255,255,255,.18);
	text-align: center; text-transform: uppercase;
	max-width: 1280px; margin: 56px auto 0;
	padding: 24px 0 40px;
	border-top: 1px solid rgba(255,178,20,.1);
}

/* Tablet: single column layout */
@media (max-width: 1024px) {
	.arock-choose-wrap {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.arock-choose-left {
		position: static;
		padding-bottom: 0;
	}
	.arock-choose-title { font-size: 34px; }
	section.elementor-element-b29e53e { padding: 64px 40px 0 !important; }
}

/* Mobile: single-column cards */
@media (max-width: 640px) {
	.arock-choose-grid { grid-template-columns: 1fr; }
	.arock-choose-stats { gap: 20px; }
	.arock-choose-title { font-size: 28px; }
	section.elementor-element-b29e53e { padding: 56px 24px 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.arock-choose-left,
	.arock-benefit-card {
		animation: none;
		opacity: 1;
	}
}

/* =====================================================
   16b. Why Choose Arock — scroll-triggered animations
   ===================================================== */

/* Replace CSS-only animations with IntersectionObserver transitions.
   Elements start hidden; JS adds .arock-io-visible to the wrapper. */
.arock-choose-left {
	animation: none !important;
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity .8s cubic-bezier(.22,.61,.36,1),
		transform .8s cubic-bezier(.22,.61,.36,1);
}
.arock-benefit-card {
	animation: none !important;
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .6s cubic-bezier(.22,.61,.36,1),
		transform .6s cubic-bezier(.22,.61,.36,1),
		background .3s;
}

/* Triggered states */
.arock-choose-wrap.arock-io-visible .arock-choose-left {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .06s;
}
.arock-choose-wrap.arock-io-visible .arock-benefit-card {
	opacity: 1;
	transform: translateY(0);
}
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(1) { transition-delay: .12s; }
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(2) { transition-delay: .21s; }
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(3) { transition-delay: .30s; }
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(4) { transition-delay: .39s; }
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(5) { transition-delay: .48s; }
.arock-choose-wrap.arock-io-visible .arock-benefit-card:nth-child(6) { transition-delay: .57s; }

/* Hover lift — needs !important to beat the transition's base transform */
.arock-choose-wrap.arock-io-visible .arock-benefit-card:hover {
	transform: translateY(-5px) !important;
}

/* ── Amber rule: width grows from 0 ──────────── */
.arock-choose-rule {
	width: 0 !important;
	transition: width .9s cubic-bezier(.22,.61,.36,1) .55s;
}
.arock-choose-wrap.arock-io-visible .arock-choose-rule {
	width: 52px !important;
}

/* ── Radiating ring pulse on icons ───────────── */
.arock-benefit-icon {
	overflow: visible;
}
.arock-benefit-icon::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,178,20,.45);
	animation: arockRingRadiate 3.6s cubic-bezier(.2,.8,.4,1) infinite;
	pointer-events: none;
}
@keyframes arockRingRadiate {
	0%       { transform: scale(1);    opacity: .65; }
	80%, 100% { transform: scale(1.7); opacity: 0;   }
}
.arock-benefit-card:nth-child(1) .arock-benefit-icon::after { animation-delay: 0s;    }
.arock-benefit-card:nth-child(2) .arock-benefit-icon::after { animation-delay: .60s;  }
.arock-benefit-card:nth-child(3) .arock-benefit-icon::after { animation-delay: 1.20s; }
.arock-benefit-card:nth-child(4) .arock-benefit-icon::after { animation-delay: 1.80s; }
.arock-benefit-card:nth-child(5) .arock-benefit-icon::after { animation-delay: 2.40s; }
.arock-benefit-card:nth-child(6) .arock-benefit-icon::after { animation-delay: 3.00s; }
.arock-benefit-card:hover .arock-benefit-icon::after {
	animation-play-state: paused;
	opacity: 0;
	transition: opacity .2s;
}

/* ── Stat counter landing animation ──────────── */
@keyframes arockStatLand {
	0%   { color: #fff; transform: scale(1.18); }
	100% { color: #FFB214; transform: scale(1);  }
}
.arock-stat-num.arock-stat-done {
	animation: arockStatLand .45s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ── Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.arock-choose-left,
	.arock-benefit-card {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.arock-benefit-icon::after { animation: none; }
	.arock-choose-rule { width: 52px !important; transition: none !important; }
	.arock-stat-num.arock-stat-done { animation: none; }
}

/* ==========================================================================
   26. Lightbox & Image Popups (FsLightbox & Magnific Popup)
   ========================================================================== */

.fslightbox-container {
	background: rgba(8, 8, 8, 0.95) !important;
	backdrop-filter: blur(24px) saturate(1.2) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
	z-index: 1000000000 !important;
}

.fslightbox-source {
	max-width: calc(100vw - 160px) !important;
	max-height: calc(100vh - 150px) !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	box-shadow: 0 24px 72px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.fslightbox-container .fslightbox-nav {
	height: 80px !important;
	padding: 20px 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1000000050 !important;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
	pointer-events: none !important;
}

.fslightbox-container .fslightbox-nav > * {
	pointer-events: auto !important;
}

.fslightbox-container .fslightbox-slide-number-container {
	position: relative !important;
	height: auto !important;
	max-width: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(22, 20, 16, 0.88) !important;
	border: 1px solid rgba(255, 178, 20, 0.35) !important;
	border-radius: 30px !important;
	padding: 8px 18px !important;
	color: #FAFAF8 !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}

.fslightbox-container .fslightbox-slide-number-container span:first-child {
	color: #FFB214 !important;
	font-weight: 700 !important;
}

.fslightbox-container .fslightbox-slash {
	background: rgba(255, 255, 255, 0.35) !important;
	height: 12px !important;
	margin: 0 4px !important;
}

.fslightbox-container .fslightbox-toolbar {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	height: auto !important;
	background: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.fslightbox-container .fslightbox-toolbar-button {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	border-radius: 50% !important;
	background: rgba(22, 20, 16, 0.9) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
	color: #FFFFFF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.fslightbox-container .fslightbox-toolbar-button:hover {
	background: #FFB214 !important;
	border-color: #FFB214 !important;
	color: #0A0A08 !important;
	transform: scale(1.1) !important;
	box-shadow: 0 0 24px rgba(255, 178, 20, 0.6) !important;
}

.fslightbox-container .fslightbox-toolbar-button svg {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	stroke-width: 0.5px !important;
	transition: transform 0.25s ease !important;
}

.fslightbox-container .fslightbox-toolbar-button:hover svg {
	transform: rotate(90deg) !important;
	fill: #0A0A08 !important;
	stroke: #0A0A08 !important;
}

.fslightbox-slide-btn-container {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 1000000050 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.fslightbox-slide-btn-container-previous {
	left: 28px !important;
}

.fslightbox-slide-btn-container-next {
	right: 28px !important;
}

.fslightbox-container .fslightbox-slide-btn {
	width: 58px !important;
	height: 58px !important;
	min-width: 58px !important;
	min-height: 58px !important;
	border-radius: 50% !important;
	background: rgba(22, 20, 16, 0.9) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
	color: #FFFFFF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	cursor: pointer !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
	transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.fslightbox-container .fslightbox-slide-btn:hover {
	background: #FFB214 !important;
	border-color: #FFB214 !important;
	color: #0A0A08 !important;
	transform: scale(1.12) !important;
	box-shadow: 0 0 28px rgba(255, 178, 20, 0.65), 0 10px 36px rgba(0, 0, 0, 0.6) !important;
}

.fslightbox-container .fslightbox-slide-btn svg {
	width: 26px !important;
	height: 26px !important;
	stroke: currentColor !important;
	stroke-width: 2.5px !important;
	fill: none !important;
	display: block !important;
	transition: transform 0.25s ease, stroke 0.2s ease !important;
}

.fslightbox-container .fslightbox-slide-btn line {
	stroke: currentColor !important;
	stroke-width: 2.5px !important;
}

.fslightbox-container .fslightbox-slide-btn path {
	fill: currentColor !important;
}

.fslightbox-slide-btn-container-previous:hover .fslightbox-slide-btn svg {
	transform: translateX(-4px) !important;
	stroke: #0A0A08 !important;
}

.fslightbox-slide-btn-container-next:hover .fslightbox-slide-btn svg {
	transform: translateX(4px) !important;
	stroke: #0A0A08 !important;
}

@media (max-width: 768px) {
	.fslightbox-slide-btn-container-previous {
		left: 12px !important;
	}
	.fslightbox-slide-btn-container-next {
		right: 12px !important;
	}
	.fslightbox-container .fslightbox-slide-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	.fslightbox-container .fslightbox-slide-btn svg {
		width: 18px !important;
		height: 18px !important;
	}
	.fslightbox-source {
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 130px) !important;
	}
	.fslightbox-container .fslightbox-nav {
		height: 60px !important;
		padding: 10px 16px !important;
	}
	.fslightbox-container .fslightbox-toolbar-button {
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		min-height: 42px !important;
	}
	.fslightbox-container .fslightbox-slide-number-container {
		padding: 6px 14px !important;
		font-size: 12px !important;
	}
}

/* Non-navigational list items and dummy anchor styling */
.elementor-icon-list-item a[href="#"],
.elementor-icon-list-item a[href=""],
.elementor-icon-list-item a[href="#!"],
.elementor-icon-list-item a:not([href]) {
	cursor: default !important;
	text-decoration: none !important;
}