/* Ekot v4 "Showroom": image-led sections, GSAP-driven. Loads after app.css + motion.css. */
:root {
	--motion-radius: 0px;
	--motion-cursor-size: 6rem;
	--motion-cursor-bg: var(--ink);
	--motion-cursor-ink: var(--white);
	--motion-line: var(--ink);
	--t-giant: clamp(3.4rem, 9vw, 10.5rem);
	--t-big: clamp(2.6rem, 6vw, 6.5rem);
	--veil-dark: rgba(14, 48, 25, .55);
}
html.lenis { scroll-behavior: auto; }
html, body { overflow-x: clip; }
body { background: var(--white); }
img, video { border-radius: 0 !important; }

/* ---------------------------------------------------------------- Film grain + loader */
.grain { position: fixed; inset: 0; z-index: 9000; width: 100%; height: 100%; pointer-events: none; opacity: .045; mix-blend-mode: multiply; }
.loader { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-end; justify-content: space-between; padding: var(--s6) var(--gutter); background: var(--forest-deep); color: var(--white); transform-origin: top; }
.loader__n { font: 600 clamp(3rem, 8vw, 7rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.loader__wm { font: 800 1.75rem/1 var(--f-body); letter-spacing: -.05em; }
.loader.is-done { display: none; }
html:not(.js) .loader, .loader.is-skip { display: none; }

/* ---------------------------------------------------------------- Buttons (directional fill, sharp) */
.btn-x { position: relative; display: inline-flex; align-items: center; gap: var(--s4); min-height: 3.5rem; padding: 0 var(--s3) 0 var(--s5); border: 1px solid currentColor; font: 700 .8125rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate; transition: color var(--d1) var(--ease); }
.btn-x i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-style: normal; transition: transform var(--d1) var(--ease); }
.btn-x::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: translateX(-101%); transition: transform .45s var(--ease); }
.btn-x:is(:hover, :focus-visible)::before { transform: translateX(0); }
.btn-x:is(:hover, :focus-visible) i { transform: translateX(4px); }
.btn-x:active { scale: .98; }
.btn-x--light { color: var(--white); --fill: var(--white); }
.btn-x--light:is(:hover, :focus-visible) { color: var(--ink); }
.btn-x--ghost { color: var(--white); border-color: rgba(255, 255, 255, .5); --fill: var(--green); }
.btn-x--ghost:is(:hover, :focus-visible) { color: var(--forest-deep); border-color: var(--green); }
.btn-x--dark { color: var(--ink); --fill: var(--ink); }
.btn-x--dark:is(:hover, :focus-visible) { color: var(--white); }

/* ---------------------------------------------------------------- Hairline labels */
.hairline { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); font: 700 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.hairline::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .25; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.hairline.in::after { transform: scaleX(1); }
.hairline--light { color: var(--white); }

/* ---------------------------------------------------------------- Hero */
.hero-x { background: var(--forest-deep); color: var(--white); }
.hero-x__media { position: relative; }
.hero-x__media video { filter: saturate(.95) contrast(1.04); }
.hero-x__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 48, 25, .72) 0%, rgba(14, 48, 25, .42) 38%, rgba(14, 48, 25, .05) 70%), linear-gradient(180deg, rgba(14, 48, 25, .4) 0%, rgba(14, 48, 25, 0) 28%, rgba(14, 48, 25, 0) 55%, rgba(14, 48, 25, .78) 100%); }
.hero-x__top { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + var(--s5)); z-index: 2; display: flex; justify-content: space-between; gap: var(--s4); }
.hero-x__kicker { margin: 0; font: 700 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.hero-x__title { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 27%; text-shadow: 0 2px 30px rgba(14, 48, 25, .35); z-index: 2; max-width: 11ch; margin: 0; font: 600 var(--t-giant)/.92 var(--f-display); letter-spacing: -.035em; color: var(--white); text-wrap: balance; }
.hero-x__title em { font-style: italic; font-weight: 500; color: var(--white); }
.hero-x__sub { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); }
.hero-x__lede { margin: 0; max-width: 30rem; font-size: var(--t-body); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hero-x__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.vid-toggle--hero { position: absolute; right: var(--gutter); top: calc(var(--header-h) + var(--s8)); bottom: auto; z-index: 3; background: rgba(255, 255, 255, .18); color: var(--white); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.motion-word { display: inline-block; white-space: pre-wrap; }
.hero-x .hero-x__sub { opacity: 1; }

/* ---------------------------------------------------------------- Marquee */
.mq--x { padding-block: clamp(1.5rem, 3vw, 2.75rem); border-bottom: 1px solid var(--line); background: var(--white); }
.mq__w { font: 600 clamp(3.2rem, 9vw, 9rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.mq__w--o { color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-style: italic; font-weight: 500; }
.mq__track i { flex: none; width: .9rem; height: .9rem; border-radius: 50%; background: var(--green); }

/* ---------------------------------------------------------------- Intro (asymmetric editorial) */
.intro { padding-block: var(--section); background: var(--white); }
.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.intro__label { grid-column: 1 / -1; }
.intro__title { grid-column: 1 / span 8; margin: 0; font: 600 var(--t-big)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.intro__title em { font-style: italic; font-weight: 500; color: var(--green-deep); }
.intro__fig { grid-column: 9 / -1; grid-row: 2 / span 2; aspect-ratio: 4 / 5; overflow: hidden; margin-top: calc(-1 * var(--s8)); }
.intro__fig img { width: 100%; height: 100%; object-fit: cover; }
.intro__text { grid-column: 3 / span 5; margin: var(--s6) 0 0; font-size: var(--t-lede); line-height: 1.55; color: var(--muted); }

/* ---------------------------------------------------------------- Horizontal gallery */
.hscroll { background: var(--forest-deep); color: var(--white); }
.hscroll__head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + var(--s4)); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); pointer-events: none; }
.hscroll__label { flex: 1; margin: 0; color: var(--white); }
.hscroll__count { margin: 0; font: 600 1.4rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.hscroll__panel { display: flex; align-items: flex-end; }
.hscroll__panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 48, 25, .78) 0%, rgba(14, 48, 25, .1) 45%, rgba(14, 48, 25, .25) 100%); pointer-events: none; }
.hscroll__img { position: absolute; inset: 0; height: 100%; filter: saturate(.95); }
.hscroll__no { position: absolute; right: 4vw; top: 50%; z-index: 2; transform: translateY(-50%); font: 600 clamp(8rem, 26vw, 24rem)/1 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); pointer-events: none; }
.hscroll__body { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(5rem, 12vh, 8rem); max-width: 40rem; }
.hscroll__body h3 { margin: 0 0 var(--s4); font: 600 clamp(2.6rem, 6vw, 5.5rem)/.95 var(--f-display); letter-spacing: -.03em; color: var(--white); }
.hscroll__body p { margin: 0 0 var(--s6); font-size: var(--t-lede); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.hscroll__progress { bottom: var(--s6); }
.hscroll__bar { background: var(--green); height: 2px; }

/* ---------------------------------------------------------------- Scrub sequence */
.seq { background: var(--white); color: var(--ink); }
.seq__canvas { filter: saturate(.96); }
.seq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .72) 100%); pointer-events: none; }
.seq__over { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + var(--s4)); z-index: 2; }
.seq__title { margin: 0; font: 600 clamp(2.4rem, 5.6vw, 5.8rem)/.95 var(--f-display); letter-spacing: -.03em; color: var(--ink); max-width: 14ch; }
.seq__title em { font-style: italic; font-weight: 500; color: var(--green-deep); }
.seq__steps { z-index: 2; bottom: var(--s7); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.seq__step { padding-top: var(--s4); border-top: 1px solid var(--ink); font: 700 1.05rem/1.2 var(--f-body); color: var(--ink); }
.seq__step b { display: block; margin-bottom: var(--s2); font: 600 1rem/1 var(--f-display); color: var(--green-deep); }
.seq__step span { display: block; margin-top: var(--s2); font-weight: 400; font-size: .9375rem; line-height: 1.5; color: var(--text); }

/* ---------------------------------------------------------------- Split (leadership) */
.split--x { position: relative; align-items: center; gap: 0; padding: var(--section) 0; background: var(--alabaster); overflow: clip; }
.split--x .split__l { margin: 0; width: 46vw; max-width: 46vw; justify-self: end; aspect-ratio: 4 / 5; }
.split--x .split__l img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.split--x .split__r { padding: 0 var(--gutter) 0 clamp(2rem, 6vw, 6rem); }
.split__title { margin: 0 0 var(--s5); font: 600 clamp(2.4rem, 4.6vw, 4.8rem)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.split__title em { font-style: italic; font-weight: 500; color: var(--green-deep); }
.split__text { margin: 0 0 var(--s6); font-size: var(--t-lede); line-height: 1.55; color: var(--muted); max-width: 34rem; }
.split__quote { margin: 0 0 var(--s6); padding: var(--s5) 0 0; border-top: 1px solid var(--ink); max-width: 34rem; }
.split__quote p { margin: 0 0 var(--s3); font: italic 500 1.5rem/1.3 var(--f-display); color: var(--ink); }
.split__quote cite { font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--green-deep); }
.split__name { position: absolute; left: 0; right: 0; bottom: -.12em; margin: 0; font: 600 clamp(4rem, 13vw, 14rem)/1 var(--f-display); letter-spacing: -.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(19, 63, 33, .22); pointer-events: none; text-align: center; }

/* ---------------------------------------------------------------- Homes (edge-to-edge grid) */
.homes { padding-top: var(--section); background: var(--white); }
.homes__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s5); padding-bottom: var(--s7); }
.homes__head .hairline { grid-column: 1 / -1; }
.homes__title { margin: 0; font: 600 var(--t-big)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.homes__title em { font-style: italic; font-weight: 500; color: var(--green-deep); }
.homes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 24vw; gap: 2px; background: var(--white); }
.hm { position: relative; display: block; overflow: hidden; background: var(--stone); color: var(--white); text-decoration: none; cursor: none; }
.hm--lead { grid-column: span 2; grid-row: span 2; }
.hm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.02); transition: transform 1.2s var(--ease), filter .6s; }
.hm:hover img { transform: scale(1.08); }
.hm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 48, 25, .8), rgba(14, 48, 25, 0) 55%); opacity: .9; transition: opacity .4s; }
.hm__meta { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); z-index: 1; display: grid; gap: 2px; }
.hm__meta strong { font: 600 1.35rem/1.1 var(--f-display); }
.hm--lead .hm__meta strong { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.hm__meta span { font: 600 .8125rem/1.4 var(--f-body); letter-spacing: .04em; color: rgba(255, 255, 255, .85); }

/* ---------------------------------------------------------------- Doors (close) */
.doors { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--forest); color: var(--white); overflow: clip; }
.doors__panel { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; z-index: 2; will-change: transform; }
.doors__panel--l { left: 0; }
.doors__panel--r { right: 0; }
.doors__panel img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.doors__panel--l img { left: 0; }
.doors__panel--r img { right: 0; }
.doors__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--section); }
.doors__title { margin: 0 0 var(--s5); font: 600 var(--t-big)/.95 var(--f-display); letter-spacing: -.03em; color: var(--white); }
.doors__title em { font-style: italic; font-weight: 500; color: var(--green); }
.doors__copy p { font-size: var(--t-lede); line-height: 1.55; color: rgba(255, 255, 255, .85); max-width: 32rem; }
.doors__phone a { font: 600 clamp(1.6rem, 3vw, 2.4rem)/1 var(--f-display); color: var(--white); text-decoration: none; border-bottom: 1px solid var(--green); }
.form-card--x { border-radius: 0; box-shadow: none; }
.form-card--x .btn { border-radius: 0; }

/* ---------------------------------------------------------------- Footer (wordmark cropped) */
.footer { position: relative; overflow: clip; }
.footer::after { content: 'ekot'; position: absolute; left: 50%; bottom: -.28em; transform: translateX(-50%); font: 800 clamp(10rem, 28vw, 30rem)/1 var(--f-body); letter-spacing: -.06em; color: rgba(255, 255, 255, .05); pointer-events: none; }
.footer .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- Cursor label */
.cursor { font: 700 .7rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; mix-blend-mode: normal; }
.cursor__label { padding: 0 .75rem; }

/* ---------------------------------------------------------------- Header over hero */
body.home .masthead { background: transparent; color: var(--white); border-bottom-color: transparent; }
body.home .masthead:not(.is-solid) .wm, body.home .masthead:not(.is-solid) .nav a, body.home .masthead:not(.is-solid) .portal-menu > button, body.home .masthead:not(.is-solid) .masthead__phone { color: var(--white); }
body.home .masthead:not(.is-solid) .btn-primary { background: var(--white); color: var(--ink); box-shadow: none; }
body.home .masthead.is-solid { background: rgba(255, 255, 255, .92); color: var(--text); }
body.home .masthead:not(.is-solid) .menu-toggle { background: transparent; border-color: rgba(255, 255, 255, .5); }
body.home .masthead:not(.is-solid) .menu-toggle i { background: var(--white); }
body.home .masthead { position: fixed; left: 0; right: 0; }
body.home .masthead__bar { height: var(--header-h); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 960px) {
	.intro__title { grid-column: 1 / -1; }
	.intro__fig { grid-column: 7 / -1; grid-row: auto; margin-top: 0; }
	.intro__text { grid-column: 1 / span 6; margin-top: 0; }
	.hero-x__title { bottom: 30%; max-width: 12ch; }
	.hero-x__sub { flex-direction: column; align-items: flex-start; }
	.hero-x__kicker--r { display: none; }
	.hscroll__no { font-size: clamp(6rem, 30vw, 12rem); top: 28%; }
	.seq__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split--x { grid-template-columns: 1fr; padding-top: 0; }
	.split--x .split__l { width: 100%; max-width: none; justify-self: stretch; aspect-ratio: 4 / 4; }
	.split--x .split__r { padding: var(--s7) var(--gutter) 0; }
	.homes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
	.doors__inner { grid-template-columns: 1fr; }
	.doors__panel { display: none; }
}
@media (max-width: 640px) {
	.hero-x__title { font-size: clamp(2.6rem, 13vw, 4rem); bottom: 34%; }
	.hero-x__cta .btn-x { width: 100%; justify-content: space-between; }
	.intro__fig { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
	.intro__text { grid-column: 1 / -1; }
	.seq__steps { grid-template-columns: 1fr; gap: var(--s3); bottom: var(--s5); }
	.seq__step span { display: none; }
	.homes__grid { grid-template-columns: 1fr; grid-auto-rows: 70vw; }
	.hm--lead { grid-column: auto; grid-row: auto; }
	.homes__head { grid-template-columns: 1fr; }
	.mq__w { font-size: clamp(2.6rem, 12vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
	.loader { display: none; }
	.hairline::after { transform: none; }
	.doors__panel { display: none; }
	.hero-x__sub { opacity: 1 !important; visibility: visible !important; }
}

/* ---------------------------------------------------------------- Mobile hero in flow (no absolute collisions) */
@media (max-width: 960px) {
	.hero-x { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding: calc(var(--header-h) + var(--s8)) var(--gutter) var(--s7); gap: var(--s5); }
	.hero-x__media { position: absolute; inset: 0; height: 100%; }
	.hero-x__media video, .hero-x__media img { height: 100%; }
	.hero-x__top { position: absolute; top: calc(var(--header-h) + var(--s4)); }
	.hero-x__title, .hero-x__sub { position: static; inset: auto; max-width: none; padding: 0; }
	.hero-x__title { font-size: clamp(2.8rem, 12vw, 4.6rem); max-width: 12ch; }
	.hero-x__sub { display: grid; gap: var(--s5); }
	.hero-x__lede { max-width: 30rem; }
	.vid-toggle--hero { top: auto; bottom: calc(100svh - var(--header-h) - 6.5rem); }
	.seq__steps { display: flex; gap: var(--s3); bottom: var(--s4); }
	.seq__step { flex: 1; padding-top: var(--s2); font-size: .8125rem; }
	.seq__step b { margin-bottom: 2px; font-size: .875rem; }
	.seq__title { font-size: clamp(2.2rem, 9vw, 3.4rem); }
}

/* ================================================================ v4.1 typography choreography + inner pages */
.rule-grid { position: relative; }
.rule-grid::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(19, 63, 33, .09) 1px, transparent 1px); background-size: 25% 100%; mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent); }
.rule-grid > * { position: relative; }
.fig-label { position: absolute; left: calc(var(--gutter) - 2.6rem); top: 50%; z-index: 2; margin: 0; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; white-space: nowrap; font: 700 .6875rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--green-deep); }
.fig-label::before { content: ''; display: inline-block; width: 2rem; height: 1px; margin-right: .75rem; vertical-align: middle; background: var(--green-deep); }
.pull { display: grid; gap: var(--s1); margin: 0; }
.pull strong { font: 700 clamp(2.6rem, 4.6vw, 4.5rem)/.9 var(--f-body); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pull strong i { font-style: normal; color: var(--green); }
.pull span { font: 600 .8125rem/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.intro__pulls { grid-column: 1 / span 2; display: grid; gap: var(--s6); margin-top: var(--s6); align-content: start; padding-right: var(--s4); border-right: 1px solid var(--line); }
.intro__text { grid-column: 3 / span 5; }
.img-type { color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; background-size: cover; background-position: center; }

.hero-x--page { min-height: 82svh; }
.hero-x--page .hero-x__media { height: 82svh; }
.hero-x--page .hero-x__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-x--page .hero-x__top { top: var(--s5); }
.hero-x--page .hero-x__kicker a { color: inherit; text-decoration: none; }
.hero-x--page .hero-x__kicker a:hover { color: var(--green); }
.hero-x--page .hero-x__title { bottom: 24%; font-size: clamp(3rem, 8vw, 9rem); max-width: 12ch; }
.hero-x--page .hero-x__sub { bottom: 8%; }
.hero-x--page .hero-x__lede { max-width: 34rem; }

.svcx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--white); }
.svcx__list { padding: var(--section) var(--gutter); }
.svcx__list .hairline { margin-bottom: var(--s7); }
.svcx__item { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4); width: 100%; padding: var(--s5) 0; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; color: var(--muted); transition: color var(--d1); }
.svcx__item:last-child { border-bottom: 1px solid var(--line); }
.svcx__item b { font: 600 1rem/1.7 var(--f-display); color: var(--brass-deep); }
.svcx__item h3 { margin: 0; font: 600 clamp(1.5rem, 2.2vw, 2.1rem)/1.1 var(--f-display); color: inherit; }
.svcx__item p { grid-column: 2; margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: var(--t-small); line-height: 1.5; color: var(--muted); transition: max-height var(--d2) var(--ease), opacity var(--d2), margin var(--d2); }
.svcx__item[aria-selected="true"] { color: var(--ink); }
.svcx__item[aria-selected="true"] p { max-height: 6rem; opacity: 1; margin-top: var(--s2); }
.svcx__item[aria-selected="true"] b { color: var(--green-deep); }
.svcx__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--stone); }
.svcx__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity var(--d3) var(--ease), transform var(--d4) var(--ease); }
.svcx__stage img.is-on { opacity: 1; transform: scale(1); }
.svcx__stage .fig-label { left: auto; right: -2.2rem; color: var(--white); }
.svcx__stage .fig-label::before { background: var(--white); }

