/*!
 * Radiantorbit SL — Interior Design Studio · Niebla, Huelva, Spain
 * https://radiantorbit-sl.com
 *
 * Studio-led residential and commercial interior design: spatial planning,
 * material and finish coordination, furniture and decor direction, and a
 * calm, considered visual language rooted in southern Spanish character.
 *
 * File: boutique-upgrade.css — global navigation, preloader, hero, and
 * mobile drawer upgrades layered on top of the base template.
 */

/* Logo sizing */
.logo-header img,
.logo-header .site-logo {
	height: 52px;
	width: auto;
	max-width: 220px;
	display: block;
}

.is-fixed .logo-header img,
.is-fixed .logo-header .site-logo {
	height: 48px;
}

/* Logo over the light hero — brighten and add a soft halo for contrast */
.sticky-header:not(.is-fixed) .logo-header img,
.sticky-header:not(.is-fixed) .logo-header .site-logo {
	filter: brightness(1.18) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}

/* Unified CTA button */
.btn-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: linear-gradient(135deg, #A66A3F 0%, #C9A46A 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	border-radius: 50px !important;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.15;
	padding: 11px 24px !important;
	min-height: 42px;
	transition: all 0.3s ease;
	text-decoration: none !important;
	white-space: normal;
	vertical-align: middle;
}

.extra-nav .extra-cell {
	display: inline-flex;
	align-items: center;
}

.btn-header-cta:hover,
.btn-header-cta:focus {
	background: linear-gradient(135deg, #7A4B2D 0%, #A66A3F 100%) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(166, 106, 63, 0.22);
}

.extra-nav .btn-header-cta {
	padding: 11px 22px !important;
	min-height: 42px;
}

/* Sticky header — vertically center CTA with nav and logo */
@media (min-width: 992px) {
	.sticky-header.is-fixed .extra-nav.extra-nav-desktop {
		display: flex;
		align-items: center;
		align-self: center;
		height: 60px;
		padding: 0 !important;
		margin-top: 0;
	}

	.sticky-header.is-fixed .extra-nav.extra-nav-desktop .extra-cell {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.sticky-header.is-fixed > .main-bar > .container > .logo-header {
		display: flex;
		align-items: center;
		height: 60px;
	}

	.sticky-header.is-fixed > .main-bar > .container > .logo-header > a {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.site-header .header-nav .logo-header {
		display: none !important;
	}

	.sticky-header.is-fixed .header-nav .nav > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		height: 60px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.sticky-header.is-fixed .header-nav .nav > li > a .bi {
		margin-top: 0 !important;
		margin-left: 0 !important;
		line-height: 1;
		font-size: 10px;
		align-self: center;
		position: relative;
		top: 0;
	}
}

/* Desktop nav — keep dropdown chevrons vertically centered */
@media (min-width: 992px) {
	.site-header .header-nav .nav > li > a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.site-header .header-nav .nav > li > a .bi {
		margin-top: 0 !important;
		margin-left: 0 !important;
		line-height: 1;
		font-size: 10px;
		align-self: center;
	}
}

/* Preloader */
#loading-area {
	background-color: #F7F3EA !important;
	background-image: none !important;
	position: fixed !important;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999999;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.65s ease, visibility 0.65s ease;
}

#loading-area.is-hiding {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#loading-area::before {
	content: "";
	position: absolute;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	border: 2px solid rgba(201, 164, 106, 0.55);
	box-shadow: 0 0 28px rgba(166, 106, 63, 0.22), inset 0 0 18px rgba(201, 164, 106, 0.14);
	animation: preloaderRingSpin 2.8s linear infinite, preloaderGlowOuter 2.4s ease-in-out infinite;
}

#loading-area::after {
	content: "";
	position: absolute;
	width: 142px;
	height: 142px;
	border-radius: 50%;
	border: 1px dashed rgba(166, 106, 63, 0.28);
	animation: preloaderRingSpin 4.5s linear infinite reverse, preloaderGlowHalo 3s ease-in-out infinite;
}

#loading-area .preloader-ro-icon {
	position: relative;
	z-index: 1;
	width: 72px;
	height: 72px;
	padding: 14px;
	object-fit: contain;
	border-radius: 50%;
	border: 3px solid rgba(201, 164, 106, 0.45);
	background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, rgba(247, 243, 234, 0.95) 55%, rgba(232, 212, 170, 0.35) 100%);
	box-shadow: 0 8px 24px rgba(166, 106, 63, 0.24), 0 0 0 6px rgba(166, 106, 63, 0.08);
	animation: preloaderPulse 1.8s ease-in-out infinite, preloaderShadowDrift 2.6s ease-in-out infinite;
}

