/* ==========================================================================
   NORMUS HOMES — style.css
   Table of contents:
   1. Reset & Base
   2. CSS Variables / Design Tokens
   3. Typography Utilities
   4. Layout / Grid / Container
   5. Buttons & Links
   6. Header / Navigation
   7. Hero
   8. Section 01 — A Letter
   9. Section 02 — Featured Homes
   10. Section 03 — A Closer Look (Vale Park)
   11. Dark Section — What We Build / Accordion
   12. Voices (Testimonial Grid)
   13. Built in SA for SA (Community)
   14. In Their Words (Testimonial Carousel)
   15. Working Journal
   16. CTA — Begin a Conversation
   17. Footer
   18. Responsive Breakpoints
   ========================================================================== */

/* ---------- 1. Reset & Base ---------- */

@font-face {
    font-family: "Butler";
    src:
        url("../fonts/Butler-Light.woff2") format("woff2"),
        url("../fonts/Butler-Light.woff") format("woff"),
        url("../fonts/Butler-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: "Butler";
	src:
		url("../fonts/Butler.woff2") format("woff2"),
		url("../fonts/Butler.woff") format("woff"),
		url("../fonts/Butler.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Butler";
	src:
		url("../fonts/Butler-Medium.woff2") format("woff2"),
		url("../fonts/Butler-Medium.woff") format("woff"),
		url("../fonts/Butler-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src:
		url("../fonts/Gotham-Bold.woff2") format("woff2"),
		url("../fonts/Gotham-Bold.woff") format("woff"),
		url("../fonts/Gotham-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src:
		url("../fonts/Gotham-Medium.woff2") format("woff2"),
		url("../fonts/Gotham-Medium.woff") format("woff"),
		url("../fonts/Gotham-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham Book";
	src:
		url("../fonts/Gotham-Book.woff2") format("woff2"),
		url("../fonts/Gotham-Book.woff") format("woff"),
		url("../fonts/Gotham-Book.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Butler";
	src:
		url("../fonts/Butler-Medium_1.woff2") format("woff2"),
		url("../fonts/Butler-Medium_1.woff") format("woff"),
		url("../fonts/Butler-Medium_1.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src:
		url("../fonts/Gotham-Light.woff2") format("woff2"),
		url("../fonts/Gotham-Light.woff") format("woff"),
		url("../fonts/Gotham-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
form {
	margin: 0;
}
ul {
	list-style: none;
	padding: 0;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button,
input {
	font-family: inherit;
}
button {
	cursor: pointer;
	background: none;
}
input {
	outline-offset: 4px;
}
::-webkit-scrollbar {
	width: 4px;
}
::-webkit-scrollbar-thumb {
	background: #bcb6ae;
	border-radius: 2px;
}
::-webkit-scrollbar-track {
	background: 0 0;
}
::selection {
	color: #f6f3ee;
	background: #121c26;
}
/* ---------- 2. CSS Variables ---------- */
:root {
	--font-heading: "Butler";
	--font-body: "Gotham";

	--color-bg: #f6f3ee;
	--color-bg-alt: #f1ece0;
	--color-dark: #121c26;
	--color-dark-2: #0c1116;
	--color-cream: #f6f3ee;

	--color-text: #121c26;
	--color-text-soft: #3b444d;
	--color-muted: #787069;
	--color-muted-light: rgba(246, 243, 238, 0.55);

	--color-border: rgba(18, 28, 38, 0.12);
	--color-border-dark: rgba(246, 243, 238, 0.1);

	--container-max: 1280px;
	--gutter: 88px;

	--fs-eyebrow: 0.6875rem;
	--fs-nav: 0.78rem;
	--spacing: 0.25rem;
	--color-red-100: oklch(93.6% 0.032 17.717);
	--color-red-300: oklch(80.8% 0.114 19.571);
	--color-red-400: oklch(70.4% 0.191 22.216);
	--color-red-500: oklch(63.7% 0.237 25.331);
	--color-red-600: oklch(57.7% 0.245 27.325);
	--color-red-700: oklch(50.5% 0.213 27.518);
	--color-amber-50: oklch(98.7% 0.022 95.277);
	--color-amber-100: oklch(96.2% 0.059 95.617);
	--color-amber-200: oklch(92.4% 0.12 95.746);
	--color-amber-800: oklch(47.3% 0.137 46.201);
	--color-amber-900: oklch(41.4% 0.112 45.904);
	--color-emerald-100: oklch(95% 0.052 163.051);
	--color-emerald-200: oklch(90.5% 0.093 164.15);
	--color-emerald-800: oklch(43.2% 0.095 166.913);
	--color-emerald-900: oklch(37.8% 0.077 168.94);
	--color-sky-100: oklch(95.1% 0.026 236.824);
	--color-sky-200: oklch(90.1% 0.058 230.902);
	--color-sky-800: oklch(44.3% 0.11 240.79);
	--color-blue-600: oklch(54.6% 0.245 262.881);
	--color-blue-700: oklch(48.8% 0.243 264.376);
	--color-violet-100: oklch(94.3% 0.029 294.588);
	--color-violet-200: oklch(89.4% 0.057 293.283);
	--color-violet-800: oklch(43.2% 0.232 292.759);
	--color-rose-100: oklch(94.1% 0.03 12.58);
	--color-rose-200: oklch(89.2% 0.058 10.001);
	--color-rose-600: oklch(58.6% 0.253 17.585);
	--color-rose-800: oklch(45.5% 0.188 13.697);
	--color-slate-50: oklch(98.4% 0.003 247.858);
	--color-slate-100: oklch(96.8% 0.007 247.896);
	--color-slate-600: oklch(44.6% 0.043 257.281);
	--color-slate-700: oklch(37.2% 0.044 257.287);
	--color-slate-900: oklch(20.8% 0.042 265.755);
	--color-stone-50: oklch(98.5% 0.001 106.423);
	--color-stone-100: oklch(97% 0.001 106.424);
	--color-stone-200: oklch(92.3% 0.003 48.717);
	--color-stone-300: oklch(86.9% 0.005 56.366);
	--color-stone-400: oklch(70.9% 0.01 56.259);
	--color-stone-500: oklch(55.3% 0.013 58.071);
	--color-stone-600: oklch(44.4% 0.011 73.639);
	--color-stone-700: oklch(37.4% 0.01 67.558);
	--color-stone-800: oklch(26.8% 0.007 34.298);
	--color-stone-900: oklch(21.6% 0.006 56.043);
	--color-black: #000;
	--color-white: #fff;
	--spacing: 0.25rem;
	--container-xs: 20rem;
	--container-sm: 24rem;
	--container-md: 28rem;
	--container-lg: 32rem;
	--container-xl: 36rem;
	--container-2xl: 42rem;
	--container-3xl: 48rem;
	--container-4xl: 56rem;
	--container-5xl: 64rem;
	--container-6xl: 72rem;
	--text-xs: 0.75rem;
	--text-xs--line-height: calc(1 / 0.75);
	--text-sm: 0.875rem;
	--text-sm--line-height: calc(1.25 / 0.875);
	--text-base: 1rem;
	--text-base--line-height: 1.5;
	--text-lg: 1.125rem;
	--text-lg--line-height: calc(1.75 / 1.125);
	--text-xl: 1.25rem;
	--text-xl--line-height: calc(1.75 / 1.25);
	--text-2xl: 1.5rem;
	--text-2xl--line-height: calc(2 / 1.5);
	--text-3xl: 1.875rem;
	--text-3xl--line-height: 1.2;
	--text-4xl: 2.25rem;
	--text-4xl--line-height: calc(2.5 / 2.25);
	--text-5xl: 3rem;
	--text-5xl--line-height: 1;
	--text-6xl: 3.75rem;
	--text-6xl--line-height: 1;
	--text-7xl: 4.5rem;
	--text-7xl--line-height: 1;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--tracking-tight: -0.025em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--radius-xs: 0.125rem;
	--radius-2xl: 1rem;
	--animate-spin: spin 1s linear infinite;
	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	--blur-sm: 8px;
	--blur-md: 12px;
	--blur-2xl: 40px;
	--aspect-video: 16 / 9;
	--default-transition-duration: 0.15s;
	--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	--default-font-family: var(--font-sans);
	--default-mono-font-family: var(--font-mono);
	--color-card: var(--card);
	--color-border: var(--border);
	--color-bone: oklch(96.5% 0.008 80);
	--color-bone-warm: oklch(94.5% 0.012 78);
	--color-bone-deep: oklch(92% 0.015 78);
	--color-cream: oklch(95.5% 0.014 85);
	--color-oat: oklch(88% 0.018 80);
	--color-stone: oklch(55% 0.014 65);
	--color-stone-soft: oklch(65% 0.012 70);
	--color-ink: oklch(22% 0.025 250);
	--color-ink-soft: oklch(32% 0.025 250);
	--color-navy: oklch(22% 0.025 250);
	--color-navy-light: oklch(34% 0.03 250);
	--color-dove: oklch(93% 0.004 80);
	--color-dove-dark: oklch(86% 0.006 80);
	--ease-magazine: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
	:root {
		--gutter: 48px;
	}
}
@media (max-width: 640px) {
	:root {
		--gutter: 24px;
	}
}

body {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--color-text-soft);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
.mb-0 {
	margin-bottom: 0 !important;
}
/* ---------- 3. Typography Utilities ---------- */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 1.5rem;
}

.folio {
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--color-stone);
	font-family: Gotham, sans-serif;
	font-size: 0.625rem;
	font-weight: 400;
}
.folio.muted-strong {
	color: var(--color-muted-light);
	margin-top: 0.5rem;
}
.folio.light {
	color: rgba(246, 243, 238, 0.5);
}
.folio.center {
	text-align: center;
}
.voices-folio-note,
.voices-section .folio {
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-size: 0.625rem;
	font-weight: 400;
	color: var(--color-stone);
	font-style: italic;
}

.display-1,
.hero-title {
	font-family: var(--font-heading);
	color: var(--color-ink);
	font-weight: 300;
	font-size: clamp(3.5rem, 7.2vw, 7rem);
	line-height: 0.96;
	letter-spacing: -0.025em;
}
.hero-title em {
	font-style: italic;
}

.display-2 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
}
.display-2 em {
	font-style: italic;
}
.display-2.light {
	color: var(--color-white);
}

.display-3 {
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
	line-height: 1.1;
	color: var(--color-text);
}
section.section.dark-section .display-home-block .folio {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	padding-left: 0;
	margin: 0 0 16px 0;
}

.display-home-block .letter-copy.light p {
	font-size: 0.95rem;
	line-height: 1.75;
	max-width: 36rem;
	margin-top: 16px;
	margin-bottom: 24px;
}

.display-3 em {
	font-style: italic;
}
.display-3.light {
	color: #fff;
	font-weight: 300;
	font-size: clamp(1.875rem, 3vw, 2.75rem);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.lede {
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--color-text-soft);
	max-width: 46ch;
}
.lede.light {
	color: rgba(246, 243, 238, 0.75);
}

.letter-copy p {
	margin-bottom: 1.5rem;
	color: var(--color-ink-soft);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.95;
}
.letter-copy p:last-of-type {
	margin-bottom: 2rem;
}
.letter-copy.light {
	color: rgba(255, 255, 255, 0.7);
}
.letter-copy.light p {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: 20px;
}
.letter-copy .stat-row {
	border-top: 1px solid var(--color-oat);
	padding-top: 2rem;
	gap: 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 48px;
	display: grid;
}

.letter-copy p.stat-number {
	font-weight: 300;
	font-size: clamp(2rem, 3.2vw, 2.8rem);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--color-ink);
	margin: 0;
}

.letter-copy p.stat-label {
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-family: Gotham, sans-serif;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-stone);
	margin-top: calc(var(--spacing) * 3);
	margin-bottom: 0;
}
.link-conv {
	font-weight: 500;
	color: var(--color-stone);
	letter-spacing: 0.3em;
	font-size: 0.65rem;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: 20px;
}

.link-conv span {
	background: var(--color-stone);
	width: calc(var(--spacing) * 8);
	height: 1px;
	display: inline-block;
}
.pull-quote {
	margin: 0 0 1.75rem;
	color: var(--color-ink);
	line-height: 1.45;
	border-left: 2px solid var(--color-stone);
	padding-left: 1.25rem;
	margin-bottom: 0;
}
.pull-quote p {
	font-family: var(--font-heading);
	font-weight: 300;
	font-style: italic;
	line-height: 1.4;
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	color: var(--color-ink);
	margin: 0 !important;
}

.big-quote p {
	letter-spacing: -0.015em;
	font-family: Butler, serif;
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	color: var(--color-ink);
}
.big-quote.light p,
.cta-content .big-quote p {
	color: var(--color-cream);
}

.inline-link {
	border-bottom: 1px solid currentColor;
}

/* ---------- 4. Layout ---------- */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0 2rem;
}
.col-span-3 {
	grid-column: span 3;
}
.col-span-4 {
	grid-column: span 4;
}
.col-span-6 {
	grid-column: span 6;
}
.col-span-7 {
	grid-column: span 7;
}

.col-span-5 {
	grid-column: span 5;
}

.col-span-8 {
	grid-column: span 8;
}
.col-span-9 {
	grid-column: span 9;
}

.split-content {
	align-items: start;
	margin-top: 3rem;
	gap: 56px;
}
.split-content.align-end {
	align-items: end;
}

.text-right {
	text-align: right;
}

.section {
	padding: 7rem 0;
	position: relative;
}
.dark-section {
	background: var(--color-dark);
}
section.section.dark-section .folio {
	font-size: 16px;
	letter-spacing: 0;
	font-weight: 300;
	margin-bottom: 24px;
	padding-left: 12px;
	color: rgba(255, 255, 255, 0.55);
}
section.section.dark-section .display-2 {
	font-family: Butler, serif;
	font-weight: 300;
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.accordion-item:hover a.link-arrow {
	gap: 20px;
	transition: 0.3s all linear;
}
.what-we-build .link-arrow.light {
	border: 0;
	margin-top: 0;
	padding-bottom: 0;
	letter-spacing: 0.3em;
	font-size: 0.7rem;
	font-weight: 500;
	gap: calc(var(--spacing) * 3);
	display: flex;
	align-items: center;
	transition: 0.3s all linear;
}

.what-we-build .link-arrow.light:hover {
	gap: 20px;
}
.what-we-build .link-arrow.light span {
	transform: translate(0rem);
	transition: transform 0.6s var(--ease-magazine);
	width: calc(var(--spacing) * 8);
	height: 1px;
	background: #fff;
}
section.section.dark-section .display-2 em {
	font-style: italic;
	color: rgba(255, 255, 255, 0.7);
}
.homes-section,
.journal-section {
	padding-bottom: 5rem;
}

.rule-full,
.full-rule {
	border: none;
	border-top: 1px solid #ded6cb;
	margin: 2.5rem 0;
}
.full-rule {
	margin: 0rem 0 0;
}
.dark-section .rule-full {
	border-color: var(--color-border-dark);
}

.folio-row {
	margin-bottom: 96px;
}

/* ---------- 5. Buttons & Links ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-nav);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 1rem 1.9rem;
	transition: all 0.25s ease;
	white-space: nowrap;
}
.btn-outline {
	border: 1px solid var(--color-text);
	color: var(--color-text);
}
.btn-outline:hover {
	background: var(--color-text);
	color: var(--color-cream);
}

.btn-solid {
	background: var(--color-cream);
	color: var(--color-dark);
	gap: 0.6rem;
}
.btn-solid:hover {
	background: transparent;
	color: var(--color-cream);
	box-shadow: inset 0 0 0 1px var(--color-cream);
}

.btn-solid-light {
	background: var(--color-cream);
	color: var(--color-dark);
	gap: 0.6rem;
	padding: 1rem 1.6rem;
	font-size: var(--fs-nav);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.btn-solid-light:hover {
	opacity: 0.85;
}

.link-arrow {
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-ink);
	transition:
		border-color 0.6s var(--ease-magazine),
		color 0.6s var(--ease-magazine);
	border-bottom: 1px solid oklch(22% 0.025 250 / 0.18);
	align-items: baseline;
	gap: 0.75rem;
	padding-bottom: 0.4rem;
	font-family: Gotham, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	display: inline-flex;
	margin-top: 0;
}
.link-arrow:hover {
	border-color: #121c2699;
}
.link-arrow span {
	transform: translate(0rem);
	transition: transform 0.6s var(--ease-magazine);
}
.link-arrow:hover span {
	transform: translate(0.35rem);
	transition: transform 0.6s var(--ease-magazine);
}
.link-arrow.tiny {
	font-size: 0.68rem;
	padding-bottom: 0.3rem;
}
.link-arrow.light {
	color: var(--color-cream);
	border-color: var(--color-border-dark);
}

.cta-row {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}
.call-label {
	font-size: var(--fs-nav);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.7);
}
.call-label a {
	border-bottom: 1px solid rgba(246, 243, 238, 0.4);
}

/* ---------- 6. Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(246, 243, 238, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition:
		background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled {
	background: rgba(246, 243, 238, 0.96);
	border-bottom-color: rgba(18, 28, 38, 0.06);
	border-bottom: 1px solid #121c260d;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 95px;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled .header-inner {
	height: 75px;
}
.header-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}
.header-logo img {
	height: 38px;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-mark {
	font-family: var(--font-heading);
	font-size: 1.55rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--color-text);
	transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled .logo-mark {
	font-size: 1.2rem;
}
.logo-mark.light {
	color: var(--color-cream);
}
.logo-sub {
	font-size: 0.5rem;
	letter-spacing: 0.2em;
	color: var(--color-muted);
	margin-top: 0.35rem;
	transition:
		font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled .logo-sub {
	font-size: 0.4rem;
	margin-top: 0.15rem;
	opacity: 0.85;
}
.site-header.scrolled .header-logo img {
	height: 30px;
	transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav > ul {
	display: flex;
	gap: 2.75rem;
}
.main-nav li {
	position: relative;
}
.main-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-nav);
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.85;
	transition: opacity 0.2s ease;
	font-family: "Gotham Book";
}
.main-nav a:hover {
	opacity: 1;
}
.chev {
	opacity: 0.6;
	margin-top: 1px;
	transition: transform 0.25s ease;
	width: 12px;
	height: auto;
}
.has-dropdown:hover .chev,
.has-dropdown:focus-within .chev {
	transform: rotate(180deg);
}

/* ---------- Mega-menu dropdown ---------- */
.nav-dropdown {
	position: absolute;
	top: calc(100% + 15px);
	right: 0;
	display: flex;
	gap: 3rem;
	background: #fff;
	box-shadow:
		0 24px 48px rgba(18, 28, 38, 0.14),
		0 2px 8px rgba(18, 28, 38, 0.06);
	padding:20px 20px;
	min-width: 560px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease;

	z-index: 99;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.nav-dropdown-col {
	min-width: 220px;
	flex: 1;
}
.nav-dropdown-heading {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ACB0B3;
	    padding-bottom: 10px;
    margin-bottom: 0;
	padding-left: 6px;
	padding-right: 6px;
  
}
.nav-dropdown-col ul li {
	border-top: 1px solid #E7E8E9;
}

.nav-dropdown-col ul li a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 10px 6px;
	opacity: 1;
}
.nav-dropdown-col ul li a:hover{
	background-color: #F6F5F5;
}

.nd-title {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
    color: #4C545B;
    line-height: 1.2;
}
.nd-sub {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: #5e6062;
	line-height: 1.3;
}

.nav-dropdown-col ul li a:hover .nd-title{
	color: #121c26;
}
.nav-dropdown-col ul li a:hover .nd-sub{
	color: #29343f;
}
.enquire-btn {
	padding: 12px 24px;
	border-color: rgb(18 28 38 / 80%);
	line-height: 1.5;
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	font-weight: 500;
	font-family: Gotham, sans-serif;
}
.wth-slide .nav-dropdown{
	min-width: 250px;
	    gap: 0px;
    flex-wrap: wrap;

    padding: 10px 0px;
}
.wth-slide .nav-dropdown-col{
	min-width: auto;
	flex: 0 0 100%;
	max-width: 100%;
}
.wth-slide .nav-dropdown-col a{
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	padding: 10px 15px;

}
.wth-slide .nav-dropdown-col a:hover{
	background-color: #F6F5F5;
}

/* ---------- 7. Hero ---------- */
.hero {
	padding-top: 3rem;
}
.meta-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 24px;
	gap: 1rem;
}
.meta-item {
	color: var(--color-muted);
	white-space: nowrap;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-family: Gotham, sans-serif;
	font-size: 0.625rem;
	font-weight: 400;
}
.meta-center {
	font-style: italic;
	flex: 1;
	text-align: center;
}

.hero-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3rem;
	align-items: center;
	padding: 3.5rem 0 0 0;
}
.hero-copy {
	grid-column: span 5 / span 5;
}

figure.hero-figure {
	grid-column: span 7 / span 7;
}
.hero-copy .eyebrow {
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-stone);
	font-family: Gotham, sans-serif;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: calc(var(--spacing) * 8);
}
.hero-copy .lede {
	margin-top: 40px;
	color: rgb(15, 54, 62);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.85;
	opacity: 1;
	max-width: 28rem;
	font-family: "Gotham Book";
}

.hero-figure {
	position: relative;
}
.hero-swiper {
	width: 100%;
	height: 640px;
}
.hero-swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-figure figcaption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	color: var(--color-muted);
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
	font-style: italic;
}
.dots {
	display: inline-flex;
	gap: 6px;
	justify-content: flex-end;
	width: auto !important;
}
.dot {
	display: inline-block;
	cursor: pointer;
	width: 10px;
	height: 1px;
	background: var(--color-oat);
	transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dot.active {
	width: 28px;
	height: 1px;
	background: var(--color-ink);
	transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.continue-row {
	align-items: center;
	gap: 1.25rem;
	display: flex;
	padding: 80px 0;
}
.continue-row .rule {
	background: #d5d0c8;
	flex: 1;
	height: 1px;
}
.continue-label {
	color: var(--color-stone-soft);
	letter-spacing: 0.5em;
	font-style: italic;
	padding-inline: calc(var(--spacing) * 6);
	font-size: 0.625rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* ---------- Sections shared ---------- */
.letter-section {
	background: var(--color-bone);
	padding-top: 8rem;
	padding-bottom: 10rem;
}
.homes-section {
	background: var(--color-bone-warm);
	padding-top: 9rem;
	padding-bottom: 10rem;
}
.closer-look-section {
	background: var(--color-bone);
	padding-top: 9rem;
	padding-bottom: 10rem;
}

.stat-row {
	margin-top: 3rem;
	gap: 4rem 2rem;
}
.stat-number {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--color-text);
}
.stat-number em {
	font-style: italic;
}
.stat-label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text);
	margin-top: 0.6rem;
}
.stat-desc {
	font-size: 0.9rem;
	color: var(--color-muted);
	margin-top: 0.4rem;
}
.dark-section .stat-number,
.dark-section .stat-label {
	color: var(--color-cream);
}

/* ---------- 9. Featured Homes Grid ---------- */
.homes-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: calc(var(--spacing) * 20) calc(var(--spacing) * 6);
	margin-top: calc(var(--spacing) * 20);
}
.home-card--feature {
	grid-column: 1 / -1;
}
.home-media {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--color-oat);
	margin-bottom: 1.75rem;
}
.home-media.img-video {
	aspect-ratio: 16 / 9;
	background: var(--color-oat);
}
.home-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.home-media.img--portrait {
	aspect-ratio: 4 / 5;
	background: var(--color-oat);
}