.halves { display: flex; min-height: 90svh; }
.half { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 4vw, 4rem) var(--gutter); color: var(--white); text-decoration: none; overflow: hidden; isolation: isolate; transition: flex-grow var(--d3) var(--ease); }
.half img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d4) var(--ease); }
.half::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 48, 25, .85) 0%, rgba(14, 48, 25, .15) 55%); }
.half:hover, .half:focus-within { flex-grow: 1.35; }
.half:hover img { transform: scale(1.05); }
.half__no { font: 600 clamp(4rem, 9vw, 8rem)/1 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6); margin-bottom: auto; }
.half h3 { margin: 0 0 var(--s3); font: 600 clamp(2rem, 3.6vw, 3.6rem)/1 var(--f-display); color: var(--white); max-width: 14ch; }
.half p { margin: 0 0 var(--s5); max-width: 30rem; color: rgba(255, 255, 255, .85); }
.half ul { display: grid; gap: var(--s2); margin: 0 0 var(--s6); }
.half li { position: relative; padding-left: var(--s5); font-size: var(--t-small); color: rgba(255, 255, 255, .9); }
.half li::before { content: ''; position: absolute; left: 0; top: .65em; width: .8rem; height: 1px; background: var(--green); }
.half .btn-x { align-self: flex-start; }
.half__tag { position: absolute; right: var(--gutter); top: var(--s6); padding: var(--s2) var(--s4); background: var(--green); color: var(--forest-deep); font: 800 .6875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }

.faqx { padding-block: var(--section); background: var(--alabaster); }
.faqx .faq { gap: clamp(2rem, 6vw, 7rem); }
.faqx .qa summary { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
.faqx__title { margin: 0; font: 600 var(--t-big)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.faqx__title em { font-style: italic; font-weight: 500; color: var(--green-deep); }

.rentals__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) var(--gutter); border-bottom: 1px solid var(--line); background: var(--white); }
.rentals__bar strong { display: inline-flex; align-items: center; gap: var(--s3); font: 600 1.4rem/1 var(--f-display); color: var(--ink); }
.rentals__links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.homes__grid--all { grid-auto-rows: 22vw; }
.homes__grid--all .hm--lg { grid-column: span 2; grid-row: span 2; }
.help-strip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s7); padding: var(--section) var(--gutter); background: var(--alabaster); }
.help-strip h2 { margin: 0 0 var(--s3); font: 600 clamp(2rem, 3.4vw, 3.2rem)/1 var(--f-display); color: var(--ink); }
.help-strip p { color: var(--muted); max-width: 36rem; }
.help-strip .eho-note { align-self: end; padding-top: var(--s4); border-top: 1px solid var(--line); }

.teamx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--white); }
.teamx__m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); color: var(--white); }
.teamx__m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); }
.teamx__m:hover img { transform: scale(1.06); }
.teamx__m::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 48, 25, .85), rgba(14, 48, 25, 0) 50%); }
.teamx__meta { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); z-index: 1; display: grid; gap: 2px; }
.teamx__meta strong { font: 600 clamp(1.3rem, 1.8vw, 1.8rem)/1.1 var(--f-display); }
.teamx__meta span { font: 700 .6875rem/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.valuesx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--white); }
.valuex { position: relative; min-height: 60svh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.75rem, 3vw, 3rem); color: var(--white); overflow: hidden; isolation: isolate; }
.valuex img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.valuex:hover img { transform: scale(1.05); }
.valuex::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 48, 25, .88) 0%, rgba(14, 48, 25, .1) 60%); }
.valuex b { font: 600 clamp(3rem, 6vw, 5.5rem)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6); margin-bottom: auto; }
.valuex h3 { margin: 0 0 var(--s2); font: 600 clamp(1.8rem, 2.6vw, 2.6rem)/1.05 var(--f-display); color: var(--white); }
.valuex p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 26rem; }

.contactx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.contactx__cards { display: grid; align-content: start; border-right: 1px solid var(--line); }
.contactx__card { display: grid; gap: var(--s1); padding: var(--s6) var(--gutter); border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--d1); }
a.contactx__card:hover { background: var(--alabaster); }
.contactx__card span { font: 800 .6875rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); }
.contactx__card strong { font: 600 clamp(1.5rem, 2.4vw, 2.2rem)/1.15 var(--f-display); color: var(--ink); }
.contactx__card p { margin: 0; color: var(--muted); }
.contactx__form { padding: var(--section) var(--gutter); }
.mapx { position: relative; height: 70svh; background: var(--stone); }
.mapx iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05) sepia(.08); }
.mapx__pin { position: absolute; left: var(--gutter); bottom: var(--s6); padding: var(--s5); background: var(--white); color: var(--ink); max-width: 20rem; box-shadow: var(--shadow-lg); }
.mapx__pin strong { display: block; font: 600 1.4rem/1.1 var(--f-display); margin-bottom: var(--s2); }

.strip-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5); padding: var(--section) var(--gutter) var(--s7); }
.strip-head .hairline { grid-column: 1 / -1; }
.strip-head h2 { margin: 0; font: 600 var(--t-big)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); max-width: 16ch; }
.strip-head h2 em { font-style: italic; font-weight: 500; color: var(--green-deep); }
.strip-head p { margin: 0; max-width: 28rem; color: var(--muted); font-size: var(--t-lede); line-height: 1.5; }

@media (max-width: 1180px) { .teamx { grid-template-columns: repeat(2, minmax(0, 1fr)); } .homes__grid--all { grid-auto-rows: 30vw; } }
@media (max-width: 960px) {
	.rule-grid::before, .fig-label { display: none; }
	.intro__pulls { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-right: 0; padding-right: 0; }
	.svcx { grid-template-columns: 1fr; }
	.svcx__stage { position: relative; height: 56svw; order: -1; }
	.halves { flex-direction: column; }
	.half { min-height: 70svh; }
	.half:hover { flex-grow: 1; }
	.valuesx { grid-template-columns: 1fr; }
	.valuex { min-height: 48svh; }
	.contactx { grid-template-columns: 1fr; }
	.contactx__cards { border-right: 0; }
	.help-strip { grid-template-columns: 1fr; }
	.hero-x--page { min-height: 72svh; }
	.hero-x--page .hero-x__media { height: 100%; }
	.hero-x--page .hero-x__title { font-size: clamp(2.6rem, 11vw, 4.4rem); }
	.homes__grid--all { grid-auto-rows: 44vw; }
	.homes__grid--all .hm--lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) { .teamx { grid-template-columns: 1fr 1fr; } .homes__grid--all { grid-auto-rows: 70vw; } .homes__grid--all .hm--lg { grid-column: auto; } }
@media (min-width: 961px) and (max-width: 1180px) { .hero-x__title { font-size: clamp(3rem, 7.5vw, 6rem); } .hscroll__body { max-width: 32rem; } .seq__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } .split--x .split__l { width: 44vw; max-width: 44vw; } }
@media (min-width: 1920px) { :root { --max: 100rem; --gutter: clamp(3rem, 5vw, 7rem); } .hero-x__title { font-size: 10.5rem; } .hscroll__body { max-width: 46rem; } .homes__grid { grid-auto-rows: 20vw; } .mq__w { font-size: 9rem; } }
@media (min-width: 2400px) { .hero-x__title { font-size: 12rem; } .hero-x__lede { font-size: 1.25rem; max-width: 36rem; } .homes__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 16vw; } }

/* ================================================================ v4.2 legibility + composition (from Kimi critique) */
/* Method captions sit on a dark band, never raw over the facade */
.seq::after { background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .25) 22%, rgba(255, 255, 255, 0) 40%, rgba(14, 48, 25, 0) 55%, rgba(14, 48, 25, .82) 100%); }
.seq__step { border-top-color: rgba(255, 255, 255, .5); color: var(--white); }
.seq__step b { color: var(--mist); }
.seq__step span { color: rgba(255, 255, 255, .85); }
/* Framed photograph with corner ticks, italic word overlapping its edge */
.intro__fig { outline: 1px solid var(--line); outline-offset: 10px; }
.intro__fig::before, .intro__fig::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--green-deep); pointer-events: none; }
.intro__fig::before { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.intro__fig::after { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }
.intro__fig { overflow: visible; }
.intro__fig img { outline: 0; }
.intro__title { position: relative; z-index: 2; grid-column: 1 / span 9; }
/* Listing photos graded as one set */
.hm img, .teamx__m img { filter: saturate(.9) contrast(1.05) brightness(.98); }
.hm::after { background: linear-gradient(0deg, rgba(14, 48, 25, .82), rgba(14, 48, 25, .05) 55%), linear-gradient(180deg, rgba(184, 146, 90, .12), rgba(184, 146, 90, 0) 40%); }
/* Closing: 55/45, outlined watermark, print-shop card */
.doors__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.doors__copy { position: relative; }
.doors__copy::before { content: 'ekot'; position: absolute; left: -.06em; top: -1.2em; font: 800 clamp(8rem, 18vw, 18rem)/1 var(--f-body); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); pointer-events: none; }
.doors__phone a { position: relative; border: 0; }
.doors__phone a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--green); transform: scaleX(.35); transform-origin: left; transition: transform .6s var(--ease); }
.doors__phone a:hover::after { transform: scaleX(1); }
.form-card--x { box-shadow: 24px 24px 0 rgba(14, 48, 25, .55); }
/* Pause control out of the headline zone */
.vid-toggle--hero { top: auto; bottom: var(--s5); right: var(--gutter); }
/* Hero scrim: directional, guaranteed contrast on the left */
.hero-x__veil { background: linear-gradient(100deg, rgba(8, 32, 24, .82) 0%, rgba(8, 32, 24, .42) 48%, rgba(8, 32, 24, .04) 100%), linear-gradient(180deg, rgba(8, 32, 24, .3) 0%, rgba(8, 32, 24, 0) 25%, rgba(8, 32, 24, 0) 60%, rgba(8, 32, 24, .7) 100%); }
/* Owners hero and inner heroes: subtle parallax hook */
.hero-x--page .hero-x__media img { will-change: transform; }

/* Phone: gallery becomes swipe-snap cards, not a pinned scroll */
@media (max-width: 640px) {
	.hscroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	.hscroll__track { width: max-content; transform: none !important; }
	.hscroll__panel { flex: 0 0 86vw; width: 86vw; min-height: 78svh; scroll-snap-align: start; margin-right: 2px; }
	.hscroll__img { width: 100%; margin: 0; }
	.hscroll__head { position: static; padding: var(--s5) var(--gutter) 0; }
	.hscroll__progress { display: none; }
	.hscroll__no { font-size: 7rem; right: var(--s4); top: var(--s7); transform: none; }
	.hscroll__body { padding-bottom: var(--s6); }
	.vid-toggle--hero { bottom: auto; top: calc(var(--header-h) + var(--s4)); }
	.doors__copy::before { display: none; }
	.form-card--x { box-shadow: 12px 12px 0 rgba(14, 48, 25, .55); }
}
/* Phone landscape: no video, two-column hero */
@media (max-height: 480px) and (orientation: landscape) {
	.hero-x video { display: none; }
	.hero-x { padding-top: calc(var(--header-h) + var(--s4)); }
	.hero-x__title { font-size: clamp(2rem, 7vw, 3rem); max-width: 14ch; }
}
/* Tablet portrait */
@media (min-width: 641px) and (max-width: 960px) {
	.hscroll__panel { min-height: 82svh; }
	.hscroll__no { font-size: clamp(7rem, 22vw, 11rem); }
	.homes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
	.hm--lead { grid-column: span 2; grid-row: span 1; }
	.doors__inner { grid-template-columns: 1fr; }
}

.seq__title { text-shadow: 0 0 28px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .8); }
.seq__label { text-shadow: 0 0 12px rgba(255, 255, 255, .9); }

/* ================================================================ v5 owner journey: pricing, calculator, documents, timeline, areas, resources */
.tbc { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; background: var(--brass-deep); color: var(--white); font: 800 .625rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
.tbc::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--white); }
.tbc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--gutter); background: var(--alabaster); border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.tbc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; font-size: var(--t-small); color: var(--muted); }

