/*
Theme Name: ALTER EGO Events Management — Frosted Glass
Theme URI: https://www.facebook.com/AlterEgoEventsManagement
Author: ALTER EGO Events Management
Author URI: https://www.facebook.com/AlterEgoEventsManagement
Description: A bespoke, editorial-luxury WordPress theme built for ALTER EGO Events Management — full-service event, wedding, and celebration planning in Abu Dhabi, UAE. Hand-coded, no page-builder dependency, mobile-first, and accessible. This variant applies a frosted-glass (glassmorphism) surface treatment across the header, cards, popups, and buttons. Switch back to the original "ALTER EGO Events Management" theme at any time from Appearance → Themes — nothing here touches that theme's files.
Version: 1.0.0-glass
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alter-ego-events
*/

/* =========================================================================
   1. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}
body { margin: 0; }
img, picture, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* =========================================================================
   2. DESIGN TOKENS
   ========================================================================= */
:root {
	--ivory: #F7F3EC;
	--soft-white: #FFFDF9;
	--charcoal: #181816;
	--gold: #B89A68;
	--gold-deep: #9C7F51;
	--forest: #173C32;
	--forest-deep: #102A23;
	--sage: #AAB7A4;
	--blush: #E8C2C5;

	--ink: var(--charcoal);
	--ink-soft: #4A4A46;
	--surface: var(--soft-white);
	--surface-alt: var(--ivory);
	--border-soft: rgba(24, 24, 22, 0.12);
	--border-soft-light: rgba(255, 253, 249, 0.28);

	--font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container-max: 1280px;
	--container-pad: 20px;
	--radius-sm: 2px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 0.6s;

	--header-h: 76px;
}

@media (min-width: 640px) {
	:root { --container-pad: 32px; }
}
@media (min-width: 1024px) {
	:root { --container-pad: 48px; --header-h: 92px; }
}

/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: 0.005em; }

.aee-h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.4rem); font-weight: 600; }
.aee-h2--light { color: var(--soft-white); }
.aee-h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 600; }
.aee-h3--light { color: var(--soft-white); }

.aee-hero__headline {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.7rem + 2.6vw, 4.6rem);
	line-height: 1.08;
	color: var(--soft-white);
	max-width: 16ch;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.aee-lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); color: var(--ink-soft); line-height: 1.6; }
.aee-lead--light { color: rgba(255, 253, 249, 0.86); }

.aee-eyebrow {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-deep);
	margin: 0 0 0.9em;
}
.aee-eyebrow--light { color: var(--gold); }

p { color: var(--ink-soft); }
p + p { margin-top: 1em; }

.aee-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   4. LAYOUT UTILITIES
   ========================================================================= */
.aee-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.aee-section { padding-block: clamp(64px, 6vw + 32px, 132px); }
.aee-section--forest { background: var(--forest); }
.aee-section--alt { background: var(--surface-alt); }

.aee-section-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 64px); }
.aee-section-head__lead { margin-top: 1em; }

/* Skip link */
.aee-skip-link {
	position: absolute;
	left: 12px; top: -60px;
	background: var(--charcoal);
	color: var(--soft-white);
	padding: 12px 20px;
	z-index: 1000;
	border-radius: var(--radius-sm);
	transition: top 0.2s var(--ease);
}
.aee-skip-link:focus { top: 12px; }

/* Focus visibility across the site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 1px;
}

/* =========================================================================
   5. BUTTONS & LINKS
   ========================================================================= */
.aee-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 15px 30px;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
	white-space: nowrap;
}
.aee-btn:hover { transform: translateY(-1px); }
.aee-btn:active { transform: translateY(0); }

.aee-btn--gold { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.aee-btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.aee-btn--outline-light { background: transparent; color: var(--soft-white); border-color: var(--border-soft-light); }
.aee-btn--outline-light:hover { background: rgba(255, 253, 249, 0.1); border-color: var(--soft-white); }

.aee-btn--outline-dark { background: transparent; color: var(--charcoal); border-color: var(--border-soft); }
.aee-btn--outline-dark:hover { background: rgba(24, 24, 22, 0.06); border-color: var(--charcoal); }

.aee-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1.1em;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--forest);
	border-bottom: 1px solid var(--gold);
	padding-bottom: 2px;
	transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.aee-text-link:hover { gap: 0.65em; color: var(--gold-deep); }

/* =========================================================================
   6. HEADER
   ========================================================================= */
.aee-header {
	position: sticky;
	top: 0;
	z-index: 200;
	width: 100%;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: var(--surface);
	border-bottom: 1px solid var(--border-soft);
	transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

body.aee-has-hero .aee-header {
	background: transparent;
	border-bottom-color: transparent;
}
body.aee-has-hero .aee-header.is-scrolled {
	background: rgba(255, 253, 249, 0.96);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--border-soft);
	box-shadow: 0 6px 24px rgba(24, 24, 22, 0.05);
}

