/* =========================================================================
   CRESTLINE HOMES
   One compiled stylesheet. Plain CSS, no framework.

   1.  Fonts
   2.  Tokens
   3.  Reset
   4.  Typography
   5.  Layout primitives
   6.  Crest line and eyebrows
   7.  Buttons and links
   8.  Header, split hero
   9.  Header bar, inner pages
   10. Footer
   11. Images and placeholders
   12. Motion
   ========================================================================= */


/* 1. FONTS ================================================================
   Self hosted. No Google Fonts CDN call. Latin subset only.
   ========================================================================= */

@font-face {
	font-family: 'Abhaya Libre';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/abhaya-libre-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Abhaya Libre';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/abhaya-libre-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat ships from Google as a single variable file covering the weight
   axis, so one declaration carries both the Light body and the Medium subhead. */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/montserrat-var.woff2') format('woff2-variations'),
	     url('../fonts/montserrat-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. TOKENS ===============================================================
   ========================================================================= */

:root {
	/* --- Brand colour, exact values from the guidelines ---------------- */
	--ink:       #212632;
	--gold:      #FDB514;
	--gold-deep: #D4930A;
	--white:     #FFFFFF;
	--cream:     #F7F5F0;
	--line:      #E6E3DD;
	--body:      #55585F;
	--muted:     #8A8D94;

	/* --- Accessible text variants --------------------------------------
	   Measured, not guessed. On white, --gold is 1.78:1 and --gold-deep is
	   2.63:1, so neither clears WCAG AA for text at any size. --muted is
	   3.32:1, which fails for small text.

	   These two tokens carry the brand hue down to a value that passes 4.5:1
	   on white AND on cream, and they are used ONLY where gold or muted appear
	   as small text on a light background. Full strength --gold is still used
	   for the crest rules, gold fills, and gold text on ink, where it measures
	   8.50:1 and passes comfortably. */
	--gold-text:  #966801;  /* 4.91:1 on white, 4.51:1 on cream */
	--muted-text: #6D7078;  /* 4.95:1 on white, 4.55:1 on cream */

	/* --- Type ---------------------------------------------------------- */
	--font-head: 'Abhaya Libre', Georgia, 'Times New Roman', serif;
	--font-ui:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Fluid scale: 13 / 15 / 17 / 21 / 27 / 38 / 52 / 76 */
	--fs-caption: clamp(0.75rem,  0.723rem + 0.14vw, 0.8125rem);
	--fs-small:   clamp(0.875rem, 0.855rem + 0.10vw, 0.9375rem);
	--fs-body:    clamp(1rem,     0.982rem + 0.09vw, 1.0625rem);
	--fs-lead:    clamp(1.125rem, 1.036rem + 0.45vw, 1.3125rem);
	--fs-h4:      clamp(1.375rem, 1.219rem + 0.78vw, 1.6875rem);
	--fs-h3:      clamp(1.75rem,  1.393rem + 1.79vw, 2.375rem);
	--fs-h2:      clamp(2.125rem, 1.482rem + 3.21vw, 3.25rem);
	--fs-h1:      clamp(2.75rem,  1.607rem + 5.71vw, 4.75rem);

	--lh-body:  1.75;
	--lh-head:  1.06;
	--track-ui: 0.18em;

	/* --- Space --------------------------------------------------------- */
	--sp-2:  0.5rem;
	--sp-3:  0.75rem;
	--sp-4:  1rem;
	--sp-6:  1.5rem;
	--sp-8:  2rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;
	--section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

	/* --- Structure ------------------------------------------------------ */
	--wrap:     1320px;
	--wrap-pad: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);
	--rule:     2px;
	--rule-w:   80px;

	/* Interactive surfaces only: buttons, inputs, chips. Structural edges such as
	   image frames, bands and hairline rules stay square, which is the editorial
	   language the rest of the design is built on. */
	--radius:   6px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  300ms;
}


/* 3. RESET ================================================================
   ========================================================================= */

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

/* The hidden attribute must always win.
   Any class that sets a display value (.c-btn is inline-flex, .c-plan is flex)
   otherwise beats the user agent's [hidden] rule, leaving elements that report
   hidden === true still painted on screen. */
[hidden] { display: none !important; }

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

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--font-ui);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a) { color: inherit; }

/* Visible gold focus ring everywhere.

   A focus indicator has to clear 3:1 against what sits behind it. Full strength
   --gold on white is only 1.78:1, so on light surfaces the ring uses the darker
   accessible gold at 4.91:1. On ink panels the bright brand gold is used, where it
   measures 8.50:1, with a dark halo so the ring reads against lighter imagery. */
:focus-visible {
	outline: 3px solid var(--gold-text);
	outline-offset: 3px;
	border-radius: var(--radius);
}
.c-hero__panel :focus-visible,
.c-footer :focus-visible,
.c-band--ink :focus-visible {
	outline-color: var(--gold);
	box-shadow: 0 0 0 6px rgba(33, 38, 50, 0.9);
}

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

.c-skip {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 999;
	background: var(--gold);
	color: var(--ink);
	padding: var(--sp-3) var(--sp-6);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius);
	transition: top 150ms var(--ease);
}
.c-skip:focus { top: var(--sp-4); }


/* 4. TYPOGRAPHY ===========================================================
   ========================================================================= */

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 400;
	line-height: var(--lh-head);
	color: var(--ink);
	letter-spacing: -0.01em;
}

.c-h1 { font-size: var(--fs-h1); text-transform: uppercase; font-weight: 600; }
.c-h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.c-h3 { font-size: var(--fs-h3); }
.c-h4 { font-size: var(--fs-h4); }

.c-lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--body);
}

/* Large Abhaya pull statement, used in the lede and in quotes. */
.c-pull {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1.28;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.c-prose p + p { margin-top: 1.25em; }
.c-prose a { color: var(--gold-text); text-underline-offset: 3px; }

.c-meta {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}

/* Unresolved copy that still needs Joe's input. Deliberately visible. */
.c-todo {
	background: rgba(253, 181, 20, 0.16);
	border-bottom: 1px dashed var(--gold-deep);
	color: var(--gold-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	padding: 0 0.25em;
	border-radius: var(--radius);
}


/* 5. LAYOUT PRIMITIVES ====================================================
   ========================================================================= */

.c-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--wrap-pad);
}

