/* ==========================================================================
   NestSift — main.css

   One stylesheet, no build step. Organised as:
     1. Tokens
     2. Reset + base
     3. Layout primitives
     4. Typography
     5. Buttons + forms
     6. Header + drawer
     7. Page head
     8. Cards + grids
     9. Footer
    10. Utilities
    11. Responsive

   Colour and font tokens are overridden at runtime by the Customizer
   (see inc/customizer.php → nsft_typography_css). Never hard-code a brand
   colour below :root — always reference a token.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/*
	 * Brand — navy + gold, sampled directly from the client's logo artwork
	 * (OPT-png-01 / OPT-png-03). These two hex values ARE the brand; do not
	 * eyeball replacements for them.
	 *
	 * Customizer-controlled: --nsft-navy, --nsft-gold, --nsft-cream.
	 * Everything else below derives from those.
	 */
	--nsft-navy: #031B3C;        /* logo navy — exact */
	--nsft-navy-deep: #02132B;   /* deeper ground (footer signup band) */
	--nsft-navy-soft: #0A2650;   /* raised surface on navy */
	--nsft-navy-line: #16355E;   /* hairline on navy */

	--nsft-gold: #C09435;        /* logo gold — exact. 6.14:1 on navy ✓ AA */
	--nsft-gold-bright: #D2A64A; /* hover/accent on DARK grounds. 7.58:1 on navy ✓ */
	--nsft-gold-deep: #856321;   /* the ONLY gold for text on LIGHT grounds.
	                                5.52:1 on white, 5.07:1 on cream ✓ AA.
	                                ⚠ Raw --nsft-gold on white is 2.79:1 — it
	                                FAILS. Never use it for text on a light
	                                background; it is a fill colour there. */
	--nsft-gold-wash: #FAF4E6;   /* soft gold tint background */

	--nsft-cream: #F7F5F1;
	--nsft-white: #FFFFFF;

	/* Ink + neutrals */
	--nsft-ink: #16181D;
	--nsft-body: #3D4453;
	/*
	 * ⚠ Was #6B7280, which measured 4.44:1 on the cream ground — under the 4.5
	 * AA minimum for body text, and cream is the --soft section background, so
	 * every secondary line on those sections was failing. #5A6472 is 6.00:1 on
	 * white and 5.51:1 on cream and still reads as clearly secondary.
	 * Do not lighten this again without re-measuring against BOTH grounds.
	 */
	--nsft-muted: #5A6472;
	--nsft-line: #E4E2DC;
	--nsft-line-soft: #F0EEE9;

	/* Semantic */
	--nsft-ok: #15803D;
	--nsft-warn: #B45309;
	--nsft-error: #B91C1C;

	/* Surfaces */
	--nsft-bg: var(--nsft-white);
	--nsft-bg-soft: var(--nsft-cream);
	--nsft-surface: var(--nsft-white);

	/* Type */
	/* All-sans system (client decision). Both slots take the same fallback. */
	--nsft-font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--nsft-font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--nsft-text-base: 17px;
	--nsft-weight-head: 700;
	--nsft-weight-body: 400;

	/* 0.8rem ≈ 13.6px. Was 0.75rem ≈ 12.75px — at the floor the brief warns
	   about, and this token carries listing metadata and legal text. */
	--nsft-text-xs: 0.8rem;
	--nsft-text-sm: 0.875rem;
	--nsft-text-md: 1rem;
	--nsft-text-lg: 1.125rem;
	--nsft-text-xl: 1.375rem;
	--nsft-text-2xl: 1.75rem;
	--nsft-text-3xl: 2.25rem;
	--nsft-text-4xl: 3rem;
	--nsft-text-5xl: 3.75rem;

	/* Heading sizes — overridden by the Customizer (Typography → Heading sizes).
	   Defined here too so the theme renders correctly before anything is set. */
	--nsft-h1: 3.75rem;
	--nsft-h2: 2.25rem;
	--nsft-h3: 1.375rem;
	--nsft-h4: 1.125rem;

	/* Space — 4px base */
	--nsft-s1: 0.25rem;
	--nsft-s2: 0.5rem;
	--nsft-s3: 0.75rem;
	--nsft-s4: 1rem;
	--nsft-s5: 1.5rem;
	--nsft-s6: 2rem;
	--nsft-s7: 3rem;
	--nsft-s8: 4rem;
	--nsft-s9: 6rem;

	/* Shape */
	--nsft-radius-sm: 6px;
	--nsft-radius: 10px;
	--nsft-radius-lg: 14px;
	/* Capped at 16px: 24px was reading as generic SaaS rather than residential. */
	--nsft-radius-xl: 16px;
	--nsft-radius-pill: 999px;

	/* Elevation — soft and wide, never heavy. */
	--nsft-shadow-sm: 0 1px 2px rgba(14, 30, 58, .06), 0 2px 8px rgba(14, 30, 58, .04);
	--nsft-shadow: 0 4px 12px rgba(14, 30, 58, .07), 0 12px 32px rgba(14, 30, 58, .06);
	--nsft-shadow-lg: 0 12px 28px rgba(14, 30, 58, .10), 0 32px 64px rgba(14, 30, 58, .09);

	/* Layout */
	/*
	 * Container width is a LADDER, not one value — see the media queries just
	 * below §1. The base here is what applies under 1400px; wider screens step
	 * up so a 1920 monitor is not reading a 1240px column with 340px of dead
	 * margin either side. Reading measures are still capped per-component
	 * (--narrow for prose, --form for form screens), so widening the shell does
	 * not produce 200-character lines.
	 */
	--nsft-container: 1240px;
	--nsft-container-narrow: 780px;
	--nsft-container-form: 980px;
	--nsft-gutter: 1.25rem;
	--nsft-header-h: 76px;

	--nsft-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Reset + base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	/* NOTE: no `scroll-behavior: smooth` — it fights anchor focus and makes
	   long-page jumps feel broken. */
}

body {
	margin: 0;
	background: var(--nsft-bg);
	color: var(--nsft-body);
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-base);
	font-weight: var(--nsft-weight-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/*
 * ⚠ The `hidden` attribute must actually hide things.
 *
 * The browser's own `[hidden] { display: none }` is a UA rule, so ANY author
 * class that sets `display` beats it. `.nsft-btn { display: inline-flex }` did
 * exactly that, and every `hidden` button in the wizard stayed on screen —
 * "Next" and "Submit for review" showed together, and "Say it differently"
 * appeared before anything had been written.
 *
 * This is the fix for the whole class of bug. Do not go back to patching it
 * per-component (`.nsft-drawer[hidden]`, `.nsft-safety[hidden]`) — that treats
 * the symptom and the next component to set `display` breaks again.
 */
[hidden] { display: none !important; }

a { color: var(--nsft-navy); text-decoration-color: color-mix(in srgb, var(--nsft-navy) 30%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--nsft-gold-deep); }

:focus-visible {
	outline: 3px solid var(--nsft-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--nsft-line); margin: var(--nsft-s6) 0; }

::selection { background: var(--nsft-gold); color: var(--nsft-navy); }

.nsft-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--nsft-s3) var(--nsft-s5);
	background: var(--nsft-navy);
	color: #fff;
	border-radius: 0 0 var(--nsft-radius) 0;
	font-weight: 600;
	text-decoration: none;
}
.nsft-skip:focus { left: 0; color: #fff; }

.nsft-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

/* ---------- Container ladder ----------
 * Steps the shell width with the viewport. Below 1400px the base 1240px value
 * applies and the container simply fills the viewport minus its gutters.
 */
@media (min-width: 1400px) { :root { --nsft-container: 1300px; } }
@media (min-width: 1500px) { :root { --nsft-container: 1400px; } }
@media (min-width: 1700px) { :root { --nsft-container: 1500px; } }
@media (min-width: 1900px) { :root { --nsft-container: 1600px; } }
@media (min-width: 2200px) { :root { --nsft-container: 1720px; } }

.nsft-container {
	width: 100%;
	max-width: var(--nsft-container);
	margin-inline: auto;
	padding-inline: var(--nsft-gutter);
}
.nsft-container--narrow { max-width: var(--nsft-container-narrow); }
/* Wider than reading width, narrower than full — for form-first screens. */
.nsft-container--form { max-width: var(--nsft-container-form); }


.nsft-main { min-height: 50vh; }

/* Sections alternate ground colour — never two adjacent flats the same.
   Add --soft or --navy to break the rhythm deliberately. */
.nsft-section { padding-block: var(--nsft-s8); }
.nsft-section--tight { padding-block: var(--nsft-s7); }
.nsft-section--soft { background: var(--nsft-bg-soft); }
.nsft-section--navy { background: var(--nsft-navy); color: rgba(255, 255, 255, .82); }
.nsft-section--navy h1, .nsft-section--navy h2, .nsft-section--navy h3 { color: #fff; }

.nsft-sectionhead { max-width: 720px; margin-bottom: var(--nsft-s6); }
.nsft-sectionhead--center { margin-inline: auto; text-align: center; }
.nsft-sectionhead__title { margin: 0 0 var(--nsft-s3); }
.nsft-sectionhead__lead { margin: 0; font-size: var(--nsft-text-lg); color: var(--nsft-muted); }

/* ==========================================================================
   4. Typography
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--nsft-font-display);
	color: var(--nsft-navy);
	font-weight: var(--nsft-weight-head);
	line-height: 1.14;
	/* A geometric sans needs tighter tracking at display sizes than a serif. */
	letter-spacing: -0.022em;
	margin: 0 0 var(--nsft-s4);
	text-wrap: balance;
}

/*
 * Heading sizes are Customizer-controlled (Typography → Heading sizes), which
 * is why they read from --nsft-h1…h4 rather than the raw scale tokens.
 *
 * ⚠ The lower bound of each clamp is a PROPORTION of the chosen size, not a
 * fixed rem. With a fixed floor, `clamp(2.25rem, …, var(--nsft-h1))` silently
 * ignores any H1 setting below 2.25rem — CSS clamp returns the minimum when the
 * maximum is smaller — so the control would appear dead at the small end. The
 * ratios below are the original fixed floors expressed against their defaults,
 * so the fluid behaviour is unchanged at stock values.
 */
h1 { font-size: clamp(calc(var(--nsft-h1) * 0.6), 1.6rem + 2.6vw, var(--nsft-h1)); }
h2 { font-size: clamp(calc(var(--nsft-h2) * 0.78), 1.35rem + 1.6vw, var(--nsft-h2)); }
h3 { font-size: var(--nsft-h3); }
h4 { font-size: var(--nsft-h4); }

p { margin: 0 0 var(--nsft-s4); }
p:last-child { margin-bottom: 0; }

.nsft-eyebrow {
	display: inline-block;
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nsft-gold-deep);
	margin-bottom: var(--nsft-s3);
}

.nsft-prose { font-size: var(--nsft-text-lg); }
.nsft-prose > * + * { margin-top: var(--nsft-s5); }
.nsft-prose h2, .nsft-prose h3 { margin-top: var(--nsft-s7); }
.nsft-prose ul, .nsft-prose ol { padding-left: 1.25em; }
.nsft-prose li + li { margin-top: var(--nsft-s2); }
.nsft-prose img { border-radius: var(--nsft-radius-lg); }
.nsft-prose blockquote {
	margin: 0;
	padding: var(--nsft-s5) var(--nsft-s6);
	background: var(--nsft-gold-wash);
	border-left: 3px solid var(--nsft-gold);
	border-radius: 0 var(--nsft-radius) var(--nsft-radius) 0;
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-xl);
	color: var(--nsft-navy);
}

/* ==========================================================================
   5. Buttons + forms
   ========================================================================== */

.nsft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nsft-s2);
	padding: 0.8em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--nsft-radius);
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--nsft-ease), color .18s var(--nsft-ease),
	            border-color .18s var(--nsft-ease), transform .18s var(--nsft-ease),
	            box-shadow .18s var(--nsft-ease);
}
.nsft-btn:active { transform: translateY(0); box-shadow: none; }

/*
 * Hover states carry a colour shift, a lift and a shadow together. A hover that
 * only lightens the fill by a few percent reads as nothing on a colour as warm
 * as this gold — the movement is what actually registers as "this is a button".
 */
.nsft-btn--gold {
	background: var(--nsft-gold);
	border-color: var(--nsft-gold);
	color: var(--nsft-navy);
	box-shadow: 0 1px 2px rgba(3, 27, 60, .10);
}
.nsft-btn--gold:hover {
	background: var(--nsft-gold-bright);
	border-color: var(--nsft-gold-bright);
	color: var(--nsft-navy-deep);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(192, 148, 53, .38);
}

.nsft-btn--navy {
	background: var(--nsft-navy);
	border-color: var(--nsft-navy);
	color: #fff;
	box-shadow: 0 1px 2px rgba(3, 27, 60, .12);
}
.nsft-btn--navy:hover {
	background: var(--nsft-navy-soft);
	border-color: var(--nsft-gold);
	color: var(--nsft-gold-bright);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(3, 27, 60, .30);
}

.nsft-btn--outline {
	background: transparent;
	border-color: var(--nsft-line);
	color: var(--nsft-navy);
}
.nsft-btn--outline:hover {
	background: var(--nsft-navy);
	border-color: var(--nsft-navy);
	color: var(--nsft-gold-bright);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(3, 27, 60, .22);
}

.nsft-btn--ghost {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .30);
	color: #fff;
	backdrop-filter: blur(6px);
}
.nsft-btn--ghost:hover {
	background: var(--nsft-gold);
	border-color: var(--nsft-gold);
	color: var(--nsft-navy);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(192, 148, 53, .34);
}

/* Respect a reduced-motion preference — keep the colour, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.nsft-btn:hover { transform: none; }
}

.nsft-btn--block { width: 100%; }
.nsft-btn--lg { padding: 1em 2em; font-size: var(--nsft-text-md); }

/* Inputs */
.nsft-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
	width: 100%;
	padding: 0.75em 1em;
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-md);
	color: var(--nsft-ink);
	transition: border-color .15s var(--nsft-ease), box-shadow .15s var(--nsft-ease);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--nsft-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nsft-gold) 22%, transparent);
}
::placeholder { color: var(--nsft-muted); opacity: 1; }