.aee-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.aee-logo { display: inline-flex; align-items: center; }
.aee-logo__img { height: 34px; width: auto; }
.aee-logo__img--light { display: none; }

body.aee-has-hero .aee-header:not(.is-scrolled) .aee-logo__img--dark { display: none; }
body.aee-has-hero .aee-header:not(.is-scrolled) .aee-logo__img--light { display: block; }

@media (min-width: 1024px) { .aee-logo__img { height: 40px; } }

/* A logo uploaded via Appearance -> Customize -> Site Identity (the_custom_logo())
   ships with the image's native width/height attributes, which otherwise renders
   it at full uploaded size. Constrain it to match the theme's own logo sizing. */
.aee-logo .custom-logo-link { display: inline-flex; align-items: center; }
.aee-logo .custom-logo {
	height: 34px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
@media (min-width: 1024px) {
	.aee-logo .custom-logo { height: 40px; max-width: 260px; }
}

.aee-nav-primary { display: none; }
.aee-nav-primary__list { display: flex; align-items: center; gap: 34px; }
.aee-nav-primary__list a {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ink);
	position: relative;
	padding-bottom: 4px;
}
body.aee-has-hero .aee-header:not(.is-scrolled) .aee-nav-primary__list a { color: var(--soft-white); }
.aee-nav-primary__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	transition: right 0.3s var(--ease);
}
.aee-nav-primary__list a:hover::after { right: 0; }

@media (min-width: 1024px) {
	.aee-nav-primary { display: block; }
}

.aee-header__actions { display: flex; align-items: center; gap: 16px; }
.aee-header__cta { display: none; padding: 12px 22px; }
@media (min-width: 1024px) { .aee-header__cta { display: inline-flex; } }

.aee-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	color: var(--ink);
}
body.aee-has-hero .aee-header:not(.is-scrolled) .aee-nav-toggle { color: var(--soft-white); }
@media (min-width: 1024px) { .aee-nav-toggle { display: none; } }

.aee-nav-toggle__box { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.aee-nav-toggle__line { display: block; height: 2px; width: 100%; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.aee-nav-toggle[aria-expanded="true"] .aee-nav-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aee-nav-toggle[aria-expanded="true"] .aee-nav-toggle__line:nth-child(2) { opacity: 0; }
.aee-nav-toggle[aria-expanded="true"] .aee-nav-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.aee-mobile-drawer {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(24, 24, 22, 0.45);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}
.aee-mobile-drawer[data-open="true"] { opacity: 1; }
.aee-mobile-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(360px, 86vw);
	background: var(--forest);
	color: var(--soft-white);
	padding: 22px 28px 32px;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.35s var(--ease);
	overflow-y: auto;
}
.aee-mobile-drawer[data-open="true"] .aee-mobile-drawer__panel { transform: translateX(0); }

.aee-mobile-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.aee-mobile-drawer__title { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.04em; }
.aee-mobile-drawer__close { font-size: 2rem; line-height: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }

.aee-mobile-drawer__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
.aee-mobile-drawer__list a {
	display: block;
	padding: 13px 4px;
	font-family: var(--font-serif);
	font-size: 1.35rem;
	border-bottom: 1px solid var(--border-soft-light);
}

.aee-mobile-drawer__cta { width: 100%; margin-bottom: 24px; }
.aee-mobile-drawer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.aee-mobile-drawer__contact a { color: var(--sage); }

/* =========================================================================
   7. HERO
   ========================================================================= */
.aee-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	margin-top: calc(var(--header-h) * -1);
	overflow: hidden;
	background: var(--forest);
}

.aee-hero__media { position: absolute; inset: 0; }
.aee-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aee-hero__img--a, .aee-hero__img--c { display: none; }

/* Background video: poster paints first, video/embed fades in once ready. */
.aee-hero__poster {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
}
.aee-hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0;
	transition: opacity 1.1s var(--ease);
}
.aee-hero__video.is-loaded { opacity: 1; }
.aee-hero__video-embed {
	position: absolute; inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.aee-hero__video-embed iframe {
	/* Width/height are set inline by assets/js/main.js once the Vimeo
	   Player SDK reports the video's real dimensions, so the iframe is
	   sized to a true edge-to-edge cover-crop instead of leaving
	   letterbox bars from an assumed aspect ratio. */
	position: absolute; top: 50%; left: 50%;
	min-width: 100%; min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	opacity: 0;
	transition: opacity 1.1s var(--ease);
}
.aee-hero__video-embed.is-loaded iframe { opacity: 1; }
/* Wistia's <wistia-player> web component (Aurora player) handles its own
   edge-to-edge cover-crop natively via fit-strategy="cover" (set in
   template-parts/hero.php) — it just needs to be told to fill this same
   absolutely-positioned box the Vimeo iframe above uses. Our own
   .aee-hero__poster (behind everything) is the loading placeholder, same
   as the other two video sources, so the element stays invisible until
   assets/js/main.js adds .is-loaded. */
.aee-hero__video-embed--wistia wistia-player {
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	opacity: 0;
	transition: opacity 1.1s var(--ease);
}
.aee-hero__video-embed--wistia.is-loaded wistia-player { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.aee-hero__video,
	.aee-hero__video-embed { display: none; }
}

.aee-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16, 42, 35, 0.35) 0%, rgba(16, 42, 35, 0.35) 40%, rgba(16, 42, 35, 0.88) 100%);
}