/* Pricing */
.pricing { background: var(--white); padding-bottom: var(--section); }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding-inline: var(--gutter); }
.pk { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--alabaster); color: var(--text); }
.pk--best { background: var(--forest); color: var(--white); }
.pk__tag { position: absolute; right: var(--s5); top: var(--s5); padding: .4rem .7rem; background: var(--green); color: var(--forest-deep); font: 800 .625rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.pk__name { margin: 0 0 var(--s5); font: 700 .75rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--green-deep); }
.pk--best .pk__name { color: var(--green); }
.pk__fee { margin: 0 0 var(--s4); display: grid; gap: var(--s1); }
.pk__fee strong { font: 700 clamp(3.4rem, 5vw, 5rem)/.9 var(--f-body); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pk--best .pk__fee strong { color: var(--white); }
.pk__fee i { font-style: normal; font-size: .5em; color: var(--green); vertical-align: top; margin-left: .05em; }
.pk__fee span { font-size: var(--t-small); color: var(--muted); }
.pk--best .pk__fee span { color: rgba(255, 255, 255, .78); }
.pk__who { margin: 0 0 var(--s5); font: 500 1.25rem/1.3 var(--f-display); color: var(--ink); }
.pk--best .pk__who { color: var(--white); }
.pk__terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0 0 var(--s5); padding: var(--s4) 0; border-block: 1px solid var(--line); }
.pk--best .pk__terms { border-color: var(--line-dark); }
.pk__terms dt { font: 700 .6875rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.pk--best .pk__terms dt { color: rgba(255, 255, 255, .7); }
.pk__terms dd { margin: 0; font-weight: 600; color: var(--ink); }
.pk--best .pk__terms dd { color: var(--white); }
.pk__rows { display: grid; gap: .45rem; margin: 0 0 var(--s6); }
.pk__rows li { position: relative; padding-left: 1.6rem; font-size: var(--t-small); }
.pk__rows li::before { content: ''; position: absolute; left: 0; top: .55em; width: .9rem; height: .9rem; border-radius: 50%; background: var(--green); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='black'/%3E%3Cpath d='M4.5 8.5l2.3 2.3L11.5 6' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='black'/%3E%3Cpath d='M4.5 8.5l2.3 2.3L11.5 6' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }
.pk__rows li.is-out { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(79, 91, 83, .4); }
.pk__rows li.is-out::before { background: var(--line-strong); mask: none; -webkit-mask: none; width: .6rem; height: 1px; top: .9em; left: .15rem; border-radius: 0; }
.pk--best .pk__rows li.is-out { color: rgba(255, 255, 255, .55); }
.pk .btn-x { margin-top: auto; align-self: flex-start; }

.extras { padding-block: var(--section); background: var(--alabaster); }
.extras__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.extras__list { margin: 0; border-top: 1px solid var(--ink); }
.extras__list div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.extras__list dt { font: 600 1.35rem/1.2 var(--f-display); color: var(--ink); }
.extras__list dd { margin: 0; display: grid; gap: 2px; }
.extras__list dd strong { font: 700 1.1rem/1.2 var(--f-body); color: var(--green-deep); }
.extras__list dd span { font-size: var(--t-small); color: var(--muted); }

/* Calculator */
.calc { position: relative; padding-block: var(--section); background: var(--forest); color: var(--white); overflow: clip; }
.calc::before { content: '$'; position: absolute; right: -2vw; top: -6vw; font: 700 40vw/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .08); pointer-events: none; }
.calc__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.calc__title { margin: 0 0 var(--s6); font: 600 var(--t-big)/.98 var(--f-display); letter-spacing: -.03em; color: var(--white); }
.calc__title em { font-style: italic; font-weight: 500; color: var(--green); }
.calc .field label, .calc legend { color: rgba(255, 255, 255, .85); font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s3); display: block; }
.calc__rent { display: flex; align-items: center; gap: var(--s2); border-bottom: 2px solid rgba(255, 255, 255, .5); }
.calc__rent span { font: 600 2.4rem/1 var(--f-display); color: var(--green); }
.calc__rent input { width: 100%; background: none; border: 0; color: var(--white); font: 700 clamp(2.6rem, 4.5vw, 4rem)/1.1 var(--f-body); letter-spacing: -.04em; padding: var(--s2) 0; min-height: 0; outline: none; -moz-appearance: textfield; }
.calc__rent input::-webkit-outer-spin-button, .calc__rent input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc__rent:focus-within { border-color: var(--green); }
.calc__pk { margin: var(--s6) 0 var(--s5); padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.calc__pk legend { width: 100%; }
.calc__pk label { position: relative; }
.calc__pk input { position: absolute; opacity: 0; inset: 0; }
.calc__pk span { display: inline-block; padding: .8rem 1.1rem; border: 1px solid rgba(255, 255, 255, .4); font: 700 .8125rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background var(--d1), color var(--d1), border-color var(--d1); }
.calc__pk input:checked + span { background: var(--green); color: var(--forest-deep); border-color: var(--green); }
.calc__pk input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 2px; }
.calc__opts { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.calc__opts label { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-small); color: rgba(255, 255, 255, .9); }
.calc__opts input { width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
.calc__note { font-size: .8125rem; color: rgba(255, 255, 255, .65); max-width: 30rem; }
.calc__out { padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--white); color: var(--text); box-shadow: 24px 24px 0 rgba(14, 48, 25, .55); }
.calc__big { margin: 0 0 var(--s5); display: grid; gap: var(--s1); }
.calc__big span { font: 700 .75rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); }
.calc__big strong { font: 700 clamp(3rem, 5.5vw, 5.5rem)/.95 var(--f-body); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__lines { margin: 0 0 var(--s5); border-top: 1px solid var(--ink); }
.calc__lines div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.calc__lines dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc__line--net { color: var(--muted); }
.calc__bar { height: 10px; background: var(--green-tint); overflow: hidden; margin-bottom: var(--s3); }
.calc__bar i { display: block; height: 100%; width: 10%; background: var(--ink); transition: width .6s var(--ease); }
.calc__legend { display: flex; gap: var(--s5); margin: 0 0 var(--s6); font-size: .8125rem; color: var(--muted); }
.calc__legend .k { display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; vertical-align: middle; }
.k--fee { background: var(--ink); } .k--you { background: var(--green-tint); border: 1px solid var(--line); }
.calc__out .btn-x--light { color: var(--ink); --fill: var(--ink); }
.calc__out .btn-x--light:is(:hover, :focus-visible) { color: var(--white); }

/* Documents (statement, analysis) */
.stmt, .ra { padding-block: var(--section); background: var(--white); }
.stmt__grid, .ra__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.stmt__copy .lede, .ra__copy .lede { margin-top: var(--s5); }
.doc { position: relative; padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.doc::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line); pointer-events: none; }
.doc__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s5); font: 700 .6875rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.doc__brand { display: inline-flex; align-items: flex-end; font: 800 1.4rem/1 var(--f-body); letter-spacing: -.05em; color: var(--ink); text-transform: none; }
.doc__brand .wm__o { width: .8em; height: .88em; margin: 0 .02em -.02em .03em; }
.doc__prop { margin: 0 0 var(--s5); font: 600 1.5rem/1.2 var(--f-display); color: var(--ink); }
.doc__table { width: 100%; border-collapse: collapse; }
.doc__table th { text-align: left; padding: .4rem 0; font: 700 .6875rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.doc__table th:last-child, .doc__table td:last-child { text-align: right; }
.doc__table td { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); vertical-align: top; }
.doc__table td small { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s; }
.doc__table tr:is(:hover, :focus-within) td small { max-height: 4rem; opacity: 1; }
.doc__table tbody tr { cursor: help; transition: background var(--d1); }
.doc__table tbody tr:is(:hover, :focus-within) { background: var(--alabaster); }
.doc__table td.neg { color: var(--terracotta); font-variant-numeric: tabular-nums; }
.doc__table td.pos { color: var(--green-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.doc__table tfoot td { padding-top: var(--s4); border-bottom: 0; font: 700 1.25rem/1 var(--f-body); color: var(--ink); }
.doc__notes { margin: var(--s5) 0 0; display: grid; gap: .4rem; font-size: .8125rem; color: var(--muted); }
.doc__notes li { padding-left: var(--s4); position: relative; }
.doc__notes li::before { content: ''; position: absolute; left: 0; top: .6em; width: .5rem; height: 1px; background: var(--green); }
.ra__range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); margin: var(--s4) 0 var(--s3); font: 700 1.6rem/1 var(--f-body); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ra__track { position: relative; height: 10px; background: var(--green-tint); }
.ra__fill { position: absolute; inset: 0 20% 0 10%; background: var(--green); }
.ra__mark { position: absolute; left: 58%; top: -6px; width: 2px; height: 22px; background: var(--ink); }
.ra__cap { margin: 0 0 var(--s5); font-size: var(--t-small); color: var(--muted); }
.ra__cap strong { color: var(--ink); }
.ra__season { margin-top: var(--s5); }
.ra__season small { display: block; margin-bottom: var(--s2); font: 700 .6875rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ra__bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 3px; height: 3.5rem; }
.ra__bars i { display: block; height: calc(var(--h) * 3%); background: var(--ink); opacity: .85; transform-origin: bottom; }
.ra__bars i:nth-child(n+4):nth-child(-n+9) { background: var(--green); }
.ra__months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: .3rem; font: 700 .625rem/1 var(--f-body); color: var(--muted); text-align: center; }

/* Inspections, repair flow, portal demo */
.insp { padding-bottom: var(--section); background: var(--alabaster); }
.insp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding-inline: var(--gutter); }
.insp__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.insp__shot img { width: 100%; height: 100%; object-fit: cover; }
.insp__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); padding: var(--s4) var(--s5); background: rgba(255, 255, 255, .92); color: var(--ink); }
.insp__ok { grid-row: 1 / span 2; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--green); align-self: center; }
.insp__shot figcaption strong { font: 600 1.1rem/1.2 var(--f-display); }
.insp__shot figcaption em { font: 400 .8125rem/1.3 var(--f-body); font-style: normal; color: var(--muted); }
.insp .tbc-inline { padding-top: var(--s5); }
.flow { padding-block: var(--section); background: var(--white); }
.flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--s7); border-top: 1px solid var(--ink); }
.flow__steps li { padding: var(--s6) var(--s5) var(--s6) 0; border-right: 1px solid var(--line); }
.flow__steps li:last-child { border-right: 0; }
.flow__steps li + li { padding-left: var(--s5); }
.flow__steps span { display: block; font: 600 2.6rem/1 var(--f-display); color: var(--brass-deep); margin-bottom: var(--s4); }
.flow__steps h3 { margin: 0 0 var(--s2); font: 600 1.6rem/1.1 var(--f-display); color: var(--ink); }
.flow__steps p { margin: 0; font-size: var(--t-small); color: var(--muted); }
.portalx-demo { padding-block: var(--section); background: var(--forest); color: var(--white); }
.portalx-demo__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.portalx-demo p { color: rgba(255, 255, 255, .85); max-width: 30rem; }
.portalx-demo .tbc-inline { color: rgba(255, 255, 255, .75); margin-bottom: var(--s6); }
.pd { background: var(--white); color: var(--text); box-shadow: 24px 24px 0 rgba(14, 48, 25, .55); }
.pd__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem var(--s4); border-bottom: 1px solid var(--line); font: 700 .6875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--stone); }
.pd__bar span { margin-left: var(--s3); }
.pd__body { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.pd__tile { padding: var(--s5); background: var(--white); display: grid; gap: .2rem; }
.pd__tile--wide { grid-column: 1 / -1; background: var(--alabaster); }
.pd__tile--list { grid-column: 1 / -1; }
.pd__tile small { font: 700 .625rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd__tile strong { font: 700 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--f-body); letter-spacing: -.04em; color: var(--ink); }
.pd__tile em { font-style: normal; font-size: .8125rem; color: var(--green-deep); }
.pd__tile--list span { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; }

/* Switch timeline */
.tl { padding-bottom: var(--section); background: var(--white); }
.tl__list { position: relative; margin: 0 var(--gutter); padding-left: clamp(6rem, 12vw, 10rem); }
.tl__list::before { content: ''; position: absolute; left: clamp(6rem, 12vw, 10rem); top: 0; bottom: 0; width: 1px; background: var(--ink); transform: translateX(-.5px); }
.tl__item { position: relative; display: grid; grid-template-columns: 1fr; padding: var(--s6) 0 var(--s6) var(--s7); border-bottom: 1px solid var(--line); }
.tl__day { position: absolute; left: calc(-1 * clamp(6rem, 12vw, 10rem)); top: var(--s6); width: calc(clamp(6rem, 12vw, 10rem) - var(--s5)); text-align: right; font: 700 .75rem/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); }
.tl__dot { position: absolute; left: -6px; top: calc(var(--s6) + .15rem); width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--white); }
.tl__body h3 { margin: 0 0 var(--s2); font: 600 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--f-display); color: var(--ink); }
.tl__body p { margin: 0; color: var(--muted); max-width: 40rem; }

/* Segments strip (owners page) */
.segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--white); }
.seg { position: relative; display: block; min-height: 30rem; color: var(--white); text-decoration: none; overflow: hidden; isolation: isolate; }
.seg img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.seg::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 48, 25, .9) 0%, rgba(14, 48, 25, .25) 60%); }
.seg:hover img { transform: scale(1.06); }
.seg__body { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); display: grid; gap: var(--s2); }
.seg__body b { font: 600 1rem/1 var(--f-display); color: var(--green); }
.seg__body h3 { margin: 0; font: 600 clamp(1.5rem, 2vw, 2rem)/1.1 var(--f-display); color: var(--white); }
.seg__body p { margin: 0; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .85); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; }
.seg:is(:hover, :focus-visible) .seg__body p { max-height: 10rem; opacity: 1; }

/* Areas map */
.valley { padding-block: var(--section); background: var(--white); }
.valley__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.valley__list { margin: var(--s6) 0; border-top: 1px solid var(--ink); }
.valley__list a { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding-left .4s var(--ease), background .3s; }
.valley__list a span { font: 600 .8125rem/1 var(--f-display); letter-spacing: .1em; color: var(--brass-deep); }
.valley__list a strong { font: 600 clamp(1.3rem, 1.8vw, 1.7rem)/1.1 var(--f-display); }
.valley__list a i { font-style: normal; color: var(--green-deep); transition: transform .3s var(--ease); }
.valley__list a:is(:hover, .is-on) { padding-left: var(--s3); background: var(--alabaster); }
.valley__list a:is(:hover, .is-on) i { transform: translateX(4px); }
.valley__map { color: var(--ink); }
.valley__map svg { width: 100%; height: auto; display: block; }
.valley__range { fill: var(--alabaster); stroke: var(--line-strong); stroke-width: .3; }
.valley__lake { fill: var(--mineral); stroke: var(--line-strong); stroke-width: .3; }
.valley__axis { stroke: var(--ink); stroke-width: .25; stroke-dasharray: 1 1; opacity: .5; }
.valley__axlabel { font: 700 2.2px var(--f-body); letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.valley__pin { cursor: pointer; }
.valley__pin text { font: 600 3.2px var(--f-display); fill: var(--ink); transition: fill .3s; }
.valley__dot { fill: var(--ink); transition: fill .3s; }
.valley__ring { fill: none; stroke: var(--green); stroke-width: .3; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s; }
.valley__pin.is-on .valley__dot, .valley__pin:hover .valley__dot { fill: var(--green); }
.valley__pin.is-on .valley__ring, .valley__pin:hover .valley__ring { opacity: 1; animation: ping 2s var(--ease) infinite; }
.valley__pin.is-on text { fill: var(--green-deep); }
.valley__hq rect { fill: var(--green); }
.valley__hq text { font: 700 2.2px var(--f-body); letter-spacing: .1em; text-transform: uppercase; fill: var(--green-deep); }
.areas-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: var(--white); }
.areas-grid .valuex { min-height: 56svh; text-decoration: none; }
.area { padding-block: var(--section); background: var(--white); }
.area__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.area .creds { margin-top: var(--s5); }
.area__note { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); margin: 0; padding: var(--s4) 0; border-bottom: 1px solid var(--line); color: var(--text); }
.area__note b { font: 600 1rem/1.6 var(--f-display); color: var(--brass-deep); }

