/* =========================================================================
   Nhật Lệ Green Park

   Brand system from the Nhật Lệ Green Park design guideline: a deep forest-green
   ground, a single gold accent, and warm bone type. The page is locked to this
   one palette; there is no light variant, because the brand has none.

   Radius system: cards and media 4px, inputs 4px, buttons 2px. Deliberately
   near-square throughout, matching the brochure's print geometry.
   ========================================================================= */

:root {
	/* Ground: deep forest-green ramp anchored on brand Deep Forest Green #0C3E2F.
	   Token names kept (ink/moss) so every existing usage still resolves. */
	--ink:        #0C3E2F;   /* brand deep forest: header, footer, contact */
	--ink-soft:   #114633;   /* raised surfaces on ink */
	--moss-deep:  #15503C;   /* alternating section ground */
	--moss:       #1A5A43;   /* default page ground */
	--moss-lift:  #297053;   /* hairlines and raised tiles */

	/* Brand secondary green (guideline Olive #5F8B2C). Available for green
	   accents; the primary accent stays gold. */
	--olive:      #5F8B2C;

	/* Type */
	/* All three clear WCAG AA (4.5:1) against the lightest ground on the page,
	   --moss, so tertiary text stays legible in every section. */
	--bone:       #F4F1E6;   /* primary text    18.3:1 on --moss */
	--bone-dim:   #D7D3C0;   /* secondary text   5.4:1 on --moss */
	--bone-mute:  #C7C5B4;   /* tertiary text    4.6:1 on --moss */

	/* Accent: gold, and gold only */
	--gold:       #C9A24A;
	--gold-lift:  #E4C67E;
	--gold-deep:  #9A7628;

	/* Geometry */
	--r-sm: 4px;
	--r-md: 4px;
	--r-btn: 2px;

	--shell: 1320px;
	--gutter: clamp(1.25rem, 4vw, 3rem);

	/* Vertical rhythm: VISUAL_DENSITY 4 */
	--section-y: clamp(4.5rem, 9vw, 8rem);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* REM is the brand primary typeface for both display and UI. */
	--font-display: "REM", "Helvetica Neue", Arial, sans-serif;
	--font-ui: "REM", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Height of the sticky site header; sticky offsets sit below it. */
	/* Scrolled (compact) height; the resting header is taller, see below. */
	--header-h: 72px;

	/* z-index scale. Nothing outside this list may set z-index. */
	--z-tab-rail: 30;
	--z-callbar: 40;
	--z-fab: 42;
	--z-nav-panel: 45;
	--z-header: 50;
}

/* ---------------------------------------------------------------- reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--moss);
	color: var(--bone);
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--gold-lift);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.nlgp-icon { flex: none; }

.u-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: var(--z-header);
	padding: 0.75rem 1.25rem;
	background: var(--gold);
	color: var(--ink);
	font-weight: 600;
	border-radius: var(--r-btn);
	transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------- sections */

.section { padding-block: var(--section-y); }
.section--moss { background: var(--moss-deep); }
.section--ink  { background: var(--ink); }
.section--flush { padding-block: 0; }

/* Light-background sections: remap the light text tokens to dark ones so all
   content (titles, leads, captions, hairlines) stays legible. Because the
   theme colours are consumed through variables, one override cascades to every
   descendant. Gold accents shift to the deeper gold for contrast on light. */
.section--text-dark,
.quicklinks--text-dark {
	--bone:       #0C3E2F;
	--bone-dim:   #3A5148;
	--bone-mute:  #5A6B62;
	--moss-lift:  rgba(12, 62, 47, 0.16);
	--gold-lift:  var(--gold-deep);
	color: var(--ink);
}
.section--text-dark .section-lead,
.section--text-dark .section-title { color: var(--ink); }

.section-title {
	font-size: clamp(2rem, 4.1vw, 3.25rem);
	font-weight: 800;
	max-width: 20ch;
}

.section-lead {
	margin-top: 1.25rem;
	max-width: 62ch;
	color: var(--bone-dim);
	font-size: clamp(1rem, 1.35vw, 1.125rem);
}

/* A gold hairline sits above every section title. It replaces the small
   uppercase category label that would otherwise repeat on every section. */
.section-title::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: 1.5rem;
	background: linear-gradient(90deg, var(--gold), transparent);
}

/* --------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
	            color 0.25s var(--ease), transform 0.18s var(--ease);
}

.btn__icon { transition: transform 0.25s var(--ease); }

.btn--gold {
	background: var(--gold);
	color: #241C06;          /* 8.4:1 on the gold fill */
	border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-lift); border-color: var(--gold-lift); }
.btn--gold:hover .btn__icon { transform: translateX(3px); }
.btn--gold:active { transform: translateY(1px); }

.btn--ghost {
	background: rgba(244, 241, 230, 0.06);
	color: var(--bone);
	border-color: rgba(244, 241, 230, 0.4);
	backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(244, 241, 230, 0.16); border-color: var(--bone); }
.btn--ghost:active { transform: translateY(1px); }

.btn--light {
	background: var(--bone);
	color: var(--ink);
	border-color: var(--bone);
}
.btn--light:hover { background: #fff; border-color: #fff; }
.btn--light:active { transform: translateY(1px); }

.btn--sm { padding: 0.68rem 1.15rem; font-size: 0.875rem; }

/* Attention pulse for the sign-up buttons. The fill never fades (unlike a
   flashing background, the label stays readable the whole time): a ring
   ripples out and a soft highlight sweeps across. The second button runs half
   a cycle behind, so the pair alternates instead of blinking in unison. */
.btn--pulse {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	--pulse-rgb: 201, 162, 74;
	animation: nlgp-pulse-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.btn--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
	transform: translateX(-130%);
	animation: nlgp-pulse-sheen 2.4s ease-in-out infinite;
	pointer-events: none;
}
.btn--pulse-alt { --pulse-rgb: 244, 241, 230; animation-delay: 1.2s; }
.btn--pulse-alt::after { animation-delay: 1.2s; }
.btn--pulse:hover,
.btn--pulse:focus-visible,
.btn--pulse:hover::after,
.btn--pulse:focus-visible::after { animation-play-state: paused; }

@keyframes nlgp-pulse-ring {
	0%   { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(var(--pulse-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0); }
}
@keyframes nlgp-pulse-sheen {
	0%, 45% { transform: translateX(-130%); }
	85%, 100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
	.btn--pulse,
	.btn--pulse::after { animation: none; }
	.btn--pulse::after { display: none; }
}
.btn--block { width: 100%; margin-top: 0.5rem; }

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: rgba(12, 62, 47, 0.72);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid rgba(201, 162, 74, 0.16);
	transition: background-color 0.3s var(--ease);
}

@media (prefers-reduced-transparency: reduce) {
	.site-header { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.site-header.is-scrolled { background: rgba(12, 62, 47, 0.95); }

/* The resting header is 96px with a logo the size of the footer's. Once the
   page scrolls it compacts to 72px; the lost height is handed back as margin so
   the content underneath does not jump. */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.6vw, 2rem);
	height: 96px;
	max-width: 1480px;
	padding-inline: clamp(1.25rem, 2.2vw, 2.25rem);
	transition: height 0.3s var(--ease);
}
.site-header { transition: background-color 0.3s var(--ease), margin-bottom 0.3s var(--ease); }
.site-header.is-scrolled { margin-bottom: 24px; }
.site-header.is-scrolled .site-header__inner { height: 72px; }

.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: none;
	margin-right: auto;
}
.brand__mark { width: auto; height: 40px; }
.brand__logo { display: block; width: auto; height: 80px; transition: height 0.3s var(--ease); }
.site-header.is-scrolled .brand__logo { height: 56px; }
.brand__type { display: grid; line-height: 1.05; }
.brand__name {
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--bone);
}
.brand__sub {
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.45vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* wp_nav_menu() emits plain <a>, so both markup shapes share this rule. */
.site-nav__link,
.site-nav__list a {
	position: relative;
	display: block;
	padding-block: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bone);
	white-space: nowrap;
	transition: color 0.22s var(--ease);
}
.site-nav__link::after,
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.site-nav__link:hover,
.site-nav__list a:hover { color: var(--gold-lift); }
.site-nav__link:hover::after,
.site-nav__list a:hover::after,
.site-nav__link.is-current::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after { transform: scaleX(1); }
.site-nav__link.is-current,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { color: var(--gold-lift); }

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.site-header__ctas { display: flex; align-items: center; gap: 0.6rem; }

/* The hotline shrinks to its icon where the full bar would not fit. */
@media (max-width: 1440px) {
	.hotline__number { display: none; }
	.hotline { padding: 0.55rem; border: 1px solid rgba(201, 162, 74, 0.4); border-radius: var(--r-btn); }
}