.aee-hero__content {
	position: relative;
	z-index: 2;
	padding-bottom: clamp(56px, 8vw, 100px);
	padding-top: calc(var(--header-h) + 40px);
}

.aee-hero__sub { max-width: 46ch; margin-bottom: 1.8em; }
.aee-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 2em; }
.aee-hero__credibility {
	color: rgba(255, 253, 249, 0.72);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	font-weight: 600;
}

.aee-hero__scroll-cue {
	position: absolute;
	left: 50%; bottom: 22px;
	transform: translateX(-50%);
	z-index: 2;
	width: 26px; height: 42px;
	border: 1.5px solid rgba(255, 253, 249, 0.55);
	border-radius: 20px;
	display: none;
}
.aee-hero__scroll-cue span {
	position: absolute;
	top: 8px; left: 50%;
	width: 4px; height: 4px;
	background: var(--gold);
	border-radius: 50%;
	transform: translateX(-50%);
	animation: aee-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes aee-scroll-cue {
	0% { opacity: 1; top: 8px; }
	70% { opacity: 0; top: 22px; }
	100% { opacity: 0; top: 22px; }
}
@media (min-width: 640px) { .aee-hero__scroll-cue { display: block; } }

@media (min-width: 900px) {
	.aee-hero__img--a { display: block; left: 0; width: 34%; }
	.aee-hero__img--b { left: 30%; width: 44%; }
	.aee-hero__img--c { display: block; left: 68%; width: 32%; }
	.aee-hero__scrim { background: linear-gradient(90deg, rgba(16,42,35,0.45) 0%, rgba(16,42,35,0.18) 30%, rgba(16,42,35,0.18) 70%, rgba(16,42,35,0.5) 100%), linear-gradient(180deg, rgba(16,42,35,0.15) 0%, rgba(16,42,35,0.92) 100%); }
	/* A single full-bleed video reads best with a plain top-to-bottom
	   scrim rather than the three-column collage's left/right gradient. */
	.aee-hero--video .aee-hero__scrim {
		background: linear-gradient(180deg, rgba(16, 42, 35, 0.28) 0%, rgba(16, 42, 35, 0.30) 45%, rgba(16, 42, 35, 0.90) 100%);
	}
}

/* =========================================================================
   8. INTRODUCTION
   ========================================================================= */
.aee-intro__grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
	.aee-intro__grid { grid-template-columns: 0.8fr 1.6fr; gap: 64px; align-items: start; }
}
.aee-intro__content > * + * { margin-top: 1.1em; }
.aee-intro__content .aee-h2 { margin-bottom: 0.6em; }

/* =========================================================================
   9. SERVICES
   ========================================================================= */
.aee-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px 32px;
}
@media (min-width: 640px) { .aee-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aee-services__grid { grid-template-columns: repeat(3, 1fr); } }

.aee-service-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 22px;
	background: var(--sage);
}
.aee-service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.aee-service-card:hover .aee-service-card__media img { transform: scale(1.04); }
.aee-service-card__body .aee-h3 { margin-bottom: 0.5em; }

/* Optional per-service video (Service edit screen -> "Service Video").
   Layered on top of the photo, cropped to fill the card exactly the
   same way the photo is (object-fit: cover) — the photo stays
   underneath as the poster/fallback until the video is actually
   playing, and for anyone the video is skipped for (see main.js:
   reduced motion, Data Saver, or no IntersectionObserver support). */
.aee-service-card__media video.aee-service-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
	pointer-events: none;
}
.aee-service-card__media video.aee-service-card__video.is-playing { opacity: 1; }
.aee-service-card:hover .aee-service-card__media video.aee-service-card__video { transform: scale(1.04); }

/* Same idea, for a pasted Wistia link instead of an uploaded file (see
   the "Or paste a Wistia video link" field in the same meta box) — the
   Aurora <wistia-player> web component's own fit-strategy="cover"
   handles the crop, so this wrapper just needs to layer, size, and
   fade it in the same way as the <video> element above. */
.aee-service-card__media .aee-service-card__video-wistia {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
	pointer-events: none;
}
.aee-service-card__media .aee-service-card__video-wistia.is-loaded { opacity: 1; }
.aee-service-card__media .aee-service-card__video-wistia wistia-player {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.aee-service-card:hover .aee-service-card__media .aee-service-card__video-wistia { transform: scale(1.04); }

.aee-service-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
	margin-top: 1.1em;
}
.aee-service-card__actions .aee-text-link { margin-top: 0; }

