/* ==========================================================================
   Toyad Homes — design system
   Editorial, image-led, wide. Deep forest ink and brass on warm bone.
   Layers: tokens · reset · layout · primitives · header · hero · search ·
           cards · sections · property · agents · developments · editorial ·
           forms · footer · utilities.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
	/* Brand — mirrored from the logo. Three values re-skin the site. */
	--tw-ink:    #12312a;
	--tw-deep:   #0b211c;
	--tw-mid:    #1e4a3e;
	--tw-sage:   #3c6b5b;
	--tw-mist:   #8fa79b;
	--tw-brass:  #c2a15a;
	--tw-brass-d:#a8873f;
	--tw-clay:   #b4643a;

	--tw-bone:   #f4f0e6;
	--tw-sand:   #e6ded0;
	--tw-paper:  #fbf9f4;
	--tw-white:  #ffffff;

	--tw-body:   #3f4a45;
	--tw-muted:  #6d7b74;
	--tw-line:   #ddd5c6;
	--tw-line-2: #c9bfad;

	/* Type */
	--tw-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--tw-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--tw-t--2: 0.72rem;
	--tw-t--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.875rem);
	--tw-t-0:  clamp(0.95rem, 0.91rem + 0.19vw, 1.05rem);
	--tw-t-1:  clamp(1.1rem, 1.02rem + 0.36vw, 1.32rem);
	--tw-t-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.85rem);
	--tw-t-3:  clamp(1.75rem, 1.42rem + 1.6vw, 2.9rem);
	--tw-t-4:  clamp(2.3rem, 1.6rem + 3.3vw, 4.6rem);
	--tw-t-5:  clamp(2.8rem, 1.6rem + 5.4vw, 6.4rem);

	/* Space */
	--tw-1: 0.35rem;
	--tw-2: 0.65rem;
	--tw-3: 1rem;
	--tw-4: 1.6rem;
	--tw-5: 2.4rem;
	--tw-6: 3.6rem;
	--tw-7: 5.5rem;
	--tw-8: 8rem;

	/* Shape — restrained. Large radii read as consumer app, not property group. */
	--tw-r-sm: 3px;
	--tw-r:    5px;
	--tw-r-lg: 8px;

	--tw-shadow-sm: 0 1px 2px rgba(11, 33, 28, 0.05), 0 3px 10px rgba(11, 33, 28, 0.05);
	--tw-shadow:    0 2px 6px rgba(11, 33, 28, 0.06), 0 16px 40px rgba(11, 33, 28, 0.09);
	--tw-shadow-lg: 0 6px 18px rgba(11, 33, 28, 0.10), 0 34px 80px rgba(11, 33, 28, 0.16);

	--tw-wrap: 1640px;
	--tw-wrap-mid: 1240px;
	--tw-wrap-text: 74ch;
	--tw-gutter: clamp(1.1rem, 0.4rem + 3.2vw, 4.5rem);

	--tw-ease: cubic-bezier(0.22, 0.68, 0.3, 1);
	--tw-header-h: 84px;
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tw-header-h) + 20px); }

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

body {
	margin: 0;
	background: var(--tw-paper);
	color: var(--tw-body);
	font-family: var(--tw-sans);
	font-size: var(--tw-t-0);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5 {
	margin: 0 0 var(--tw-3);
	color: var(--tw-ink);
	font-family: var(--tw-display);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.014em;
	text-wrap: balance;
}
h1 { font-size: var(--tw-t-4); }
h2 { font-size: var(--tw-t-3); }
h3 { font-size: var(--tw-t-2); font-weight: 500; }
h4 { font-family: var(--tw-sans); font-size: var(--tw-t-1); font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 var(--tw-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--tw-mid); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tw-brass-d); }

ul, ol { margin: 0 0 var(--tw-3); padding-left: 1.2em; }

blockquote {
	margin: var(--tw-5) 0;
	padding-left: var(--tw-4);
	border-left: 2px solid var(--tw-brass);
	font-family: var(--tw-display);
	font-size: var(--tw-t-2);
	line-height: 1.3;
	color: var(--tw-ink);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--tw-2) var(--tw-3); border-bottom: 1px solid var(--tw-line); text-align: left; }

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

.tw-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: var(--tw-2) var(--tw-3);
	background: var(--tw-ink); color: #fff;
}
.tw-skip:focus { left: 0; color: #fff; }

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

/* ---------- 3. Layout ---------- */

.tw-wrap { width: min(100% - (var(--tw-gutter) * 2), var(--tw-wrap)); margin-inline: auto; }
.tw-wrap--mid { max-width: var(--tw-wrap-mid); }
.tw-wrap--text { max-width: var(--tw-wrap-text); }

.tw-section { padding-block: var(--tw-7); }
.tw-section--tight { padding-block: var(--tw-6); }
.tw-section--dark { background: var(--tw-ink); color: #cfdad4; }
.tw-section--dark h2, .tw-section--dark h3 { color: var(--tw-bone); }
.tw-section--sand { background: var(--tw-bone); }

.tw-head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: var(--tw-3) var(--tw-5); margin-bottom: var(--tw-5);
	padding-bottom: var(--tw-3); border-bottom: 1px solid var(--tw-line);
}
.tw-head h2 { margin: 0; }
.tw-head__aside { color: var(--tw-muted); font-size: var(--tw-t--1); margin: 0; max-width: 46ch; }
.tw-section--dark .tw-head { border-color: rgba(244, 240, 230, 0.18); }
.tw-section--dark .tw-head__aside { color: #a8b8b1; }

.tw-eyebrow {
	display: block; margin-bottom: var(--tw-2);
	font-size: var(--tw-t--2); font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--tw-brass-d);
}
.tw-section--dark .tw-eyebrow { color: var(--tw-brass); }

.tw-grid { display: grid; gap: var(--tw-4); }
.tw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.tw-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.tw-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }

/* ---------- 4. Primitives ---------- */

.tw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
	padding: 0.95em 1.9em;
	border: 1px solid transparent; border-radius: var(--tw-r-sm);
	font: inherit; font-size: var(--tw-t--1); font-weight: 700;
	letter-spacing: 0.03em; line-height: 1; text-decoration: none; cursor: pointer;
	transition: background-color .2s var(--tw-ease), color .2s var(--tw-ease), border-color .2s var(--tw-ease), transform .2s var(--tw-ease);
}
.tw-btn:active { transform: translateY(1px); }
.tw-btn--primary { background: var(--tw-ink); color: var(--tw-bone); }
.tw-btn--primary:hover { background: var(--tw-mid); color: #fff; }
.tw-btn--brass { background: var(--tw-brass); color: var(--tw-deep); }
.tw-btn--brass:hover { background: var(--tw-brass-d); color: #fff; }
.tw-btn--ghost { background: transparent; color: var(--tw-ink); border-color: var(--tw-line-2); }
.tw-btn--ghost:hover { border-color: var(--tw-ink); color: var(--tw-ink); background: rgba(18, 49, 42, 0.04); }
.tw-btn--on-dark { background: transparent; color: var(--tw-bone); border-color: rgba(244, 240, 230, 0.4); }
.tw-btn--on-dark:hover { background: var(--tw-bone); color: var(--tw-ink); border-color: var(--tw-bone); }
.tw-btn--block { width: 100%; }

.tw-link {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--tw-t--1); font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--tw-ink); text-decoration: none;
	padding-bottom: 3px; border-bottom: 1px solid var(--tw-brass);
}
.tw-link:hover { color: var(--tw-brass-d); }
.tw-link svg { transition: transform .2s var(--tw-ease); }
.tw-link:hover svg { transform: translateX(4px); }
.tw-section--dark .tw-link { color: var(--tw-bone); }

.tw-tag {
  display: inline-flex; align-items: center;
  padding: 0.42em 0.85em;
  font-size: var(--tw-t--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--tw-ink); color: var(--tw-bone);
  border-radius: 2px; line-height: 1;
}
.tw-tag--brass { background: var(--tw-brass); color: var(--tw-deep); }
.tw-tag--sale  { background: var(--tw-ink); color: var(--tw-bone); }
.tw-tag--rent  { background: var(--tw-brass); color: var(--tw-deep); }
.tw-tag--demo  { background: rgba(11, 33, 28, 0.62); color: #e9e2d2; backdrop-filter: blur(3px); }
.tw-tag--soft  { background: var(--tw-sand); color: var(--tw-ink); }

.tw-rule { height: 1px; background: var(--tw-line); border: 0; margin: var(--tw-5) 0; }

.tw-note {
	padding: var(--tw-3) var(--tw-4);
	border-left: 3px solid var(--tw-brass);
	background: var(--tw-bone);
	color: var(--tw-ink);
	font-size: var(--tw-t--1);
	margin-bottom: var(--tw-4);
}

.tw-alert { padding: var(--tw-3) var(--tw-4); border: 1px solid; border-radius: var(--tw-r-sm); margin-bottom: var(--tw-4); font-size: var(--tw-t--1); }
.tw-alert--ok  { background: #edf5f0; border-color: #b9d6c6; color: #175c3f; }
.tw-alert--bad { background: #fbefec; border-color: #e8c6bb; color: #9c3f24; }

/* Media frame used everywhere an image needs a consistent hover. */
.tw-media { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--tw-mid), var(--tw-deep)); }
.tw-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--tw-ease); }
a:hover > .tw-media img, .tw-card:hover .tw-media img, .tw-area:hover img, .tw-dev:hover .tw-media img { transform: scale(1.045); }

/* ---------- 5. Header ---------- */

.tw-header {
	position: sticky; top: 0; z-index: 90;
	background: rgba(251, 249, 244, 0.9);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--tw-line);
	transition: background-color .3s var(--tw-ease), border-color .3s var(--tw-ease);
}
.tw-header__inner { display: flex; align-items: center; gap: var(--tw-4); min-height: var(--tw-header-h); }