label { display: block; font-size: var(--nsft-text-sm); font-weight: 600; color: var(--nsft-ink); margin-bottom: var(--nsft-s2); }

/* ==========================================================================
   6. Header + drawer
   ========================================================================== */

.nsft-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--nsft-navy);
	color: #fff;
	border-bottom: 1px solid var(--nsft-navy-line);
	transition: background-color .28s var(--nsft-ease), box-shadow .28s var(--nsft-ease),
	            border-color .28s var(--nsft-ease), color .28s var(--nsft-ease);
}

/*
 * Overlay state — used only where a dark hero sits behind the header
 * (nsft_header_is_overlay()). The header floats transparently over the hero,
 * then turns solid white once the page scrolls.
 */
.nsft-header--overlay {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.nsft-header--overlay.is-scrolled {
	background: var(--nsft-white);
	border-bottom-color: var(--nsft-line);
	box-shadow: 0 1px 0 rgba(3, 27, 60, .04), 0 8px 28px rgba(3, 27, 60, .08);
}

/* Scrolled: navy nav, gold on hover, colour logo. */
.nsft-header--overlay.is-scrolled .nsft-nav__list a,
.nsft-header--overlay.is-scrolled .nsft-nav .menu-item a,
.nsft-header--overlay.is-scrolled .nsft-header__signin { color: var(--nsft-navy); }

.nsft-header--overlay.is-scrolled .nsft-nav__list a:hover,
.nsft-header--overlay.is-scrolled .nsft-nav .menu-item a:hover,
.nsft-header--overlay.is-scrolled .nsft-nav .current-menu-item > a,
.nsft-header--overlay.is-scrolled .nsft-header__signin:hover {
	color: var(--nsft-gold-deep);
	border-bottom-color: var(--nsft-gold);
}

.nsft-header--overlay.is-scrolled .nsft-burger { border-color: var(--nsft-line); }
.nsft-header--overlay.is-scrolled .nsft-burger__bar { background: var(--nsft-navy); }
.nsft-header--overlay.is-scrolled .nsft-btn--ghost {
	background: transparent;
	border-color: var(--nsft-line);
	color: var(--nsft-navy);
}
.nsft-header--overlay.is-scrolled .nsft-btn--ghost:hover { background: var(--nsft-navy); color: #fff; }

/* Logo swap. Both variants ship in the markup; only one is ever visible. */
.nsft-brand--swap { position: relative; }
.nsft-brand--swap .nsft-brand__img--light { display: none; }
.nsft-header--overlay.is-scrolled .nsft-brand--swap .nsft-brand__img--dark { display: none; }
.nsft-header--overlay.is-scrolled .nsft-brand--swap .nsft-brand__img--light { display: block; }
/* A solid navy header always uses the white logo. */
.nsft-header--solid .nsft-brand--swap .nsft-brand__img--light { display: none; }

/* The overlay header is fixed, so the hero has to start beneath it. */
.nsft-header--overlay + .nsft-drawer + .nsft-main { padding-top: 0; }

.nsft-header__inner {
	display: flex;
	align-items: center;
	gap: var(--nsft-s5);
	min-height: var(--nsft-header-h);
}

/* Brand lockup */
.nsft-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--nsft-s3);
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.nsft-brand__mark { display: block; width: 38px; height: 38px; color: var(--nsft-gold); flex-shrink: 0; }
.nsft-brand__mark svg { width: 100%; height: 100%; }
.nsft-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.nsft-brand__name {
	font-family: var(--nsft-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: currentColor;
}
.nsft-brand__name-accent { color: var(--nsft-gold); }
.nsft-brand__tag {
	font-family: var(--nsft-font-body);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
	margin-top: 3px;
}
.nsft-brand--footer .nsft-brand__name { color: #fff; }

/*
 * Image logo.
 *
 * The client's artwork is a VERTICAL lockup (mark over wordmark over tagline).
 * At any height a header bar can afford, that renders the wordmark at ~12px —
 * unreadable. What is wired up here is a horizontal re-lay-out of the same
 * artwork (see nestsift-dev/make-horizontal-logo.php): identical mark, identical
 * type, arranged side by side. Sized by height so the aspect ratio is whatever
 * the uploaded file is — never set both dimensions.
 */
.nsft-brand--image { gap: 0; }
.nsft-brand__img { height: 46px; width: auto; max-width: 260px; object-fit: contain; }
.nsft-brand--footer .nsft-brand__img { height: 52px; max-width: 280px; }

/* Nav */
.nsft-nav { margin-left: auto; }
.nsft-nav__list {
	display: flex;
	align-items: center;
	gap: var(--nsft-s5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nsft-nav__list a, .nsft-nav .menu-item a {
	color: rgba(255, 255, 255, .86);
	font-size: var(--nsft-text-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	padding-block: var(--nsft-s2);
	border-bottom: 2px solid transparent;
	transition: color .16s var(--nsft-ease), border-color .16s var(--nsft-ease);
}
.nsft-nav__list a:hover, .nsft-nav .menu-item a:hover,
.nsft-nav .current-menu-item > a {
	color: var(--nsft-gold-bright);
	border-bottom-color: var(--nsft-gold);
}

.nsft-header__actions {
	display: flex;
	align-items: center;
	gap: var(--nsft-s3);
	flex-shrink: 0;
}
.nsft-header__signin {
	color: rgba(255, 255, 255, .86);
	font-size: var(--nsft-text-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.nsft-header__signin:hover { color: var(--nsft-gold-bright); }

/* Burger — desktop-hidden, shown at the nav breakpoint. */
.nsft-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--nsft-radius-sm);
	cursor: pointer;
	align-items: center;
}
.nsft-burger__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s var(--nsft-ease), opacity .2s var(--nsft-ease);
}
.nsft-burger[aria-expanded="true"] .nsft-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nsft-burger[aria-expanded="true"] .nsft-burger__bar:nth-child(2) { opacity: 0; }
.nsft-burger[aria-expanded="true"] .nsft-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.nsft-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(10, 22, 40, .55);
	backdrop-filter: blur(2px);
}
.nsft-drawer[hidden] { display: none; }
/*
 * Full-screen panel, following the TiDii pattern: brand + close along the top,
 * generous tap targets down the middle, actions anchored at the bottom.
 *
 * It was a 360px slide-out with a bare × floating in the corner and no brand,
 * which on a phone read as a fragment of a page rather than a menu.
 */
.nsft-drawer__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--nsft-navy);
	color: #fff;
	padding: 0;
	overflow-y: auto;
	box-shadow: var(--nsft-shadow-lg);
	animation: nsft-slide-in .22s var(--nsft-ease);
}

.nsft-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nsft-s4);
	padding: var(--nsft-s4) var(--nsft-s5);
	border-bottom: 1px solid var(--nsft-navy-line);
	flex-shrink: 0;
}
/* The lockup is a link home; keep it from stretching the row. */
.nsft-drawer__top .nsft-brand { flex-shrink: 1; min-width: 0; }
.nsft-drawer__top .nsft-brand__img { height: 40px; max-width: 190px; }

@keyframes nsft-slide-in { from { transform: translateX(100%); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.nsft-drawer__panel { animation: none; }
	* { transition-duration: .01ms !important; }
}

.nsft-drawer__close {
	/* 44px: the minimum comfortable touch target. */
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--nsft-navy-line);
	border-radius: var(--nsft-radius);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s var(--nsft-ease), border-color .15s var(--nsft-ease),
	            color .15s var(--nsft-ease);
}
.nsft-drawer__close:hover {
	background: rgba(255, 255, 255, .08);
	border-color: var(--nsft-gold);
	color: var(--nsft-gold-bright);
}

/* flex:1 pushes the actions block to the bottom on a tall screen. */
.nsft-drawer__nav { padding: var(--nsft-s5); flex: 1; }
.nsft-drawer__list, .nsft-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.nsft-drawer__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--nsft-s4) var(--nsft-s4);
	border-radius: var(--nsft-radius);
	color: #fff;
	font-size: var(--nsft-text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background-color .15s var(--nsft-ease), color .15s var(--nsft-ease);
}
.nsft-drawer__nav a:hover { background: rgba(255, 255, 255, .07); color: var(--nsft-gold-bright); }

/* Current page: gold rule down the left, matching the desktop nav's underline. */
.nsft-drawer__nav .current-menu-item > a,
.nsft-drawer__nav .current_page_item > a,
.nsft-drawer__nav .current-menu-parent > a,
.nsft-drawer__nav .current-menu-ancestor > a {
	position: relative;
	background: rgba(255, 255, 255, .07);
	color: var(--nsft-gold-bright);
}
.nsft-drawer__nav .current-menu-item > a::before,
.nsft-drawer__nav .current_page_item > a::before,
.nsft-drawer__nav .current-menu-parent > a::before,
.nsft-drawer__nav .current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 2px;
	background: var(--nsft-gold);
}

/*
 * Sub-menus render expanded and indented rather than behind a toggle: the
 * primary menu is two levels at most, and a disclosure control the user has to
 * discover is worse than four extra rows they can already see.
 */
.nsft-drawer__nav .sub-menu {
	margin: 2px 0 var(--nsft-s2) var(--nsft-s4);
	padding-left: var(--nsft-s4);
	border-left: 1px solid var(--nsft-navy-line);
	gap: 0;
}
.nsft-drawer__nav .sub-menu a {
	font-size: var(--nsft-text-md);
	font-weight: 500;
	color: rgba(255, 255, 255, .78);
	padding-block: var(--nsft-s3);
}

.nsft-drawer__actions {
	display: grid;
	gap: var(--nsft-s3);
	padding: var(--nsft-s5);
	padding-bottom: max( var(--nsft-s5), env(safe-area-inset-bottom) );
	border-top: 1px solid var(--nsft-navy-line);
	flex-shrink: 0;
}
.nsft-drawer__plain {
	display: block;
	text-align: center;
	padding-top: var(--nsft-s2);
	color: rgba(255, 255, 255, .72);
	font-size: var(--nsft-text-sm);
	text-decoration: none;
}
.nsft-drawer__plain:hover { color: var(--nsft-gold-bright); text-decoration: underline; }

body.nsft-drawer-open { overflow: hidden; }

/* ==========================================================================
   7. Page head
   ========================================================================== */

/*
 * The page header strip.
 *
 * ⚠ 40vh, deliberately the SAME on every route except the homepage — client
 * instruction. The homepage hero is 72vh and is the only exception. Do not add
 * per-template heights here; if a page needs to feel tighter, adjust padding,
 * not the height, or the site stops feeling like one site.
 *
 * It is a flex container so the title stays optically centred whether or not a
 * lead line is present, and whether or not it is overlaying the header.
 */
.nsft-pagehead {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40vh;
	background: var(--nsft-navy);
	color: #fff;
	padding-block: var(--nsft-s8);
	overflow: hidden;
}
.nsft-pagehead > .nsft-container { width: 100%; }
.nsft-pagehead__media { position: absolute; inset: 0; }
.nsft-pagehead__img { width: 100%; height: 100%; object-fit: cover; }

/*
 * A page with a hero photo overlays the header (see nsft_header_is_overlay), so
 * the strip has to clear the menu itself.
 */
.nsft-pagehead--image {
	padding-top: calc(var(--nsft-header-h) + var(--nsft-s7));
	padding-bottom: var(--nsft-s8);
}

/*
 * Same scrim language as the homepage hero: a band behind the menu, then a
 * top-left → bottom-right diagonal that clears toward the bottom-right so the
 * photograph stays visible instead of becoming a flat navy wash.
 *
 * ::after is correct here — it renders as the LAST child, so it paints above
 * .nsft-pagehead__media. (The hero needed its scrim moved onto the media
 * element for exactly the opposite reason; see §9c.)
 */
.nsft-pagehead--image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(3, 27, 60, .80) 0,
			rgba(3, 27, 60, .52) calc(var(--nsft-header-h) * .75),
			rgba(3, 27, 60, 0) calc(var(--nsft-header-h) + 4rem)),
		linear-gradient(to bottom right,
			rgba(3, 27, 60, .94) 0%,
			rgba(3, 27, 60, .82) 26%,
			rgba(3, 27, 60, .58) 52%,
			rgba(3, 27, 60, .28) 76%,
			rgba(3, 27, 60, .10) 100%);
}
.nsft-pagehead__inner { position: relative; z-index: 2; }
.nsft-pagehead__title { color: #fff; margin-bottom: var(--nsft-s3); }
.nsft-pagehead__lead {
	max-width: 60ch;
	margin: 0;
	font-size: var(--nsft-text-lg);
	color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   8. Cards + grids
   ========================================================================== */

.nsft-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--nsft-s5);
}

.nsft-card {
	background: var(--nsft-surface);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	overflow: hidden;
	transition: transform .2s var(--nsft-ease), box-shadow .2s var(--nsft-ease), border-color .2s var(--nsft-ease);
}
.nsft-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--nsft-shadow);
}
.nsft-card__link { display: block; text-decoration: none; color: inherit; }
.nsft-card__media { aspect-ratio: 4 / 3; background: var(--nsft-cream); overflow: hidden; }
.nsft-card__img { width: 100%; height: 100%; object-fit: cover; }
.nsft-card__body { padding: var(--nsft-s5); }
.nsft-card__title { font-size: var(--nsft-text-lg); margin-bottom: var(--nsft-s2); }
.nsft-card__excerpt { color: var(--nsft-muted); font-size: var(--nsft-text-sm); margin: 0; }

.nsft-empty {
	padding: var(--nsft-s8) var(--nsft-s5);
	text-align: center;
	background: var(--nsft-bg-soft);
	border-radius: var(--nsft-radius-lg);
}
.nsft-empty__text { font-size: var(--nsft-text-lg); color: var(--nsft-muted); }