/* "Find Out More" — opens the shared #aee-gallery-modal (below) with
   this card's own photo album (data-gallery, JSON-encoded per card). */
.aee-service-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	color: var(--forest);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	padding: 7px 16px;
	background: transparent;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.aee-service-card__more:hover,
.aee-service-card__more:focus-visible {
	background: var(--forest);
	border-color: var(--forest);
	color: var(--soft-white);
}
.aee-service-card__more span { font-size: 1.05em; line-height: 1; }

/* =========================================================================
   10. PORTFOLIO + LIGHTBOX
   ========================================================================= */
.aee-portfolio__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
}
.aee-filter-btn {
	padding: 10px 18px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border: 1px solid var(--border-soft);
	border-radius: 30px;
	color: var(--ink-soft);
	transition: all 0.25s var(--ease);
}
.aee-filter-btn:hover { border-color: var(--gold); color: var(--ink); }
.aee-filter-btn.is-active { background: var(--charcoal); border-color: var(--charcoal); color: var(--soft-white); }

.aee-portfolio__grid {
	column-count: 1;
	column-gap: 20px;
}
@media (min-width: 640px) { .aee-portfolio__grid { column-count: 2; } }
@media (min-width: 1024px) { .aee-portfolio__grid { column-count: 3; } }

.aee-portfolio__item {
	break-inside: avoid;
	margin-bottom: 20px;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.aee-portfolio__item[data-hidden="true"] { display: none; }

.aee-portfolio__trigger { position: relative; display: block; width: 100%; overflow: hidden; background: var(--sage); }
.aee-portfolio__trigger img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); }
.aee-portfolio__trigger:hover img { transform: scale(1.045); }

.aee-portfolio__overlay {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 20px;
	background: linear-gradient(180deg, rgba(16,42,35,0) 55%, rgba(16,42,35,0.78) 100%);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
	text-align: left;
}
.aee-portfolio__trigger:hover .aee-portfolio__overlay,
.aee-portfolio__trigger:focus-visible .aee-portfolio__overlay { opacity: 1; }
.aee-portfolio__cat { display: block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.aee-portfolio__title { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: var(--soft-white); }

.aee-empty-state {
	padding: 48px 32px;
	text-align: center;
	border: 1px dashed var(--border-soft);
	color: var(--ink-soft);
}

.aee-lightbox {
	position: fixed; inset: 0; z-index: 400;
	background: rgba(16, 16, 15, 0.94);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.aee-lightbox[hidden] { display: none; }
.aee-lightbox__figure { max-width: min(1100px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aee-lightbox__figure img { max-height: 76vh; width: auto; max-width: 100%; object-fit: contain; }
.aee-lightbox__figure figcaption { color: rgba(255,253,249,0.85); font-size: 0.9rem; text-align: center; }
.aee-lightbox__close {
	position: absolute; top: 18px; right: 20px;
	width: 46px; height: 46px;
	font-size: 2rem; line-height: 1;
	color: var(--soft-white);
	display: inline-flex; align-items: center; justify-content: center;
}
.aee-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	font-size: 2.2rem;
	color: var(--soft-white);
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-soft-light);
	border-radius: 50%;
}
.aee-lightbox__nav--prev { left: 12px; }
.aee-lightbox__nav--next { right: 12px; }
@media (min-width: 900px) {
	.aee-lightbox__nav--prev { left: 28px; }
	.aee-lightbox__nav--next { right: 28px; }
}

/* Service "Find Out More" popup — a single shared instance (like the
   lightbox above) driven per-card by main.js from each button's own
   data-gallery JSON: a large banner photo + the service title and
   description on the right, with a thumbnail strip below — click a
   thumbnail to swap the banner, use the prev/next buttons to page
   through the thumbnail strip, or Left/Right keys / swipe on the
   banner to step through photos one at a time. */
.aee-gallery-modal {
	position: fixed; inset: 0; z-index: 400;
	background: rgba(16, 16, 15, 0.94);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.aee-gallery-modal[hidden] { display: none; }
.aee-gallery-modal__panel {
	position: relative;
	width: 100%;
	max-width: 1040px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--charcoal);
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
}
@media (min-width: 800px) {
	.aee-gallery-modal__panel {
		flex-direction: row;
		max-height: 84vh;
		overflow: hidden;
	}
}
.aee-gallery-modal__close {
	position: absolute; top: 14px; right: 14px;
	width: 44px; height: 44px;
	font-size: 1.9rem; line-height: 1;
	color: var(--soft-white);
	background: rgba(16, 16, 15, 0.4);
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	z-index: 2;
}

.aee-gallery-modal__banner {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: rgba(255, 253, 249, 0.04);
	overflow: hidden;
}
@media (min-width: 800px) {
	.aee-gallery-modal__banner { width: 54%; aspect-ratio: auto; }
}
.aee-gallery-modal__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.28s var(--ease);
}
.aee-gallery-modal__banner img.is-fading { opacity: 0; }

.aee-gallery-modal__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 26px 26px 28px;
}
@media (min-width: 800px) {
	.aee-gallery-modal__content { padding: 42px 42px 34px; overflow-y: auto; }
}
.aee-gallery-modal__title {
	color: var(--soft-white);
	margin: 0 0 14px;
	padding-right: 36px;
}
.aee-gallery-modal__description {
	color: rgba(255, 253, 249, 0.78);
	font-size: 0.98rem;
	line-height: 1.75;
	margin: 0 0 28px;
}

