/* Variable declaration */

:root {
	/* Font Styles */
	--font-anek-telugu: 'Anek Telugu', san-serif;
	--font-audiowide: 'Audiowide', sans-serif;
	--font-barlow-condensed: 'Barlow Condensed', sans-serif;
	--font-bebas-neue: 'Bebas Neue', sans-serif;
	--font-dm-mono: 'DM Mono', sans-serif;
	--font-dm-sans: 'DM Sans', sans-serif;
	--font-inter: 'Inter', sans-serif;
	--font-roboto: 'Roboto', san-serif;

	/* Text Styles */
	--body-font: var(--font-roboto);
	--heading-font: var(--font-anek-telugu);
	--footer-font: var(--font-anek-telugu);

	/* Sizes */
	--button-size: 16px;

	--h1-size: 94px;
	--h1-line-height: 108px;

	--h2-size: 50px;
	--h2-line-height: 75px;

	--h3-size: 40px;
	--h4-size: 32px;
	--h5-size: 28px;
	--h6-size: 22px;

	--mobile-h2-size: 3.5rem;

	--paragraph-size: 18px;
	--paragraph-line-height: 26px;

	--secondary-text-size: 14px;
	--secondary-text-line-height: 18px;

	--subtitle-size: 16px;
	--subtitle-line-height: 26px;

	/* Color Styles */
	--text-dark: #000;
	--text-light: #fff;
	--text-gray: #adbdcc;

	--color-bg-white: #fff;
	--color-bg-off-white: #f7f9fc;

	--color-blue-1: #00d4ff;
	--color-purple-1: #6962f7;
	--color-purple-2: #7000ff;
	--color-primary-accent: #fc694c;
	--color-secondary-accent: #b44e0a;

	--color-primary-button-hover: #6d7a88;

	/* Begin FAQ Section */
	--color-primary-black: #000;
	--color-primary-white: #fff;
	--color-primary-gray: #808080;
	--color-border: rgba(255, 255, 255, 0.8);
	--color-gray-text-muted: #888888;
    --color-primary-gray-2: #dfdada;
	/* End FAQ Section */

	--primary-white: #fff;
	/* --primary-gray: #3a3a3a; */
	--primary-gray: #4f4f4f;
	--primary-black: #000;

	--primary-accent: #fc694c;

	--accent-1: #b1c0ef;
	--accent-2: #f2acac;
	--accent-3: #fedd93;
	--accent-4: #81b7bf;
	--color-primary-bg: #f9f4eb;
	--color-primary-black: #141414;
	--color-primary-fadeout-bg: #0f0f0f;

	/* TODO - Look into best practices for colors for primary and secondary accents */

	/* Spacing styles */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 32px;
	--spacing-xl: 64px;

	/* Header height — 3rem mobile (48px), 3.25rem desktop max (52px) */
	--header-h: clamp(3rem, 4vw, 3.25rem);
}

/* body {
	font-family: var(--body-font);
	color: var(--text-dark);
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	padding: var(--spacing-sm) 0 0 0;

	
	background: var(--primary-black);
	color: var(--primary-white);
} */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}

body {
	background: var(--primary-black);
	color: var(--primary-white);
}

/* body.no-scroll and .nav-overlay base styles live in site-header.css */

/* overflow-x: hidden on html (not body) is the key.
   html's overflow applies to the viewport, which clips both in-flow content and
   fixed elements (like the off-screen mobile-nav) that extend past the right edge.
   html's axis-pairing makes overflow-y: auto, so html becomes the single scroll
   container. html.scrollTop = window.scrollY, so position: sticky sees real scroll
   movement and works correctly.

   body must NOT have overflow set — if body also has overflow-x: hidden, it becomes
   a nested scroll container inside html with body.scrollTop always 0, and sticky fails. */
html {
	max-width: 100%;
	/* Override * { position: relative } — html must be position:static so that
	   position:fixed descendants use the viewport as their containing block,
	   not html's layout box (a Chrome quirk when html has overflow + position). */
	position: static;
	overflow-x: hidden;
}

body {
	max-width: 100%;
}

.site-wrapper {
	overflow-x: clip;
}

/* Hide page before first paint when returning from gallery — prevents hero flash */
html.is-returning {
	opacity: 0;
	pointer-events: none;
}

/* when loading, ensure no scrolling */
html.is-loading,
body.is-loading {
	overflow: hidden;
	height: 100svh;
	max-height: 100svh;

	/* user will be unable to interact with page links when is-loading is active */
	pointer-events: none;
	cursor: wait;
}

/* Hamburger hidden during preloader — GSAP reveals it in the timeline.
   Without is-loading (FAQ, gallery pages) the hamburger is visible immediately. */
html.is-loading .hamburger {
	visibility: hidden;
	opacity: 0;
}

/* Prevent FOUC: hide hero text containers before first paint.
   .char / .word spans don't exist until SplitText runs in DOMContentLoaded —
   without this, raw unsplit text flashes at full opacity between first paint and JS.
   Hero background is already hidden by its CSS clip-path. Below-fold content is
   protected by overflow: hidden above and is unreachable during loading. */