.home-media.img--portrait img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.footer-logo img{
	    height: 50px;
    object-fit: contain;
}

.footer-logo a{
	display: inline-block;
}

.home-card:hover .home-media img {
	transform: scale(1.04);
}
.home-text-wrap {
	column-gap: calc(var(--spacing) * 4);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	display: grid;
	align-items: baseline;
}
.home-text-wrap .home-title {
	color: var(--color-ink);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.012em;
}

.home-text-wrap .home-meta {
	color: var(--color-stone);
	letter-spacing: 0.32em;
	margin-top: calc(var(--spacing) * 3);
	text-transform: uppercase;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
}

.home-text-wrap .home-desc {
	color: var(--color-ink-soft);
	font-weight: 300;
	font-size: 0.975rem;
	line-height: 1.85;
	margin-top: calc(var(--spacing) * 5);
}
p.home-index {
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-stone);
	font-family: Gotham, sans-serif;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	grid-column: span 1 / span 1;
}

.home-text-wrap-inner {
	grid-column: span 11 / span 11;
}
.home-title {
	font-family: var(--font-heading);
	font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
	font-weight: 400;
	color: var(--color-text);
}
.home-meta {
	font-size: 0.78rem;
	font-style: italic;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	margin: 0.5rem 0 1rem;
}
.home-desc {
	max-width: 52ch;
}
.home-tag {
	color: var(--color-ink);
	letter-spacing: 0.28em;
	font-style: italic;
	margin-top: calc(var(--spacing) * 4);
	font-size: 0.65rem;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.6;
}