.hotline {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--gold-lift);
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: color 0.22s var(--ease);
}
.hotline:hover { color: var(--bone); }

.nav-toggle {
	display: none;
	padding: 0.4rem;
	background: none;
	border: 1px solid rgba(244, 241, 230, 0.24);
	border-radius: var(--r-btn);
	color: var(--bone);
	cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Raised from 1080px when the nav grew to seven items: below this width the
   bar no longer fits on one line. */
.site-header.is-measuring,
.site-header.is-measuring * { transition: none !important; }

/* Compact header on tablets and phones. */
@media (max-width: 1160px) {
	.site-header__inner { height: 72px; }
	.site-header.is-scrolled { margin-bottom: 8px; }
	.site-header.is-scrolled .site-header__inner { height: 64px; }
	.brand__logo { height: 54px; }
	.site-header.is-scrolled .brand__logo { height: 46px; }
}

/* Collapsed navigation: the menu moves into a drop-down panel under the bar.
   Set by a width check in header.php/app.js whenever the full bar would not
   fit on one line (more menu items, longer English labels, narrower screens),
   so there is no fixed breakpoint to keep in sync with the menu. */
.site-header.is-collapsed .nav-toggle { display: block; }
.site-header.is-collapsed .site-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--z-nav-panel);
	background: var(--ink);
	border-bottom: 1px solid rgba(201, 162, 74, 0.2);
	display: none;
}
.site-header.is-collapsed .site-nav.is-open { display: block; }
.site-header.is-collapsed .site-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0.5rem var(--gutter) 1.5rem;
}
.site-header.is-collapsed .site-nav__link,
.site-header.is-collapsed .site-nav__list a {
	padding-block: 0.95rem;
	font-size: 1rem;
	border-bottom: 1px solid rgba(244, 241, 230, 0.08);
}
.site-header.is-collapsed .site-nav__link::after,
.site-header.is-collapsed .site-nav__list a::after { display: none; }

/* Phones: both calls to action move to the bottom call bar. */
@media (max-width: 700px) {
	.site-header__ctas { display: none; }
}

@media (max-width: 480px) {
	.site-header__inner,
	.site-header.is-scrolled .site-header__inner { height: 64px; }
	.site-header.is-scrolled { margin-bottom: 0; }
	.brand__logo,
	.site-header.is-scrolled .brand__logo { height: 46px; }
}

@media (max-width: 560px) {
	.brand__mark { height: 34px; }
	.brand__name { font-size: 1.02rem; }
}

/* ------------------------------------------------------- language switch */

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.lang-switch__opt {
	color: inherit;
	opacity: 0.6;
	padding: 0.15rem 0.15rem;
	transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-switch__opt:hover { opacity: 1; }
.lang-switch__opt.is-active { opacity: 1; color: var(--gold); }
.lang-switch__sep { opacity: 0.35; }

.lang-switch--header { color: var(--bone); flex: none; }
@media (max-width: 560px) {
	.lang-switch--header { order: -1; }
}
.lang-switch--footer { color: var(--bone-mute); }

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(80dvh, 760px);
	padding-top: 6rem;   /* clears the sticky header; well under the pt-24 cap */
	padding-bottom: clamp(3rem, 7vw, 6rem);
	overflow: hidden;
	background: var(--ink);
}

.hero__media { position: absolute; inset: 0; }
.hero__picture, .hero__picture img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 62%;
}
/* The aerial is bright edge to edge, so the scrim runs along the copy diagonal
   rather than washing the whole frame: dense across the bottom-left where the
   headline, subtext and CTAs sit, clear by the upper right so the masterplan
   still reads as a photograph. Verified against the brightest backdrop pixels
   behind each text run. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* carries the sticky header only */
		linear-gradient(180deg, rgba(12, 62, 47, 0.55) 0%, rgba(12, 62, 47, 0.00) 20%),
		linear-gradient(75deg,
			rgba(24, 29, 18, 0.93) 0%,
			rgba(24, 29, 18, 0.87) 45%,
			rgba(24, 29, 18, 0.62) 62%,
			rgba(24, 29, 18, 0.20) 78%,
			rgba(24, 29, 18, 0.00) 92%);
}

/* Below 700px the copy spans the full width and the headline wraps to three
   lines, so the wash becomes vertical and reaches full strength by the time the
   first line starts. The portrait crop keeps its sky and skyline above that. */
@media (max-width: 700px) {
	.hero__media::after {
		background:
			linear-gradient(180deg, rgba(12, 62, 47, 0.55) 0%, rgba(12, 62, 47, 0.00) 16%),
			linear-gradient(180deg,
				rgba(20, 25, 15, 0.00) 18%,
				rgba(20, 25, 15, 0.46) 34%,
				rgba(20, 25, 15, 0.88) 48%,
				rgba(20, 25, 15, 0.94) 70%,
				rgba(20, 25, 15, 0.96) 100%);
	}
}

.hero__body { position: relative; }

.hero__title {
	max-width: 16ch;
	font-size: clamp(2.6rem, 6.6vw, 5.25rem);
	font-weight: 900;
	line-height: 1.06;
	text-shadow: 0 2px 30px rgba(20, 24, 14, 0.5);
}

/* Mixed-type headline: small serif + huge REM Black + signature script, per the
   brand mock. Sizes are relative to the h1 font-size so the composition scales. */
.hero__title--mix {
	font-size: clamp(2.9rem, 8.4vw, 6.25rem);
	line-height: 0.94;
	/* Shrink the block to its widest line so the centred script sits over the
	   text, not centred across the whole column. */
	width: fit-content;
	max-width: 100%;
}
.hero__hline { display: block; }
.hero__w-huge {
	font-family: var(--font-display);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--bone);
	letter-spacing: -0.015em;
	line-height: 0.9;
}
.hero__w-huge--block { display: block; }
.hero__w-serif {
	font-family: "UTM Americana", "Times New Roman", serif;
	font-weight: 400;
	text-transform: none;
	font-size: 0.42em;
	letter-spacing: 0;
	color: var(--bone);
	margin-right: 0.18em;
	vertical-align: baseline;
}
.hero__w-script {
	display: block;
	text-align: center;       /* centred under the huge lines, per the mock */
	font-family: "Yustine", "Segoe Script", cursive;
	font-weight: 400;
	text-transform: none;
	font-size: 0.62em;
	line-height: 1;
	letter-spacing: 0;
	color: var(--bone);
	margin: 0.02em 0 0.04em;
	padding-bottom: 0.06em;   /* clearance for the "ữ"/"ò" descenders */
}

.hero__lead {
	margin-top: 1.5rem;
	max-width: 44ch;
	color: var(--bone-dim);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	text-shadow: 0 1px 18px rgba(20, 24, 14, 0.55);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.25rem;
}

/* The fixed call bar overlays the bottom of the viewport below 700px, so the
   hero has to reserve that height or its second CTA lands underneath it. */
@media (max-width: 700px) {
	.hero {
		min-height: 92dvh;
		padding-top: 5rem;
		padding-bottom: calc(2.25rem + 4.5rem);
	}
	.hero__actions { margin-top: 1.75rem; }
	.hero__actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- investors */

.investors { background: var(--ink); border-bottom: 1px solid rgba(201, 162, 74, 0.14); }

.investors__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	padding-block: 1.75rem;
}

.investors__label {
	flex: none;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-mute);
}

.investors__list {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.investors__card {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--bone);
}
.investors__logo {
	flex: none;
	height: 96px;
	width: auto;
}
.investors__name {
	max-width: 17ch;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.investors__card--link { transition: color 0.25s var(--ease); }
.investors__card--link .investors__name {
	text-decoration: underline;
	text-decoration-color: rgba(201, 162, 74, 0.5);
	text-underline-offset: 4px;
}
.investors__card--link:hover { color: var(--gold-lift); }
.investors__card--link:hover .investors__name { text-decoration-color: currentColor; }

@media (max-width: 640px) {
	.investors__inner { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
	.investors__list { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.investors__logo { height: 72px; }
	.investors__name { font-size: 0.9375rem; }
}

/* ----------------------------------------------------------------- intro */

.intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
	.intro__grid {
		grid-template-columns: 1.05fr 0.95fr;   /* asymmetric, not a 50/50 split */
		align-items: stretch;
		gap: clamp(3rem, 6vw, 6rem);
	}
	/* The copy column is the taller of the two. Pinning the render inside its
	   own column keeps it beside whichever paragraph is being read, instead of
	   leaving a void under a short figure. */
	.intro__sticky { position: sticky; top: 104px; }
}

.intro__lead {
	margin-top: 1.75rem;
	max-width: 60ch;
	color: var(--bone-dim);
	font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}

.intro__body { margin-top: 1.25rem; max-width: 60ch; color: var(--bone-mute); }

.intro__beliefs {
	display: grid;
	gap: 0.9rem;
	margin-top: 2.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--moss-lift);
	max-width: 56ch;
}
.intro__beliefs li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--bone-dim);
}
.intro__beliefs li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.72em;
	width: 12px; height: 1px;
	background: var(--gold);
}

