/* ==================================================================
   Sagestone Homes, homepage sections.

   Section layouts only. The global base already owns the reset, the
   palette, typography, buttons, nav, footer, modal shell, reveals and
   the reduced-motion block, so none of that is repeated here.

   Enqueue this conditionally on the homepage template, never globally.
   ================================================================== */

/* ── Hero timing ──────────────────────────────────────────────────
   The homepage alone has an opening curtain, so its hero waits for it.
   Every other page uses the immediate timings in the global base.

   On a repeat visit inside the same session the curtain is skipped, so
   .curtain-seen puts the hero back on the base timings. Without this the
   hero would sit blank for 3.75s waiting for a panel that never runs.
   ─────────────────────────────────────────────────────────────── */
.paint-in { animation-delay: 3750ms; }
.pi2 { animation-delay: 3920ms; }
.pi3 { animation-delay: 4090ms; }
.pi4 { animation-delay: 4260ms; }

.curtain-seen .sage-curtain { display: none; }
.curtain-seen .paint-in { animation-delay: 0ms; }
.curtain-seen .pi2 { animation-delay: 220ms; }
.curtain-seen .pi3 { animation-delay: 440ms; }
.curtain-seen .pi4 { animation-delay: 660ms; }

/* ── 1. Hero ──────────────────────────────────────────────────────
   A crossfading image carousel. Slide one is the LCP element and loads
   eager at high priority. The rest live in a <template> until the
   carousel clones them in, so the initial payload is a single image.

   Opacity only, no movement, and it stops entirely under reduced
   motion. A slow crossfade of background imagery reads as ambience
   rather than motion, and no information lives in the images.
   ─────────────────────────────────────────────────────────────── */
.hero { min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }

.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--forest-deep); }

.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 2;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(to top, rgba(10, 22, 16, .86) 0%, rgba(14, 29, 21, .34) 46%, rgba(14, 29, 21, .42) 100%);
}

.hero-type { position: relative; z-index: 4; width: 100%; padding-bottom: 168px; text-align: center; }
.hero-type h1 {
	font-size: min(10.5vw, 190px);
	line-height: .94;
	letter-spacing: .02em;
	color: var(--limestone);
	white-space: nowrap;
	padding: 0 2vw;
}

/* Centered with left/right rather than a translate, because .paint-in
   animates transform and would overwrite a translateX centering. */
.hero-sub {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	z-index: 5;
	text-align: center;
	padding: 0 clamp(40px, 9vw, 140px);
}
.hero-sub .rule { margin: 0 auto; }

/* The block is anchored to the bottom, so growing this margin pushes the
   rule up by the same amount: the gap below it grows and the gap above it
   shrinks. 28px lands the rule midway between the heading and the subhead
   instead of sitting close under the heading. The extra few pixels over
   half the old total account for the leading above the first line, which
   is dead space the eye reads as part of the gap. */
.hero-sub p {
	font-size: clamp(16.5px, 1.52vw, 20.5px);
	line-height: 1.5;
	color: var(--sandstone);
	margin-top: 28px;
	white-space: nowrap;
}

.scrollcue {
	position: absolute;
	right: var(--gutter);
	bottom: 64px;
	z-index: 5;
	writing-mode: vertical-rl;
	font-size: 10.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--sandstone);
	opacity: .65;
}

/* ── 2. Split intro ───────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 82vh; }
.split-img { position: relative; min-height: 520px; }
.split-img .ph, .split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-img .offset {
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 190px;
	height: 190px;
	border: 1px solid var(--brand-accent);
	z-index: 3;
}
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: 110px clamp(28px, 6vw, 96px); }
.split-copy h2 { font-size: clamp(30px, 3.8vw, 50px); margin: 22px 0 26px; max-width: 15ch; }
.split-copy p { margin-bottom: 18px; max-width: 52ch; }
.split-copy .rule { margin-bottom: 26px; }
.split-actions { margin-top: 16px; }

/* ── 3. Values ────────────────────────────────────────────────── */
.values { padding: 140px 0 175px; }
.values-head { text-align: center; max-width: 820px; width: 92%; margin: 0 auto 76px; }
.values-head h2 { font-size: clamp(30px, 3.8vw, 50px); margin-top: 20px; }
.vgrid { display: grid; grid-template-columns: 1fr 1fr; }
.vcell { text-align: center; padding: 56px clamp(20px, 4vw, 76px); }
.vcell:nth-child(1), .vcell:nth-child(2) { padding-top: 0; border-bottom: 1px solid rgba(169, 133, 83, .4); }
.vcell:nth-child(1), .vcell:nth-child(3) { border-right: 1px solid rgba(169, 133, 83, .4); }
.vcell svg { width: 54px; height: 54px; margin: 0 auto 24px; display: block; }
.vcell h3 { font-size: 26px; margin-bottom: 14px; }
.vcell p { font-size: 15.5px; color: var(--sandstone); opacity: .92; max-width: 38ch; margin: 0 auto; }

/* Signature element. Negative margins, not a transform, because .reveal
   sets its own transform and would overwrite the centering. */