/* ---------- 10. Closer Look ---------- */
.wide-figure {
	margin-top: calc(var(--spacing) * 20);
	margin-bottom: 24px;
}
.wide-figure img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}
.wide-figure figcaption {
	font-style: italic;
	margin-top: 1rem;
	text-transform: uppercase;
	color: var(--color-stone);
	font-family: Gotham, sans-serif;
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
}
.quote-row {
	align-items: start;
	margin-block: calc(var(--spacing) * 32);
	column-gap: calc(var(--spacing) * 6);
}

/* ---------- 11. Accordion / What We Build ---------- */
.accordion-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-top: 80px;
}
.accordion-item {
	display: block;
	cursor: pointer;
}
.accordion-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.accordion-head {
	display: grid;
	grid-template-columns: auto 1fr 1.5rem;
	align-items: center;
	gap: 1.5rem;
	padding: 0;
	padding-block: calc(var(--spacing) * 7);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	transition: opacity 0.25s ease;
	gap: 24px;
}
.accordion-list::after {
	content: "";
	display: block;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.accordion-index {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.4);
}
.accordion-head h3 {
	font-family: Butler, serif;
	font-weight: 300;
	font-size: clamp(1.625rem, 2.5vw, 2.25rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.25s ease;
	line-height: 1.15;
}
.accordion-sub {
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	margin-top: calc(var(--spacing) * 2);
	font-family: "Gotham Book";
}
.accordion-arrow {
	color: rgba(255, 255, 255, 0.3);
	font-size: 1.5rem;
	line-height: calc(2 / 1);
	font-family: Gotham, "DM Sans", system-ui, sans-serif;
}

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.4s ease,
		padding 0.4s ease;

	padding-left: 61px;
}
.accordion-body p {
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 20px;
	max-width: 36rem;
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.75;
}