@keyframes preloaderRingSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes preloaderGlowOuter {
	0%, 100% {
		box-shadow: 0 0 18px rgba(166, 106, 63, 0.18), inset 0 0 14px rgba(201, 164, 106, 0.1);
	}
	50% {
		box-shadow: 0 0 42px rgba(201, 164, 106, 0.42), 0 0 64px rgba(166, 106, 63, 0.16), inset 0 0 22px rgba(201, 164, 106, 0.2);
	}
}

@keyframes preloaderGlowHalo {
	0%, 100% {
		opacity: 0.55;
		transform: scale(0.98);
	}
	50% {
		opacity: 1;
		transform: scale(1.04);
	}
}

@keyframes preloaderShadowDrift {
	0%, 100% {
		box-shadow: 0 10px 22px rgba(166, 106, 63, 0.22), 0 0 0 6px rgba(166, 106, 63, 0.08), 0 0 24px rgba(201, 164, 106, 0.12);
	}
	50% {
		box-shadow: 0 18px 38px rgba(166, 106, 63, 0.34), 0 0 0 10px rgba(201, 164, 106, 0.14), 0 0 48px rgba(201, 164, 106, 0.28);
	}
}

@keyframes preloaderPulse {
	0%, 100% {
		opacity: 0.82;
		transform: scale(0.94);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Hero loading — paint the hero image as the container background so the
   area is filled instantly on render, before the Revolution slider inits.
   This removes the white -> gray -> image flash on page load. */
.main-slider,
#home.main-slider,
.tp-banner-container,
.tp-banner,
#welcome_wrapper,
#welcome.rev_slider {
	background-color: #F7F3EA !important;
	background-image: url('../images/main-slider/hero-premium-spanish-interior.jpg') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Give the fullscreen slider its height immediately (before JS sizes it),
   so the hero background fills the viewport with no white/gray gap. */
.main-slider .tp-banner-container,
.main-slider .tp-banner,
#welcome_wrapper.fullscreen-container {
	min-height: 100vh;
}

#welcome_wrapper .tp-loader,
#welcome .tp-bgimg {
	background-color: #F7F3EA !important;
}

/* Hide Revolution's gray spinner/loader overlay */
#welcome_wrapper .tp-loader,
#welcome_wrapper .tp-loader.spinner0,
#welcome_wrapper .tp-loader.spinner1,
#welcome_wrapper .tp-loader.spinner2,
#welcome_wrapper .tp-loader.spinner3,
#welcome_wrapper .tp-loader.spinner4,
#welcome_wrapper .tp-loader.spinner5 {
	display: none !important;
}

/* Hero scrim — darken light areas so white text stays readable */
#welcome .hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 40% 58%, rgba(21, 21, 21, 0.46) 0%, rgba(21, 21, 21, 0) 62%),
		linear-gradient(180deg, rgba(21, 21, 21, 0.30) 0%, rgba(21, 21, 21, 0.12) 38%, rgba(21, 21, 21, 0.42) 100%);
}

/* Hero caption text — readable over bright interiors */
#welcome #slide-100-layer-2 {
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

#welcome #slide-100-layer-3 {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Hero slider buttons */
.hero-btn-refined {
	transition: all 0.3s ease !important;
}

#welcome .hero-btn-refined {
	background-color: rgba(21, 21, 21, 0.32) !important;
	border-color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.hero-btn-refined:hover,
#welcome .hero-btn-refined:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 15px 35px rgba(166, 106, 63, 0.32) !important;
	border-color: #C9A46A !important;
	background: linear-gradient(135deg, rgba(166, 106, 63, 0.95), rgba(201, 164, 106, 0.92)) !important;
	color: #FFFFFF !important;
	text-shadow: none;
}

/* Remove side navigation arrows on the hero slider */
#welcome_wrapper .tparrows,
#welcome_wrapper .tp-leftarrow,
#welcome_wrapper .tp-rightarrow,
#welcome .tparrows,
#welcome .tp-leftarrow,
#welcome .tp-rightarrow {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (max-width: 991px) {
	#welcome .tp-caption.rev-btn.hero-btn-refined {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		margin-left: 0 !important;
		text-align: center !important;
	}
}

/* Alternating section tones */
.section-tone-cream {
	background-color: #F7F3EA !important;
}

.section-tone-accent {
	background-color: #E8D4AA !important;
}

.section-tone-warm {
	background-color: #DCC49A !important;
}