html.is-loading .nav-logo,
html.is-loading .nav-links-desktop,
html.is-loading .hero-title-wrapper h1,
html.is-loading .hero-footer {
	opacity: 0;
}

.pin-spacer {
    // background-color: rgb(255 0 0 / 0.3)
}

/* Common styling */

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.flex-col-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.is-loading *:focus {
	/* Disallow keyboard navigation when is-loading is active */
	outline: none !important;
}

/* ─── Site Header — Landing page overrides ────────────────── */
/* Dark glass background + white text live in site-header.css (shared).
   Landing page: fixed position + transparent-over-hero behaviour. */

.site-header {
	position: fixed;
	background: rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-bottom-color: rgba(255, 255, 255, 0.04);
	transition: background 0.5s ease, backdrop-filter 0.5s ease,
		-webkit-backdrop-filter 0.5s ease, border-bottom-color 0.5s ease;
}

.site-header.header-opaque {
	background: rgba(15, 17, 23, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* HERO SECTION - Preloader, header, hero */
.hero-section-wrapper {
	overflow: clip;

	a,
	p {
		text-decoration: none;
		color: var(--primary-white);
		font-family: var(--font-dm-sans);
		font-size: 0.85rem;
		font-weight: 500;
		line-height: 1;
	}

	.openMobileNavDrawer {
		visibility: visible;
	}

	.hero-wrapper {
		.hero .hero-background img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		h1 {
			font-family: 'AudioWide', sans-serif;
			line-height: 1;
			color: var(--primary-white);
		}

		.hero {
			position: relative;
			width: 100%;
			height: 100svh;
			overflow: hidden;

			.hero-background {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
				will-change: clip-path;
				z-index: -1;

				img {
					position: absolute;
					opacity: 0.75;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) scale(2);
					will-change: transform;
				}
			}

			.hero-title-wrapper {
				position: absolute;
				bottom: 4rem;
				width: 100%;
				padding: 2rem;

				h1 {
					font-size: clamp(5rem, 18.5vw, 20rem);
					line-height: 1.25;
				}
			}

			.hero-rule {
				position: absolute;
				left: 2rem;
				bottom: 6rem;
				width: calc(100% - 4rem);
				height: 1.5px;
				background-color: rgba(255, 255, 255, 0.35);
				opacity: 0;
			}

			.hero-footer {
				position: absolute;
				bottom: 2rem;
				width: 100%;
				padding: 2rem;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				p {
					font-size: 1rem;
				}
			}

		}

		.hero-title-wrapper h1 .char {
			transform: translateX(100%);
		}
	}

	nav a .word,
	.hero-footer p .word {
		transform: translateY(100%);
	}

	.word,
	.char,
	.digit {
		position: relative;
		will-change: transform;
	}
}

/* Main Content */

.main-content {
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
	/* width: 100%;
	height: 100%;
	position: relative; */
}

.intro {
	font-family: var(--font-barlow-condensed);
	position: relative;
	z-index: 10;
	background-color: var(--primary-black);
	padding-bottom: clamp(3rem, 8svh, 8rem);

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	h1 {
		text-transform: uppercase;
		font-size: 12rem;
		font-weight: 500;
		line-height: 0.8;
	}

	p {
		font-family: 'DM Mono', monospace;
		text-transform: uppercase;
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1;
	}

	.part-a,
	.part-b,
	.part-c {
		position: relative;
		width: 100%;
		height: calc(100svh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
		overflow: hidden;
		padding: 1rem;
	}

	/* Team section: exclude header height so cards pin fully below the sticky header */
	.part-b {
		height: calc(100svh - var(--header-h));
		min-height: calc(100svh - var(--header-h));
	}

	.part-a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 75svh;
		overflow: visible;
		padding: 0 1rem;

		h2 {
			width: 60%;
			color: var(--primary-accent);
			font-size: clamp(1.8rem, 3vw, 3.5rem);
			line-height: 1.35;
		}
	}

	.part-c {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: calc(100svh - var(--header-h));
		min-height: calc(100svh - var(--header-h));
		overflow: hidden;

		h2 {
			width: 60%;
			color: var(--primary-accent);
			font-size: clamp(1.8rem, 3vw, 3.5rem);
			line-height: 1.35;
		}
	}

	.team {
		display: flex;
		gap: 1rem;

		.team-member {
			flex: 1;
			position: relative;
			width: 100%;
			height: 100%;
			border: 2px dashed rgba(242, 245, 234, 0.35);
			border-radius: 1.5rem;
			will-change: transform;

			/* Animation start transforms removed from CSS — GSAP sets them inside
			   the (min-width: 1025px) mm.add context so they're cleanly reverted
			   on resize to mobile, leaving cards in their natural visible position. */

			/* Nested CSS - &:nth-child(1) is the same as team-member:nth-child(1) */
			&:nth-child(1) {
				z-index: 2;
			}

			&:nth-child(2) {
				z-index: 1;
			}

			&:nth-child(3) {
				z-index: 0;
			}

			.team-member-name-initial {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				padding: 0 0.5rem;
				box-sizing: border-box;
				overflow: hidden;

				h2 {
					color: var(--primary-accent);
					font-size: clamp(1rem, 3vw, 4rem);
					text-align: center;
					word-break: break-word;
					overflow-wrap: break-word;
					will-change: transform;
					/* transform managed by GSAP mm.add desktop context */
				}
			}

			.team-member-card {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: calc(100% - 4px);
				height: calc(100% + 4px);
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 0;
				background-color: var(--primary-white);
				border-radius: 1.5rem;
				overflow: hidden;
				will-change: transform;

				.team-member-img {
					width: 100%;
					flex: 0 0 60%;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						display: block;
					}
				}

				.team-member-info {
					flex: 0 0 40%;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;
					gap: 0.5rem;
					padding: 1rem 1.25rem;
					box-sizing: border-box;
					overflow: hidden;

					h2 {
						font-size: clamp(1rem, 2.5vw, 3rem);
						color: var(--primary-accent);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;
						gap: 0;
					}

					p {
						color: var(--primary-black);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
					}
				}
			}
		}
	}
}