.accordion-item input:checked ~ .accordion-head h3 {
	color: var(--color-white);
}
.accordion-item input:checked ~ .accordion-head .accordion-index,
.accordion-item input:checked ~ .accordion-head .accordion-sub,
.accordion-item input:checked ~ .accordion-head .accordion-arrow {
	color: rgba(255, 255, 255, 1);
}

span.accordion-index {
	letter-spacing: 0.3em;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.4);
	font-family: "Gotham Book";
}
.accordion-item input:checked ~ .accordion-body {
	max-height: 12rem;
	padding-bottom: 28px;
	margin-top: -16px;
}

.accordion-media {
	position: relative;
	width: 100%;
}
.accordion-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	aspect-ratio: 4/5;
}
.accordion-image:before{
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(18, 28, 38, 0.15);
}

.accordion-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.accordion-caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	text-transform: uppercase;
	color: #fff;
	font-size: 0.6rem;
	letter-spacing: 0.42em;
	font-weight: 400;
}
#acc-1:checked ~ * .acc-img-1,
#acc-2:checked ~ * .acc-img-2,
#acc-3:checked ~ * .acc-img-3,
#acc-4:checked ~ * .acc-img-4,
#acc-5:checked ~ * .acc-img-5 {
	opacity: 1;
}
.acc-img-1 {
	opacity: 1;
}