/* Over a full-bleed hero the header floats transparent until scroll. */
body.tw-has-hero .tw-header { position: fixed; inset: 0 0 auto; background: transparent; border-color: transparent; }
body.tw-has-hero .tw-header .tw-logo__word,
body.tw-has-hero .tw-header .tw-nav > ul > li > a,
body.tw-has-hero .tw-header__portal { color: var(--tw-bone); }
body.tw-has-hero .tw-header .tw-logo__mark path { stroke: var(--tw-bone); }
body.tw-has-hero .tw-header .tw-logo__mark .tw-logo__accent { stroke: var(--tw-brass); }
body.tw-has-hero .tw-burger { color: var(--tw-bone); border-color: rgba(244,240,230,.45); }

body.tw-has-hero .tw-header.is-stuck {
	background: rgba(251, 249, 244, 0.95);
	border-color: var(--tw-line);
}
body.tw-has-hero .tw-header.is-stuck .tw-logo__word,
body.tw-has-hero .tw-header.is-stuck .tw-nav > ul > li > a,
body.tw-has-hero .tw-header.is-stuck .tw-header__portal { color: var(--tw-ink); }
body.tw-has-hero .tw-header.is-stuck .tw-logo__mark path { stroke: var(--tw-ink); }
body.tw-has-hero .tw-header.is-stuck .tw-logo__mark .tw-logo__accent { stroke: var(--tw-brass); }
body.tw-has-hero .tw-header.is-stuck .tw-burger { color: var(--tw-ink); border-color: var(--tw-line-2); }

.tw-logo { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.tw-logo__mark { width: 34px; height: 40px; flex: none; }
.tw-logo__word { display: flex; flex-direction: column; line-height: 1; }
.tw-logo__name {
	font-family: var(--tw-sans); font-weight: 800; font-size: 1.12rem;
	letter-spacing: 0.14em; text-transform: uppercase; color: inherit;
}
.tw-logo__sub {
	margin-top: 4px; font-size: 0.58rem; font-weight: 600;
	letter-spacing: 0.3em; text-transform: uppercase; color: var(--tw-brass);
}
.tw-logo img { max-height: 46px; width: auto; }

.tw-nav { margin-inline: auto; }
.tw-nav ul { display: flex; align-items: center; gap: clamp(0.7rem, 1.3vw, 1.7rem); list-style: none; margin: 0; padding: 0; }
.tw-nav a {
	display: block; padding: 0.5rem 0;
	color: var(--tw-ink); font-size: var(--tw-t--1); font-weight: 600;
	letter-spacing: 0.01em; text-decoration: none;
	border-bottom: 1.5px solid transparent;
}
.tw-nav a:hover,
.tw-nav .current-menu-item > a,
.tw-nav .current_page_item > a { border-bottom-color: var(--tw-brass); }

.tw-nav .sub-menu {
	position: absolute; display: none; flex-direction: column; gap: 0;
	min-width: 220px; padding: var(--tw-2); background: var(--tw-paper);
	border: 1px solid var(--tw-line); box-shadow: var(--tw-shadow);
}
.tw-nav li { position: relative; }
.tw-nav li:hover > .sub-menu, .tw-nav li:focus-within > .sub-menu { display: flex; }
.tw-nav .sub-menu a { padding: 0.45rem 0.7rem; border: 0; color: var(--tw-ink); }
.tw-nav > ul > li > a { white-space: nowrap; }

/* Nine top-level items, a wordmark, the saved counter, the portal link and a
   CTA do not fit on a 1280 laptop at full size — tighten instead of wrapping
   the bar onto two rows. */
@media (min-width: 1181px) and (max-width: 1420px) {
	.tw-nav ul { gap: clamp(0.5rem, 0.85vw, 1.1rem); }
	.tw-nav > ul > li > a { font-size: 0.82rem; }
	.tw-header__inner { gap: var(--tw-3); }
	.tw-header__portal { display: none; }
	.tw-header__cta { padding-inline: 1.2em; }
}

.tw-header__actions { display: flex; align-items: center; gap: var(--tw-3); flex: none; }
.tw-header__portal {
	font-size: var(--tw-t--1); font-weight: 700; color: var(--tw-ink);
	text-decoration: none; letter-spacing: 0.02em; white-space: nowrap;
}
.tw-header__portal:hover { color: var(--tw-brass-d); }

.tw-saved {
	position: relative; display: inline-grid; place-items: center;
	width: 40px; height: 40px; border: 1px solid var(--tw-line-2);
	border-radius: 50%; color: inherit; text-decoration: none; flex: none;
}
body.tw-has-hero .tw-header:not(.is-stuck) .tw-saved { border-color: rgba(244,240,230,.45); color: var(--tw-bone); }
.tw-saved:hover { border-color: var(--tw-brass); color: var(--tw-brass-d); }
.tw-saved__count {
	position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
	padding: 0 5px; display: grid; place-items: center; border-radius: 999px;
	background: var(--tw-brass); color: var(--tw-deep);
	font-size: 0.66rem; font-weight: 800; line-height: 1;
}

.tw-burger {
	display: none; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: transparent; border: 1px solid var(--tw-line-2);
	border-radius: var(--tw-r-sm); color: var(--tw-ink); cursor: pointer;
}

.tw-nav__panel-extra { display: none; }

@media (max-width: 1180px) {
	.tw-burger { display: inline-flex; }
	/* The nav goes position:fixed below, so nothing is left in the flex row to
	   push the controls over. */
	.tw-header__actions { margin-left: auto; }
	.tw-header__portal { display: none; }
	.tw-nav {
		position: fixed; inset: var(--tw-header-h) 0 auto 0; margin: 0;
		max-height: calc(100dvh - var(--tw-header-h)); overflow-y: auto;
		background: var(--tw-ink);
		padding: var(--tw-4) var(--tw-gutter) var(--tw-6);
		transform: translateY(-10px); opacity: 0; visibility: hidden;
		transition: opacity .22s var(--tw-ease), transform .22s var(--tw-ease), visibility .22s;
	}
	.tw-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
	.tw-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.tw-nav li { border-bottom: 1px solid rgba(244, 240, 230, 0.14); }
	.tw-nav a { padding: 1rem 0; font-size: 1.25rem; font-family: var(--tw-display); font-weight: 500; color: var(--tw-bone); border: 0; }
	.tw-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; background: none; padding: 0 0 var(--tw-2) var(--tw-3); }
	.tw-nav .sub-menu a { color: #b9c8c1; font-size: 1rem; }
	.tw-nav__panel-extra { display: grid; gap: var(--tw-2); margin-top: var(--tw-5); }
}

@media (max-width: 720px) { .tw-header__cta { display: none; } }

/* Narrow phones: the wordmark plus the saved and menu controls no longer fit
   side by side at the full type size, so tighten both rather than clip. */
@media (max-width: 430px) {
	.tw-header__inner { gap: var(--tw-2); }
	.tw-logo { gap: 0.5rem; min-width: 0; }
	.tw-logo__mark { width: 28px; height: 33px; }
	.tw-logo__name { font-size: 0.95rem; letter-spacing: 0.1em; }
	.tw-logo__sub { font-size: 0.5rem; letter-spacing: 0.22em; }
	.tw-header__actions { gap: var(--tw-2); }
}

/* ---------- 6. Hero ---------- */

.tw-hero {
	position: relative;
	min-height: min(94vh, 900px);
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-top: calc(var(--tw-header-h) + var(--tw-5));
	padding-bottom: var(--tw-6);
	color: var(--tw-bone);
	overflow: hidden;
	background: var(--tw-deep);
}
.tw-hero__media { position: absolute; inset: 0; z-index: 0; }
.tw-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tw-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--tw-ease); }
.tw-hero__slide.is-active { opacity: 1; }
.tw-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	/* Tuned for photographs: dark enough at the top and bottom to hold the nav
	   and the search panel, but light across the middle so the picture reads. */
	background:
		linear-gradient(180deg, rgba(8, 24, 20, 0.62) 0%, rgba(8, 24, 20, 0.06) 38%, rgba(8, 24, 20, 0.28) 72%, rgba(8, 24, 20, 0.74) 100%),
		linear-gradient(90deg, rgba(8, 24, 20, 0.52) 0%, rgba(8, 24, 20, 0.12) 48%, rgba(8, 24, 20, 0) 70%);
}
/* Note: this element also carries .tw-wrap, which sets the gutter width.
   Do not set width here or the wrap gutter is cancelled and the copy
   runs flush to the viewport edge. */
.tw-hero__inner { position: relative; z-index: 2; }
/* Measure in ch on the heading itself: on the wrapper, 1ch resolves against
   the inherited 16px body size and squeezes the display type to a column. */
.tw-hero__copy { max-width: none; }
.tw-hero h1 {
	color: #fff;
	/* Display type wants a ceiling. Left uncapped it filled the whole hero and
	   the photograph behind it stopped doing any work. */
	font-size: clamp(2.4rem, 1.55rem + 3.4vw, 4.5rem);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.018em;
	margin-bottom: var(--tw-3);
	max-width: 15ch;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(6, 20, 16, .35);
}
.tw-hero h1 em { font-style: italic; color: var(--tw-brass); }
.tw-hero__sub { max-width: 52ch; color: #e2e9e5; font-size: var(--tw-t-1); line-height: 1.55; margin-bottom: var(--tw-5); text-shadow: 0 1px 16px rgba(6, 20, 16, .35); }
.tw-hero__meta {
	display: flex; flex-wrap: wrap; gap: var(--tw-2) var(--tw-5);
	margin-top: var(--tw-5); padding-top: var(--tw-3);
	border-top: 1px solid rgba(244, 240, 230, 0.22);
	font-size: var(--tw-t--1); color: #c3d0ca;
}
.tw-hero__meta strong { color: var(--tw-bone); font-weight: 700; }

.tw-hero__dots { position: absolute; right: var(--tw-gutter); bottom: var(--tw-6); z-index: 3; display: flex; gap: 8px; }
.tw-hero__dots button {
	width: 34px; height: 3px; padding: 0; border: 0; cursor: pointer;
	background: rgba(244, 240, 230, 0.32);
}
.tw-hero__dots button[aria-current="true"] { background: var(--tw-brass); }

@media (max-width: 900px) {
	.tw-hero { min-height: 88vh; }
	.tw-hero h1 { max-width: none; }
	.tw-hero__dots { bottom: var(--tw-3); }
}

/* ---------- 7. Search ---------- */

.tw-search {
	background: rgba(251, 249, 244, 0.97);
	backdrop-filter: blur(6px);
	border-radius: var(--tw-r);
	box-shadow: var(--tw-shadow-lg);
	overflow: hidden;
}
.tw-search--flat { box-shadow: var(--tw-shadow-sm); border: 1px solid var(--tw-line); background: var(--tw-white); }

.tw-search__tabs { display: flex; border-bottom: 1px solid var(--tw-line); }
.tw-search__tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tw-search__tabs label {
	flex: 1; text-align: center; padding: 1.05em 1em; cursor: pointer;
	font-size: var(--tw-t--1); font-weight: 700; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--tw-muted);
	border-bottom: 2px solid transparent; transition: color .18s var(--tw-ease), border-color .18s var(--tw-ease), background-color .18s var(--tw-ease);
}
.tw-search__tabs label:hover { color: var(--tw-ink); background: rgba(18,49,42,.03); }
.tw-search__tabs input:checked + label { color: var(--tw-ink); border-bottom-color: var(--tw-brass); }
.tw-search__tabs input:focus-visible + label { outline: 2px solid var(--tw-brass); outline-offset: -3px; }