.nsft-pagination {
	display: flex;
	justify-content: center;
	gap: var(--nsft-s2);
	margin-top: var(--nsft-s7);
}
.nsft-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--nsft-s3);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	text-decoration: none;
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: var(--nsft-navy);
}
.nsft-pagination .page-numbers:hover { border-color: var(--nsft-navy); }
.nsft-pagination .page-numbers.current {
	background: var(--nsft-navy);
	border-color: var(--nsft-navy);
	color: #fff;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.nsft-footer { background: var(--nsft-navy); color: rgba(255, 255, 255, .72); }

.nsft-footer__signup {
	background: var(--nsft-navy-deep);
	border-bottom: 1px solid var(--nsft-navy-line);
	padding-block: var(--nsft-s7);
}
.nsft-footer__signup-inner {
	display: grid;
	grid-template-columns: 1fr minmax(320px, 480px);
	gap: var(--nsft-s6);
	align-items: center;
}
.nsft-footer__signup-title { color: #fff; font-size: var(--nsft-text-2xl); margin-bottom: var(--nsft-s2); }
.nsft-footer__signup-lead { margin: 0; font-size: var(--nsft-text-sm); color: rgba(255, 255, 255, .62); }

.nsft-subscribe { display: flex; gap: var(--nsft-s2); flex-wrap: wrap; position: relative; }
.nsft-subscribe__input { flex: 1 1 220px; }
.nsft-subscribe__msg {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--nsft-text-sm);
	min-height: 1.2em;
	color: var(--nsft-gold-bright);
}

.nsft-footer__main { padding-block: var(--nsft-s8); }
.nsft-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--nsft-s6);
}
.nsft-footer__blurb {
	margin-top: var(--nsft-s4);
	font-size: var(--nsft-text-sm);
	color: rgba(255, 255, 255, .58);
	max-width: 42ch;
}
.nsft-footer__heading {
	color: #fff;
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: var(--nsft-s4);
}
.nsft-footer__list { list-style: none; margin: 0; padding: 0; }
.nsft-footer__list li + li { margin-top: var(--nsft-s3); }
.nsft-footer__list a {
	color: rgba(255, 255, 255, .72);
	font-size: var(--nsft-text-sm);
	text-decoration: none;
}
.nsft-footer__list a:hover { color: var(--nsft-gold-bright); }

.nsft-footer__legal {
	border-top: 1px solid var(--nsft-navy-line);
	padding-block: var(--nsft-s5);
}
.nsft-fairhousing {
	display: flex;
	gap: var(--nsft-s3);
	align-items: flex-start;
	font-size: var(--nsft-text-xs);
	color: rgba(255, 255, 255, .55);
	line-height: 1.6;
	max-width: 90ch;
}
.nsft-fairhousing__mark { flex-shrink: 0; width: 26px; height: 26px; color: rgba(255, 255, 255, .75); }
.nsft-fairhousing strong { color: rgba(255, 255, 255, .8); }

.nsft-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nsft-s4);
	flex-wrap: wrap;
	margin-top: var(--nsft-s5);
	padding-top: var(--nsft-s5);
	border-top: 1px solid var(--nsft-navy-line);
}
.nsft-footer__copy, .nsft-footer__credit {
	margin: 0;
	font-size: var(--nsft-text-xs);
	color: rgba(255, 255, 255, .5);
}
.nsft-footer__credit a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.nsft-footer__credit a:hover { color: var(--nsft-gold-bright); }

/* ==========================================================================
   9b. Rentals — cards, filters, listing, gallery
   ========================================================================== */

/* ---------- rental grid + card ---------- */

.nsft-rentalgrid {
	display: grid;
	/* 340 rather than 310: on a 1240px container this settles at three columns
	   instead of four, so each photograph is meaningfully larger. The product
	   on a rental marketplace is the picture. */
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: var(--nsft-s5);
}

.nsft-rental {
	background: var(--nsft-surface);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	overflow: hidden;
	transition: transform .2s var(--nsft-ease), box-shadow .2s var(--nsft-ease), border-color .2s var(--nsft-ease);
}
.nsft-rental:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--nsft-shadow); }

/*
 * Stretched link. The anchor lives inside the title for a sensible accessible
 * name, and its ::after covers the whole card so the card is clickable — which
 * lets the save <button> sit as a sibling instead of being illegally nested
 * inside the anchor. z-index 1 keeps the overlay under the save control (2).
 */
.nsft-rental { position: relative; }
.nsft-rental__link { text-decoration: none; color: inherit; }
.nsft-rental__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.nsft-rental__link:hover { color: var(--nsft-gold-deep); }

.nsft-rental__media {
	position: relative;
	/*
	 * 3:2, not 4:3 — the photograph is the product on a rental marketplace, and
	 * the taller crop was giving the same card more furniture and less room.
	 */
	aspect-ratio: 3 / 2;
	background: var(--nsft-cream);
	overflow: hidden;
}
.nsft-rental__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s var(--nsft-ease);
}
.nsft-rental:hover .nsft-rental__media img { transform: scale(1.04); }

.nsft-rental__flags {
	position: absolute;
	top: var(--nsft-s3);
	left: var(--nsft-s3);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsft-s2);
}

/* "New" reads as information, not promotion — so white, not gold. */
.nsft-badge--new {
	background: var(--nsft-white);
	color: var(--nsft-navy);
	box-shadow: 0 1px 3px rgba(3, 27, 60, .18);
}

/* The heart. Sits above the stretched link so it stays independently clickable. */
.nsft-save {
	position: absolute;
	top: var(--nsft-s3);
	right: var(--nsft-s3);
	z-index: 2;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, .92);
	color: var(--nsft-navy);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 4px rgba(3, 27, 60, .18);
	transition: background-color .15s var(--nsft-ease), color .15s var(--nsft-ease),
	            transform .15s var(--nsft-ease);
}
/* Fill on the PATH, not the <svg> — a path's own fill attribute beats a fill
   inherited from its parent, so styling the svg alone left every heart solid. */
.nsft-save svg path { fill: none; }
.nsft-save:hover { transform: scale(1.08); color: var(--nsft-gold-deep); }
.nsft-save.is-saved { background: var(--nsft-gold); color: var(--nsft-navy); }
.nsft-save.is-saved svg path { fill: currentColor; }
.nsft-save[disabled] { opacity: .6; cursor: default; }
.nsft-rental__avail {
	position: absolute;
	bottom: var(--nsft-s3);
	left: var(--nsft-s3);
	z-index: 2;
	background: rgba(3, 27, 60, .82);
	color: #fff;
	font-size: var(--nsft-text-xs);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--nsft-radius-pill);
	backdrop-filter: blur(4px);
}

.nsft-rental__body { padding: var(--nsft-s5); }
.nsft-rental__price {
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-2xl);
	font-weight: 700;
	color: var(--nsft-navy);
	line-height: 1;
	margin: 0 0 var(--nsft-s2);
}
.nsft-rental__price span {
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-sm);
	font-weight: 500;
	color: var(--nsft-muted);
}
.nsft-rental__title { font-size: var(--nsft-text-lg); font-weight: 600; margin: 0 0 var(--nsft-s1); }
.nsft-rental__addr { font-size: var(--nsft-text-sm); color: var(--nsft-muted); margin: 0 0 var(--nsft-s4); }
.nsft-rental__specs {
	display: flex;
	gap: var(--nsft-s4);
	list-style: none;
	margin: 0;
	padding: var(--nsft-s3) 0 0;
	border-top: 1px solid var(--nsft-line);
	font-size: var(--nsft-text-sm);
}
.nsft-rental__specs b { color: var(--nsft-navy); font-weight: 700; }

/* Branded "no photo" placeholder. */
.nsft-photo-empty {
	width: 100%; height: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: var(--nsft-s2);
	background: var(--nsft-cream);
	color: color-mix(in srgb, var(--nsft-navy) 32%, transparent);
}
.nsft-photo-empty svg { width: 48px; height: 48px; }
.nsft-photo-empty span {
	font-size: var(--nsft-text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- filter bar ---------- */

.nsft-filters {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	padding: var(--nsft-s4);
	box-shadow: var(--nsft-shadow-sm);
}
.nsft-filters__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr .7fr .7fr auto;
	gap: var(--nsft-s3);
	align-items: end;
}
.nsft-filters__row--more { grid-template-columns: repeat(4, 1fr); margin-top: var(--nsft-s4); }
.nsft-filters__field label {
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nsft-muted);
	margin-bottom: var(--nsft-s2);
}
.nsft-filters__field input,
.nsft-filters__field select { padding: .62em .8em; font-size: var(--nsft-text-sm); }
.nsft-filters__range { display: flex; align-items: center; gap: var(--nsft-s2); }
.nsft-filters__range span { color: var(--nsft-muted); }
.nsft-filters__submit { height: 42px; white-space: nowrap; }

.nsft-filters__more { margin-top: var(--nsft-s4); }
.nsft-filters__more summary {
	cursor: pointer;
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: var(--nsft-navy);
	padding: var(--nsft-s2) 0;
	list-style: none;
}
.nsft-filters__more summary::-webkit-details-marker { display: none; }
.nsft-filters__more summary::before { content: "+ "; color: var(--nsft-gold-deep); font-weight: 700; }
.nsft-filters__more[open] summary::before { content: "– "; }

.nsft-filters__clear { margin: var(--nsft-s3) 0 0; font-size: var(--nsft-text-sm); }
.nsft-filters__clear a { color: var(--nsft-gold-deep); font-weight: 600; }

/* ---------- results head ---------- */

.nsft-results__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nsft-s4);
	flex-wrap: wrap;
	margin-bottom: var(--nsft-s5);
}
.nsft-results__count { margin: 0; font-size: var(--nsft-text-lg); color: var(--nsft-muted); }
.nsft-results__count b { color: var(--nsft-navy); font-weight: 700; }
.nsft-results__count span { font-size: var(--nsft-text-sm); }
.nsft-results__sort { display: flex; align-items: center; gap: var(--nsft-s3); }
.nsft-results__sort label { margin: 0; font-size: var(--nsft-text-sm); color: var(--nsft-muted); }
.nsft-results__sort select { width: auto; padding: .5em 2em .5em .8em; font-size: var(--nsft-text-sm); }
.nsft-results__sortlinks { list-style: none; display: flex; gap: var(--nsft-s3); margin: 0; padding: 0; font-size: var(--nsft-text-sm); }

.nsft-empty__title { margin-bottom: var(--nsft-s3); }
.nsft-row--center { justify-content: center; }

/* ---------- gallery ---------- */

.nsft-gallery { position: relative; background: var(--nsft-navy-deep); }
.nsft-gallery:focus-visible { outline: 3px solid var(--nsft-gold); outline-offset: -3px; }

.nsft-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.nsft-gallery__track::-webkit-scrollbar { display: none; }

.nsft-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	aspect-ratio: 3 / 2;
	max-height: 80vh;
	min-height: 340px;
}
.nsft-gallery__img { width: 100%; height: 100%; object-fit: cover; }

.nsft-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .92);
	border: 0;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	color: var(--nsft-navy);
	cursor: pointer;
	box-shadow: var(--nsft-shadow-sm);
	transition: background-color .15s var(--nsft-ease);
}
.nsft-gallery__nav:hover { background: #fff; }
.nsft-gallery__nav--prev { left: var(--nsft-s4); }
.nsft-gallery__nav--next { right: var(--nsft-s4); }

.nsft-gallery__count {
	position: absolute;
	bottom: var(--nsft-s4);
	right: var(--nsft-s4);
	margin: 0;
	padding: 5px 12px;
	background: rgba(3, 27, 60, .78);
	color: #fff;
	font-size: var(--nsft-text-xs);
	font-weight: 600;
	border-radius: var(--nsft-radius-pill);
	backdrop-filter: blur(4px);
}
.nsft-gallery__badge { position: absolute; top: var(--nsft-s4); left: var(--nsft-s4); }

/* ---------- single listing ---------- */

.nsft-listing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--nsft-s7);
	align-items: start;
}

.nsft-listing__head { margin-bottom: var(--nsft-s6); }
.nsft-listing__title { margin-bottom: var(--nsft-s2); }
.nsft-listing__addr { font-size: var(--nsft-text-lg); color: var(--nsft-muted); margin-bottom: var(--nsft-s5); }
.nsft-listing__addr-note { font-size: var(--nsft-text-sm); }

.nsft-listing__keyfacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsft-s6);
	list-style: none;
	margin: 0;
	padding: var(--nsft-s5) 0;
	border-block: 1px solid var(--nsft-line);
}
.nsft-listing__keyfacts b {
	display: block;
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-xl);
	color: var(--nsft-navy);
	line-height: 1.1;
}
.nsft-listing__keyfacts span { font-size: var(--nsft-text-xs); color: var(--nsft-muted); text-transform: uppercase; letter-spacing: .07em; }

.nsft-listing__block { margin-bottom: var(--nsft-s7); }
.nsft-listing__block h2 { font-size: var(--nsft-text-2xl); margin-bottom: var(--nsft-s4); }
.nsft-listing__subhead { font-size: var(--nsft-text-md); margin: var(--nsft-s5) 0 var(--nsft-s3); }

.nsft-speclist { margin: 0; }
.nsft-speclist__row {
	display: flex;
	justify-content: space-between;
	gap: var(--nsft-s4);
	padding: var(--nsft-s3) 0;
	border-bottom: 1px solid var(--nsft-line-soft);
}
.nsft-speclist dt { color: var(--nsft-muted); font-size: var(--nsft-text-sm); margin: 0; }
.nsft-speclist dd { margin: 0; font-weight: 600; color: var(--nsft-ink); font-size: var(--nsft-text-sm); text-align: right; }