.intro__figure { margin: 0; }
.intro__picture img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-md);
}
.intro__caption {
	margin-top: 0.9rem;
	color: var(--bone-mute);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------- location */

.location__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.location__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.location__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.location__map { margin: 0; }
.location__picture img {
	width: 100%;
	border-radius: var(--r-md);
	background: var(--moss);
}
.location__map-caption {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.9rem;
	color: var(--bone-mute);
	font-size: 0.875rem;
}
.location__pin { color: var(--gold); }
.location__map-caption { flex-wrap: wrap; }
.location__maps-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
	color: var(--gold);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.location__maps-link:hover { color: var(--gold-lift); }

/* Live Google map under the map image and travel times. */
.location__embed {
	margin-top: clamp(2rem, 4vw, 3rem);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--moss);
}
.location__embed iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 480px);
	border: 0;
}

.location__times-title {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.18;
	padding-bottom: 0.06em;
	color: var(--gold-lift);
	margin-bottom: 1.75rem;
}

.times { display: grid; }

.times__row {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	padding-block: 0.95rem;
	border-bottom: 1px solid var(--moss-lift);
}
.times__row:first-child { border-top: 1px solid var(--moss-lift); }

.times__min {
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 0.28rem;
	width: 4.6rem;
}
.times__num {
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}
.times__unit { font-size: 0.75rem; color: var(--bone-mute); }
.times__place { color: var(--bone); font-size: 1rem; }

.location__beach { margin: 1.75rem 0 0; }
.location__beach-picture img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-md);
}
.location__beach-caption {
	margin-top: 0.7rem;
	color: var(--bone-mute);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------- potential */

.potential__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

.potential__figure { margin: 0; }
.potential__picture img,
.potential__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-md);
	background: var(--moss-deep);
}
.potential__caption {
	margin-top: 0.7rem;
	color: var(--bone-mute);
	font-size: 0.8125rem;
}

/* Two 2:1 panoramas side by side. */
.potential__pair { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.potential__pair .potential__picture img,
.potential__pair .potential__img { aspect-ratio: 2 / 1; }
@media (min-width: 800px) { .potential__pair { grid-template-columns: 1fr 1fr; } }

.potential__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(201, 162, 74, 0.28);
}
.potential__stat {
	padding: 1.1rem 1rem 0 0;
	min-width: 0;
}
.potential__stat + .potential__stat {
	padding-left: clamp(0.75rem, 2vw, 1.5rem);
	border-left: 1px solid var(--moss-lift);
}
.potential__stat-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.potential__stat-num {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.05;
	color: var(--gold-lift);
	font-variant-numeric: tabular-nums;
}
.potential__stat-unit { font-size: 0.95rem; font-weight: 500; color: var(--gold); }
.potential__stat-label { display: block; margin-top: 0.45rem; font-size: 0.875rem; color: var(--bone-dim); }

/* Sports centre: copy beside a large render with a smaller one overlapping. */
.potential__feature {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	align-items: center;
}
.potential__feature-title {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bone);
}
.potential__feature-title::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: 1.1rem;
	background: var(--gold);
}
.potential__feature-body { margin-top: 1rem; color: var(--bone-dim); max-width: 48ch; }

.potential__stack { position: relative; }
.potential__figure--main .potential__picture img,
.potential__figure--main .potential__img { aspect-ratio: 16 / 9; }
.potential__figure--side { margin-top: 1rem; }
.potential__figure--side .potential__picture img,
.potential__figure--side .potential__img { aspect-ratio: 16 / 9; }

@media (min-width: 900px) {
	.potential__feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.potential__stack { padding-bottom: 18%; }
	.potential__figure--main { width: 82%; }
	.potential__figure--side {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 46%;
		margin: 0;
		border: 4px solid var(--ink);
		border-radius: calc(var(--r-md) + 4px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	}
	.potential__stack-caption { position: absolute; left: 0; bottom: 0; width: 50%; margin: 0; }
}

/* Phones: one compact row per figure, value left and label right. */
@media (max-width: 560px) {
	.potential__stats { grid-template-columns: 1fr; }
	.potential__stat,
	.potential__stat + .potential__stat {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.8rem 0;
		border-left: 0;
	}
	.potential__stat + .potential__stat { border-top: 1px solid var(--moss-lift); }
	.potential__stat-num { font-size: 1.6rem; }
	.potential__stat-label { margin-top: 0; text-align: right; }
}

/* ------------------------------------------------ story photos (Giới thiệu) */

.story-gallery {
	display: grid;
	gap: 1rem;
	margin: 1.75rem 0 2.25rem;
}
@media (min-width: 700px) {
	.story-gallery--2,
	.story-gallery--4 { grid-template-columns: 1fr 1fr; }
	.story-gallery--3 { grid-template-columns: repeat(3, 1fr); }
}
.story-gallery__item { margin: 0; }
.story-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--r-md);
}
.story-gallery__caption { margin-top: 0.55rem; font-size: 0.8125rem; color: var(--bone-mute); }

/* -------------------------------------------------------------- overview */

.overview__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 700px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	/* Six cells, six pieces of content, no filler tile. */
	.bento {
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas:
			"plan plan  s1 s2"
			"plan plan  s3 s4"
			"land land  land land";
	}
	.bento__cell--plan   { grid-area: plan; }
	.bento__cell--stat-1 { grid-area: s1; }
	.bento__cell--stat-2 { grid-area: s2; }
	.bento__cell--stat-3 { grid-area: s3; }
	.bento__cell--stat-4 { grid-area: s4; }
	.bento__cell--landuse { grid-area: land; }
}

.bento__cell {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	background: var(--moss-deep);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
}

.bento__cell--plan {
	display: flex;
	flex-direction: column;
	margin: 0;               /* <figure> default is margin:1em 40px — that was
	                            pushing the render 40px right and 16px down,
	                            out of line with the stat cards and land-use box. */
	padding: 0;
	overflow: hidden;
	/* Fill the two rows this cell spans, so the render matches the stat column
	   height instead of shrinking to the image's own ratio (align-self:stretch
	   is not enough for a flex item spanning auto grid rows). */
	height: 100%;
	/* image cell: real visual variation, not another text card */
	background: #E9E7DC;
	border-color: rgba(201, 162, 74, 0.3);
}
.bento__picture { flex: 1; min-height: 0; }
.bento__picture img {
	width: 100%; height: 100%;
	min-height: 240px;
	object-fit: cover;
	object-position: 50% 46%;
}
.bento__plan-caption {
	padding: 0.85rem 1.25rem;
	background: var(--ink);
	color: var(--bone-dim);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bento__cell--stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 170px;
	/* tinted ground so the stat cells are not flat cards */
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(201, 162, 74, 0.14) 0%, transparent 60%),
		var(--moss-deep);
}

.stat__value { display: flex; align-items: baseline; gap: 0.3rem; }
.stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 3.4vw, 2.9rem);
	font-weight: 500;
	line-height: 1;
	color: var(--gold-lift);
	font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: 0.95rem; font-weight: 500; color: var(--gold); }
.stat__label { margin-top: 0.65rem; font-weight: 600; color: var(--bone); }
.stat__note { margin-top: 0.2rem; font-size: 0.8125rem; color: var(--bone-mute); }

.bento__cell--landuse {
	background:
		linear-gradient(100deg, rgba(201, 162, 74, 0.1), transparent 55%),
		var(--ink-soft);
}
.bento__cell-title {
	font-size: 1.125rem;
	font-weight: 600;
	font-family: var(--font-ui);
	letter-spacing: 0.02em;
	color: var(--bone);
	margin-bottom: 1.15rem;
}