.tw-search__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 0;
	align-items: stretch;
}
.tw-search__cell { padding: var(--tw-3) var(--tw-4); border-right: 1px solid var(--tw-line); min-width: 0; }
.tw-search__cell:nth-child(4) { border-right: 0; }
.tw-search__cell label {
	display: block; margin-bottom: 4px;
	font-size: var(--tw-t--2); font-weight: 700; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--tw-muted);
}
.tw-search__cell select, .tw-search__cell input {
	width: 100%; border: 0; background: transparent; padding: 0;
	font: inherit; font-size: var(--tw-t-0); font-weight: 600; color: var(--tw-ink);
	appearance: none;
}
.tw-search__cell select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d7b74' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center; padding-right: 1.4rem;
}
.tw-search__cell select:focus, .tw-search__cell input:focus { outline: none; }
.tw-search__cell:focus-within { background: rgba(194, 161, 90, 0.07); }
.tw-search__submit { display: grid; }
.tw-search__submit button {
	height: 100%; padding-inline: clamp(1.4rem, 3vw, 2.8rem);
	border: 0; background: var(--tw-ink); color: var(--tw-bone);
	font: inherit; font-size: var(--tw-t--1); font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
	display: inline-flex; align-items: center; gap: 0.6em;
	transition: background-color .2s var(--tw-ease);
}
.tw-search__submit button:hover { background: var(--tw-brass); color: var(--tw-deep); }

@media (max-width: 1080px) {
	.tw-search__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tw-search__cell { border-bottom: 1px solid var(--tw-line); }
	.tw-search__cell:nth-child(odd) { border-right: 1px solid var(--tw-line); }
	.tw-search__cell:nth-child(even) { border-right: 0; }
	.tw-search__submit { grid-column: 1 / -1; }
	.tw-search__submit button { width: 100%; justify-content: center; padding-block: 1.15em; }
}
@media (max-width: 560px) {
	.tw-search__row { grid-template-columns: 1fr; }
	.tw-search__cell, .tw-search__cell:nth-child(odd) { border-right: 0; }
	.tw-search__tabs label { padding: 0.95em 0.4em; font-size: var(--tw-t--2); }
}

/* A phone-only affordance must not leak into the wide layout.
 *
 * The "More filters" fold is built and unbuilt by main.js at the 820px line.
 * This is the safety net: the search row is a grid, and a stray wrapper in it
 * counts as a column, which is what turned the four-field bar into an empty
 * grey panel on laptops. display:contents hands the fields straight back to
 * the row, so even a stale cached script cannot break the desktop bar again. */
@media (min-width: 821px) {
	.tw-search__more { display: contents; }
	.tw-search__toggle { display: none; }
}

/* Very wide screens: the bar is 1640px of chrome around four short answers.
   Give the fields a ceiling so they stay readable rather than stretching. */
@media (min-width: 1800px) {
	.tw-search__cell { padding-inline: var(--tw-5); }
	.tw-search__cell select, .tw-search__cell input { font-size: var(--tw-t-1); }
}

/* ---------- 8. Property card ---------- */

.tw-card { position: relative; display: flex; flex-direction: column; background: transparent; }
.tw-card .tw-media { aspect-ratio: 4 / 3; border-radius: var(--tw-r); }
.tw-card__tags { position: absolute; top: var(--tw-3); left: var(--tw-3); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.tw-card__save {
	position: absolute; top: var(--tw-3); right: var(--tw-3); z-index: 2;
	width: 38px; height: 38px; display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(251, 249, 244, 0.92); color: var(--tw-ink);
	transition: background-color .18s var(--tw-ease), color .18s var(--tw-ease), transform .18s var(--tw-ease);
}
.tw-card__save:hover { transform: scale(1.07); }
.tw-card__save[aria-pressed="true"] { background: var(--tw-brass); color: var(--tw-deep); }
.tw-card__save[aria-pressed="true"] svg { fill: currentColor; }

.tw-card__body { padding-top: var(--tw-3); display: flex; flex-direction: column; gap: 0.35rem; }
.tw-card__where {
	font-size: var(--tw-t--2); font-weight: 700; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--tw-brass-d);
}
.tw-card__title { margin: 0; font-size: var(--tw-t-1); font-family: var(--tw-display); font-weight: 500; line-height: 1.22; }
.tw-card__title a { color: var(--tw-ink); text-decoration: none; }
.tw-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tw-card:hover .tw-card__title a { color: var(--tw-brass-d); }
.tw-card__price { font-size: var(--tw-t-1); font-weight: 800; color: var(--tw-ink); letter-spacing: -0.01em; }
.tw-card__specs {
	display: flex; flex-wrap: wrap; gap: var(--tw-3); margin: var(--tw-1) 0 0; padding: var(--tw-2) 0 0;
	border-top: 1px solid var(--tw-line); list-style: none;
	font-size: var(--tw-t--1); color: var(--tw-muted);
}
.tw-card__specs li { display: flex; align-items: center; gap: 0.4em; }

/* Editorial feature card — used for the first item in a run. */
.tw-card--feature { grid-column: span 2; }
.tw-card--feature .tw-media { aspect-ratio: 16 / 10; }
.tw-card--feature .tw-card__title { font-size: var(--tw-t-2); }
@media (max-width: 900px) { .tw-card--feature { grid-column: auto; } }

/* ---------- 9. Areas ---------- */

.tw-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--tw-3); }
.tw-area {
	position: relative; display: block; aspect-ratio: 3 / 4;
	overflow: hidden; border-radius: var(--tw-r); text-decoration: none;
	background: var(--tw-deep);
}
.tw-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--tw-ease); }
.tw-area__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,20,0) 38%, rgba(8,24,20,.86) 100%); }
.tw-area__text { position: absolute; left: var(--tw-3); right: var(--tw-3); bottom: var(--tw-3); color: #fff; }
.tw-area__name { display: block; margin: 0; font-family: var(--tw-display); font-size: var(--tw-t-1); font-weight: 500; line-height: 1.15; color: inherit; }
.tw-area__count { display: block; font-size: var(--tw-t--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tw-brass); margin-top: 4px; }

/* ---------- 10. Developments ---------- */

.tw-dev { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; gap: 0; background: var(--tw-bone); }
.tw-dev:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.tw-dev:nth-child(even) .tw-dev__media { order: 2; }
.tw-dev__media { position: relative; overflow: hidden; min-height: 420px; }
.tw-dev__media img { width: 100%; height: 100%; object-fit: cover; }
.tw-dev__body { padding: clamp(1.6rem, 3vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; }
.tw-dev__body h3 { font-size: var(--tw-t-3); margin-bottom: var(--tw-2); }
.tw-dev__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--tw-3); margin: var(--tw-4) 0; padding: var(--tw-3) 0; border-block: 1px solid var(--tw-line); list-style: none; }
.tw-dev__facts dt, .tw-dev__k { font-size: var(--tw-t--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tw-muted); display: block; }
.tw-dev__v { font-weight: 700; color: var(--tw-ink); }
@media (max-width: 900px) {
	.tw-dev, .tw-dev:nth-child(even) { grid-template-columns: 1fr; }
	.tw-dev:nth-child(even) .tw-dev__media { order: 0; }
	.tw-dev__media { min-height: 0; width: 100%; aspect-ratio: 16/10; }
}

/* ---------- 11. Stats / trust ---------- */

.tw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--tw-5); }
.tw-stat__n {
	display: block; font-family: var(--tw-display); font-size: var(--tw-t-4);
	line-height: 1; color: var(--tw-bone); letter-spacing: -0.02em;
}
.tw-stat__l { display: block; margin-top: var(--tw-2); font-size: var(--tw-t--1); color: #a8b8b1; }

.tw-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--tw-5); }
.tw-pillar__i { width: 40px; height: 40px; color: var(--tw-brass); margin-bottom: var(--tw-3); }
.tw-pillar h3 { font-size: var(--tw-t-1); font-family: var(--tw-sans); font-weight: 700; margin-bottom: var(--tw-2); }
.tw-pillar p { font-size: var(--tw-t--1); margin: 0; }

/* ---------- 12. Agents ---------- */

.tw-agent { position: relative; }
.tw-agent__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--tw-r); background: linear-gradient(160deg, var(--tw-mid), var(--tw-deep)); }
.tw-agent__media img { width: 100%; height: 100%; object-fit: cover; }
.tw-avatar {
	display: grid; place-items: center; width: 100%; height: 100%;
	background: linear-gradient(155deg, var(--tw-mid), var(--tw-deep));
	color: var(--tw-brass); font-family: var(--tw-display);
	font-size: clamp(2.2rem, 1rem + 5vw, 3.6rem); letter-spacing: 0.04em;
}
.tw-avatar--round { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto var(--tw-3); font-size: 1.9rem; }
.tw-agent__body { padding-top: var(--tw-3); }
.tw-agent__name { margin: 0 0 2px; font-family: var(--tw-display); font-size: var(--tw-t-1); }
.tw-agent__name a { color: var(--tw-ink); text-decoration: none; }
.tw-agent__name a::after { content: ""; position: absolute; inset: 0; }
.tw-agent__role { margin: 0; font-size: var(--tw-t--1); color: var(--tw-brass-d); font-weight: 700; }
.tw-agent__meta { margin: var(--tw-2) 0 0; font-size: var(--tw-t--1); color: var(--tw-muted); }
.tw-agent__meta span { display: block; }