.nsft-taglist { display: flex; flex-wrap: wrap; gap: var(--nsft-s2); list-style: none; margin: 0; padding: 0; }
.nsft-taglist li {
	padding: .35em .9em;
	background: var(--nsft-cream);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-pill);
	font-size: var(--nsft-text-sm);
	color: var(--nsft-ink);
}
.nsft-taglist--gold li { background: var(--nsft-gold-wash); border-color: color-mix(in srgb, var(--nsft-gold) 35%, transparent); color: var(--nsft-gold-deep); font-weight: 600; }

/* ---------- enquiry card ---------- */

.nsft-listing__aside { position: sticky; top: calc(var(--nsft-header-h) + var(--nsft-s4)); }

.nsft-enquire {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	padding: var(--nsft-s5);
	box-shadow: var(--nsft-shadow);
}
.nsft-enquire__price {
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-3xl);
	font-weight: 700;
	color: var(--nsft-navy);
	line-height: 1;
	margin: 0 0 var(--nsft-s4);
}
.nsft-enquire__price span { font-family: var(--nsft-font-body); font-size: var(--nsft-text-sm); font-weight: 500; color: var(--nsft-muted); }

.nsft-enquire__costs { margin: 0 0 var(--nsft-s5); }
.nsft-enquire__costs > div {
	display: flex;
	justify-content: space-between;
	padding: var(--nsft-s2) 0;
	border-bottom: 1px solid var(--nsft-line-soft);
	font-size: var(--nsft-text-sm);
}
.nsft-enquire__costs dt { color: var(--nsft-muted); margin: 0; }
.nsft-enquire__costs dd { margin: 0; font-weight: 600; color: var(--nsft-ink); }

.nsft-enquire .nsft-btn + .nsft-btn { margin-top: var(--nsft-s3); }
.nsft-enquire__note { margin: var(--nsft-s3) 0 0; font-size: var(--nsft-text-xs); color: var(--nsft-muted); text-align: center; }

.nsft-note {
	padding: var(--nsft-s3) var(--nsft-s4);
	border-radius: var(--nsft-radius);
	font-size: var(--nsft-text-sm);
	line-height: 1.55;
}
.nsft-note--sm { font-size: var(--nsft-text-xs); color: var(--nsft-muted); padding-inline: 0; }
.nsft-note--warn {
	margin-top: var(--nsft-s5);
	background: var(--nsft-gold-wash);
	border: 1px solid color-mix(in srgb, var(--nsft-gold) 32%, transparent);
	color: var(--nsft-gold-deep);
	font-size: var(--nsft-text-xs);
}
.nsft-note--warn strong { display: block; margin-bottom: 2px; }

.nsft-listing__report { margin-top: var(--nsft-s4); text-align: center; font-size: var(--nsft-text-xs); }
.nsft-listing__report a { color: var(--nsft-muted); }

/*
 * --slim tightens the padding on the dashboard screens only. It deliberately
 * does NOT change the 45vh height — the strip is the same size sitewide.
 */
.nsft-pagehead--slim { padding-block: var(--nsft-s7); }

/* ==========================================================================
   9c. Homepage
   ========================================================================== */

.nsft-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* 72vh — tall enough to feel like a hero, short enough that the search bar
	   and the first section are reachable without scrolling on a laptop. */
	min-height: 72vh;
	padding-top: calc(var(--nsft-header-h) + var(--nsft-s7));
	padding-bottom: var(--nsft-s8);
	background: var(--nsft-navy);
	color: #fff;
	overflow: hidden;
}
/* Subtle architectural texture when no hero photo has been uploaded. Replaced
   entirely by the real <img> once the client adds one. */
.nsft-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(192, 148, 53, .16) 0%, transparent 58%),
		repeating-linear-gradient(58deg, var(--nsft-navy) 0 70px, var(--nsft-navy-soft) 70px 140px);
	opacity: .9;
}
.nsft-hero__media { position: absolute; inset: 0; }
.nsft-hero__img { width: 100%; height: 100%; object-fit: cover; }

/*
 * ⚠ THE SCRIM MUST LIVE ON .nsft-hero__media, NOT ON .nsft-hero::before.
 *
 * Both `::before` and `.nsft-hero__media` are absolutely positioned with no
 * z-index, in the same stacking context. `::before` renders as the hero's first
 * child, so the media div — a real element after it — paints ON TOP and hid the
 * overlay completely. The scrim looked correct in the stylesheet and did
 * nothing on screen the moment a photo was uploaded.
 *
 * Putting it on the media's own ::after guarantees it paints above the <img>
 * (child order) and below .nsft-hero__inner (z-index 2).
 */
.nsft-hero--photo .nsft-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		/*
		 * 1. Behind the menu. The header is transparent over the hero, so the
		 *    logo and nav have nothing but the photo behind them. This band is
		 *    separate from the diagonal below so the header stays legible even
		 *    where the diagonal has already faded out.
		 */
		linear-gradient(to bottom,
			rgba(3, 27, 60, .80) 0,
			rgba(3, 27, 60, .52) calc(var(--nsft-header-h) * .75),
			rgba(3, 27, 60, 0) calc(var(--nsft-header-h) + 4rem)),
		/*
		 * 2. The main diagonal, top-left → bottom-right. Heaviest under the
		 *    headline and lead, clearing toward the bottom-right corner so the
		 *    photograph is actually visible there rather than a flat navy wash.
		 */
		linear-gradient(to bottom right,
			rgba(3, 27, 60, .94) 0%,
			rgba(3, 27, 60, .82) 26%,
			rgba(3, 27, 60, .58) 52%,
			rgba(3, 27, 60, .28) 76%,
			rgba(3, 27, 60, .10) 100%);
}

/* Keep the navy texture for the no-photo case only. */
.nsft-hero--photo::before { display: none; }

.nsft-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--nsft-s6); }
.nsft-hero__title { color: #fff; max-width: 17ch; margin-bottom: var(--nsft-s4); }
.nsft-hero__lead {
	max-width: 54ch;
	margin: 0;
	font-size: var(--nsft-text-xl);
	color: rgba(255, 255, 255, .82);
}

/*
 * The search bar straddles the hero's lower edge.
 *
 * ⚠ It is a SIBLING of .nsft-hero, not a child. The hero needs
 * `overflow: hidden` to clip its background texture, and that clipped the
 * search bar clean off on the first build of this page. Do not move it inside.
 */

/* ---------- value props ---------- */

.nsft-promise__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nsft-s6);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nsft-promise__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: var(--nsft-s3);
	border-radius: var(--nsft-radius);
	background: var(--nsft-gold-wash);
	color: var(--nsft-gold-deep);
}
.nsft-promise__icon svg { width: 24px; height: 24px; }
.nsft-promise__title { font-size: var(--nsft-text-md); margin-bottom: var(--nsft-s2); }
.nsft-promise__text { font-size: var(--nsft-text-sm); color: var(--nsft-muted); margin: 0; }

/* ---------- section head variants ---------- */

.nsft-sectionhead--split {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--nsft-s5);
	max-width: none;
}

/* ---------- cities ---------- */

.nsft-cities {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--nsft-s4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nsft-city {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--nsft-s4);
	padding: var(--nsft-s4) var(--nsft-s5);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	text-decoration: none;
	transition: border-color .16s var(--nsft-ease), box-shadow .16s var(--nsft-ease), transform .16s var(--nsft-ease);
}
.nsft-city:hover { border-color: var(--nsft-gold); box-shadow: var(--nsft-shadow-sm); transform: translateY(-2px); }
.nsft-city__name { font-weight: 600; color: var(--nsft-navy); }
.nsft-city__count { font-size: var(--nsft-text-xs); color: var(--nsft-muted); }
/* Coming-soon market: shown but not a link — a dashed, muted, non-interactive tile. */
.nsft-city--soon {
	cursor: default;
	background: var(--nsft-cream);
	border-style: dashed;
}
.nsft-city--soon:hover { border-color: var(--nsft-line); box-shadow: none; transform: none; }
.nsft-city--soon .nsft-city__name { color: var(--nsft-muted); }
.nsft-city--soon .nsft-city__pin { opacity: .55; }
.nsft-city__badge {
	align-self: flex-start;
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--nsft-gold-deep);
	background: var(--nsft-gold-wash);
	border-radius: 999px;
	padding: 1px var(--nsft-s2);
}

/* ---------- renters / landlords split ---------- */

.nsft-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nsft-s6); }
.nsft-split__col {
	padding: var(--nsft-s7);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-xl);
}
.nsft-split__col--gold { background: var(--nsft-navy); border-color: var(--nsft-navy); color: rgba(255, 255, 255, .82); }
.nsft-split__col--gold h2 { color: #fff; }
.nsft-split__col--gold .nsft-eyebrow { color: var(--nsft-gold-bright); }
.nsft-split__col h2 { font-size: var(--nsft-text-2xl); }
.nsft-split__col > p { margin-bottom: var(--nsft-s5); }

.nsft-ticks { list-style: none; margin: 0 0 var(--nsft-s6); padding: 0; }
.nsft-ticks li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--nsft-s3);
	font-size: var(--nsft-text-sm);
}
.nsft-ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: 9px; height: 5px;
	border-left: 2px solid var(--nsft-gold);
	border-bottom: 2px solid var(--nsft-gold);
	transform: rotate(-45deg);
}
.nsft-split__col--gold .nsft-ticks li::before { border-color: var(--nsft-gold-bright); }

/* ---------- resource cards ---------- */

.nsft-card--plain .nsft-card__body { padding: var(--nsft-s6); }
.nsft-card__more {
	display: inline-block;
	margin-top: var(--nsft-s4);
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: var(--nsft-gold-deep);
}

/* ---------- founder ---------- */

.nsft-founder .nsft-eyebrow { color: var(--nsft-gold-bright); }
.nsft-founder__quote {
	margin: 0 0 var(--nsft-s4);
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-2xl);
	line-height: 1.45;
	color: #fff;
}
.nsft-founder__attr {
	margin-bottom: var(--nsft-s6);
	font-size: var(--nsft-text-sm);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

/* ---------- final CTA ---------- */

.nsft-cta { text-align: center; max-width: 640px; margin-inline: auto; }
.nsft-cta__title { margin-bottom: var(--nsft-s3); }
.nsft-cta__lead { font-size: var(--nsft-text-lg); color: var(--nsft-muted); margin-bottom: var(--nsft-s6); }

/* ==========================================================================
   9d. Accounts — auth, wizard, dashboard
   ========================================================================== */

/* ---------- shared form furniture ---------- */

.nsft-field { margin-bottom: var(--nsft-s4); }
.nsft-field__hint { margin: var(--nsft-s2) 0 0; font-size: var(--nsft-text-xs); color: var(--nsft-muted); }
.nsft-field--check label { display: flex; gap: var(--nsft-s3); align-items: flex-start; font-weight: 400; font-size: var(--nsft-text-sm); }
.nsft-field--check input { width: auto; margin-top: .2em; flex-shrink: 0; }

.nsft-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nsft-s4); }
.nsft-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nsft-s4); }

.nsft-form__msg { margin: var(--nsft-s4) 0 0; font-size: var(--nsft-text-sm); min-height: 1.2em; }
.nsft-form__msg.is-error { color: var(--nsft-error); font-weight: 600; }
.nsft-form__msg.is-ok { color: var(--nsft-ok); font-weight: 600; }

.nsft-checkgrid {
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	padding: var(--nsft-s4);
	margin: 0 0 var(--nsft-s4);
}
.nsft-checkgrid legend { padding-inline: var(--nsft-s2); font-size: var(--nsft-text-sm); font-weight: 600; color: var(--nsft-navy); }
.nsft-checkgrid label {
	display: inline-flex;
	align-items: center;
	gap: var(--nsft-s2);
	width: calc(50% - var(--nsft-s3));
	margin-bottom: var(--nsft-s2);
	font-weight: 400;
	font-size: var(--nsft-text-sm);
}
.nsft-checkgrid input { width: auto; }

.nsft-linkbtn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--nsft-muted);
	font-size: var(--nsft-text-xs);
	text-decoration: underline;
	cursor: pointer;
}
.nsft-linkbtn:hover { color: var(--nsft-error); }

/* ---------- auth pages ---------- */

.nsft-authpage { background: var(--nsft-bg-soft); }
.nsft-auth { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: var(--nsft-s7); align-items: start; }
.nsft-auth--single { grid-template-columns: minmax(0, 520px); justify-content: center; }

.nsft-auth__form {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-xl);
	padding: var(--nsft-s7);
	box-shadow: var(--nsft-shadow);
}
.nsft-auth__title { font-size: var(--nsft-text-2xl); margin-bottom: var(--nsft-s2); }
.nsft-auth__lead { color: var(--nsft-muted); margin-bottom: var(--nsft-s6); }
.nsft-auth__alt { margin: var(--nsft-s4) 0 0; font-size: var(--nsft-text-sm); text-align: center; color: var(--nsft-muted); }
.nsft-auth__aside { padding-top: var(--nsft-s5); }
.nsft-auth__aside h2 { font-size: var(--nsft-text-xl); margin-bottom: var(--nsft-s4); }

/* ---------- role picker ---------- */

.nsft-rolepick { border: 0; padding: 0; margin: 0 0 var(--nsft-s5); }
.nsft-rolepick legend { padding: 0; margin-bottom: var(--nsft-s3); font-size: var(--nsft-text-sm); font-weight: 600; color: var(--nsft-ink); }
.nsft-rolepick__opt {
	display: flex;
	gap: var(--nsft-s3);
	align-items: flex-start;
	padding: var(--nsft-s4);
	margin-bottom: var(--nsft-s3);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	cursor: pointer;
	font-weight: 400;
	transition: border-color .15s var(--nsft-ease), background-color .15s var(--nsft-ease);
}
.nsft-rolepick__opt:hover { border-color: var(--nsft-gold); }
.nsft-rolepick__opt input { width: auto; margin-top: .25em; flex-shrink: 0; }
.nsft-rolepick__opt:has(input:checked) { border-color: var(--nsft-gold); background: var(--nsft-gold-wash); }
.nsft-rolepick__body { display: flex; flex-direction: column; gap: 2px; }
.nsft-rolepick__label { font-weight: 600; color: var(--nsft-navy); }
.nsft-rolepick__note { font-size: var(--nsft-text-xs); color: var(--nsft-muted); }