.landuse { display: grid; gap: 1rem; }
@media (min-width: 700px) { .landuse { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.landuse__row dt { font-size: 0.8125rem; color: var(--bone-mute); }
.landuse__row dd {
	margin-top: 0.15rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- amenities */

.amenities__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.mosaic {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

/* 12 tiles in 2 columns is 6 full rows: no spans, no holes. */
@media (min-width: 600px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }

/* At desktop the tiles land on a fixed 4x4 map. Two tiles are double-wide and
   two are double-tall, so 12 tiles occupy exactly 16 cells with nothing left
   blank. The order of nlgp_amenities() feeds these areas. */
@media (min-width: 1000px) {
	.mosaic--fixed {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(4, 200px);
		grid-template-areas:
			"a a b c"
			"d e b f"
			"g g h i"
			"j k h l";
	}
	.mosaic--flow { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }
	.mosaic--fixed .mosaic__tile:nth-child(1)  { grid-area: a; }
	.mosaic--fixed .mosaic__tile:nth-child(2)  { grid-area: b; }
	.mosaic--fixed .mosaic__tile:nth-child(3)  { grid-area: c; }
	.mosaic--fixed .mosaic__tile:nth-child(4)  { grid-area: d; }
	.mosaic--fixed .mosaic__tile:nth-child(5)  { grid-area: e; }
	.mosaic--fixed .mosaic__tile:nth-child(6)  { grid-area: f; }
	.mosaic--fixed .mosaic__tile:nth-child(7)  { grid-area: g; }
	.mosaic--fixed .mosaic__tile:nth-child(8)  { grid-area: h; }
	.mosaic--fixed .mosaic__tile:nth-child(9)  { grid-area: i; }
	.mosaic--fixed .mosaic__tile:nth-child(10) { grid-area: j; }
	.mosaic--fixed .mosaic__tile:nth-child(11) { grid-area: k; }
	.mosaic--fixed .mosaic__tile:nth-child(12) { grid-area: l; }
}

.mosaic__tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--ink-soft);
	min-height: 200px;
}

/* The whole tile is the control, so the button fills it. */
.mosaic__button {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: zoom-in;
	text-align: left;
}
.mosaic__button:focus-visible { outline-offset: -3px; }

/* No scripting means no lightbox, so stop advertising one. */
.no-js .mosaic__button { cursor: default; }
.no-js .mosaic__zoom { display: none; }

.mosaic__picture, .mosaic__picture img, .mosaic__img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.mosaic__picture img, .mosaic__img { transition: transform 0.7s var(--ease); }
.mosaic__tile:hover .mosaic__picture img,
.mosaic__tile:hover .mosaic__img { transform: scale(1.05); }

/* An amenity saved without a featured image still needs a readable tile. */
.mosaic__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 110% at 20% 0%, rgba(201, 162, 74, 0.16), transparent 62%),
		var(--ink-soft);
}

/* Small corner affordance so the tiles read as openable, not just decorative. */
.mosaic__zoom {
	position: absolute;
	top: 0.7rem; right: 0.7rem;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(16, 20, 11, 0.66);
	border: 1px solid rgba(228, 198, 126, 0.5);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.mosaic__zoom::before,
.mosaic__zoom::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	background: var(--gold-lift);
	transform: translate(-50%, -50%);
}
.mosaic__zoom::before { width: 12px; height: 1.5px; }
.mosaic__zoom::after  { width: 1.5px; height: 12px; }

.mosaic__tile:hover .mosaic__zoom,
.mosaic__button:focus-visible .mosaic__zoom { opacity: 1; transform: scale(1); }

/* The scrim belongs on the button, not the tile, and has to be ::before.
   Paint order inside the button is: static content (the image), then absolutely
   positioned children in tree order (::before, then the caption). Putting it on
   the tile would let the image paint over it; making it ::after would let it
   paint over the caption and veil the text. */
.mosaic__button::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Measured from the bottom edge in pixels, not percentages: the tiles are
	   200px and 412px tall, and a percentage ramp leaves the caption on the
	   taller tile sitting in the thin part of the gradient. Fixed offsets give
	   every caption the same band whatever the tile height. Kept to a light
	   band behind the caption so the photo itself stays bright; the caption's
	   text-shadow carries the rest of the contrast. */
	background: linear-gradient(
		to top,
		rgba(13, 17, 9, 0.72) 0,
		rgba(13, 17, 9, 0.45) 44px,
		rgba(13, 17, 9, 0.16) 88px,
		rgba(13, 17, 9, 0.00) 124px
	);
	pointer-events: none;
}

/* Caption sits over the scrim, not as a pill stuck on the photo. */
.mosaic__title {
	position: absolute;
	left: 1.1rem; right: 1.1rem; bottom: 0.95rem;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.25;
	color: #FFFDF6;
	text-shadow: 0 1px 10px rgba(12, 15, 8, 0.85);
}

.mosaic__tile--note {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.4rem;
	background:
		radial-gradient(120% 110% at 0% 0%, rgba(201, 162, 74, 0.16), transparent 62%),
		var(--ink-soft);
	border: 1px solid var(--moss-lift);
}
.mosaic__note-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--gold-lift);
}
.mosaic__note-body { margin-top: 0.35rem; font-size: 0.875rem; color: var(--bone-mute); }

/* ---------------------------------------------------------------- lightbox */

/* Native <dialog>: the platform supplies the focus trap, Escape handling and
   the inert backdrop. Only presentation is written here. */
