/* ============================================================================
 * Anan Villa Build - full-screen background layer
 * ============================================================================
 * The isometric wireframe villa sits behind the whole Meet Anan panel,
 * Navana-style: near-black ground, ivory and bronze strokes, the copy
 * floating above it. The SVG carries its colours as presentation
 * attributes, out of reach of the dark-mode stylesheet transforms.
 *
 * position:relative here loses (by specificity, deliberately) to the scroll
 * stack's body.anan-stack position:sticky on the stacked widths, so the
 * villa layer anchors to the section in both worlds.
 * ========================================================================= */

/* Artwork re-enabled 2026-08-18: licensed stock line art (AdobeStock
   2113044017), centerline-traced to strokes for the scroll build. */
.elementor-element-anmeetsec {
	position: relative;
	background-color: #211E19 !important;
	overflow: hidden;
}

/* The widget's own wrapper is the positioned layer: Elementor gives every
   widget position:relative, so an absolute child would anchor to the
   zero-height wrapper, not the section. Promote the wrapper itself. */
.elementor-element.elementor-element-anmeetvilla {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.anan-villa-wrap {
	position: absolute;
	/* top clearance so the roofline never hides under the site header on
	   wide, short viewports where the drawing is height-limited */
	inset: clamp(84px, 12vh, 140px) 0 0;
}

.anan-villa-wrap svg {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.25; /* a slight presence - the copy always wins */
}

/* The copy rides above the drawing. */
.elementor-element-anmeetsec .elementor-element-anmeetrow {
	position: relative;
	z-index: 1;
}

/* A soft ground behind the left text column so the wireframe never fights
   the words. */
.anan-villa-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(33, 30, 25, 0.82) 0%, rgba(33, 30, 25, 0.45) 34%, rgba(33, 30, 25, 0) 58%),
		linear-gradient(180deg, rgba(33, 30, 25, 0) 16%, rgba(33, 30, 25, 0.5) 32%, rgba(33, 30, 25, 0.5) 74%, rgba(33, 30, 25, 0) 90%);
}

/* On the stacked layouts, hold the map back long enough for the elevation
   to finish drawing while the Meet Anan panel is pinned - only then does
   the map begin its climb. Same two breakpoints as scroll-stack.css; the
   extra class outranks the stack's own dwell rule. */
@media (min-width: 1025px) and (min-height: 820px) {
	body.anan-stack .elementor-element.elementor-element-explore-phuket-map {
		margin-top: 170vh !important;
	}
}

/* Phones carry no scroll-build at all (2026-08-20): at 0.24 opacity behind a
   375px column of copy the drawing was nearly invisible, and the long dwell
   it needs made the page feel stuck mid-scroll. The section returns to the
   brand taupe it wore before the villa shipped; villa.js also refuses to run
   below 768px, and the 170vh dwell above is desktop-only for the same
   reason. Later in the file than the base rules, so equal specificity wins. */
@media (max-width: 767px) {
	.elementor-element.elementor-element-anmeetvilla {
		display: none;
	}
	.elementor-element-anmeetsec {
		background-color: #6e6659 !important;
	}
}