/* Resources */
.arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 26vw; gap: 2px; background: var(--white); }
.art { position: relative; display: block; overflow: hidden; color: var(--white); text-decoration: none; background: var(--stone); }
.art--lead { grid-column: span 2; grid-row: span 2; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); filter: saturate(.9); }
.art:hover img { transform: scale(1.05); }
.art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 48, 25, .9), rgba(14, 48, 25, .1) 60%); }
.art__meta { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s5); z-index: 1; display: grid; gap: .3rem; }
.art__meta small { font: 700 .6875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.art__meta strong { font: 600 clamp(1.3rem, 1.8vw, 1.9rem)/1.1 var(--f-display); }
.art--lead .art__meta strong { font-size: clamp(1.8rem, 3vw, 3rem); }
.art__meta em { font-style: normal; font-size: .875rem; color: rgba(255, 255, 255, .85); max-width: 34rem; }
.arts--more { grid-auto-rows: 20vw; padding-top: 2px; }
.post__head { padding-top: var(--s8); background: var(--white); }
.crumbs--post { margin-bottom: var(--s5); }
.post__title { margin: 0 0 var(--s4); font: 600 clamp(2.4rem, 5vw, 5rem)/.98 var(--f-display); letter-spacing: -.03em; color: var(--ink); max-width: 20ch; }
.post__dek { margin: 0 0 var(--s4); font-size: var(--t-lede); color: var(--muted); max-width: 40rem; }
.post__by { margin: 0 0 var(--s7); font: 700 .75rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.post__fig { aspect-ratio: 21 / 8; overflow: hidden; }
.post__fig img { width: 100%; height: 100%; object-fit: cover; }
.post__grid { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: clamp(2rem, 6vw, 7rem); padding-block: var(--section); }
.post__aside { position: sticky; top: calc(var(--header-h) + var(--s5)); align-self: start; }
.post__toc { counter-reset: t; margin: 0; }
.post__toc li { counter-increment: t; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.post__toc li::before { content: counter(t, decimal-leading-zero) '  '; font-weight: 700; color: var(--brass-deep); }
.post__body { max-width: 42rem; }
.post__body h2 { margin: var(--s7) 0 var(--s3); font: 600 clamp(1.7rem, 2.6vw, 2.4rem)/1.1 var(--f-display); color: var(--ink); }
.post__body h2:first-child { margin-top: 0; }
.post__body p, .post__body li { font-size: 1.125rem; line-height: 1.7; color: var(--text); }
.post__body ul { margin: 0 0 var(--s5); display: grid; gap: var(--s2); }
.post__body li { position: relative; padding-left: var(--s5); }
.post__body li::before { content: ''; position: absolute; left: 0; top: .85em; width: .8rem; height: 1px; background: var(--green); }
.post__next { margin-top: var(--s7); }

/* Page transition curtain */
.curtain { position: fixed; inset: 0; z-index: 9400; background: var(--forest-deep); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.curtain.is-in { transform: scaleY(1); transition: transform .45s cubic-bezier(.77, 0, .175, 1); pointer-events: auto; }

@media (max-width: 1180px) { .pk-grid { grid-template-columns: 1fr; } .arts { grid-template-columns: 1fr 1fr; grid-auto-rows: 36vw; } .art--lead { grid-column: span 2; grid-row: span 1; } .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .segs { grid-template-columns: 1fr 1fr; } .seg { min-height: 24rem; } .flow__steps { grid-template-columns: 1fr 1fr; } .flow__steps li:nth-child(2) { border-right: 0; } .flow__steps li:nth-child(3) { padding-left: 0; } }
@media (max-width: 960px) {
	.extras__grid, .calc__grid, .stmt__grid, .ra__grid, .portalx-demo__grid, .valley__grid, .area__grid, .post__grid { grid-template-columns: 1fr; }
	.insp__grid { grid-template-columns: 1fr 1fr; }
	.tl__list { padding-left: var(--s6); margin-inline: var(--gutter); }
	.tl__list::before { left: var(--s6); }
	.tl__day { position: static; width: auto; text-align: left; margin-bottom: var(--s2); display: block; }
	.tl__item { padding-left: var(--s5); }
	.tl__dot { left: calc(var(--s6) - 6px - var(--s5)); left: -6px; }
	.post__aside { position: static; }
	.calc__out { box-shadow: 12px 12px 0 rgba(14, 48, 25, .55); }
}
@media (max-width: 640px) { .segs, .insp__grid, .arts, .areas-grid, .flow__steps { grid-template-columns: 1fr; } .arts { grid-auto-rows: 70vw; } .art--lead { grid-column: auto; } .flow__steps li { border-right: 0; padding-left: 0; } .seg .seg__body p { max-height: none; opacity: 1; } .pk__terms { grid-template-columns: 1fr; } .areas-grid .valuex { min-height: 42svh; } .calc::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ================================================================ v5.1 touch + phone layer (loads last, wins the cascade) */
@media (hover: none), (max-width: 960px) {
	/* No content-driven column growth anywhere */
	.split--x, .intro__grid, .doors__inner, .strip-head, .stmt__grid, .ra__grid, .calc__grid, .extras__grid, .valley__grid, .area__grid, .post__grid, .portalx-demo__grid, .contactx, .help-strip, .homes__head { grid-template-columns: minmax(0, 1fr); }
	.split--x > *, .intro__grid > *, .doors__inner > *, .strip-head > *, .calc__grid > *, .stmt__grid > *, .ra__grid > * { min-width: 0; grid-column: 1 / -1; grid-row: auto; }
	.split--x .split__l, .split--x .split__r { transform: none !important; width: 100%; max-width: 100%; justify-self: stretch; }
	.split--x .split__r { padding: var(--s7) var(--gutter) var(--s6); }
	.split__name { font-size: clamp(2.6rem, 14vw, 5rem); bottom: -.1em; }
	.intro__fig { margin-top: 0; aspect-ratio: 16 / 10; }
	.intro__pulls { grid-template-columns: 1fr 1fr; border-right: 0; padding-right: 0; margin-top: var(--s5); }
	.intro__text { margin-top: var(--s5); }
	.doors { min-height: 0; }
	.doors__inner { padding-block: var(--s8); gap: var(--s7); }
	.doors__copy::before { display: none; }
	.form-card .field-row, .field-row { grid-template-columns: minmax(0, 1fr); }
	.form-card--x, .calc__out, .pd { box-shadow: 10px 10px 0 rgba(14, 48, 25, .55); }
	.strip-head p { max-width: none; }
	/* Keep the typographic furniture on phones instead of hiding it */
	.rule-grid::before { display: block; background-size: 50% 100%; }
	.fig-label { display: block; position: static; transform: none; padding: var(--s6) var(--gutter) 0; }
	.svcx__stage .fig-label { position: absolute; left: var(--s4); bottom: var(--s4); top: auto; padding: 0; }
	/* Method: not pinned on touch; a flowing chapter with a living canvas */
	.seq { display: grid; min-height: 0; background: var(--white); }
	.seq::after { display: none; }
	.seq__over { position: static; order: -1; padding: var(--s8) var(--gutter) var(--s5); }
	.seq__canvas { height: 64svh; }
	.seq__steps { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding: var(--s6) var(--gutter) var(--s8); margin: 0; width: auto; background: var(--forest); }
	.seq__step { opacity: 1 !important; visibility: visible !important; font-size: .9375rem; }
	.seq__step span { display: block; font-size: .8125rem; }
	/* Horizontal gallery: swipe cards with a live counter */
	.hscroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.hscroll__track { width: max-content; transform: none !important; }
	.hscroll__panel { flex: 0 0 88vw; width: 88vw; min-height: 76svh; scroll-snap-align: start; margin-right: 2px; }
	.hscroll__img { width: 100%; margin: 0; transform: none !important; }
	.hscroll__head { position: sticky; left: 0; top: auto; width: 100vw; padding: var(--s5) var(--gutter) 0; pointer-events: none; }
	.hscroll__progress { display: none; }
	.hscroll__no { font-size: 7rem; right: var(--s4); top: var(--s7); transform: none; }
	.hscroll__body { padding: 0 var(--s5) var(--s6); }
	/* Hero flows; type sized for a hand */
	.hero-x__title { font-size: clamp(2.4rem, 10.5vw, 3.6rem); max-width: 12ch; }
	.hero-x--page .hero-x__title { font-size: clamp(2.3rem, 9.5vw, 3.4rem); }
	/* Services list: always-visible copy, no hover dependency */
	.svcx__item p { max-height: none; opacity: 1; margin-top: var(--s2); }
	.svcx__item { color: var(--ink); }
	.svcx__stage { height: 60svw; }
	/* Documents fit the screen */
	.doc { padding: 1.1rem; overflow-x: auto; }
	.doc::before { inset: 6px; }
	.doc__head { flex-wrap: wrap; }
	.doc__table td small { max-height: none; opacity: 1; }
	.doc__table--comps { min-width: 20rem; }
	.ra__range { font-size: 1.2rem; gap: var(--s3); }
	/* Calculator */
	.calc__rent input { flex: 1 1 0; width: 0; min-width: 0; font-size: clamp(2.2rem, 10vw, 3rem); }
	.calc__out { padding: 1.25rem; }
	.calc__big strong { font-size: clamp(2.4rem, 11vw, 3.4rem); }
	.calc__lines dd { flex-shrink: 0; }
	.calc__legend { flex-wrap: wrap; gap: var(--s3); }
	/* Segments and tiles */
	.segs { grid-template-columns: 1fr 1fr; }
	.seg { min-height: 20rem; }
	.seg__body p { max-height: none; opacity: 1; }
	/* Menu is its own scroller and never traps the page */
	.menu { overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
	/* Marquee: steady, calmer */
	.mq__w { font-size: clamp(2.4rem, 11vw, 4rem); }
	/* Touch: no hover-only states */
	[data-cursor] { cursor: auto; }
	.hm, .art, .valuex, .half, .seg { cursor: pointer; }
	.valley__ring { animation: none; opacity: .6; }
}
@media (max-width: 640px) {
	.segs { grid-template-columns: 1fr; }
	.seq__steps { grid-template-columns: 1fr; gap: var(--s3); }
	.teamx { grid-template-columns: 1fr 1fr; }
	.hscroll__panel { flex-basis: 90vw; width: 90vw; }
}

@media (max-width: 640px) { .split__name { font-size: 7.4vw; letter-spacing: -.04em; } }

/* ================================================================ v6 "Pop": contrast, depth, plates. Loads last. */
:root { --offset: 14px; --offset-sm: 8px; }

/* 1. Text is ink, not gray */
.lede, .muted, .intro__text, .split__text, .strip-head p, .hscroll__body p, .doors__copy p, .pk__fee span, .extras__list dd span, .svcx__item p, .qa p, .area__note, .post__body p, .post__body li, .post__dek, .help-strip p, .calc__note, .tl__body p, .flow__steps p, .seg__body p, .half p, .art__meta em, .valuex p, .hm__meta span, .teamx__meta span, .contactx__card p, .pd__tile em, .form-note, .field label { color: var(--text); }
.calc__note, .doors__copy p, .hscroll__body p, .half p, .valuex p, .seg__body p, .art__meta em, .hm__meta span { color: var(--white); }
.pk--best .pk__fee span, .pk--best .pk__rows li, .portalx-demo p { color: var(--white); }
.hero-x__lede { color: var(--white); font-weight: 500; }
.footer, .footer address, .footer__about p, .footer__legal, .footer__legal a { color: var(--white); }
.footer__legal { opacity: .9; }

/* 2. Headings pop: marker sweep under every emphasized phrase */
.faqx__title em, .strip-head h2 em, .calc__title em, .intro__title em, .split__title em, .homes__title em, .doors__title em, .seq__title em, .help-strip h2 em, .post__title em, .hero-x__title em, .tl h2 em, .pricing h2 em, .cx__title em, .vi__title em, .more__title em {
	background-image: linear-gradient(transparent 60%, var(--green) 60%, var(--green) 88%, transparent 88%); background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0; padding: 0 .08em; margin: 0 -.04em; transition: background-size 1s var(--ease) .25s;
}
.in em, [data-mask].in em, .in .intro__title em { background-size: 100% 100%; }
.calc__title em, .doors__title em, .hero-x__title em { background-image: linear-gradient(transparent 60%, rgba(59, 177, 73, .55) 60%, rgba(59, 177, 73, .55) 88%, transparent 88%); }
html.js .hero-x__title em { background-size: 100% 100%; transition-delay: 1.1s; }
html:not(.js) em { background-size: 100% 100% !important; }

/* 3. Labels become numbered green chips */
.hairline { gap: var(--s3); }
.hairline::before { content: ''; display: none; }
.hairline { font-weight: 800; color: var(--ink); }
.hairline .no, .hairline b { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .5rem; background: var(--green); color: var(--forest-deep); font: 800 .75rem/1 var(--f-body); letter-spacing: .08em; }
.hairline--light { color: var(--white); }
.hairline::after { opacity: .35; }

/* 4. Ghost numerals behind section titles */
.strip-head, .faqx header, .svcx__list, .stmt__copy, .ra__copy, .valley__copy, .area .wrap > div:first-child, .extras__grid > div:first-child, .flow .wrap, .method__head, .homes__head { position: relative; }
.ghost { position: absolute; left: calc(var(--gutter) - .06em); top: -.18em; z-index: 0; font: 700 clamp(7rem, 16vw, 15rem)/1 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(19, 63, 33, .14); pointer-events: none; user-select: none; }
.ghost--light { -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.strip-head > *, .faqx header > * { position: relative; z-index: 1; }

/* 5. Buttons that stand off the page */
.btn-x { border-width: 0; font-weight: 800; }
.btn-x i { background: rgba(255, 255, 255, .18); }
.btn-x--light { background: var(--white); color: var(--ink); --fill: var(--green); box-shadow: var(--offset-sm) var(--offset-sm) 0 rgba(14, 48, 25, .45); }
.btn-x--light i { background: var(--green); color: var(--forest-deep); }
.btn-x--light:is(:hover, :focus-visible) { color: var(--forest-deep); }
.btn-x--ghost { background: rgba(14, 48, 25, .45); color: var(--white); border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); --fill: var(--white); }
.btn-x--ghost i { background: rgba(255, 255, 255, .22); }
.btn-x--ghost:is(:hover, :focus-visible) { color: var(--ink); border-color: var(--white); }
.btn-x--dark { background: var(--ink); color: var(--white); --fill: var(--green); box-shadow: var(--offset-sm) var(--offset-sm) 0 rgba(59, 177, 73, .55); }
.btn-x--dark i { background: var(--green); color: var(--forest-deep); }
.btn-x--dark:is(:hover, :focus-visible) { color: var(--forest-deep); }
.btn-x--dark:is(:hover, :focus-visible) i { background: var(--ink); color: var(--white); }
.btn-primary { background: var(--green); color: var(--forest-deep); box-shadow: 6px 6px 0 rgba(19, 63, 33, .9); border-radius: 0; font-weight: 800; }
.btn-primary:is(:hover, :focus-visible) { background: var(--ink); color: var(--white); box-shadow: 6px 6px 0 var(--green); transform: translate(-2px, -2px); }
.btn-outline, .btn-dark { border-radius: 0; font-weight: 800; }
.link { color: var(--ink); border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.link::after { color: var(--green-deep); }
.masthead .btn-primary { border-radius: 0; box-shadow: 4px 4px 0 rgba(19, 63, 33, .9); }
body.home .masthead:not(.is-solid) .btn-primary { background: var(--green); color: var(--forest-deep); box-shadow: 4px 4px 0 rgba(255, 255, 255, .9); }

/* 6. Plates: text sits on something */
.intro__title { padding: var(--s6) var(--s6) var(--s6) 0; }
.intro__plate { grid-column: 1 / span 7; grid-row: 2; align-self: start; padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--white); border: 1px solid var(--line); box-shadow: var(--offset) var(--offset) 0 var(--green); position: relative; z-index: 2; margin-right: calc(-1 * var(--s8)); }
.intro__plate .intro__title { padding: 0; grid-column: auto; margin-bottom: var(--s5); }
.intro__plate .intro__pulls { grid-template-columns: 1fr 1fr; margin: 0; padding: var(--s5) 0 0; border: 0; border-top: 1px solid var(--line); }
.intro__fig { grid-column: 7 / -1; grid-row: 2 / span 2; margin-top: var(--s7); }
.intro__text { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--s6); padding-right: var(--s8); font-size: var(--t-lede); }
.faqx { background: var(--white); }
.faqx .faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.faqx__side { margin-top: var(--s7); aspect-ratio: 4 / 5; overflow: hidden; box-shadow: var(--offset) var(--offset) 0 var(--green); }
.faqx__side img { width: 100%; height: 100%; object-fit: cover; }
.faqx .qa { background: var(--alabaster); border: 0; margin-bottom: 2px; padding: 0 var(--s5); }
.faqx .qa:first-child { border: 0; }
.faqx .qa summary { color: var(--ink); font-weight: 600; }
.faqx .qa[open] { background: var(--white); box-shadow: inset 4px 0 0 var(--green); }
.faqx .qa p { color: var(--text); }
.extras__list div { background: var(--white); border: 0; margin-bottom: 2px; padding: var(--s5); }
.extras__list { border: 0; }
.extras__list dd strong { color: var(--ink); background: var(--green-tint); padding: .1rem .5rem; justify-self: start; }
.area__notes { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--forest); color: var(--white); box-shadow: var(--offset) var(--offset) 0 var(--green); }
.area__notes .hairline { color: var(--white); }
.area__note { color: var(--white); border-color: var(--line-dark); }
.area__note b { color: var(--green); }
.tl__body { padding: var(--s5) var(--s6); background: var(--alabaster); border-left: 4px solid var(--green); }
.tl__item { border: 0; }
.stmt__copy .lede, .ra__copy .lede { padding: var(--s5); background: var(--alabaster); border-left: 4px solid var(--green); }
.step { box-shadow: var(--offset-sm) var(--offset-sm) 0 var(--green-tint); border-color: var(--line); }
.pk { box-shadow: inset 0 0 0 1px var(--line); }
.pk--best { box-shadow: var(--offset) var(--offset) 0 var(--green); z-index: 1; }
.svcx__item[aria-selected="true"] { background: var(--alabaster); padding-left: var(--s4); box-shadow: inset 4px 0 0 var(--green); }
.contactx__card strong { color: var(--ink); }
.help-strip { background: var(--forest); color: var(--white); }
.help-strip h2, .help-strip p, .help-strip a, .help-strip .eho-note { color: var(--white); }
.help-strip .hairline { color: var(--white); }
.help-strip h2 em { color: var(--green); }
.calc__out { box-shadow: var(--offset) var(--offset) 0 var(--green); }
.form-card--x { box-shadow: var(--offset) var(--offset) 0 var(--green); }
.pd { box-shadow: var(--offset) var(--offset) 0 var(--green); }
.doc { box-shadow: var(--offset) var(--offset) 0 var(--green); border-color: var(--ink); }

/* 7. Hero: floating glass chips + live availability chip in header */
.hero-x__chips { position: absolute; right: var(--gutter); bottom: 34%; z-index: 3; display: grid; gap: var(--s3); justify-items: end; }
.chip { display: inline-flex; align-items: center; gap: var(--s3); padding: .7rem 1rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); font: 700 .8125rem/1 var(--f-body); letter-spacing: .04em; text-decoration: none; opacity: 0; transform: translateY(14px); animation: chipIn .8s var(--ease) forwards; }
.chip:nth-child(2) { animation-delay: 1.3s; } .chip:nth-child(1) { animation-delay: 1.1s; } .chip:nth-child(3) { animation-delay: 1.5s; }
.chip strong { font-size: 1.1rem; color: var(--green); }
.chip .hero__dot { margin: 0; }
@keyframes chipIn { to { opacity: 1; transform: none; } }
.live-chip { display: inline-flex; align-items: center; gap: .5rem; margin-right: var(--s4); padding: .45rem .8rem; background: var(--green-tint); color: var(--ink); font: 800 .75rem/1 var(--f-body); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
body.home .masthead:not(.is-solid) .live-chip { background: rgba(255, 255, 255, .16); color: var(--white); border: 1px solid rgba(255, 255, 255, .4); }

/* 8. Compare mode in the calculator */
.calc__compare { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .25); }
.calc__compare > label { display: flex; align-items: center; gap: var(--s3); font: 700 .8125rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--white); cursor: pointer; }
.calc__compare input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
.calc__cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.calc__cmp label { display: grid; gap: .3rem; font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.calc__cmp input { min-height: 2.6rem; padding: 0 .6rem; font: 700 1.1rem/1 var(--f-body); color: var(--white); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; -moz-appearance: textfield; }
.calc__cmp input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc__vs { display: grid; gap: var(--s3); margin: var(--s5) 0; }
.calc__vs div { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: var(--s3); font: 700 .8125rem/1 var(--f-body); }
.calc__vs i { display: block; height: 14px; background: var(--ink); transform-origin: left; transition: width .6s var(--ease); }
.calc__vs .is-them i { background: var(--stone); }
.calc__vs strong { font-variant-numeric: tabular-nums; }
.calc__save { margin: 0 0 var(--s5); padding: var(--s4); background: var(--green-tint); color: var(--ink); font-weight: 700; }
.calc__save b { color: var(--green-deep); }

/* 9. Testimonial plate */
.voice { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 70svh; background: var(--forest); color: var(--white); overflow: clip; }
.voice__media { position: relative; }
.voice__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice__body { padding: clamp(2.5rem, 6vw, 6rem) var(--gutter); display: grid; align-content: center; gap: var(--s5); }
.voice__mark { font: 700 8rem/0.6 var(--f-display); color: var(--green); }
.voice__quote { margin: 0; font: italic 500 clamp(1.6rem, 2.6vw, 2.6rem)/1.25 var(--f-display); color: var(--white); max-width: 28ch; }
.voice__who { display: inline-flex; align-items: center; gap: var(--s3); font: 800 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.voice__who b { padding: .3rem .6rem; background: var(--green); color: var(--forest-deep); }
.voice__plate { position: absolute; left: var(--gutter); bottom: var(--s6); padding: var(--s4) var(--s5); background: var(--white); color: var(--ink); box-shadow: var(--offset-sm) var(--offset-sm) 0 var(--green); font: 700 .8125rem/1.3 var(--f-body); }

@media (max-width: 960px) {
	.intro__plate { grid-column: 1 / -1; margin-right: 0; }
	.intro__fig { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s5); }
	.intro__text { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
	.faqx .faq { grid-template-columns: minmax(0, 1fr); }
	.faqx__side { display: none; }
	.hero-x__chips { position: static; justify-items: start; grid-auto-flow: column; gap: var(--s2); margin-top: var(--s2); }
	.chip { padding: .55rem .75rem; font-size: .75rem; }
	.voice { grid-template-columns: 1fr; }
	.voice__media { min-height: 48svh; }
	.voice__plate { display: none; }
	.calc__cmp { grid-template-columns: 1fr; }
	.ghost { font-size: 5.5rem; top: -.1em; }
	:root { --offset: 10px; }
}
@media (max-width: 1180px) { .live-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .chip { opacity: 1; transform: none; animation: none; } em { background-size: 100% 100% !important; } }

/* v6.0.1 header fit, hero underline, phone chips */
.masthead .btn { white-space: nowrap; }
@media (max-width: 1560px) { .live-chip { display: none; } }
@media (max-width: 1360px) { .masthead__phone { display: none; } }
.hero-x__title em { background-image: linear-gradient(transparent 86%, var(--green) 86%, var(--green) 96%, transparent 96%); padding: 0; margin: 0; }
.hero-x--page .hero-x__title em { background-image: linear-gradient(transparent 86%, var(--green) 86%, var(--green) 96%, transparent 96%); }
@media (max-width: 960px) {
	.hero-x__chips { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--s2); margin: var(--s2) 0 0; padding-bottom: 2px; }
	.hero-x__chips::-webkit-scrollbar { display: none; }
	.chip { flex: none; white-space: nowrap; }
	.vid-toggle--hero { top: calc(var(--header-h) + var(--s4)); bottom: auto; }
}

.ghost { top: .02em; }

/* Marker sweep: a highlighter under the letters, not a bar through them */
.faqx__title em, .strip-head h2 em, .calc__title em, .intro__title em, .split__title em, .homes__title em, .doors__title em, .seq__title em, .help-strip h2 em, .post__title em, .tl h2 em, .pricing h2 em { background-image: linear-gradient(transparent 72%, rgba(59, 177, 73, .5) 72%, rgba(59, 177, 73, .5) 93%, transparent 93%); }

/* v6.1 blog */
.post__toc a { text-decoration: none; color: inherit; }
.post__toc a:hover { color: var(--green-deep); }
.post__share { margin-top: var(--s6); display: grid; gap: var(--s2); }
.post__share a { font: 700 .8125rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--green); width: max-content; padding-bottom: 2px; }
.post__disclaimer { margin-top: var(--s7); padding: var(--s4) var(--s5); background: var(--alabaster); border-left: 4px solid var(--green); font-size: .875rem; color: var(--text); }
.post__body h2 { scroll-margin-top: calc(var(--header-h) + var(--s5)); }
.post__body a { color: var(--green-deep); font-weight: 600; }
.rentals__bar .btn-x { min-height: 2.6rem; padding-left: var(--s4); }
.post__body .btn-x, .post__body .btn-x span { color: var(--white); font-weight: 700; }
.more { padding-top: var(--s8); background: var(--white); }
.more__head { padding-bottom: var(--s5); }
.more__title { font: 500 clamp(2rem, 3.4vw, 3rem)/1.05 var(--f-display); color: var(--ink); margin: var(--s3) 0 0; }
.more__title em { font-style: italic; color: var(--green-deep); }

/* v6.2 careers, hiring, cookie bar */
.cx { padding: var(--s9) 0; background: var(--white); }
.cx--process { background: var(--alabaster); }
.cx__head { margin-bottom: var(--s6); }
.cx__title { font: 500 clamp(2.2rem, 4.2vw, 3.8rem)/1.02 var(--f-display); color: var(--ink); margin: var(--s3) 0 0; letter-spacing: -.01em; }
.cx__title em { font-style: italic; color: var(--green-deep); }
.cx__group { font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); margin: var(--s7) 0 var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.cx__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.cxj { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); background: var(--white); color: var(--ink); text-decoration: none; border: 1px solid var(--line); box-shadow: var(--offset-sm) var(--offset-sm) 0 var(--alabaster); transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease), border-color var(--d2); }
.cxj:hover, .cxj:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--offset) var(--offset) 0 var(--green); border-color: var(--ink); }
.cxj__meta { font: 700 .6875rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.cxj__title { font: 600 clamp(1.4rem, 1.8vw, 1.8rem)/1.1 var(--f-display); }
.cxj__sum { color: var(--text); font-size: .95rem; line-height: 1.55; }
.cxj__go { font: 800 .75rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-top: var(--s2); }
.cxj__go i { color: var(--green); margin-left: .3em; }
.cxp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); counter-reset: none; }
.cxp li { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); background: var(--white); border-top: 3px solid var(--green); }
.cxp b { font: 700 .75rem/1 var(--f-body); color: var(--green-deep); letter-spacing: .12em; }
.cxp strong { font: 600 1.35rem/1.15 var(--f-display); color: var(--ink); }
.cxp span { color: var(--text); font-size: .95rem; line-height: 1.55; }
.cx__note { margin-top: var(--s6); font-size: .875rem; color: var(--text); max-width: 60rem; }
.jx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); align-items: start; }
.jx__facts { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s5); padding: var(--s5); background: var(--alabaster); border-left: 4px solid var(--green); }
.jx__facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); }
.jx__facts dt { font: 700 .6875rem/1.6 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.jx__facts dd { margin: 0; color: var(--ink); }
.jx__body h2 { font: 500 clamp(1.6rem, 2.2vw, 2.2rem)/1.1 var(--f-display); color: var(--ink); margin: var(--s6) 0 var(--s3); }
.jx__body h2:first-child { margin-top: 0; }
.jx__body p { color: var(--ink); line-height: 1.65; }
.apply { display: grid; gap: var(--s4); padding: var(--s6); background: var(--white); border: 1px solid var(--line); box-shadow: var(--offset) var(--offset) 0 var(--green); max-width: 64rem; }
.apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.apply__wide { grid-column: 1 / -1; }
.apply .field { display: grid; gap: .35rem; }
.apply .field > span { font: 700 .6875rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); }
.apply .field input, .apply .field select, .apply .field textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font: 500 1rem/1.4 var(--f-body); border-radius: 0; }
.apply .field input:focus-visible, .apply .field select:focus-visible, .apply .field textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.apply .field input[type=file] { padding: .55rem .9rem; }
.apply__msg { min-height: 1.4em; font-weight: 600; color: var(--red); }
.apply__msg.is-ok { color: var(--green-deep); font: 500 1.4rem/1.3 var(--f-display); }
.vi { padding: var(--s9) 0; background: var(--white); min-height: 70vh; }
.vi__wrap { max-width: 52rem; }
.vi__title { font: 500 clamp(2rem, 4vw, 3.4rem)/1.05 var(--f-display); color: var(--ink); margin: var(--s3) 0 var(--s4); }
.vi__title em { font-style: italic; color: var(--green-deep); }
.vi__steps { list-style: none; margin: var(--s6) 0; padding: 0; display: grid; gap: var(--s3); }
.vi__steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s4); padding: var(--s4); background: var(--alabaster); border-left: 3px solid var(--green); }
.vi__steps b { font: 700 .75rem/1.6 var(--f-body); color: var(--green-deep); letter-spacing: .12em; grid-row: span 2; }
.vi__steps strong { font: 600 1.2rem/1.2 var(--f-display); color: var(--ink); }
.vi__steps span { color: var(--text); font-size: .95rem; }
.vi__consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: .95rem; color: var(--ink); margin: var(--s5) 0; }
.vi__consent input { width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--green); }
.vi__tip, .vi__resume, .vi__empty { font-size: .9rem; color: var(--text); }
.vi__resume { font-weight: 600; color: var(--green-deep); }
.vi__rail { display: flex; gap: .4rem; margin-bottom: var(--s4); }
.vi__rail span { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--line); font: 700 .75rem/1 var(--f-body); color: var(--text); }
.vi__rail .is-now { background: var(--ink); color: var(--white); border-color: var(--ink); }
.vi__rail .is-done { background: var(--green); color: var(--forest-deep); border-color: var(--green); }
.vi__qtext { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.2 var(--f-display); color: var(--ink); margin: var(--s2) 0 var(--s4); }
.vi__cam { position: relative; aspect-ratio: 3 / 4; max-height: 70vh; width: min(100%, 30rem); background: black; overflow: hidden; margin-bottom: var(--s4); }
.vi__cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#vLive { transform: scaleX(-1); }
.vi__ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: var(--white); }
.vi__ring svg { position: absolute; width: 9rem; height: 9rem; transform: rotate(-90deg); }
.vi__ring circle { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 4; }
.vi__ring #ringArc { stroke: var(--green); transition: stroke-dashoffset 1s linear; }
.vi__ring b { font: 600 3rem/1 var(--f-display); position: relative; }
.vi__ring small { position: absolute; margin-top: 7rem; font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.vi__rec { position: absolute; top: var(--s3); left: var(--s3); display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem; background: rgba(0, 0, 0, .55); color: var(--white); font: 700 .8rem/1 var(--f-body); }
.vi__rec i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); animation: viblink 1s steps(2) infinite; }
@keyframes viblink { to { opacity: .2; } }
.vi__up { display: grid; gap: .4rem; margin: var(--s3) 0; max-width: 30rem; }
.vi__up div { height: 6px; background: var(--alabaster); }
.vi__up i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.vi__up span { font-size: .85rem; color: var(--text); }
.vi__err { color: var(--red); font-weight: 600; min-height: 1.4em; }
.btnrow { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.slots { display: grid; gap: var(--s5); margin: var(--s6) 0; }
.slots__day h2 { font: 500 1.3rem/1.2 var(--f-display); color: var(--ink); margin: 0 0 var(--s3); }
.slot { display: inline-grid; gap: .2rem; margin: 0 var(--s2) var(--s2) 0; padding: .7rem 1rem; background: var(--white); border: 1px solid var(--ink); color: var(--ink); cursor: pointer; text-align: left; font-family: var(--f-body); }
.slot b { font-weight: 800; font-size: .95rem; }
.slot small { font-size: .75rem; color: var(--text); }
.slot:hover, .slot.is-sel { background: var(--ink); color: var(--white); }
.slot.is-sel small, .slot:hover small { color: var(--mist); }
.slot:disabled { opacity: .5; cursor: wait; }
.vi__msg { font-weight: 600; color: var(--green-deep); min-height: 1.4em; }
@media (max-width: 1100px) { .cx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cxp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jx { grid-template-columns: 1fr; } .jx__facts { position: static; } }
@media (max-width: 640px) { .cx__grid, .cxp, .apply__grid { grid-template-columns: 1fr; } .apply { padding: var(--s4); } .cx { padding: var(--s7) 0; } }

/* Cookie consent (CookieAdmin): a compact bottom bar instead of a modal that covers the phone screen. */
.cookieadmin_law_container.cookieadmin_box { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: env(safe-area-inset-bottom, 0) 0 0 !important; background: var(--ink) !important; color: var(--white) !important; border: 0 !important; border-top: 3px solid var(--green) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: 9998 !important; font-family: var(--f-body) !important; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_inside { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem !important; max-width: 1400px; margin: 0 auto !important; padding: .9rem clamp(1rem, 4vw, 2.5rem) !important; background: transparent !important; }
.cookieadmin_law_container.cookieadmin_box #cookieadmin_notice_title { display: none !important; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_notice_con { flex: 1 1 24rem !important; margin: 0 !important; }
.cookieadmin_law_container.cookieadmin_box #cookieadmin_notice { margin: 0 !important; font-size: .85rem !important; line-height: 1.45 !important; color: var(--white) !important; }
.cookieadmin_law_container.cookieadmin_box #cookieadmin_notice a, .cookieadmin_law_container.cookieadmin_box #cookieadmin_notice b { color: var(--mist) !important; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_btns { display: flex !important; gap: .5rem !important; margin: 0 !important; flex-wrap: wrap; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_btn { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; margin: 0 !important; min-height: 2.6rem !important; padding: 0 1rem !important; border-radius: 0 !important; font: 800 .75rem/1 var(--f-body) !important; letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_accept_btn { background: var(--green) !important; color: var(--forest-deep) !important; border: 0 !important; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_reject_btn, .cookieadmin_law_container.cookieadmin_box .cookieadmin_customize_btn { background: transparent !important; color: var(--white) !important; border: 1px solid rgba(255, 255, 255, .5) !important; }
.cookieadmin_law_container.cookieadmin_box .cookieadmin_btn:focus-visible { outline: 3px solid var(--green) !important; outline-offset: 2px; }
@media (max-width: 640px) { .cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_inside { padding: .75rem 1rem !important; } .cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_btns { width: 100%; } .cookieadmin_law_container.cookieadmin_box .cookieadmin_btn { flex: 1 1 auto; } .cookieadmin_law_container.cookieadmin_box #cookieadmin_notice { font-size: .8rem !important; } }

/* v6.3 Kimi round 8 fixes */
/* #roles takes the dark stage from .cx (v7) */
.cxj { border: 1px solid var(--ink); box-shadow: var(--offset-sm) var(--offset-sm) 0 var(--ink); }
.cxp b { font: 500 clamp(2rem, 3vw, 3rem)/1 var(--f-display); color: var(--green-deep); letter-spacing: 0; }
.vi__steps b { font: 500 1.8rem/1.2 var(--f-display); letter-spacing: 0; }
.jx__body h2 { display: flex; align-items: baseline; gap: var(--s3); }
.jx__body h2::before { content: ""; flex: none; width: 2.4rem; height: 3px; background: var(--green); transform: translateY(-.35em); }
#b-stop { background: var(--red); color: var(--white); }
#b-stop i { background: var(--white); color: var(--red); }
.vi__ring b { font-size: clamp(3rem, 14vw, 5rem); }
.slot:focus-visible, .cxj:focus-visible, .vi__consent input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (max-width: 640px) {
	.apply > .btn-x { width: 100%; justify-content: center; min-height: 3.75rem; }
	.vi__cam { width: 100%; }
	.vi__ctl .btn-x, .vi__ctl .btnrow label.btn-x { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.vi__ring #ringArc, .vi__up i { transition: none; }
	.vi__rec i { animation: none; }
}

/* v6.4 pipeline pages */
.cxp--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apply .form-status { min-height: 1.4em; font-weight: 600; color: var(--red); }
.apply .form-status.is-ok { color: var(--green-deep); font: 500 1.4rem/1.3 var(--f-display); }
@media (max-width: 1100px) { .cxp--3 { grid-template-columns: 1fr; } }

/* v6.5 hero on short wide screens + platform section */
.hero-x__title { font-size: min(var(--t-giant), 13vh); }
.hero-x--page .hero-x__title { font-size: min(clamp(3rem, 8vw, 9rem), 14vh); }
@media (max-width: 960px) { .hero-x__title, .hero-x--page .hero-x__title { font-size: clamp(2.3rem, 9.5vw, 3.4rem); } }
.tech { padding: var(--s9) 0; background: var(--ink); color: var(--white); }
.tech .hairline { color: var(--mist); }
.tech__inner { display: grid; gap: var(--s5); }
.tech__title { font: 500 clamp(2.2rem, 4.4vw, 4rem)/1.02 var(--f-display); margin: 0; max-width: 18ch; letter-spacing: -.01em; }
.tech__title em { font-style: italic; color: var(--green); }
.tech__lede { max-width: 56ch; font-size: 1.05rem; line-height: 1.6; color: var(--mist); margin: 0; }
.tech__grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: rgba(255, 255, 255, .12); }
.tech__grid li { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); background: var(--ink); }
.tech__grid b { font: 500 2.4rem/1 var(--f-display); color: var(--green); }
.tech__grid strong { font: 600 1.25rem/1.2 var(--f-display); color: var(--white); }
.tech__grid span { font-size: .95rem; line-height: 1.55; color: var(--mist); }
@media (max-width: 1100px) { .tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tech__grid { grid-template-columns: 1fr; } .tech { padding: var(--s7) 0; } }

/* v6.6 review page */
.rvx { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.rvx__btn { display: grid; gap: .35rem; padding: var(--s5); background: var(--white); color: var(--ink); text-decoration: none; border: 1px solid var(--ink); box-shadow: var(--offset-sm) var(--offset-sm) 0 var(--ink); transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.rvx__btn strong { font: 600 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--f-display); }
.rvx__btn span { font-size: .9rem; color: var(--text); }
.rvx__btn--g { background: var(--ink); color: var(--white); box-shadow: var(--offset) var(--offset) 0 var(--green); }
.rvx__btn--g span { color: var(--mist); }
.rvx__btn:hover, .rvx__btn:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--offset) var(--offset) 0 var(--green); }
.rvx__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------- v6.7 investors journey + time-zone band, sell halves ---------- */
.svcx--journey .cx__note { margin-top: var(--s6); font-size: var(--t-small); color: var(--muted); }
.tz { position: relative; overflow: hidden; padding: var(--section) 0; background: var(--forest-deep); color: var(--white); }
.tz__title { margin: 0 0 var(--s7); max-width: 16ch; font: 600 clamp(2.2rem, 4.4vw, 4.4rem)/1.02 var(--f-display); letter-spacing: -.02em; color: var(--white); }
.tz__title em { font-style: italic; color: var(--green); }
.tz__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .18); }
.tz__row li { position: relative; display: grid; gap: var(--s1); align-content: start; padding: var(--s5) var(--s4) var(--s5) 0; border-right: 1px solid rgba(255, 255, 255, .18); }
.tz__row li + li { padding-left: var(--s4); }
.tz__row li:last-child { border-right: 0; }
.tz__city { font: 800 .6875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.tz__time { font: 600 clamp(2.6rem, 5vw, 5rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--white); }
.tz__night .tz__time { color: rgba(255, 255, 255, .55); }
.tz__home .tz__time, .tz__home.tz__night .tz__time { color: var(--green); }
.tz__day { font-size: var(--t-small); color: rgba(255, 255, 255, .7); }
.tz__note { position: absolute; top: var(--s3); right: var(--s4); padding: .3rem .55rem; background: var(--green); color: var(--forest-deep); font: 800 .625rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.tz__foot { margin: var(--s6) 0 0; max-width: 46rem; color: rgba(255, 255, 255, .78); }
.halves--3 .half { min-height: 92svh; }
.halves--3 .half h3 { font-size: clamp(1.8rem, 2.8vw, 3rem); }
.cx--disclose { padding: var(--s7) 0; }
.cx--disclose .cx__note { margin: 0; max-width: 60rem; }
@media (max-width: 960px) {
	.tz__row { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
	.tz__row li, .tz__row li + li { padding-left: 0; border-right: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
	.tz__home { grid-column: 1 / -1; }
	.tz__row li:nth-child(even) { padding-right: var(--s4); border-right: 1px solid rgba(255, 255, 255, .18); }
	.tz__row li:nth-child(odd):not(.tz__home) { padding-left: var(--s4); }
	.halves--3 .half { min-height: 64svh; }
}

/* v6.7.2 audit fixes */
/* Inner-page heroes are pinned for one viewport on pointer devices. At 82svh the next section peeked in, then
   jumped away when the pin took hold (layout shift on every page) and left a blank strip under the pinned film. */
@media (hover: hover) and (min-width: 961px) { html.js .hero-x--page { min-height: 100svh; } html.js .hero-x--page .hero-x__media { height: 100svh; } }
/* Cookie bar on phones: one row of buttons and tighter copy, so it stops covering the hero buttons. */
@media (max-width: 640px) {
	.cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_inside { padding: .55rem .75rem !important; gap: .45rem !important; }
	.cookieadmin_law_container.cookieadmin_box #cookieadmin_notice { font-size: .75rem !important; line-height: 1.35 !important; }
	.cookieadmin_law_container.cookieadmin_box .cookieadmin_consent_btns { flex-wrap: nowrap !important; gap: .4rem !important; }
	.cookieadmin_law_container.cookieadmin_box .cookieadmin_btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 2.75rem !important; padding: 0 .3rem !important; font-size: .6875rem !important; letter-spacing: .06em !important; white-space: nowrap; }
}

/* v6.8.0 */
/* Rentals grid: feature tiles are chosen in PHP (ekot_listings_mosaic) so the last row always closes. */
.homes__grid--all { grid-auto-flow: dense; }
@media (min-width: 961px) { .homes__grid--all .hm--lg-r { grid-column: 3 / span 2; } }
@media (min-width: 2400px) { .homes__grid--all { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 20vw; } }
.hm--bare { background: var(--forest-deep); }
.hm--bare::after { opacity: .5; }
.hm__soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s2); padding-bottom: var(--s7); }
.hm__soon .wm { color: var(--white); opacity: .9; }
.hm__soon .wm__label { display: none; }
.hm__soon em { font: 500 italic 1.05rem/1.2 var(--f-display); color: var(--mist); }

/* Review page: a note from the broker beside her portrait, then one button per platform. */
.rv { background: var(--alabaster); }
.rv__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s6), 6vw, var(--s9)); align-items: start; max-width: 76rem; }
.rv__photo { position: sticky; top: calc(var(--header-h) + var(--s5)); margin: 0; box-shadow: var(--offset) var(--offset) 0 var(--green); }
.rv__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.rv__photo figcaption { position: absolute; left: 0; bottom: 0; display: grid; gap: .15rem; padding: var(--s3) var(--s4); background: var(--ink); color: var(--white); font: 600 1.3rem/1.2 var(--f-display); }
.rv__photo figcaption span { font: 700 .6875rem/1.6 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.rv .vi__title { margin-bottom: var(--s5); }
.rv__note { margin: 0; padding: 0 0 0 var(--s5); border-left: 3px solid var(--green); }
.rv__note p { margin: 0 0 var(--s3); font: 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.4 var(--f-display); color: var(--ink); }
.rv__note footer { display: grid; gap: .2rem; margin-top: var(--s4); font-size: .875rem; color: var(--text); }
.rv__sig { font: 500 italic clamp(2rem, 3vw, 2.6rem)/1 var(--f-display); color: var(--green-deep); }
.rv .rvx { margin: var(--s6) 0 var(--s5); }
.rv__direct { font-size: .95rem; color: var(--text); }
.rv__direct a { color: var(--green-deep); font-weight: 700; }
@media (max-width: 860px) {
	.rv__grid { grid-template-columns: 1fr; }
	.rv__photo { position: relative; top: auto; max-width: 20rem; }
	.rv__note { padding-left: var(--s4); }
}

/* ================================================================ v7 "Atelier": quiet luxury. Loads last.
   Owner review, Nov 10: the hard offset shadows read as cheap double borders. They are replaced everywhere by
   a soft deep shadow, a brass foil edge and an inset keyline, and the block buttons by ring-arrow buttons. */
:root {
	--lift: 0 1px 2px rgba(14, 48, 25, .06), 0 24px 48px -24px rgba(14, 48, 25, .32);
	--lift-lg: 0 2px 4px rgba(14, 48, 25, .06), 0 44px 80px -36px rgba(14, 48, 25, .42);
	--foil: inset 0 2px 0 var(--brass);
	--keyline: rgba(184, 146, 90, .75);
	--keyline-light: rgba(255, 255, 255, .55);
	--hair-light: rgba(255, 255, 255, .16);
	--track: .18em;
}

/* Buttons: one family. Flat fill, fine tracking, the arrow in a thin ring, colour inverts on hover. */
.btn-x { min-height: 3.5rem; padding: 0 var(--s3) 0 var(--s5); gap: var(--s4); border: 0; font: 700 .75rem/1 var(--f-body); letter-spacing: var(--track); }
.btn-x i, .btn-x--light i, .btn-x--dark i, .btn-x--ghost i { width: 2.5rem; height: 2.5rem; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; transition: transform var(--d1) var(--ease), background var(--d1) var(--ease), color var(--d1) var(--ease); }
.btn-x--dark { background: var(--ink); color: var(--white); --fill: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-x--dark:is(:hover, :focus-visible) { color: var(--ink); }
.btn-x--dark:is(:hover, :focus-visible) i { background: var(--ink); color: var(--white); }
.btn-x--light { background: var(--white); color: var(--ink); --fill: var(--ink); box-shadow: inset 0 0 0 1px var(--white); }
.btn-x--light:is(:hover, :focus-visible) { color: var(--white); }
.btn-x--light:is(:hover, :focus-visible) i { background: var(--white); color: var(--ink); }
.btn-x--ghost { box-shadow: none; }
.btn, .btn-primary, .btn-outline, .btn-dark, .btn-light { border-radius: 0; font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.btn:is(:hover, :focus-visible) { transform: none; }
.btn-primary, .masthead .btn-primary { background: var(--ink); color: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-primary:is(:hover, :focus-visible), .masthead .btn-primary:is(:hover, :focus-visible) { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transform: none; }
body.home .masthead:not(.is-solid) .btn-primary { background: rgba(14, 48, 25, .35); color: var(--white); box-shadow: inset 0 0 0 1px var(--keyline-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.home .masthead:not(.is-solid) .btn-primary:is(:hover, :focus-visible) { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--white); }

/* Plates and cards: depth from a soft shadow and a brass foil edge, never a second outline. */
.intro__plate, .calc__out, .form-card--x, .pd, .doc, .apply, .pk--best { box-shadow: var(--foil), var(--lift-lg); border-color: var(--line); }
.area__notes { box-shadow: var(--foil), var(--lift-lg); }
.voice__plate { box-shadow: var(--foil), var(--lift); }
.step { box-shadow: none; }
.cxj { border: 1px solid var(--line); box-shadow: none; }
.cxj:hover, .cxj:focus-visible { border-color: var(--brass); box-shadow: var(--lift); }
.tl__body, .stmt__copy .lede, .ra__copy .lede { border-left: 1px solid var(--brass); }
.faqx .qa[open] { box-shadow: inset 1px 0 0 var(--brass); }
.svcx__item[aria-selected="true"] { box-shadow: inset 1px 0 0 var(--brass); }

/* Framed photographs: a soft shadow and a keyline set inside the picture, as on a mounted print. */
.faqx__side, .rv__photo { position: relative; box-shadow: var(--lift-lg); }
.rv__photo { position: sticky; }
.faqx__side::after, .rv__photo::after { content: ''; position: absolute; inset: .75rem; border: 1px solid var(--keyline-light); pointer-events: none; }
.rv__photo figcaption { left: .75rem; bottom: .75rem; }
@media (max-width: 860px) { .rv__photo { position: relative; } }

/* Emphasis in headings: a fine rule under the phrase, not a highlighter band. */
.faqx__title em, .strip-head h2 em, .intro__title em, .split__title em, .homes__title em, .seq__title em, .help-strip h2 em, .post__title em, .tl h2 em, .pricing h2 em, .cx__title em, .vi__title em, .more__title em, .calc__title em, .doors__title em { background-image: linear-gradient(transparent 90%, var(--brass) 90%, var(--brass) 94%, transparent 94%); }

/* Review page: two invitation cards. */
.rv .rvx { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); }
.rvx__btn { position: relative; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s4); padding: var(--s5) var(--s5) var(--s5) var(--s6); background: var(--white); border: 0; box-shadow: var(--lift); transition: box-shadow var(--d2) var(--ease), background var(--d2) var(--ease); }
.rvx__btn::before { content: ''; position: absolute; inset: .5rem; border: 1px solid var(--line); pointer-events: none; transition: border-color var(--d2) var(--ease); }
.rvx__btn::after { content: '\2192'; grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid currentColor; border-radius: 50%; font: 400 1rem/1 var(--f-body); transition: background var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d2) var(--ease); }
.rvx__btn strong, .rvx__btn span { grid-column: 1; }
.rvx__btn strong { font-size: clamp(1.5rem, 2.1vw, 2rem); }
.rvx__btn span { font: 700 .6875rem/1.5 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); }
.rvx__btn--g { background: linear-gradient(140deg, var(--forest), var(--forest-deep)); color: var(--white); box-shadow: var(--lift-lg); }
.rvx__btn--g::before { border-color: var(--keyline); }
.rvx__btn--g span { color: var(--mist); }
.rvx__btn:hover, .rvx__btn:focus-visible { transform: none; box-shadow: var(--lift-lg); }
.rvx__btn:is(:hover, :focus-visible)::before { border-color: var(--brass); }
.rvx__btn:is(:hover, :focus-visible)::after { background: var(--ink); color: var(--white); transform: translateX(4px); }
.rvx__btn--g:is(:hover, :focus-visible)::after { background: var(--white); color: var(--ink); }

/* v7 stages (owner review, Nov 10: no writing on a bare background, nothing tan, cards must come forward).
   Every text section stands on one of two grounds. Dark: deep forest with a blueprint grid, the house mark in
   brass and a green light that follows the pointer. Tint: pale brand green with the same grid. All copy either
   reverses to white on the dark stage or sits on a white card lifted off the ground. */
:root {
	--monogram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -1 32 34' fill='none' stroke='%23B8925A' stroke-opacity='.55' stroke-width='.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5 14 3l11 9.5'/%3E%3Ccircle cx='14' cy='19' r='8.6'/%3E%3Ccircle cx='14' cy='19' r='10.4' stroke-width='.05'/%3E%3C/svg%3E");
	--grid-light: rgba(255, 255, 255, .05);
	--grid-dark: rgba(19, 63, 33, .07);
	--glow: rgba(59, 177, 73, .34);
	--glow-0: rgba(59, 177, 73, 0);
	--sheen: rgba(255, 255, 255, .55);
	--grid-step: 4.5rem;
}
.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz {
	position: relative;
	color: var(--white);
	background-color: var(--forest-deep);
	background-image:
		radial-gradient(36rem 36rem at var(--mx, 84%) var(--my, 6%), var(--glow), var(--glow-0) 68%),
		var(--monogram),
		linear-gradient(var(--grid-light) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-light) 1px, transparent 1px),
		linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 72%);
	background-size: 100% 100%, 38rem auto, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step), 100% 100%;
	background-position: 0 0, right -11rem top 2rem, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
	border-top: 1px solid var(--brass);
}
.extras, .valley, .prose-page, .cx--process, .cx--apply {
	color: var(--text);
	background-color: var(--green-tint);
	background-image:
		radial-gradient(40rem 30rem at 12% 0%, var(--white), rgba(255, 255, 255, 0) 70%),
		linear-gradient(var(--grid-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
	background-size: 100% 100%, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step);
	background-position: 0 0;
	background-repeat: no-repeat, repeat, repeat;
	border-top: 0;
}

/* Copy that stands directly on the dark stage reverses to white; emphasis takes the bright brand green. */
.strip-head h2, .strip-head p, .strip-head .hairline,
.flow .hairline, .flow .faqx__title,
.cx .cx__head .hairline, .cx .cx__title, .cx .cx__group, .cx .cx__note { color: var(--white); }
.strip-head h2 em, .flow .faqx__title em, .cx .cx__title em { color: var(--green); }
.strip-head .ghost { -webkit-text-stroke-color: rgba(184, 146, 90, .5); }
.cx .cx__group { border-top-color: var(--hair-light); color: var(--mist); }
.cx--process .cx__head .hairline, .cx--process .cx__title, .cx--process .cx__note,
.cx--apply .cx__head .hairline, .cx--apply .cx__title, .cx--apply .cx__note { color: var(--ink); }
.cx--process .cx__title em, .cx--apply .cx__title em { color: var(--green-deep); }

/* Cards: white, lifted, with a brass foil edge. On hover they rise and a band of light crosses them. */
.flow__steps { gap: var(--s4); border-top: 0; }
.flow__steps li, .flow__steps li + li, .flow__steps li:last-child { padding: var(--s6) var(--s5); border: 0; }
.flow__steps li, .cxp li, .cxj, .contactx__card, .extras__list div, .jx__facts, .jx__body, .contactx__form, .valley__copy, .prose-page > * {
	position: relative; background: var(--white); color: var(--text); box-shadow: var(--foil), var(--lift-lg); border: 0;
}
.cxp li { border-top: 0; }
.jx__facts { border-left: 0; padding: var(--s6); }
.jx__body, .valley__copy { padding: clamp(var(--s5), 4vw, var(--s8)); }
.contactx { gap: 0 var(--s6); padding: var(--s8) var(--gutter); align-items: start; }
.contactx__cards { padding: 0; }
.contactx__form { padding: clamp(var(--s5), 4vw, var(--s8)); }
.extras__list div { margin-bottom: var(--s3); }
.extras__list div, .flow__steps li, .cxp li, .cxj, .contactx__card { overflow: hidden; transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.flow__steps li::after, .cxp li::after, .cxj::after, .contactx__card::after {
	content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), var(--sheen), rgba(255, 255, 255, 0)); transform: translateX(-140%) skewX(-12deg);
}
@media (hover: hover) {
	.flow__steps li:hover, .cxp li:hover, .cxj:is(:hover, :focus-visible), .contactx__card:is(a):is(:hover, :focus-visible) { transform: translateY(-6px); box-shadow: var(--foil), 0 2px 4px rgba(14, 48, 25, .08), 0 56px 90px -40px rgba(0, 0, 0, .55); }
	.flow__steps li:hover::after, .cxp li:hover::after, .cxj:is(:hover, :focus-visible)::after, .contactx__card:is(a):is(:hover, :focus-visible)::after { transform: translateX(340%) skewX(-12deg); transition: transform .9s var(--ease); }
}
@media (max-width: 960px) {
	.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz { background-size: 100% 100%, 24rem auto, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step), 100% 100%; background-position: 0 0, right -8rem top 1rem, 0 0, 0 0, 0 0; }
	.contactx { padding: var(--s7) var(--gutter); gap: var(--s5); }
	.flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .flow__steps { grid-template-columns: 1fr; } }