.aee-gallery-modal__thumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}
.aee-gallery-modal__thumbs[hidden] { display: none; }
.aee-gallery-modal__thumbs-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.aee-gallery-modal__thumbs-track::-webkit-scrollbar { display: none; }
.aee-gallery-modal__thumb {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	scroll-snap-align: start;
	border: 2px solid transparent;
	opacity: 0.6;
	transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.aee-gallery-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aee-gallery-modal__thumb:hover,
.aee-gallery-modal__thumb:focus-visible { opacity: 0.85; }
.aee-gallery-modal__thumb.is-active { opacity: 1; border-color: var(--gold); }

.aee-gallery-modal__thumbs-nav {
	flex: 0 0 auto;
	width: 36px; height: 36px;
	font-size: 1.4rem;
	color: var(--soft-white);
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-soft-light);
	border-radius: 50%;
}
.aee-gallery-modal__thumbs-nav[hidden] { display: none; }

/* =========================================================================
   11. PROCESS TIMELINE
   ========================================================================= */
.aee-process__timeline { display: flex; flex-direction: column; gap: 44px; }
.aee-process__number {
	display: inline-block;
	font-family: var(--font-serif);
	font-size: 1.6rem;
	color: var(--gold);
	margin-bottom: 14px;
}
.aee-process__step p { color: rgba(255, 253, 249, 0.78); max-width: 42ch; }
.aee-process__step .aee-h3--light { margin-bottom: 0.4em; }

@media (min-width: 900px) {
	.aee-process__timeline {
		flex-direction: row;
		gap: 32px;
		position: relative;
	}
	.aee-process__timeline::before {
		content: "";
		position: absolute;
		top: 14px; left: 0; right: 0;
		height: 1px;
		background: var(--border-soft-light);
	}
	.aee-process__step { flex: 1; padding-top: 40px; position: relative; }
	.aee-process__step::before {
		content: "";
		position: absolute;
		top: 10px; left: 0;
		width: 9px; height: 9px;
		border-radius: 50%;
		background: var(--gold);
	}
}

/* =========================================================================
   12. ABOUT
   ========================================================================= */
.aee-about__grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
	.aee-about__grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
}
.aee-about__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--gold); }
.aee-about__media img { width: 100%; height: 100%; object-fit: cover; }
.aee-about__content > * + * { margin-top: 1em; }

.aee-about__facts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
@media (min-width: 480px) { .aee-about__facts { grid-template-columns: 1fr 1fr; } }
.aee-about__fact dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 4px; }
.aee-about__fact dd { margin: 0; font-weight: 600; color: var(--ink); }

.aee-placeholder-note { font-size: 0.88rem; color: var(--ink-soft); border-left: 2px solid var(--gold); padding-left: 14px; margin-top: 24px; }

/* =========================================================================
   13. WHY ALTER EGO
   ========================================================================= */
.aee-why__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 640px) { .aee-why__grid { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; } }
@media (min-width: 1100px) { .aee-why__grid { grid-template-columns: repeat(4, 1fr); } }
.aee-why__index { display: block; font-family: var(--font-serif); font-size: 1.4rem; color: var(--sage); margin-bottom: 12px; }
.aee-why__item .aee-h3 { margin-bottom: 0.5em; }

/* =========================================================================
   14. TESTIMONIALS
   ========================================================================= */
.aee-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .aee-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }

.aee-testimonial-card {
	padding: 32px 28px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
}
.aee-testimonial-card__quote { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--ink); line-height: 1.5; }
.aee-testimonial-card__quote p { color: inherit; }
.aee-testimonial-card footer { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.aee-testimonial-card cite { font-style: normal; font-weight: 700; font-size: 0.9rem; }
.aee-testimonial-card__meta { font-size: 0.8rem; color: var(--ink-soft); }

.aee-testimonial-card--placeholder { border-style: dashed; text-align: center; color: var(--ink-soft); }
.aee-testimonial-card--placeholder p { font-style: italic; }
.aee-testimonial-card__fields { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); }
.aee-testimonials__note { text-align: center; margin: 28px auto 0; max-width: 60ch; }

/* =========================================================================
   15. FINAL CTA
   ========================================================================= */