.lightbox {
	width: min(1180px, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	background: var(--ink);
	color: var(--bone);
	overflow: visible;
}

.lightbox::backdrop {
	background: rgba(12, 15, 8, 0.86);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

@media (prefers-reduced-motion: no-preference) {
	.lightbox[open] { animation: lightbox-in 0.32s var(--ease); }
	.lightbox[open]::backdrop { animation: lightbox-fade 0.32s var(--ease); }
}

@keyframes lightbox-in {
	from { opacity: 0; transform: translateY(12px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__inner { position: relative; }

.lightbox__figure { margin: 0; display: grid; }

.lightbox__stage {
	display: grid;
	place-items: center;
	background: #14180D;
	border-radius: var(--r-md) var(--r-md) 0 0;
	overflow: hidden;
}

.lightbox__picture { display: block; width: 100%; }
.lightbox__picture img {
	display: block;
	width: 100%;
	max-height: min(66dvh, 660px);
	object-fit: contain;
	/* Brochure-sourced stills set a narrower cap, so they are never blown up. */
	max-width: var(--lightbox-cap, 1600px);
	margin-inline: auto;
}

.lightbox__caption {
	padding: clamp(1.15rem, 2.4vw, 1.85rem);
	border-top: 1px solid var(--moss-lift);
}

.lightbox__count {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.5rem;
}

.lightbox__title {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 500;
}

.lightbox__desc {
	margin-top: 0.6rem;
	max-width: 68ch;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.lightbox__close {
	position: absolute;
	top: 0.75rem; right: 0.75rem;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(16, 20, 11, 0.82);
	border: 1px solid rgba(244, 241, 230, 0.28);
	color: var(--bone);
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox__close:hover { background: rgba(24, 30, 17, 0.95); border-color: var(--bone); }

/* ------------------------------------------------ "Nhận bảng giá" popup */

.lead-modal {
	width: min(460px, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 1px solid rgba(201, 162, 74, 0.35);
	border-radius: var(--r-md);
	background: var(--ink);
	color: var(--bone);
	overflow: auto;
	overscroll-behavior: contain;
}
.lead-modal::backdrop {
	background: rgba(12, 15, 8, 0.78);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
	.lead-modal[open] { animation: lightbox-in 0.32s var(--ease); }
	.lead-modal[open]::backdrop { animation: lightbox-fade 0.32s var(--ease); }
}
.lead-modal__inner { position: relative; padding: clamp(1.5rem, 4vw, 2.25rem); }
.lead-modal__close {
	position: absolute;
	top: 0.75rem; right: 0.75rem;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(244, 241, 230, 0.06);
	border: 1px solid rgba(244, 241, 230, 0.28);
	color: var(--bone);
	cursor: pointer;
}
.lead-modal__close:hover { border-color: var(--bone); }
.lead-modal__title {
	padding-right: 2.5rem;
	font-size: clamp(1.35rem, 3vw, 1.65rem);
	font-weight: 700;
	line-height: 1.2;
}
.lead-modal__title::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-bottom: 0.9rem;
	background: var(--gold);
}
.lead-modal__lead { margin: 0.6rem 0 1.25rem; color: var(--bone-dim); font-size: 0.9375rem; }
.lead-modal .footer-form__note { margin-bottom: 1rem; }

.lightbox__nav {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: min(66dvh, 660px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 0.75rem;
	pointer-events: none;
}

.lightbox__arrow {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	pointer-events: auto;
	border-radius: 50%;
	background: rgba(16, 20, 11, 0.82);
	border: 1px solid rgba(228, 198, 126, 0.45);
	color: var(--gold-lift);
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.lightbox__arrow:hover { background: rgba(24, 30, 17, 0.95); border-color: var(--gold); transform: scale(1.06); }
.lightbox__arrow-icon--back { transform: rotate(180deg); }

@media (max-width: 700px) {
	.lightbox { width: calc(100vw - 1rem); }
	.lightbox__picture img { max-height: 46dvh; }
	.lightbox__nav { height: 46dvh; padding-inline: 0.5rem; }
	.lightbox__arrow { width: 40px; height: 40px; }
}

.amenities__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	margin-top: 2rem;
}
.amenities__foot .btn { flex: none; }

.amenities__disclaimer {
	flex: 1 1 32ch;
	max-width: 68ch;
	color: var(--bone-mute);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ film */

.film__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.film__frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	background: #111509;
	box-shadow: 0 30px 80px rgba(12, 15, 8, 0.45);
}

.film__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	background: #111509;
}

.film__fallback { padding: 2rem; color: var(--bone-dim); }
.film__fallback a { color: var(--gold-lift); text-decoration: underline; text-underline-offset: 3px; }

.film__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	/* Lets the native control bar stay clickable everywhere but the button. */
	pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 18, 9, 0.34) 0%, rgba(14, 18, 9, 0.12) 45%, rgba(14, 18, 9, 0.62) 100%);
	transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}

.film__overlay.is-hidden { opacity: 0; visibility: hidden; }

/* No scripting means no facade: the native poster and controls do the job. */
.no-js .film__overlay { display: none; }

.film__play {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	pointer-events: auto;
	padding: 0.85rem 1.6rem 0.85rem 0.9rem;
	/* The poster is daylight drone footage, so the pill has to carry the label
	   on its own: at 0.86 the white text clears AA over the brightest sky. */
	background: rgba(16, 20, 11, 0.86);
	border: 1px solid rgba(228, 198, 126, 0.55);
	border-radius: 999px;
	color: var(--bone);
	cursor: pointer;
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.25s var(--ease);
}

@media (prefers-reduced-transparency: reduce) {
	.film__play { background: rgba(16, 20, 11, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.film__play:hover {
	background: rgba(24, 30, 17, 0.94);
	border-color: var(--gold);
	transform: translateY(-1px);
}
.film__play:active { transform: translateY(0); }

/* Solid gold disc with a triangle punched out of it, drawn with clip-path so
   there is no icon file for a shape this simple. */
.film__play-icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gold);
	position: relative;
}
.film__play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	width: 15px;
	height: 17px;
	transform: translate(-50%, -50%);
	background: #241C06;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.film__play-label {
	display: grid;
	gap: 0.1rem;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.film__play-meta {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--gold-lift);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.film__play { padding: 0.7rem 1.15rem 0.7rem 0.7rem; gap: 0.75rem; }
	.film__play-icon { width: 38px; height: 38px; }
	.film__play-icon::after { width: 12px; height: 14px; }
	.film__play-label { font-size: 0.9375rem; }
}

/* -------------------------------------------------------------- products */

.products__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.tabs__rail {
	/* Stays pinned below the header while the active panel scrolls past, then
	   releases at the bottom of .tabs — i.e. at the end of the product section.
	   The opaque ground keeps panel content from showing through once pinned. */
	position: sticky;
	top: var(--header-h);
	z-index: var(--z-tab-rail);
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--moss);
	border-bottom: 1px solid var(--moss-lift);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tabs__rail::-webkit-scrollbar { display: none; }

.tabs__tab {
	position: relative;
	flex: none;
	padding: 0.9rem 1.25rem;
	color: var(--bone-mute);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s var(--ease);
}
.tabs__tab::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 100%; height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transition: transform 0.32s var(--ease);
}
.tabs__tab:hover { color: var(--bone-dim); }
.tabs__tab.is-active { color: var(--bone); }
.tabs__tab.is-active::after { transform: scaleX(1); }

/* Without JavaScript every panel stays visible and stacked. */
.panel + .panel { margin-top: clamp(3rem, 6vw, 5rem); }

.tabs.is-enhanced .panel { display: none; }
.tabs.is-enhanced .panel.is-active { display: block; margin-top: 0; }

.panel__lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}
@media (min-width: 900px) {
	.panel__lead { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}

.panel__title { font-size: clamp(1.6rem, 2.7vw, 2.25rem); }
.panel__body { margin-top: 1.1rem; color: var(--bone-dim); max-width: 58ch; }

.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; }
.specs__item { padding-top: 0.9rem; border-top: 1px solid var(--moss-lift); }
.specs__label { font-size: 0.8125rem; color: var(--bone-mute); }
.specs__value {
	margin-top: 0.2rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}

/* These renders ship from the brochure with the sky masked out and are
   composited onto the moss ground at build time. Cropping them with `cover`
   would cut the rooflines, so they are contained and the letterbox blends into
   the section. */
.panel__hero { margin: 0 0 1.5rem; }
.panel__picture img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center bottom;
	background: var(--moss);
	border-radius: var(--r-md);
}

/* Panels carry either two or three cards. auto-fit collapses the tracks it does
   not need, so a two-card panel gets two half-width cards instead of two cards
   and a hole. */
.panel__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.plan {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--moss-deep);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	overflow: hidden;
}

.plan__media { background: #EDEBE2; }
.plan__picture img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
}

/* A photo card has no caption block, so its image fills the whole card rather
   than leaving dead ground under a 4:3 crop. */
.plan--shot .plan__media { flex: 1; background: var(--ink-soft); }
.plan--shot .plan__picture,
.plan--shot .plan__picture img {
	height: 100%;
	min-height: 220px;
	aspect-ratio: auto;
	object-fit: cover;
}

/* Same card, but for the one product line whose reference drawing is a render
   rather than a floor plan: it crops instead of sitting letterboxed on paper. */
.plan--photo .plan__media { background: var(--ink-soft); }
.plan--photo .plan__picture img { object-fit: cover; }

.plan__meta { padding: 1.15rem 1.25rem 1.35rem; }
.plan__title {
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--gold-lift);
}
.plan__rows { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
.plan__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
}
.plan__row dt { color: var(--bone-mute); }
.plan__row dd { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------- product page: stacked sections */

/* The Sản phẩm page renders each line as its own full section instead of a
   tab panel. The panel markup is reused as-is; only the block heading differs. */
.product-block__eyebrow {
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-lift);
	margin-bottom: 0.85rem;
}
.product-block__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.08;
	max-width: 20ch;
}
.product-block__sub {
	margin-top: 0.7rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	color: var(--gold-lift);
	max-width: 40ch;
}

/* Anchor jumps clear the sticky header + the product nav below it. */
.product-block { scroll-margin-top: calc(var(--header-h) + 56px); }

/* Sticky product tab bar on the Sản phẩm page: pinned below the header while
   the list scrolls, releasing at the end of .sp-list. */
.sp-nav {
	position: sticky;
	top: var(--header-h);
	z-index: var(--z-tab-rail);
	background: var(--ink);
	border-bottom: 1px solid var(--moss-lift);
}
.sp-nav__inner {
	display: flex;
	gap: clamp(0.75rem, 3vw, 2.5rem);
	overflow-x: auto;
	scrollbar-width: none;
}
.sp-nav__inner::-webkit-scrollbar { display: none; }
.sp-nav__link {
	position: relative;
	flex: none;
	padding: 1rem 0.15rem;
	color: var(--bone-mute);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	transition: color 0.2s var(--ease);
}
.sp-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}
.sp-nav__link:hover { color: var(--bone-dim); }
.sp-nav__link.is-current { color: var(--bone); }
.sp-nav__link.is-current::after { transform: scaleX(1); }

/* Floor plans always share one row: a single plan fills it, several sit side by
   side and shrink to fit rather than stacking. The lightbox carries the detail. */
.panel__floorplans {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	align-items: start;
}
.panel__floorplans .plan { flex: 1 1 0; min-width: 0; }

/* Supplementary photos below, up to three per row, never stretched past that. */
.panel__gallery {
	margin-top: 1.25rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 640px) {
	.panel__gallery--cols-2,
	.panel__gallery--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.panel__gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Each plan / photo is a lightbox trigger. The button fills the card so the
   whole image is the hit target; the caption stays outside it. */
.plan__button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.plan__button .plan__media { display: block; position: relative; overflow: hidden; }
.plan--shot .plan__button { display: flex; flex: 1; }
.plan--shot .plan__button .plan__media { flex: 1; width: 100%; }
.no-js .plan__button { cursor: default; }
.no-js .plan__zoom { display: none; }

.plan__button .plan__img { transition: transform 0.4s ease; }
.plan__button:hover .plan__img,
.plan__button:focus-visible .plan__img { transform: scale(1.03); }
.plan__button:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: -3px; }

.plan__zoom {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(16, 20, 11, 0.66);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.plan__zoom::before,
.plan__zoom::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--gold-lift);
	transform: translate(-50%, -50%);
}
.plan__zoom::before { width: 12px; height: 1.5px; }
.plan__zoom::after  { width: 1.5px; height: 12px; }
.plan__button:hover .plan__zoom,
.plan__button:focus-visible .plan__zoom { opacity: 1; transform: scale(1); }