/* Contact: the three ways to reach us are cards, not a list. */
.contactx__cards { gap: var(--s4); border-right: 0; }
.contactx__card { padding: var(--s5) var(--s6); }

/* Fields: square, hairline, brass when active. One style on every form. */
.field input, .field select, .field textarea { border: 1px solid var(--line-strong); border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--green-tint); }

/* Hero emphasis: the same fine brass rule as the rest of the site. */
.hero-x__title em, .hero-x--page .hero-x__title em { background-image: linear-gradient(transparent 91%, var(--brass) 91%, var(--brass) 94%, transparent 94%); }

/* Review page on the dark stage: the portrait stands on the ground, the note and buttons on a lifted card. */
.rv__body { padding: clamp(var(--s5), 4vw, var(--s8)); background: var(--white); color: var(--text); box-shadow: var(--foil), var(--lift-lg); }
.rv__photo { box-shadow: 0 44px 80px -36px rgba(0, 0, 0, .7); }

/* ================================================================ v7.1 "Signature". Loads last.
   Owner review, Nov 10 (second note): v7 read as less premium because it took the brand green off every action
   and left the home page with loose copy. Green is back as the colour of action, brass stays as the fine edge,
   and every block of home page copy now sits on a card or a stage. */
:root {
	--glass: rgba(255, 255, 255, .07);
	--glass-hi: rgba(255, 255, 255, .13);
	--glass-dark: rgba(14, 48, 25, .62);
	--scrim: rgba(14, 48, 25, .88);
	--scrim-mid: rgba(14, 48, 25, .46);
	--scrim-0: rgba(14, 48, 25, 0);
	--glare: rgba(59, 177, 73, .26);
	--drop-dark: 0 50px 90px -42px rgba(0, 0, 0, .7);
	--tilt: 60rem;
}