/* ---------- wizard ---------- */

/*
 * The wizard reads as a raised card rather than bare fields on the page — it is
 * the one place on the site where the visitor is doing sustained work, and the
 * card edge is what tells them where that work starts and ends.
 */
.nsft-wizard {
	background: #fff;
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	box-shadow: var(--nsft-shadow-lg);
	padding: var(--nsft-s7);
}

.nsft-wizard__fh { margin-bottom: var(--nsft-s6); }

.nsft-wizard__steps {
	display: flex;
	gap: var(--nsft-s2);
	list-style: none;
	margin: 0 0 var(--nsft-s6);
	padding: 0;
	counter-reset: step;
}
.nsft-wizard__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--nsft-s2);
	padding-top: var(--nsft-s3);
	border-top: 3px solid var(--nsft-line);
	cursor: pointer;
	transition: border-color .2s var(--nsft-ease);
}
.nsft-wizard__step.is-active { border-top-color: var(--nsft-gold); }
.nsft-wizard__num {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--nsft-line);
	color: var(--nsft-muted);
	font-size: var(--nsft-text-xs);
	font-weight: 700;
}
.nsft-wizard__step.is-active .nsft-wizard__num { background: var(--nsft-gold); color: var(--nsft-navy); }
.nsft-wizard__label { font-size: var(--nsft-text-xs); font-weight: 600; color: var(--nsft-muted); }
.nsft-wizard__step.is-active .nsft-wizard__label { color: var(--nsft-navy); }

.nsft-wizard__panel { display: none; }
.nsft-wizard__panel.is-active { display: block; }

.nsft-wizard__nav {
	display: flex;
	gap: var(--nsft-s3);
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--nsft-s6);
	padding-top: var(--nsft-s5);
	border-top: 1px solid var(--nsft-line);
}
.nsft-wizard__nav [data-nsft-next],
.nsft-wizard__nav [data-nsft-submit] { margin-left: auto; }

/* ---------- uploader ---------- */

.nsft-uploader__drop {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nsft-s7);
	border: 2px dashed var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	background: var(--nsft-cream);
	color: var(--nsft-navy);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s var(--nsft-ease);
}
.nsft-uploader__drop:hover { border-color: var(--nsft-gold); }
.nsft-uploader__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--nsft-s3);
	list-style: none;
	margin: var(--nsft-s4) 0 0;
	padding: 0;
}
.nsft-uploader__list li { position: relative; border-radius: var(--nsft-radius); overflow: hidden; }
.nsft-uploader__list img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.nsft-uploader__del {
	position: absolute;
	top: 4px; right: 4px;
	width: 26px; height: 26px;
	border: 0; border-radius: 50%;
	background: rgba(3, 27, 60, .82);
	color: #fff;
	font-size: 17px; line-height: 1;
	cursor: pointer;
}
.nsft-uploader__msg { margin: var(--nsft-s3) 0 0; font-size: var(--nsft-text-sm); min-height: 1.2em; }
.nsft-uploader__msg.is-error { color: var(--nsft-error); font-weight: 600; }

/* ---------- upsell ---------- */

.nsft-upsell {
	padding: var(--nsft-s6);
	margin-bottom: var(--nsft-s5);
	background: var(--nsft-gold-wash);
	border: 1px solid color-mix(in srgb, var(--nsft-gold) 32%, transparent);
	border-radius: var(--nsft-radius-lg);
}
.nsft-upsell--lg { padding: var(--nsft-s8) var(--nsft-s7); text-align: center; }
.nsft-upsell h2, .nsft-upsell h3 { margin-bottom: var(--nsft-s3); }
.nsft-upsell p { margin-bottom: var(--nsft-s5); color: var(--nsft-body); }
.nsft-upsell__alt { margin: var(--nsft-s4) 0 0; font-size: var(--nsft-text-sm); }

/* ---------- dashboard ---------- */

.nsft-dash__block { margin-bottom: var(--nsft-s8); }
.nsft-dash__signout { margin-top: var(--nsft-s7); font-size: var(--nsft-text-sm); }

.nsft-mylist { list-style: none; margin: 0; padding: 0; }
.nsft-mylist__item {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: var(--nsft-s5);
	align-items: center;
	padding: var(--nsft-s4);
	margin-bottom: var(--nsft-s3);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
}
.nsft-mylist__media { border-radius: var(--nsft-radius); overflow: hidden; aspect-ratio: 4/3; }
.nsft-mylist__media img { width: 100%; height: 100%; object-fit: cover; }
.nsft-mylist__title { font-size: var(--nsft-text-lg); margin-bottom: var(--nsft-s2); }
.nsft-mylist__meta { margin: 0; font-size: var(--nsft-text-sm); color: var(--nsft-muted); }
.nsft-mylist__note { margin: var(--nsft-s2) 0 0; font-size: var(--nsft-text-xs); color: var(--nsft-muted); }
.nsft-mylist__actions { display: flex; gap: var(--nsft-s2); flex-wrap: wrap; justify-content: flex-end; }
.nsft-mylist__msg { grid-column: 1 / -1; margin: 0; font-size: var(--nsft-text-sm); }
.nsft-mylist__msg.is-ok { color: var(--nsft-ok); }
.nsft-mylist__msg.is-error { color: var(--nsft-error); }

.nsft-status {
	display: inline-block;
	padding: .15em .6em;
	border-radius: var(--nsft-radius-pill);
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.nsft-status--publish { background: #DCFCE7; color: #15803D; }
.nsft-status--pending { background: #FEF3C7; color: #B45309; }
.nsft-status--draft { background: var(--nsft-line-soft); color: var(--nsft-muted); }
.nsft-status--rented { background: var(--nsft-navy); color: #fff; }
.nsft-status--inactive { background: #FEE2E2; color: #B91C1C; }

.nsft-savedsearch { list-style: none; margin: 0; padding: 0; }
.nsft-savedsearch li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nsft-s4);
	padding: var(--nsft-s3) 0;
	border-bottom: 1px solid var(--nsft-line-soft);
}

/* ---------- threads ---------- */

.nsft-threads { list-style: none; margin: 0; padding: 0; }
.nsft-thread {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	margin-bottom: var(--nsft-s3);
	overflow: hidden;
}
.nsft-thread summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nsft-s4);
	padding: var(--nsft-s4) var(--nsft-s5);
	cursor: pointer;
	list-style: none;
}
.nsft-thread summary::-webkit-details-marker { display: none; }
.nsft-thread__title { font-weight: 600; color: var(--nsft-navy); }
.nsft-thread__meta { font-size: var(--nsft-text-xs); color: var(--nsft-muted); }
.nsft-thread__body { padding: 0 var(--nsft-s5) var(--nsft-s5); border-top: 1px solid var(--nsft-line-soft); }

.nsft-msg {
	max-width: 82%;
	padding: var(--nsft-s3) var(--nsft-s4);
	margin: var(--nsft-s4) 0;
	background: var(--nsft-cream);
	border-radius: var(--nsft-radius-lg);
}
.nsft-msg--mine { margin-left: auto; background: var(--nsft-gold-wash); }
.nsft-msg__who { margin: 0 0 2px; font-size: var(--nsft-text-xs); font-weight: 700; color: var(--nsft-navy); }
.nsft-msg__body { margin: 0; font-size: var(--nsft-text-sm); }
.nsft-msg__when { margin: 4px 0 0; font-size: var(--nsft-text-xs); color: var(--nsft-muted); }

.nsft-reply textarea { margin-bottom: var(--nsft-s3); }
.nsft-enquiry textarea { margin-bottom: var(--nsft-s3); }
.nsft-enquiry__msg { margin: var(--nsft-s3) 0 0; font-size: var(--nsft-text-xs); min-height: 1.1em; text-align: center; }
.nsft-enquiry__msg.is-error { color: var(--nsft-error); }
.nsft-enquiry__msg.is-ok { color: var(--nsft-ok); }

/* ==========================================================================
   10. Utilities
   ========================================================================== */

.nsft-center { text-align: center; }
.nsft-stack { display: grid; gap: var(--nsft-s4); }
.nsft-row { display: flex; gap: var(--nsft-s3); flex-wrap: wrap; align-items: center; }
.nsft-mt0 { margin-top: 0 !important; }
.nsft-mb0 { margin-bottom: 0 !important; }

.nsft-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--nsft-s1);
	padding: 0.25em 0.7em;
	border-radius: var(--nsft-radius-pill);
	font-size: var(--nsft-text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.nsft-badge--gold { background: var(--nsft-gold); color: var(--nsft-navy); }
.nsft-badge--navy { background: var(--nsft-navy); color: #fff; }
.nsft-badge--soft { background: var(--nsft-gold-wash); color: var(--nsft-gold-deep); }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.nsft-nav__list { gap: var(--nsft-s4); }
	.nsft-brand__tag { display: none; }
}

/* Nav collapses to the drawer. */
@media (max-width: 1100px) {
	/* Sidebar drops under the listing before the columns get too narrow to read. */
	.nsft-listing__layout { grid-template-columns: 1fr; gap: var(--nsft-s6); }
	.nsft-listing__aside { position: static; max-width: 460px; }
}

@media (max-width: 980px) {
	.nsft-nav { display: none; }
	.nsft-burger { display: flex; }
	.nsft-header__actions { margin-left: auto; }

	.nsft-footer__signup-inner { grid-template-columns: 1fr; }
	.nsft-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--nsft-s7) var(--nsft-s6); }

	/* The 7-column filter row cannot survive a tablet — reflow to pairs. */
	.nsft-filters__row { grid-template-columns: repeat(2, 1fr); }
	.nsft-filters__field--grow { grid-column: 1 / -1; }
	.nsft-filters__submit { grid-column: 1 / -1; }
	.nsft-filters__row--more { grid-template-columns: repeat(2, 1fr); }

	.nsft-promise__grid { grid-template-columns: repeat(2, 1fr); }
	.nsft-cities { grid-template-columns: repeat(2, 1fr); }
	.nsft-split { grid-template-columns: 1fr; }
	.nsft-sectionhead--split { flex-direction: column; align-items: flex-start; }
	.nsft-auth { grid-template-columns: 1fr; }
	.nsft-grid3 { grid-template-columns: 1fr 1fr; }

	/* Once the filter form is multiple rows tall, straddling stops working —
	   drop it below the hero instead of overlapping the section beneath. */
	.nsft-hero__inner { padding-bottom: var(--nsft-s6); }
}

@media (max-width: 700px) {
	:root { --nsft-gutter: 1rem; --nsft-header-h: 64px; }
	.nsft-section { padding-block: var(--nsft-s7); }
	.nsft-footer__grid { grid-template-columns: 1fr; }
	.nsft-footer__col--brand { max-width: none; }

	.nsft-filters__row { grid-template-columns: 1fr; }
	.nsft-filters__row--more { grid-template-columns: 1fr; }
	.nsft-rentalgrid { grid-template-columns: 1fr; }
	.nsft-promise__grid { grid-template-columns: 1fr; gap: var(--nsft-s5); }
	.nsft-cities { grid-template-columns: 1fr; }
	.nsft-split__col { padding: var(--nsft-s6) var(--nsft-s5); }
	.nsft-hero { padding-top: var(--nsft-s8); }
	.nsft-listing__keyfacts { gap: var(--nsft-s5); }
	.nsft-gallery__slide { aspect-ratio: 4 / 3; }

	.nsft-grid2, .nsft-grid3 { grid-template-columns: 1fr; }
	.nsft-auth__form { padding: var(--nsft-s5); }
	.nsft-checkgrid label { width: 100%; }
	.nsft-wizard__label { display: none; }
	.nsft-wizard__nav [data-nsft-next],
	.nsft-wizard__nav [data-nsft-submit] { margin-left: 0; width: 100%; }
	/* Three columns of listing row collapse to a stack, actions full-width. */
	.nsft-mylist__item { grid-template-columns: 88px 1fr; }
	.nsft-mylist__actions { grid-column: 1 / -1; justify-content: flex-start; }
	.nsft-gallery__nav { width: 40px; height: 40px; font-size: 24px; }
	.nsft-results__head { flex-direction: column; align-items: flex-start; }
}

/*
 * ⚠ Mobile header overflow — the fix OMREW learned the hard way.
 *
 * Logo + sign-in + CTA + burger has a min-content width around 440px, which
 * overflows a 375px phone and pushes the burger off-screen. Below 480px the
 * secondary header links are dropped — both are in the drawer anyway.
 * Do not re-add them here without re-measuring body.scrollWidth at 320px.
 */
@media (max-width: 480px) {
	.nsft-header__signin { display: none; }
	.nsft-header__cta,
	.nsft-header__account { display: none; }
	.nsft-brand__name { font-size: 1.35rem; }
	.nsft-brand__mark { width: 32px; height: 32px; }
	.nsft-brand__img { height: 38px; max-width: 200px; }
}

@media (max-width: 360px) {
	.nsft-brand__name { font-size: 1.2rem; }
	.nsft-brand__img { height: 34px; max-width: 176px; }
}

/* ==========================================================================
   12. Homepage — mockup-derived blocks
   ========================================================================== */

.nsft-hero__title { max-width: 18ch; margin-bottom: var(--nsft-s5); }
.nsft-hero__accent { display: block; color: var(--nsft-gold-bright); }

.nsft-hero__cta { display: flex; gap: var(--nsft-s3); flex-wrap: wrap; margin-top: var(--nsft-s6); }

.nsft-hero__stats {
	display: flex;
	gap: var(--nsft-s7);
	flex-wrap: wrap;
	list-style: none;
	margin: var(--nsft-s7) 0 0;
	padding: 0;
}
.nsft-hero__stats b {
	display: block;
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-2xl);
	font-weight: var(--nsft-weight-head);
	color: var(--nsft-gold-bright);
	line-height: 1.1;
}
.nsft-hero__stats span { font-size: var(--nsft-text-sm); color: rgba(255, 255, 255, .74); }