.display-home-block {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: calc(var(--spacing) * 16);
	margin-top: calc(var(--spacing) * 20);
	display: grid;
	align-items: center;
	align-items: center;
	gap: calc(var(--spacing) * 8);
}
.by-appointment {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.5);
	margin-top: 1rem;
}

/* ---------- 12. Voices ---------- */
.voices-section hr.rule-full {
	background: #d5d0c8;
	margin-top: 96px;
	margin-bottom: 40px;
}

.voices-section a.link-arrow.small {
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-ink);
	transition:
		border-color 0.6s var(--ease-magazine),
		color 0.6s var(--ease-magazine);
	border-bottom: 1px solid oklch(22% 0.025 250 / 0.18);
	align-items: baseline;
	gap: 0.75rem;
	padding-bottom: 0.4rem;
	font-family: Gotham, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	display: inline-flex;
}
.voices-section .folio-row {
	margin-bottom: calc(var(--spacing) * 16);
	border-bottom: 1px solid #d5d0c8;
	column-gap: calc(var(--spacing) * 4);
	padding-bottom: 40px;
}

.voices-section {
	background: var(--color-bone);
	padding-top: 8rem;
	padding-bottom: 8rem;
}
.voices-heading {
	max-width: 56rem;
	color: var(--color-ink);
	font-weight: 300;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	opacity: 1;
	transform: none;
	margin-bottom: calc(var(--spacing) * 16);
}
.voices-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: calc(var(--spacing) * 14);
	column-gap: calc(var(--spacing) * 10);
}
.voice-block {
	border-top: 1px solid var(--color-border);
	padding-top: 1.5rem;
}
.voice-block .folio {
	margin-bottom: 1.5rem;
	color: var(--color-stone);
	letter-spacing: 0.18em;
	margin-bottom: calc(var(--spacing) * 5);
	font-size: 0.65rem;
	font-weight: 400;
	line-height: 1.6;
	text-transform: uppercase;
	padding-bottom: 20px;
	border-bottom: 1px solid oklch(0.22 0.03 250 / 0.18);
	font-style: normal;
}
.voice-quote {
	font-family: var(--font-heading);
	max-width: 34ch;
	color: var(--color-ink);
	font-weight: 300;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.32;
	letter-spacing: -0.005em;
	font-style: italic;
}
.voice-sub {
	color: var(--color-ink-soft);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.6;
	margin-top: calc(var(--spacing) * 5);
	font-family: "Gotham Book";
}

/* ---------- 13. Community ---------- */
.community-section .display-2 {
	margin-top: 0;
	font-weight: 300;
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	letter-spacing: -0.015em;
	color: #121c26;
	line-height: 1.05;
}
.community-row {
	margin-top: 4rem;
	gap: 4rem;
}
.community-figure img {
	width: 100%;
	height: 560px;
	object-fit: cover;
}
.community-figure figcaption {
	margin-top: 1rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	color: #121c268c;
}
section.section.community-section {
	padding-block: calc(var(--spacing) * 28);
}

section.section.community-section .folio {
	color: #121c26a6;
	margin-bottom: calc(var(--spacing) * 6);
	font-size: 16px;
	letter-spacing: 0;
	font-weight: 300;
	font-family: "Gotham";
}

section.section.community-section .split-content.community-row {
	margin-top: 80px;
}

section.section.community-section .stat-row.stat-row--3 {
	margin-top: 1rem;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	color: #121c268c;
	gap: calc(var(--spacing) * 20);
	grid-template-columns: repeat(12, 1fr);
	padding-top: 60px;
	margin-top: calc(var(--spacing) * 24);
	border-top: 1px solid oklch(86% 0.012 78);
}

section.section.community-section p.stat-number {
	width: auto;
}