.c-section { padding-block: var(--section-y); }

.c-band--cream { background: var(--cream); }
.c-band--ink   { background: var(--ink); color: rgba(255, 255, 255, 0.78); }
.c-band--ink h2, .c-band--ink h3, .c-band--ink h4 { color: var(--white); }
.c-band--gold  { background: var(--gold); color: var(--ink); }
.c-band--gold h2 { color: var(--ink); }

.c-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }


/* 6. CREST LINE AND EYEBROWS ==============================================
   The signature element. A 2px gold rule, 80px wide, beneath every section
   eyebrow. Static everywhere except the hero, where it draws in on load.
   Used here and nowhere else.
   ========================================================================= */

.c-eyebrow {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	margin: 0 0 var(--sp-6);
}

.c-eyebrow__rule {
	display: block;
	width: var(--rule-w);
	height: var(--rule);
	background: var(--gold);
	margin-top: var(--sp-4);
}

.c-eyebrow--light { color: rgba(255, 255, 255, 0.72); }

.c-eyebrow__rule.is-animated {
	width: 0;
	animation: crest-draw 900ms var(--ease) 250ms forwards;
}

@keyframes crest-draw {
	from { width: 0; }
	to   { width: var(--rule-w); }
}


/* 7. BUTTONS AND LINKS ====================================================
   ========================================================================= */

.c-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 1.05rem 2rem;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease);
}

.c-btn--gold {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--gold);
}
.c-btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.c-btn--ink {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}
.c-btn--ink:hover { background: #11151f; border-color: #11151f; }

.c-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.c-btn--ghost:hover { background: var(--ink); color: var(--white); }

/* Gold text link on a light background uses the accessible gold. */
.c-link-gold {
	color: var(--gold-text);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	text-decoration: none;
}
.c-link-gold:hover { text-decoration: underline; text-underline-offset: 4px; }


/* 8. HEADER, SPLIT HERO ===================================================
   Full viewport split. Left 42% solid ink, right 58% media.
   ========================================================================= */

.c-hero {
	display: grid;
	grid-template-columns: 42fr 58fr;
	min-height: 100svh;
	background: var(--ink);
}

.c-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-12);
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2.5vw, 4rem);
	background: var(--ink);
	color: rgba(255, 255, 255, 0.78);
	min-width: 0;
}

/* --- brand + nav --------------------------------------------------------- */
.c-hero__top { display: flex; flex-direction: column; gap: var(--sp-8); }

/* --- Logo lockup --------------------------------------------------------
   The guidelines require clear space on all four sides equal to the height of
   the capital C in "Crestline". Measured against the supplied artwork that cap
   height is 15.6 percent of the lockup's box height, which is what --logo-clear
   resolves to. The padding is real, not decorative: nothing may sit inside it.

   The logo is never recoloured, stretched, rotated or filtered. Width is always
   auto so the aspect ratio is the artwork's own. */
/* CLEAR SPACE AND OPTICAL ALIGNMENT
   Measured off the supplied artwork by rendering it to a canvas and reading the
   ink bounding box. Identical ratios at 1x and 1.5x, so these are real geometry:

     left bearing inside the viewBox   0.34722 x logo height
     top and bottom bearing            0.12153 x logo height
     required clear space (cap C)      0.15600 x logo height

   Two consequences.

   1. Horizontally the artwork already carries MORE transparent space than the
      guideline requires (0.347 against 0.156), so adding left padding bought no
      clear space at all and only pushed the crest out of line with the nav and
      headline beneath it. The padding is gone and a negative margin cancels the
      artwork's own bearing, so the crest's visual left edge lands exactly on the
      column's content edge. Clear space is still satisfied, by the artwork.

   2. Vertically the artwork falls just short (0.12153 against 0.156), so the
      difference is topped up with real padding.

   The negative margin only ever pulls transparent pixels outside the container,
   never ink, so nothing is visibly clipped even at 320px. */
.c-brand {
	--logo-h: 44px;
	--logo-bearing-x: 0.34722;   /* artwork's own left inset */
	--logo-bearing-y: 0.12153;   /* artwork's own top inset */
	--logo-clear: 0.156;         /* cap height of the C */

	display: inline-block;
	align-self: flex-start;
	text-decoration: none;
	line-height: 0;
	flex: none;

	/* Top up the vertical clear space the artwork does not already provide. */
	padding-block: calc(var(--logo-h) * (var(--logo-clear) - var(--logo-bearing-y)));
	padding-inline: 0;

	/* Cancel the artwork's left bearing so the crest aligns with its neighbours. */
	margin-left: calc(var(--logo-h) * var(--logo-bearing-x) * -1);
}
/* The supplied artwork carries roughly 24 percent internal padding inside its own
   viewBox, so the visible lockup is noticeably smaller than the box height. These
   values are set so the wordmark actually reads, per the guidelines' instruction
   that the logo "stand strong and be clearly readable on a page". */
.c-brand--sm { --logo-h: 44px; }
.c-brand--md { --logo-h: 58px; }
.c-brand--lg { --logo-h: 100px; }  /* hero, up 25% from 80 so it holds against the headline */

/* The inner page header runs larger than the shared --md token.
   Scoped to .c-bar rather than changed on .c-brand--md, because the footer uses
   the same size and should stay where it is. */
.c-bar .c-brand { --logo-h: 78px; }  /* up 35% from 58 */

.c-brand__img {
	height: var(--logo-h);
	width: auto;
	display: block;
}

@media (max-width: 600px) {
	.c-brand--lg { --logo-h: 78px; }  /* up 25% from 62 */
	.c-brand--md { --logo-h: 48px; }
	.c-bar .c-brand { --logo-h: 65px; }  /* up 35% from 48, footer unchanged */
}

.c-nav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-6);
}
/* Inside the hero panel the nav has only 42% of the viewport, so it runs tighter
   than it does in the header bar. */
.c-hero__panel .c-nav__list { gap: var(--sp-3) var(--sp-4); }
.c-hero__panel .c-nav__link { letter-spacing: 0.12em; }
.c-nav__link {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.72);
	padding-block: 0.25rem;
	border-bottom: var(--rule) solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-nav__link:hover,
.c-nav__link[aria-current="page"] {
	color: var(--white);
	border-bottom-color: var(--gold);
}