.tables-compare {
	height: 100%;
	width: 100%;
	padding-top: clamp(2rem, 5svh, 5rem);
	padding-bottom: clamp(4rem, 10svh, 10rem);

	.table-wrapper-expenses {
		min-height: 115svh;
		/* overflow: hidden; */
	}

	.table-wrapper-expenses,
	.table-wrapper-experience {
		min-height: 115svh;
		width: 100%;
		padding: 1rem;
		display: grid;
		place-items: center;
		
		table {
			height: 90%;
			width: 95%;
			border-collapse: collapse;
			background: #000;
			font-size: clamp(0.75rem, 1.25vw, 2.5rem);
			color: #fff;
			padding: 4rem;
			box-sizing: border-box;
		}
	}

	.table-wrapper-expenses {
		tr:last-child {
			/* border: 1px solid rgb(0 0 0 / 0.25); */
			border: 1px solid rgb(255 255 255 / 0.2);
			font-weight: 600;
			background-color: rgb(255 255 255 / 0.1);
		
			td {
				vertical-align: middle;

				&:first-child div {
					display: flex;
					flex-direction: column;
					justify-content: end;
					align-items: center;
				}
			}
		}
	}

	th {
		font-size: 1.5rem;
		/* border-bottom: 1px solid black; */
		border-bottom: 1px solid rgb(255 255 255 / 0.2);
	}

	th:nth-child(2),
	th:last-child {
		/* border-left: 1px solid black; */
		border-left: 1px solid rgb(255 255 255 / 0.2);
	}

	caption,
	th,
	td {
		height: auto;
		padding: 0.75rem;
		text-align: center;
	}

	th div,
	td:not(:first-child) div {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.subtitle-1 {
		font-size: 0.75rem;
	}
	.subtitle-2 {
		font-size: 0.65rem;
	}
	.subtitle-3 {
		font-size: 0.5rem;
	}

	td {
		text-align: left;
		vertical-align: top;
		border-bottom: 0.1px solid rgb(255 255 255 / 0.2);
		div {
			width: 100%;
		}
	}

	td:first-of-type {
		text-align: center;
		border-bottom: 0.1px solid rgb(255 255 255 / 0.2);
	}

	td:nth-child(2) {
		/* border-left: 0.1px solid rgb(0 0 0 / 0.1);
		border-right: 0.1px solid rgb(0 0 0 / 0.1); */

		border-left: 0.1px solid rgb(255 255 255 / 0.2);
		border-right: 0.1px solid rgb(255 255 255 / 0.2);
		border-bottom: 0.1px solid rgb(255 255 255 / 0.2);
	}

	caption {
		padding: 1rem;
		font-size: clamp(1.5rem, 3vw, 3rem);
		width: auto;
		text-align: center;
		background: #000;
		color: #fff;
		font-weight: 600;

		div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 0.25rem;

			/* "The Real ALE Numbers:" eyebrow */
			span:first-child {
				color: var(--primary-accent);
				font-size: clamp(1rem, 1.8vw, 2rem);
				font-weight: 500;
				letter-spacing: 0.04em;
				text-transform: uppercase;
			}

			/* "Hotel vs. Home" headline — stays white */
			span:nth-child(2) {
				color: #fff;
			}
		}

		.average-cost-text {
			font-size: clamp(0.75rem, 1.1vw, 1.2rem);
			color: rgba(255, 255, 255, 0.75);
			font-weight: 400;
		}
	}

	th {
		vertical-align: top;
		background-color: rgba(255, 255, 255, 0.1);
	}

	tr:nth-of-type(2n) {
		background-color: #00000083;
	}

	td:first-of-type {
		font-weight: 400;
	}

	/* Living Experience Table */
	.table-wrapper-experience {
		margin-top: 15vh;
		.table-header-category {
			background-color: #f8f9fa;
			
			text-align: left;
			padding: 1rem;
			border-bottom: 2px solid #dee2e6;
			color: #333;
			font-variant: small-caps;
			border-left: none;
		}

		thead {
			tr {
				th {
					border-top: 1px solid var(--table-bg-color);
					border-top: 1px solid #fff;
					

					&:nth-of-type(1) {
						border-left: 1px solid var(--table-bg-color);
					}

					&:last-child {
						border-right: 1px solid var(--table-bg-color);
					}
				}
			}
		}

		tbody {
			td {
				padding: 1rem 1rem;
				width: fit-content;
				text-align: left;
				vertical-align: top;
				div {
					width: auto;
				}
				&:first-child {
					min-width: 18vw;
					div {
						height: 100%;
						width: 100%;
						text-align: left;
					}
				}

				&:not(:first-child) div {
					width: fit-content;
					/* max-width: 18rem; */
					/* max-width: 40wv; */
					max-width: clamp(30vw, 40vw, 46vw);
				}
			}
		}
	}

}