/* ---------- Colour of action: green. The arrow rides in a solid green disc; fills sweep to green. */
.btn-x i, .btn-x--light i, .btn-x--dark i, .btn-x--ghost i { background: var(--green); border-color: var(--green); color: var(--forest-deep); }
.btn-x--dark, .btn-x--light, .calc__out .btn-x--light { --fill: var(--green); }
.btn-x--dark:is(:hover, :focus-visible), .btn-x--light:is(:hover, :focus-visible), .calc__out .btn-x--light:is(:hover, :focus-visible) { color: var(--forest-deep); box-shadow: inset 0 0 0 1px var(--green); }
.btn-x--dark:is(:hover, :focus-visible) i, .btn-x--light:is(:hover, :focus-visible) i, .btn-x--ghost:is(:hover, :focus-visible) i { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--white); }
.btn-x--ghost { background: var(--glass-dark); box-shadow: inset 0 0 0 1px var(--keyline-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-primary, .masthead .btn-primary, body.home .masthead:not(.is-solid) .btn-primary { background: var(--green); color: var(--forest-deep); box-shadow: inset 0 0 0 1px var(--green); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-primary:is(:hover, :focus-visible), .masthead .btn-primary:is(:hover, :focus-visible), body.home .masthead:not(.is-solid) .btn-primary:is(:hover, :focus-visible) { background: var(--forest-deep); color: var(--white); box-shadow: inset 0 0 0 1px var(--green); }

/* ---------- Emphasis in headings: a firm green rule under the phrase. */
.faqx__title em, .strip-head h2 em, .intro__title em, .split__title em, .homes__title em, .seq__title em, .help-strip h2 em, .post__title em, .tl h2 em, .pricing h2 em, .cx__title em, .vi__title em, .more__title em, .calc__title em, .doors__title em, .tech__title em { background-image: linear-gradient(transparent 88%, var(--green) 88%, var(--green) 95%, transparent 95%); background-repeat: no-repeat; }
.hero-x__title em, .hero-x--page .hero-x__title em { background-image: linear-gradient(transparent 88%, var(--green) 88%, var(--green) 95%, transparent 95%); }

/* ---------- Home, the firm: pale green stage, white plate, and the paragraph on a forest card. */
.intro, .split--x {
	background-color: var(--green-tint);
	background-image:
		radial-gradient(40rem 30rem at 12% 0%, var(--white), rgba(255, 255, 255, 0) 70%),
		linear-gradient(var(--grid-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
	background-size: 100% 100%, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step);
	background-repeat: no-repeat, repeat, repeat;
}
.intro.rule-grid::before, .split--x.rule-grid::before { display: none; }
.intro__text { position: relative; z-index: 2; grid-column: 1 / span 6; margin-top: var(--s5); padding: var(--s6); background: linear-gradient(150deg, var(--forest), var(--forest-deep)); color: var(--white); box-shadow: inset 3px 0 0 var(--green), var(--lift-lg); }
.intro__text .link { color: var(--white); }
.intro__text .link::after { color: var(--green); }
.intro__fig { box-shadow: var(--lift-lg); }
@media (max-width: 960px) { .intro__text { grid-column: 1 / -1; padding: var(--s5); } }

/* ---------- Home, the platform: dark stage, glass cards, and a scorecard that draws itself. */
.tech { padding: var(--s9) 0; }
.tech__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7) var(--s8); align-items: center; }
.tech__head { display: grid; gap: var(--s5); min-width: 0; }
.tech__title { color: var(--white); } /* was inheriting the global ink heading colour: dark on dark */
.tech__title em { color: var(--green); }
.tech__grid { grid-column: 1 / -1; margin: 0; gap: var(--s4); background: none; }
.tech__grid li { position: relative; overflow: hidden; padding: var(--s6) var(--s5); background: var(--glass); border: 1px solid var(--hair-light); box-shadow: inset 0 2px 0 var(--green); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform var(--d2) var(--ease), background var(--d2) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.tech__grid li::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(18rem circle at var(--gx, 50%) var(--gy, 0%), var(--glare), var(--glow-0) 62%); opacity: 0; transition: opacity var(--d2) var(--ease); }
.tech__grid li > * { position: relative; }
.tech__grid b { font-size: 3rem; }
.tech__grid span { color: var(--mist); }

.viz { position: relative; margin: 0; padding: var(--s5); min-width: 0; color: var(--white); background: linear-gradient(160deg, var(--glass-hi), var(--glass)); border: 1px solid var(--hair-light); box-shadow: inset 0 2px 0 var(--brass), var(--drop-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform var(--d3, .6s) var(--ease); }
.viz__bar { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--hair-light); font: 700 .75rem/1 var(--f-body); letter-spacing: var(--track); text-transform: uppercase; }
.viz__bar em { margin-left: auto; padding: .4rem .6rem; border: 1px solid var(--keyline); font-style: normal; font-size: .625rem; letter-spacing: .14em; color: var(--mist); }
.viz__dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.viz__dot::after { content: ''; position: absolute; inset: -.3rem; border: 1px solid var(--green); border-radius: 50%; opacity: 0; }
.viz__chart { position: relative; margin: var(--s4) 0; height: 9rem; background-image: linear-gradient(var(--hair-light) 1px, transparent 1px); background-size: 100% 25%; }
.viz__chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.viz__line { fill: none; stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.viz__area { fill: var(--green); opacity: 0; transition: opacity 1.2s var(--ease) 1s; }
.viz__cap { position: absolute; left: 0; top: 0; font: 600 .6875rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.viz__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--hair-light); border: 1px solid var(--hair-light); }
.viz__rows div { display: grid; gap: var(--s2); padding: var(--s4); background: var(--forest-deep); opacity: 0; transform: translateY(.75rem); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.viz__rows div:nth-child(2) { transition-delay: .12s; }
.viz__rows div:nth-child(3) { transition-delay: .24s; }
.viz__rows div:nth-child(4) { transition-delay: .36s; }
.viz__rows dt { font: 600 .6875rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.viz__rows dd { margin: 0; font: 700 clamp(1.6rem, 2.4vw, 2.2rem)/1 var(--f-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--white); }
.viz__note { margin: var(--s3) 0 0; font-size: .75rem; line-height: 1.5; color: var(--mist); }
.viz.is-live .viz__line { stroke-dashoffset: 0; }
.viz.is-live .viz__area { opacity: .16; }
.viz.is-live .viz__rows div { opacity: 1; transform: none; }
@keyframes viz-ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: no-preference) { .viz.is-live .viz__dot::after { animation: viz-ping 2.4s var(--ease) infinite; } }
@media (prefers-reduced-motion: reduce) { .viz__line, .viz__area, .viz__rows div { transition: none; } }
@media (max-width: 1100px) { .tech__inner { grid-template-columns: 1fr; gap: var(--s6); } }
@media (max-width: 640px) { .tech { padding: var(--s7) 0; } .viz { padding: var(--s4); } .viz__chart { height: 7rem; } }

/* ---------- Cards lean toward the pointer (app.js sets --rx, --ry, --gx, --gy). */
@media (hover: hover) {
	.viz { transform: perspective(var(--tilt)) rotateX(var(--rx, 3deg)) rotateY(var(--ry, -8deg)); }
	.tech__grid li, .flow__steps li, .cxp li, .flow__steps li:hover, .cxp li:hover { transform: perspective(var(--tilt)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
	.tech__grid li:hover, .flow__steps li:hover, .cxp li:hover { --ty: -6px; }
	.tech__grid li:hover { background: var(--glass-hi); border-color: var(--green); box-shadow: inset 0 2px 0 var(--green), var(--drop-dark); }
	.tech__grid li:hover::before { opacity: 1; }
}

/* ---------- Home, the method: the film sits under a forest veil so the words read; steps are glass cards. */
.seq { background: var(--forest-deep); color: var(--white); }
.seq::after { background: linear-gradient(100deg, var(--scrim) 0%, var(--scrim-mid) 34%, var(--scrim-0) 62%), linear-gradient(0deg, var(--scrim) 0%, var(--scrim-0) 42%); }
.seq__title { color: var(--white); text-shadow: none; }
.seq__title em { color: var(--green); }
.seq__label, .seq .hairline { color: var(--white); text-shadow: none; }
.seq__step { padding: var(--s4); background: var(--glass-dark); border: 1px solid var(--hair-light); border-top: 2px solid var(--green); color: var(--white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seq__step b { color: var(--green); }
.seq__step span { color: var(--mist); }
@media (max-width: 960px) { .seq { background: var(--forest-deep); } .seq__steps { background: none; } }

/* ---------- Home, leadership: the copy is a white card that overlaps the portrait. */
.split__card { position: relative; z-index: 2; padding: clamp(var(--s5), 4vw, var(--s8)); background: var(--white); box-shadow: var(--foil), var(--lift-lg); }
.split__card .split__text { margin-bottom: var(--s5); }
.split__creds { list-style: none; margin: 0 0 var(--s6); padding: 0; border-top: 1px solid var(--line); }
.split__creds li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font: 600 1rem/1.3 var(--f-body); color: var(--ink); }
.split__creds b { justify-self: start; padding: .35rem .5rem; background: var(--green-tint); font: 800 .6875rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.split--x .split__l { box-shadow: var(--lift-lg); }
@media (min-width: 961px) { .split--x .split__r { padding-left: 0; } .split__card { margin-left: calc(-1 * var(--s8)); } }
@media (max-width: 960px) { .split--x .split__r { padding-top: 0; } .split__card { margin-top: calc(-1 * var(--s8)); } }

/* ---------- No tan anywhere: the two warm paper surfaces become cool, pale brand green. */
:root { --alabaster: #F2F7F2; --stone: #DCE8DE; }

/* ---------- Inner pages: the remaining white text sections stand on the tint stage and their rows become cards. */
.faqx, .stmt, .ra, .tl {
	background-color: var(--green-tint);
	background-image:
		radial-gradient(40rem 30rem at 12% 0%, var(--white), rgba(255, 255, 255, 0) 70%),
		linear-gradient(var(--grid-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
	background-size: 100% 100%, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step);
	background-repeat: no-repeat, repeat, repeat;
}
.faqx.rule-grid::before, .stmt.rule-grid::before, .ra.rule-grid::before, .tl.rule-grid::before { display: none; }
.faqx .qa, .tl__body, .stmt__copy .lede, .ra__copy .lede, .pk:not(.pk--best) { background: var(--white); box-shadow: var(--lift); }
.faqx .qa { margin-bottom: var(--s2); transition: box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease); }
.faqx .qa[open] { box-shadow: inset 3px 0 0 var(--green), var(--lift-lg); }
.tl__body, .stmt__copy .lede, .ra__copy .lede { border-left: 3px solid var(--green); }
.pk:not(.pk--best) { box-shadow: var(--foil), var(--lift); }
@media (hover: hover) { .faqx .qa:hover { transform: translateX(4px); box-shadow: inset 3px 0 0 var(--green), var(--lift); } }

/* Deductions on the sample statement: terracotta was 3.9:1 on white; the brand red is 6.6:1. */
.doc__table td.neg { color: var(--red); }

/* ==========================================================================
   v7.2 "Signature", inner pages. The page hero fits the first screen, the
   services list and the switch pair get real contrast, the team reads as one
   set, and listing tiles carry their captions on a firm scrim.
   ========================================================================== */

/* ---------- Page hero: the masthead sits above it, so the hero is one screen minus the masthead. */
@media (hover: hover) and (min-width: 961px) {
	html.js .hero-x--page { min-height: calc(100svh - var(--header-h)); }
	html.js .hero-x--page .hero-x__media { height: calc(100svh - var(--header-h)); }
}

/* ---------- Services list: a lifted white card on the pale stage; the open item is a forest plate. */
.svcx {
	color: var(--text);
	background-color: var(--green-tint);
	background-image:
		radial-gradient(40rem 30rem at 12% 0%, var(--white), rgba(255, 255, 255, 0) 70%),
		linear-gradient(var(--grid-dark) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
	background-size: 100% 100%, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step);
	background-repeat: no-repeat, repeat, repeat;
}
.svcx__items { background: var(--white); box-shadow: var(--foil), var(--lift-lg); padding: var(--s3) var(--s5); }
.svcx__item:first-child { border-top: 0; }
.svcx__item:last-child { border-bottom: 0; }
.svcx__item { padding-inline: var(--s4); transition: color var(--d1), background var(--d2) var(--ease); }
.svcx__item:hover { color: var(--ink); }
@media (min-width: 961px) {
	.svcx__item[aria-selected="true"] { background: var(--forest-deep); color: var(--white); padding-left: var(--s4); box-shadow: inset 4px 0 0 var(--green); border-top-color: transparent; }
	.svcx__item[aria-selected="true"] + .svcx__item { border-top-color: transparent; }
	.svcx__item[aria-selected="true"] p { color: var(--white); }
	.svcx__item[aria-selected="true"] b { color: var(--green); }
}
.svcx--journey .cx__note { padding: var(--s4) var(--s5); background: var(--white); box-shadow: var(--lift); border-left: 3px solid var(--green); color: var(--text); }

/* ---------- Photo panels with copy: a scrim deep enough that every line reads. */
.half::before { background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 34%, var(--scrim-mid) 72%, var(--scrim-0) 100%); }
.valuex::before, .seg::before { background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim-mid) 52%, var(--scrim-0) 82%); }
.half li, .half p { color: var(--white); }

/* ---------- Bars above grids sit on the pale stage, not on bare white. */
.rentals__bar { background: var(--green-tint); border-bottom: 0; box-shadow: var(--foil); }

/* ---------- Article grid: an orphan card on the last row takes the whole row. */
.arts { background: var(--forest-deep); }
@media (min-width: 1181px) {
	.arts > .art:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.arts > .art:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* ---------- Listing tiles: true colour, firm caption scrim, price on a green plate. */
.hm img { filter: saturate(1.06) contrast(1.04); }
.hm::after { background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim-mid) 34%, var(--scrim-0) 62%); opacity: 1; }
.hm__meta { gap: var(--s2); }
.hm__meta span { justify-self: start; padding: var(--s1) var(--s3); background: var(--green); color: var(--forest-deep); font-weight: 800; letter-spacing: .06em; }
.hm:hover::after { opacity: .92; }

/* ---------- Team: one set. Portraits rest in a forest duotone and return to colour under the pointer. */
@media (hover: hover) {
	.teamx__m img { filter: grayscale(1) contrast(1.08) brightness(1.04); transition: transform 1.2s var(--ease), filter var(--d3) var(--ease); }
	.teamx__m::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--forest); mix-blend-mode: color; opacity: .7; transition: opacity var(--d3) var(--ease); pointer-events: none; }
	.teamx__m:hover img, .teamx__m:focus-within img { filter: none; }
	.teamx__m:hover::before, .teamx__m:focus-within::before { opacity: 0; }
}
.teamx { background: var(--forest-deep); }

/* ---------- More cards lean toward the pointer. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cxj, .cxj:hover, .cxj:focus-visible, .contactx__card, .tl__body { transform: perspective(var(--tilt)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease), border-color var(--d1); }
}

/* ==========================================================================
   v7.3 "Stone and engraving". The flat forest sections become polished green
   marble with white and gold veining, a fine white keyline frame and an
   engraved brass rosette. The pale sections become white marble. Text sits
   on a veil so every line keeps its contrast.
   ========================================================================== */
:root {
	--marble-dark: url("../img/marble-forest.webp");
	--marble-light: url("../img/marble-white.webp");
	--rosette: url("../img/guilloche.svg");
	--marble-veil: rgba(14, 48, 25, .34);
	--marble-wash: rgba(255, 255, 255, .58);
	--marble-w: max(100%, 100rem);
	--frame: clamp(.75rem, 1.6vw, 1.5rem);
	--frame-line: rgba(255, 255, 255, .3);
}

/* ---------- Dark stage: glow, keyline frame, rosette, veil, marble. */
.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz {
	background-color: var(--forest-deep);
	background-image:
		radial-gradient(36rem 36rem at var(--mx, 84%) var(--my, 6%), var(--glow), var(--glow-0) 68%),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		var(--rosette),
		linear-gradient(var(--marble-veil), var(--marble-veil)),
		var(--marble-dark);
	background-size:
		100% 100%,
		calc(100% - 2 * var(--frame)) 1px,
		calc(100% - 2 * var(--frame)) 1px,
		1px calc(100% - 2 * var(--frame)),
		1px calc(100% - 2 * var(--frame)),
		46rem auto,
		100% 100%,
		var(--marble-w) auto;
	background-position:
		0 0,
		var(--frame) var(--frame),
		var(--frame) calc(100% - var(--frame)),
		var(--frame) var(--frame),
		calc(100% - var(--frame)) var(--frame),
		right -15rem top -13rem,
		0 0,
		center top;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
}

/* ---------- Plain forest surfaces take the same stone, without the frame. */
.footer, .help-strip, .doors, .hero-x {
	background-color: var(--forest-deep);
	background-image: linear-gradient(var(--marble-veil), var(--marble-veil)), var(--marble-dark);
	background-size: 100% 100%, var(--marble-w) auto;
	background-position: 0 0, center top;
	background-repeat: no-repeat, repeat-y;
}
.footer { background-image: var(--rosette), linear-gradient(var(--marble-veil), var(--marble-veil)), var(--marble-dark); background-size: 40rem auto, 100% 100%, var(--marble-w) auto; background-position: right -12rem bottom -14rem, 0 0, center top; background-repeat: no-repeat, no-repeat, repeat-y; }

/* ---------- Light stage: white marble under a soft wash, rosette low in the corner. */
.extras, .valley, .prose-page, .cx--process, .cx--apply, .intro, .split--x, .faqx, .stmt, .ra, .tl, .svcx {
	color: var(--text);
	background-color: var(--white);
	background-image: var(--rosette), linear-gradient(var(--marble-wash), var(--marble-wash)), var(--marble-light);
	background-size: 42rem auto, 100% 100%, var(--marble-w) auto;
	background-position: left -16rem bottom -15rem, 0 0, center top;
	background-repeat: no-repeat, no-repeat, repeat-y;
}
.rentals__bar { background: var(--white); }

/* ---------- Cards on the stone keep a crisp edge. */
.faqx .qa, .tl__body, .stmt__copy .lede, .ra__copy .lede, .pk:not(.pk--best), .svcx__items, .split__card { outline: 1px solid var(--line); outline-offset: -1px; }

/* ---------- The method block and phone widths: the rosette stays a corner detail, never behind the copy. */
.seq { background-image: linear-gradient(var(--marble-veil), var(--marble-veil)), var(--marble-dark); background-size: 100% 100%, var(--marble-w) auto; background-position: 0 0, center top; background-repeat: no-repeat, repeat-y; }
@media (max-width: 960px) {
	.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz {
		background-size: 100% 100%, calc(100% - 2 * var(--frame)) 1px, calc(100% - 2 * var(--frame)) 1px, 1px calc(100% - 2 * var(--frame)), 1px calc(100% - 2 * var(--frame)), 20rem auto, 100% 100%, var(--marble-w) auto;
		background-position: 0 0, var(--frame) var(--frame), var(--frame) calc(100% - var(--frame)), var(--frame) var(--frame), calc(100% - var(--frame)) var(--frame), right -11rem top -11rem, 0 0, center top;
	}
	.extras, .valley, .prose-page, .cx--process, .cx--apply, .intro, .split--x, .faqx, .stmt, .ra, .tl, .svcx { background-size: 20rem auto, 100% 100%, var(--marble-w) auto; background-position: left -11rem bottom -11rem, 0 0, center top; }
	.footer { background-size: 20rem auto, 100% 100%, var(--marble-w) auto; background-position: right -10rem bottom -10rem, 0 0, center top; }
}

/* ==========================================================================
   v7.4 "Engraved frame". Outside critique pass: the stone is calmer, cards on
   it are firm plates, the keyline frame gains engraved corner brackets, the
   headline figures are set in the display face, and pages cross-fade.
   ========================================================================== */
:root {
	--marble-veil: rgba(14, 48, 25, .44);
	--plate: rgba(8, 32, 17, .86);
	--plate-hi: rgba(8, 32, 17, .96);
	--frame-in: calc(var(--frame) + .4rem);
	--corner-l: clamp(1.5rem, 3vw, 2.75rem);
	--corner-line: var(--brass);
}

/* ---------- Dark stage: glow, engraved corner brackets, keyline frame, rosette, veil, marble. */
.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz {
	background-image:
		radial-gradient(36rem 36rem at var(--mx, 84%) var(--my, 6%), var(--glow), var(--glow-0) 68%),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--corner-line), var(--corner-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		linear-gradient(var(--frame-line), var(--frame-line)),
		var(--rosette),
		linear-gradient(var(--marble-veil), var(--marble-veil)),
		var(--marble-dark);
	background-size:
		100% 100%,
		var(--corner-l) 1px, 1px var(--corner-l),
		var(--corner-l) 1px, 1px var(--corner-l),
		var(--corner-l) 1px, 1px var(--corner-l),
		var(--corner-l) 1px, 1px var(--corner-l),
		calc(100% - 2 * var(--frame)) 1px,
		calc(100% - 2 * var(--frame)) 1px,
		1px calc(100% - 2 * var(--frame)),
		1px calc(100% - 2 * var(--frame)),
		var(--rosette-w, 46rem) auto,
		100% 100%,
		var(--marble-w) auto;
	background-position:
		0 0,
		var(--frame-in) var(--frame-in), var(--frame-in) var(--frame-in),
		calc(100% - var(--frame-in)) var(--frame-in), calc(100% - var(--frame-in)) var(--frame-in),
		var(--frame-in) calc(100% - var(--frame-in)), var(--frame-in) calc(100% - var(--frame-in)),
		calc(100% - var(--frame-in)) calc(100% - var(--frame-in)), calc(100% - var(--frame-in)) calc(100% - var(--frame-in)),
		var(--frame) var(--frame),
		var(--frame) calc(100% - var(--frame)),
		var(--frame) var(--frame),
		calc(100% - var(--frame)) var(--frame),
		right var(--rosette-x, -15rem) top var(--rosette-y, -13rem),
		0 0,
		center top;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
}
@media (max-width: 960px) {
	.strip-head, .flow, .contactx, .cx, .rv, .tech, .tz {
		--rosette-w: 20rem; --rosette-x: -11rem; --rosette-y: -11rem;
		background-size:
			100% 100%,
			var(--corner-l) 1px, 1px var(--corner-l),
			var(--corner-l) 1px, 1px var(--corner-l),
			var(--corner-l) 1px, 1px var(--corner-l),
			var(--corner-l) 1px, 1px var(--corner-l),
			calc(100% - 2 * var(--frame)) 1px,
			calc(100% - 2 * var(--frame)) 1px,
			1px calc(100% - 2 * var(--frame)),
			1px calc(100% - 2 * var(--frame)),
			var(--rosette-w) auto,
			100% 100%,
			var(--marble-w) auto;
		background-position:
			0 0,
			var(--frame-in) var(--frame-in), var(--frame-in) var(--frame-in),
			calc(100% - var(--frame-in)) var(--frame-in), calc(100% - var(--frame-in)) var(--frame-in),
			var(--frame-in) calc(100% - var(--frame-in)), var(--frame-in) calc(100% - var(--frame-in)),
			calc(100% - var(--frame-in)) calc(100% - var(--frame-in)), calc(100% - var(--frame-in)) calc(100% - var(--frame-in)),
			var(--frame) var(--frame),
			var(--frame) calc(100% - var(--frame)),
			var(--frame) var(--frame),
			calc(100% - var(--frame)) var(--frame),
			right var(--rosette-x) top var(--rosette-y),
			0 0,
			center top;
	}
}

/* ---------- Cards on the green stone are firm plates, so every line reads. */
.tech__grid li { background: var(--plate); border-color: var(--frame-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tech__grid li p { color: var(--white); }
@media (hover: hover) {
	.tech__grid li:hover { background: var(--plate-hi); }
}

/* ---------- Headline figures in the display face, at a scale that carries the card. */
.pull strong { font: 600 clamp(3.6rem, 6.4vw, 6.25rem)/.82 var(--f-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.pull span { letter-spacing: .12em; }

/* ---------- The listings heading sits on white stone, not on bare white. */
.homes {
	background-image: linear-gradient(var(--marble-wash), var(--marble-wash)), var(--marble-light);
	background-size: 100% 100%, var(--marble-w) auto;
	background-position: 0 0, center top;
	background-repeat: no-repeat, repeat-y;
}

/* ---------- Pages cross-fade into each other. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d3); animation-timing-function: var(--ease); }
}

/* ==========================================================================
   v7.5 "Brochure". Each home gets its own page: cover and key facts on the
   green stone, a photograph grid with a full-screen viewer, the story and a
   rent card that stays in view. Team portraits share one backdrop, so they
   rest in full colour again.
   ========================================================================== */
:root {
	--bro-cell: 6 / 5;
	--bro-cell-wide: 12.2 / 5;
	--bro-veil: rgba(8, 32, 17, .97);
	--dock-h: 4.5rem;
}

/* ---------- Team: one backdrop, full colour. */
@media (hover: hover) {
	.teamx__m img { filter: none; }
	.teamx__m::before { content: none; }
}
.teamx__m img { filter: none; object-position: 50% 12%; }

/* ---------- Cover and key facts. */
.bro { display: block; color: var(--text); }
.bro__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: calc(100svh - var(--header-h)); background: var(--forest-deep); }
.bro__cover { position: relative; overflow: hidden; min-height: 22rem; background: var(--forest); }
.bro__cover img { position: absolute; inset: 0; width: 100%; height: 150%; object-fit: cover; object-position: center top; }
.bro__cover--whole img { height: 100%; object-position: center; }
.bro__cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--frame-line); margin: var(--frame); }
.bro__plate {
	display: grid; align-content: center; gap: var(--s5); padding: var(--s8) clamp(var(--s5), 5vw, var(--s9));
	color: var(--white);
	background-color: var(--forest-deep);
	background-image: var(--rosette), linear-gradient(var(--marble-veil), var(--marble-veil)), var(--marble-dark);
	background-size: 34rem auto, 100% 100%, var(--marble-w) auto;
	background-position: right -13rem top -12rem, 0 0, center top;
	background-repeat: no-repeat, no-repeat, repeat-y;
}
.bro__crumb { margin: 0; font: 600 .8125rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.bro__crumb a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--green); padding-bottom: var(--s1); }
.bro__crumb a:hover { color: var(--green); }
.bro__plate .hairline { color: var(--white); margin: 0; }
.bro__title { margin: 0; font: 500 clamp(2.4rem, 4.2vw, 4.25rem)/1 var(--f-display); letter-spacing: -.01em; color: var(--white); text-wrap: balance; }
.bro__title em { display: block; margin-top: var(--s3); font-size: .5em; line-height: 1.2; color: var(--green); }
.bro__lede { margin: 0; max-width: 34rem; font: 400 1.125rem/1.55 var(--f-body); color: var(--white); }
.bro__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--frame-line); border: 1px solid var(--frame-line); }
.bro__facts div { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--plate-hi); }
.bro__facts dt { font: 600 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--white); opacity: .82; }
.bro__facts dd { margin: 0; font: 600 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--white); }
.bro__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.bro__call { margin: 0; font: 400 .9375rem/1.4 var(--f-body); color: var(--white); }
.bro__call a { color: var(--white); font-weight: 700; text-decoration-color: var(--green); text-underline-offset: .25em; }