/* -------------------------------------------------------------- timeline */

.timeline {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 56vw, 620px);
	overflow: hidden;
	background: var(--ink);
}

.timeline__media { position: absolute; inset: 0; }
.timeline__picture, .timeline__picture img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
}
.timeline__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 62, 47, 0.9) 0%, rgba(12, 62, 47, 0.62) 45%, rgba(12, 62, 47, 0.94) 100%);
}

.timeline__body { position: relative; padding-block: clamp(3rem, 6vw, 5rem); }

.timeline__title {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.timeline__title::before {
	content: "";
	display: block;
	width: 56px; height: 2px;
	margin-bottom: 1.5rem;
	background: linear-gradient(90deg, var(--gold), transparent);
}

.rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	position: relative;
}
@media (min-width: 760px) {
	.rail { grid-template-columns: repeat(2, minmax(0, 380px)); gap: clamp(2rem, 6vw, 5rem); }
}

.rail__stop { position: relative; padding-top: 1.75rem; border-top: 1px solid rgba(201, 162, 74, 0.42); }
.rail__stop::before {
	content: "";
	position: absolute;
	left: 0; top: -4px;
	width: 8px; height: 8px;
	background: var(--gold);
	border-radius: 50%;
}
.rail__year {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4.4vw, 3.4rem);
	font-weight: 500;
	line-height: 1;
	color: var(--gold-lift);
	font-variant-numeric: tabular-nums;
}
.rail__stop-title {
	margin-top: 0.65rem;
	font-family: var(--font-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bone);
}
.rail__stop-body { margin-top: 0.45rem; color: var(--bone-dim); font-size: 0.9375rem; max-width: 40ch; }

/* --------------------------------------------------------------- contact */

.contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}
@media (min-width: 940px) { .contact__grid { grid-template-columns: 0.9fr 1.1fr; } }

.contact__hotline {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 2.25rem;
	padding: 1rem 1.5rem 1rem 1.25rem;
	background: rgba(201, 162, 74, 0.1);
	border: 1px solid rgba(201, 162, 74, 0.42);
	border-radius: var(--r-md);
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact__hotline:hover { background: rgba(201, 162, 74, 0.2); border-color: var(--gold); }
.contact__hotline-icon { color: var(--gold); }
.contact__hotline-label {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bone-mute);
}
.contact__hotline-number {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}

.contact__address {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.5rem;
	color: var(--bone-dim);
	font-size: 0.9375rem;
}
.contact__pin { color: var(--gold); }

.contact__form-wrap {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--ink-soft);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
}

.notice {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
	border-radius: var(--r-sm);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.notice div { display: grid; gap: 0.15rem; }
.notice strong { font-weight: 600; }
.notice--ok {
	background: rgba(201, 162, 74, 0.14);
	border: 1px solid rgba(201, 162, 74, 0.5);
	color: var(--bone);
}
.notice--ok .notice__icon { color: var(--gold-lift); }
.notice--error {
	background: rgba(196, 92, 60, 0.16);
	border: 1px solid rgba(230, 138, 106, 0.55);
	color: #FBE6DE;
}
.notice--error .notice__icon { color: #F0A98D; }

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

.form__row { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

/* align-content keeps a field with helper text from stretching the input of the
   field beside it, so paired inputs in a row stay the same height. */
.field { display: grid; gap: 0.4rem; align-content: start; margin-bottom: 1.15rem; }
.form__row .field { margin-bottom: 0; }
.form__row { margin-bottom: 1.15rem; }

.field__label {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--bone-dim);
}
.field__req { color: var(--gold); }

.field__input {
	width: 100%;
	padding: 0.8rem 0.95rem;
	background: #1A1F14;                       /* darker than the card, so the field reads as an input */
	color: var(--bone);
	border: 1px solid #5A6242;                 /* 3.1:1 against the card: non-text contrast passes AA */
	border-radius: var(--r-sm);
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field__input::placeholder { color: #9C9A85; }   /* 4.6:1 on the field ground */
.field__input:hover { border-color: #737C57; }
.field__input:focus { border-color: var(--gold); outline-offset: 1px; }
.field__input--error { border-color: #E68A6A; }

.field__select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
	                  linear-gradient(135deg, var(--gold) 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}
.field__select option { background: #1A1F14; color: var(--bone); }

.field__textarea { resize: vertical; min-height: 96px; }

.field__help  { font-size: 0.8125rem; color: #ADAB95; }    /* 4.9:1 on the card */
.field__error { font-size: 0.8125rem; color: #F0A98D; font-weight: 500; }

.form__consent {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--bone-mute);
	line-height: 1.55;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	background: var(--ink);
	border-top: 1px solid rgba(201, 162, 74, 0.18);
	padding-top: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-top: clamp(2.75rem, 4vw, 3.75rem);
	padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.7fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); } }

.site-footer__mark { height: 56px; width: auto; }
.site-footer__logo { display: block; height: clamp(64px, 9vw, 84px); width: auto; max-width: 100%; margin-bottom: 1.1rem; }
.site-footer__name {
	margin-top: 1rem;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--bone);
}
.site-footer__name span {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-top: 0.25rem;
}
.site-footer__tagline { margin-top: 0.9rem; color: var(--bone-mute); font-size: 0.9375rem; max-width: 32ch; }

.site-footer__heading {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.1rem;
}

.site-footer__links { display: grid; gap: 0.6rem; }
.site-footer__links li { color: var(--bone-dim); font-size: 0.9375rem; }
.site-footer__links a { transition: color 0.2s var(--ease); }
.site-footer__links a:hover { color: var(--gold-lift); }

.site-footer__investors { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.site-footer__investors img { height: clamp(84px, 10vw, 108px); width: auto; opacity: 0.95; }

/* footer top band: brand + social + sign-up */
.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: clamp(2.25rem, 4vw, 3rem);
	border-bottom: 1px solid var(--moss-lift);
}
@media (min-width: 900px) {
	.site-footer__top { grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

.site-footer__social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(244, 241, 230, 0.08);
	border: 1px solid var(--moss-lift);
	color: var(--bone);
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { color: var(--ink); background: var(--gold-lift); border-color: var(--gold-lift); }

.site-footer__signup-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	color: var(--bone);
	margin-bottom: 1.1rem;
}
.site-footer__buy { width: 100%; justify-content: center; font-size: 1rem; }

/* Compact variant so the sign-up fits beside the shorter developer column. */
.site-footer__signup--compact .site-footer__signup-title { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 0.9rem; }
.site-footer__signup--compact .site-footer__buy { padding-block: 0.8rem; }
.site-footer__signup--compact .site-footer__signup-or { margin: 0.85rem 0 0.7rem; font-size: 0.9rem; }
.site-footer__signup--compact .footer-form { gap: 0.55rem; }
.site-footer__signup--compact .footer-form__field input { padding: 0.65rem 0.95rem; }
.site-footer__signup--compact .footer-form__submit { padding-block: 0.75rem; }
.site-footer__signup-or { margin: 1.1rem 0 0.9rem; color: var(--bone-mute); font-size: 0.9375rem; }

.footer-form { display: grid; gap: 0.7rem; }
.footer-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-form__field input {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--ink-soft);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-sm);
	color: var(--bone);
	font: inherit;
}
.footer-form__field input::placeholder { color: var(--bone-mute); }
.footer-form__field input:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 1px; border-color: var(--gold-lift); }
.footer-form__submit { width: 100%; justify-content: center; margin-top: 0.2rem; }
.footer-form__types {
	display: grid;
	gap: 0.45rem;
	margin: 0.2rem 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.footer-form__types-title {
	margin-bottom: 0.35rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bone-dim);
}
.footer-form__check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--bone);
	cursor: pointer;
}
.footer-form__check input {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
	accent-color: var(--gold);
	cursor: pointer;
}
.footer-form__note {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--r-sm);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
	color: var(--bone);
}
.footer-form__note .nlgp-icon { flex: none; }
.footer-form__note--ok { background: rgba(95, 139, 44, 0.18); border: 1px solid var(--olive); }
.footer-form__note--err { background: rgba(179, 45, 46, 0.16); border: 1px solid #b32d2e; }

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 2.25rem;
	border-top: 1px solid rgba(244, 241, 230, 0.1);
	color: var(--bone-mute);
	font-size: 0.8125rem;
}
.site-footer__legal { max-width: none; }

/* --------------------------------------------------------- mobile callbar */

/* ------------------------------------- quick-links band above footer */