.who-we-are {
	/* border: 2px solid cyan; */

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	h2 {
		font-size: 4rem;
		font-weight: 900;
		letter-spacing: -0.15rem;
		line-height: 1.125;
		text-align: center;
	}

	.wwa-specialty {
		position: relative;
		width: 100%;
		height: 100svh;
		padding: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.wwa-services {
		position: relative;
		width: 100%;
		height: 90svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: clip;
		/* border: 1px solid yellow; */


		.wwa-services-header {
			position: relative;
			width: 100%;
			padding: 0.2rem;
			background-color: var(--primary-black);

			img {
				object-fit: contain;
				height: 100%;
			}

			&:nth-child(1),
			&:nth-child(3) {
				transform: translateX(100%) translateY(0%);
			}

			&:nth-child(2) {
				transform: translateX(-100%) translateY(0%);
				z-index: 2;
			}
		}
	}

	.wwa-services-copy {
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 167svh;
		padding: 2rem 2rem 25svh 2rem;
		text-align: center;
	}

	.wwa-animate-text {
		position: relative;
		width: 85%;
		margin: 0 auto;
		color: var(--primary-gray);
		--clip-value: 100%;
		font-size: clamp(1.5rem, 2.75vw, 3rem);

		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;

	}

	.wwa-animate-text::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		color: var(--primary-white);
		clip-path: inset(0 0 var(--clip-value) 0);
		will-change: clip-path;
	}
}

.dashed-strikethrough {
	--strikethrough-w: 0px;
}

.dashed-strikethrough::after {
	content: '';
	position: absolute;

	/* 38% from top hits mid-cap-height for this font */
	top: 38%;
	transform: translateY(-50%);
	left: -24px;
	width: var(--strikethrough-w);
	height: 7px;

	background: var(--primary-accent);
	box-shadow: 0 0 18px rgba(252, 105, 76, 0.55);
	border-radius: 2px;

	pointer-events: none;
}

.section-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100svh;
	width: 100%;
	text-align: center;
	position: relative;
	background-color: rgb(from var(--primary-gray) r g b / 0.2);

	.divider-content {
		width: 100%;

		h2 {
			letter-spacing: 0.3rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			font-size: clamp(5rem, 8vw, 15rem);
			font-family: var(--font-inter);
			font-family: var(--font-anek-telugu);
			line-height: 8rem;

			.emphasize-text {
				color: var(--primary-accent);
			}
		}
	}
}

.what-we-do {
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	h2 {
		font-size: 4rem;
		font-weight: 900;
		letter-spacing: -0.15rem;
		line-height: 1.125;
		text-align: center;
	}

	.wwd-specialty {
		position: relative;
		width: 100%;
		height: 100svh;
		padding: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.wwd-services {
		position: relative;
		width: 100%;
		height: 90svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: clip;

		.wwd-services-header {
			position: relative;
			width: 100%;
			padding: 0.2rem;
			background-color: var(--primary-black);

			img {
				object-fit: contain;
			}

			&:nth-child(1),
			&:nth-child(3) {
				transform: translateX(100%) translateY(0%);
			}

			&:nth-child(2) {
				transform: translateX(-100%) translateY(0%);
				z-index: 2;
			}
		}
	}

	.wwd-services-copy {
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 167svh;
		padding: 2rem 2rem 25svh 2rem;
		text-align: center;
	}

	.wwd-animate-text {
		position: relative;
		width: 75%;
		margin: 0 auto;
		color: var(--primary-gray);
		--clip-value: 100%;
		font-size: clamp(1.5rem, 2.75vw, 3rem);
	}

	.wwd-animate-text::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		color: var(--primary-white);
		clip-path: inset(0 0 var(--clip-value) 0);
		will-change: clip-path;
	}
}

