:root {
	color-scheme: light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var( --gb-off-white );
	color: var( --gb-charcoal );
	font-family: var( --gb-font-body );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus {
	color: var( --gb-deep-blue-grey-cta );
}

:where( a, button, input, select, textarea, summary, [tabindex]:not( [tabindex="-1"] ) ):focus-visible {
	outline: 2px solid var( --gb-focus-ring );
	outline-offset: 3px;
}

.gb-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var( --gb-font-heading );
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --gb-sage );
}

.gb-section-header {
	display: grid;
	gap: 0.85rem;
	max-width: 48rem;
}

.gb-section-header__title {
	margin: 0;
	font-family: var( --gb-font-heading );
	font-size: clamp( 1.9rem, 4vw, 3.2rem );
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.08;
	color: var( --gb-charcoal );
}

.gb-section-header__blurb {
	max-width: 42rem;
	font-size: 1.02rem;
	color: rgba( 51, 51, 51, 0.86 );
}

.gb-section-header__blurb p {
	margin: 0;
}

.gb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.9rem 1.35rem;
	font-family: var( --gb-font-heading );
	font-size: 0.86rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
}

.gb-button:hover,
.gb-button:focus-visible {
	transform: translateY( -1px );
}

.gb-button:focus-visible {
	outline: 2px solid var( --gb-focus-ring );
	outline-offset: 3px;
}

.gb-button--primary {
	background: var( --gb-sage );
	border-color: var( --gb-sage );
	color: #ffffff;
	box-shadow: 0 10px 24px rgba( 138, 154, 91, 0.18 );
}

.gb-button--secondary {
	background: transparent;
	border-color: var( --gb-soft-sage-border );
	color: var( --gb-charcoal );
}

.gb-button--ghost {
	background: rgba( 255, 255, 255, 0.72 );
	border-color: rgba( 51, 51, 51, 0.12 );
	color: var( --gb-charcoal );
}

.gb-button--text {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --gb-deep-blue-grey-cta );
	letter-spacing: 0;
	text-transform: none;
}

.gb-room-image {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	min-height: 260px;
	border-radius: 28px;
	background: var( --gb-room-image-gradient, linear-gradient( 135deg, var( --gb-warm-highlight ), var( --gb-sage ) ) );
	box-shadow: 0 18px 42px rgba( 51, 51, 51, 0.08 );
	aspect-ratio: 4 / 3;
	padding: 1rem;
}

.gb-room-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.08 ), rgba( 51, 51, 51, 0.08 ) );
}

.gb-room-image__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.76 );
	font-family: var( --gb-font-heading );
	font-size: 0.68rem;
	font-weight: 300;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var( --gb-charcoal );
}

.gb-room-image--sage {
	--gb-room-image-gradient: linear-gradient( 135deg, #f8f7f5 0%, #e2e7d3 45%, #8a9a5b 100% );
}

.gb-room-image--mist {
	--gb-room-image-gradient: linear-gradient( 135deg, #ffffff 0%, #edf1ee 48%, #d4ddda 100% );
}

.gb-room-image--sand {
	--gb-room-image-gradient: linear-gradient( 135deg, #fafafa 0%, #efe4d6 48%, #d8cfc0 100% );
}

.gb-room-image--charcoal {
	--gb-room-image-gradient: linear-gradient( 135deg, #f3f3f1 0%, #d1d5d1 46%, #333333 100% );
}

.gb-room-image--deep {
	--gb-room-image-gradient: linear-gradient( 135deg, #edf1f2 0%, #ced8dc 46%, #4a5f6a 100% );
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}