/* --- centre block --------------------------------------------------------
   No measure limit on the block itself. The headline needs the full panel width
   to set as two lines; the subcopy sets its own measure below. */
.c-hero__center { max-width: none; }

/* The headline must set as two lines, "Built to gather." then "Built to last.",
   inside a panel that is only 42% of the viewport. So it is sized against the
   panel rather than against the page, which is why this does not use --fs-h1. */
.c-hero__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(2rem, 3.5vw, 4.75rem);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--white);
	letter-spacing: -0.015em;
	margin-bottom: var(--sp-6);
}
.c-hero__title span { display: block; }

.c-hero__sub {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--fs-body);
	line-height: 1.7;
	margin-bottom: var(--sp-8);
	max-width: 44ch;
}

/* --- featured home index ------------------------------------------------- */
.c-index { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.c-index__list { list-style: none; }

.c-index__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	text-decoration: none;
	color: rgba(255, 255, 255, 0.82);
	transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-index__row:hover { transform: translateX(8px); color: var(--white); }

.c-index__name {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.06em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.c-index__cta {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--gold);   /* 8.50:1 on ink, so full strength brand gold is fine here */
	flex: none;
	white-space: nowrap;
}

/* --- media side ---------------------------------------------------------- */
.c-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	min-height: 100%;
	/* Holds the seam between the two panels while the slots are still
	   placeholders. Once real photography lands the image itself marks it. */
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
/* Scoped to the real media elements only. A blanket img rule here would also
   stretch the crest inside a placeholder to fill the whole panel. */
.c-hero__media .c-img__el,
.c-hero__media video,
.c-hero__media .c-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.c-hero__video { z-index: 1; opacity: 0; transition: opacity 700ms var(--ease); }
.c-hero__video.is-ready { opacity: 1; }

.c-hero__phone {
	position: absolute;
	top: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
	right: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
	z-index: 3;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	color: var(--white);
	text-decoration: none;
	background: rgba(33, 38, 50, 0.72);
	padding: 0.6rem 1rem;
	backdrop-filter: blur(6px);
	border-radius: var(--radius);
}
.c-hero__phone:hover { background: var(--ink); }

.c-hero__caption {
	position: absolute;
	bottom: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
	right: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
	z-index: 3;
	text-align: right;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.c-hero__caption span { display: block; color: var(--gold); }

/* Three still cross fade, used only when no video file is set. */
.c-hero__still {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: hero-fade 21s infinite;
}
.c-hero__still:nth-child(1) { animation-delay: 0s; }
.c-hero__still:nth-child(2) { animation-delay: 7s; }
.c-hero__still:nth-child(3) { animation-delay: 14s; }

@keyframes hero-fade {
	0%   { opacity: 0; transform: scale(1.02); }
	8%   { opacity: 1; }
	33%  { opacity: 1; }
	41%  { opacity: 0; transform: scale(1.13); }
	100% { opacity: 0; transform: scale(1.13); }
}

/* Mobile: media first at 56vh, ink panel stacked beneath. */
@media (max-width: 900px) {
	.c-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.c-hero__media {
		order: -1;
		height: 56vh;
		min-height: 320px;
	}
	.c-hero__panel { padding-block: var(--sp-12); gap: var(--sp-10, 2.5rem); }
	.c-hero__center { max-width: none; }
	.c-hero__media { border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
	/* Full width panel below 900px, so the headline can grow again. */
	.c-hero__title { font-size: clamp(2.25rem, 7.5vw, 3.5rem); }
}


/* 9. HEADER BAR, INNER PAGES ==============================================
   ========================================================================= */

/* Inner pages carry a white bar so the full colour lockup sits on its intended
   background, and so white stays the primary background across the site. Only the
   homepage hero is ink. */
.c-bar {
	background: var(--white);
	color: var(--ink);
	position: relative;
	z-index: 20;
	border-bottom: 1px solid var(--line);
}
.c-bar .c-nav__link {
	color: var(--body);
}
.c-bar .c-nav__link:hover,
.c-bar .c-nav__link[aria-current="page"] {
	color: var(--ink);
	border-bottom-color: var(--gold);
}
.c-bar .c-burger {
	border-color: var(--line);
	color: var(--ink);
}
.c-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	padding-block: var(--sp-6);
}
.c-bar__nav { display: flex; align-items: center; gap: var(--sp-8); }
.c-bar .c-nav__list { gap: var(--sp-6); }

.c-bar__phone {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	color: var(--gold-text); /* accessible gold on white, 4.91:1 */
	text-decoration: none;
	white-space: nowrap;
}
.c-bar__phone:hover { color: var(--ink); }

/* Mobile navigation toggle. */
.c-burger {
	display: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--white);
	padding: 0.6rem 0.9rem;
	cursor: pointer;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	border-radius: var(--radius);
}

@media (max-width: 900px) {
	.c-burger { display: inline-block; }

	.c-bar__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-4);
		background: var(--white);
		padding: var(--sp-6) var(--wrap-pad) var(--sp-8);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 12px 24px rgba(33, 38, 50, 0.08);
	}
	.c-bar__nav .c-nav__list { flex-direction: column; gap: var(--sp-4); width: 100%; }

	/* With JavaScript the panel is hidden until toggled. Without it the hidden
	   attribute is never set, so the panel simply stays open and stacked and
	   navigation always works. */
	.c-bar__nav[data-nav-panel][hidden] { display: none; }
}


/* 10. FOOTER ==============================================================
   ========================================================================= */

.c-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.72);
	padding-block: var(--sp-20) var(--sp-8);
	font-size: var(--fs-small);
}
.c-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-12) var(--sp-8);
}
.c-footer h2 {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--sp-6);
}
.c-footer ul { list-style: none; display: grid; gap: var(--sp-3); }
.c-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.c-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }

.c-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-top: var(--sp-16);
	padding-top: var(--sp-6);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--fs-caption);
	color: rgba(255, 255, 255, 0.56);
}
.c-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

@media (max-width: 900px) {
	.c-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.c-footer__grid { grid-template-columns: 1fr; }
}


/* 11. IMAGES AND PLACEHOLDERS =============================================
   Every slot holds its aspect ratio from the server rendered dimensions, so
   layout shift stays at zero whether the real photograph exists or not.
   ========================================================================= */

