/**
 * Kemtek Homes — design system.
 * Oswald (display) + Manrope (body), cream/red/navy/gold, rounded cards and
 * pill controls, hairline borders — made fully responsive with fluid type.
 */

:root {
	--cream: #FAF8F4;
	--ink: #221F1C;
	--muted: #6B6560;
	--faint: #8A857D;
	--red: #C8202E;
	--red-dark: #9C1721;
	--navy: #1F3568;
	--pink: #FF8A93;
	--gold: #C9962E;
	--hair: rgba(28, 26, 24, 0.08);
	--line: rgba(28, 26, 24, 0.16);
	--display: 'Oswald', 'Arial Narrow', sans-serif;
	--sans: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--max: 1280px;
	--pad: 32px;
	--radius-card: 16px;
	--radius-pill: 999px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; }

input, select, textarea, button { font-family: inherit; font-size: inherit; }

input[type='range'] { accent-color: var(--red); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ------------------------------------------------------------------ Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 8vw, 100px) 0; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--navy); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --------------------------------------------------------------- Typography */
.eyebrow {
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--red); margin: 0;
}
.eyebrow.on-pink { color: var(--pink); }
.h-xl { font-size: clamp(34px, 6vw, 56px); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 20px; }
.h-lg { font-size: clamp(28px, 4.5vw, 42px); text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 16px; }
.h-md { font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; letter-spacing: -0.005em; margin: 0; }
.lead { font-size: clamp(15px, 2vw, 17px); line-height: 1.6; color: var(--muted); }
.divider-line { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 36px; }
.divider-line .rule { width: 44px; height: 2px; background: var(--gold); display: block; margin-top: 12px; flex-shrink: 0; }
.divider-line .text { margin: 0; }

/* ------------------------------------------------------------------ Buttons */
.btn {
	display: inline-block; font-weight: 700; letter-spacing: 0.02em;
	text-transform: uppercase; cursor: pointer; border: none; text-align: center;
	border-radius: var(--radius-pill);
	transition: background-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--red); color: #fff; padding: 14px 28px; font-size: 14.5px; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost {
	background: transparent; color: var(--navy);
	border: 1.5px solid rgba(31, 53, 104, 0.4); padding: 12px 24px; font-size: 14px;
}
.btn-ghost:hover { background: rgba(31, 53, 104, 0.06); color: var(--navy); }
.btn-inquire-unit { line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }
.btn-inquire-unit-name {
	display: block; text-transform: none; font-weight: 600; letter-spacing: normal;
	font-size: 12.5px; opacity: 0.75; margin-top: 2px;
}
.btn-navy { background: var(--navy); color: #fff; padding: 14px 28px; font-size: 14.5px; border: 1.5px solid var(--navy); }
.btn-navy:hover { background: #16264d; color: #fff; }
.btn-outline-light {
	background: transparent; color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.6); padding: 13px 26px; font-size: 14.5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-solid-light {
	background: #fff; color: var(--navy);
	border: 1.5px solid #fff; padding: 13px 26px; font-size: 14.5px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.btn-solid-light:hover { background: #f0ede6; color: var(--navy); }

/* ------------------------------------------------------------- Placeholders */
.img-ph {
	width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, #ece7df, #ece7df 12px, #e5dfd5 12px, #e5dfd5 24px);
	display: flex; align-items: center; justify-content: center;
	color: var(--faint); font-size: 13px; text-align: center; padding: 12px;
}

/* ------------------------------------------------------------------- Header */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(250, 248, 244, 0.94);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--hair);
	transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Keep the sticky header below the WP admin bar when logged in. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
.site-header .wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px; min-height: 84px; padding-top: 20px; padding-bottom: 20px;
}
.brand { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); text-transform: uppercase; }
/* Never cropped: the full logo is scaled to fit inside the header, whatever
   its aspect ratio. Height comes from Customize → Kemtek → Logo. */
.brand img { height: var(--logo-h-header, 64px); width: auto; max-width: min(58vw, 340px); object-fit: contain; transition: height .2s ease; }
/* Mark + name in type. The logo's own wordmark is white and disappears on the
   light header, so the name is set in the theme's display face instead — it
   takes the header's colour and therefore works on light and overlay alike. */
.brand-lockup { gap: 12px; }
/* Set in the nav's own face and letter-spacing, so the wordmark reads as part
   of the header rather than as a separate piece of branding. */
.brand-word { font-family: var(--sans); font-weight: 700; font-size: clamp(11px, 1vw, 13.5px); letter-spacing: 0.06em; line-height: 1; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.main-nav li { list-style: none; margin: 0; padding: 0; }
.main-nav a {
	padding: 10px 18px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--ink); }
.main-nav .current-menu-item > a,
.main-nav a[aria-current='page'] { color: var(--navy); font-weight: 700; border-bottom-color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: 10px; }
/* One line each: the header bar is a fixed height, so a wrapped label makes a
   button taller than the bar and throws the row out of alignment. */
.header-cta .btn { white-space: nowrap; flex-shrink: 0; }
.mobile-cta { display: none; }
.nav-toggle {
	display: none; background: none; border: none;
	padding: 4px; cursor: pointer; color: var(--navy); flex-shrink: 0;
}
.nav-toggle svg { width: 24px; height: 24px; display: block; }