/* ---------- value props ---------- */

.nsft-promise__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--nsft-s5);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	transition: border-color .18s var(--nsft-ease), box-shadow .18s var(--nsft-ease), transform .18s var(--nsft-ease);
}
.nsft-promise__item:hover {
	border-color: transparent;
	box-shadow: var(--nsft-shadow);
	transform: translateY(-3px);
}
.nsft-promise__more {
	margin-top: auto;
	padding-top: var(--nsft-s4);
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: var(--nsft-gold-deep);
	text-decoration: none;
}
.nsft-promise__more:hover { color: var(--nsft-navy); }
.nsft-promise__more span { transition: transform .18s var(--nsft-ease); display: inline-block; }
.nsft-promise__item:hover .nsft-promise__more span { transform: translateX(3px); }

/* ---------- trust strip ---------- */

.nsft-trust {
	background: var(--nsft-navy);
	color: rgba(255, 255, 255, .82);
	padding-block: var(--nsft-s5);
}
.nsft-trust__title {
	margin: 0 0 var(--nsft-s4);
	text-align: center;
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: #fff;
}
.nsft-trust__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--nsft-s4) var(--nsft-s7);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nsft-trust__list li {
	display: inline-flex;
	align-items: center;
	gap: var(--nsft-s2);
	font-size: var(--nsft-text-sm);
}
.nsft-trust__list svg { width: 18px; height: 18px; color: var(--nsft-gold-bright); flex-shrink: 0; }

/* ==========================================================================
   13. Content pages — pricing, hubs, FAQ, legal, contact
   ========================================================================== */

/* ---------- pricing ---------- */

.nsft-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nsft-s5); align-items: start; max-width: 940px; margin-inline: auto; }
.nsft-plan {
	position: relative;
	padding: var(--nsft-s7);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-xl);
}
.nsft-plan--featured { border-color: var(--nsft-gold); box-shadow: var(--nsft-shadow); }
.nsft-plan__flag {
	position: absolute;
	top: calc(var(--nsft-s4) * -1);
	left: var(--nsft-s7);
}
.nsft-plan__name { font-size: var(--nsft-text-xl); margin-bottom: var(--nsft-s2); }
.nsft-plan__price {
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-4xl);
	font-weight: var(--nsft-weight-head);
	color: var(--nsft-navy);
	line-height: 1;
	margin: var(--nsft-s4) 0 var(--nsft-s2);
}
.nsft-plan__price span { font-family: var(--nsft-font-body); font-size: var(--nsft-text-md); font-weight: 500; color: var(--nsft-muted); white-space: nowrap; }
/* Landlord introductory free-trial pill — gold-deep text is the only AA-safe gold on a light ground. */
.nsft-plan__trial {
	display: inline-block;
	font-family: var(--nsft-font-body);
	font-size: var(--nsft-text-sm);
	font-weight: 700;
	color: var(--nsft-gold-deep);
	background: var(--nsft-gold-wash);
	border-radius: 999px;
	padding: var(--nsft-s1) var(--nsft-s3);
	margin-top: var(--nsft-s4);
}
.nsft-plan__trial + .nsft-plan__price { margin-top: var(--nsft-s2); }
.nsft-plan__blurb { color: var(--nsft-muted); font-size: var(--nsft-text-sm); margin-bottom: var(--nsft-s5); }
.nsft-plan .nsft-ticks { margin-bottom: var(--nsft-s6); }

.nsft-compare { width: 100%; border-collapse: collapse; margin-top: var(--nsft-s7); }
.nsft-compare th, .nsft-compare td { padding: var(--nsft-s3) var(--nsft-s4); border-bottom: 1px solid var(--nsft-line); text-align: left; font-size: var(--nsft-text-sm); }
.nsft-compare thead th { font-size: var(--nsft-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--nsft-muted); }
.nsft-compare td:not(:first-child), .nsft-compare th:not(:first-child) { text-align: center; width: 22%; }
.nsft-compare .yes { color: var(--nsft-ok); font-weight: 700; }
.nsft-compare .no { color: var(--nsft-muted); }

/* ---------- resource hubs ---------- */

.nsft-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--nsft-s5); }
.nsft-hub__item {
	display: flex;
	flex-direction: column;
	padding: var(--nsft-s6);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	transition: border-color .18s var(--nsft-ease), box-shadow .18s var(--nsft-ease), transform .18s var(--nsft-ease);
}
.nsft-hub__item:hover { border-color: transparent; box-shadow: var(--nsft-shadow); transform: translateY(-3px); }
.nsft-hub__num {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: var(--nsft-s4);
	border-radius: 50%;
	background: var(--nsft-gold-wash);
	color: var(--nsft-gold-deep);
	font-size: var(--nsft-text-sm);
	font-weight: 700;
}
.nsft-hub__item h3 { font-size: var(--nsft-text-lg); margin-bottom: var(--nsft-s2); }
.nsft-hub__item p { font-size: var(--nsft-text-sm); color: var(--nsft-body); margin: 0; }

/* ---------- steps ---------- */

/*
 * Process steps — a horizontal band of numbered cards.
 *
 * This was a plain indented <ol> in a narrow column: correct markup, but it
 * read as an unstyled list rather than a process, and the long measure made
 * four short steps look like four paragraphs. Laying them across gives the
 * sequence a shape you can take in at a glance.
 *
 * The connector rule is drawn per-item and hidden on the last one, so it can
 * never trail off the end of the row — and it is suppressed entirely once the
 * cards stack, where a horizontal line between them would be meaningless.
 */
.nsft-steps {
	counter-reset: nsft-step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--nsft-s5);
}

.nsft-steps li {
	position: relative;
	display: block;
	padding: var(--nsft-s6) var(--nsft-s5) var(--nsft-s5);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	box-shadow: var(--nsft-shadow-sm);
	transition: transform .18s var(--nsft-ease), box-shadow .18s var(--nsft-ease),
	            border-color .18s var(--nsft-ease);
}
.nsft-steps li:hover {
	transform: translateY(-4px);
	box-shadow: var(--nsft-shadow);
	border-color: var(--nsft-gold);
}

.nsft-steps li::before {
	counter-increment: nsft-step;
	content: counter(nsft-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--nsft-s4);
	border-radius: 50%;
	background: var(--nsft-navy);
	color: var(--nsft-gold-bright);
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-lg);
	font-weight: var(--nsft-weight-head);
	/* Sits above the connector rule rather than being crossed by it. */
	position: relative;
	z-index: 1;
}

/* The rule joining one step to the next. */
.nsft-steps li::after {
	content: "";
	position: absolute;
	top: calc(var(--nsft-s6) + 22px);
	left: calc(var(--nsft-s5) + 44px);
	right: calc(-1 * var(--nsft-s5) - 1px);
	height: 2px;
	background: linear-gradient(to right, var(--nsft-gold) 0%, var(--nsft-line) 100%);
}
.nsft-steps li:last-child::after { display: none; }

.nsft-steps h3 { font-size: var(--nsft-text-lg); margin-bottom: var(--nsft-s2); }
.nsft-steps p { margin: 0; font-size: var(--nsft-text-sm); color: var(--nsft-muted); }

/*
 * Stacked: no connector, and the number returns beside the heading so a phone
 * does not spend a third of each card on a circle.
 */
@media (max-width: 860px) {
	.nsft-steps { grid-template-columns: 1fr; gap: var(--nsft-s4); }
	.nsft-steps li { padding: var(--nsft-s5); }
	.nsft-steps li::after { display: none; }
	.nsft-steps li::before {
		width: 36px;
		height: 36px;
		margin-bottom: var(--nsft-s3);
		font-size: var(--nsft-text-md);
	}
}

/* ---------- FAQ ---------- */

.nsft-faq { max-width: 780px; margin-inline: auto; }
.nsft-faq__group { margin-bottom: var(--nsft-s7); }
.nsft-faq__group > h2 { font-size: var(--nsft-text-xl); margin-bottom: var(--nsft-s4); }
.nsft-faq__item {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	margin-bottom: var(--nsft-s3);
	overflow: hidden;
}
.nsft-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: var(--nsft-s4);
	padding: var(--nsft-s4) var(--nsft-s5);
	cursor: pointer;
	font-weight: 600;
	color: var(--nsft-navy);
	list-style: none;
}
.nsft-faq__item summary::-webkit-details-marker { display: none; }
.nsft-faq__item summary::after { content: "+"; color: var(--nsft-gold-deep); font-size: 1.3em; line-height: 1; flex-shrink: 0; }
.nsft-faq__item[open] summary::after { content: "–"; }
.nsft-faq__answer { padding: 0 var(--nsft-s5) var(--nsft-s5); font-size: var(--nsft-text-sm); }
.nsft-faq__answer p:last-child { margin-bottom: 0; }

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

.nsft-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: var(--nsft-s7); align-items: start; }
.nsft-contact__aside {
	padding: var(--nsft-s6);
	background: var(--nsft-cream);
	border-radius: var(--nsft-radius-lg);
}
.nsft-contact__aside h3 { font-size: var(--nsft-text-md); margin-bottom: var(--nsft-s2); }
.nsft-contact__aside p { font-size: var(--nsft-text-sm); color: var(--nsft-body); }
.nsft-contact__aside + .nsft-contact__aside { margin-top: var(--nsft-s4); }

/* ---------- legal / prose pages ---------- */

.nsft-legal { max-width: 760px; margin-inline: auto; }
.nsft-legal h2 { font-size: var(--nsft-text-xl); margin-top: var(--nsft-s7); }
.nsft-legal h2:first-child { margin-top: 0; }
.nsft-legal p, .nsft-legal li { font-size: var(--nsft-text-md); }
.nsft-legal ul { padding-left: 1.3em; }
.nsft-legal li { margin-bottom: var(--nsft-s2); }
.nsft-legal__updated { font-size: var(--nsft-text-sm); color: var(--nsft-muted); margin-bottom: var(--nsft-s6); }

@media (max-width: 980px) {
	.nsft-pricing { grid-template-columns: 1fr; }
	.nsft-contact { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.nsft-hero { min-height: 0; padding-top: calc(var(--nsft-header-h) + var(--nsft-s6)); }
	.nsft-hero__cta .nsft-btn { width: 100%; }
	/*
	 * On a phone the content is full width, so a corner-to-corner diagonal
	 * leaves the right-hand end of every line sitting on bare photo. Straighten
	 * it towards vertical — still lighter at the bottom, so the picture is not
	 * a flat wash, but no longer lighter on the side the text runs into.
	 */
	.nsft-hero--photo .nsft-hero__media::after {
		background:
			linear-gradient(to bottom,
				rgba(3, 27, 60, .82) 0,
				rgba(3, 27, 60, .55) calc(var(--nsft-header-h) * .75),
				rgba(3, 27, 60, 0) calc(var(--nsft-header-h) + 3rem)),
			linear-gradient(165deg,
				rgba(3, 27, 60, .92) 0%,
				rgba(3, 27, 60, .80) 45%,
				rgba(3, 27, 60, .52) 78%,
				rgba(3, 27, 60, .30) 100%);
	}
	.nsft-hero__stats { gap: var(--nsft-s5); }
	.nsft-trust__list { flex-direction: column; align-items: flex-start; gap: var(--nsft-s3); }
	.nsft-compare th, .nsft-compare td { padding: var(--nsft-s2); font-size: var(--nsft-text-xs); }
}

/* ==========================================================================
   14. Resources, downloads, compliance
   ========================================================================== */

.nsft-download {
	margin-top: var(--nsft-s7);
	padding: var(--nsft-s6);
	background: var(--nsft-gold-wash);
	border: 1px solid color-mix(in srgb, var(--nsft-gold) 32%, transparent);
	border-radius: var(--nsft-radius-lg);
}
.nsft-download__title { font-size: var(--nsft-text-lg); margin-bottom: var(--nsft-s3); }
.nsft-download__legal {
	margin: var(--nsft-s4) 0 0;
	font-size: var(--nsft-text-xs);
	line-height: 1.6;
	color: var(--nsft-gold-deep);
}

.nsft-resourcelist { list-style: none; margin: var(--nsft-s4) 0 0; padding: 0; }
.nsft-resourcelist li + li { margin-top: var(--nsft-s2); }
.nsft-resourcelist a {
	display: block;
	padding: var(--nsft-s4);
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius);
	text-decoration: none;
	transition: border-color .16s var(--nsft-ease), transform .16s var(--nsft-ease);
}
.nsft-resourcelist a:hover { border-color: var(--nsft-gold); transform: translateY(-2px); }
.nsft-resourcelist span { display: block; font-weight: 600; color: var(--nsft-navy); }
.nsft-resourcelist small { display: block; margin-top: 2px; font-size: var(--nsft-text-xs); color: var(--nsft-muted); }

.nsft-hub__item h3 a { text-decoration: none; color: inherit; }
.nsft-hub__item h3 a:hover { color: var(--nsft-gold-deep); }

/* ---------- honeypot ----------
   Off-screen rather than display:none, and aria-hidden + tabindex="-1" on the
   markup, so assistive tech never lands a user in a field they must not fill. */
.nsft-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- safety banner ---------- */

.nsft-safety {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: flex-start;
	gap: var(--nsft-s4);
	padding: var(--nsft-s4) var(--nsft-s5);
	background: var(--nsft-navy);
	color: rgba(255, 255, 255, .9);
	box-shadow: 0 -6px 24px rgba(3, 27, 60, .22);
	animation: nsft-safety-in .3s var(--nsft-ease);
}
.nsft-safety[hidden] { display: none; }
.nsft-safety p { margin: 0; font-size: var(--nsft-text-sm); line-height: 1.6; max-width: 100ch; }
.nsft-safety strong { color: var(--nsft-gold-bright); }
.nsft-safety__close {
	margin-left: auto;
	flex-shrink: 0;
	width: 32px; height: 32px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--nsft-radius-sm);
	color: #fff;
	font-size: 20px; line-height: 1;
	cursor: pointer;
}
.nsft-safety__close:hover { background: rgba(255, 255, 255, .12); }