.where-we-host {
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	h2 {
		font-size: 4rem;
		font-weight: 900;
		letter-spacing: -0.15rem;
		line-height: 1.125;
		text-align: center;
	}

	.wwh-specialty {
		position: relative;
		width: 100%;
		height: 100svh;
		padding: 2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.wwh-services {
		position: relative;
		width: 100%;
		height: 90svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: clip;

		.wwh-services-header {
			position: relative;
			width: 100%;
			padding: 0.2rem;
			background-color: var(--primary-black);

			img {
				object-fit: contain;
			}

			&:nth-child(1),
			&:nth-child(3) {
				transform: translateX(100%) translateY(0%);
			}

			&:nth-child(2) {
				transform: translateX(-100%) translateY(0%);
				z-index: 2;
			}
		}
	}

	.wwh-services-copy {
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 167svh;
		padding: 2rem 2rem 25svh 2rem;
		text-align: center;
	}

	.wwh-animate-text {
		position: relative;
		width: 75%;
		margin: 0 auto;
		color: var(--primary-gray);
		--clip-value: 100%;
		font-size: clamp(1.5rem, 2.75vw, 3rem);
	}

	.wwh-animate-text::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		color: var(--primary-white);
		clip-path: inset(0 0 var(--clip-value) 0);
		will-change: clip-path;
	}
}

/* ── Amenities Section ── */

.amenities {
	background-color: #fdfdfd;
	color: var(--primary-black);
	padding: clamp(4rem, 8svh, 8rem) clamp(1.5rem, 5vw, 5rem);
}

.amenities-header {
	text-align: center;
	margin-bottom: clamp(2.5rem, 5svh, 5rem);
}

.amenities-title {
	font-family: var(--font-inter);
	font-size: clamp(1.75rem, 3vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--primary-black);
	margin: 0 0 0.75rem;
}

.amenities-subtitle {
	font-family: var(--font-roboto);
	font-size: clamp(0.9rem, 1.2vw, 1.1rem);
	color: #64748b;
	margin: 0;
	max-width: 52ch;
	margin-inline: auto;
	line-height: 1.6;
}

.amenities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 1100px;
	margin-inline: auto;
}

.amenity-card {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 1rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	will-change: transform, opacity;
}

.amenity-icon {
	width: 40px;
	height: 40px;
	color: var(--color-primary-accent);
	flex-shrink: 0;
}

.amenity-icon svg {
	width: 100%;
	height: 100%;
}

.amenity-name {
	font-family: var(--font-inter);
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	font-weight: 600;
	color: var(--primary-black);
	margin: 0;
	line-height: 1.3;
}

.amenity-desc {
	font-family: var(--font-roboto);
	font-size: 0.875rem;
	color: #64748b;
	line-height: 1.65;
	margin: 0;
}

/*.dashed-strikethrough {
	text-decoration-line: line-through;
	text-decoration-style: solid;
	text-decoration-thickness: 0.5rem;
	color: var(--primary-gray);
} */

.dashed-strikethrough {
	padding: 0;
	margin: 0;
	position: relative;
	display: inline-block;
	color: var(--primary-gray);
}


/* gallery-preview section */

.gallery {
	overflow: hidden;
	padding: 1rem;
	height: calc(100svh - var(--header-h));
	width: 100%;

	display: grid;

	a {
		height: 100%;
		width: 100%;
		overflow: hidden;

		.box {
			height: 100%;
			width: 100%;

			picture {
				height: 100%;
				width: 100%;

				img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: center;
					transition: transform 0.6s ease;
				}
			}
		}

		&:hover img {
			transform: scale(1.05);
		}
	}

	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		'large-img large-img second-img third-img'
		'large-img large-img fourth-img fifth-img';
	gap: 1rem;

	.first {
		grid-area: large-img;
	}
	.second {
		grid-area: second-img;
	}
	.third {
		grid-area: third-img;
	}
	.fourth {
		grid-area: fourth-img;
	}
	.fifth {
		grid-area: fifth-img;
	}
}



/* End - Gallery preview section */




/* FAQ section */

/* ── FAQ Section ── */

.section-faq-wrapper {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 5;
	background-color: var(--primary-white);
	background-color: #fdfdfd;
	color: var(--primary-black);
	box-sizing: border-box;
	padding-top: clamp(2rem, 5svh, 5rem);
}