.quicklinks {
	position: relative;
	background-size: cover;
	background-position: center;
}
.quicklinks::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 62, 47, 0.82), rgba(12, 62, 47, 0.9));
}
/* A custom background shows as-is, without the default dark-green overlay. */
.quicklinks--plain::before { display: none; }
.quicklinks__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 700px) { .quicklinks__grid { grid-template-columns: repeat(3, 1fr); } }
.quicklinks__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	color: var(--bone);
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
@media (min-width: 700px) {
	.quicklinks__item + .quicklinks__item { border-left: 1px solid rgba(244, 241, 230, 0.18); }
}
.quicklinks__item:hover { color: var(--gold-lift); transform: translateY(-3px); }
.quicklinks__icon svg { width: 54px; height: 54px; }
.quicklinks__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---------------------------------------- floating quick-contact rail */

.contact-fab {
	position: fixed;
	left: clamp(0.75rem, 2vw, 1.25rem);
	bottom: clamp(0.9rem, 2vw, 1.5rem);
	z-index: var(--z-fab);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.contact-fab__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s var(--ease);
}
.contact-fab__btn:hover,
.contact-fab__btn:focus-visible { transform: scale(1.08); }
.contact-fab__btn svg { width: 24px; height: 24px; }
.contact-fab__btn--phone { background: var(--gold); color: var(--ink); }
.contact-fab__btn--facebook { background: #1877f2; }
.contact-fab__btn--messenger { background: #0084ff; }
.contact-fab__btn--zalo { background: #0068ff; }
.contact-fab__btn--tiktok { background: #000; }

/* Pulsing ring on the phone button to draw the eye. */
.contact-fab__btn--phone::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: nlgp-fab-pulse 2s ease-out infinite;
}
@keyframes nlgp-fab-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(201, 162, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.contact-fab__btn--phone::after { animation: none; }
}

/* Phones: the rail sits above the call bar, hidden until the phone button in
   the bar opens it (that button then shows an X). */
@media (max-width: 700px) {
	.contact-fab {
		bottom: calc(4.75rem + env(safe-area-inset-bottom));
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
	}
	.contact-fab.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
	}
	.contact-fab__btn { width: 44px; height: 44px; }
}

.callbar { display: none; }

@media (max-width: 700px) {
	.callbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: var(--z-callbar);
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		background: var(--ink);
		border-top: 1px solid rgba(201, 162, 74, 0.3);
		padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
		gap: 0.5rem;
	}
	.callbar__call, .callbar__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		padding: 0.8rem 0.5rem;
		border-radius: var(--r-btn);
		font-size: 0.9375rem;
		font-weight: 600;
	}
	.callbar__call {
		border: 1px solid rgba(201, 162, 74, 0.5);
		color: var(--gold-lift);
		font-variant-numeric: tabular-nums;
	}
	.callbar__cta { background: var(--gold); color: #241C06; white-space: nowrap; }
	.callbar__cta--light { --pulse-rgb: 244, 241, 230; background: var(--bone); color: var(--ink); }
	.callbar__call { padding-inline: 0.8rem; background: none; cursor: pointer; font: inherit; }
	.callbar__icon-open,
	.callbar__icon-close { display: inline-flex; }
	.callbar__call[aria-expanded="false"] .callbar__icon-close,
	.callbar__call[aria-expanded="true"] .callbar__icon-open { display: none; }
	.callbar__call[aria-expanded="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
	.callbar__number { display: none; }

	/* Room for the fixed call bar (about 69px plus the iPhone home-indicator
	   inset). "html body" outranks WordPress' inline global-styles
	   "body { padding: 0 }", which loads after this file and used to cancel it,
	   leaving the last footer line under the bar. */
	html body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
	.site-footer__base { padding-bottom: 0.5rem; }
}

/* --------------------------------------------------------- scroll reveal */

/* MOTION_INTENSITY 6: entrance choreography only, driven by IntersectionObserver.
   No scroll listeners, no pinning, no infinite loops. */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
		transition-delay: var(--reveal-delay, 0ms);
	}
	[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
	/* If the observer never runs (script blocked), content must still be visible. */
	.no-js [data-reveal] { opacity: 1; transform: none; }
}

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

/* ------------------------------------------------------- interior pages */

.page-body { padding-block: var(--section-y); }
.page-body__inner { max-width: 68ch; }
.page-body__inner :where(h1, h2, h3) { margin-top: 2rem; }
.page-body__inner :where(p, ul, ol) { margin-top: 1rem; color: var(--bone-dim); }
.page-body__inner :where(ul, ol) { padding-left: 1.25rem; }
.page-body__inner li { list-style: disc; margin-top: 0.4rem; }
.page-body__inner a { color: var(--gold-lift); text-decoration: underline; text-underline-offset: 3px; }

.page-title { font-size: clamp(2rem, 4vw, 3rem); }

/* =========================================================================
   Inner pages, editable-content variants and Contact Form 7
   ========================================================================= */

/* ------------------------------------------------------------- page hero */

.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 44vw, 460px);
	padding-top: 5.5rem;
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
	background: var(--ink);
}

.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
}
.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(12, 62, 47, 0.62) 0%, rgba(12, 62, 47, 0.10) 26%),
		linear-gradient(180deg, rgba(20, 25, 15, 0.00) 34%, rgba(20, 25, 15, 0.72) 74%, rgba(18, 22, 13, 0.92) 100%);
}

.page-hero__body { position: relative; }
.page-hero__title { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.page-hero__lead {
	margin-top: 1.1rem;
	max-width: 58ch;
	color: var(--bone-dim);
	font-size: clamp(1rem, 1.45vw, 1.1875rem);
	text-shadow: 0 1px 16px rgba(20, 24, 14, 0.6);
}

/* Editor-uploaded images render as plain <img>, not inside a <picture>. */
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.intro__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.location__img { width: 100%; border-radius: var(--r-md); background: var(--moss); }
.location__beach-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.bento__img { width: 100%; flex: 1 1 auto; min-height: 240px; object-fit: cover; object-position: 50% 46%; }
.timeline__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.panel__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center bottom;
	background: var(--moss);
	border-radius: var(--r-md);
}
.plan__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plan--shot .plan__img { height: 100%; min-height: 220px; aspect-ratio: auto; }

/* ------------------------------------------------------ section footers */

.amenities__foot .btn,
.products__foot .btn { white-space: nowrap; }

.products__foot { margin-top: clamp(2rem, 4vw, 3rem); }

/* -------------------------------------------------------- page body copy */

.page-body__inner--wide { max-width: 80ch; margin-top: clamp(2.5rem, 5vw, 4rem); }
.page-body__empty { color: var(--bone-mute); }

/* --------------------------------------------------------- closing CTA */