/* ---------- 13. Property detail ---------- */

.tw-prop-hero { position: relative; background: var(--tw-deep); }
.tw-gallery { display: grid; grid-template-columns: 2.1fr 1fr; gap: 4px; }
.tw-gallery__main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.tw-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.tw-gallery__side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 4px; }
.tw-gallery__thumb { position: relative; overflow: hidden; padding: 0; border: 0; cursor: pointer; background: none; }
.tw-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tw-gallery__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(8,24,20,.18); opacity: 0; transition: opacity .2s var(--tw-ease); }
.tw-gallery__thumb:hover::after { opacity: 1; }
@media (max-width: 860px) {
	.tw-gallery { grid-template-columns: 1fr; }
	.tw-gallery__side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
	.tw-gallery__thumb { aspect-ratio: 3/2; }
}

.tw-prop-bar {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: var(--tw-3) var(--tw-5); padding-block: var(--tw-5) var(--tw-4);
	border-bottom: 1px solid var(--tw-line);
}
.tw-prop-bar h1 { font-size: var(--tw-t-3); margin: var(--tw-2) 0 0.2rem; }
.tw-prop-bar__price { font-size: var(--tw-t-3); font-weight: 800; font-family: var(--tw-sans); color: var(--tw-ink); letter-spacing: -0.02em; line-height: 1; }
.tw-prop-bar__ref { font-size: var(--tw-t--1); color: var(--tw-muted); margin-top: var(--tw-2); }

.tw-prop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--tw-6); align-items: start; padding-block: var(--tw-5); }
@media (max-width: 1100px) { .tw-prop-layout { grid-template-columns: 1fr; } }

.tw-block { padding-bottom: var(--tw-5); margin-bottom: var(--tw-5); border-bottom: 1px solid var(--tw-line); }
.tw-block:last-child { border-bottom: 0; margin-bottom: 0; }
.tw-block > h2 { font-size: var(--tw-t-2); margin-bottom: var(--tw-4); }

.tw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--tw-4); list-style: none; margin: 0; padding: 0; }
.tw-facts li { display: flex; flex-direction: column; gap: 3px; }
.tw-facts__k { font-size: var(--tw-t--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tw-muted); }
.tw-facts__v { font-size: var(--tw-t-1); font-weight: 700; color: var(--tw-ink); }

.tw-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--tw-2) var(--tw-4); list-style: none; margin: 0; padding: 0; font-size: var(--tw-t--1); }
.tw-features li { display: flex; align-items: center; gap: 0.55em; padding-block: 4px; }
.tw-features svg { color: var(--tw-brass-d); flex: none; }

.tw-aside { position: sticky; top: calc(var(--tw-header-h) + 20px); }
.tw-panel { border: 1px solid var(--tw-line); background: var(--tw-white); padding: var(--tw-4); margin-bottom: var(--tw-4); }
.tw-panel--dark { background: var(--tw-ink); border-color: var(--tw-ink); color: #cfdad4; }
.tw-panel--dark h2, .tw-panel--dark .tw-agent__name { color: var(--tw-bone); }
.tw-panel h2 { font-size: var(--tw-t-1); font-family: var(--tw-sans); font-weight: 700; margin-bottom: var(--tw-3); }
.tw-panel__actions { display: grid; gap: var(--tw-2); margin-top: var(--tw-3); }

.tw-map { height: 420px; position: relative; overflow: hidden; background: #dde5e0; border: 1px solid var(--tw-line); }
.tw-map__canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.tw-map__canvas:active { cursor: grabbing; }
.tw-map__tiles { position: absolute; inset: 0; }
.tw-map__tiles img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.tw-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--tw-ink); filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); pointer-events: none; }
.tw-map__zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 4px; z-index: 3; }
.tw-map__zoom button { width: 34px; height: 34px; border: 1px solid var(--tw-line-2); background: var(--tw-paper); color: var(--tw-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.tw-map__attr { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 3px 7px; background: rgba(251,249,244,.9); font-size: 11px; }

/* ---------- 14. Editorial / insights ---------- */

.tw-lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--tw-5); align-items: center; }
.tw-lead__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--tw-r); }
.tw-lead h2 { font-size: var(--tw-t-3); }
@media (max-width: 900px) { .tw-lead { grid-template-columns: 1fr; } }

.tw-story { position: relative; display: grid; gap: var(--tw-3); }
.tw-story .tw-media { aspect-ratio: 3 / 2; border-radius: var(--tw-r); }
.tw-story__cat { font-size: var(--tw-t--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tw-brass-d); }
.tw-story__title { margin: 4px 0 0; font-family: var(--tw-display); font-size: var(--tw-t-1); line-height: 1.24; }
.tw-story__title a { color: var(--tw-ink); text-decoration: none; }
.tw-story__title a::after { content: ""; position: absolute; inset: 0; }
.tw-story:hover .tw-story__title a { color: var(--tw-brass-d); }
.tw-story__date { font-size: var(--tw-t--1); color: var(--tw-muted); }

.tw-list-story { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: var(--tw-3); padding-block: var(--tw-3); border-bottom: 1px solid var(--tw-line); }
.tw-list-story .tw-media { aspect-ratio: 1; border-radius: var(--tw-r-sm); }

.tw-prose { max-width: var(--tw-wrap-text); font-size: var(--tw-t-1); line-height: 1.72; }
.tw-prose > * + * { margin-top: var(--tw-4); }
.tw-prose h2 { margin-top: var(--tw-6); font-size: var(--tw-t-2); }
.tw-prose h3 { margin-top: var(--tw-5); font-size: var(--tw-t-1); font-family: var(--tw-sans); font-weight: 700; }
.tw-prose img { border-radius: var(--tw-r); }
.tw-prose ul, .tw-prose ol { padding-left: 1.3em; }
.tw-prose li + li { margin-top: 0.4em; }

/* ---------- 15. Filters & results ---------- */

.tw-filters { border: 1px solid var(--tw-line); background: var(--tw-white); margin-bottom: var(--tw-4); }
.tw-filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.tw-filters__cell { padding: var(--tw-3) var(--tw-4); border-right: 1px solid var(--tw-line); border-bottom: 1px solid var(--tw-line); }
.tw-filters__cell label { display: block; margin-bottom: 4px; font-size: var(--tw-t--2); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tw-muted); }
.tw-filters__cell input, .tw-filters__cell select {
	width: 100%; border: 0; background: transparent; padding: 0; font: inherit;
	font-size: var(--tw-t-0); font-weight: 600; color: var(--tw-ink); appearance: none;
}
.tw-filters__cell select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d7b74' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center; padding-right: 1.4rem;
}
.tw-filters__cell:focus-within { background: rgba(194, 161, 90, 0.07); }
.tw-filters__actions { display: flex; flex-wrap: wrap; gap: var(--tw-3); align-items: center; padding: var(--tw-3) var(--tw-4); }