.c-img {
	margin: 0;
	position: relative;
	aspect-ratio: var(--img-w) / var(--img-h);
	background: var(--ink);
	overflow: hidden;
}
.c-img__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder: flat ink block, the real crest centred, and a caption naming the
   slot and its dimensions so it is obvious what photograph belongs here. */
.c-img--placeholder { background: var(--ink); }
.c-img__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	padding: var(--sp-4);
	text-align: center;
}
.c-img__crest {
	width: clamp(28px, 18%, 72px);
	height: auto;
}
.c-img__phlabel {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	color: var(--muted);
	line-height: 1.4;
}


/* 12. MOTION ==============================================================
   ========================================================================= */

/* Scroll reveal. Opacity and a 12px lift, 300ms. Nothing else.

   This is deliberately ADDITIVE. Content is visible by default and is only hidden
   once JavaScript has set .reveal-on on <html>, which it does after confirming that
   IntersectionObserver actually delivers callbacks. If the script never runs, fails
   to parse, or the observer never fires, the copy simply stays visible.

   Hiding content in CSS and relying on JavaScript to reveal it would reintroduce
   exactly the failure this rebuild exists to remove. */
.js-reveal.is-visible { opacity: 1; transform: none; }

.reveal-on .js-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	will-change: opacity, transform;
}
.reveal-on .js-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.js-reveal, .reveal-on .js-reveal { opacity: 1; transform: none; }
	.c-eyebrow__rule.is-animated { width: var(--rule-w); animation: none; }
	.c-hero__still { animation: none; opacity: 0; }
	.c-hero__still:first-child { opacity: 1; }
}


/* =========================================================================
   13. HOMEPAGE SECTIONS
   ========================================================================= */

/* --- Asymmetric split, used by the lede and the FAQ ---------------------- */
.c-split {
	display: grid;
	grid-template-columns: minmax(0, 22fr) minmax(0, 62fr);
	gap: var(--sp-8) clamp(2rem, 1rem + 5vw, 8rem);
	align-items: start;
}
@media (max-width: 860px) {
	.c-split { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* --- Lede ---------------------------------------------------------------- */
.c-pull--lg {
	font-size: var(--fs-h2);
	line-height: 1.18;
	margin-bottom: var(--sp-8);
	text-wrap: balance;
}
.c-lede__support {
	font-size: var(--fs-lead);
	line-height: 1.7;
	max-width: 62ch;
}

/* --- Pillars ------------------------------------------------------------- */
.c-pillars__heading { max-width: 22ch; margin-bottom: var(--sp-16); text-wrap: balance; }

.c-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
}
.c-pillar {
	padding: var(--sp-12) clamp(1.5rem, 1rem + 2vw, 3rem);
	border-right: 1px solid var(--line);
}
.c-pillar:first-child { padding-left: 0; }
.c-pillar:last-child  { border-right: 0; padding-right: 0; }

.c-pillar__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	margin-bottom: var(--sp-4);
}
.c-pillar__body { max-width: 44ch; }

@media (max-width: 860px) {
	.c-pillars__grid { grid-template-columns: 1fr; }
	.c-pillar {
		border-right: 0;
		border-bottom: 1px solid var(--line);
		padding: var(--sp-8) 0;
	}
	.c-pillar:last-child { border-bottom: 0; }
}

/* --- Problems. The strongest section, given the most room. --------------- */
.c-problems { padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.c-problems__heading { max-width: 20ch; margin-bottom: var(--sp-16); text-wrap: balance; }

.c-problems__list { display: grid; gap: 0; }

.c-problem {
	display: grid;
	grid-template-columns: minmax(0, 22fr) minmax(0, 62fr);
	gap: var(--sp-6) clamp(2rem, 1rem + 5vw, 8rem);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	border-top: 1px solid var(--line);
}
.c-problem:last-child { border-bottom: 1px solid var(--line); }

.c-problem__label { display: flex; align-items: baseline; gap: var(--sp-4); }
.c-problem__num {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-body);
	color: var(--gold-text);
	letter-spacing: 0.08em;
	flex: none;
}
.c-problem__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	line-height: 1.2;
}

.c-problem__question {
	margin: 0 0 var(--sp-6);
	border: 0;
	padding: 0;
}
.c-problem__question p {
	font-family: var(--font-head);
	font-style: italic;
	font-size: var(--fs-h3);
	line-height: 1.3;
	color: var(--ink);
	max-width: 30ch;
}
.c-problem__answer { max-width: 62ch; }

@media (max-width: 860px) {
	.c-problem { grid-template-columns: 1fr; }
}

/* --- Homes, typographic row list ----------------------------------------- */
.c-homes__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-6);
	margin-bottom: var(--sp-12);
	flex-wrap: wrap;
}

.c-rows { list-style: none; border-top: 1px solid var(--line); }
.c-rows__item { border-bottom: 1px solid var(--line); }

.c-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) minmax(0, auto) auto;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 2vw, 3rem);
	padding: var(--sp-6) var(--sp-4);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--dur) var(--ease);
}
.c-row > * { transition: transform var(--dur) var(--ease); }
.c-row:hover { background: var(--cream); }
.c-row:hover > * { transform: translateX(12px); }

.c-row__thumb { width: 64px; flex: none; }
.c-row__thumb .c-img { width: 64px; }

.c-row__name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.c-row__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
	line-height: 1.15;
}
.c-row__community {
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	color: var(--muted-text);
}
.c-row__specs {
	font-family: var(--font-ui);
	font-size: var(--fs-small);
	color: var(--body);
	white-space: nowrap;
}
.c-row__cta {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--gold-text);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.c-row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: var(--sp-4);
		padding-inline: 0;
	}
	.c-row__thumb, .c-row__thumb .c-img { width: 48px; }
	.c-row__specs { grid-column: 2; white-space: normal; }
	.c-row__cta   { grid-column: 2; }
	.c-row:hover > * { transform: none; }
}

/* --- Plans teaser -------------------------------------------------------- */
.c-plans__intro { max-width: 56ch; margin-bottom: var(--sp-12); }
.c-plans__intro h2 { margin-bottom: var(--sp-6); }

.c-plans__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
/* Two plans should read as a deliberate pair, not a grid missing its third. */
.c-plans__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.c-plans__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 460px; }