.aee-final-cta { position: relative; overflow: hidden; }
.aee-final-cta__media { position: absolute; inset: 0; }
.aee-final-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.aee-final-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,42,35,0.75), rgba(16,42,35,0.88)); }
.aee-final-cta__content {
	position: relative; z-index: 1;
	padding-block: clamp(80px, 10vw, 160px);
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.aee-final-cta__content .aee-h2 { margin-bottom: 0.5em; }
.aee-final-cta__content .aee-lead { margin-bottom: 2em; }
.aee-final-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* =========================================================================
   16. CONTACT / FORM
   ========================================================================= */
.aee-contact__grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .aee-contact__grid { grid-template-columns: 0.8fr 1.2fr; gap: 80px; } }

.aee-contact__details { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.aee-contact__details li { display: flex; flex-direction: column; gap: 2px; }
.aee-contact__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.aee-contact__details a { font-weight: 600; color: var(--ink); }
.aee-contact__details a:hover { color: var(--forest); }

.aee-form__row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.aee-form__row--2 { }
@media (min-width: 560px) { .aee-form__row--2 { grid-template-columns: 1fr 1fr; } }
.aee-form__row + .aee-form__row,
.aee-form__row + .aee-field,
.aee-field + .aee-form__row { margin-top: 20px; }

.aee-field { display: flex; flex-direction: column; gap: 8px; }
.aee-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.aee-field input,
.aee-field select,
.aee-field textarea {
	padding: 13px 16px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	font-size: 0.95rem;
	color: var(--ink);
	transition: border-color 0.2s var(--ease);
}
.aee-field input:focus,
.aee-field select:focus,
.aee-field textarea:focus { border-color: var(--gold); }
.aee-field textarea { resize: vertical; min-height: 120px; }

.aee-field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aee-field__error { font-size: 0.8rem; color: #A6423A; min-height: 1em; }
.aee-field.has-error input,
.aee-field.has-error select,
.aee-field.has-error textarea { border-color: #A6423A; }

.aee-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; }
.aee-checkbox input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--forest); flex-shrink: 0; }

.aee-form__submit-row { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.aee-form__submit { position: relative; min-width: 190px; }
.aee-form__submit[disabled] { opacity: 0.75; cursor: progress; }
.aee-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(24,24,22,0.25);
	border-top-color: var(--charcoal);
	border-radius: 50%;
	animation: aee-spin 0.7s linear infinite;
}
@keyframes aee-spin { to { transform: rotate(360deg); } }

.aee-form__status { font-size: 0.92rem; font-weight: 600; min-height: 1.2em; }
.aee-form__status[data-state="success"] { color: var(--forest); }
.aee-form__status[data-state="error"] { color: #A6423A; }

/* =========================================================================
   17. FOOTER
   ========================================================================= */
.aee-footer { background: var(--charcoal); color: rgba(255, 253, 249, 0.75); padding-top: clamp(56px, 6vw, 96px); }
.aee-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 253, 249, 0.12);
}
@media (min-width: 720px) { .aee-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.aee-footer__logo { height: 32px; width: auto; margin-bottom: 18px; }
.aee-footer__positioning { max-width: 34ch; color: rgba(255, 253, 249, 0.65); }
.aee-footer__facebook { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--sage); font-size: 0.88rem; font-weight: 600; }
.aee-footer__facebook:hover { color: var(--gold); }

.aee-footer__heading { font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,253,249,0.5); margin-bottom: 18px; font-weight: 700; }
.aee-footer__nav ul, .aee-footer__contact ul, .aee-footer__legal-col ul { display: flex; flex-direction: column; gap: 12px; }
.aee-footer__nav a, .aee-footer__contact a, .aee-footer__legal-col a { font-size: 0.92rem; }
.aee-footer__nav a:hover, .aee-footer__contact a:hover, .aee-footer__legal-col a:hover { color: var(--soft-white); }

.aee-footer__bottom { padding-block: 24px; font-size: 0.8rem; color: rgba(255, 253, 249, 0.45); }

/* =========================================================================
   18. BASIC PAGE / 404
   ========================================================================= */
.aee-basic-page__inner { max-width: 780px; }
.aee-basic-page__content { margin-top: 24px; }
.aee-basic-page__content > * + * { margin-top: 1.1em; }
.aee-basic-page__media { margin: 28px 0; aspect-ratio: 16/10; overflow: hidden; }
.aee-basic-page__media img { width: 100%; height: 100%; object-fit: cover; }

.aee-404__inner { max-width: 680px; text-align: left; }
.aee-404__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0; }
.aee-404__contact { font-size: 0.92rem; }
.aee-404__contact a { font-weight: 700; color: var(--forest); }

/* =========================================================================
   19. REVEAL-ON-SCROLL ANIMATION
   ========================================================================= */
.aee-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	transition-delay: var(--aee-delay, 0ms);
}
.aee-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.aee-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   20. WHATSAPP FLOATING BUTTON
   ========================================================================= */