.tw-results { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tw-3); margin-bottom: var(--tw-4); }
.tw-results__n { margin: 0; font-size: var(--tw-t--1); color: var(--tw-muted); }
.tw-results__n strong { color: var(--tw-ink); font-size: var(--tw-t-1); font-weight: 800; }
.tw-sort { display: flex; align-items: center; gap: 0.6rem; }
.tw-sort label { font-size: var(--tw-t--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tw-muted); }
.tw-sort select { border: 1px solid var(--tw-line); background: var(--tw-white); padding: 0.55em 2rem 0.55em 0.8em; font: inherit; font-size: var(--tw-t--1); font-weight: 600; color: var(--tw-ink); appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d7b74' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.6rem center; }

.tw-empty { padding: var(--tw-7) var(--tw-4); text-align: center; border: 1px solid var(--tw-line); background: var(--tw-white); }
.tw-empty h2 { font-size: var(--tw-t-2); }

.tw-skeleton { background: linear-gradient(100deg, var(--tw-sand) 20%, #efe9dd 40%, var(--tw-sand) 60%); background-size: 220% 100%; animation: tw-shimmer 1.4s infinite linear; }
@keyframes tw-shimmer { to { background-position: -220% 0; } }

.tw-pagination { margin-top: var(--tw-6); }
.tw-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tw-pagination .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.7em;
	border: 1px solid var(--tw-line); background: var(--tw-white); color: var(--tw-ink);
	text-decoration: none; font-size: var(--tw-t--1); font-weight: 700;
}
.tw-pagination .page-numbers:hover { border-color: var(--tw-ink); }
.tw-pagination .page-numbers.current { background: var(--tw-ink); border-color: var(--tw-ink); color: var(--tw-bone); }

/* ---------- 16. Page header ---------- */

.tw-page-head { position: relative; background: var(--tw-ink); color: #cfdad4; padding-block: calc(var(--tw-header-h) + var(--tw-5)) var(--tw-6); overflow: hidden; }
.tw-page-head::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(194,161,90,.16) 1.4px, transparent 1.4px);
	background-size: 26px 26px; opacity: .5; pointer-events: none;
	-webkit-mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
	mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
}
.tw-page-head > * { position: relative; z-index: 1; }
.tw-page-head h1 { color: var(--tw-bone); max-width: 18ch; }
.tw-page-head p { color: #a8b8b1; max-width: 58ch; font-size: var(--tw-t-1); }
body:not(.tw-has-hero) .tw-page-head { padding-top: var(--tw-6); }

.tw-crumbs { font-size: var(--tw-t--2); letter-spacing: 0.11em; text-transform: uppercase; color: #93a49d; margin-bottom: var(--tw-3); }
.tw-crumbs a { color: inherit; text-decoration: none; }
.tw-crumbs a:hover { color: var(--tw-brass); }

/* ---------- 17. Forms ---------- */

.tw-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--tw-3); }
.tw-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tw-field--wide { grid-column: 1 / -1; }
.tw-field label { font-size: var(--tw-t--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tw-muted); }
.tw-field input, .tw-field select, .tw-field textarea {
	width: 100%; padding: 0.85em 1em;
	border: 1px solid var(--tw-line-2); border-radius: var(--tw-r-sm);
	background: var(--tw-white); color: var(--tw-ink); font: inherit; font-size: var(--tw-t-0);
	transition: border-color .18s var(--tw-ease), box-shadow .18s var(--tw-ease);
}
.tw-field textarea { min-height: 8rem; resize: vertical; }
.tw-field input:focus, .tw-field select:focus, .tw-field textarea:focus {
	border-color: var(--tw-brass); box-shadow: 0 0 0 3px rgba(194,161,90,.18); outline: none;
}
.tw-form :is(input, textarea, select):user-invalid { border-color: #b4553a; }
.tw-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tw-form__consent { margin-top: var(--tw-3); font-size: var(--tw-t--1); }
.tw-form__consent label { display: flex; gap: 0.6em; align-items: flex-start; }
.tw-form__actions { margin-top: var(--tw-4); }
.tw-form h3 { font-family: var(--tw-sans); font-size: var(--tw-t-1); font-weight: 700; margin-bottom: var(--tw-3); }
.tw-req { color: var(--tw-brass-d); }
.tw-panel--dark .tw-field label { color: #a8b8b1; }
.tw-panel--dark .tw-form__consent { color: #cfdad4; }

/* ---------- 18. Footer ---------- */

.tw-footer { background: var(--tw-deep); color: #a8b8b1; padding-block: var(--tw-7) var(--tw-4); margin-top: var(--tw-8); }
.tw-footer a { color: #d3ddd8; text-decoration: none; }
.tw-footer a:hover { color: var(--tw-brass); }
.tw-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: var(--tw-5); }
@media (max-width: 980px) { .tw-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tw-footer__grid { grid-template-columns: 1fr; } }
.tw-footer .tw-logo__word { color: var(--tw-bone); }
.tw-footer .tw-logo__mark path { stroke: var(--tw-bone); }
.tw-footer .tw-logo__mark .tw-logo__accent { stroke: var(--tw-brass); }
.tw-footer__blurb { max-width: 38ch; font-size: var(--tw-t--1); margin-top: var(--tw-3); }
.tw-footer__title { color: var(--tw-bone); font-family: var(--tw-sans); font-size: var(--tw-t--2); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--tw-3); }
.tw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--tw-t--1); }
.tw-footer__contact { display: grid; gap: 0.5rem; margin-top: var(--tw-4); font-size: var(--tw-t--1); }
.tw-social { display: flex; gap: var(--tw-2); margin-top: var(--tw-4); }
.tw-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(244,240,230,.24); border-radius: 50%; }
.tw-social a:hover { background: var(--tw-brass); border-color: var(--tw-brass); color: var(--tw-deep); }
.tw-footer__bar {
	display: flex; flex-wrap: wrap; gap: var(--tw-2) var(--tw-4); align-items: center; justify-content: space-between;
	margin-top: var(--tw-7); padding-top: var(--tw-4);
	border-top: 1px solid rgba(244,240,230,.14); font-size: var(--tw-t--1); color: #86968f;
}
.tw-footer__group { color: var(--tw-brass); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--tw-t--2); font-weight: 700; }

/* ---------- 19. Reveal on scroll ---------- */

[data-tw-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--tw-ease), transform .7s var(--tw-ease); }
[data-tw-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-tw-reveal] { opacity: 1; transform: none; } }

/* ---------- 20. Utilities ---------- */

.tw-center { text-align: center; }
.tw-mb-0 { margin-bottom: 0; }
.tw-mt-3 { margin-top: var(--tw-3); }
.tw-mt-4 { margin-top: var(--tw-4); }
.tw-mt-5 { margin-top: var(--tw-5); }
.tw-mt-6 { margin-top: var(--tw-6); }
.tw-muted { color: var(--tw-muted); }
.tw-flex { display: flex; flex-wrap: wrap; gap: var(--tw-3); align-items: center; }
.tw-stack > * + * { margin-top: var(--tw-3); }

@media print {
	.tw-header, .tw-footer, .tw-card__save, .tw-map__zoom, .tw-search { display: none !important; }
	body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Photograph attribution
   -------------------------------------------------------------------------- */

.tw-photo-credit {
	margin: .8rem 0 0;
	font-size: .78rem;
	letter-spacing: .01em;
	color: #7b8681;
}

.tw-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tw-photo-credit a:hover { color: var(--tw-ink); }

.tw-credits {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: .9rem;
	max-width: 62ch;
}

.tw-credits li {
	padding-bottom: .9rem;
	border-bottom: 1px solid rgba(18, 49, 42, .1);
	font-size: .9rem;
	line-height: 1.5;
}

.tw-credits strong { font-weight: 600; color: var(--tw-ink); }
.tw-credits a { color: #1e4a3e; }

/* --------------------------------------------------------------------------
   Missing-photograph plate
   -------------------------------------------------------------------------- */

.tw-media__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(60, 107, 91, .22), transparent 70%),
		linear-gradient(160deg, #17392f 0%, #0e2620 100%);
	color: rgba(244, 240, 230, .62);
	text-align: center;
	padding: 1.2rem;
}

.tw-media__empty-mark { color: rgba(244, 240, 230, .5); line-height: 0; }
.tw-media__empty-mark svg { display: block; }

.tw-media__empty-text {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
}

/* The area card is a link with the scrim stacked over the media. */
.tw-area .tw-media__empty { z-index: 0; }

/* --------------------------------------------------------------------------
   Listings grid — the way a property agency shows stock
   --------------------------------------------------------------------------
   Fixed column counts rather than auto-fill, so a row is never left with one
   orphaned card, and every card is the same size: on a portal the listings are
   peers, and one of them being twice the size reads as an advert.
   -------------------------------------------------------------------------- */

.tw-grid--listings {
	display: grid;
	gap: var(--tw-4) var(--tw-3);
	grid-template-columns: 1fr;
}

@media (min-width: 620px)  { .tw-grid--listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tw-grid--listings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .tw-grid--listings { grid-template-columns: repeat(4, 1fr); } }

/* Cards in the listings grid sit on a surface, which is what makes a portal
   read as a portal rather than as an article. */
.tw-grid--listings .tw-card {
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-r);
	overflow: hidden;
	transition: box-shadow .22s var(--tw-ease), transform .22s var(--tw-ease), border-color .22s var(--tw-ease);
}

.tw-grid--listings .tw-card:hover {
	transform: translateY(-3px);
	border-color: rgba(194, 161, 90, .55);
	box-shadow: 0 14px 34px -18px rgba(11, 33, 28, .45);
}

.tw-grid--listings .tw-card .tw-media { border-radius: 0; aspect-ratio: 3 / 2; }
.tw-grid--listings .tw-card__body { padding: var(--tw-3); gap: .3rem; }

/* Price first and loud — it is what a buyer scans for. */
.tw-grid--listings .tw-card__price { order: -1; font-size: var(--tw-t-2); line-height: 1.1; }
.tw-grid--listings .tw-card__where { order: -2; }
.tw-grid--listings .tw-card__title { font-size: var(--tw-t-0); font-family: var(--tw-sans); font-weight: 600; }
.tw-grid--listings .tw-card__specs { margin-top: auto; }

/* The feature variant is still available elsewhere; it just no longer runs
   inside the listings grid. */
.tw-grid--listings .tw-card--feature { grid-column: auto; }
.tw-grid--listings .tw-card--feature .tw-media { aspect-ratio: 3 / 2; }

/* Neighbourhood tiles: four across reads as a considered set, six as a filmstrip. */
.tw-areas { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .tw-areas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .tw-areas { grid-template-columns: repeat(6, 1fr); } }


/* --------------------------------------------------------------------------
   Display type, tuned for Playfair
   -------------------------------------------------------------------------- */

h1, h2, .tw-card--feature .tw-card__title, .tw-area__name {
	letter-spacing: -0.016em;
	line-height: 1.08;
}

h2 { font-weight: 500; }

.tw-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
}

.tw-hero .tw-eyebrow { color: var(--tw-brass); margin-bottom: var(--tw-2); display: block; }

/* --------------------------------------------------------------------------
   Preview strip
   --------------------------------------------------------------------------
   Shown only while demonstration listings are published, and removed by
   deleting them. One line, at the top, instead of a badge on every card.
   -------------------------------------------------------------------------- */

