/* -----------------------------------------------------------
   Luxury Home Hero — full-viewport-width/height content slider
   (every slide carries its own eyebrow/heading/paragraph/2 CTAs),
   a trust-points strip, and an infinite partner-logo marquee.
   Reuses --navy/--gold brand tokens; no new colors introduced.
----------------------------------------------------------- */

.tap-luxury-hero-wrap{position:relative;}

.tap-luxury-hero{
	position:relative;
	width:100%;
	height:100vh;min-height:520px;max-height:calc(100vh - 190px);
	overflow:hidden;
	background:var(--navy-dark);
}

.tap-luxury-fslide{
	position:absolute;inset:0;
	width:100%;height:100%;
	background-image:var(--tap-bg);
	background-size:cover;background-position:center;background-repeat:no-repeat;
	opacity:0;transform:scale(1.08);
	transition:opacity 1.4s var(--ease),transform 8s linear;
	display:flex;align-items:center;justify-content:center;
}
.tap-luxury-fslide.is-active{opacity:1;transform:scale(1);z-index:1;}
.tap-luxury-fslide-overlay{
	position:absolute;inset:0;
	background:
		linear-gradient(0deg,rgba(15,22,36,.88) 0%,rgba(15,22,36,.5) 42%,rgba(15,22,36,.25) 68%,rgba(15,22,36,.45) 100%);
}

.tap-luxury-fslide-content{
	position:relative !important;z-index:1 !important;
	width:100% !important;
	max-width:780px !important;
	margin:0 auto !important;
	display:flex !important;flex-direction:column !important;align-items:center !important;
	text-align:center !important;
}
.tap-luxury-fslide-eyebrow.tap-luxury-fslide-eyebrow{
	display:inline-flex !important;align-items:center !important;
	background:rgba(var(--gold-rgb),.16) !important;color:var(--gold-light) !important;
	border:1px solid rgba(var(--gold-rgb),.35) !important;
	margin:0 0 18px !important;
}
.tap-luxury-fslide-heading.tap-luxury-fslide-heading{
	font-family:var(--font-head) !important;
	font-size:clamp(30px,4.4vw,56px) !important;line-height:1.16 !important;font-weight:700 !important;
	color:#fff !important;margin:0 0 64px !important;padding:0 !important;
	text-shadow:0 4px 24px rgba(0,0,0,.35) !important;
}
.tap-luxury-fslide-desc.tap-luxury-fslide-desc{
	font-family:var(--font-body) !important;
	font-size:clamp(15px,1.4vw,18px) !important;line-height:1.75 !important;font-weight:400 !important;
	color:rgba(255,255,255,.88) !important;margin:0 0 32px !important;max-width:640px !important;
}
.tap-luxury-fslide-actions.tap-luxury-fslide-actions{
	display:flex !important;flex-wrap:wrap !important;align-items:center !important;justify-content:center !important;gap:16px !important;margin:0 !important;padding:0 !important;
}
.tap-luxury-fslide-actions .tap-btn{margin:0 !important;}
.tap-luxury-fslide-actions .tap-btn span{color:inherit !important;}

/* Extra light-sweep layered on top of the existing gold-fill hover
   already defined on .tap-btn-primary/.tap-btn-ghost in style.css —
   a diagonal highlight bar that glides across on hover for a
   glossier, more "premium" hover feel than the base button. */
.tap-btn-luxury,
.tap-btn-luxury-ghost{position:relative;}
.tap-btn-luxury::after,
.tap-btn-luxury-ghost::after{
	content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
	background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
	background-size:220% 100%;background-position:150% 0;
	transition:background-position .7s var(--ease);
	mix-blend-mode:overlay;
}
.tap-btn-luxury:hover::after,
.tap-btn-luxury-ghost:hover::after{background-position:-50% 0;}

/* High-contrast, solid CTAs — both filled with color from the idle
   state (not transparent-until-hover) for a bolder, higher-conversion
   look. Primary uses the same gold→orange gradient as the sitewide
   final-cta button; secondary is solid white so it reads clearly
   against any photo. */