@keyframes nsft-safety-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .nsft-safety { animation: none; } }

/* ---------- affiliate + sponsored (Phase 7 uses these) ---------- */

.nsft-affiliate, .nsft-sponsored {
	padding: var(--nsft-s5);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	background: var(--nsft-cream);
}
.nsft-affiliate__disclosure, .nsft-sponsored__label {
	margin: 0 0 var(--nsft-s3);
	font-size: var(--nsft-text-xs);
	color: var(--nsft-muted);
}
.nsft-sponsored__label {
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nsft-report { color: var(--nsft-muted); font-size: var(--nsft-text-xs); }

@media (max-width: 700px) {
	.nsft-safety { flex-direction: column; }
	.nsft-safety__close { position: absolute; top: var(--nsft-s3); right: var(--nsft-s3); margin: 0; }
	.nsft-safety p { padding-right: var(--nsft-s7); }
}

/* ==========================================================================
   15. Description writer
   ========================================================================== */

.nsft-writer {
	padding: var(--nsft-s4);
	margin-bottom: var(--nsft-s3);
	background: var(--nsft-gold-wash);
	border: 1px solid color-mix(in srgb, var(--nsft-gold) 30%, transparent);
	border-radius: var(--nsft-radius);
}
.nsft-writer__intro { margin: 0 0 var(--nsft-s3); font-size: var(--nsft-text-sm); color: var(--nsft-gold-deep); }
.nsft-writer__actions { display: flex; gap: var(--nsft-s2); flex-wrap: wrap; }
.nsft-writer__actions .nsft-btn { font-size: var(--nsft-text-xs); padding: .55em 1.1em; }
.nsft-writer__msg { margin: var(--nsft-s3) 0 0; font-size: var(--nsft-text-xs); min-height: 1.1em; }
.nsft-writer__msg.is-ok { color: var(--nsft-ok); }
.nsft-writer__msg.is-error { color: var(--nsft-error); }

@media (max-width: 700px) {
	.nsft-writer__actions .nsft-btn { flex: 1 1 calc(50% - var(--nsft-s2)); }
}

/* ==========================================================================
   12. Search tabs  (Browse Rentals / List Your Property)
   ==========================================================================
   Driven by :checked on two radio inputs — no JS, no hand-rolled ARIA tab
   widget, and arrow-key navigation comes free from the browser's own radio
   behaviour. With JS off, both panels are still in the DOM and the search form
   still submits, because the form is a plain GET.
   ========================================================================== */

.nsft-searchtabs { width: 100%; }

.nsft-searchtabs__strip { position: relative; }

/* Off-screen, not display:none — a hidden radio is unfocusable and the tabs
   would stop working with a keyboard entirely. */
.nsft-searchtabs__radio {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nsft-searchtabs__tab {
	display: inline-block;
	padding: var(--nsft-s3) var(--nsft-s5);
	border-radius: var(--nsft-radius) var(--nsft-radius) 0 0;
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .86);
	font-weight: 700;
	font-size: var(--nsft-text-sm);
	cursor: pointer;
	user-select: none;
	transition: background-color .15s var(--nsft-ease), color .15s var(--nsft-ease);
}
.nsft-searchtabs__tab:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* The checked tab joins the panel below it. */
.nsft-searchtabs__radio:checked + .nsft-searchtabs__tab {
	background: var(--nsft-white);
	color: var(--nsft-navy);
}
.nsft-searchtabs__radio:focus-visible + .nsft-searchtabs__tab {
	outline: 2px solid var(--nsft-gold);
	outline-offset: 2px;
}

.nsft-searchtabs__panels {
	background: var(--nsft-white);
	border-radius: 0 var(--nsft-radius-lg) var(--nsft-radius-lg) var(--nsft-radius-lg);
	box-shadow: var(--nsft-shadow-lg);
	padding: var(--nsft-s5);
}

.nsft-searchtabs__panel { display: none; }
/* Sibling order in the markup is: radio, label, radio, label, panels. So the
   panels are addressed from the radios via the shared .__panels parent. */
.nsft-searchtabs__radio:nth-of-type(1):checked ~ .nsft-searchtabs__panels .nsft-searchtabs__panel--rent,
.nsft-searchtabs__radio:nth-of-type(2):checked ~ .nsft-searchtabs__panels .nsft-searchtabs__panel--list {
	display: block;
}

/* Inside the tabs the filter bar supplies no card of its own. */
.nsft-searchtabs__panels .nsft-filters {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
}

.nsft-searchtabs__lead {
	margin: 0 0 var(--nsft-s4);
	font-size: var(--nsft-text-lg);
	color: var(--nsft-navy);
	font-weight: 600;
}
.nsft-searchtabs__actions { display: flex; flex-wrap: wrap; gap: var(--nsft-s3); }
.nsft-searchtabs__note {
	margin: var(--nsft-s4) 0 0;
	font-size: var(--nsft-text-sm);
	color: var(--nsft-muted);
}

/* On a light ground (the rentals archive) the unselected tabs need ink, not
   white-on-white. */
.nsft-searchtabs--light .nsft-searchtabs__tab {
	background: rgba(3, 27, 60, .06);
	color: var(--nsft-navy);
}
.nsft-searchtabs--light .nsft-searchtabs__tab:hover { background: rgba(3, 27, 60, .10); }
.nsft-searchtabs--light .nsft-searchtabs__radio:checked + .nsft-searchtabs__tab {
	background: var(--nsft-white);
	color: var(--nsft-navy);
}

@media (max-width: 700px) {
	.nsft-searchtabs__tab { padding: var(--nsft-s3) var(--nsft-s4); font-size: var(--nsft-text-xs); }
	.nsft-searchtabs__panels { padding: var(--nsft-s4); }
	.nsft-searchtabs__actions .nsft-btn { width: 100%; }
}


/* ==========================================================================
   13. Homepage hero  (HOMEPAGE ONLY)
   ==========================================================================
   Full-bleed photograph behind the whole section, with the navy scrim running
   LEFT → RIGHT: heaviest under the copy and search, clearing toward the right
   so the room stays visible. Interior pages keep the plain 40vh strip.

   ⚠ The scrim is on `.nsft-hero__media::after`, NOT `.nsft-hero::before`. Both
   are absolutely positioned in one stacking context with no z-index, and the
   media div is a real element after the pseudo — so it paints over anything put
   on ::before. Already fixed once; do not move it back.
   ========================================================================== */

.nsft-hero--home {
	position: relative;
	min-height: 0;
	padding-top: calc(var(--nsft-header-h) + var(--nsft-s7));
	padding-bottom: var(--nsft-s8);
}

.nsft-hero--home .nsft-hero__media { position: absolute; inset: 0; z-index: 0; }
.nsft-hero--home .nsft-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Hold the right-hand side of the frame, where the photo stays visible. */
	object-position: 70% 50%;
	display: block;
}

/*
 * The left→right scrim.
 *
 * Two layers: a horizontal gradient that carries the readability, and a soft
 * vertical wash so the header and the section edge do not sit on bare photo.
 * It clears well before the right edge — the point is that the room shows.
 */
.nsft-hero--home .nsft-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(3, 27, 60, .70) 0,
			rgba(3, 27, 60, .16) calc(var(--nsft-header-h) + 3rem),
			rgba(3, 27, 60, 0) calc(var(--nsft-header-h) + 8rem)),
		/*
		 * Stops are tuned to the 70% content column. The container is centred,
		 * so at 1440px the copy ends near 67% of the VIEWPORT — the scrim has to
		 * stay solid to about there and fall away after it, or the last words of
		 * every line sit on bare photo.
		 */
		linear-gradient(to right,
			rgba(3, 27, 60, .97) 0%,
			rgba(3, 27, 60, .95) 45%,
			rgba(3, 27, 60, .90) 62%,
			rgba(3, 27, 60, .62) 74%,
			rgba(3, 27, 60, .26) 86%,
			rgba(3, 27, 60, .06) 100%);
}

.nsft-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nsft-s7);
	align-items: center;
}

.nsft-hero__col { min-width: 0; }

.nsft-hero--home .nsft-hero__title { max-width: 16ch; }
.nsft-hero--home .nsft-hero__lead { max-width: 46ch; margin-bottom: var(--nsft-s6); }

/* Trust markers under the search. */
.nsft-hero__trust {
	list-style: none;
	margin: var(--nsft-s6) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsft-s3) var(--nsft-s6);
}
.nsft-hero__trust li {
	display: flex;
	align-items: center;
	gap: var(--nsft-s2);
	font-size: var(--nsft-text-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
}
.nsft-hero__trust svg { width: 18px; height: 18px; color: var(--nsft-gold-bright); flex-shrink: 0; }

@media (min-width: 981px) {
	/* Content occupies the left; the right column is intentionally empty so the
	   photograph reads through where the scrim has cleared. */
	/*
	 * 70 / 30 — client instruction. The right column is intentionally empty; it
	 * exists so the photograph reads through where the scrim has cleared.
	 */
	/*
	 * ⚠ gap: 0 and a `1fr` second track, NOT `70% 30%` with a gap. With a gap
	 * the two percentage tracks plus the gap exceed 100%, the browser shrinks
	 * them, and the content column measured 64% instead of the 70% asked for.
	 * The right track is empty spacing, so it takes the remainder.
	 */
	.nsft-hero--split .nsft-hero__grid {
		grid-template-columns: 70% 1fr;
		gap: 0;
	}
	/* 85vh — client instruction. Interior strips stay 40vh; the homepage is the
	   only route that gets this treatment. */
	.nsft-hero--home { min-height: 85vh; }
}

@media (max-width: 980px) {
	/*
	 * Stacked, so a left→right gradient would leave the end of every line on
	 * bare photo. Go vertical instead: dark at the top where the copy is.
	 */
	.nsft-hero--home .nsft-hero__media::after {
		background:
			linear-gradient(to bottom,
				rgba(3, 27, 60, .93) 0%,
				rgba(3, 27, 60, .90) 45%,
				rgba(3, 27, 60, .82) 75%,
				rgba(3, 27, 60, .72) 100%);
	}
	.nsft-hero--home .nsft-hero__img { object-position: 60% 50%; }
}

@media (max-width: 700px) {
	.nsft-hero--home { padding-top: calc(var(--nsft-header-h) + var(--nsft-s5)); }
	.nsft-hero__trust { gap: var(--nsft-s2) var(--nsft-s4); }
	.nsft-hero__trust li { font-size: var(--nsft-text-xs); }
}

/* ---------- Filters inside the hero's tab panel ----------
 *
 * The seven-column desktop grid is right for the full-width archive bar and
 * wrong for a hero column roughly half that wide — it squeezed every control
 * until the placeholders read "Enter ci", "An", "Any" and the labels broke over
 * two lines. Here the row wraps instead, with real minimum widths, so fields
 * drop to a second line rather than shrinking below legibility.
 *
 * ⚠ Scoped to --compact on purpose. Unscoped, these rules leaked onto the
 * archive's 7-column grid and pushed its Search button onto its own row.
 */
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsft-s3);
	align-items: end;
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field {
	flex: 1 1 150px;
	min-width: 130px;
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field--grow { flex: 2 1 240px; }
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field label { white-space: nowrap; }
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 700px) {
	.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field { flex: 1 1 100%; }
	.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit { width: 100%; margin-left: 0; }
}

/*
 * Price range needs more room than a plain field: it holds two inputs and a
 * dash. Without this the "Max" box collapsed and clipped its own placeholder,
 * and the extra pressure pushed Search onto a second row.
 */
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field--range {
	flex: 1.6 1 220px;
	min-width: 210px;
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__range input {
	min-width: 0;
	width: 100%;
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field--grow { flex: 2 1 200px; }
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field { flex: 1 1 140px; min-width: 120px; }

/* Let the button share the last row rather than claiming one of its own. */
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit {
	flex: 0 0 auto;
	margin-left: 0;
	align-self: end;
}

/* ---------- Landlord tab: quick start ----------
 * Three fields that carry into the wizard. Same field styling as the search
 * row so the two tabs feel like one control, not two designs.
 */
.nsft-quickstart { margin: 0; }
.nsft-quickstart__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsft-s3);
	align-items: end;
}
.nsft-quickstart__row .nsft-filters__field { flex: 1 1 160px; min-width: 140px; }
.nsft-quickstart__row .nsft-filters__submit { flex: 0 0 auto; align-self: end; }

/* The denial message sits above its buttons, so it needs bottom space. */
.nsft-searchtabs__note--top { margin: 0 0 var(--nsft-s5); }

@media (max-width: 700px) {
	.nsft-quickstart__row .nsft-filters__field { flex: 1 1 100%; }
	.nsft-quickstart__row .nsft-filters__submit { width: 100%; }
}


/* ---------- Featured strip: four across ----------
 * An explicit four-column track, not auto-fill: at the 340px minimum the
 * auto-fill grid settles on three at 1240px, and the client asked for four.
 * Steps down rather than letting a card fall below a usable photo width.
 */
.nsft-rentalgrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) {
	.nsft-rentalgrid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.nsft-rentalgrid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.nsft-rentalgrid--four { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Auth — log in and create account, side by side
   ==========================================================================
   Both /join/ and /sign-in/ render both panels, so a visitor can do either
   thing without a second page load. The two ROUTES still exist and are still
   distinct — plenty of code links to each — only the screen is shared.
   ========================================================================== */

.nsft-authduo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--nsft-s6);
	align-items: start;
}

.nsft-authduo__panel {
	background: var(--nsft-white);
	border: 1px solid var(--nsft-line);
	border-radius: var(--nsft-radius-lg);
	box-shadow: var(--nsft-shadow-sm);
	padding: var(--nsft-s7);
}

/*
 * The panel matching the route the visitor asked for leads: it comes first and
 * carries the raised treatment, so /sign-in/ still feels like signing in even
 * though registration is right beside it.
 */