.tw-preview {
	background: var(--tw-deep, #0b211c);
	color: rgba(244, 240, 230, .82);
	font-size: .78rem;
	line-height: 1.5;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(194, 161, 90, .35);
	position: relative;
	z-index: 95;
}

.tw-preview strong { color: var(--tw-brass, #c2a15a); font-weight: 700; }

/* --------------------------------------------------------------------------
   Team section
   --------------------------------------------------------------------------
   Three across, and a monogram plate rather than a face.

   A stock or generated portrait presented as a named member of staff is a
   person who does not work here, which is the one thing a property firm
   cannot afford to be caught doing. So the fallback is designed rather than
   apologetic: brand gradient, the arch mark, initials, and a line that says
   plainly that the photograph is still to come. Uploading a real headshot to
   the agent replaces it.
   -------------------------------------------------------------------------- */

.tw-grid--team {
	display: grid;
	gap: var(--tw-4);
	grid-template-columns: 1fr;
}

@media (min-width: 560px)  { .tw-grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .tw-grid--team { grid-template-columns: repeat(3, 1fr); } }

.tw-grid--team .tw-agent {
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-r);
	overflow: hidden;
	transition: box-shadow .22s var(--tw-ease), transform .22s var(--tw-ease), border-color .22s var(--tw-ease);
}

.tw-grid--team .tw-agent:hover {
	transform: translateY(-3px);
	border-color: rgba(194, 161, 90, .55);
	box-shadow: 0 14px 34px -18px rgba(11, 33, 28, .45);
}

.tw-grid--team .tw-agent__media { border-radius: 0; aspect-ratio: 5 / 4; }
.tw-grid--team .tw-agent__body { padding: var(--tw-3); }

.tw-avatar {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: .55rem;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(130% 100% at 50% 0%, rgba(60, 107, 91, .38), transparent 68%),
		linear-gradient(155deg, #1c4438 0%, #0b211c 100%);
	color: var(--tw-brass);
	font-family: var(--tw-display);
	font-size: clamp(1.9rem, 1rem + 3.4vw, 2.9rem);
	letter-spacing: 0.08em;
	line-height: 1;
}

/* A hairline ring gives the plate a deliberate edge instead of a flat fill. */
.tw-avatar::before {
	content: "";
	position: absolute;
	inset: 14%;
	border: 1px solid rgba(194, 161, 90, .3);
	border-radius: 999px;
}

.tw-avatar--round { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto var(--tw-3); font-size: 1.9rem; }
.tw-avatar--round::before { inset: 8%; }

.tw-agent__pending {
	display: block;
	font-family: var(--tw-sans);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(244, 240, 230, .5);
}

/* --------------------------------------------------------------------------
   Talk-to-us band
   --------------------------------------------------------------------------
   Stands in for the team section until real consultants are published. It is
   the honest version of that space: the same prominence, but every line on it
   reaches an actual person.
   -------------------------------------------------------------------------- */

.tw-talk {
	display: grid;
	gap: var(--tw-5);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 940px) { .tw-talk { grid-template-columns: 1.15fr 1fr; gap: var(--tw-6); } }

.tw-talk h2 { max-width: 20ch; }
.tw-talk p { color: var(--tw-muted); max-width: 58ch; }

.tw-talk__lines { display: grid; gap: var(--tw-2); }

.tw-talk__line {
	display: flex;
	align-items: center;
	gap: var(--tw-3);
	padding: var(--tw-3);
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-r);
	color: var(--tw-ink);
	text-decoration: none;
	transition: border-color .18s var(--tw-ease), transform .18s var(--tw-ease);
}

.tw-talk__line:hover { border-color: var(--tw-brass); transform: translateX(3px); }
.tw-talk__line svg { color: var(--tw-brass-d); flex: none; }
.tw-talk__line small { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tw-muted); font-weight: 700; }
.tw-talk__line strong { display: block; font-size: var(--tw-t-1); font-weight: 700; letter-spacing: -0.01em; }
.tw-talk__lines .tw-btn { justify-content: center; margin-top: var(--tw-2); }

/* --------------------------------------------------------------------------
   Hero accent
   --------------------------------------------------------------------------
   One phrase of the headline carries the brass, in italic, with a soft
   underline drawn behind it. It gives the type somewhere to breathe without
   turning the hero into a colour chart.
   -------------------------------------------------------------------------- */

.tw-hero h1 em {
	font-style: italic;
	font-weight: 400;
	color: #e9c987;
	background-image: linear-gradient(180deg, transparent 62%, rgba(194, 161, 90, .38) 62%, rgba(194, 161, 90, .38) 84%, transparent 84%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0 .06em;
}

/* The eyebrow gets a small brass rule so it reads as a label, not stray text. */
.tw-hero .tw-eyebrow::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin-top: .6rem;
	background: linear-gradient(90deg, var(--tw-brass), rgba(194, 161, 90, 0));
}

/* Section headings pick up the same treatment when a phrase is emphasised. */
.tw-section h2 em { font-style: italic; color: var(--tw-brass-d); }

/* --------------------------------------------------------------------------
   Utility bar
   --------------------------------------------------------------------------
   A dark strip carrying the phone number, WhatsApp, email and the portal link.
   It is what separates an agency site from a brochure: the way to reach a
   person is on every page, above everything else, and never scrolls out of
   reach on mobile because it is the first thing in the document.
   -------------------------------------------------------------------------- */

.tw-topbar {
	position: relative;
	z-index: 96;
	background: linear-gradient(90deg, #0b211c 0%, #123128 52%, #0b211c 100%);
	color: rgba(244, 240, 230, .78);
	font-size: .74rem;
	border-bottom: 1px solid rgba(194, 161, 90, .28);
}

.tw-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tw-3);
	min-height: 40px;
	flex-wrap: wrap;
}

.tw-topbar__note {
	margin: 0;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(244, 240, 230, .55);
}

.tw-topbar__links { display: flex; align-items: center; gap: var(--tw-1); flex-wrap: wrap; }

.tw-topbar__links a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .75rem;
	color: rgba(244, 240, 230, .86);
	text-decoration: none;
	border-radius: 999px;
	transition: color .18s var(--tw-ease), background-color .18s var(--tw-ease);
}

.tw-topbar__links a:hover { color: #f4f0e6; background: rgba(194, 161, 90, .16); }
.tw-topbar__links svg { color: var(--tw-brass); }

/* The portal link is the one thing on the bar that is not for the public. */
.tw-topbar__portal {
	border: 1px solid rgba(194, 161, 90, .45);
	color: var(--tw-brass) !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .68rem;
}

.tw-topbar__portal:hover { background: var(--tw-brass) !important; color: #0b211c !important; }

@media (max-width: 720px) {
	.tw-topbar__note { display: none; }
	.tw-topbar__inner { justify-content: center; }
	.tw-topbar__links a span { display: none; }
	.tw-topbar__portal span, .tw-topbar__portal { display: inline !important; }
}

/* The header sits under the bar rather than at the very top of the page. */
body.tw-has-hero .tw-header { position: sticky; }

/* --------------------------------------------------------------------------
   Navigation polish
   -------------------------------------------------------------------------- */

.tw-nav > ul > li > a {
	position: relative;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-bottom: 0;
	padding: .55rem 0;
}

/* Underline grows from the centre — cheap, and it makes the bar feel built
   rather than assembled. */
.tw-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: .1rem;
	height: 1.5px;
	background: linear-gradient(90deg, rgba(194, 161, 90, .2), var(--tw-brass), rgba(194, 161, 90, .2));
	transition: left .26s var(--tw-ease), right .26s var(--tw-ease);
}

.tw-nav > ul > li > a:hover::after,
.tw-nav > ul > li.current-menu-item > a::after,
.tw-nav > ul > li.current_page_item > a::after,
.tw-nav > ul > li.current-menu-ancestor > a::after { left: 0; right: 0; }

.tw-nav .sub-menu {
	border-radius: var(--tw-r);
	border-top: 2px solid var(--tw-brass);
	padding: .5rem;
	margin-top: .25rem;
}

.tw-nav .sub-menu a { border-radius: 4px; font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.tw-nav .sub-menu a:hover { background: rgba(194, 161, 90, .14); }

/* A gold hairline under the header once it lifts off the hero. */
.tw-header.is-stuck {
	box-shadow: 0 1px 0 0 rgba(194, 161, 90, .5), 0 10px 30px -22px rgba(11, 33, 28, .8);
}

.tw-header__cta {
	box-shadow: 0 6px 18px -10px rgba(194, 161, 90, .9);
	letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   Header colour, now that it no longer floats over the hero
   --------------------------------------------------------------------------
   The header used to sit transparent on top of the photograph, so its type was
   cream. With the utility bar above it the header sits on paper instead, and
   cream on cream is invisible. Everything below puts the ink back.
   -------------------------------------------------------------------------- */

body.tw-has-hero .tw-header,
body.tw-has-hero .tw-header.is-stuck {
	position: sticky;
	background: rgba(251, 249, 244, 0.94);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--tw-line);
}

body.tw-has-hero .tw-header .tw-logo__word,
body.tw-has-hero .tw-header .tw-logo__name,
body.tw-has-hero .tw-header .tw-nav > ul > li > a,
body.tw-has-hero .tw-header__portal,
body.tw-has-hero .tw-header .tw-saved {
	color: var(--tw-ink);
}

body.tw-has-hero .tw-header .tw-logo__sub { color: var(--tw-brass-d); }
body.tw-has-hero .tw-header .tw-logo__mark path { stroke: var(--tw-ink); }
body.tw-has-hero .tw-header .tw-logo__mark .tw-logo__accent { stroke: var(--tw-brass); }
body.tw-has-hero .tw-header .tw-logo__mark rect { fill: var(--tw-ink); }
body.tw-has-hero .tw-burger { color: var(--tw-ink); border-color: var(--tw-line-2); }

/* The hero no longer needs to leave room for a floating header. */
body.tw-has-hero .tw-hero { padding-top: var(--tw-6); }

/* Nav items are tight at nine across; let them shrink gracefully. */
.tw-nav > ul > li > a { font-size: clamp(.7rem, .58rem + .22vw, .78rem); }
.tw-nav ul { gap: clamp(.55rem, .9vw, 1.35rem); }

/* --------------------------------------------------------------------------
   Top-of-page tidy-up
   --------------------------------------------------------------------------
   The preview disclosure and the contact bar were two separate strips stacked
   on each other, which read as clutter before a visitor had seen anything.
   They are now one bar: the disclosure takes the left slot while demo content
   exists, and the standing line replaces it once the demo content is gone.
   -------------------------------------------------------------------------- */

.tw-preview { display: none; }

.tw-topbar__note { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: .74rem; }

.tw-topbar__flag {
	display: inline-block;
	margin-right: .5rem;
	padding: .12rem .5rem;
	border-radius: 999px;
	background: rgba(194, 161, 90, .18);
	border: 1px solid rgba(194, 161, 90, .4);
	color: var(--tw-brass);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The highlighter block behind the accent phrase read as a smudge at display
   size. Colour and italic carry it on their own. */
.tw-hero h1 em {
	background-image: none;
	padding: 0;
	letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   Owner services
   --------------------------------------------------------------------------
   Listing a property yourself and handing the job to a consultant are two
   different services with two different costs, so they live on two pages and
   each page points at the other. These are the shared pieces.
   -------------------------------------------------------------------------- */

.tw-routes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tw-4);
	margin: var(--tw-6) 0;
}

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

.tw-route {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--tw-2);
	padding: var(--tw-5);
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-r);
	transition: border-color .2s var(--tw-ease), box-shadow .2s var(--tw-ease);
}

.tw-route:hover { border-color: rgba(194, 161, 90, .55); box-shadow: 0 14px 34px -20px rgba(11, 33, 28, .4); }
.tw-route--lead { border-color: rgba(194, 161, 90, .5); box-shadow: 0 0 0 1px rgba(194, 161, 90, .25) inset; }