.tap-btn-luxury.tap-btn-luxury{
	background:linear-gradient(135deg,var(--gold),#e07322) !important;
	color:#fff !important;
	padding:17px 36px !important;
	font-size:15.5px !important;font-weight:700 !important;
	border-radius:100px !important;border:none !important;
	box-shadow:0 16px 34px -10px rgba(var(--gold-rgb),.75) !important;
	transition:transform .35s var(--ease),box-shadow .35s var(--ease) !important;
}
.tap-btn-luxury.tap-btn-luxury:hover{
	transform:translateY(-3px) scale(1.03);
	box-shadow:0 22px 44px -12px rgba(var(--gold-rgb),.9) !important;
}
.tap-btn-luxury.tap-btn-luxury::before{display:none;} /* the base gold-sweep is redundant now the button is already gold */

.tap-btn-luxury-ghost-dark.tap-btn-luxury-ghost-dark{
	background:#fff !important;
	color:var(--navy-dark) !important;
	border:none !important;
	border-radius:100px !important;
	padding:17px 36px !important;
	font-size:15.5px !important;font-weight:700 !important;
	box-shadow:0 12px 28px -10px rgba(0,0,0,.4) !important;
	transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease) !important;
}
.tap-btn-luxury-ghost-dark.tap-btn-luxury-ghost-dark:hover{
	background:linear-gradient(135deg,var(--gold),#e07322) !important;
	color:#fff !important;
	transform:translateY(-3px) scale(1.03);
	box-shadow:0 18px 36px -10px rgba(var(--gold-rgb),.75) !important;
}

.tap-luxury-fslide-actions a.tap-btn-primary:hover .tap-final-cta-arrow{transform:scaleX(-1) translateX(-3px);}
html[dir="ltr"] .tap-luxury-fslide-actions a.tap-btn-primary:hover .tap-final-cta-arrow{transform:scaleX(1) translateX(3px);}

.tap-luxury-badge.tap-luxury-badge{
	position:absolute !important;top:158px !important;inset-inline-end:24px !important;z-index:3 !important;
	display:inline-flex !important;align-items:center !important;
	background:rgba(15,22,36,.55) !important;color:#fff !important;
	border:1px solid rgba(var(--gold-rgb),.5) !important;
	backdrop-filter:blur(8px);
	border-radius:100px !important;
	padding:12px 22px !important;margin:0 !important;
	font-size:13.5px !important;font-weight:700 !important;line-height:1.3 !important;
	box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
	animation:tap-luxury-float 4.5s ease-in-out infinite;
}
.tap-luxury-badge span{background:linear-gradient(90deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes tap-luxury-float{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(-8px);}
}

/* ---- Prev/next arrows ---- */
.tap-luxury-arrow{
	position:absolute;top:50%;z-index:3;
	transform:translateY(-50%);
	width:48px;height:48px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:rgba(15,22,36,.4);border:1px solid rgba(255,255,255,.35);
	color:#fff;cursor:pointer;padding:0;
	backdrop-filter:blur(6px);
	transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.tap-luxury-arrow:hover{background:var(--gold);border-color:var(--gold);}
.tap-luxury-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tap-luxury-arrow-prev{inset-inline-start:24px;}
.tap-luxury-arrow-next{inset-inline-end:24px;}
html[dir="rtl"] .tap-luxury-arrow-prev svg{transform:scaleX(-1);}
html[dir="rtl"] .tap-luxury-arrow-next svg{transform:scaleX(-1);}

.tap-luxury-slider-dots{
	position:absolute;bottom:28px;inset-inline-start:0;inset-inline-end:0;z-index:2;
	display:flex;justify-content:center;gap:10px;
}
.tap-luxury-dot{
	width:9px;height:9px;border-radius:50%;
	background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.5);padding:0;cursor:pointer;
	transition:background .3s var(--ease),width .3s var(--ease),border-color .3s var(--ease);
}
.tap-luxury-dot.is-active{background:var(--gold);border-color:var(--gold);width:28px;border-radius:100px;}


/* The trusted-by logo marquee is no longer part of this widget at all —
   after three from-scratch attempts (CSS keyframe, JS rAF, a hand-
   bridged plugin) all had smoothness issues, it moved to its own
   section using the "MarqueeX" plugin's native Elementor widget (see
   seed-home-luxury.php's $marquee_section). Its markup/animation is
   entirely its own CSS, not this file's. */

@media (max-width:980px){
	.tap-luxury-hero{height:88vh;min-height:560px;}
	.tap-luxury-badge{top:136px;}
}
@media (max-width:560px){
	.tap-luxury-fslide{background-image:var(--tap-bg-m,var(--tap-bg));}
	.tap-luxury-hero{height:480px;min-height:480px;max-height:none;}
	.tap-luxury-badge.tap-luxury-badge{display:none !important;}
	.tap-luxury-fslide-actions.tap-luxury-fslide-actions{flex-direction:column;align-items:stretch !important;}
	.tap-luxury-fslide-actions .tap-btn{width:100%;}
	.tap-luxury-arrow{width:38px;height:38px;}
	.tap-luxury-arrow svg{width:16px;height:16px;}
	.tap-luxury-arrow-prev{inset-inline-start:12px;}
	.tap-luxury-arrow-next{inset-inline-end:12px;}
}

@media (prefers-reduced-motion:reduce){
	.tap-luxury-fslide{transition:opacity 1s linear;transform:none !important;}
	.tap-luxury-badge{animation:none;}
	.tap-btn-luxury::after,.tap-btn-luxury-ghost::after{transition:none;}
}

/* ---- A supporting photo backdrop behind the closing request-form
   section — CSS-only (no widget markup touched, so the form itself
   and its submit logic are untouched), scoped by this page's own
   #tap-service-form id so it can never affect any other page that
   reuses the same section id/widget. ---- */
#tap-service-form{
	position:relative;isolation:isolate;
	background-image:linear-gradient(160deg,rgba(15,22,36,.94),rgba(26,39,61,.9)),url('https://images.unsplash.com/photo-1764410481612-7544525b2991?q=80&w=1920&auto=format&fit=crop');
	background-size:cover;background-position:center;
}
#tap-service-form .tap-cf-intro h2{color:#fff;}
#tap-service-form .tap-cf-intro p{color:rgba(255,255,255,.78);}
#tap-service-form .tap-cf-microcopy{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
#tap-service-form .tap-cf-microcopy strong{color:#fff;}
#tap-service-form .tap-cf-microcopy span{color:rgba(255,255,255,.7);}
#tap-service-form .tap-hp-form-other{color:rgba(255,255,255,.7);}