/* Overlay mode: transparent/gradient over a hero, solid once scrolled. */
.site-header.is-overlay {
	position: fixed; top: 0; left: 0; right: 0;
	background: linear-gradient(180deg, rgba(15,13,12,0.55) 0%, rgba(15,13,12,0) 100%);
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.is-overlay.is-scrolled {
	background: rgba(250, 248, 244, 0.98);
	border-bottom-color: var(--hair);
	box-shadow: 0 4px 20px rgba(28, 26, 24, 0.08);
}
.site-header.is-overlay:not(.is-scrolled) .brand,
.site-header.is-overlay:not(.is-scrolled) .brand b { color: #fff; }
/* :not(.btn) keeps this off the Apply Now / Book a Viewing buttons that live
   inside .main-nav on mobile (in .mobile-cta) — they're <a> tags too, and
   without the exclusion this (plus its type selector) outranks any color
   those buttons try to set for themselves, in or out of overlay mode. */
.site-header.is-overlay:not(.is-scrolled) .main-nav a:not(.btn) { color: rgba(255, 255, 255, 0.92); }
.site-header.is-overlay:not(.is-scrolled) .main-nav .current-menu-item > a:not(.btn),
.site-header.is-overlay:not(.is-scrolled) .main-nav a[aria-current='page']:not(.btn) { color: #fff; }
.site-header.is-overlay:not(.is-scrolled) .btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.site-header.is-overlay:not(.is-scrolled) .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.site-header.is-overlay:not(.is-scrolled) .nav-toggle { color: #fff; }

/* --------------------------------------------------------------------- Hero */
.hero {
	position: relative; min-height: clamp(560px, 90vw, 720px); overflow: hidden;
	display: flex; align-items: flex-start;
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kept deliberately light — just enough to ground the text and the band's
   transition into the photo below. The photo itself should read at close to
   its true brightness; legibility comes from the text-shadow on the copy
   below instead of a heavy tint across the whole image. */
.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,9,8,0) 0%, rgba(10,9,8,0) 45%, rgba(10,9,8,0.32) 100%);
}
.hero-inner { position: relative; width: 100%; padding-top: clamp(110px, 18vw, 170px); padding-bottom: 160px; }
.hero-inner .col { max-width: 640px; }
.badge-line {
	display: inline-block; background: rgba(10,9,8,0.62); border: 1px solid rgba(255,255,255,0.45);
	border-radius: var(--radius-pill);
	color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 6px 16px; margin-bottom: 30px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.hero h1 { color: #fff; margin: 0 0 48px; text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.35); }
.hero p {
	color: rgba(255,255,255,0.92); font-size: clamp(15px, 2vw, 17px); line-height: 1.6; margin: 0 0 32px; max-width: 520px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.25);
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.hero-btns-mobile { display: none; }

/* Icon bar. Sits just after the hero/header in the markup (not inside it), so
   on mobile it simply flows below the photo. On desktop it's pulled up to
   straddle the bottom of the photo dead-centre via a negative margin — half
   the band's own rendered height (124px at the common wide-desktop width
   where it lays out as a single row), so it's split evenly instead of the
   old -96px pull, which covered ~77% of the band's height over the photo
   and left only a sliver below it.
   A `transform: translateY(-50%)` would center it more precisely at any
   height, but transforms don't shrink the box's reserved flow space — it
   leaves a phantom gap (~H/2) before the next section, so a tuned fixed
   value is used instead, matching how this rule worked before. */
.hero-band-wrap { position: relative; z-index: 2; margin-top: -62px; margin-bottom: 40px; padding: 0 var(--pad); }
.hero-band {
	background: var(--navy); border-radius: 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	padding: clamp(20px, 4vw, 26px) clamp(20px, 5vw, 36px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px;
}
.hero-band-item { display: flex; gap: 16px; align-items: flex-start; }
.hero-band-item svg { flex-shrink: 0; margin-top: 2px; stroke: var(--gold); }
.hero-band-item .t { font-family: var(--display); font-size: 16.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.hero-band-item .d { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }

/* -------------------------------------------------------- Section headings */
.section-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px; flex-wrap: wrap; margin-bottom: 44px;
}
.section-head h2 { color: var(--navy); margin-top: 10px; }
.section-head .link { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.section-head.center { display: block; text-align: center; max-width: 640px; margin: 0 auto 40px; }

/* -------------------------------------------------------------------- Cards */
.cards, .kemtek-grid-cards {
	display: grid; gap: 28px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card {
	background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card);
	overflow: hidden; color: inherit; display: flex; flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 12px 30px rgba(28,26,24,0.08); transform: translateY(-2px); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-badge {
	position: absolute; top: 14px; left: 14px; color: #fff;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; padding: 5px 12px;
}
.card-logo {
	position: absolute; top: 12px; right: 12px; background: #fff; border-radius: 8px;
	padding: 6px 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); display: flex; align-items: center;
}
.card-logo img { max-height: 30px; max-width: 96px; width: auto; height: auto; display: block; }
.card-body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.card-loc { font-size: 13px; color: var(--faint); margin-bottom: 6px; }
.card-title { font-size: 22px; color: var(--ink); margin: 0 0 10px; }
.card-tagline { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; flex: 1; }
.card-foot {
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1px solid var(--hair); padding-top: 16px;
}
.card-price { font-size: 15px; font-weight: 700; color: var(--navy); }
.card-beds { font-size: 13px; color: var(--faint); }

/* ------------------------------------------------------------ Budget picker */
.budget { background: var(--navy); color: #fff; }
.budget .grid {
	display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
.budget h2 { color: #fff; margin: 10px 0 14px; font-size: clamp(28px, 3.6vw, 34px); text-transform: uppercase; letter-spacing: -0.005em; }
.budget p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 34px; max-width: 440px; }
.budget-value { font-family: var(--display); font-size: clamp(38px, 8vw, 54px); font-weight: 700; margin-bottom: 16px; }
.range { width: 100%; max-width: 420px; cursor: pointer; }
.range-scale {
	display: flex; justify-content: space-between; max-width: 420px;
	font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); margin-top: 8px;
}
.match-count { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match {
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
	padding: 16px 18px; color: #fff; display: block;
}
.match:hover { background: rgba(255,255,255,0.12); color: #fff; }
.match .estate { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); margin-bottom: 5px; }
.match .unit { font-family: var(--display); font-size: 17px; font-weight: 600; }
.match .price { font-size: 13px; color: rgba(255,255,255,0.62); margin-top: 3px; }
.match-empty { grid-column: 1 / -1; font-size: 14px; color: rgba(255,255,255,0.6); }

/* --------------------------------------------------------------- Locations */
.loc-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.loc-tab {
	border: 1px solid rgba(28,26,24,0.2); background: #fff; color: var(--muted);
	padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; letter-spacing: 0.02em;
}
.loc-tab { border-radius: var(--radius-pill); }
.loc-tab[aria-selected='true'] { border-color: var(--navy); background: var(--navy); color: #fff; }
.loc-frame { position: relative; border: 1px solid rgba(28,26,24,0.1); border-radius: var(--radius-card); aspect-ratio: 16 / 7; min-height: 320px; overflow: hidden; }
.loc-frame iframe { width: 100%; height: 100%; border: 0; }
.loc-flag {
	position: absolute; top: 14px; left: 14px; background: var(--navy); color: #fff;
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; padding: 7px 14px; pointer-events: none;
}

/* Locations page: map-and-list explorer (one shared map instead of one per card). */
.loc-explorer { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: stretch; }
.loc-list {
	max-height: 540px; overflow-y: auto; background: #fff;
	border: 1px solid var(--hair); border-radius: var(--radius-card);
}
.loc-list .loc-row {
	all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px;
	width: 100%; padding: 16px 20px; border-bottom: 1px solid var(--hair);
	cursor: pointer; text-align: left; transition: background-color .15s ease;
}
.loc-list .loc-row:last-child { border-bottom: 0; }
.loc-list .loc-row:hover { background: var(--cream); }
.loc-list .loc-row:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.loc-list .loc-row[aria-selected='true'] { background: var(--navy); }
.loc-row-parish { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.loc-row[aria-selected='true'] .loc-row-parish { color: var(--pink); }
.loc-row-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); text-transform: uppercase; letter-spacing: -0.005em; }
.loc-row[aria-selected='true'] .loc-row-name { color: #fff; }
.loc-row-loc { font-size: 13px; color: var(--muted); }
.loc-row[aria-selected='true'] .loc-row-loc { color: rgba(255,255,255,0.72); }
.loc-row-pill { margin: 6px 0 0; align-self: flex-start; font-size: 10.5px; padding: 4px 11px; }

.loc-explorer-map { height: 540px; }
.loc-view-link { position: absolute; right: 16px; bottom: 16px; z-index: 2; }

/* Single development: compact map card + info panel (was a full-width, tall iframe). */
section.location-section { padding-top: clamp(28px, 4vw, 48px); }
.location-panel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: stretch; }
.loc-frame-compact { aspect-ratio: auto; height: 320px; min-height: 0; }
.location-info { background: var(--cream); border-radius: var(--radius-card); padding: 26px; display: flex; flex-direction: column; }
.location-parish { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.location-address { font-family: var(--display); font-size: 19px; color: var(--navy); text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 22px; }
.location-directions { align-self: flex-start; margin-top: auto; }

/* ----------------------------------------------------------------- CTA band */
.cta { background: var(--navy); color: #fff; }
.cta .wrap { padding: clamp(56px, 8vw, 80px) var(--pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 32px; }
.cta h2 { color: #fff; margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 32px); text-transform: uppercase; letter-spacing: -0.005em; }
.cta p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; max-width: 520px; }

/* ----------------------------------------------------- Single development */
/* Height comes from Customize → Kemtek → Page headers. The vh term keeps it
   from swallowing a short screen, and the px floor stops it collapsing. */
.dev-hero { position: relative; min-height: min(var(--header-h, 560px), max(320px, 78vh)); overflow: hidden; display: flex; align-items: flex-end; }
.dev-hero .hero-media, .dev-hero .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Which part of the photo survives the crop; per-page overrides come through
   an inline object-position on the img itself. */
.dev-hero .hero-media img { object-position: center center; }
.dev-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,18,16,0.8) 0%, rgba(20,18,16,0.15) 60%); }
.dev-hero .inner { position: relative; padding-bottom: clamp(70px, 10vw, 100px); }
.dev-hero h1 { color: #fff; margin: 0 0 8px; font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; letter-spacing: -0.005em; }
.dev-hero .loc { font-size: 16px; color: rgba(255,255,255,0.85); }

/* Prominent logo lockup shown between the hero and the Overview. */
.dev-logo-band { background: #fff; border-bottom: 1px solid var(--hair); padding: 30px 0; text-align: center; }
.dev-logo-band .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dev-logo-mark {
	width: 168px; height: 168px; border-radius: 50%; background: var(--cream); border: 1px solid var(--hair);
	display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(20,18,16,0.08);
	overflow: hidden; margin-top: -92px; position: relative; z-index: 2;
}
.dev-logo-mark img { max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain; display: block; }
.dev-logo-initials { font-family: var(--display); font-size: 48px; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; }
.dev-logo-tagline { margin: 0; font-size: 15px; color: var(--muted); max-width: 560px; }
.dev-amenity-strip { width: 100%; max-width: 900px; margin: -2px auto -15px; text-align: center; }
.dev-amenity-strip img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }

/* Page heroes that also carry an overlapping icon/info band (Contact, etc). */
/* No min-height of its own: it inherits the shared header height, so Contact
   matches About and Press. Only its alignment differs — the copy sits toward
   the top, leaving room for the office details card that overlaps the bottom. */
.dev-hero.contact-hero {
	align-items: flex-start;
	padding-top: clamp(70px, 12vw, 110px);
}
/* Centred, matching the Apply page: the badge sits over the heading rather
   than beside the office details card below. */
.dev-hero.contact-hero .inner { padding-bottom: 130px; text-align: center; }
.dev-hero.contact-hero .badge-line { display: inline-block; margin-bottom: 14px; }
.dev-hero.contact-hero .hero-band-item .t { font-size: 14.5px; }
.dev-hero.contact-hero .hero-band-item .d { font-size: 13.5px; }
.pill { display: inline-block; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-pill); padding: 5px 14px; margin-bottom: 14px; }

.dev-body { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 56px; }
.dev-body .overview { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.dev-body h2 { font-size: clamp(22px, 3vw, 26px); color: var(--navy); }

.unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.unit-card {
	border: 1px solid var(--hair); border-radius: var(--radius-card); overflow: hidden; background: #fff;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.unit-card:hover { box-shadow: 0 16px 34px rgba(20,18,16,0.1); transform: translateY(-2px); }
.unit-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; }
.unit-card-media .kemtek-embed { position: absolute; inset: 0; }
.unit-card-media .kemtek-embed iframe { width: 100%; height: 100%; }
.unit-play-btn {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
	background-color: rgba(20,18,16,0.35); background-size: cover; background-position: center;
	background-blend-mode: darken; display: flex; align-items: center; justify-content: center;
	transition: background-color 0.2s ease;
}
.unit-play-btn:hover { background-color: rgba(20,18,16,0.5); }
.unit-play-btn-plain { background-color: var(--navy); }
.unit-play-icon {
	width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink);
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.unit-card-body { padding: 20px; }
.unit-card-body .u-type { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 6px; text-transform: uppercase; letter-spacing: -0.005em; }
.unit-card-body .u-tagline { font-size: 13.5px; font-weight: 600; color: var(--red); margin: 0 0 8px; line-height: 1.4; }
.unit-card-body .u-meta { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.unit-card-body .u-price { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.unit-card-cta { width: 100%; text-align: center; }

/* Unit cards as links through to a model's own page. */
a.unit-card-link { display: block; color: inherit; }
a.unit-card-link:hover .u-type { color: var(--red); }
.unit-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-photo-count {
	position: absolute; right: 10px; bottom: 10px; background: rgba(20,18,16,0.72); color: #fff;
	font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
.unit-play-icon-badge {
	position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
	background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.unit-card-cta-text { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); transition: color .15s ease; }
.unit-cards-compact .unit-card-body { padding: 14px 16px; }
.unit-cards-compact .u-type { font-size: 15.5px; margin-bottom: 4px; }

/* Single model ("unit type") detail page. */
.unit-breadcrumb { margin-bottom: 22px; }
.unit-breadcrumb-link {
	text-transform: none; letter-spacing: normal; font-size: 14.5px;
	transition: background-color .15s ease, border-color .15s ease;
}
.unit-breadcrumb-link:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.45); color: #fff; }
.unit-hero-title { font-size: clamp(38px, 6vw, 60px); }
.unit-hero-tagline { color: rgba(255,255,255,0.92); font-family: var(--display); font-size: clamp(17px, 2.4vw, 24px); font-weight: 500; margin: 10px 0 0; }
.unit-hero-meta { color: rgba(255,255,255,0.9); font-size: clamp(16px, 2vw, 18.5px); font-weight: 600; margin: 12px 0 0; }
.unit-description { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 44px); }
.unit-description p { font-size: 16.5px; line-height: 1.75; color: var(--ink); margin: 0 0 14px; }
.unit-description p:last-child { margin-bottom: 0; }
.unit-siblings-head { margin-top: 72px; }

.unit-detail-video { margin-bottom: 8px; }
.unit-detail-video .kemtek-embed { box-shadow: 0 20px 44px rgba(20,18,16,0.16); }
.kemtek-embed-wrap .kemtek-embed { aspect-ratio: 16 / 9; }

/* Bento-style photo grid: the first photo leads, larger than the rest. */
.unit-gallery { margin-bottom: 32px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 10px; }
.unit-gallery a { aspect-ratio: auto; border-radius: var(--radius-card); }
.unit-gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.unit-gallery-count { font-weight: 700; }

/* A floor plan is a diagram, not a photo: shown whole rather than cropped
   into the gallery's tiles, on its own framed panel. */
.unit-floorplan { margin-bottom: 32px; display: flex; flex-direction: column; gap: 24px; }
.unit-floorplan-item { margin: 0; }
.unit-floorplan-item a { display: block; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--cream); padding: 20px; cursor: zoom-in; }
.unit-floorplan-item img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; margin: 0 auto; }
.unit-floorplan-item figcaption { margin-top: 10px; text-align: center; font-weight: 700; color: var(--navy); }

.amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.amenity { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
/* A filled disc with a white check, matching the brand's own print collateral.
   A fixed-size SVG rather than the ✓ character, whose glyph metrics (and so
   apparent size and baseline) vary by font and browser. flex-shrink: 0 keeps
   the disc round — as a flex item beside a text block it would otherwise be
   squeezed into an ellipse by whatever width the copy demands. */
.amenity .tick {
	display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
	width: 20px; height: 20px; margin-top: 1px;
	border-radius: 50%; background: var(--red); color: #fff;
}
.amenity .tick svg { width: 12px; height: 12px; }

/* How to purchase (Apply Now page). Mobile-first: one column by default,
   pairing up once there's room; .purchase-steps-flow (below) then lays all 5
   out in a single row once the page is wide enough to give each its own
   lane. Reuses .step-num's circle (defined with the calculators page's own
   step list) and the .amenities checklist above. */
.purchase-steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 22px; }
.purchase-steps li { display: flex; gap: 14px; align-items: flex-start; }
/* Same size, face and rhythm as the lede: the steps are the substance of this
   page, not a caption under it. */
.purchase-steps p { margin: 0; font-family: var(--sans); font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.purchase-steps a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.step-tag { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.purchase-notes { background: var(--cream); border-radius: var(--radius-card); padding: 24px 26px; }
/* Sized and centred like the "How to purchase" heading above it — these are
   two halves of the same guide, not a heading and a footnote. */
.purchase-notes-head {
	font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 26px);
	line-height: 1.12; letter-spacing: -0.005em; text-transform: none;
	color: var(--navy); text-align: center; margin: 0 0 22px;
}
@media (min-width: 601px) {
	.purchase-steps { grid-template-columns: 1fr 1fr; }
}

.sidebar .box { position: sticky; top: 92px; background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card); padding: 26px; }
.sidebar .from-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.sidebar .from-price { font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--navy); margin: 4px 0 20px; }
.spec { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.spec dt { color: var(--faint); margin: 0; }
.spec dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; max-width: 60%; }

/* --------------------------------------------------------- Media (video/360) */
.media-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.media-tab {
	border: 1px solid var(--line); background: #fff; color: var(--muted);
	padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.media-tab[aria-selected='true'] { border-color: var(--navy); background: var(--navy); color: #fff; }
.media-panel[hidden] { display: none; }

/* Responsive embed wrapper (video + 360). */
.kemtek-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0d0c0b; border-radius: var(--radius-card); overflow: hidden; }
.kemtek-embed iframe, .kemtek-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.embed-fallback { padding: 24px; }

/* ------------------------------------------------------------------- Gallery */
.dev-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dev-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.dev-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Lightbox */
.kemtek-lightbox {
	position: fixed; inset: 0; z-index: 2000; background: rgba(13, 12, 11, 0.94);
	display: flex; align-items: center; justify-content: center; padding: 40px;
	opacity: 0; transition: opacity 0.22s ease;
	/* Closed (or mid-fade) it must never intercept clicks. */
	pointer-events: none;
}
/* This author rule sets display:flex, which outranks the UA [hidden] rule — so
   the hidden state has to be restated here or the closed overlay stays in the
   layer above the page and swallows every click. */
.kemtek-lightbox[hidden] { display: none; }
.kemtek-lightbox.is-open { opacity: 1; pointer-events: auto; }
.kemtek-lightbox-figure {
	margin: 0; max-width: min(90vw, 1100px); max-height: 86vh; display: flex; flex-direction: column; align-items: center;
	transform: scale(0.94); transition: transform 0.22s ease;
}
.kemtek-lightbox.is-open .kemtek-lightbox-figure { transform: scale(1); }
.kemtek-lightbox-img { max-width: 100%; max-height: 78vh; width: auto; height: auto; display: block; border-radius: 4px; }
.kemtek-lightbox-caption { color: rgba(255, 255, 255, 0.6); font-size: 13px; margin-top: 12px; }
.kemtek-lightbox-close,
.kemtek-lightbox-prev,
.kemtek-lightbox-next {
	position: absolute; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff; cursor: pointer; border-radius: 50%; width: 44px; height: 44px; font-size: 20px; line-height: 1;
}
.kemtek-lightbox-close:hover,
.kemtek-lightbox-prev:hover,
.kemtek-lightbox-next:hover { background: rgba(255, 255, 255, 0.2); }
.kemtek-lightbox-close { top: 20px; right: 20px; }
.kemtek-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.kemtek-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
	.kemtek-lightbox { padding: 16px; }
	.kemtek-lightbox-prev, .kemtek-lightbox-next { width: 36px; height: 36px; font-size: 16px; }
}

/* ------------------------------------------------------------------ Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-info dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.contact-info dd { margin: 0 0 18px; color: var(--ink); font-weight: 600; }
.form-shell { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card); box-shadow: 0 12px 40px rgba(28,26,24,0.08); padding: 32px; }
/* Style whatever form plugin is dropped in, so it inherits the design. */
.form-shell input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.form-shell select, .form-shell textarea {
	width: 100%; border: 1px solid var(--line); padding: 12px 14px; font-size: 15px; background: #fff; color: var(--ink);
}
.form-shell label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.form-shell input[type=submit], .form-shell button[type=submit], .form-shell .wpforms-submit, .form-shell .frm_button_submit {
	background: var(--red); color: #fff; border: none; padding: 14px 28px; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.form-shell input[type=submit]:hover, .form-shell button[type=submit]:hover { background: var(--red-dark); }

/* --------------------------------------------------------------- Listings */
.filter-bar {
	background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card);
	box-shadow: 0 12px 40px rgba(28,26,24,0.1); padding: 24px;
	display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 32px;
}
.filter-bar .field { flex: 1; min-width: 180px; }
.filter-bar label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.filter-bar input, .filter-bar select { width: 100%; border: 1px solid var(--line); padding: 12px 14px; font-size: 15px; background: #fff; }
.result-count { font-size: 13.5px; color: var(--faint); margin-bottom: 20px; }
.no-results { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); }

/* ------------------------------------------------------------------- Footer */
.site-footer { background: #1B1A29; color: #D9D6D0; }
.site-footer .cols { padding: 48px var(--pad) 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; max-width: var(--max); margin: 0 auto; }
/* No plate behind it: the crest's own red and blue read fine straight on the
   dark footer, and the white box made it look like an app icon. */
.site-footer .footer-logo {
	display: inline-block; height: var(--logo-h-footer, 96px); width: auto; max-width: 100%;
	object-fit: contain; margin-bottom: 18px;
}
.site-footer .brand-line { font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 12px; text-transform: uppercase; }
.site-footer p { font-size: 14px; line-height: 1.7; color: #A8A49C; max-width: 320px; margin: 0; }
.site-footer h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin: 0 0 16px; font-family: var(--sans); }
.site-footer .col li { list-style: none; margin: 0; padding: 0; }

/* Footer link columns: a plain button + JS class toggle (assets/js/app.js),
   not a native <details>/<summary> — keeps this fully within our own control
   instead of depending on the browser's [open]-driven hiding. Desktop has NO
   conditional visibility at all: .footer-collapse-body is unconditionally
   shown, identical to a plain always-visible column, so it cannot break the
   way a browser-dependent toggle can. Only the mobile breakpoint (below)
   introduces any hide/show logic. */
.footer-collapse-toggle {
	display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: #fff; margin: 0 0 16px; font-family: var(--sans); cursor: default;
}
.footer-collapse-body { display: block; }

/* -------------------------------------------------------------------------- */
.site-footer .col a, .site-footer .col .foot-line { display: block; color: #A8A49C; font-size: 14px; margin-bottom: 10px; }
.site-footer .col a:hover { color: #fff; }
.site-footer .col a.foot-more { color: var(--gold); font-weight: 700; margin-top: 4px; }
.site-footer .col a.foot-more:hover { color: #fff; }

.social-icons { display: flex; gap: 14px; margin-top: 16px; }
.social-icon { display: flex; align-items: center; justify-content: center; color: #D9D6D0; transition: color .15s ease; }
.social-icon:hover { color: #fff; }
.footer-base { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-base .wrap { padding: 20px var(--pad); font-size: 12.5px; color: #78746C; }

/* --------------------------------------------------------------- Splash intro */
.kemtek-splash { position: fixed; inset: 0; z-index: 9999; overflow: hidden; }
.kemtek-splash[data-stage='curtain'] { pointer-events: none; }
.kemtek-splash .panel { position: absolute; top: 0; bottom: 0; width: 50.2%; transition: transform 1.3s cubic-bezier(0.76,0,0.24,1); }
/* Deep navy rather than the old near-white: the logo's wordmark is white, so
   it only reads against a dark ground. Fixed values, not var(--navy), so the
   splash stays dark whatever accent the Customizer is set to. */
.kemtek-splash .panel-left { left: 0; background: linear-gradient(150deg,#1B2C55 0%,#0D1728 100%); }
.kemtek-splash .panel-right { right: 0; background: linear-gradient(210deg,#1B2C55 0%,#0D1728 100%); }
.kemtek-splash[data-stage='curtain'] .panel-left,
.kemtek-splash[data-stage='done'] .panel-left { transform: translateX(-101%); }
.kemtek-splash[data-stage='curtain'] .panel-right,
.kemtek-splash[data-stage='done'] .panel-right { transform: translateX(101%); }
.kemtek-splash .glow-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kemtek-splash .glow {
	position: absolute; top: 50%; left: 50%; width: min(1100px, 140vw); height: min(1100px, 140vw);
	margin: calc(min(550px, 70vw) * -1) 0 0 calc(min(550px, 70vw) * -1);
	background: radial-gradient(circle, rgba(201,150,46,0.30) 0%, rgba(201,150,46,0) 62%);
	animation: splashGlow 10s ease-in-out infinite;
}
.kemtek-splash .content {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	opacity: 1; transform: scale(1); transition: opacity .65s ease, transform 1s cubic-bezier(0.4,0,0.2,1);
}
.kemtek-splash[data-stage='contentOut'] .content,
.kemtek-splash[data-stage='curtain'] .content { opacity: 0; transform: scale(1.07); }
.kemtek-splash .splash-card { position: relative; display: flex; flex-direction: column; align-items: center; animation: splashCardIn 1.5s cubic-bezier(0.16,1,0.3,1) both; }
.kemtek-splash .logo-wrap { position: relative; display: inline-block; overflow: hidden; margin-bottom: 38px; }
.kemtek-splash .logo { position: relative; height: var(--logo-h-splash, 340px); width: auto; max-width: min(90vw, 900px); object-fit: contain; margin-bottom: 0; }
.kemtek-splash .logo-wrap::after {
	content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
	background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
	transform: skewX(-20deg); pointer-events: none;
	animation: splashLogoFlash 1.1s ease-out 1.15s both;
}
.kemtek-splash .line { height: 2px; width: 72px; background: var(--gold); margin: 0 auto 22px; animation: splashLineIn 1.2s cubic-bezier(0.16,1,0.3,1) .8s both; }
.kemtek-splash .tagline {
	position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
	font-family: var(--sans); font-size: clamp(16px, 2.2vw, 24px); font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: #FFFFFF;
}
.kemtek-splash .tagline span { display: inline-block; animation: splashWordIn .85s ease-out both; }
.kemtek-splash .tagline span:nth-child(1) { animation-delay: 1.25s; }
.kemtek-splash .tagline span:nth-child(2) { animation-delay: 1.42s; }
.kemtek-splash .tagline span:nth-child(3) { animation-delay: 1.59s; }
.kemtek-splash .tagline span:nth-child(4) { animation-delay: 1.76s; }
.kemtek-splash .progress-track { width: 240px; height: 2px; background: rgba(255,255,255,0.20); margin-top: 52px; overflow: hidden; }
.kemtek-splash .progress-bar { width: 100%; height: 100%; background: var(--gold); transform-origin: left center; animation: splashProgress 3.6s cubic-bezier(0.4,0,0.2,1) both; }

@keyframes splashCardIn { 0% { opacity: 0; transform: translateY(30px) scale(0.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes splashLogoFlash { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
@keyframes splashLineIn { 0% { width: 0; opacity: 0; } 100% { width: 72px; opacity: 1; } }
@keyframes splashWordIn { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes splashGlow { 0% { transform: translate(-12%, -8%) scale(1); opacity: 0.5; } 50% { transform: translate(10%, 6%) scale(1.28); opacity: 0.8; } 100% { transform: translate(-12%, -8%) scale(1); opacity: 0.5; } }
@keyframes splashProgress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* --------------------------------------------------------------- Page body */
.page-body { max-width: 760px; }
.page-body p { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.page-body h2 { color: var(--navy); font-size: clamp(22px, 3vw, 28px); text-transform: uppercase; letter-spacing: -0.005em; margin: 44px 0 16px; }
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { color: var(--ink); font-size: 19px; margin: 28px 0 10px; }
.page-body ul { padding-left: 20px; }
.page-body li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; }
.value-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.value-num {
	flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
	background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--display); font-weight: 700;
}

/* --------------------------------------------------------------------- Press */
.press { padding: clamp(44px, 6vw, 80px) 0; }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.press-card {
	background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card); overflow: hidden;
	display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.press-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,18,16,0.1); }
.press-photo { aspect-ratio: 16 / 10; background: #ece8e1; overflow: hidden; }
.press-photo img { width: 100%; height: 100%; object-fit: cover; }
.press-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.press-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.press-date { color: var(--red); }
.press-pub { color: var(--faint); }
.press-pub::before { content: '·'; margin-right: 10px; color: var(--faint); }
.press-title { font-size: clamp(19px, 2.4vw, 22px); color: var(--navy); margin: 0 0 10px; text-transform: uppercase; letter-spacing: -0.005em; }
.press-title a { color: inherit; text-decoration: none; }
.press-title a:hover { color: var(--red); }
.press-photo { display: block; }
.press-summary { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.press-devs { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.press-devs-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.press-dev {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 7px 8px 7px 14px;
	background: var(--cream); border: 1px solid var(--hair); border-radius: var(--radius-pill);
	text-decoration: none; transition: border-color .18s ease, background .18s ease;
}
.press-dev:hover { background: #fff; border-color: var(--navy); }
.press-dev-name { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.press-dev-status { margin: 0; font-size: 10px; padding: 3px 9px; }
.press-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.press-link:hover { color: var(--red); }

.past-projects { padding: 0 0 clamp(44px, 6vw, 80px); }
.project-logos {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 24px 0 0;
}
.project-logo {
	background: #fff; border: 1px solid var(--hair); border-radius: 12px;
	padding: 18px 16px 16px; display: flex; flex-direction: column; align-items: center;
	gap: 14px; min-height: 116px; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,18,16,0.1); border-color: var(--line); }
/* Fixed-height box so varying logo artwork can never crowd the status pill below it. */
.project-logo-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; flex-shrink: 0; }
.project-logo-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.project-logo-fallback { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
.project-status { margin: 0 0 0; font-size: 10.5px; padding: 4px 10px; flex-shrink: 0; }

/* ------------------------------------------------------------------ Search bar */
.search-bar {
	background: var(--navy); border-radius: 32px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	padding: 26px 32px; display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;
}
.search-bar .field { flex: 2; min-width: 200px; }
.search-bar label { display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.search-bar .field-input {
	display: flex; align-items: center; gap: 10px; background: #fff;
	border: 1px solid rgba(255,255,255,0.12); padding: 0 14px;
}
.search-bar .field-input svg { flex-shrink: 0; color: var(--gold); }
.search-bar input, .search-bar select {
	flex: 1; width: 100%; box-sizing: border-box; border: 0; background: transparent;
	padding: 12px 0; font-size: 15px; font-family: inherit; color: var(--ink);
}
.search-bar input:focus, .search-bar select:focus { outline: none; }
.search-bar button { flex: 0 0 auto; align-self: flex-end; }

/* ------------------------------------------------------------ Featured project */
.featured-project { padding: clamp(40px, 6vw, 64px) 0; }
.featured-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }

.featured-media { position: relative; height: clamp(340px, 40vw, 460px); border-radius: var(--radius-card); overflow: hidden; background: var(--ink); }
.featured-slide {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transform: scale(1); transition: opacity 1.6s ease;
}
.featured-slide.is-active { opacity: 1; animation: featuredKenBurns 6.4s ease-out forwards; }
/* Each slide zooms toward a different point of interest, cycling through 4 origins. */
.featured-slide:nth-child(4n+1) { transform-origin: 25% 30%; }
.featured-slide:nth-child(4n+2) { transform-origin: 75% 65%; }
.featured-slide:nth-child(4n+3) { transform-origin: 50% 20%; }
.featured-slide:nth-child(4n+4) { transform-origin: 30% 75%; }
@keyframes featuredKenBurns { from { transform: scale(1); } to { transform: scale(1.16); } }

.featured-crest { height: 56px; width: auto; margin-bottom: 18px; object-fit: contain; }
.featured-eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.featured-content .eyebrow { display: block; margin-bottom: 0; }
.featured-status { margin: 0; font-size: 10.5px; padding: 4px 12px; }
.featured-content h2 { margin: 0 0 10px; }
.featured-location {
	display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
	color: var(--navy); margin: 0 0 16px;
}
.featured-location svg { flex-shrink: 0; color: var(--red); }
.featured-excerpt { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; max-width: 46ch; }
.featured-facts {
	display: flex; gap: 32px; margin: 0 0 28px; padding: 20px 0;
	border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.featured-fact { display: flex; flex-direction: column; gap: 4px; }
.featured-fact-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.featured-fact-value { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--navy); }
.featured-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.featured-tour-link { font-size: 14px; font-weight: 700; color: var(--navy); }
.featured-tour-link:hover { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
	.featured-slide.is-active { animation: none; transform: scale(1); }
}

/* ------------------------------------------------------------------- Why Kemtek */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.why-media { position: relative; height: 460px; border-radius: var(--radius-card); overflow: hidden; }
.why-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------- Calculators & finance */
.calc-hero { background: var(--navy); color: #fff; padding: clamp(48px, 7vw, 84px) 0 clamp(40px, 6vw, 64px); }
.calc-hero h1 { color: #fff; margin: 14px 0 16px; }
.calc-hero-intro { color: rgba(255,255,255,0.85); font-size: clamp(15px, 2vw, 18px); line-height: 1.6; max-width: 640px; }
.calc-hero-intro p { margin: 0; }

.calc-wrap { padding: clamp(28px, 5vw, 56px) var(--pad); }
.calc-tabs { display: inline-flex; gap: 4px; background: #efece6; padding: 5px; border-radius: 999px; margin-bottom: 32px; flex-wrap: wrap; }
.calc-tab {
	border: 0; background: transparent; cursor: pointer; padding: 10px 22px; border-radius: 999px;
	font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--muted);
	transition: background-color .18s ease, color .18s ease;
}
.calc-tab:hover { color: var(--ink); }
.calc-tab.is-active { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.calc-tab:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

.calc-panel { display: none; }
.calc-panel.is-active { display: block; animation: calc-fade .35s ease; }
@keyframes calc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }

.calc-controls { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: clamp(22px, 3vw, 34px); }
.calc-field { margin-bottom: 26px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.calc-field-head label { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.calc-val { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--navy); }

/* Fancy range slider. */
.calc-field input[type=range] {
	-webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px;
	background: linear-gradient(90deg, var(--red) 0%, var(--red) var(--fill, 0%), #e7e3dc var(--fill, 0%), #e7e3dc 100%);
	outline: none; cursor: pointer;
}
.calc-field input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
	background: #fff; border: 3px solid var(--red); box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	transition: transform .12s ease, box-shadow .12s ease;
}
.calc-field input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-field input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(200,32,46,0.15); }
.calc-field input[type=range]::-moz-range-thumb {
	width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--red);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer;
}
.calc-field input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(31,53,104,0.25); }

.calc-result { background: var(--navy); color: #fff; border-radius: 16px; padding: clamp(24px, 3vw, 34px); position: sticky; top: 92px; }
.calc-result-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 6px; }
.calc-result-big { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 6vw, 48px); color: #fff; margin: 0 0 20px; line-height: 1.05; }
.calc-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.14); margin-bottom: 22px; }
.calc-bar-principal { background: #fff; transition: width .5s ease; }
.calc-bar-interest { background: var(--red); transition: width .5s ease; }
.calc-stats { list-style: none; margin: 0 0 22px; padding: 0; }
.calc-stats li { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 14.5px; }
.calc-stats li span:not(.dot) { color: rgba(255,255,255,0.8); }
.calc-stats li b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-stats .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.calc-stats .dot-principal { background: #fff; }
.calc-stats .dot-interest { background: var(--red); }
.calc-stats-total { border-bottom: 0 !important; font-weight: 700; }
.calc-stats-total span { color: #fff !important; }
.calc-cta { width: 100%; justify-content: center; text-align: center; }
.calc-note { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 14px 0 0; }
.calc-note b { color: #fff; }
.calc-note-box { color: var(--muted); background: #f6f3ee; border: 1px solid var(--hair); border-radius: 12px; padding: 16px; margin-top: 24px; }
.calc-disclaimer { font-size: 12.5px; color: var(--faint); text-align: center; margin: 32px auto 0; max-width: 720px; }

/* Resources */
.calc-resources { background: #f6f3ee; padding: clamp(48px, 7vw, 88px) 0; }
.calc-resources .eyebrow, .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
.res-card { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 26px; transition: transform .18s ease, box-shadow .18s ease; }
.res-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(20,18,16,0.09); }
.res-card h3 { font-size: 17px; color: var(--navy); margin: 0 0 10px; }
.res-rate { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--red); margin: 0 0 12px; line-height: 1.1; }
.res-rate span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--muted); }
.res-card p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.res-link { font-weight: 700; font-size: 14px; color: var(--navy); }
.res-link:hover { color: var(--red); }

.res-steps { background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: clamp(28px, 4vw, 44px); }
.res-steps h3 { color: var(--navy); font-size: clamp(20px, 3vw, 26px); margin: 0 0 28px; text-align: center; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-list li { display: flex; flex-direction: column; gap: 12px; }
/* flex-shrink: 0 is load-bearing, not decoration: as a flex item next to a
   text block this circle is shrunk horizontally by however much that text
   needs, so it renders as an ellipse whose width varies per item (44px tall
   but 27px wide next to long copy). The fixed height must be paired with a
   refusal to shrink for `border-radius: 50%` to stay a circle. */
.step-num {
	width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--navy); color: #fff;
	display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 20px;
}
.step-list b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px; }
.step-list p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* -------------------------------------------------------- 3D / tour showcase */
.showcase { background: #12100e; color: #fff; padding: clamp(48px, 7vw, 90px) 0; }
.showcase .section-head.center h2 { color: #fff; }
.showcase .section-head.center p { color: rgba(255,255,255,0.75); }
.showcase .eyebrow { color: #ff6b74; }
.showcase-stage { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.showcase-model {
	display: block; width: 100%; height: clamp(360px, 62vh, 640px);
	background: radial-gradient(circle at 50% 40%, #24211d 0%, #0d0c0b 80%);
	--poster-color: transparent;
}
.showcase-stage .kemtek-embed { border-radius: 18px; }
.showcase-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.12); }
.showcase-progress-bar { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.showcase-model:not([loaded]) .showcase-progress { opacity: 1; }
.showcase-ar { position: absolute; bottom: 16px; right: 16px; }
.showcase-hint {
	position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
	background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
	pointer-events: none;
}
.showcase-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.showcase-name { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 3vw, 26px); color: #fff; }

/* ---------------------------------------------------------------- About/Team */
/* .about-hero is a .dev-hero photo hero (see single-development.php's markup) —
   only the badge-line spacing needs a small nudge here. */
.about-hero h1 { margin: 14px 0 0; }
.about-intro { padding: clamp(44px, 6vw, 80px) 0; }
.about-intro .wrap {
	background: #fff; border: 1px solid var(--hair); border-radius: 20px;
	padding: clamp(32px, 5vw, 56px);
}
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; margin-top: 12px; }
.about-copy-left p:first-of-type {
	font-family: var(--display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(19px, 2.4vw, 23px); color: var(--navy); line-height: 1.4; margin-bottom: 26px;
}
.about-story-photo { border-radius: 14px; overflow: hidden; margin-bottom: 28px; aspect-ratio: 4 / 3; }
.about-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-mission h2 { margin-top: 0; }

.team { padding: clamp(44px, 6vw, 80px) 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { background: #fff; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,18,16,0.1); }
/* Circular portrait over a brand band — the treatment the old Kemtek site
   used, and the right one for these photos. A rectangular frame either cut
   the tops of heads off (cover) or left a dead white gap below them
   (contain); a circle centred on the face reads as a deliberate crop and
   works whatever shape the studio supplies. */
.team-banner {
	height: 104px;
	background: linear-gradient(135deg, var(--red) 0%, #A5121D 55%, var(--red) 100%);
}
.team-photo {
	position: relative; width: 176px; aspect-ratio: 1 / 1; margin: -88px auto 0;
	border-radius: 50%; overflow: hidden; background: #fff;
	border: 5px solid #fff; box-shadow: 0 6px 18px rgba(20,18,16,0.14);
}
/* These headshots are framed waist-up with a lot of empty backdrop, so simply
   filling the circle leaves the face small inside it. Scaling in past the
   frame — anchored high, where the head is — crops away that margin and
   brings the face up to the size of the circle. */
.team-photo img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 12%;
	/* Modest zoom: enough to lose the empty backdrop, not so much that the
	   source resolution starts to show. */
	transform: scale(1.18); transform-origin: center 22%;
}
.team-initials {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: var(--display); font-weight: 700; font-size: 36px; color: var(--navy); background: #e3ddd3;
}
.team-body { padding: 16px 18px 20px; }
.team-name { font-size: 19px; color: var(--navy); margin: 0 0 3px; }
.team-role { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; }
.team-bio { font-size: 15px; line-height: 1.6; color: var(--muted); }
.team-bio p { margin: 0 0 8px; }
.team-contact { margin: 10px 0 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.team-contact a { color: var(--navy); font-weight: 600; }
.team-contact a:hover { color: var(--red); }

/* ---------------------------------------------------------- Calculator links */
.sidebar-calc-link {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
	font-weight: 700; font-size: 13.5px; color: var(--navy);
	padding-top: 14px; border-top: 1px solid var(--hair);
}
.sidebar-calc-link:hover { color: var(--red); }
.sidebar-calc-link svg { flex-shrink: 0; }

/* ------------------------------------------------------------- Breakpoints */
@media (max-width: 960px) {
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.budget .grid, .contact-grid, .dev-body, .about-grid { grid-template-columns: 1fr; gap: 40px; }
	.sidebar .box { position: static; }
	.split-2 { grid-template-columns: 1fr !important; }
	.calc-grid { grid-template-columns: 1fr; gap: 24px; }
	.calc-result { position: static; }
	.res-grid { grid-template-columns: repeat(2, 1fr); }
	.step-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
	:root { --pad: 20px; }
	.main-nav, .header-cta { display: none; }
	.nav-toggle { display: inline-flex; }
	.site-header .wrap { padding-top: 10px; padding-bottom: 10px; min-height: 0; gap: 12px; }
	.brand img, .site-header.is-overlay:not(.is-scrolled) .brand img { height: calc(var(--logo-h-header, 64px) * 0.85); }
	.site-header.nav-open .main-nav {
		display: flex; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 2px;
		background: var(--cream); border-top: 1px solid var(--hair); box-shadow: 0 12px 24px rgba(28,26,24,0.08);
		padding: 20px 20px 24px;
		max-height: calc(100vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.site-header.nav-open .main-nav a {
		padding: 13px 4px; border-bottom: 1px solid var(--hair);
		text-transform: none; letter-spacing: 0.02em; font-size: 15px;
	}
	/* The open dropdown always has a light background, even when the header
	   itself is in transparent overlay mode — so everything in it needs its
	   normal (light-background) colors, overriding every white-on-overlay
	   rule above: plain links, and Book a Viewing's .btn-ghost outline
	   (Apply Now's .btn-navy is unaffected — solid navy with white text
	   reads the same over the photo or in the dropdown). :not(.btn) on the
	   link rule keeps it off the two .mobile-cta buttons entirely, since
	   they set their own colors below. */
	.site-header.is-overlay.nav-open .main-nav a:not(.btn) { color: var(--muted); }
	.site-header.is-overlay.nav-open .main-nav a:not(.btn):hover { color: var(--ink); }
	.site-header.is-overlay.nav-open .main-nav .current-menu-item > a,
	.site-header.is-overlay.nav-open .main-nav a[aria-current='page'] { color: var(--navy); font-weight: 700; }
	.site-header.nav-open .main-nav .mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
	.mobile-cta .btn { width: 100%; text-align: center; }
	.main-nav .mobile-cta .btn-navy { color: #fff; }
	/* Not just an overlay-page fix: .btn-ghost's base border (rgba navy at
	   0.4 alpha) reads fine against a photo backdrop but is too faint on the
	   dropdown's plain cream background on any page, so give it a stronger
	   border here regardless of overlay state. */
	.site-header.nav-open .mobile-cta .btn-ghost {
		border-color: rgba(31, 53, 104, 0.65); color: var(--navy);
	}
	.site-header.nav-open .mobile-cta .btn-ghost:hover {
		background: rgba(31, 53, 104, 0.06); color: var(--navy);
	}
	.main-nav .mobile-cta .btn-navy:hover { color: #fff; }
	.match-grid, .amenities, .why-grid, .team-grid, .featured-grid { grid-template-columns: 1fr; }
	.featured-media { height: 280px; }
	.why-media { height: 280px; }
	.search-bar { flex-direction: column; align-items: stretch; }
	.search-bar button { width: 100%; }
	.dev-logo-mark { width: 128px; height: 128px; margin-top: -72px; }
	.dev-logo-initials { font-size: 38px; }
	.dev-amenity-strip { max-width: 100%; margin: 4px auto 0; }
	.site-footer .cols { grid-template-columns: 1fr; gap: 0; padding-top: 32px; padding-bottom: 8px; }
	.site-footer .col { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0; }
	.site-footer .col:first-child { border-top: 0; padding-top: 0; }
	.footer-collapse-toggle {
		cursor: pointer; position: relative; padding-right: 28px; margin-bottom: 0;
		-webkit-tap-highlight-color: transparent;
	}
	.footer-collapse-toggle::after {
		content: '+'; position: absolute; right: 0; top: -2px; font-size: 20px; font-weight: 400;
		color: rgba(255,255,255,0.6);
	}
	.footer-collapse.is-open .footer-collapse-toggle::after { content: '\2212'; }
	.footer-collapse .footer-collapse-body { display: none; padding-top: 14px; }
	.footer-collapse.is-open .footer-collapse-body { display: block; }
	.hero-band-wrap { margin-top: 20px; }
	.hero-band { padding: 20px; gap: 20px; border-radius: 20px; }
	.dev-hero.contact-hero .inner { padding-bottom: 40px; }
	.unit-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.unit-gallery a:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
	.loc-explorer { grid-template-columns: 1fr; }
	.loc-list { max-height: 320px; order: 2; }
	/* aspect-ratio: auto is required alongside the fixed height — .loc-frame's
	   base 16/7 ratio otherwise derives width from this height (320 * 16/7 =
	   731px) instead of stretching to the grid column, overflowing the
	   viewport. Same fix already used by .loc-frame-compact. */
	.loc-explorer-map { height: 320px; aspect-ratio: auto; order: 1; }
	.location-panel { grid-template-columns: 1fr; }
	.location-directions { margin-top: 18px; }
}
@media (max-width: 640px) {
	/* Hero: tighter vertical rhythm and a full-width CTA stack on phones.
	   padding-top has to clear the fixed mobile header (~75px tall) plus its
	   gradient fade, or the "Building Communities…" badge renders underneath
	   it instead of below it. */
	.hero-inner { padding-top: 100px; padding-bottom: 40px; text-align: center; }
	.hero-slide .btn-row, .cta .btn-row { width: 100%; flex-direction: column; }
	.hero-slide .btn-row { margin-top: clamp(28px, 9vw, 56px); }
	.hero-slide .btn-row .btn, .cta .btn-row .btn { width: 100%; text-align: center; }
	.align-center .btn-row { align-items: center; }
	.badge-line { margin-bottom: 16px; }
	/* The static (non-slideshow) hero moves its CTAs out from over the photo
	   to a plain-background row below it, so they don't crowd the header
	   and headline text on small screens. */
	.hero-btns-desktop { display: none; }
	.hero-btns-mobile {
		display: flex; flex-direction: column; width: 100%;
		gap: 12px; padding: 20px var(--pad) 0;
	}
	.hero-btns-mobile .btn { width: 100%; text-align: center; }

	/* Calculators: full-width tab row and comfortable result card. */
	.calc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
	.calc-tab { padding: 10px 8px; font-size: 13px; }
	.calc-val { font-size: 17px; }
	.calc-result { padding: 22px; }

	/* Showcase: shorter stage and stacked footer on phones. */
	.showcase-model { height: clamp(300px, 56vh, 460px); }
	.showcase-foot { flex-direction: column; align-items: flex-start; }
	.showcase-foot .btn { width: 100%; text-align: center; }

	/* Comfortable minimum tap targets. */
	.btn { min-height: 44px; }
	.main-nav a, .footer-base a, .site-footer .col a { min-height: 32px; }

	/* Featured project: facts row and CTAs stay legible on narrow phones. */
	.featured-facts { gap: 20px; flex-wrap: wrap; }
	.featured-cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.featured-cta-row .btn { width: 100%; text-align: center; }

	/* Two-line "Inquire about this unit" button keeps its own text centered. */
	.btn-inquire-unit-name { opacity: 0.8; }
}
@media (max-width: 560px) {
	.res-grid, .step-list, .team-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- Reveal on scroll */
/* reveal.js only ever adds "reveal-pending" right before it starts observing,
   so with JS disabled (or before it runs) everything stays fully visible. */
.reveal-pending { opacity: 0; transform: translateY(24px); }
[data-reveal] { transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------- Motion & print prefs */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------------------- FAQs */
.faq-section { padding-bottom: clamp(48px, 7vw, 96px); }
.faq-intro { margin: 0 auto 40px; text-align: center; }
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
	background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-card);
	margin-bottom: 14px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-item.is-open { border-color: var(--line); box-shadow: 0 10px 26px rgba(20,18,16,0.06); }
.faq-q { margin: 0; font-size: inherit; text-transform: none; }
.faq-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
	padding: 20px 22px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.faq-q-text { font-family: var(--display); font-size: clamp(16px, 1.9vw, 18.5px); font-weight: 600; color: var(--navy); line-height: 1.4; }
.faq-toggle:hover .faq-q-text { color: var(--red); }
/* A plus that becomes a minus — drawn in CSS so there is no icon font to load. */
.faq-icon { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.faq-icon::before, .faq-icon::after {
	content: ''; position: absolute; top: 50%; left: 50%; background: var(--red);
	transform: translate(-50%, -50%); transition: opacity .18s ease, transform .18s ease;
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after { width: 2px; height: 16px; }
.faq-item.is-open .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq-a { padding: 0 22px 22px; }
.faq-item:not(.is-open) .faq-a { display: none; }
.faq-a p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-help { max-width: 860px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: center; }
.faq-help h2 { color: var(--navy); font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 10px; }
.faq-help p { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
.faq-help .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --------------------------------------------------------------- Apply page */
/* The purchase journey, laid out like the printed flyer: crest and community
   over a photo header, then the five steps, then the caveats. */
/* The header is centred — badge over heading, nothing else — so the community
   sign in the photo is not competing with a stack of text beside it. */
.apply-hero-inner { text-align: center; }
.apply-hero-inner .badge-line { display: inline-block; margin-bottom: 14px; }

/* The crest opens the copy rather than sitting on the photo, the way the
   printed flyer leads with it. */
/* border-box, so the padding is inside the box the max-width bounds — a
   content-box card can push past its column once the padding is added on. */
.apply-crest {
	display: block; box-sizing: border-box;
	height: clamp(104px, 13vw, 156px); width: auto; max-width: min(78vw, 380px);
	object-fit: contain; margin: 0 auto 28px;
	background: #fff; border: 1px solid var(--hair); border-radius: 18px;
	padding: 18px 26px; box-shadow: 0 10px 28px rgba(20,18,16,0.07);
}
.apply-intro { padding-bottom: 0; text-align: center; }
.apply-lede { max-width: 720px; margin: 0 auto 30px; }
.apply-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.apply-cta-primary { font-size: 16px; padding: 16px 34px; }
.apply-steps-section { padding-top: clamp(36px, 5vw, 56px); }

/* Five across on a wide screen, so the process reads as one flow rather than a
   list; the shared .purchase-steps rules cover the smaller breakpoints. */
@media (min-width: 1080px) {
	.purchase-steps-flow { grid-template-columns: repeat(5, 1fr); gap: 18px; }
	.purchase-steps-flow li { flex-direction: column; text-align: center; align-items: center; gap: 10px; }
}

/* No extra gap before the closing band: the section above it already ends on
   its own padding, and the footer starts immediately after. */
.apply-close { margin-top: 0; }
.apply-steps-section { padding-bottom: clamp(36px, 5vw, 56px); }

/* A short pointer from a model page to the full guide, which now lives on the
   Apply page rather than at the bottom of every model. */
.unit-apply-cta {
	margin-top: 48px; padding: 28px 30px; background: var(--cream);
	border-radius: var(--radius-card); border: 1px solid var(--hair);
}
.unit-apply-cta .eyebrow { margin: 0 0 6px; }
.unit-apply-cta h2 { margin: 0 0 8px; color: var(--navy); }
.unit-apply-cta p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 52ch; }

/* ------------------------------------------- Sold out / completed developments */
/* These pages are the archive of what Kemtek has built. Nothing here is for
   sale, so the price slot carries the status instead and the sidebar drops
   every "buy this" control. The look is deliberately quieter than a live
   listing — muted, no red price, no primary button. */
.card-price-archival {
	font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--faint);
}
.card-archival .card-media img { filter: saturate(0.86); }

.sidebar .box-archival { background: var(--cream); }
.sidebar .archival-status {
	font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--muted);
	margin: 4px 0 20px; text-transform: uppercase; letter-spacing: 0.01em;
}
.archival-note {
	margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--hair);
	font-size: 14px; line-height: 1.65; color: var(--muted);
}

/* --------------------------------------------------------- Press article page */
.press-article-head { padding: clamp(36px, 5vw, 64px) 0 0; }
.press-article-head .unit-breadcrumb { margin-bottom: 20px; }
.press-article-head .unit-breadcrumb-link { font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none; }
.press-article-head .unit-breadcrumb-link:hover { color: var(--red); }
.press-article-title {
	font-size: clamp(28px, 4.4vw, 46px); color: var(--navy); margin: 0 0 14px;
	text-transform: uppercase; letter-spacing: -0.01em; max-width: 900px;
}
.press-article-standfirst { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--muted); margin: 0; max-width: 760px; }
.press-article-photo {
	margin: clamp(24px, 4vw, 40px) 0 clamp(28px, 4vw, 44px);
	border-radius: var(--radius-card); overflow: hidden; background: #ece8e1;
}
.press-article-photo img { display: block; width: 100%; height: auto; }
.press-article-body { margin-bottom: 32px; }
.press-article-devs { max-width: 760px; border-top: 1px solid var(--hair); }
.press-article-credit { max-width: 760px; font-size: 14px; color: var(--faint); margin: 0 0 28px; }
.press-article-credit a { color: var(--navy); font-weight: 700; }
.press-article-credit a:hover { color: var(--red); }
.press-article-back { margin: 0 0 clamp(44px, 6vw, 80px); }
.press-article-back .btn { display: inline-block; }

/* ------------------------------------------------- Cross-document page transitions */
/* Native View Transitions for full page navigations (Chrome/Edge 126+); every
   other browser simply ignores this and navigates normally — no JS involved. */
@view-transition {
	navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: kemtek-fade-out 0.18s ease both;
	}
	::view-transition-new(root) {
		animation: kemtek-fade-in 0.28s ease both;
	}
	@keyframes kemtek-fade-out {
		to { opacity: 0; transform: translateY(-8px); }
	}
	@keyframes kemtek-fade-in {
		from { opacity: 0; transform: translateY(8px); }
	}
}