.section-faq {
	padding-top: 10vh;
	padding-bottom: 5rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	font-family: var(--font-roboto);

	.faq-header-wrapper {
		width: 22.5%;
		flex-shrink: 0;
		margin: 0 !important;
	}

	.faq-header-inner {
		position: sticky;
		top: calc(var(--header-h) + 1rem);
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 1rem;

		.faq-header-title {
			padding: 0 0 1.5rem;
			margin: 0;
			width: 100%;
			font-size: clamp(1.5rem, 4vw, 4rem);
			font-family: var(--font-bebas-neue);
			text-transform: uppercase;
			letter-spacing: 0.25rem;
			line-height: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: rgb(from var(--color-primary-black) r g b / 1);
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		}
	}

	.faq-aside-nav {
		width: 100%;
		margin-top: 1.5rem;

		ul {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2px;
			list-style: none;
			padding: 0;
			margin: 0;
		}
	}

	.faq-nav-link {
		display: block;
		padding: 0.4rem 0.75rem;
		font-size: 0.875rem;
		font-family: var(--font-inter, inter, sans-serif);
		color: rgb(from var(--color-primary-black) r g b / 0.5);
		border-radius: 4px;
		text-align: center;
		text-decoration: none;
		transition: background 0.2s ease, color 0.2s ease;

		&:hover {
			background: rgba(0, 0, 0, 0.04);
			color: rgb(from var(--color-primary-black) r g b / 1);
		}
	}

	.faq-content-wrapper {
		padding-top: 0.5rem;
		padding-left: 1rem;
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		border-left: 1px solid rgb(from var(--color-primary-gray-2) r g b / 0.1);

		.faq-category-wrapper {
			display: flex;
			align-items: flex-start;
			padding: 3.5rem 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.06);

			&:last-of-type {
				border-bottom: none;
			}

			.faq-category-header-col {
				width: 30%;
				flex-shrink: 0;
				position: sticky;
				top: calc(var(--header-h) + 1rem);
				align-self: flex-start;
				padding: 0 2rem 0 1rem;

				.faq-category-header {
					font-size: clamp(1.1rem, 1.4vw, 1.5rem);
					font-weight: 600;
					font-family: var(--font-inter, inter, sans-serif);
					color: var(--faq-accent, rgb(from var(--color-primary-black) r g b / 0.85));
					text-transform: uppercase;
					letter-spacing: 0.05em;
					margin: 0;
				}

				.faq-category-desc {
					font-size: 0.875rem;
					color: #64748b;
					line-height: 1.65;
					margin-top: 0.75rem;
					max-width: 220px;
					font-family: var(--font-inter, inter, sans-serif);
				}
			}

			.faq-category-body {
				flex: 1;
				min-width: 0;
				padding-right: 2rem;
			}
		}
	}
}