section.section.community-section p.stat-number {
	font-family: Butler, serif;
	font-weight: 300;
	font-size: clamp(3rem, 4vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: #121c26;
}

section.section.community-section p.stat-label {
	text-transform: uppercase;
	font-size: .7rem;
	letter-spacing: 0.3em;
	color: #121c26;
	font-weight: 500;
	margin-top: calc(var(--spacing) * 5);
}

section.section.community-section p.stat-desc {
	color: #121c26a6;
	margin-bottom: calc(var(--spacing) * 6);
	font-weight: 300;
	line-height: 1.7;
	font-size: 0.9rem;
	letter-spacing: 0;
	margin-top: calc(var(--spacing) * 3);
	text-transform: initial;
}
.community-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.community-copy .big-quote p {
	font-size: 32px;
	    font-size: 32px;
    letter-spacing: -0.01em;
    font-style: normal;
}
.quote-mark {
	font-family: var(--font-heading);
	font-size: 3rem;
	color: var(--color-border);
	line-height: 1;
}
.founder-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}
.founder-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 1.3rem;
}
.founder-name {
	font-weight: 500;
	font-size: 14px;
	color: var(--color-text);
}
.founder-role {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
    color: #121c268c;
}
.stat-row--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* ---------- 14. Testimonial Carousel ---------- */
.testimonial-section {
	background: var(--color-bg);
}
.testimonial-section .folio{
    color: #121c26a6;
	font-size: 16px;
	letter-spacing: normal;
	    text-transform: initial;
    font-weight: 400;
}
.testimonial-section .big-quote{
	    font-weight: 300;
    font-size: clamp(1.625rem, 3vw, 2.75rem);
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #121c26;
	font-family: Butler, serif;
}
.testimonial-row {
	gap: 3rem;
	margin-top: 3rem;
}
.testimonial-name {

    font-size: .95rem;
    line-height: 0.7;
	font-weight: 500;
	line-height: 1.3;
	margin-top: 48px;
}
.testimonial-meta {
	font-size: 0.7rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #121c268c;
	margin-top: 0.4rem;
	font-weight: 400;
}
.testimonial-count {
	font-size: .65rem;
	color: #121c2673;
	margin-bottom: 1.5rem;
	letter-spacing: 0.1em;
}
.testimonial-list{
	border-left: 1px solid #d5d0c8;
	padding-left: 32px;
}
.testimonial-list ul li {
	padding: 1rem 0;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}
.testimonial-list ul li.active {
	opacity: 1;
}
.testimonial-list ul li:hover {
	opacity: 0.8;
}
.t-name {
	font-weight: 500;
	font-size:.7rem;
	letter-spacing: .28em;
	color: #121c26b3;
}
.t-loc {
	font-size: .7rem;
	    letter-spacing: .2em;
	text-transform: uppercase;
	color: #121c26b3;
}
.testimonial-list .rule-full {
	margin: 1.5rem 0;
}

.active .t-name, .active .t-loc{
	    color: #121c26;
}
.testimonial-list  .link-arrow{
	margin-top: 0px;
	font-size: 12px;
}
.testimonial-list  .link-arrow:hover{
	opacity: 0.7;
}
/* Swiper — testimonial carousel (vertical slide-up + slight fade, autoplay) */
.testimonial-swiper {
  overflow: hidden;
  height: 360px;
}
.testimonial-swiper .swiper-slide {
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 0;
}
.testimonial-list ul li[data-slide-index] {
  cursor: pointer;
}
/* ---------- 15. Working Journal ---------- */
.journal-section {
    padding-top: 8rem;
    padding-bottom: 9rem;
}
.journal-section .display-2{
    font-size: clamp(2.5rem, 5.4vw, 5.25rem);
}
.journal-section .folio-row .text-right{
	font-style: italic;
}
.journal-section .letter-copy p{
	max-width: 530px;
	margin-left: auto;
	color: #29343f;
}
.journal-section .letter-copy p a{
	font-size: 11px;
	font-weight: 500;
	color: var(--color-ink);
	letter-spacing: .28em;	
}

.journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 4rem;
}
.journal-grid img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin-bottom: 1.25rem;
}
.journal-grid figcaption {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--color-text);
}
.journal-grid figcaption span {
	display: block;
	font-family: var(--font-body);
	    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.7;
	    color: #29343f;
	margin-top: 4px;
}
.journal-footer-row {
	display: flex;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 2rem;
	border-top: 1px solid #d5d0c8;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid #d5d0c8;
}
.journal-footer-row .folio a{
	letter-spacing: .28em;
	color: #787069;
	font-size: .6875rem;
	font-weight: 500;
	padding-bottom: .4rem;
	border-bottom: 1px solid transparent;
	width: 100%;
	display: block;
	margin-bottom: -1px;
}
.journal-footer-row .folio a:hover{
	border-color: #121c2699;
	color: var(--color-ink);
}

.journal-footer-row .folio {
	width: 60%;
}
.journal-footer-row .folio.text-right {
	width: 40%;
	text-align: left;
}
.journal-img{
	overflow: hidden;
	aspect-ratio: 1/1;
}
.journal-img img{
	transition: all 600ms ease;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;	
}
.journal-img:hover img{
	transition: all 600ms ease;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	transform: scale(1.04);

}
.journal-tit{
	margin-top: 20px;
	font-size: 20px;
	line-height: 1.3;
}

/* ---------- 16. CTA ---------- */
.cta-section {
	padding: 192px 0;
	overflow: hidden;
}
.cta-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.cta-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(12, 17, 22, 0.85) 0%,
		rgba(12, 17, 22, 0.55) 60%,
		rgba(12, 17, 22, 0.35) 100%
	);
}
.cta-content {
	position: relative;
	z-index: 1;
	max-width: 780px;
}
.cta-content .lede {
	margin-top: 2rem;
	max-width: 55ch;
}
.cta-section .folio {
	font-size: 16px;
	margin-bottom: 24px;
	letter-spacing: normal;
    text-transform: none;
}
.accordion-image {
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}
 
.accordion-image.active {
    opacity: 0.8;
    visibility: visible;
}
.cta-inner{
	max-width: 768px;
}
.conversation-description {
	margin-top: 64px;
}
.conversation-description p{
	font-size: .7rem;
	color: rgba(246, 243, 238, 0.6);
	letter-spacing: .3em;
	font-size: .7rem;
	text-transform: uppercase;
	font-weight: 400;
}

/* ---------- 17. Footer ---------- */
.site-footer {
	background: var(--color-dark);
	color: var(--color-cream);
}
.footer-address {
	padding: 1.5rem var(--gutter);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.6);
}
.footer-banner {
	text-align: center;
	padding: 2.5rem 0 2.5rem;
	border-bottom: 1px solid var(--color-border-dark);
}
.footer-banner .folio {
	font-size: .65rem;
	letter-spacing: .4em;
	color: rgba(255, 255, 255, 0.50);
}

.footer-tagline {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
	color: var(--color-cream);
	margin-top: 1rem;
	line-height: 1.2;
}

.footer-main {
	padding: 4.5rem 0;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem;
}
.footer-brand{
	grid-column: span 3 / span 3;
}
.footer-links{
	grid-column: span 6 / span 6;
}
.footer-newsletter{
	grid-column: span 3 / span 3;
}

.footer-linkInner{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:1.5rem 2rem;
}