.c-plan__link { text-decoration: none; display: block; }
.c-plan__img { margin-bottom: var(--sp-4); }
.c-plan__link .c-img { transition: opacity var(--dur) var(--ease); }
.c-plan__link:hover .c-img { opacity: 0.88; }
.c-plan__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
}

.c-plan__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-6);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--line);
}
.c-plan__specs dt {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}
.c-plan__specs dd { margin: 0; font-size: var(--fs-small); color: var(--ink); }

.c-plans__more { margin-top: var(--sp-12); }

@media (max-width: 700px) {
	.c-plans__grid[data-count="2"] { grid-template-columns: 1fr; }
}

/* --- Process ------------------------------------------------------------- */
.c-process__head { margin-bottom: var(--sp-16); max-width: 64ch; }
.c-process__head h2 { margin-bottom: var(--sp-6); }
.c-process__lede { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-lead); line-height: 1.7; }

.c-process__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	counter-reset: stage;
}
.c-stage { padding-top: var(--sp-6); border-top: var(--rule) solid var(--gold); }

.c-stage__num {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--gold);
	margin-bottom: var(--sp-4);
	letter-spacing: 0.06em;
}
.c-stage__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--white);
	margin-bottom: var(--sp-3);
	line-height: 1.15;
}
.c-stage__lede { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-small); line-height: 1.65; }

.c-process__more { margin-top: var(--sp-12); }
.c-link-gold--light { color: var(--gold); }
.c-link-gold--light:hover { color: var(--white); }

@media (max-width: 1080px) {
	.c-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.c-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.c-process__grid { grid-template-columns: 1fr; }
}

/* --- Who we are ---------------------------------------------------------- */
.c-who__grid {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 55fr);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}
/* Thin gold frame, inset from the image. */
.c-frame {
	border: 1px solid var(--gold);
	padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.c-who__body h2 { margin-bottom: var(--sp-6); }
.c-who__body .c-prose { margin-bottom: var(--sp-8); }

.c-sig {
	border-top: 1px solid var(--line);
	padding-top: var(--sp-4);
	margin-bottom: var(--sp-8);
}
.c-sig__name {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
}
.c-sig__role {
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	margin-top: 0.25rem;
}

@media (max-width: 900px) {
	.c-who__grid { grid-template-columns: 1fr; }
}

/* --- Testimonials -------------------------------------------------------- */
.c-quotes__heading { max-width: 24ch; margin-bottom: var(--sp-12); text-wrap: balance; }

.c-quotes__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
}
.c-quote {
	margin: 0;
	padding: var(--sp-10, 2.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
}
.c-quote:nth-child(2n) { border-right: 0; padding-right: 0; }
.c-quote:nth-child(2n+1) { padding-left: 0; }

.c-quote__text p {
	font-family: var(--font-head);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--ink);
}
.c-quote__cite {
	margin-top: var(--sp-6);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	font-style: normal;
}

@media (max-width: 860px) {
	.c-quotes__grid { grid-template-columns: 1fr; }
	.c-quote { border-right: 0; padding-inline: 0; }
}

/* --- Service area -------------------------------------------------------- */
.c-area__head { display: grid; gap: var(--sp-6); max-width: 68ch; margin-bottom: var(--sp-12); }

.c-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.c-chip {
	display: inline-block;
	border: 1px solid var(--line);
	background: var(--white);
	padding: 0.6rem 1.1rem;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	border-radius: var(--radius);
	transition: background-color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease);
}
.c-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* --- FAQ ----------------------------------------------------------------- */
.c-faq__item { border-bottom: 1px solid var(--line); }
.c-faq__item:first-child { border-top: 1px solid var(--line); }

.c-faq__q {
	cursor: pointer;
	list-style: none;
	padding: var(--sp-6) 2.5rem var(--sp-6) 0;
	position: relative;
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	line-height: 1.25;
	color: var(--ink);
}
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__q::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 14px;
	height: var(--rule);
	background: var(--gold);
	transform: translateY(-50%);
}
.c-faq__q::before {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 14px;
	height: var(--rule);
	background: var(--gold);
	transform: translateY(-50%) rotate(90deg);
	transition: opacity var(--dur) var(--ease);
}
.c-faq__item[open] .c-faq__q::before { opacity: 0; }

.c-faq__a { padding: 0 2.5rem var(--sp-6) 0; max-width: 68ch; }

/* --- Closing CTA --------------------------------------------------------- */
.c-cta { padding-block: clamp(3.5rem, 2rem + 6vw, 6rem); }
.c-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8) var(--sp-16);
	flex-wrap: wrap;
}
.c-cta__text { max-width: 54ch; }
.c-cta__text h2 { margin-bottom: var(--sp-4); }
.c-cta__lede { color: var(--ink); font-size: var(--fs-lead); line-height: 1.6; opacity: 0.86; }

.c-cta__actions { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.c-cta__phone {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	color: var(--ink);
	text-decoration: none;
	border-bottom: var(--rule) solid rgba(33, 38, 50, 0.35);
	padding-bottom: 2px;
	border-radius: var(--radius);
}
.c-cta__phone:hover { border-bottom-color: var(--ink); }


/* --- Service area, grouped by county ------------------------------------- */
.c-area__counties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--sp-12) var(--sp-8);
}
.c-area__countyname {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: var(--sp-3);
	margin-bottom: var(--sp-6);
	border-bottom: var(--rule) solid var(--gold);
}

/* --- Who We Are page ------------------------------------------------------ */
.c-statement { border-top: 1px solid var(--line); padding-block: var(--sp-12); }
.c-statement:last-of-type { border-bottom: 1px solid var(--line); }
.c-statement__label {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	margin-bottom: var(--sp-4);
}
.c-statement__body {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	line-height: 1.42;
	color: var(--ink);
	max-width: 62ch;
}
.c-statement--promise .c-statement__body {
	font-size: var(--fs-lead);
	font-family: var(--font-ui);
	font-weight: 300;
	line-height: 1.7;
	color: var(--body);
}