.seam {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 7;
	line-height: 0;
	width: 184px;
	margin-left: -92px;
	margin-bottom: -92px;
	pointer-events: none;
}
.seam img { width: 184px; }

/* ── 4. Process ───────────────────────────────────────────────── */
/* flow-root stops the overhang's negative margin collapsing through the
   section, which would move the border instead of creating an overlap. */
.process { padding: 175px 0 0; display: flow-root; z-index: 2; }
.process .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.process h2 { font-size: clamp(30px, 3.8vw, 48px); margin: 22px 0 26px; max-width: 14ch; }
.process .lede { margin-bottom: 18px; max-width: 44ch; }
.pstep { display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding: 38px 0; border-bottom: 1px solid rgba(14, 29, 21, .16); }
.pstep:first-child { padding-top: 0; }
.pstep:last-child { border-bottom: 0; }
.pstep svg { width: 46px; height: 46px; }
.pstep .eyebrow { display: block; margin-bottom: 8px; }
.pstep h3 { font-size: 25px; margin-bottom: 10px; }
.pstep p { font-size: 15.5px; max-width: 46ch; opacity: .85; }

/* Crosses the border into the section below. The gallery's top padding
   absorbs the 180px, so the heading below is never covered. */
.overhang { position: relative; z-index: 4; height: 600px; width: min(1280px, 88vw); margin: 110px auto -180px; }
.overhang .ph, .overhang img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── 5. Work carousel ─────────────────────────────────────────── */
.work { padding: 300px 0 150px; overflow: hidden; z-index: 1; }
.work-head { width: min(1280px, 88vw); margin: 0 auto 52px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.work-head h2 { font-size: clamp(30px, 3.8vw, 50px); margin-top: 20px; }
.car-nav { display: flex; gap: 14px; flex: 0 0 auto; }
.car-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(243, 241, 235, .4);
	background: transparent;
	color: var(--limestone);
	font-size: 17px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.car-btn:hover { background: var(--brand-accent); color: var(--forest-deep); border-color: var(--brand-accent); }

/* The rail starts at the page gutter and runs off the right edge, so the
   fourth card is cut by the viewport rather than by a container. */
.car-rail { margin-left: var(--gutter); }
.car-track { display: flex; gap: 22px; transition: transform .9s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
/* Landscape, and wider to match, so the rail still reads as large homes. */
.card { flex: 0 0 clamp(300px, 36vw, 560px); position: relative; overflow: hidden; display: block; }
.card .ph, .card img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
.card:hover .ph { transform: scale(1.05); }  /* same zoom as the Custom Home Building strip */
.card .veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(10, 22, 16, .9) 0%, rgba(10, 22, 16, .35) 42%, transparent 70%);
}
.card .meta { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 3; }
.card .meta b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 27px; color: var(--limestone); }
.card .meta .arrowlink { color: var(--sandstone); margin-top: 14px; }

/* ── 6. Map ───────────────────────────────────────────────────── */
.map { padding: 140px 0 150px; }
.map-head { text-align: center; max-width: 820px; width: 92%; margin: 0 auto 64px; }
.map-head h2 { font-size: clamp(30px, 3.8vw, 50px); margin-top: 20px; }

/* Marker percentages are solved for the crop this exact ratio produces
   under object-fit: cover. Change the ratio and every marker drifts off
   its town. Re-solve or re-place them in the pin picker. */
.mapwrap { position: relative; width: min(1440px, 94vw); margin: 0 auto; aspect-ratio: 1440 / 631; overflow: hidden; }
.mapwrap .mapimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapwrap:after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--forest); opacity: .07; }

.pin { position: absolute; z-index: 3; transform: translate(-50%, -50%); line-height: 0; }
.pin .dot {
	position: relative;
	border: 0;
	padding: 0;
	font-family: var(--font-body);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--marker);
	box-shadow: 0 2px 8px rgba(14, 29, 21, .45);
	display: grid;
	place-items: center;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.pin .dot:before, .pin .dot:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--marker);
	animation: pulse 4.73s cubic-bezier(.2, .6, .4, 1) infinite;
}
.pin .dot:after { animation-delay: 2.37s; }
@keyframes pulse {
	0%   { transform: scale(1);   opacity: .75; }
	80%  { transform: scale(3.1); opacity: 0; }
	100% { opacity: 0; }
}
.pin label {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 11px;
	font-size: clamp(11px, 1.05vw, 16px);
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--forest);
	white-space: nowrap;
	cursor: pointer;
	text-shadow: 0 1px 3px rgba(243, 241, 235, .65);
}
.map-note { text-align: center; margin-top: 34px; font-size: 14px; opacity: .7; }

/* County section under the map, the same block as on Where We Build.
   The image fills the full height of the copy beside it. */