.footer-brand .logo-mark {
	font-size: 1.6rem;
	letter-spacing: 0.14em;
}
.footer-brand .logo-sub {
	color: rgba(246, 243, 238, 0.4);
}
.footer-blurb {
	font-size: 0.85rem;
	line-height: 1.7;
	color: rgba(246, 243, 238, 0.55);
	margin-top: 1.5rem;
	max-width: 30ch;
}
.social-row {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
}
.social-row a {
	width: 34px;
	height: 34px;
	border: 1px solid var(--color-border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(246, 243, 238, 0.8);
	transition:
		background 0.2s ease,
		color 0.2s ease;
}
.social-row a:hover {
	background: rgba(246, 243, 238, 0.1);
}

.footer-heading {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.4);
	margin-bottom: 1.1rem;
	margin-top: 1.75rem;
}
.footer-heading:first-child {
	margin-top: 0;
}
.footer-newsletter .footer-blurb{
	margin-top: 0px;
}
.footer-studio .footer-heading{
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(246, 243, 238, 0.4);
    margin-bottom: 1.1rem;
}
.footer-newsletter .footer-heading{
	margin-top: 0px;
}
.footer-links ul li {
	margin-bottom: 2px;
}
.footer-links a,
.footer-studio a {
	font-size: 0.9rem;
	color: rgba(246, 243, 238, 0.75);
}
.footer-links a:hover,
.footer-studio a:hover {
	color: var(--color-cream);
}

.footer-studio p {
	font-size: 0.9rem;
	color: rgba(246, 243, 238, 0.75);
	margin-bottom: 1rem;
	line-height: 1.6;
}

.newsletter-form {
	margin-top: 1.5rem;
}
.field-row {
	display: grid;
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-bottom: 1rem;
}
.field {
	display: flex;
	flex-direction: column;
}
.field span {
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.4);
	margin-bottom: 0.5rem;
}
.field input {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-border-dark);
	color: var(--color-cream);
	font-size: 0.9rem;
	padding: 0.5rem 0;
	width: 100%;
}
.field input:focus {
	border-bottom-color: var(--color-cream);
	outline: none;
}
.footer-newsletter .btn-solid-light {
	margin-top: 0.5rem;
	padding: 10px 30px;
	cursor: pointer;
}
.field input:focus-visible{
	outline: none;
}

.footer-badges {
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
	padding: 2rem var(--gutter);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(246, 243, 238, 0.5);
	justify-content: center;
	padding-top: 0px;
	padding-bottom: 0px;
}
.footer-membership {
	padding: 0px;
	text-align: center;
	font-size: 0.78rem;
	color: rgba(246, 243, 238, 0.4);
}
.footer-membership a {
	border-bottom: 1px solid rgba(246, 243, 238, 0.25);
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding: 15px var(--gutter);
	
	font-size: 0.78rem;
	color: rgba(246, 243, 238, 0.45);
}
.footer-bottom a {
	border-bottom: 1px solid rgba(246, 243, 238, 0.25);
}

    .mobile-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:0;
    background:none;
    cursor:pointer;
}
 
.mobile-menu-toggle span{
    display:block;
    height:2px;
    background:#000;
    margin:7px 0;
}
 
.mobileMenu-bar{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    max-width:90%;
    height:100vh;
    background:#fff;
    z-index:9999;
    overflow:auto;
    transition:.35s;
    padding:30px;
	min-height: 100%;
}
 
.mobileMenu-bar.active{
    right:0;
}
 
.mobile-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}
 
.mobile-overlay.active{
    opacity:1;
    visibility:visible;
}
 
.mobile-close{
    border:0;
    background:none;
    font-size:30px;
    cursor:pointer;
    float:right;
	font-weight: 300;
}
 
.mobile-nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
 
.mobile-nav li{
    border-bottom:1px solid #eee;
}
 
.mobile-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
 
.mobile-nav a{
    display:block;
    padding:10px 0;
   color: var(--color-text);
    text-decoration:none;
	font-size: 16px;
	width: 100%;
}
.mobile-nav a:hover{
	opacity: 1;
}
 
.mobile-submenu{
    display:none;
    padding-left:20px;
}
 
.submenu-toggle{
    cursor:pointer;
    font-size:22px;
    padding:10px;
}
 
body.menu-open{
    overflow:hidden;
}
 
.cta-section .cta-row .btn-solid{
	    border: none;
    padding: 4px 0;
    background-color: transparent;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}
.cta-section .cta-row .btn-solid:hover{
	border-bottom: 1px solid #fff;
	outline: none;
	box-shadow: none;
}
.call-label a{
	border: none;
}
.call-label a:hover{
	color:#fff;
}

.footer-badgeinner{
	display: flex;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--color-border-dark);
	border-bottom: 1px solid var(--color-border-dark);
	padding: 15px 0;
	width: 100%;	
	flex-wrap: wrap;
}
.footer-badgeleft{
    max-width: 40%;
    flex: 0 0 40%;
    gap: 2px 15px;
    display: flex;
    flex-wrap: wrap;
	font-size: .64rem;
}
.footer-badgeinner .footer-badgeright{
	flex: 1;
}
.footer-badgeinner .footer-badgeright p{
font-size: .68rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.3;
	text-align: right;
}

/* media query */

@media (max-width: 1100px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.hero-swiper {
		height: 420px;
	}
	.homes-grid {
		grid-template-columns: 1fr;
	}
	.accordion-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.accordion-media {
		height: 340px;
		order: -1;
	}
	.voices-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 2rem;
	}
	.community-row,
	.testimonial-row {
		grid-template-columns: 1fr;
	}
	.community-row .col-span-6,
	.testimonial-row .col-span-8,
	.testimonial-row .col-span-4 {
		grid-column: 1 / -1;
	}
}