.nsft-authduo--login .nsft-authduo__panel--login,
.nsft-authduo--register .nsft-authduo__panel--register {
	order: 1;
	border-color: var(--nsft-gold);
	box-shadow: var(--nsft-shadow);
}
.nsft-authduo--login .nsft-authduo__panel--register,
.nsft-authduo--register .nsft-authduo__panel--login {
	order: 2;
}

.nsft-authduo__ticks { margin-top: var(--nsft-s5); }
.nsft-authduo__safety { margin-top: var(--nsft-s6); }

@media (max-width: 720px) {
	.nsft-authduo { grid-template-columns: 1fr; gap: var(--nsft-s5); }
	.nsft-authduo__panel { padding: var(--nsft-s5); }
}

/* Founder name sits above the role when one has been supplied. */
.nsft-founder__name { display: block; color: #fff; font-size: var(--nsft-text-lg); margin-bottom: 2px; }

/* ==========================================================================
   15. Marketplace search — the hero's dominant interactive element
   ==========================================================================
   The search is the point of the page, so it is scaled up ~12% over the
   default filter bar and the submit matches the control height exactly. It
   competes with the photograph on SIZE rather than by darkening the image —
   the client asked for the right-hand side to stay visible.
   ========================================================================== */

.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field input,
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field select {
	padding: .78em .9em;
	font-size: var(--nsft-text-md);
	border-radius: var(--nsft-radius);
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__field label {
	font-size: var(--nsft-text-xs);
	margin-bottom: var(--nsft-s2);
	color: var(--nsft-navy);
}

/* Submit: same height as the inputs it sits beside, and unmistakably next. */
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit {
	height: auto;
	padding: .78em 1.9em;
	font-size: var(--nsft-text-md);
	font-weight: 700;
	border-radius: var(--nsft-radius);
}
.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(192, 148, 53, .38);
}

.nsft-searchtabs__panels { padding: var(--nsft-s6); }

/* ---------- Mode toggle: the active tab must be obvious ----------
 * Inactive tabs were translucent white on navy, which read as "slightly
 * dimmer" rather than "not selected". The active tab now joins the panel as a
 * continuous surface and the inactive one is clearly recessed.
 */
.nsft-searchtabs__tab {
	padding: var(--nsft-s3) var(--nsft-s6);
	font-size: var(--nsft-text-md);
	border: 1px solid transparent;
	border-bottom: 0;
	position: relative;
}
.nsft-searchtabs__radio:checked + .nsft-searchtabs__tab {
	background: var(--nsft-white);
	color: var(--nsft-navy);
	box-shadow: 0 -2px 10px rgba(3, 27, 60, .10);
}
/* Gold rule along the top of the selected tab — a second, non-colour cue. */
.nsft-searchtabs__radio:checked + .nsft-searchtabs__tab::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--nsft-gold);
	border-radius: 3px 3px 0 0;
}
.nsft-searchtabs__radio:not(:checked) + .nsft-searchtabs__tab {
	background: rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .74);
}
.nsft-searchtabs__radio:not(:checked) + .nsft-searchtabs__tab:hover {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}
.nsft-searchtabs--light .nsft-searchtabs__radio:not(:checked) + .nsft-searchtabs__tab {
	background: rgba(3, 27, 60, .07);
	color: var(--nsft-muted);
}

@media (max-width: 700px) {
	.nsft-searchtabs__panels { padding: var(--nsft-s4); }
	.nsft-searchtabs__tab { padding: var(--nsft-s3) var(--nsft-s4); font-size: var(--nsft-text-sm); }
	/* Full-width submit on a phone, per the brief. */
	.nsft-searchtabs__panels .nsft-filters--compact .nsft-filters__submit { width: 100%; }
}

/* ---------- Steps, editorial variant (homepage "How it works") ----------
 *
 * Replaces a card grid AND the first attempt at a connector band. The
 * connector version read thin: long hairline rules pulled the eye sideways
 * into empty space, and three short paragraphs sat in very wide columns.
 *
 * This is quieter and denser — a large gold numeral, a tight measure, and a
 * vertical rule between columns instead of a horizontal one between markers.
 * Vertical rules divide; horizontal ones imply a journey and then leave a gap
 * where the journey should be.
 */
.nsft-steps--lean {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	counter-reset: nsft-step;
	max-width: 1080px;
	margin-inline: auto;
}
.nsft-steps--lean li {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--nsft-line);
	box-shadow: none;
	border-radius: 0;
	padding: var(--nsft-s2) var(--nsft-s6);
	display: block;
}
.nsft-steps--lean li:first-child { border-left: 0; padding-left: 0; }
.nsft-steps--lean li:last-child { padding-right: 0; }
.nsft-steps--lean li:hover { transform: none; box-shadow: none; border-color: var(--nsft-line); }
.nsft-steps--lean li:first-child:hover { border-left: 0; }

/* The numeral carries the sequence — no circle, no connector. */
.nsft-steps--lean li::before {
	counter-increment: nsft-step;
	content: counter( nsft-step, decimal-leading-zero );
	display: block;
	width: auto;
	height: auto;
	margin-bottom: var(--nsft-s3);
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--nsft-gold-deep);
	font-family: var(--nsft-font-display);
	font-size: var(--nsft-text-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}
.nsft-steps--lean li::after { display: none; }

.nsft-steps--lean h3 {
	font-size: var(--nsft-text-xl);
	margin-bottom: var(--nsft-s2);
}
.nsft-steps--lean p {
	font-size: var(--nsft-text-md);
	max-width: 32ch;
	color: var(--nsft-muted);
}

@media (max-width: 860px) {
	.nsft-steps--lean { grid-template-columns: 1fr; gap: var(--nsft-s5); }
	.nsft-steps--lean li {
		border-left: 0;
		border-top: 1px solid var(--nsft-line);
		padding: var(--nsft-s5) 0 0;
	}
	.nsft-steps--lean li:first-child { border-top: 0; padding-top: 0; }
	.nsft-steps--lean p { max-width: none; }
}

/* ---------- City discovery tiles ----------
 * Was a grid of plain text links that read as a nav list rather than a
 * discovery feature. Now a pin, the city, an optional real count and an arrow
 * that moves on hover. No photography: we have none for these cities, and
 * decorative stock would be a licensing exposure on a live commercial site.
 * No fabricated counts — the number is omitted rather than invented.
 */
.nsft-city__pin {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--nsft-radius);
	background: var(--nsft-cream);
	color: var(--nsft-gold-deep);
	transition: background-color .18s var(--nsft-ease), color .18s var(--nsft-ease);
}
.nsft-city__pin svg { width: 22px; height: 22px; }
.nsft-city__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsft-city__name { font-size: var(--nsft-text-md); }
.nsft-city__go {
	margin-left: auto;
	color: var(--nsft-gold-deep);
	font-size: var(--nsft-text-lg);
	transition: transform .18s var(--nsft-ease);
}
.nsft-city:hover .nsft-city__go { transform: translateX(4px); }
.nsft-city:hover .nsft-city__pin { background: var(--nsft-gold); color: var(--nsft-navy); }

/* ---------- Renter / landlord split: equal weight ----------
 * The grid was always 50/50; the IMBALANCE was visual. The navy panel read as
 * the premium offering and the light one as the afterthought. The light panel
 * now carries the same gold accent and elevation, so neither audience looks
 * like the lesser option.
 *
 * ⚠ The BUTTONS stay gold/navy as the brief's button hierarchy specifies
 * (gold = List Your Property, navy = Browse Rentals). Parity comes from the
 * panels, not from making every CTA gold — that would flatten the hierarchy.
 */
.nsft-split__col { position: relative; overflow: hidden; }
.nsft-split__col::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--nsft-gold);
}
.nsft-split__col:not(.nsft-split__col--gold) { border-color: var(--nsft-line); }
.nsft-split__col:not(.nsft-split__col--gold) .nsft-eyebrow { color: var(--nsft-gold-deep); }

/* ---------- Resources: editorial layout ----------
 * One featured resource, two beside it — the brief asked for visual variation
 * rather than a third identical 3-up grid on the same page.
 */
@media (min-width: 861px) {
	.nsft-cardgrid--editorial {
		grid-template-columns: 1.35fr 1fr;
		grid-template-rows: auto auto;
		align-items: stretch;
	}
	.nsft-cardgrid--editorial > :first-child {
		grid-row: 1 / span 2;
		display: flex;
	}
	.nsft-cardgrid--editorial > :first-child .nsft-card__link { display: flex; width: 100%; }
	.nsft-cardgrid--editorial > :first-child .nsft-card__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.nsft-cardgrid--editorial > :first-child .nsft-card__title { font-size: var(--nsft-text-2xl); }
	.nsft-cardgrid--editorial > :first-child .nsft-card__excerpt { font-size: var(--nsft-text-lg); }
}

/* ---------- Footer: ~22% less vertical space, more readable ----------
 * The footer was the tallest block on the page and carried the smallest type.
 * Padding down a step; legal text up from xs to sm, since "do not use extremely
 * small font sizes" applies most to the text nobody can afford to misread.
 */
.nsft-footer__main { padding-block: var(--nsft-s7); }
.nsft-footer__signup { padding-block: var(--nsft-s6); }
.nsft-footer__list a,
.nsft-footer__blurb { font-size: var(--nsft-text-sm); }
.nsft-footer__legal { font-size: var(--nsft-text-sm); line-height: 1.6; }
.nsft-footer__signup-lead { font-size: var(--nsft-text-md); }

/* ==========================================================================
   16. Section rhythm  (§19)
   ==========================================================================
   Every section previously ran the same large-padding → centred title → cards
   → large-padding beat, which is what made the page read as a sequence of
   equally-weighted cards. Density now varies by what the section contains.
   ========================================================================== */

/* The inventory sections earn more room; the connective ones take less. */
.nsft-section--tight  { padding-block: var(--nsft-s7); }
.nsft-section--roomy  { padding-block: calc(var(--nsft-s8) * 1.25); }

/* Not every section head is centred any more — centring everything is what
   flattens hierarchy. Heads default to left; --center is opt-in. */
.nsft-sectionhead { margin-bottom: var(--nsft-s6); }
.nsft-sectionhead--center { text-align: center; margin-inline: auto; max-width: 60ch; }

/* ---------- §24 interaction: 150–250ms, restrained ---------- */
.nsft-city,
.nsft-card,
.nsft-rental,
.nsft-btn { transition-duration: .18s; }

/* ---------- §25 accessibility: visible focus everywhere ----------
 * A focus ring that only shows on some controls is worse than none, because
 * keyboard users cannot predict it.
 */
body:not(.wp-admin) a:focus-visible,
body:not(.wp-admin) button:focus-visible,
body:not(.wp-admin) input:focus-visible,
body:not(.wp-admin) select:focus-visible,
body:not(.wp-admin) textarea:focus-visible,
body:not(.wp-admin) summary:focus-visible,
body:not(.wp-admin) [tabindex]:focus-visible {
	outline: 3px solid var(--nsft-gold);
	outline-offset: 2px;
	border-radius: var(--nsft-radius-sm);
}

/* Minimum touch targets (§25 / §26). */
.nsft-save,
.nsft-drawer__close,
.nsft-gallery__nav { min-width: 44px; min-height: 44px; }

/* §9 — metadata separated by middots rather than crowded together. */
.nsft-rental__specs { display: flex; flex-wrap: wrap; gap: 0; }
.nsft-rental__specs li + li::before {
	content: "·";
	margin: 0 .5em;
	color: var(--nsft-line);
}
.nsft-rental__addr { font-size: var(--nsft-text-sm); }

/* ==========================================================================
   17. Header / navigation  (§2)
   ==========================================================================
   Readability, not restructuring. The links were 14px at weight 500 with 1.5rem
   gaps, which read as small and tight against a 17px body. Header height is
   unchanged — the brief asked to keep it compact.
   ========================================================================== */

.nsft-nav__list { gap: var(--nsft-s6); }
.nsft-nav__list a,
.nsft-nav .menu-item a {
	font-size: var(--nsft-text-md);
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
}
.nsft-header--solid .nsft-nav__list a,
.nsft-header--solid .nsft-nav .menu-item a { color: rgba(255, 255, 255, .92); }

/* Log in stays secondary to Sign Up — smaller and quieter, never a filled
   button. Making both prominent is what turns a marketplace header into a
   dashboard header. */
.nsft-header__signin {
	font-size: var(--nsft-text-sm);
	font-weight: 500;
	opacity: .88;
}
.nsft-header__signin:hover { opacity: 1; }

/* The one header action that is a button keeps its weight without growing. */
.nsft-header__inner .nsft-btn { font-size: var(--nsft-text-sm); }

@media (max-width: 1180px) {
	/* Reclaim the extra gap before the cluster starts wrapping. */
	.nsft-nav__list { gap: var(--nsft-s5); }
	.nsft-nav__list a,
	.nsft-nav .menu-item a { font-size: var(--nsft-text-sm); }
}

/* ---------- §16 newsletter: compact, and useful rather than a footer form ---- */
.nsft-footer__signup-inner { align-items: center; gap: var(--nsft-s6); }
.nsft-footer__signup-title { font-size: var(--nsft-text-xl); }

/* §25 — nav links to a 44px touch target without changing header height.
   They were 39px: fine for a mouse, under the minimum for a thumb. */
.nsft-nav__list a,
.nsft-nav .menu-item a {
	padding-block: var(--nsft-s3);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.nsft-header__signin { min-height: 44px; display: inline-flex; align-items: center; }

/* Every button clears 44px. Most sat at 41–42px — close enough to look right
   and short enough to miss with a thumb. */
.nsft-btn { min-height: 44px; }
.nsft-header__signin { padding-inline: var(--nsft-s2); }

/* The card links are the only control in their card, so they need the full
   target too. (Listing-card TITLE links look small to a probe but are stretched
   links — the real target is the whole card, so they are left alone.) */
.nsft-promise__more,
.nsft-card__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}