.c-values { display: grid; gap: 0; border-top: 1px solid var(--line); }
.c-value {
	display: grid;
	grid-template-columns: minmax(0, 22fr) minmax(0, 62fr);
	gap: var(--sp-4) clamp(2rem, 1rem + 5vw, 8rem);
	padding-block: var(--sp-8);
	border-bottom: 1px solid var(--line);
}
.c-value__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
}
.c-value__body { max-width: 64ch; }
@media (max-width: 860px) { .c-value { grid-template-columns: 1fr; } }


/* =========================================================================
   14. CONTACT FORM
   ========================================================================= */

.c-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 55fr);
	gap: clamp(2.5rem, 1rem + 6vw, 7rem);
	align-items: start;
}
@media (max-width: 900px) { .c-contact__grid { grid-template-columns: 1fr; } }

.c-contact__facts {
	margin-top: var(--sp-12);
	display: grid;
	gap: var(--sp-6);
	border-top: 1px solid var(--line);
	padding-top: var(--sp-6);
}
.c-contact__facts dt {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	margin-bottom: 0.35rem;
}
.c-contact__facts dd { margin: 0; color: var(--ink); font-size: var(--fs-lead); }
.c-contact__facts a { color: var(--ink); text-decoration: none; border-bottom: var(--rule) solid var(--gold); }

/* --- Mode toggle ---------------------------------------------------------
   Selected fills ink with white text, unselected is outlined. */
.c-toggle {
	display: flex;
	gap: var(--sp-3);
	margin-bottom: var(--sp-8);
	flex-wrap: wrap;
}
.c-toggle__btn {
	flex: 1 1 auto;
	min-width: 10rem;
	text-align: center;
	padding: 0.95rem 1.5rem;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--radius);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-toggle__btn:hover { background: var(--cream); }
.c-toggle__btn.is-active { background: var(--ink); color: var(--white); }

/* --- Panels --------------------------------------------------------------
   Without JavaScript both forms render stacked, each with its own heading and
   submit button, separated by a rule. The script sets data-enhanced, which is
   the only thing that permits a panel to be hidden. */
.c-form__panels > .c-form + .c-form {
	margin-top: var(--sp-16);
	padding-top: var(--sp-12);
	border-top: 1px solid var(--line);
}
.c-form__panels[data-enhanced="true"] > .c-form + .c-form {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.c-form__panels[data-enhanced="true"] .c-form[hidden] { display: none; }

.c-form__heading {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
	margin-bottom: var(--sp-8);
}
/* The heading is a wayfinding aid for the no JavaScript stack. Once the toggle
   is live the selected button already says which form you are in. */
.c-form__panels[data-enhanced="true"] .c-form__heading { display: none; }

/* --- Fields --------------------------------------------------------------- */
.c-field { margin-bottom: var(--sp-6); }
.c-field__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4) var(--sp-6);
}
@media (max-width: 560px) { .c-field__row { grid-template-columns: 1fr; } }

.c-field__label,
.c-fieldset > .c-field__label {
	display: block;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--sp-3);
}
.c-field__sublabel {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	color: var(--muted-text);
	margin-bottom: var(--sp-2);
}
.c-field__req { color: var(--gold-text); }

.c-field__input {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-ui);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: 1.4;
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease);
	appearance: none;
}
.c-field__input:hover { border-color: var(--muted); }
.c-field__input:focus { border-color: var(--ink); }
.c-field__input--area { line-height: 1.6; resize: vertical; min-height: 8rem; }
.c-field__input--short { max-width: 10rem; }
.c-field__input:disabled { background: var(--cream); color: var(--muted-text); cursor: not-allowed; }

select.c-field__input {
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
	                  linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.c-field__error {
	display: block;
	margin-top: var(--sp-2);
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	color: #A01010; /* 6.3:1 on white */
}
.c-field__input[aria-invalid="true"] { border-color: #A01010; border-width: 2px; }

.c-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-8); }
.c-fieldset legend { padding: 0; }

.c-radios { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.c-radio, .c-check {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	cursor: pointer;
	font-size: var(--fs-body);
	color: var(--body);
}
.c-check { margin-top: var(--sp-4); }
.c-radio input, .c-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); flex: none; }

.c-form__submit { margin-top: var(--sp-6); }

.c-form__errors:empty { display: none; }
.c-form__errors p {
	margin-bottom: var(--sp-6);
	padding: var(--sp-4) var(--sp-6);
	border-left: var(--rule) solid #A01010;
	background: #FDF3F3;
	color: #A01010;
	font-size: var(--fs-small);
	border-radius: var(--radius);
}

.c-form__note {
	margin-top: var(--sp-8);
	font-size: var(--fs-small);
	color: var(--muted-text);
}
.c-form__note a { color: var(--gold-text); }

/* The honeypot. Hidden from people, present for bots. Never display:none,
   because some bots skip fields that are display:none. */
.c-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Thank you ----------------------------------------------------------- */
.c-thanks__next {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	flex-wrap: wrap;
	margin-top: var(--sp-12);
}

/* Address blocks inherit their surrounding type rather than the browser italic. */
.c-footer__address,
.c-contact__address {
	font-style: normal;
	line-height: 1.6;
}
.c-contact__closed {
	color: var(--muted-text);
	font-size: var(--fs-small);
}


/* =========================================================================
   15. FLOOR PLANS PAGE
   ========================================================================= */

.c-plans--index .c-plans__grid { margin-top: var(--sp-8); }

/* Three across on the index, but the two plan pair rule from the homepage
   teaser must not apply here, where the grid should fill the row. */
.c-plans--index .c-plans__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	max-width: none;
}

.c-plan { display: flex; flex-direction: column; }
.c-plan__cta { margin-top: var(--sp-6); align-self: flex-start; }
.c-plan[hidden] { display: none; }

/* --- Filters -------------------------------------------------------------- */
.c-filters {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-6);
	margin-bottom: var(--sp-8);
}
.c-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	align-items: flex-end;
}
.c-filters__field { margin-bottom: 0; min-width: 11rem; flex: 1 1 11rem; }
.c-filters__actions { display: flex; align-items: center; gap: var(--sp-6); }
.c-filters__count {
	margin-top: var(--sp-4);
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}
.c-filters__count:empty { display: none; }

.c-plans__empty {
	padding-block: var(--sp-12);
	font-size: var(--fs-lead);
	color: var(--body);
}