.section-tone-gradient {
	background: linear-gradient(135deg, #F7F3EA 0%, #E8D4AA 48%, #DCC49A 100%) !important;
}

.boutique-body .page-content.bg-white {
	background-color: #F7F3EA;
}

/* Homepage projects preview */
.home-projects-preview {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

.home-projects-preview .section-head {
	margin-bottom: 28px;
}

.home-projects-preview .section-head p {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.home-projects-preview .portfolio-boutique .dlab-media img {
	aspect-ratio: 4 / 3;
}

.home-projects-preview .home-projects-grid {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	padding-left: 6px;
	padding-right: 6px;
	list-style: none;
}

.home-projects-preview .home-projects-grid .card-container {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	width: 50% !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	margin-bottom: 16px;
	float: none !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
}

@media (min-width: 768px) {
	.home-projects-preview .home-projects-grid {
		max-width: 720px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.home-projects-preview .home-projects-grid .card-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
		margin-bottom: 20px;
	}
}

@media (min-width: 992px) {
	.home-projects-preview .home-projects-grid {
		max-width: 960px;
	}

	.home-projects-preview .home-projects-grid .card-container {
		flex: 0 0 25% !important;
		max-width: 25% !important;
		width: 25% !important;
	}
}

.home-projects-preview .home-projects-cta {
	margin-top: 42px;
	padding-top: 8px;
}


/* Service cards – color and icon line */
#services .service-home-card {
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(247, 243, 234, 0.92) 100%) !important;
	border: 1px solid rgba(166, 106, 63, 0.16) !important;
}

#services .service-home-card-body {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 234, 0.88));
}

#services .service-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
	width: 100%;
}

#services .service-icon-wrap .icon-cell {
	flex: 0 0 auto;
}

#services .service-icon-line {
	display: block;
	flex: 1 1 0;
	max-width: 48px;
	min-width: 16px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #A66A3F, #C9A46A, #A66A3F);
	background-size: 220% 100%;
	animation: serviceLineShift 2.8s ease-in-out infinite;
}

@media (max-width: 575px) {
	#services .service-icon-wrap {
		gap: 8px;
	}

	#services .service-icon-line {
		max-width: 36px;
		min-width: 12px;
	}
}

@keyframes serviceLineShift {
	0%, 100% { background-position: 0% 50%; opacity: 0.75; }
	50% { background-position: 100% 50%; opacity: 1; }
}

#services .service-home-card:hover .service-icon-line {
	animation-duration: 1.6s;
}

/* Our Approach section */
#approach {
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

#approach .container {
	max-width: 1240px;
}

.approach-card {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 243, 234, 0.9) 52%, rgba(232, 212, 170, 0.24) 100%);
	border: 1px solid rgba(166, 106, 63, 0.14);
	border-radius: 8px;
	padding: 36px 32px;
	height: 100%;
	text-align: center;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.approach-card:hover {
	transform: translateY(-5px);
	border-color: rgba(201, 164, 106, 0.55);
	box-shadow: 0 14px 30px rgba(166, 106, 63, 0.1);
}

.approach-card .about-icon-card__icon-wrap {
	margin-bottom: 14px;
	justify-content: center;
}

.approach-card .approach-step {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #A66A3F;
	margin-bottom: 10px;
	font-weight: 600;
}

.approach-card:hover .about-icon-card__line {
	animation-duration: 1.5s;
}

.approach-card:hover .about-icon-card__icon {
	background: linear-gradient(135deg, rgba(166, 106, 63, 0.22), rgba(201, 164, 106, 0.18));
}

.approach-card:hover .about-icon-card__icon i {
	transform: scale(1.1);
	color: #7A4B2D;
}

.approach-card h4 {
	margin-bottom: 12px;
	color: #151515;
	text-align: center;
}

.approach-card p {
	margin-bottom: 0;
	line-height: 1.7;
}