.mapx { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: stretch; margin-top: 110px; }
.mapx-art { position: relative; min-height: 420px; }
.mapx-art .ph { position: absolute; inset: 0; }
.mapx-copy h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 56ch; margin: 0; text-wrap: pretty; }
.mapx-copy .rule { margin: 26px 0 28px; }
.mapx-copy p { margin-bottom: 20px; max-width: 56ch; color: #4A4A44; }
.mapx-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
	.mapx { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
	.mapx-art { min-height: 0; }
	.mapx-art .ph { position: relative; inset: auto; aspect-ratio: 16 / 11; }
}

/* ── 7. Testimonials ──────────────────────────────────────────── */
.tst { padding: 150px 0; }
.tst-head { text-align: center; max-width: 960px; width: 92%; margin: 0 auto 70px; }
.tst-head h2 { font-size: clamp(32px, 4.3vw, 58px); margin-top: 20px; }
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tcard { background: rgba(243, 241, 235, .05); border: 1px solid rgba(169, 133, 83, .28); padding: 44px 38px; display: flex; flex-direction: column; margin: 0; }
.tcard .qm { font-family: var(--font-display); font-size: 58px; line-height: .6; color: var(--brand-accent); margin-bottom: 26px; display: block; }
.tcard p { font-size: 16px; color: var(--limestone); opacity: .9; flex: 1; }
.tcard cite { font-style: normal; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sandstone); margin-top: 30px; display: block; }

/* ── 8. Logo statement ────────────────────────────────────────── */
.logostmt { min-height: 78vh; display: grid; place-items: center; overflow: hidden; text-align: center; }
.logostmt .ph, .logostmt .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logostmt:before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10, 22, 16, .72); }
.logostmt .wrap { position: relative; z-index: 2; }
.logostmt img.lockup { width: min(420px, 62vw); margin: 0 auto 34px; }
.logostmt p { max-width: 560px; margin: 0 auto; color: var(--sandstone); font-size: 17.5px; }

/* ── 9. Journal ───────────────────────────────────────────────── */
.journal { padding: 150px 0; }
.journal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.journal-head h2 { font-size: clamp(30px, 3.8vw, 50px); margin-top: 20px; }
.jgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.jsmall { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.jlead { position: relative; overflow: hidden; min-height: 520px; display: block; }
.jlead .ph, .jlead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
.jlead:hover .ph, .jlead:hover img { transform: scale(1.05); }
.jlead:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to bottom, rgba(10, 22, 16, .8) 0%, rgba(10, 22, 16, .15) 55%, rgba(10, 22, 16, .55) 100%);
}
.jlead .inner { position: relative; z-index: 3; padding: 36px; }
.jlead h3 { font-size: clamp(24px, 2.3vw, 32px); color: var(--limestone); max-width: 18ch; margin-top: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
	background: var(--brand-accent);
	color: var(--forest-deep);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 6px 12px;
}
.jpost { display: block; }
.jpost figure { overflow: hidden; margin: 0; }
.jpost .ph, .jpost img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.22, .61, .36, 1); }
.jpost:hover .ph, .jpost:hover img { transform: scale(1.05); }
.jpost .tags { margin: 16px 0 10px; }
.jpost h3 { font-size: 19px; line-height: 1.35; max-width: 26ch; }

/* ── 10. Finale ───────────────────────────────────────────────── */
.finale { position: relative; overflow: visible; }
.finale-img { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.finale-img .ph, .finale-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale-img:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.84) 38%,rgba(10,22,16,.5) 56%,rgba(10,22,16,.1) 76%,rgba(10,22,16,0) 100%); }
.finale-img .wrap { position: relative; z-index: 2; }
.finale h2 { font-size: clamp(30px, 4vw, 52px); color: var(--limestone); max-width: 16ch; margin: 20px 0 22px; }
.finale p { max-width: 48ch; color: var(--sandstone); margin-bottom: 34px; }


/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.split { grid-template-columns: 1fr; }
	.split-img { min-height: 60vh; order: -1; }
	.split-copy { padding: 80px clamp(24px, 7vw, 60px); }
	.process .wrap { grid-template-columns: 1fr; gap: 52px; }
	.tst-grid { grid-template-columns: 1fr; }
	.jgrid { grid-template-columns: 1fr; }
	.jlead { min-height: 400px; }
}

@media (max-width: 768px) {
	.hero-type { padding-bottom: 40px; }
	.hero-type h1 { font-size: min(11.5vw, 60px); }
	.hero-sub { position: relative; left: auto; right: auto; bottom: auto; padding: 0 6vw 30px; }
	.hero-sub p { white-space: normal; font-size: 17.5px; margin-top: 22px; }
	.scrollcue { display: none; }
	.vgrid { grid-template-columns: 1fr; }
	.vcell { padding: 44px 0; border-right: 0 !important; border-bottom: 1px solid rgba(169, 133, 83, .4) !important; }
	.vcell:last-child { border-bottom: 0 !important; }
	.values, .map, .tst, .journal { padding: 92px 0; }
	.values { padding-bottom: 117px; }
	.process { padding-top: 117px; }
	.work { padding: 220px 0 92px; }
	.overhang { height: 340px; margin: 70px auto -120px; }
	.pin label { font-size: 10px; margin-bottom: 9px; }
	.jsmall { grid-template-columns: 1fr; }
	.journal-head, .work-head { flex-direction: column; align-items: flex-start; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	/* the first slide holds, nothing crossfades */
	.hero-slide { transition: none; }
	.pin .dot:before, .pin .dot:after { animation: none; opacity: 0; }
}