/* ---------- Photograph grid. Frames show the upper part of each picture. */
.bro__gallery, .bro__body {
	background-color: var(--white);
	background-image: linear-gradient(var(--marble-wash), var(--marble-wash)), var(--marble-light);
	background-size: 100% 100%, var(--marble-w) auto;
	background-position: 0 0, center top;
	background-repeat: no-repeat, repeat-y;
}
.bro__gallery { padding-block: var(--section) var(--s8); }
.bro__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s7); }
.bro__h { margin: 0; font: 500 clamp(2rem, 3.6vw, 3.5rem)/1.05 var(--f-display); color: var(--ink); }
.bro__h em { color: var(--green-deep, var(--forest)); }
.bro__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--s2); margin: 0; padding: 0 var(--s2); list-style: none; }
.bro__grid li { aspect-ratio: var(--bro-cell); }
.bro__grid li.is-wide { grid-column: span 2; aspect-ratio: var(--bro-cell-wide); }
.bro__ph { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; background: var(--green-tint); cursor: zoom-in; box-shadow: var(--lift); }
.bro__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--d3) var(--ease); }
.bro__ph::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--green); transition: box-shadow var(--d2) var(--ease); }
.bro__ph:hover img, .bro__ph:focus-visible img { transform: scale(1.05); }
.bro__ph:hover::after, .bro__ph:focus-visible::after { box-shadow: inset 0 0 0 3px var(--green); }
.bro__more { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; background: var(--scrim); color: var(--white); font: 500 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--f-display); }