/* Mobile drawer */
@media (max-width: 991px) {
	.extra-nav-desktop {
		display: none !important;
	}

	.mo-left .header-nav.navbar-collapse {
		background: linear-gradient(157deg, #150E09 0%, #2C1D12 34%, #45301C 68%, #5C3B22 100%);
		box-shadow: inset -1px 0 0 rgba(201, 164, 106, 0.18), 6px 0 30px rgba(0, 0, 0, 0.30);
		overflow-x: hidden;
		overflow-y: auto;
		width: min(320px, 88vw);
		max-width: 100vw;
		left: calc(-1 * min(320px, 88vw));
		-webkit-overflow-scrolling: touch;
	}

	.mo-left .header-nav.navbar-collapse.show {
		left: 0;
		display: flex !important;
		flex-direction: column;
	}

	.mo-left .header-nav .nav,
	.mo-left .header-nav .nav > li,
	.mo-left .header-nav .nav > li > a,
	.mo-left .header-nav .sub-menu,
	.mo-left .header-nav .sub-menu li a {
		max-width: 100%;
		box-sizing: border-box;
	}

	.mo-left .header-nav .logo-header,
	.mo-left .header-nav .nav,
	.mo-left .header-nav .mobile-drawer-cta,
	.mo-left .header-nav .mobile-drawer-brand {
		position: relative;
		z-index: 1;
	}

	.mo-left .header-nav .nav > li > a {
		color: #F3E9D8 !important;
		border-bottom: 1px solid rgba(201, 164, 106, 0.16);
	}

	.mo-left .header-nav .nav > li > a:hover,
	.mo-left .header-nav .nav > li.active > a {
		color: #E8C77E !important;
	}

	.mo-left .header-nav .nav > li > a .bi {
		color: #C9A46A;
	}

	.mo-left .header-nav .sub-menu {
		background: rgba(0, 0, 0, 0.22);
	}

	.mo-left .header-nav .sub-menu li a {
		color: rgba(243, 233, 216, 0.78) !important;
	}

	.mo-left .header-nav .sub-menu li a:hover {
		color: #E8C77E !important;
	}

	.mo-left .header-nav .sub-menu li.active > a,
	.mo-left .header-nav .sub-menu a.is-active {
		color: #E8C77E !important;
		font-weight: 600;
		background: rgba(201, 164, 106, 0.18);
	}

	.mobile-drawer-cta {
		display: block;
		padding: 14px 20px 10px;
		flex-shrink: 0;
		order: 0;
	}

	.mobile-drawer-cta .btn-header-cta {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 13px 20px !important;
		min-height: 46px;
	}

	.mobile-drawer-brand {
		display: block;
		padding: 18px 20px 32px;
		margin-top: auto;
		flex-shrink: 0;
	}

	.mobile-drawer-divider {
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(166, 106, 63, 0.45), transparent);
		margin-bottom: 18px;
	}

	.mobile-drawer-tagline {
		margin: 0;
		font-size: 13px;
		line-height: 1.65;
		letter-spacing: 0.04em;
		color: rgba(243, 233, 216, 0.62);
		text-align: center;
	}

	.mobile-drawer-location {
		margin: 12px 0 0;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #D9B978;
		text-align: center;
	}

	.mo-left .header-nav .logo-header {
		background: transparent;
		border-bottom: 1px solid rgba(201, 164, 106, 0.18);
		padding: 26px 22px;
		height: auto;
	}

	.mo-left .header-nav .logo-header img {
		width: auto;
		max-width: 210px;
		height: auto;
		display: block;
		filter: brightness(0) invert(1);
	}
}

@media (min-width: 992px) {
	.mobile-drawer-cta,
	.mobile-drawer-brand {
		display: none !important;
	}
}

/* Mobile nav backdrop */
.mobile-nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(21, 21, 21, 0.45);
	z-index: 998;
}

body.mobile-nav-open .mobile-nav-backdrop {
	display: block;
}

body.mobile-nav-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.mobile-nav-open .mo-left .header-nav.navbar-collapse {
	touch-action: pan-y;
	overscroll-behavior: contain;
}

/* Mobile: keep header visible while scrolling */
@media (max-width: 991px) {
	.site-header.header-transparent {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1000;
	}

	.site-header.header-transparent .main-bar {
		background-color: rgba(21, 21, 21, 0.9) !important;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
	}

	.site-header.header-transparent .sticky-header.main-bar-wraper.is-fixed .main-bar,
	.site-header.header-transparent .sticky-header.main-bar-wraper .main-bar {
		background-color: rgba(21, 21, 21, 0.9) !important;
	}
}

/* Prevent horizontal scroll sitewide */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

.page-wraper,
.page-content,
.content-block {
	overflow-x: clip;
	max-width: 100%;
}

/* Inner page heroes — show a meaningful crop below the top edge */
.boutique-body .page-content .dlab-bnr-inr.bg-pt {
	background-position: center 38% !important;
	background-size: cover;
}

@media (max-width: 767px) {
	.boutique-body .page-content .dlab-bnr-inr.bg-pt {
		background-position: center 44% !important;
	}

	.service-page-hero__media img {
		object-position: center 46%;
	}
}