@media (max-width: 780px) {
	.section {
		padding: 4.5rem 0;
	}
	.main-nav {
		display: none;
	}
	.header-inner {
		height: 76px;
	}
	.meta-row {
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}
	.meta-center,
	.meta-right {
		text-align: left;
	}
	.split-content,
	.grid-12.folio-row,
	.grid-12.stat-row,
	.grid-12.quote-row,
	.grid-12.testimonial-row,
	.grid-12.community-row {
		grid-template-columns: 1fr;
	}
	.split-content > *,
	.folio-row > *,
	.stat-row > *,
	.quote-row > * {
		grid-column: 1 / -1 !important;
	}
	.folio-row .text-right {
		text-align: left;
	
	}
	.journal-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.field-row {
		grid-template-columns: 1fr;
	}
	.footer-bottom {
		flex-direction: column;
		gap: 0.75rem;
	}
	.stat-row--3 {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.cta-content {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.logo-mark {
		font-size: 1.2rem;
	}
	.hero-swiper {
		height: 300px;
	}
	
	.btn,
	.link-arrow {
		font-size: 0.7rem;
	}
}

/*  */
.container {
	width: 100%;
}
.justify-between {
	justify-content: space-between;
}
.items-center {
	align-items: center;
}
.h-full {
	height: 100%;
}
.flex {
	display: flex;
}
.py-28 {
	padding-block: calc(var(--spacing) * 28);
}
.bg-navy {
	background-color: #121c26;
}
.custom-media-block {
	position: relative;
	overflow: hidden;
	transition: 0.3s all linear;
	aspect-ratio: 16 / 10;
}
.custom-media-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s all linear;
	position: absolute;
	left: 0;
	top: 0;
}
.custom-media-block:hover img {
	transform: scale(1.05);
	transition: 0.3s all linear;
}
@media (min-width: 640px) {
	.container {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}
@media (min-width: 1024px) {
	.container {
		max-width: 1480px;
		padding-left: 4rem;
		padding-right: 4rem;
	}
}
@media (min-width: 1440px) {
	.container {
		padding-left: 5.5rem;
		padding-right: 5.5rem;
	}
}
@media (min-width: 40rem) {
	.container {
		max-width: 40rem;
	}
}
@media (min-width: 48rem) {
	.container {
		max-width: 48rem;
	}
}
@media (min-width: 64rem) {
	.voices-grid {
		column-gap: calc(var(--spacing) * 16);
	}
	.voices-section .folio-row {
		margin-bottom: calc(var(--spacing) * 20);
	}
	.display-home-block {
		padding-top: calc(var(--spacing) * 20);
		gap: calc(var(--spacing) * 12);
		margin-top: calc(var(--spacing) * 28);
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.accordion-item input:checked ~ .accordion-body {
		padding-bottom: 32px;
	}
	.accordion-head {
		padding-block: calc(var(--spacing) * 8);
		gap: 40px;
	}
	.accordion-grid {
		margin-top: calc(var(--spacing) * 28);
	}
	.lg\:py-40 {
		padding-block: calc(var(--spacing) * 40);
	}
	.lg\:py-40 {
		padding-block: calc(var(--spacing) * 40);
	}
	.quote-row {
		margin-block: calc(var(--spacing) * 40);
		column-gap: calc(var(--spacing) * 12);
	}
	section.section.closer-look-section {
		/* padding-block: calc(var(--spacing) * 44); */
	}
	.wide-figure {
		margin-top: calc(var(--spacing) * 28);
	}
	.lg\:col-span-7 {
		grid-column: span 7 / span 7;
	}
	.lg\:col-span-5 {
		grid-column: span 5 / span 5;
	}
	.lg\:col-span-6 {
		grid-column: span 6 / span 6;
	}

	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.container {
		max-width: 64rem;
	}

	.voices-heading {
		margin-bottom: calc(var(--spacing) * 20);
	}
	.split-content {
		gap: 96px;
	}

	.homes-grid {
		margin-top: calc(var(--spacing) * 28);
		column-gap: calc(var(--spacing) * 12);
	}
	section.section.community-section, .section.testimonial-section {
	padding-block: calc(var(--spacing) * 40);
}

}

@media (min-width: 80rem) {
	.container {
		max-width: 80rem;
	}
}
@media (min-width: 96rem) {
	.container {
		max-width: 96rem;
	}
}
@media (max-width: 1279px) {
	.main-nav > ul {
    display: flex;
    gap: 1.75rem;
}
.nav-dropdown{
	right: -110px;
}
.wth-slide .nav-dropdown{
	right: 0px;
}
.meta-item{
	white-space: normal;
}
.container.hero-grid{
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-12.split-content {
    gap: 56px;
}
.container.homes-grid{
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.accordion-grid{
	grid-template-columns: repeat(12, minmax(0, 1fr));
}
.accordion-grid .accordion-list{
	grid-column: span 7 / span 7;
}
.accordion-grid .accordion-media{
    grid-column: span 5 / span 5;
    order: 1;
}
.voices-grid{
	    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-12.split-content.community-row, .testimonial-row, .footer-grid{
grid-template-columns: repeat(12, 1fr);
}
.footer-linkInner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1rem;
}

}
@media (max-width: 1023px) {
.main-nav,
    .enquire-btn{
        display:none;
    }
 
    .mobile-menu-toggle{
        display:block;
    }
	.meta-row{
		    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
	}
	.meta-item.meta-center{
		text-align: center;
	}
	.meta-item.meta-right{
		text-align: right;
	}
	.hero-copy, figure.hero-figure, .col-span-6, .homes-grid .home-card, .col-span-7, .col-span-5, .col-span-9, .accordion-grid .accordion-list, .accordion-grid .accordion-media, .footer-brand,
	.footer-links, .footer-newsletter {
    grid-column: span 12 / span 12;
}
.accordion-grid .accordion-media{
	display: none;
}
section.section.community-section .stat-row.stat-row--3{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
section.section.community-section .stat-row.stat-row--3 .col-span-4 {
    grid-column: initial!important;
}
.journal-section .letter-copy p{
	max-width: 100%;
	margin: 0px;
}
.section.letter-section .col-span-6{
    grid-column: span 6 !important;
}
.section.letter-section .grid-12.folio-row{
grid-template-columns: repeat(12, 1fr);
}
.section.letter-section .folio-row .text-right {
    text-align: right;

}
}
@media (max-width: 767px) {
	.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.voices-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
section.section.community-section .stat-row.stat-row--3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 48px;
}
.grid-12.split-content.community-row, .testimonial-row, .footer-grid {
    grid-template-columns: repeat(1, 1fr);
}
.journal-footer-row .folio, .journal-footer-row .folio.text-right {
    width: 100%;
}
.journal-footer-row .folio.text-right{
	text-align: left;
}
.hero-copy, figure.hero-figure, .col-span-6, .homes-grid .home-card, .col-span-7, .col-span-5, .col-span-9, .accordion-grid .accordion-list, .accordion-grid .accordion-media, .footer-brand, .footer-links, .footer-newsletter, .footer-studio {
    grid-column: span 12 / span 12;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}
.container.hero-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.meta-item{
	letter-spacing: 0.2em;
	line-height: 1.5;
}
.section.letter-section .grid-12.folio-row {
    gap: 0px;
}
.accordion-grid {
    grid-template-columns: 1fr;

}
.section.testimonial-section .col-span-3{
	grid-column: initial;
}
.voice-block {
    padding-top: 0px;
}
.hero-grid{
	padding-top: 40px;
}
.cta-row {
    gap: 15px 2.5rem;
}
.folio-row {
    margin-bottom: 64px;
}
.footer-badgeleft, .footer-badgeinner .footer-badgeright{
	flex: 0 0 100%;
	max-width: 100%;
}
.footer-badgeinner .footer-badgeright p{
	text-align: center;
}
.footer-badgeleft{
	justify-content: center;
}
.footer-badgeinner{
	gap: 6px 20px;
}
.footer-bottom{
	text-align: center;
	gap: 2px 10px;
}
.container.homes-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
}

@media (max-width: 575px) {
	.footer-linkInner {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}


}