/* A button that has to read as a link, used inside the empty state sentence. */
.c-linkish {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--gold-text);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* =========================================================================
   16. PROCESS PAGE
   ========================================================================= */

.c-stages__list { list-style: none; }

.c-stagerow {
	display: grid;
	grid-template-columns: minmax(0, 22fr) minmax(0, 62fr);
	gap: var(--sp-6) clamp(2rem, 1rem + 5vw, 8rem);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	border-top: 1px solid var(--line);
}
.c-stagerow:last-child { border-bottom: 1px solid var(--line); }

/* The stage numeral sits under its own crest rule, matching the homepage band. */
.c-stagerow__mark { border-top: var(--rule) solid var(--gold); padding-top: var(--sp-4); }
.c-stagerow__num {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h3);
	color: var(--gold-text);
	letter-spacing: 0.06em;
	line-height: 1;
}

.c-stagerow__title {
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	color: var(--ink);
	line-height: 1.1;
	margin-bottom: var(--sp-4);
}
.c-stagerow__lede {
	font-family: var(--font-head);
	font-style: italic;
	font-size: var(--fs-lead);
	color: var(--ink);
	margin-bottom: var(--sp-4);
	max-width: 40ch;
}
.c-stagerow__copy { max-width: 62ch; }

@media (max-width: 860px) {
	.c-stagerow { grid-template-columns: 1fr; }
	.c-stagerow__mark { display: inline-block; min-width: 4rem; }
}

/* --- Communication cadence ------------------------------------------------ */
.c-cadence { display: grid; gap: var(--sp-8); }
.c-cadence dt {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--sp-2);
}
.c-cadence dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	max-width: 60ch;
}


/* =========================================================================
   17. HOMES ARCHIVE AND SINGLES
   ========================================================================= */

.c-homegrid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.c-homegrid--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.c-homecard__link { text-decoration: none; display: block; }
.c-homecard__img { margin-bottom: var(--sp-6); }
.c-homecard__link .c-img { transition: opacity var(--dur) var(--ease); }
.c-homecard__link:hover .c-img { opacity: 0.88; }

.c-homecard__title {
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	color: var(--ink);
	line-height: 1.1;
	margin-bottom: var(--sp-2);
}
.c-homecard__community {
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	color: var(--muted-text);
}
.c-homecard__specs {
	margin-top: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--body);
}

.c-tag {
	display: inline-block;
	border: 1px solid var(--gold);
	color: var(--gold-text);
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius);
	margin-right: var(--sp-2);
}

/* --- Single lead image ---------------------------------------------------- */
.c-single__media { width: 100%; }
.c-single__media .c-img { aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .c-single__media .c-img { aspect-ratio: 4 / 3; } }

.c-single__community {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}

/* --- Spec lists ----------------------------------------------------------- */
.c-specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}
.c-specs dt {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
	margin-bottom: 0.25rem;
}
.c-specs dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
	line-height: 1.1;
}

.c-gallery {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* --- Floor plan single ---------------------------------------------------- */
.c-planhead {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 40fr);
	gap: clamp(2rem, 1rem + 5vw, 5rem);
	align-items: start;
}
@media (max-width: 900px) { .c-planhead { grid-template-columns: 1fr; } }

.c-planhead__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	flex-wrap: wrap;
	margin-top: var(--sp-8);
}

.c-chips--tight { gap: var(--sp-2); }

.c-levels { display: grid; gap: 0; border-top: 1px solid var(--line); }
.c-levels > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-6);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--line);
}
.c-levels dt {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}
.c-levels dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--ink);
}
.c-levels__footprint {
	margin-top: var(--sp-6);
	font-family: var(--font-ui);
	font-size: var(--fs-caption);
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	color: var(--muted-text);
}
.c-levels__footprint strong {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
	margin-left: var(--sp-3);
}



/* =========================================================================
   18. LOGO SIZE OVERRIDES AND SUPPORTING IMAGERY
   ========================================================================= */

/* The footer matches the inner page header. Scoped rather than changed on
   .c-brand--md, so the shared token stays a sane default for any future caller.
   Nothing consumes --md at its own value today; both current consumers override. */
.c-footer .c-brand { --logo-h: 78px; }

/* --- Lede supporting image -----------------------------------------------
   Sits under the eyebrow in the narrow left column. Only ever rendered when a
   file exists, so no space is reserved and no placeholder appears.

   The image fills the rest of the column so it finishes level with the bottom of
   the supporting paragraph opposite. That means it is no longer 4:5 on screen, so
   the slot's aspect ratio is dropped here and .c-img__el crops with object-fit
   cover rather than distorting.

   The stretch is scoped to .c-lede. .c-split is shared by eight other templates
   that rely on align-items: start. */
.c-lede .c-split { align-items: stretch; }
.c-lede .c-split__aside { display: flex; flex-direction: column; }

.c-lede__media {
	margin-top: var(--sp-8);
	flex: 1 1 auto;
	display: flex;
	min-height: 18rem;   /* floor, so a short right column cannot collapse it */
}
.c-lede__media .c-img {
	flex: 1 1 auto;
	aspect-ratio: auto;  /* height comes from the column, not the slot */
	min-height: 0;
}

/* Both columns are top aligned and the row height is already the height of the
   taller column, so neither reserves trailing space. What remained was the
   section's own bottom padding meeting the next section's top padding, which
   reads as dead space under the hard bottom edge of an image in a way it does
   not under a paragraph. Halved, and only when an image is actually present, so
   the sitewide section rhythm is unchanged everywhere else. */
.c-lede--has-media { padding-bottom: calc(var(--section-y) / 2); }

/* Single column below 860px, where there is no neighbouring column to match.
   The slot's own 4:5 ratio comes back so the image keeps a sensible shape. */
@media (max-width: 860px) {
	.c-lede .c-split { align-items: start; }
	.c-lede .c-split__aside { display: block; }
	.c-lede__media { display: block; min-height: 0; }
	.c-lede__media .c-img { aspect-ratio: var(--img-w) / var(--img-h); }
	.c-lede--has-media { padding-bottom: var(--section-y); }
}

/* --- Why We Are Different, headline beside a portrait ---------------------
   The head block only becomes two columns when an image is present, so with no
   image the section is byte for byte the layout it was before. The three column
   grid that follows keeps its own border-top, which remains the divider the
   image stops above. */