.tw-route__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--tw-ink);
	color: var(--tw-brass);
	margin-bottom: var(--tw-1);
}

.tw-route__tag {
	position: absolute;
	top: var(--tw-4);
	right: var(--tw-4);
	padding: .18rem .6rem;
	border-radius: 999px;
	background: rgba(194, 161, 90, .16);
	border: 1px solid rgba(194, 161, 90, .45);
	color: var(--tw-brass-d);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tw-route__tag--alt { background: rgba(18, 49, 42, .07); border-color: rgba(18, 49, 42, .18); color: var(--tw-ink); }

.tw-route h2 { margin: 0; font-size: var(--tw-t-2); }
.tw-route p { margin: 0; color: var(--tw-muted); font-size: var(--tw-t--1); }

.tw-route__points { list-style: none; margin: var(--tw-1) 0 var(--tw-3); padding: 0; display: grid; gap: .4rem; }
.tw-route__points li { display: flex; gap: .55em; align-items: center; font-size: var(--tw-t--1); }
.tw-route__points svg { color: var(--tw-brass-d); flex: none; }
.tw-route .tw-btn { align-self: flex-start; margin-top: auto; }

.tw-listform { max-width: min(100%, 900px); margin-inline: auto; }

/* ---------- Numbered service steps, with icons ---------- */

.tw-service {
	list-style: none;
	margin: var(--tw-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tw-4);
}

@media (min-width: 640px)  { .tw-service { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tw-service { grid-template-columns: repeat(3, 1fr); } }

.tw-service__step {
	position: relative;
	padding: var(--tw-4);
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-r);
}

.tw-service__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--tw-ink);
	color: var(--tw-brass);
	margin-bottom: var(--tw-2);
}

.tw-service__n {
	position: absolute;
	top: var(--tw-3);
	right: var(--tw-4);
	font-family: var(--tw-display);
	font-size: 1.7rem;
	line-height: 1;
	color: rgba(18, 49, 42, .14);
}

.tw-service__step h3 { margin: 0 0 .35rem; font-family: var(--tw-sans); font-size: var(--tw-t-0); font-weight: 700; }
.tw-service__step p { margin: 0; font-size: var(--tw-t--1); color: var(--tw-muted); }

.tw-service__foot { margin: var(--tw-5) 0 0; font-size: var(--tw-t--1); color: var(--tw-muted); max-width: 66ch; }
.tw-service__cta { display: flex; flex-wrap: wrap; gap: var(--tw-2); margin-top: var(--tw-4); }
.tw-service__cta .tw-btn { display: inline-flex; align-items: center; gap: .5em; }

/* ---------- The "other service" footer band ---------- */

.tw-crosslink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tw-3);
	margin-top: var(--tw-7);
	padding: var(--tw-4) var(--tw-5);
	border: 1px solid var(--tw-line);
	border-left: 3px solid var(--tw-brass);
	border-radius: var(--tw-r);
	background: rgba(255, 255, 255, .7);
}

.tw-crosslink p { margin: 0; font-size: var(--tw-t--1); color: var(--tw-muted); max-width: 62ch; }
.tw-crosslink strong { display: block; color: var(--tw-ink); font-size: var(--tw-t-0); margin-bottom: .15rem; }

/* ============================================================ *
 * List Your Property — dedicated page treatment
 * A single centred column: dark opening band, four steps, then
 * the submission card. Heavier type than the rest of the site
 * because this page has one job and should feel deliberate.
 * ============================================================ */

.tw-lp { --lp-col: 940px; }

.tw-lp__col { max-width: var(--lp-col); margin-inline: auto; }

/* ---------- Opening band ---------- */

.tw-lp__hero {
	position: relative;
	isolation: isolate;
	background: var(--tw-ink);
	color: var(--tw-bone);
	padding: clamp(3.2rem, 2rem + 6vw, 6.4rem) 0 clamp(3.6rem, 2rem + 7vw, 7rem);
	overflow: hidden;
}

.tw-lp__hero::before,
.tw-lp__hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.tw-lp__hero::before {
	inset: -40% 30% auto -20%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(194, 161, 90, .22), transparent 62%);
}

.tw-lp__hero::after {
	inset: auto -25% -55% 45%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(60, 107, 91, .5), transparent 65%);
}

.tw-lp__heroin { text-align: center; max-width: var(--lp-col); margin-inline: auto; }

.tw-lp__crumbs { margin-bottom: var(--tw-4); }
.tw-lp__crumbs .tw-crumbs,
.tw-lp__crumbs .tw-crumbs a { color: rgba(244, 240, 230, .58); justify-content: center; }
.tw-lp__crumbs .tw-crumbs a:hover { color: var(--tw-brass); }

.tw-lp__eyebrow {
	display: inline-block;
	font-family: var(--tw-sans);
	font-size: var(--tw-t--2);
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tw-brass);
	margin-bottom: var(--tw-3);
}

.tw-lp__eyebrow--dark { color: var(--tw-brass-d); }

.tw-lp__title {
	font-family: var(--tw-display);
	font-size: var(--tw-t-4);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--tw-white);
	margin: 0 0 var(--tw-3);
}

.tw-lp__lead {
	max-width: 60ch;
	margin: 0 auto var(--tw-4);
	font-size: var(--tw-t-1);
	line-height: 1.62;
	color: rgba(244, 240, 230, .84);
}

.tw-lp__marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tw-2) var(--tw-4);
	list-style: none;
	margin: 0 0 var(--tw-5);
	padding: 0;
}

.tw-lp__marks li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--tw-sans);
	font-size: var(--tw-t--1);
	font-weight: 700;
	letter-spacing: .01em;
	color: rgba(244, 240, 230, .92);
}

.tw-lp__marks svg { color: var(--tw-brass); flex: none; }

.tw-lp__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--tw-3) var(--tw-4);
	margin: 0;
}

.tw-lp__go { font-size: var(--tw-t-0); padding: 1.05em 2.2em; font-weight: 800; }

.tw-lp__alt {
	font-family: var(--tw-sans);
	font-size: var(--tw-t--1);
	font-weight: 700;
	color: rgba(244, 240, 230, .78);
	text-decoration: none;
	border-bottom: 1px solid rgba(194, 161, 90, .55);
	padding-bottom: 2px;
	transition: color .2s var(--tw-ease), border-color .2s var(--tw-ease);
}

.tw-lp__alt:hover { color: var(--tw-brass); border-color: var(--tw-brass); }

/* ---------- How it works ---------- */

.tw-lp__band { background: var(--tw-paper); padding: clamp(3rem, 2rem + 5vw, 5.5rem) 0 clamp(2.4rem, 1.6rem + 4vw, 4.4rem); }

.tw-lp__h2 {
	font-family: var(--tw-display);
	font-size: var(--tw-t-3);
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	color: var(--tw-ink);
	margin: 0 0 var(--tw-2);
}

.tw-lp__sub {
	text-align: center;
	max-width: 58ch;
	margin: 0 auto var(--tw-6);
	color: var(--tw-muted);
	font-size: var(--tw-t-0);
	line-height: 1.6;
}

.tw-lp__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--tw-4) var(--tw-3);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tw-lp__steps::before {
	content: "";
	position: absolute;
	top: 31px;
	left: 12.5%;
	right: 12.5%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tw-line-2) 12%, var(--tw-line-2) 88%, transparent);
}

.tw-lp__steps > li { text-align: center; position: relative; }

.tw-lp__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto var(--tw-3);
	border-radius: 50%;
	background: var(--tw-white);
	border: 1.5px solid var(--tw-line-2);
	color: var(--tw-ink);
	box-shadow: var(--tw-shadow-sm);
}

.tw-lp__ring b {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tw-brass);
	color: var(--tw-ink);
	font-family: var(--tw-sans);
	font-size: .72rem;
	font-weight: 900;
	border: 2px solid var(--tw-paper);
}

.tw-lp__steps h3 {
	font-family: var(--tw-sans);
	font-size: var(--tw-t-0);
	font-weight: 800;
	letter-spacing: -.005em;
	color: var(--tw-ink);
	margin: 0 0 var(--tw-1);
}

.tw-lp__steps p {
	margin: 0 auto;
	max-width: 26ch;
	font-size: var(--tw-t--1);
	line-height: 1.55;
	color: var(--tw-muted);
}

.tw-lp__prose { margin: var(--tw-6) auto 0; max-width: 66ch; text-align: center; }

/* ---------- Form card ---------- */

.tw-lp__formband {
	background: linear-gradient(180deg, var(--tw-paper) 0%, var(--tw-bone) 100%);
	padding: clamp(2rem, 1rem + 4vw, 3.6rem) 0 clamp(4rem, 2.5rem + 6vw, 7rem);
	scroll-margin-top: 90px;
}

.tw-lp__card {
	background: var(--tw-white);
	border: 1px solid var(--tw-line);
	border-top: 4px solid var(--tw-brass);
	border-radius: var(--tw-r-lg);
	box-shadow: var(--tw-shadow-lg);
	padding: clamp(1.6rem, 1rem + 3vw, 3.4rem);
}

.tw-lp__cardhead { text-align: center; margin-bottom: var(--tw-5); }

.tw-lp__cardhead h2 {
	font-family: var(--tw-display);
	font-size: var(--tw-t-2);
	font-weight: 400;
	color: var(--tw-ink);
	margin: 0 0 var(--tw-2);
}

.tw-lp__cardhead p {
	margin: 0 auto;
	max-width: 52ch;
	font-size: var(--tw-t--1);
	color: var(--tw-muted);
	line-height: 1.6;
}

/* ---------- Managed-service footer note ---------- */

.tw-lp__hand {
	margin-top: var(--tw-5);
	text-align: center;
	background: var(--tw-ink);
	color: var(--tw-bone);
	border-radius: var(--tw-r-lg);
	padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
}

.tw-lp__handicon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto var(--tw-3);
	border-radius: 50%;
	background: rgba(194, 161, 90, .16);
	border: 1px solid rgba(194, 161, 90, .4);
	color: var(--tw-brass);
}