/* ---------- Story and the rent card. */
.bro__body { padding-block: var(--s8) var(--section); }
.bro__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.bro__story { display: grid; gap: var(--s4); padding: clamp(var(--s5), 4vw, var(--s8)); background: var(--white); box-shadow: var(--foil), var(--lift-lg); outline: 1px solid var(--line); outline-offset: -1px; }
.bro__story p { margin: 0; max-width: 66ch; font: 400 1.0625rem/1.7 var(--f-body); color: var(--text); }
.bro__story .hairline { color: var(--ink); }
.bro__story .bro__first { font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.4 var(--f-display); color: var(--ink); }
.bro__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s5); padding-top: var(--s6); border-top: 1px solid var(--line); }
.bro__group h3 { margin: 0 0 var(--s3); font: 700 .8125rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.bro__group ul { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.bro__group li { position: relative; padding-left: var(--s5); font: 400 1rem/1.5 var(--f-body); color: var(--text); }
.bro__group li::before { content: ''; position: absolute; left: 0; top: .5em; width: var(--s3); height: 2px; background: var(--green); }
.bro__aside { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s3); padding: var(--s6); color: var(--white); background: var(--forest-deep); box-shadow: inset 0 3px 0 var(--green), var(--lift-lg); }
.bro__rent { display: flex; align-items: baseline; gap: var(--s3); margin: 0; }
.bro__rent strong { font: 600 clamp(2.75rem, 4vw, 3.75rem)/1 var(--f-display); font-variant-numeric: lining-nums; color: var(--white); }
.bro__rent span, .bro__sum, .bro__fine { font: 400 .9375rem/1.5 var(--f-body); color: var(--white); }
.bro__sum { margin: 0 0 var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--frame-line); }
.bro__aside .btn-x { justify-content: space-between; background: var(--white); color: var(--ink); }
.bro__map { justify-self: start; margin-top: var(--s2); color: var(--white); font: 700 .9375rem/1.4 var(--f-body); text-decoration-color: var(--green); text-underline-offset: .25em; }
.bro__fine { margin: var(--s2) 0 0; opacity: .86; }

/* ---------- Phone: the next step stays docked at the bottom. */
.bro__dock { display: none; }
@media (max-width: 960px) {
	.bro__head { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.bro__cover { aspect-ratio: 5 / 4; min-height: 0; }
	.bro__plate { padding: var(--s7) var(--gutter); }
	.bro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
	.bro__cols, .bro__groups { grid-template-columns: minmax(0, 1fr); }
	.bro__aside { position: static; }
	.bro__dock { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--dock-h); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--forest-deep); color: var(--white); box-shadow: inset 0 2px 0 var(--green); }
	.bro__dock p { display: flex; align-items: baseline; gap: var(--s1); margin: 0; }
	.bro__dock strong { font: 600 1.625rem/1 var(--f-display); font-variant-numeric: lining-nums; }
	.bro__dock span { font: 400 .875rem/1 var(--f-body); }
	body:has(.bro) .footer { padding-bottom: calc(var(--dock-h) + var(--s7)); }
}

/* ---------- Full-screen viewer. */
.bro__lb { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: var(--s4); border: 0; color: var(--white); background: var(--bro-veil); grid-template: auto minmax(0, 1fr) / auto minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: var(--s4); }
.bro__lb[open] { display: grid; }
.bro__lb::backdrop { background: var(--bro-veil); }
.bro__lb-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; font: 600 .875rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.bro__lb button { display: inline-flex; align-items: center; gap: var(--s2); min-width: 3rem; min-height: 3rem; padding: var(--s3) var(--s4); border: 1px solid var(--frame-line); background: var(--plate-hi); color: var(--white); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background var(--d1), border-color var(--d1); }
.bro__lb button:hover, .bro__lb button:focus-visible { background: var(--green); border-color: var(--green); color: var(--forest-deep); }
.bro__lb-nav { justify-content: center; font-size: 1.25rem; }
.bro__lb-fig { margin: 0; overflow: hidden; aspect-ratio: var(--bro-cell); width: min(100%, 54rem, calc((100dvh - 9rem) * 1.2)); background: var(--forest); box-shadow: 0 0 0 1px var(--frame-line), var(--lift-lg); }
.bro__lb-fig.is-wide { aspect-ratio: var(--bro-cell-wide); width: min(100%, 96rem, calc((100dvh - 9rem) * 2.44)); }
.bro__lb-fig img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity var(--d2) var(--ease); }
.bro__lb-fig.is-in img { opacity: 1; }
@media (max-width: 640px) {
	.bro__lb { grid-template: auto minmax(0, 1fr) auto / 1fr 1fr; padding: var(--s3); }
	.bro__lb-fig { grid-column: 1 / -1; grid-row: 2; }
	.bro__lb-nav { grid-row: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.bro__ph img, .bro__lb-fig img { transition: none; }
}

/* ---------- Brochure, phone refinements: the ornament stays in the corner and the dock clears the floating site button. */
@media (max-width: 960px) {
	.bro__plate { background-size: 18rem auto, 100% 100%, var(--marble-w) auto; background-position: right -10rem top -10rem, 0 0, center top; }
	.bro__dock { padding-right: calc(var(--gutter) + var(--s8)); }
	.bro__dock .btn-x { white-space: nowrap; padding-block: var(--s2); }
	.bro__dock .btn-x i { display: none; }
}