.aee-whatsapp-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(16, 42, 35, 0.32), 0 2px 8px rgba(16, 42, 35, 0.2);
	transform: scale(0);
	animation: aee-whatsapp-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.aee-whatsapp-fab:hover,
.aee-whatsapp-fab:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 10px 28px rgba(16, 42, 35, 0.4), 0 3px 10px rgba(16, 42, 35, 0.24);
}
.aee-whatsapp-fab__icon { width: 30px; height: 30px; position: relative; z-index: 2; }
.aee-whatsapp-fab__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25D366;
	opacity: 0.55;
	animation: aee-whatsapp-pulse 2.4s ease-out 1.8s infinite;
}
@keyframes aee-whatsapp-pop {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}
@keyframes aee-whatsapp-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 640px) {
	.aee-whatsapp-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
	.aee-whatsapp-fab__icon { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	.aee-whatsapp-fab { animation: none; transform: scale(1); }
	.aee-whatsapp-fab__ring { animation: none; display: none; }
}

/* =========================================================================
   21. PRINT
   ========================================================================= */
@media print {
	.aee-header, .aee-mobile-drawer, .aee-lightbox, .aee-gallery-modal, .aee-final-cta, .aee-nav-toggle, .aee-whatsapp-fab { display: none !important; }
}

/* =========================================================================
   22. FROSTED GLASS DESIGN SYSTEM
   A cohesive glassmorphism layer over the header, cards, popups,
   buttons, and form fields — soft translucency + backdrop blur.
   Layered on as overrides at the end of the sheet (source order wins
   at equal specificity) rather than rewritten in place, so this whole
   section can be lifted out cleanly to restore the flat original look.
   A few low-opacity colour blobs sit behind the flat-background
   sections so the blur has real texture to frost instead of just
   dimming a solid colour. Corners stay at the theme's existing
   --radius-sm rather than introducing rounded "app UI" corners, to
   keep the sharp editorial-luxury language intact.
   ========================================================================= */
:root {
	--glass-light: rgba(255, 253, 249, 0.55);
	--glass-light-strong: rgba(255, 253, 249, 0.78);
	--glass-light-soft: rgba(255, 253, 249, 0.32);
	--glass-dark: rgba(16, 42, 35, 0.5);
	--glass-dark-strong: rgba(12, 14, 13, 0.62);
	--glass-charcoal: rgba(24, 24, 22, 0.55);
	--glass-border-light: rgba(255, 255, 255, 0.55);
	--glass-border-dark: rgba(255, 255, 255, 0.16);
	--glass-shadow: 0 12px 40px rgba(24, 24, 22, 0.10), 0 2px 8px rgba(24, 24, 22, 0.06);
	--glass-shadow-dark: 0 16px 48px rgba(8, 16, 13, 0.45);
	--glass-blur: blur(18px) saturate(160%);
	--glass-blur-strong: blur(28px) saturate(180%);
}

/* ---- Ambient blurred colour blobs behind flat sections, so the glass
   panels sitting on top of them have real texture to frost. Purely
   decorative, negative z-index, never intercepts clicks. ---- */
.aee-services,
.aee-testimonials,
.aee-contact {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.aee-services::before,
.aee-services::after,
.aee-testimonials::before,
.aee-contact::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	z-index: -1;
	pointer-events: none;
}
.aee-services::before { width: 420px; height: 420px; top: -120px; right: -100px; background: var(--gold); opacity: 0.32; }
.aee-services::after { width: 360px; height: 360px; bottom: -140px; left: -100px; background: var(--sage); opacity: 0.28; }
.aee-testimonials::before { width: 380px; height: 380px; top: -100px; left: 50%; transform: translateX(-50%); background: var(--blush); opacity: 0.26; }
.aee-contact::before { width: 400px; height: 400px; bottom: -160px; right: -80px; background: var(--gold); opacity: 0.24; }

@media (max-width: 640px) {
	.aee-services::before, .aee-services::after,
	.aee-testimonials::before,
	.aee-contact::before { display: none; }
}

/* ---- Header: frosted glass bar instead of a flat fill ---- */
.aee-header {
	background: var(--glass-light-strong);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--glass-border-light);
}
body.aee-has-hero .aee-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
body.aee-has-hero .aee-header.is-scrolled {
	background: var(--glass-light);
	backdrop-filter: var(--glass-blur-strong);
	-webkit-backdrop-filter: var(--glass-blur-strong);
	border-bottom-color: var(--glass-border-light);
	box-shadow: var(--glass-shadow);
}

/* ---- Mobile nav drawer: dark frosted glass panel ---- */
.aee-mobile-drawer__panel {
	background: var(--glass-dark);
	backdrop-filter: var(--glass-blur-strong);
	-webkit-backdrop-filter: var(--glass-blur-strong);
	border-left: 1px solid var(--glass-border-dark);
	box-shadow: var(--glass-shadow-dark);
}