/* ── FAQ category accent colors ── */
.faq-category-wrapper[data-category="adjusters"]         { --faq-accent: #2563eb; --faq-accent-soft: #eff4ff; }
.faq-category-wrapper[data-category="policyholders"]     { --faq-accent: #0d9488; --faq-accent-soft: #f0fdfa; }
.faq-category-wrapper[data-category="relocation-agents"] { --faq-accent: #7c3aed; --faq-accent-soft: #f5f3ff; }
.faq-category-wrapper[data-category="lease-legal"]       { --faq-accent: #b45309; --faq-accent-soft: #fffbeb; }
.faq-category-wrapper[data-category="emergency-support"] { --faq-accent: #dc2626; --faq-accent-soft: #fef2f2; }

.faq-item {
	cursor: pointer;
	position: relative;
	overflow: hidden;
	margin: 0 0 1.25rem 0;
	padding-left: 2rem;

	.faq-top-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 1.5rem;

		.faq-question-title {
			font-size: clamp(1rem, 1.25vw, 1.4rem);
			font-weight: 400;
			font-family: var(--font-inter);
			margin: 0;
			transition: color 0.22s ease;
		}

		.plus-block {
			width: 24px;
			height: 24px;
			border: 1px solid #e2e6ec;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			flex-shrink: 0;
			transition: border-color 0.22s ease;

			.plus-line {
				width: 12px;
				height: 2px;
				background-color: #94a3b8;
				border-radius: 2px;
				position: absolute;
				transition: background-color 0.22s ease;

				&.vertical {
					transform: rotate(90deg);
				}
			}
		}
	}

	.faq-answer-wrapper {
		height: 0;
		overflow: hidden;

		.faq-answer {
			font-size: 0.95rem;
			color: #64748b;
			line-height: 1.75;
			margin: 0;
			padding-top: 1rem;
			padding-bottom: 2rem;
			padding-left: 10px;
		}
	}

	.faq-track {
		width: 100%;
		height: 1px;
		position: relative;

		.faq-track-line {
			width: 100%;
			height: 100%;
			background-color: #e2e6ec;
			position: absolute;
		}

		.faq-track-progress {
			width: 0%;
			height: 100%;
			background-color: var(--faq-accent, var(--color-primary-black));
			position: absolute;
			left: 0;
			top: 0;
		}
	}
}

/* ── FAQ item hover / open accent states ── */
.faq-item:hover .faq-question-title,
.faq-item[aria-expanded="true"] .faq-question-title {
	color: var(--faq-accent, inherit);
}

.faq-item:hover .plus-block,
.faq-item[aria-expanded="true"] .plus-block {
	border-color: var(--faq-accent, #64748b);
}

.faq-item:hover .plus-line,
.faq-item[aria-expanded="true"] .plus-line {
	background-color: var(--faq-accent, #64748b);
}

.faq-see-all {
	display: block;
	margin-top: 1.25rem;
	text-align: right;
	font-size: 0.875rem;
	font-family: var(--font-inter, inter, sans-serif);
	color: rgb(from var(--color-primary-black) r g b / 0.5);
	text-decoration: none;
	transition: color 0.2s ease;

	&:hover {
		color: rgb(from var(--color-primary-black) r g b / 1);
	}
}

.faq-see-more-wrapper {
	display: flex;
	justify-content: center;
	padding: 3rem 0 1rem;
}

.faq-see-more-btn {
	display: inline-block;
	padding: 0.875rem 2.25rem;
	border: 1px solid rgb(from var(--color-primary-black) r g b / 0.6);
	border-radius: 4px;
	font-size: 0.9rem;
	font-family: var(--font-inter, inter, sans-serif);
	color: rgb(from var(--color-primary-black) r g b / 0.75);
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;

	&:hover {
		background: rgb(from var(--color-primary-black) r g b / 1);
		color: #fdfdfd;
		border-color: transparent;
	}
}

/* .spacer {
    height: 600svh;
    width: 100%;
    background-color: rgb(0 255 0 / 0.1);
    border: 4px solid yellow;
	visibility: hidden;
} */

.compare
{
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4rem;
	font-family: inter, san-serif;
	font-weight: 600;
}

/* Footer styles live in site-footer.css (shared component) */

/* -------------- */
/* RESPONSIVENESS */
/* -------------- */

@media (max-width: 1024px) {

	.hero-section-wrapper {
		/* header {
			nav {
				.nav-links {
					flex-direction: column;
					align-items: flex-end;
					gap: 1rem;
				}
			}
		} */

		/* .navbar {
			.right {
				opacity: 0;
				visibility: hidden;
				position: absolute;
				pointer-events: none;
				
			}
		} */

		.hero-wrapper {
			.hero {
				.hero-background {
					will-change: auto;
					img { will-change: auto; }
				}

				.hero-title-wrapper {
					bottom: unset;
					top: 50svh;
					display: flex;
					justify-content: center;
					transform: translateY(-50%);

					h1 {
						font-size: 4rem;
					}
				}
			}
		}


	}

	.intro {
		h2 {
			font-size: 4rem;
		}

		.part-a, .part-c {
			height: 50svh;
			padding: 0 0.75rem 0 0.5rem;
			box-sizing: border-box;
		}

		.part-a h2,
		.part-c h2 {
			width: 100%;
			font-size: clamp(3rem, 4vw, 5rem);
		}

		.team {
			height: auto;
			flex-direction: column;
			align-items: center;
			padding: 0 1rem;

			.part-b {
				height: auto;
				min-height: auto;
				overflow: visible;
			}

			.team-member {
				width: 100%;

				.team-member-name-initial {
					display: none;
				}

				.team-member-card {
					position: static;
					transform: none;
					width: 100%;
					height: 460px;

					.team-member-info {
						h2 {
							font-size: clamp(1.25rem, 5.5vw, 2rem);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.average-cost-text {
		font-size: 1.75rem;
	}

	.who-we-are {
		h2 {
			font-size: 2rem;
			letter-spacing: -0.05rem;
		}

		.wwa-animate-text {
			width: 100%;
		}

		/* Pin distance = window.innerHeight * 2 ≈ 200svh. With pinSpacing: false,
		   no layout space is added for the pin. margin-top must be ≥ 200svh so the
		   text section doesn't enter the viewport while the images are still pinned. */
		.wwa-services-copy {
			margin-top: 175svh;
		}
	}

	.what-we-do {
		h2 {
			font-size: 2rem;
			letter-spacing: -0.05rem;
		}

		.wwd-animate-text {
			width: 100%;
		}

		.wwd-services-copy {
			margin-top: 175svh;
		}
	}

	.where-we-host {
		h2 {
			font-size: 2rem;
			letter-spacing: -0.05rem;
		}

		.wwh-animate-text {
			width: 100%;
		}

		.wwh-services-copy {
			margin-top: 175svh;
		}
	}


	.amenities-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.table-wrapper-expenses {
		min-height: fit-content;

	}

	tr:nth-of-type(n) {
		td:nth-child(2) {
			border: 0px solid black;
			border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
		}
	}

	tr:not(:last-child) {
		td:last-child {
			border-bottom: 1px solid orange;
		}
	}

	th {
		display: none;
	}

	td {
		display: grid;
		grid-template-columns: 18ch auto;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		text-align: center;
		font-size: clamp(1.05rem, 2.75vw, 2.5rem);
	}

	td:first-child {
		padding-top: 2rem;
	}

	td:last-child {
		padding-bottom: 2rem;
	}

	td::before {
		font-weight: 400;
		text-transform: capitalize;
		font-size: 1.25rem;
	}

	td:nth-of-type(1)::before {
		content: 'Experience: ';
		text-align: left;
	}
	td:nth-of-type(2)::before {
		content: 'Standard Hotel: ';
	}
	td:nth-of-type(3)::before {
		content: 'The Craftsman Residence: ';
	}

	tr:last-of-type {
		td:nth-of-type(1)::before {
			content: '';
		}
	}

	.gallery {
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1rem;
	}


	.divider-content {
		h2 {
			line-height: 1.15;
			letter-spacing: 0.08rem;
		}

		h2 span {
			font-size: var(--mobile-h2-size);
		}
	}

	/* Strikethrough: tighten extension on smaller text */
	.dashed-strikethrough::after {
		left: -12px;
		height: 5px;
	}

	/* ── FAQ Section – Tablet/Mobile (≤1024px) ── */

	.section-faq {
		flex-direction: column;
		padding-top: 0;
	}

	.section-faq .faq-header-wrapper {
		width: 100%;
		margin: 0 !important;
		padding: 2rem 1.5rem 0;
	}

	.section-faq .faq-header-inner {
		position: static;
		height: auto;
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
		text-align: left;
		gap: 1.25rem;

		.faq-header-title {
			display: flex;
			width: 100%;
			align-items: center;
			text-align: center;
			font-size: clamp(1.75rem, 5vw, 2.5rem);
			padding-bottom: 0;
			border-bottom: none;
			letter-spacing: 0.15rem;
		}
	}

	.section-faq .faq-aside-nav {
		margin-top: 0;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);
		mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent 100%);

		&::-webkit-scrollbar {
			display: none;
		}

		ul {
			flex-direction: row;
			gap: 0.375rem;
			white-space: nowrap;
			padding-bottom: 0.5rem;
			padding-right: 3rem;
		}
	}

	.section-faq .faq-nav-link {
		display: inline-block;
		padding: 0.375rem 1rem;
		border-radius: 99px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		font-size: 0.8125rem;
		white-space: nowrap;
	}

	.section-faq .faq-content-wrapper {
		width: 100%;
		padding-left: 0;
		border-left: none;
		padding-top: 1rem;
	}

	.section-faq .faq-content-wrapper .faq-category-wrapper {
		flex-direction: column;
		padding: 2.5rem 1.5rem;

		.faq-category-header-col {
			box-sizing: border-box;
			width: 100%;
			position: static;
			top: unset;
			align-self: stretch;
			padding: 1rem 1rem 1.25rem;
			margin-bottom: 1.5rem;
			background-color: var(--faq-accent-soft, #f7f8fa);
			border-left: 3px solid var(--faq-accent, rgba(0, 0, 0, 0.08));
			border-radius: 0.375rem;
			border-bottom: none;

			.faq-category-desc {
				max-width: none;
			}
		}

		.faq-category-body {
			box-sizing: border-box;
			width: 100%;
			padding-right: 0;
		}
	}

}


@media (max-width: 768px) {

	.average-cost-text {
		font-size: 1.75rem;
	}

	.amenities-header {
		.amenities-title {
			font-size: 1.5rem;
		}
		.amenities-subtitle {
			font-size: 1.20rem;
		}
	}

	.amenities-grid {
		grid-template-columns: 1fr;
	}

	.amenity-card {
		/* flex-direction: row;
		align-items: flex-start;
		gap: 1rem; */
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 1rem;

		.amenity-name {
			font-size: 1.15rem;
			text-align: center;
		}

		.amenity-desc {
			font-size: 1rem;
			text-align: center;
		}
	}

	.amenity-icon {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}

	/* Section dividers don't need full 100svh on narrow screens */
	.section-divider {
		height: auto;
		min-height: 60svh;
		padding: 4rem 1.5rem;
	}

	/* ── FAQ Section – Mobile (≤768px) ── */

	.section-faq .faq-header-wrapper {
		padding: 1.75rem 1rem 0;
	}

	.section-faq .faq-content-wrapper .faq-category-wrapper {
		padding: 2rem 1rem;
	}

	.faq-item {
		padding-left: 0;
		margin-bottom: 1.75rem;

		.faq-top-wrap {
			padding-bottom: 0.75rem;

			.faq-question-title {
				font-size: clamp(1rem, 4vw, 1.15rem);
			}
		}

		.faq-answer-wrapper .faq-answer {
			padding: 0.75rem 0 1rem;
			font-size: 0.95rem;
		}
	}
}


@media (max-width: 480px) {
		.average-cost-text {
			font-size: 1.75rem;
		}

	/* ── FAQ Section – Small Mobile (≤480px) ── */

	.section-faq .faq-header-wrapper {
		padding: 1.5rem 1rem 0;
	}

	.section-faq .faq-header-inner .faq-header-title {
		font-size: clamp(1.5rem, 9vw, 1.75rem);
		letter-spacing: 0.1rem;
	}

	.section-faq .faq-nav-link {
		padding: 0.3rem 0.75rem;
		font-size: 0.75rem;
	}

	.section-faq .faq-content-wrapper .faq-category-wrapper {
		padding: 1.75rem 1rem;
	}

}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	.gallery a img {
		transition: none;
	}

	.site-header {
		transition: none;
	}
}