.c-pillars__head--split {
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;   /* top aligns the portrait with the eyebrow */
}

/* The heading carries the space down to the divider. When the head is split,
   that margin belongs to the block as a whole rather than the heading. */
.c-pillars__head--split .c-pillars__heading { margin-bottom: 0; }
.c-pillars__head--split { margin-bottom: var(--sp-16); }

.c-pillars__media { align-self: start; }

/* Below 860px a 4:5 portrait would dominate the section, so it is hidden and the
   head returns to a single column. */
@media (max-width: 860px) {
	.c-pillars__head--split { display: block; margin-bottom: 0; }
	.c-pillars__head--split .c-pillars__heading { margin-bottom: var(--sp-16); }
	.c-pillars__media { display: none; }
}

@media (max-width: 600px) {
	.c-footer .c-brand { --logo-h: 65px; }
}


/* --- Lede crest, and the footer tagline ---------------------------------- */

/* The crest alone, sized as a mark rather than a lockup. Square, so the
   explicit width and height on the element already reserve the space. */
/* The brand tagline, sitting with the crest in the footer. Full strength gold
   is correct on ink, where it measures 8.50:1. */
.c-footer__tagline {
	margin-top: var(--sp-6);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--gold);
}


/* =========================================================================
   19. LEDE CREST, PROCESS STAGE IMAGERY, WHO WE ARE INTRO
   ========================================================================= */

/* The crest now anchors the lede column as a graphic element rather than
   sitting above the eyebrow as a small mark. It fills the aside column and
   scales down with it, capped so it never outgrows the column on wide screens. */
/* The lede aside carries the crest as a large graphic, so it needs far more
   width than the 22/62 the shared .c-split gives it. Scoped to .c-lede, so every
   other section using .c-split keeps the original ratio.

   Note the aside cannot be widened until the crest matches the right column's
   height: the crest is square, so its height IS the column width, while narrowing
   the body makes the pull statement reflow taller. Past roughly 50/50 the right
   column grows faster than the crest does. 38/56 is the point where the crest is
   substantially larger and the display statement still reads as a statement
   rather than a narrow ribbon. */
.c-lede .c-split {
	grid-template-columns: minmax(0, 38fr) minmax(0, 56fr);
}

.c-lede__crest {
	display: block;
	width: 100%;
	max-width: 520px;   /* ceiling only; the column is narrower than this in practice */
	height: auto;
	margin-top: var(--sp-8);
	margin-bottom: 0;
}

/* These two must sit AFTER the rules above, not in the earlier media block.
   .c-lede .c-split and .c-lede__crest are the same specificity there, so at equal
   weight the later rule wins and the desktop grid would survive onto phones. */
@media (max-width: 860px) {
	/* The base rule collapsing .c-split to one column is a single class, so it
	   loses to the .c-lede .c-split rebalance. Reset it explicitly. */
	.c-lede .c-split { grid-template-columns: 1fr; }

	/* Stacked, the crest would run the full width of the page. Held to a size
	   that reads as a mark alongside the copy rather than a full width panel. */
	.c-lede__crest { max-width: 200px; margin-top: var(--sp-6); }
}

/* --- Process stage image -------------------------------------------------
   Sits under the numeral, filling the left column so it matches the width of
   the gold rule that caps the column above. Only rendered when a file exists,
   so the column collapses back to the numeral alone rather than holding a gap. */
.c-stagerow__media { margin-top: var(--sp-6); }

@media (max-width: 860px) {
	/* The mark becomes an inline block on narrow screens, which would squeeze the
	   image to the numeral's width. Give it the row back. */
	.c-stagerow__media { max-width: 22rem; }
}

/* --- Who We Are intro ----------------------------------------------------
   Video left, heading and intro right, top aligned. */
.c-whointro__grid {
	display: grid;
	grid-template-columns: minmax(0, 50fr) minmax(0, 45fr);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: start;
}

/* The section below carries its own top padding, so this one does not need a
   bottom as well. Without this the two stack into a gap the width of the page. */
.c-whointro { padding-bottom: 0; }

.c-whointro__media {
	position: relative;
	overflow: hidden;
}
.c-whointro__media .c-img { margin: 0; }

/* The video sits over the poster and fades in once it can actually play, so a
   slow connection never shows a black rectangle. */
.c-whointro__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms var(--ease);
}
.c-whointro__video.is-ready { opacity: 1; }

@media (max-width: 900px) {
	.c-whointro__grid { grid-template-columns: 1fr; }
}


/* =========================================================================
   20. INTRO BANDS, WHO WE ARE SWAP
   ========================================================================= */

/* --- Intro band ----------------------------------------------------------
   Ink band, media left, copy right, echoing the homepage hero split. Full
   bleed rather than inside .c-wrap, so the media runs to the edge the way the
   homepage hero does.

   Shared by three pages: the homes archive, which adds the optional video
   layer, and the Floor Plans and Process intros, which are poster only. Any
   change here lands on all three. */
.c-archivehero {
	display: grid;
	grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
	background: var(--ink);
	align-items: stretch;
}

.c-archivehero__media {
	position: relative;
	overflow: hidden;
	min-height: 100%;
}
.c-archivehero__media .c-img {
	margin: 0;
	height: 100%;
	aspect-ratio: auto;   /* height comes from the band, not the slot */
}

.c-archivehero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms var(--ease);
}
.c-archivehero__video.is-ready { opacity: 1; }

.c-archivehero__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 3vw, 5rem);
}

@media (max-width: 900px) {
	.c-archivehero { grid-template-columns: 1fr; }
	/* Media first when stacked, matching the homepage hero. */
	.c-archivehero__media { order: -1; height: 52vh; min-height: 300px; }
	.c-archivehero__media .c-img { height: 100%; }
}

/* --- Who We Are intro, columns swapped -----------------------------------
   The text block now leads in the DOM as well as visually, so the ratio flips
   with it: the video keeps its 50, the copy keeps its 45. */
.c-whointro__grid {
	grid-template-columns: minmax(0, 45fr) minmax(0, 50fr);
}
@media (max-width: 900px) {
	.c-whointro__grid { grid-template-columns: 1fr; }
}

/* The Process intro image is no longer an aside portrait. It is now the left
   panel of a .c-archivehero band, so it needs no rules of its own. */