.pagecta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem 3rem;
}
.pagecta__title { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.pagecta__lead { margin-top: 0.6rem; max-width: 52ch; color: var(--bone-dim); }
.pagecta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------- footer contact list */

.site-footer__col--wide { grid-column: auto; }

.site-footer__investor {
	margin-bottom: 1rem;
	color: var(--bone);
	font-weight: 600;
	font-size: 0.9375rem;
	max-width: 46ch;
}

.site-footer__contact { display: grid; gap: 0.8rem; }
.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.site-footer__contact-icon { color: var(--gold); flex: none; margin-top: 0.12rem; }
.site-footer__contact a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact a:hover { color: var(--gold-lift); }

/* Footer top-left: developer logos + social, replacing the old brand block. */
.site-footer__lead-col { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; }

/* Three-column footer row: brand + contact + social | menu | sign-up. */
.site-footer__grid3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: clamp(2.25rem, 4vw, 3rem);
	border-bottom: 1px solid var(--moss-lift);
}
@media (min-width: 700px) {
	.site-footer__grid3 { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
	.site-footer__grid3 .site-footer__signup { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
	.site-footer__grid3 { grid-template-columns: 1.3fr 0.8fr 1.4fr; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
	.site-footer__grid3 .site-footer__signup { grid-column: auto; }
}
.site-footer__brand-col { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.site-footer__contact-block .site-footer__heading { margin-bottom: 0.9rem; }

/* wp_nav_menu markup inside the footer column */
.site-footer__links { list-style: none; margin: 0; padding: 0; }

/* ----------------------------------------------- contact detail list */

.contact__list {
	display: grid;
	gap: 1rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--moss-lift);
}
.contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.55;
}
.contact__item-icon { color: var(--gold); flex: none; margin-top: 0.15rem; }
.contact__item a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.contact__item a:hover { color: var(--gold-lift); }

/* ------------------------------------------------------- Contact Form 7 */

/* CF7 wraps every control in an inline <span>; the layout needs blocks. */
.wpcf7-form-control-wrap { display: block; }

.wpcf7 form .wpcf7-response-output {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: var(--r-sm);
	border: 1px solid rgba(201, 162, 74, 0.5);
	background: rgba(201, 162, 74, 0.14);
	color: var(--bone);
	font-size: 0.9375rem;
	line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	background: rgba(196, 92, 60, 0.16);
	border-color: rgba(230, 138, 106, 0.55);
	color: #FBE6DE;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	color: #F0A98D;
	font-size: 0.8125rem;
	font-weight: 500;
}
.field__input.wpcf7-not-valid { border-color: #E68A6A; }

/* CF7 prints its own submit; make it obey the theme button metrics. */
.wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.95rem 1.75rem;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid var(--gold);
	border-radius: var(--r-btn);
	background: var(--gold);
	color: #241C06;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.18s var(--ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--gold-lift); border-color: var(--gold-lift); }
.wpcf7 input[type="submit"]:active { transform: translateY(1px); }

/* The AJAX spinner defaults to a dark dot on a dark ground. */
.wpcf7-spinner { background-color: var(--gold-lift); }

.form__fallback { color: var(--bone-dim); }
.form__fallback a { color: var(--gold-lift); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ developers */

.developers__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.developers__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

/* The lead investor represents the venture, so it gets the wider card. */
@media (min-width: 900px) {
	.developers__grid { grid-template-columns: 1.18fr 0.82fr; gap: 1.5rem; }
}

.developer {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(201, 162, 74, 0.10) 0%, transparent 58%),
		var(--ink-soft);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
}

.developer--lead { border-color: rgba(201, 162, 74, 0.34); }

/* The supplied marks are white artwork, so they need a dark plate rather than
   the usual light card. */
.developer__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(150px, 15vw, 210px);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: rgba(12, 15, 8, 0.42);
	border: 1px solid rgba(244, 241, 230, 0.10);
	border-radius: var(--r-sm);
}

/* The two marks have different aspect ratios and carry their company name
   inside the artwork, so they are matched on height and given enough of it for
   that baked-in type to be readable. */
.developer__mark img {
	height: clamp(92px, 9.5vw, 138px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.developer__link {
	display: inline-flex;
	align-items: center;
	border-radius: var(--r-sm);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.developer__link:hover { opacity: 0.82; transform: translateY(-1px); }

.developer__body { display: flex; flex-direction: column; }

.developer__role {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 0.6rem;
}

.developer__name {
	font-size: clamp(1.25rem, 2.1vw, 1.6rem);
	line-height: 1.2;
}

.developer__desc {
	margin-top: 0.9rem;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.65;
	max-width: 62ch;
}

.developer__address {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.1rem;
	color: var(--bone-mute);
	font-size: 0.875rem;
	line-height: 1.55;
}
.developer__pin { color: var(--gold); margin-top: 0.2rem; flex: none; }

.developer__contact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	color: var(--bone-dim);
	font-size: 0.9375rem;
}
.developer__contact a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.developer__contact a:hover { color: var(--gold-lift); }

.developer__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	margin-top: 1.35rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid rgba(201, 162, 74, 0.45);
	color: var(--gold-lift);
	font-size: 0.9375rem;
	font-weight: 600;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.developer__cta:hover { color: var(--bone); border-color: var(--bone); }
.developer__cta-icon { transition: transform 0.25s var(--ease); }
.developer__cta:hover .developer__cta-icon { transform: translateX(3px); }

/* ============================================================ blog / news */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.news-card {
	display: flex;
	flex-direction: column;
	background: var(--moss-deep);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.news-card:hover { transform: translateY(-4px); border-color: rgba(201, 162, 74, 0.45); }
.news-card__media { display: block; aspect-ratio: 3 / 2; background: var(--ink-soft); overflow: hidden; }
.news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.news-card:hover .news-card__img { transform: scale(1.04); }
.news-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--moss-lift), var(--ink-soft)); }
.news-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.news-card__date { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--gold-lift); }
.news-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
}
.news-card__title a { color: var(--bone); transition: color 0.2s var(--ease); }
.news-card__title a:hover { color: var(--gold-lift); }
.news-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.6rem;
	color: var(--gold-lift);
	font-weight: 600;
	font-size: 0.9375rem;
}
.news-card__more-icon { transition: transform 0.25s var(--ease); }
.news-card__more:hover .news-card__more-icon { transform: translateX(3px); }

.news-pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-sm);
	color: var(--bone-dim);
	transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.news-pagination .page-numbers:hover { color: var(--ink); background: var(--gold-lift); border-color: var(--gold-lift); }
.news-pagination .page-numbers.current { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.news-empty { color: var(--bone-dim); font-size: 1.0625rem; }

/* ------------------------------------------------------------- documents */

.docs-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .docs-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Left column holds two sets over "auto 1fr" rows, so whichever column is
   taller, both end on the same line. */
.docs-stack { display: grid; grid-template-rows: auto 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.docs-grid .docs-col { display: flex; flex-direction: column; }
.docs-grid .docs-col__body { flex: 1; }
.docs-col {
	background: var(--moss-deep);
	border: 1px solid var(--moss-lift);
	border-radius: var(--r-md);
	overflow: hidden;
}
.docs-col__head {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}
.docs-col__body { padding: clamp(1.4rem, 2.5vw, 2rem); }
.docs-col__body.prose { max-width: none; font-size: 1rem; }

/* ---------------------------------------------------- blog post detail */

.post-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(280px, 42vw, 460px);
	overflow: hidden;
	background: var(--ink);
}
.post-hero__bg {
	position: absolute;
	inset: -28px;                 /* bleed so the blur has no soft edges */
	background-size: cover;
	background-position: center;
	filter: blur(11px);
	transform: scale(1.06);
}
.post-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 62, 47, 0.5) 0%, rgba(12, 62, 47, 0.8) 100%);
}
.post-hero__inner { position: relative; z-index: 1; padding-block: clamp(2rem, 5vw, 3.5rem); }
.post-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 3.1rem);
	line-height: 1.12;
	color: var(--bone);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
	max-width: 30ch;
}
.post-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.1rem; font-size: 0.9375rem; color: var(--bone-dim); }
.post-crumb a { color: var(--bone-dim); }
.post-crumb a:hover { color: var(--gold-lift); }
.post-crumb__sep { color: rgba(244, 241, 230, 0.5); }
.post-crumb__current { color: var(--bone-mute); }

.post-body { background: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); }
.post-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 1fr) 320px; } }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.9375rem; color: #7a8a80; }
.post-meta__cat { color: var(--gold-deep); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8125rem; }
.post-meta__cat:hover { color: var(--olive); }
.post-content.prose { max-width: none; }

.post-aside { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .post-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.widget { border-top: 2px solid var(--gold); padding-top: 1.25rem; }
.widget__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.15rem; }

.widget__related { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rel { display: flex; gap: 0.85rem; align-items: flex-start; }
.rel__media { flex: none; width: 84px; height: 60px; border-radius: 4px; overflow: hidden; background: #e9e7dc; }
.rel__img { width: 100%; height: 100%; object-fit: cover; }
.rel__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #dfe3d6, #c9cbba); }
.rel__title { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: #26332c; }
.rel__title:hover { color: var(--olive); }

.widget__cats { list-style: none; margin: 0; padding: 0; }
.widget__cats li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid #e6e9e2; color: #55635b; font-size: 0.95rem; }
.widget__cats li:last-child { border-bottom: 0; }
.widget__cats a { color: #26332c; }
.widget__cats a:hover { color: var(--olive); }

/* Prose: arbitrary editor content rendered readably on the dark ground. */
.prose { color: var(--bone-dim); font-size: 1.0625rem; line-height: 1.8; max-width: 72ch; }
.prose > * + * { margin-top: 1.2em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--bone); line-height: 1.25; margin-top: 1.8em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.prose h4 { font-size: 1.15rem; }
.prose a { color: var(--gold-lift); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--bone); }
.prose strong { color: var(--bone); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose img { border-radius: var(--r-md); height: auto; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--bone-mute); text-align: center; }
.prose blockquote {
	border-left: 3px solid var(--gold);
	padding: 0.2em 0 0.2em 1.2em;
	color: var(--bone);
	font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--moss-lift); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 0.7rem 0.9rem; border: 1px solid var(--moss-lift); text-align: left; }
.prose th { color: var(--bone); background: var(--moss-deep); }

/* Light variant for the white blog body (dark text on white). */
.prose--light { color: #2b3a32; }
.prose--light h2, .prose--light h3, .prose--light h4 { color: #0c3e2f; }
.prose--light a { color: var(--olive); }
.prose--light a:hover { color: var(--gold-deep); }
.prose--light strong { color: #0c3e2f; }
.prose--light blockquote { border-left-color: var(--gold); color: #0c3e2f; }
.prose--light figcaption { color: #7a8a80; }
.prose--light hr { border-top-color: #e6e9e2; }
.prose--light th { color: #0c3e2f; background: #f3f5f0; }
.prose--light th, .prose--light td { border-color: #e0e4db; }