/* ---- Service cards: glass frame around the photo + text ---- */
.aee-service-card {
	padding: 18px 18px 26px;
	background: var(--glass-light);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-sm);
	box-shadow: var(--glass-shadow);
	transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.aee-service-card:hover {
	box-shadow: 0 20px 52px rgba(24, 24, 22, 0.14), 0 4px 12px rgba(24, 24, 22, 0.08);
	transform: translateY(-3px);
	background: var(--glass-light-strong);
}
.aee-service-card__media { margin-bottom: 18px; border-radius: var(--radius-sm); }
.aee-service-card__more {
	background: var(--glass-light-strong);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: var(--glass-border-light);
}
.aee-service-card__more:hover,
.aee-service-card__more:focus-visible {
	background: var(--forest);
	border-color: var(--forest);
}

/* ---- Portfolio: glass filter pills (hover caption stays a plain fade, no blur — the image's own scale pop is the only hover effect) ---- */
.aee-filter-btn {
	background: var(--glass-light);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: var(--glass-border-light);
}
.aee-filter-btn:hover { background: var(--glass-light-strong); }
.aee-filter-btn.is-active {
	background: rgba(24, 24, 22, 0.72);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-color: rgba(24, 24, 22, 0.72);
}

/* ---- Lightbox + "Find Out More" popup: frosted dark glass panels ---- */
.aee-lightbox {
	background: var(--glass-dark-strong);
	backdrop-filter: var(--glass-blur-strong);
	-webkit-backdrop-filter: var(--glass-blur-strong);
}
.aee-lightbox__nav {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.aee-gallery-modal {
	background: var(--glass-dark-strong);
	backdrop-filter: var(--glass-blur-strong);
	-webkit-backdrop-filter: var(--glass-blur-strong);
}
.aee-gallery-modal__panel {
	background: var(--glass-charcoal);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-dark);
	box-shadow: var(--glass-shadow-dark);
}
.aee-gallery-modal__close {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.aee-gallery-modal__thumbs-nav {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ---- Testimonial cards ---- */
.aee-testimonial-card {
	background: var(--glass-light);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border-light);
	box-shadow: var(--glass-shadow);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.aee-testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(24, 24, 22, 0.12); }
.aee-testimonial-card--placeholder {
	background: var(--glass-light-soft);
	border-style: dashed;
}

/* ---- "Why Alter Ego" + About facts: light glass panels ---- */
.aee-why__item {
	padding: 22px 20px;
	background: var(--glass-light-soft);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border-light);
	border-radius: var(--radius-sm);
}
.aee-about__facts {
	background: var(--glass-light-soft);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border-light);
	border-top: none;
	padding: 20px;
	border-radius: var(--radius-sm);
}

/* ---- Process timeline: dark glass step panels on the forest section ---- */
.aee-process__step {
	padding: 20px 18px;
	background: var(--glass-dark);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--glass-border-dark);
	border-radius: var(--radius-sm);
}
@media (min-width: 900px) {
	.aee-process__step { padding-top: 20px; }
	.aee-process__step::before { top: 20px; }
	.aee-process__timeline::before { top: 24px; }
}

/* ---- Contact form: glass fields ---- */
.aee-field input,
.aee-field select,
.aee-field textarea {
	background: var(--glass-light);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border-light);
}
.aee-field input:focus,
.aee-field select:focus,
.aee-field textarea:focus {
	background: var(--glass-light-strong);
	border-color: var(--gold);
}

/* ---- Buttons: glass surfaces on outline variants. The solid gold
   primary CTA stays a solid fill for conversion clarity, with a soft
   glass sheen highlight layered on top instead of full translucency. ---- */
.aee-btn--outline-light {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.aee-btn--outline-light:hover { background: rgba(255, 255, 255, 0.16); }
.aee-btn--outline-dark {
	background: var(--glass-light);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.aee-btn--outline-dark:hover { background: var(--glass-light-strong); }

.aee-btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.aee-btn--gold::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
	pointer-events: none;
}

/* ---- WhatsApp FAB: soft glass halo ring behind the brand-green circle ---- */
.aee-whatsapp-fab {
	box-shadow: 0 8px 24px rgba(16, 42, 35, 0.32), 0 2px 8px rgba(16, 42, 35, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.14);
}

/* ---- Graceful fallback for browsers without backdrop-filter support
   (older Firefox/Safari) — swap translucency for the theme's normal
   solid surfaces so text stays fully legible either way. ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aee-header,
	body.aee-has-hero .aee-header.is-scrolled,
	.aee-service-card,
	.aee-testimonial-card,
	.aee-why__item,
	.aee-about__facts,
	.aee-process__step,
	.aee-gallery-modal__panel,
	.aee-mobile-drawer__panel,
	.aee-filter-btn,
	.aee-field input,
	.aee-field select,
	.aee-field textarea {
		background: var(--surface-alt);
	}
	.aee-process__step,
	.aee-mobile-drawer__panel { background: var(--forest); }
	.aee-gallery-modal__panel { background: var(--charcoal); }
}