.tw-lp__hand h3 {
	font-family: var(--tw-display);
	font-size: var(--tw-t-1);
	font-weight: 400;
	color: var(--tw-white);
	margin: 0 0 var(--tw-2);
}

.tw-lp__hand p {
	margin: 0 auto var(--tw-4);
	max-width: 52ch;
	font-size: var(--tw-t--1);
	line-height: 1.62;
	color: rgba(244, 240, 230, .78);
}

.tw-lp__hand .tw-btn--ghost {
	color: var(--tw-bone);
	border-color: rgba(244, 240, 230, .38);
}

.tw-lp__hand .tw-btn--ghost:hover {
	color: var(--tw-ink);
	background: var(--tw-brass);
	border-color: var(--tw-brass);
}

@media (max-width: 900px) {
	.tw-lp__steps { grid-template-columns: repeat(2, 1fr); gap: var(--tw-5) var(--tw-3); }
	.tw-lp__steps::before { display: none; }
}

@media (max-width: 520px) {
	.tw-lp__steps { grid-template-columns: 1fr; }
	.tw-lp__marks { gap: var(--tw-1) var(--tw-3); }
	.tw-lp__go { width: 100%; justify-content: center; }
}

/* "Just listed" — recency is the strongest signal a trading agency has, so it
   gets the brass rather than another muted grey. */
.tw-tag--fresh {
	background: var(--tw-brass);
	color: var(--tw-ink);
	font-weight: 800;
	letter-spacing: .1em;
}

/* ============================================================ *
 * Consultant monogram
 *
 * Used where a member of staff has no photograph yet. It reads as a
 * designed plate rather than a gap: a deep brand ground, a fine
 * brass rule, and the initials set in the display face. Four
 * variants so a row of consultants does not look like one repeated
 * tile. Replaced automatically the moment a real portrait is set as
 * the featured image.
 * ============================================================ */

.tw-avatar--mono {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(155deg, var(--tw-mid), var(--tw-deep));
}

/* A soft off-centre glow keeps the plate from reading as flat colour. */
.tw-avatar--mono::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -30% -20% auto -30%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(194, 161, 90, .34), transparent 62%);
}

/* A quiet arc in the corner, echoing the archway in the logo. */
.tw-avatar--mono::after {
	content: "";
	position: absolute;
	right: -22%;
	bottom: -34%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(194, 161, 90, .3);
	pointer-events: none;
}

.tw-avatar__ini {
	position: relative;
	font-family: var(--tw-display);
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--tw-bone);
	text-shadow: 0 2px 14px rgba(8, 24, 20, .45);
}

.tw-avatar--mono .tw-avatar__ini::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -.42em;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tw-brass), transparent);
}

/* Four grounds, so four consultants read as four people. */
.tw-avatar--mono[data-mono="1"] { background: linear-gradient(155deg, #1e4a3e, #0b211c); }
.tw-avatar--mono[data-mono="2"] { background: linear-gradient(155deg, #2a4f42, #12312a); }
.tw-avatar--mono[data-mono="3"] { background: linear-gradient(150deg, #143b32, #0d2621); }

.tw-avatar--mono[data-mono="1"] .tw-avatar__ini { color: var(--tw-brass); }
.tw-avatar--mono[data-mono="3"] .tw-avatar__ini { color: #e8dcc0; }

/* The round variant on a listing page is small — drop the ornament. */
.tw-avatar--round.tw-avatar--mono::after { display: none; }
.tw-avatar--round.tw-avatar--mono .tw-avatar__ini::after { bottom: -.3em; left: 22%; right: 22%; }

/* The apologetic caption is gone; keep the rule harmless for cached markup. */
.tw-agent__pending { display: none; }

/* ============================================================ *
 * Contact band
 *
 * Replaces the consultant grid on the front page. Two columns:
 * who we are on the left, how to reach us on the right, with the
 * fastest channel weighted heaviest. Social links appear only
 * once a URL exists, so the row is never a set of dead buttons.
 * ============================================================ */

.tw-contactband {
	background:
		radial-gradient(90% 120% at 12% 0%, rgba(194, 161, 90, .13), transparent 58%),
		var(--tw-ink);
	color: var(--tw-bone);
}

.tw-cb {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

/* ---------- Left: who we are ---------- */

.tw-cb__mark {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: var(--tw-4);
	border-radius: 14px;
	background: rgba(244, 240, 230, .06);
	border: 1px solid rgba(194, 161, 90, .34);
}

.tw-cb__marksvg .tw-logo__accent { stroke: var(--tw-brass); }

.tw-cb__eyebrow { color: var(--tw-brass); display: block; margin-bottom: var(--tw-2); }

.tw-cb__title {
	font-family: var(--tw-display);
	font-size: var(--tw-t-3);
	font-weight: 400;
	line-height: 1.08;
	color: var(--tw-white);
	margin: 0 0 var(--tw-3);
}

.tw-cb__lead {
	margin: 0;
	max-width: 46ch;
	font-size: var(--tw-t-0);
	line-height: 1.66;
	color: rgba(244, 240, 230, .76);
}

.tw-cb__facts {
	list-style: none;
	margin: var(--tw-4) 0 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.tw-cb__facts li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: var(--tw-t--1);
	line-height: 1.5;
	color: rgba(244, 240, 230, .68);
}

.tw-cb__facts svg { color: var(--tw-brass); flex: none; margin-top: .18em; }

/* ---------- Right: the channels ---------- */

.tw-cb__ways { display: grid; gap: .7rem; }

.tw-way {
	display: flex;
	align-items: center;
	gap: var(--tw-3);
	padding: 1.05rem 1.2rem;
	border: 1px solid rgba(244, 240, 230, .16);
	border-radius: 12px;
	background: rgba(244, 240, 230, .045);
	color: var(--tw-bone);
	text-decoration: none;
	transition: background-color .2s var(--tw-ease), border-color .2s var(--tw-ease), transform .2s var(--tw-ease);
}

.tw-way:hover {
	background: rgba(244, 240, 230, .1);
	border-color: var(--tw-brass);
	transform: translateX(3px);
}

.tw-way__ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 10px;
	background: rgba(194, 161, 90, .16);
	color: var(--tw-brass);
}

.tw-way__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.tw-way__text small {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(244, 240, 230, .55);
}

.tw-way__text strong {
	font-size: var(--tw-t-0);
	font-weight: 700;
	color: var(--tw-white);
	overflow-wrap: anywhere;
}

.tw-way__text em {
	font-style: normal;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--tw-brass);
}

.tw-way > svg:last-child { margin-left: auto; flex: none; color: rgba(244, 240, 230, .4); transition: color .2s var(--tw-ease); }
.tw-way:hover > svg:last-child { color: var(--tw-brass); }

/* The fastest channel is weighted heaviest. */
.tw-way--wa {
	background: rgba(194, 161, 90, .13);
	border-color: rgba(194, 161, 90, .5);
}

.tw-way--wa .tw-way__ico { background: var(--tw-brass); color: var(--tw-ink); }
.tw-way--wa:hover { background: rgba(194, 161, 90, .2); }

.tw-way--cta { border-style: dashed; }

/* ---------- Social ---------- */

.tw-cb__social {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-top: var(--tw-2);
	padding-top: var(--tw-3);
	border-top: 1px solid rgba(244, 240, 230, .12);
}

.tw-cb__social > span {
	margin-right: .2rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(244, 240, 230, .5);
}

.tw-cb__social a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(244, 240, 230, .18);
	color: rgba(244, 240, 230, .8);
	transition: background-color .18s var(--tw-ease), color .18s var(--tw-ease), border-color .18s var(--tw-ease);
}

.tw-cb__social a:hover { background: var(--tw-brass); border-color: var(--tw-brass); color: var(--tw-ink); }

@media (max-width: 900px) {
	.tw-cb { grid-template-columns: 1fr; gap: var(--tw-5); }
	.tw-cb__lead { max-width: none; }
}

/* ---------- Contact band: the assistant first, then the people ----------
 *
 * Five buttons of equal weight is a menu, not a route. Two small labels
 * split the column into "try this" and "or talk to us", so a visitor is
 * led rather than presented with options.
 */

.tw-cb__step {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: var(--tw-2) 0 .1rem;
	font-family: var(--tw-sans);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(244, 240, 230, .45);
}

.tw-cb__step::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(244, 240, 230, .16), transparent);
}

.tw-cb__step:first-child { margin-top: 0; }

.tw-cb__hint {
	margin: -.1rem 0 .35rem;
	font-size: .78rem;
	line-height: 1.6;
	color: rgba(244, 240, 230, .58);
}

/* The assistant card carries the weight WhatsApp used to. */
.tw-way--bot {
	width: 100%;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	background: linear-gradient(120deg, rgba(194, 161, 90, .22), rgba(194, 161, 90, .09));
	border-color: var(--tw-brass);
}

.tw-way--bot:hover { background: linear-gradient(120deg, rgba(194, 161, 90, .32), rgba(194, 161, 90, .14)); }
.tw-way--bot .tw-way__ico { background: var(--tw-brass); color: var(--tw-ink); }
.tw-way--bot .tw-way__text strong { font-size: var(--tw-t-0); }

/* A quiet pulse, so "available now" reads as a live state rather than a
   claim printed on a page. */
.tw-way__live { display: inline-flex; align-items: center; gap: .4rem; }

.tw-way__live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
	animation: tw-live 2.4s ease-out infinite;
}

@keyframes tw-live {
	0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.tw-way__live::before { animation: none; }
}

/* The consultant panel's "Reach us" label, standing in for the removed
   specialisation and areas-served list. */
.tw-panel__reach {
	margin: var(--tw-4) 0 var(--tw-2);
	font-family: var(--tw-sans);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(244, 240, 230, .5);
	text-align: left;
}

/* Which number does what, said quietly under each button. */
.tw-panel__note {
	display: block;
	margin: -.35rem 0 .55rem;
	font-size: .68rem;
	letter-spacing: .04em;
	color: rgba(244, 240, 230, .5);
	text-align: center;
}

/* Two lead paragraphs need air between them; the first sets out what the firm
   does, the second how to reach it, and they should not read as one block. */
.tw-cb__lead + .tw-cb__lead { margin-top: var(--tw-3); }