/* ─────────────────────────────────────────────────────────────────────────────
   Elevation Community Land Trust — site stylesheet (redesign, 2026-09-30).
   Our own design (not a port of elevationclt.org). Markup: the ECLT render
   layer in components/blocks/tenants/elevation-community-land-trust/.

   Design language
   · Type: Roboto Slab headings (echoes the slab "elevation" wordmark),
     Source Sans 3 body (high legibility, full Spanish glyph set).
   · Colour: teal structure, coral action, orange as the logo-accent only
     (decorative — never text on white), warm sand grounds instead of grey.
   · Shape: the logo's nested squares as a recurring frame motif; 12px radii.
   All colours ride var(--tenant-*) tokens.
   ───────────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

/* PREVIEW TOKENS — the proposed theme, applied under the tenant wrapper so the
   redesign can be reviewed before the theme is written. Once approved these
   move into the ECLT theme (update_theme) and this block is deleted. */
[data-tenant="elevation-community-land-trust"] > * {
  --tenant-font-heading: "Roboto Slab", Georgia, serif;
  --tenant-font-body: "Source Sans 3", system-ui, sans-serif;
  --tenant-red: #c9443a;
  --tenant-red-bright: #b3392f;
  --tenant-on-action: #ffffff;
  --tenant-cta-on-brand: #ffffff;
  --tenant-cta-on-brand-text: #0a5559;
  --tenant-ink: #10292a;
  --tenant-slate: #3a4c4d; /* body copy — darkened from #4a5d5e (Ari 2026-09-30) */
  --tenant-mist: #f6f1ea;
  --tenant-tint: #e8f1f0;
  --tenant-line: #e5ddd1;
  --tenant-radius: 12px;
  font-family: var(--tenant-font-body);
}

[data-tenant="elevation-community-land-trust"] {
  --eclt-teal: var(--tenant-brand);
  --eclt-teal-deep: var(--tenant-brand-dark);
  --eclt-night: color-mix(in srgb, var(--tenant-brand-dark) 78%, #000);
  --eclt-orange: var(--tenant-accent);
  --eclt-radius-lg: 18px;
  --eclt-shadow: 0 1px 2px rgb(16 41 42 / 0.06), 0 8px 24px -12px rgb(16 41 42 / 0.18);
  --eclt-shadow-lift: 0 2px 4px rgb(16 41 42 / 0.08), 0 18px 40px -18px rgb(16 41 42 / 0.32);
  --type-display: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem);
  --type-h1: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);
  --type-h2: clamp(2rem, 1.55rem + 1.5vw, 2.75rem);
  --type-h3: 1.5rem;
  --type-h4: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  /* One copy size: page body AND every card's body copy (Ari 2026-09-30). */
  --eclt-copy: 1.1875rem;
  /* Card titles, one size everywhere (h3 in every card family). */
  --eclt-card-title: 1.45rem;
  /* Cards stepping off their square on hover: a little spring. */
  --eclt-step-t: translate 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.25s ease;
}

[data-tenant="elevation-community-land-trust"] main {
  font-size: var(--eclt-copy);
  line-height: 1.6;
}
/* Rich text (shared .prose-tenant defaults to 17px) at the one copy size. */
[data-tenant="elevation-community-land-trust"] .prose-tenant { font-size: var(--eclt-copy); }
/* Links inside copy, one style everywhere (rich text, FAQ answers, feature
   copy, articles): teal with the orange underline the card links carry.
   Rich text defaulted to the coral action colour. */
[data-tenant="elevation-community-land-trust"] :is(.prose-tenant, .eclt-feature-body, .eclt-article-body) a:not(.st-cta, .eclt-arrow-link) { color: var(--eclt-teal-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--eclt-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
[data-tenant="elevation-community-land-trust"] :is(.prose-tenant, .eclt-feature-body, .eclt-article-body) a:not(.st-cta, .eclt-arrow-link):hover { color: var(--eclt-teal); text-decoration-color: var(--eclt-teal); }
[data-tenant="elevation-community-land-trust"] :is(.st-display, .st-h1, .st-h2) {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tenant-ink);
  text-wrap: balance;
}
[data-tenant="elevation-community-land-trust"] :is(.st-h3, .st-h4) { font-weight: 600; }

/* Eyebrow: a bordered tag — teal hairline on white, deep-teal tracked caps,
   led by the logo's nested squares (an orange square over an offset teal
   outline square) — the orange square turns slowly. Covers every eyebrow — ours and the
   shared blocks'. (!important: the shared Eyebrow sets its colours inline.) */
[data-tenant="elevation-community-land-trust"] .st-eyebrow {
  --eclt-eyebrow-line: color-mix(in srgb, var(--eclt-teal) 38%, transparent);
  --eclt-eyebrow-ground: var(--tenant-surface);
  --eclt-eyebrow-back: var(--eclt-teal);
  position: relative;
  max-width: 100%;
  gap: 0.7rem;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem !important;
  border: 1.5px solid var(--eclt-eyebrow-line) !important;
  border-radius: 8px !important;
  background: var(--eclt-eyebrow-ground) !important;
  color: var(--eclt-teal-deep) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.3;
  text-wrap: balance;
  width: fit-content;
  box-shadow: 0 1px 2px rgb(16 41 42 / 0.06), 0 6px 16px -10px rgb(16 41 42 / 0.25);
}
@media (max-width: 640px) { [data-tenant="elevation-community-land-trust"] .st-eyebrow { letter-spacing: 0.09em !important; font-size: 0.74rem !important; } }
/* The mark is two layers so only the orange square turns: the teal outline
   square sits still in the flow (offset down-right), the orange square rides
   on top of it with a ground-coloured gap ring. */
[data-tenant="elevation-community-land-trust"] .st-eyebrow::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin: 0.36rem 0.1rem 0 0.36rem;
  border: 1.5px solid var(--eclt-eyebrow-back);
  border-radius: 2px;
}
[data-tenant="elevation-community-land-trust"] .st-eyebrow::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 2px;
  background: var(--eclt-orange);
  box-shadow: 0 0 0 1.5px var(--eclt-eyebrow-ground);
  transform: translateY(calc(-50% - 0.18rem));
}
[data-tenant="elevation-community-land-trust"] :is(.eclt-band--brand, .eclt-band--ink) .st-eyebrow {
  --eclt-eyebrow-line: rgb(255 255 255 / 0.35);
  --eclt-eyebrow-ground: color-mix(in srgb, #fff 9%, var(--eclt-teal));
  --eclt-eyebrow-back: #fff;
  color: #fff !important;
  box-shadow: none;
}
[data-tenant="elevation-community-land-trust"] .eclt-band--ink .st-eyebrow { --eclt-eyebrow-ground: color-mix(in srgb, #fff 9%, var(--eclt-night)); }
/* The orange square turns slowly and continuously in place; the teal square
   stays still. Still under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-tenant="elevation-community-land-trust"] .st-eyebrow::after { animation: eclt-eyebrow-spin 6s linear infinite; }
}
@keyframes eclt-eyebrow-spin {
  from { transform: translateY(calc(-50% - 0.18rem)) rotate(0deg); }
  to { transform: translateY(calc(-50% - 0.18rem)) rotate(360deg); }
}

/* Buttons: 10px radius, solid coral / outlined teal. */
[data-tenant="elevation-community-land-trust"] .st-cta {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgb(16 41 42 / 0.12);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, translate 0.18s ease, box-shadow 0.18s ease;
}
/* Every button answers the pointer the same way: a deeper shade sweeps
   across it from the left (a ::before under the label, in the button's own
   stacking context), and the arrow slides out to the right as a fresh one
   slides in from the left. The header and phone-menu buttons sweep too. */
[data-tenant="elevation-community-land-trust"] :is(.st-cta, .st-nav-cta, .st-mobile-cta) { position: relative; isolation: isolate; overflow: hidden; }
[data-tenant="elevation-community-land-trust"] :is(.st-cta, .st-nav-cta, .st-mobile-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--eclt-sweep, color-mix(in srgb, var(--tenant-red) 74%, #2a0907));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
[data-tenant="elevation-community-land-trust"] :is(.st-cta, .st-nav-cta, .st-mobile-cta):is(:hover, :focus-visible) { opacity: 1; }
[data-tenant="elevation-community-land-trust"] :is(.st-cta, .st-nav-cta, .st-mobile-cta):is(:hover, :focus-visible)::before { transform: scaleX(1); }
[data-tenant="elevation-community-land-trust"] :is(.st-cta--outline:not(.st-cta--on-dark), .st-nav-cta:has(+ .st-nav-cta), .st-mobile-cta:has(+ .st-mobile-cta)) { --eclt-sweep: var(--eclt-teal); }
[data-tenant="elevation-community-land-trust"] .st-cta--on-dark.st-cta--outline { --eclt-sweep: #fff; }
/* An outline button's label changes colour as the sweep passes its middle,
   not when it starts, so no part of it goes light on light. */
[data-tenant="elevation-community-land-trust"] :is(.st-cta--outline, .st-nav-cta:has(+ .st-nav-cta), .st-mobile-cta:has(+ .st-mobile-cta)) { transition: background-color 0.18s ease, color 0.2s ease 0.14s, border-color 0.18s ease, box-shadow 0.18s ease; }
[data-tenant="elevation-community-land-trust"] .st-cta svg { position: relative; }
[data-tenant="elevation-community-land-trust"] .st-cta:is(:hover, :focus-visible) svg { animation: eclt-arrow-loop 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes eclt-arrow-loop {
  0% { translate: 0 0; opacity: 1; }
  42% { translate: 0.9em 0; opacity: 0; }
  43% { translate: -0.9em 0; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tenant="elevation-community-land-trust"] :is(.st-cta, .st-nav-cta, .st-mobile-cta)::before { transition: none; }
  [data-tenant="elevation-community-land-trust"] .st-cta:is(:hover, :focus-visible) svg { animation: none; }
}
[data-tenant="elevation-community-land-trust"] .st-cta--outline:not(.st-cta--on-dark) {
  border-color: var(--eclt-teal) !important;
  color: var(--eclt-teal) !important;
  background: transparent !important;
  box-shadow: none;
}
[data-tenant="elevation-community-land-trust"] .st-cta--outline:not(.st-cta--on-dark):is(:hover, :focus-visible) { color: #fff !important; }
[data-tenant="elevation-community-land-trust"] .st-cta--on-dark.st-cta--solid {
  background: var(--tenant-red) !important;
  color: #fff !important;
}
[data-tenant="elevation-community-land-trust"] .st-cta--on-dark.st-cta--outline:is(:hover, :focus-visible) { color: var(--eclt-teal-deep) !important; }
[data-tenant="elevation-community-land-trust"] :is(a, button):focus-visible {
  outline: 3px solid var(--eclt-orange);
  outline-offset: 3px;
}

/* The site's one tertiary CTA: every card link, and a list's "View more",
   reads the same: teal, bold, an orange underline and an arrow. The shared
   photo card's link (.st-card-cta) and a team card's "Read bio" wear it too.
   A selector list, not :is(), so each keeps its own specificity and the
   on-dark and per-card rules below still win. */
.eclt-arrow-link,
.eclt-person-more,
[data-tenant="elevation-community-land-trust"] .st-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--eclt-copy);
  font-weight: 700;
  color: var(--eclt-teal);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--eclt-orange) 70%, transparent);
  padding-bottom: 0.1rem;
}
.eclt-arrow-link svg { transition: transform 0.18s ease; }
.eclt-arrow-link:hover { color: var(--eclt-teal-deep); border-bottom-color: var(--eclt-orange); }
.eclt-arrow-link:hover svg { transform: translateX(3px); }
.eclt-arrow-link--on-dark { color: #fff; }
.eclt-arrow-link--on-dark:hover { color: #fff; }
/* A shared card (photo or icon) is one link, so its CTA answers the card's
   hover. align-self keeps the underline to the label's width in the card's
   column. */
[data-tenant="elevation-community-land-trust"] .st-card-cta { align-self: flex-start; line-height: 1.6; }
[data-tenant="elevation-community-land-trust"] a:is(:hover, :focus-visible) .st-card-cta { color: var(--eclt-teal-deep); border-bottom-color: var(--eclt-orange); }

/* ── Header ────────────────────────────────────────────────────────────────── */
[data-tenant="elevation-community-land-trust"] .st-header-desktop {
  background: rgb(255 255 255 / 0.94);
  border-bottom-color: var(--tenant-line);
}
[data-tenant="elevation-community-land-trust"] .st-header-desktop > .st-shell { min-height: 5.5rem; }
[data-tenant="elevation-community-land-trust"] .st-nav-link {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--tenant-ink);
}
/* Menu hover highlight: a green wash of the brand teal on links and dropdown
   items, and a parent stays highlighted while its dropdown is open. */
[data-tenant="elevation-community-land-trust"] .st-header-desktop { --eclt-nav-hover: color-mix(in srgb, var(--eclt-teal) 18%, #fff); }
[data-tenant="elevation-community-land-trust"] :is(.st-nav-link:hover, .group:hover > .st-nav-link) { color: var(--eclt-teal-deep) !important; background: var(--eclt-nav-hover); }
[data-tenant="elevation-community-land-trust"] .st-nav-sublink:hover { color: var(--eclt-teal-deep) !important; background: var(--eclt-nav-hover) !important; }
[data-tenant="elevation-community-land-trust"] .st-nav-sublink { font-size: 1.02rem; }
/* Dropdown: no brand-to-accent gradient strip across the top of the panel. */
[data-tenant="elevation-community-land-trust"] .st-header-desktop nav .group span:has(+ div > .st-nav-sublink) { display: none; }
[data-tenant="elevation-community-land-trust"] .st-nav-cta {
  background: var(--tenant-red) !important;
  color: #fff !important;
  border-radius: 10px;
  font-size: 0.95rem;
}
/* Two header buttons (Homeowner Portal, Donate Now): the first is the quieter
   outline, so the solid red Donate Now stays the one call to action. */
[data-tenant="elevation-community-land-trust"] .st-nav-cta:has(+ .st-nav-cta) {
  background: transparent !important;
  color: var(--eclt-teal-deep) !important;
  box-shadow: inset 0 0 0 2px var(--eclt-teal);
}
[data-tenant="elevation-community-land-trust"] .st-nav-cta:has(+ .st-nav-cta):is(:hover, :focus-visible) { color: #fff !important; }
[data-tenant="elevation-community-land-trust"] .st-nav-cta + .st-nav-cta { margin-left: 0.25rem; }
/* Phone menu: the two header buttons as buttons (outline portal, solid donate). */
[data-tenant="elevation-community-land-trust"] .st-mobile-cta { margin: 0.6rem 0.25rem 0; text-align: center; border-radius: 10px; background: var(--tenant-red); color: #fff; }
[data-tenant="elevation-community-land-trust"] .st-mobile-cta:has(+ .st-mobile-cta) { margin-top: 1rem; background: transparent; color: var(--eclt-teal-deep); box-shadow: inset 0 0 0 2px var(--eclt-teal); }
[data-tenant="elevation-community-land-trust"] .st-mobile-cta:has(+ .st-mobile-cta):is(:hover, :focus-visible) { color: #fff; }
/* Phone menu panel, in the FAQ rows' language (shared MobileNav hooks only).
   - The logo on a white bar, under the footer's three-colour stripe. The
     shared default is the site name on the brand band.
   - Top-level items in the heading face on fine rules; a group's toggle is
     the FAQ's outlined circle and fills teal when open.
   - An open group's links hang off a teal line.
   - A faint Colorado ridgeline closes the panel's empty foot. */
[data-tenant="elevation-community-land-trust"] .st-mobile-panel { border-top: 5px solid; border-image: linear-gradient(90deg, var(--eclt-teal) 0 70%, var(--eclt-orange) 70% 85%, var(--tenant-red) 85%) 1; }
[data-tenant="elevation-community-land-trust"] .st-mobile-head { background: var(--tenant-surface); color: var(--tenant-ink); border-bottom: 1px solid var(--tenant-line); padding-block: 0.85rem; }
[data-tenant="elevation-community-land-trust"] .st-mobile-head .st-mobile-head-logo { display: block; }
[data-tenant="elevation-community-land-trust"] .st-mobile-head .st-mobile-head-name { display: none; }
[data-tenant="elevation-community-land-trust"] .st-mobile-head button { color: var(--eclt-teal); border: 1.5px solid color-mix(in srgb, var(--eclt-teal) 45%, transparent); border-radius: 50%; width: 2.6rem; height: 2.6rem; }
[data-tenant="elevation-community-land-trust"] .st-mobile-head button:hover { background: var(--eclt-teal); color: #fff; }
[data-tenant="elevation-community-land-trust"] .st-mobile-list { padding: 0.75rem 1.25rem 1.5rem; }
[data-tenant="elevation-community-land-trust"] .st-mobile-list > :is(.st-mobile-group, .st-mobile-item--leaf:not(.st-mobile-cta)) { border-bottom: 1px solid color-mix(in srgb, var(--eclt-teal) 22%, var(--tenant-line)); }
[data-tenant="elevation-community-land-trust"] .st-mobile-list .st-mobile-item:not(.st-mobile-cta) { border-radius: 0; padding: 0.95rem 0.15rem; font-family: var(--tenant-font-heading); font-size: 1.2rem; font-weight: 600; background: none; }
[data-tenant="elevation-community-land-trust"] .st-mobile-list .st-mobile-item:not(.st-mobile-cta):hover { color: var(--eclt-teal-deep); background: none; }
[data-tenant="elevation-community-land-trust"] .st-mobile-toggle { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--eclt-teal) 50%, transparent); color: var(--eclt-teal); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
[data-tenant="elevation-community-land-trust"] .st-mobile-row:is(:hover, [aria-expanded="true"]) .st-mobile-toggle { background: var(--eclt-teal); border-color: var(--eclt-teal); color: #fff; }
[data-tenant="elevation-community-land-trust"] .st-mobile-row[aria-expanded="true"] { color: var(--eclt-teal-deep); }
[data-tenant="elevation-community-land-trust"] .st-mobile-sub { margin: 0 0 1rem 0.35rem; padding-left: 1rem; border-left: 2px solid var(--eclt-teal); gap: 0.1rem; }
[data-tenant="elevation-community-land-trust"] .st-mobile-sub > a { padding: 0.55rem 0.6rem; font-size: 1.05rem; font-weight: 500; color: var(--tenant-ink); border-radius: 8px; }
[data-tenant="elevation-community-land-trust"] .st-mobile-sub > a:hover { background: var(--tenant-tint); color: var(--eclt-teal-deep); }
[data-tenant="elevation-community-land-trust"] .st-mobile-list .st-mobile-cta { margin-inline: 0; padding-block: 0.85rem; font-size: 1.05rem; }
[data-tenant="elevation-community-land-trust"] .st-mobile-panel::after {
  content: "";
  flex: none;
  display: block;
  height: 5.5rem;
  margin-top: auto;
  background: color-mix(in srgb, var(--eclt-teal) 28%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 78 L60 52 L100 64 L170 26 L215 50 L260 40 L320 70 L360 56 L400 66' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M0 88 L80 70 L140 80 L230 58 L300 76 L400 64' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 78 L60 52 L100 64 L170 26 L215 50 L260 40 L320 70 L360 56 L400 66' fill='none' stroke='black' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M0 88 L80 70 L140 80 L230 58 L300 76 L400 64' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
/* The menu (four links, two buttons, search) needs ~1100px in one row: labels
   never wrap, spacing tightens on a laptop, and below that the phone menu takes
   over (the shared header switches at 768px). */
[data-tenant="elevation-community-land-trust"] :is(.st-nav-link, .st-nav-cta) { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1279px) {
  [data-tenant="elevation-community-land-trust"] .st-header-desktop .st-nav-link { padding-inline: 0.65rem; font-size: 0.94rem; }
  [data-tenant="elevation-community-land-trust"] .st-header-desktop .st-nav-cta { padding-inline: 0.95rem; font-size: 0.9rem; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  [data-tenant="elevation-community-land-trust"] .st-header-desktop { display: none !important; }
  [data-tenant="elevation-community-land-trust"] .st-header-mobile { display: block !important; }
}

/* ── Bands ─────────────────────────────────────────────────────────────────── */
.eclt-band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.eclt-band--surface { background: var(--tenant-surface); }
.eclt-band--mist { background: var(--tenant-mist); }
.eclt-band--tint { background: var(--tenant-tint); }
/* Each band names its ground: the offset outlines drawn with box-shadow paint
   their inner layer in it (team photos, the shared video and gallery). */
.eclt-band--surface, [data-tenant="elevation-community-land-trust"] section[data-tone="surface"] { --eclt-ground: var(--tenant-surface); }
.eclt-band--mist, [data-tenant="elevation-community-land-trust"] section[data-tone="mist"] { --eclt-ground: var(--tenant-mist); }
.eclt-band--tint, [data-tenant="elevation-community-land-trust"] section[data-tone="tint"] { --eclt-ground: var(--tenant-tint); }
.eclt-band--brand, [data-tenant="elevation-community-land-trust"] section[data-tone="brand"] { --eclt-ground: var(--eclt-teal); }
.eclt-band--ink, [data-tenant="elevation-community-land-trust"] section[data-tone="ink"] { --eclt-ground: var(--eclt-night); }
.eclt-band--brand { background: var(--eclt-teal); color: #fff; }
.eclt-band--ink { background: var(--eclt-night); color: #fff; }
.eclt-band--brand :is(.st-h2, .st-h3, h2, h3),
.eclt-band--ink :is(.st-h2, .st-h3, h2, h3) { color: #fff; }

.eclt-head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.eclt-head--center { text-align: center; align-items: center; }
.eclt-head-copy { max-width: 46rem; }
.eclt-head-title { margin: 0; }
.eclt-head-intro { margin: 1rem 0 0; font-size: 1.3rem; color: var(--tenant-slate); max-width: 40rem; }
.eclt-head--center .eclt-head-intro { margin-inline: auto; }
.eclt-band--brand .eclt-head-intro, .eclt-band--ink .eclt-head-intro { color: rgb(255 255 255 / 0.85); }
@media (min-width: 900px) {
  .eclt-head--action { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .eclt-head--action .eclt-head-action { flex: none; padding-bottom: 0.35rem; }
}
.eclt-band-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.eclt-band-ctas--center { justify-content: center; }

/* ── Home mark: a play on the logo's line mark ─────────────────────────────
   Teal house, orange base line, coral doorway (HomeMark in common.tsx). The
   lines draw in on load, then the base and door drift against each other. */
.eclt-mark { position: absolute; pointer-events: none; overflow: visible; }
.eclt-mark path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.eclt-mark-halo path { stroke: var(--tenant-mist); stroke-width: 20; }
.eclt-mark-lines path { stroke-width: 12; }
.eclt-mark-lines .eclt-mark-house { stroke: var(--eclt-teal); }
.eclt-mark-lines .eclt-mark-base { stroke: var(--eclt-orange); }
.eclt-mark-lines .eclt-mark-door { stroke: var(--tenant-red); }
.eclt-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: eclt-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.eclt-mark .eclt-mark-house { animation-delay: 0.25s; animation-duration: 1.4s; }
.eclt-mark .eclt-mark-base { animation-delay: 1.05s; }
.eclt-mark .eclt-mark-door { animation-delay: 1.45s; }
@keyframes eclt-draw { to { stroke-dashoffset: 0; } }
@keyframes eclt-drift { 0% { transform: translate(0, 0); } 100% { transform: translate(-5px, -4px); } }
@keyframes eclt-drift-door { 0% { transform: translate(0, 0); } 100% { transform: translate(4px, 3px); } }
.eclt-mark .eclt-mark-base { animation: eclt-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) 1.05s forwards, eclt-drift 6s ease-in-out 2.6s infinite alternate; }
.eclt-mark .eclt-mark-door { animation: eclt-draw 1.15s cubic-bezier(0.65, 0, 0.35, 1) 1.45s forwards, eclt-drift-door 6.5s ease-in-out 3s infinite alternate; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.eclt-hero { position: relative; overflow: hidden; background: var(--tenant-mist); }
.eclt-hero-copy { position: relative; z-index: 1; }
.eclt-hero-title { margin: 0; color: var(--tenant-ink); }
.eclt-hero-sub { margin: 1.4rem 0 0; font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.45rem); line-height: 1.55; color: var(--tenant-slate); max-width: 34rem; }
.eclt-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

.eclt-hero--home { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.eclt-hero--home::after {
  /* a soft teal wash behind the photo column */
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 38%;
  background: linear-gradient(180deg, var(--tenant-tint), color-mix(in srgb, var(--tenant-tint) 40%, var(--tenant-mist)));
  z-index: 0;
}
@media (max-width: 999px) { .eclt-hero--home::after { display: none; } }
.eclt-hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) {
  .eclt-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.eclt-hero-media { position: relative; margin: 0 2rem 2rem 0; }
@media (max-width: 999px) { .eclt-hero-media { margin: 0.5rem 1.5rem 2.5rem 0; } }
.eclt-hero-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 4;
  border-radius: var(--eclt-radius-lg);
  overflow: hidden;
  box-shadow: var(--eclt-shadow-lift);
  background: var(--tenant-tint);
}
.eclt-hero-frame img, .eclt-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The house mark overlaps the photo's bottom-right corner (plain wall and
   window in the hero photo), reaching past the frame into the page. */
.eclt-hero-mark { width: clamp(8rem, 5.5rem + 7vw, 13rem); height: auto; right: clamp(-3.5rem, -1rem - 2.5vw, -1.75rem); bottom: clamp(-3.5rem, -1rem - 2.6vw, -2rem); z-index: 2; }

.eclt-hero--interior, .eclt-hero--banner { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); border-bottom: 1px solid var(--tenant-line); }
.eclt-hero--banner .eclt-hero-copy { max-width: 48rem; }
.eclt-hero--item { padding-block: clamp(2rem, 1.6rem + 1.6vw, 3.25rem); }
.eclt-hero--item .eclt-hero-copy { max-width: 58rem; }
.eclt-hero--interior .eclt-hero-mark { width: 6.5rem; right: -1.5rem; bottom: -1.5rem; }
.eclt-hero--interior .eclt-hero-frame { aspect-ratio: 3 / 2; }

/* ── Icon cards ("how it works") ───────────────────────────────────────────── */
.eclt-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .eclt-cards:not(:has(> :nth-child(3))) { grid-template-columns: repeat(var(--eclt-cols, 2), minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eclt-cards { grid-template-columns: repeat(var(--eclt-cols, 3), minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 999px) {
  .eclt-cards:has(> :nth-child(3)) > .eclt-card-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-content: start; }
  .eclt-cards:has(> :nth-child(3)) > .eclt-card-icon > * { grid-column: 2; }
  .eclt-cards:has(> :nth-child(3)) > .eclt-card-icon > .eclt-card-icon-mark { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .eclt-cards:has(> :nth-child(3)) > .eclt-card-icon .eclt-arrow-link { justify-self: start; }
}
.eclt-card-icon {
  position: relative;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
  padding: 2rem 1.75rem 1.9rem;
  box-shadow: var(--eclt-shadow);
}
.eclt-band--surface .eclt-card-icon { background: var(--tenant-mist); border-color: transparent; box-shadow: none; }
.eclt-card-icon-mark {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 10px;
  /* White tile + teal hairline: the pale tint alone vanished on the sand card. */
  background: var(--tenant-surface);
  border: 1.5px solid color-mix(in srgb, var(--eclt-teal) 45%, transparent);
  color: var(--eclt-teal);
  margin-bottom: 1.25rem;
  box-shadow: 0.35rem 0.35rem 0 -0.1rem var(--eclt-orange);
}
.eclt-card-icon-mark svg { width: 1.6rem; height: 1.6rem; }
.eclt-card-icon-mark img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.eclt-card-icon-title { font-family: var(--tenant-font-heading); font-size: var(--eclt-card-title); font-weight: 600; line-height: 1.25; margin: 0 0 0.6rem; color: var(--tenant-ink); }
.eclt-card-icon-text { margin: 0; font-size: var(--eclt-copy); color: var(--tenant-slate); }
.eclt-card-icon .eclt-arrow-link { margin-top: 1.1rem; }

/* ── Numbered steps (application path) ─────────────────────────────────────
   Bordered step cards on a connector rail. Scroll-in (reveal.tsx arms it):
   the rail fill draws across, each number's tile outline draws as the fill
   reaches it, then the tile fills + the digit pops, then its card rises.
   The server HTML is the finished state; without JS or with reduced motion
   nothing is hidden. Each step's link sits on its card's bottom edge. */
.eclt-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; --eclt-step-num: 3.25rem; --eclt-step-beat: 0.32s; }
.eclt-step { position: relative; display: grid; grid-template-columns: var(--eclt-step-num) 1fr; gap: 1rem; align-items: stretch; }
.eclt-step-num { position: relative; z-index: 1; display: grid; place-items: center; width: var(--eclt-step-num); height: var(--eclt-step-num); border-radius: 10px; background: var(--eclt-teal); color: #fff; font-family: var(--tenant-font-heading); font-weight: 700; font-size: 1.35rem; }
.eclt-step:last-child .eclt-step-num { background: var(--tenant-red); }
.eclt-step-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; }
.eclt-step-ring rect { fill: none; stroke: var(--eclt-orange); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-step-body {
  display: flex;
  flex-direction: column;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
  padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: var(--eclt-shadow);
}
.eclt-step-title { font-family: var(--tenant-font-heading); font-size: var(--eclt-card-title); font-weight: 600; margin: 0 0 0.85rem; color: var(--tenant-ink); line-height: 1.25; }
.eclt-step-text { margin: 0 0 1.1rem; font-size: var(--eclt-copy); color: var(--tenant-slate); }
.eclt-step-text:last-child { margin-bottom: 0; }
/* Links pin to the card's bottom edge, level across the row. */
.eclt-step-body .eclt-arrow-link { margin-top: auto; align-self: flex-start; }
/* Rail: a track with a fill that draws across (desktop) or down (mobile). */
.eclt-steps-track { position: absolute; pointer-events: none; background: color-mix(in srgb, var(--eclt-teal) 18%, transparent); border-radius: 2px; }
.eclt-steps-fill { position: absolute; inset: 0; background: var(--eclt-teal); border-radius: inherit; transform-origin: 0 0; }
@media (max-width: 999px) {
  /* Stacked: one short segment joins each number to the next. */
  .eclt-steps-track { display: none; }
  .eclt-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--eclt-step-num) / 2 - 1.5px);
    top: calc(var(--eclt-step-num) + 0.35rem);
    bottom: -1rem;
    width: 3px;
    border-radius: 2px;
    background: var(--eclt-teal);
    transform-origin: 0 0;
  }
  .eclt-steps[data-reveal="armed"] .eclt-step::before { transform: scaleY(0); }
  .eclt-steps[data-inview="true"] .eclt-step::before { transform: none; transition: transform 0.4s ease calc(0.55s + var(--i) * var(--eclt-step-beat)); }
}
@media (min-width: 1000px) {
  .eclt-steps { grid-template-columns: repeat(var(--eclt-steps, 4), minmax(0, 1fr)); gap: 1.25rem; }
  .eclt-step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1.1rem; }
  .eclt-steps-track { top: calc(var(--eclt-step-num) / 2 - 1.5px); height: 3px; left: calc(var(--eclt-step-num) / 2); right: calc((100% - 1.25rem * (var(--eclt-steps, 4) - 1)) / var(--eclt-steps, 4) - var(--eclt-step-num) / 2); }
  .eclt-steps[data-reveal="armed"] .eclt-steps-fill { transform: scaleX(0); }
}
/* Armed (JS, motion allowed) → start state; in view → play. */
.eclt-steps[data-reveal="armed"] .eclt-step-ring rect { stroke-dashoffset: 1; }
.eclt-steps[data-reveal="armed"] .eclt-step-num { background: var(--tenant-surface); color: transparent; }
.eclt-steps[data-reveal="armed"] .eclt-step-digit { display: inline-block; transform: scale(0.4); opacity: 0; }
.eclt-steps[data-reveal="armed"] .eclt-step-body { opacity: 0; transform: translateY(14px); }
.eclt-steps[data-inview="true"] .eclt-steps-fill { transform: none; transition: transform calc(var(--eclt-steps, 5) * var(--eclt-step-beat)) cubic-bezier(0.45, 0, 0.25, 1) 0.15s; }
.eclt-steps[data-inview="true"] .eclt-step-ring rect { stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease-out calc(0.1s + var(--i) * var(--eclt-step-beat)); }
.eclt-steps[data-inview="true"] .eclt-step-num { background: var(--eclt-teal); color: #fff; transition: background-color 0.3s ease calc(0.45s + var(--i) * var(--eclt-step-beat)), color 0.3s ease calc(0.45s + var(--i) * var(--eclt-step-beat)); }
.eclt-steps[data-inview="true"] .eclt-step:last-child .eclt-step-num { background: var(--tenant-red); }
.eclt-steps[data-inview="true"] .eclt-step-digit { transform: none; opacity: 1; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--i) * var(--eclt-step-beat)), opacity 0.2s ease calc(0.5s + var(--i) * var(--eclt-step-beat)); }
.eclt-steps[data-inview="true"] .eclt-step-body { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.6s + var(--i) * var(--eclt-step-beat)), transform 0.5s ease calc(0.6s + var(--i) * var(--eclt-step-beat)), var(--eclt-step-t); }
/* Final step = the destination: deep-teal card, coral number, house mark. */
.eclt-step:last-child .eclt-step-body {
  position: relative;
  overflow: hidden;
  background: var(--eclt-teal-deep);
  border-color: var(--eclt-teal-deep);
  box-shadow: var(--eclt-shadow-lift);
  padding-bottom: 5.5rem;
}
.eclt-step:last-child .eclt-step-title { color: #fff; }
.eclt-step:last-child .eclt-step-text { color: rgb(255 255 255 / 0.88); }
.eclt-step:last-child .eclt-step-num { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--tenant-red) 70%, transparent); }
/* Final-step key: draws in, turns, sparks (only when the steps reveal plays). */
.eclt-step-key { position: absolute; width: 6.5rem; height: auto; right: 1rem; bottom: 1rem; overflow: visible; }
.eclt-step-key path { fill: none; stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-key-bow { stroke: var(--eclt-orange); }
.eclt-key-shaft, .eclt-key-teeth { stroke: #fff; }
.eclt-key-sparks path { stroke: var(--eclt-orange); stroke-width: 4; opacity: 0; }
.eclt-key-body { transform-box: fill-box; transform-origin: 50% 50%; }
.eclt-steps[data-reveal="armed"] .eclt-step-key path { stroke-dashoffset: 1; }
.eclt-steps[data-inview="true"] .eclt-step-key { --eclt-key-at: calc(0.9s + 4 * var(--eclt-step-beat)); }
.eclt-steps[data-inview="true"] .eclt-key-bow { animation: eclt-draw 0.6s ease-out var(--eclt-key-at) forwards; }
.eclt-steps[data-inview="true"] .eclt-key-shaft { animation: eclt-draw 0.45s ease-out calc(var(--eclt-key-at) + 0.45s) forwards; }
.eclt-steps[data-inview="true"] .eclt-key-teeth { animation: eclt-draw 0.3s ease-out calc(var(--eclt-key-at) + 0.8s) forwards; }
.eclt-steps[data-inview="true"] .eclt-key-body { animation: eclt-key-turn 0.7s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--eclt-key-at) + 1.15s) both; }
.eclt-steps[data-inview="true"] .eclt-key-sparks path { animation: eclt-draw 0.35s ease-out calc(var(--eclt-key-at) + 1.7s) forwards, eclt-spark-fade 1.4s ease-out calc(var(--eclt-key-at) + 1.7s) forwards; }
@keyframes eclt-key-turn { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.12); } 55% { transform: scaleY(0.12); } }
@keyframes eclt-spark-fade { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0.35; } }
@media (min-width: 1000px) { .eclt-step:last-child .eclt-step-body { transform-origin: 50% 100%; } }
.eclt-band--brand .eclt-step-body, .eclt-band--ink .eclt-step-body { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); box-shadow: none; }
.eclt-band--brand .eclt-step-title, .eclt-band--ink .eclt-step-title { color: #fff; }
.eclt-band--brand .eclt-step-text, .eclt-band--ink .eclt-step-text { color: rgb(255 255 255 / 0.82); }

/* ── Listings ──────────────────────────────────────────────────────────────── */
.eclt-list { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .eclt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eclt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999px) {
  .eclt-list:not(.eclt-list--team, .eclt-list--rail, .eclt-list--resources, .eclt-list--lead):not(:has(> [data-facets])) > :is(.eclt-home, .eclt-news, .eclt-plain):last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eclt-list:not(.eclt-list--team, .eclt-list--rail, .eclt-list--resources, .eclt-list--lead):not(:has(> [data-facets])) > :is(.eclt-home, .eclt-news, .eclt-plain):last-child:nth-child(odd) .eclt-photo { height: 100%; aspect-ratio: auto; min-height: 15rem; }
  .eclt-list:not(.eclt-list--team, .eclt-list--rail, .eclt-list--resources, .eclt-list--lead):not(:has(> [data-facets])) > :is(.eclt-home, .eclt-news, .eclt-plain):last-child:nth-child(odd) :is(.eclt-home-body, .eclt-news-body, .eclt-plain-body) { align-self: center; }
}
.eclt-list--team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .eclt-list--team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eclt-list--team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eclt-list--rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.eclt-list--rail > * { scroll-snap-align: start; }
@media (min-width: 1000px) { .eclt-list--rail { grid-auto-columns: calc((100% - 3.5rem) / 3); } }

.eclt-photo { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tenant-tint); }
.eclt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.eclt-photo--empty::after {
  content: "";
  position: absolute;
  inset: 32% 38%;
  border: 3px solid color-mix(in srgb, var(--eclt-teal) 35%, transparent);
  border-radius: 4px;
}

/* Home cards */
.eclt-home {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tenant-surface);
  border-radius: var(--eclt-radius-lg);
  overflow: hidden;
  box-shadow: var(--eclt-shadow);
  transition: var(--eclt-step-t);
}
/* Steps off its square only when it links somewhere (the title link covers the card). */
.eclt-home:has(.eclt-home-title a):is(:hover, :focus-within) .eclt-photo img { transform: scale(1.03); }
.eclt-home-media { display: block; position: relative; }
.eclt-home-status, .eclt-home-community {
  position: absolute;
  top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
}
.eclt-home-status { left: 0.9rem; background: var(--tenant-surface); color: var(--eclt-teal-deep); }
.eclt-home-status--under-contract { background: var(--eclt-night); color: #fff; }
.eclt-home-status--coming-soon { background: var(--eclt-orange); color: var(--tenant-ink); }
.eclt-home-community { right: 0.9rem; background: rgb(16 41 42 / 0.72); color: #fff; font-weight: 600; }
.eclt-home-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
.eclt-home-price { margin: 0; font-family: var(--tenant-font-heading); font-size: 1.6rem; font-weight: 700; color: var(--tenant-ink); line-height: 1.2; }
.eclt-home-from { font-family: var(--tenant-font-body); font-size: 0.85rem; font-weight: 600; color: var(--tenant-slate); text-transform: uppercase; letter-spacing: 0.06em; }
.eclt-home-title { margin: 0.2rem 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; font-family: var(--tenant-font-body); }
.eclt-home-title a { color: var(--tenant-ink); text-decoration: none; }
.eclt-home-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.eclt-home:is(:hover, :focus-within) .eclt-home-title a { color: var(--eclt-teal); }
.eclt-home-place { margin: 0; color: var(--tenant-slate); font-size: var(--eclt-copy); }
.eclt-home-specs { list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--tenant-line); display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-weight: 600; color: var(--tenant-ink); font-size: 0.97rem; }
.eclt-home-specs li + li::before { content: "·"; margin-right: 1.1rem; margin-left: -0.55rem; color: var(--eclt-orange); font-weight: 700; }

/* News cards */
.eclt-news { position: relative; display: flex; flex-direction: column; background: var(--tenant-surface); border-radius: var(--eclt-radius-lg); overflow: hidden; box-shadow: var(--eclt-shadow); transition: var(--eclt-step-t); }
.eclt-news .eclt-photo { aspect-ratio: 16 / 9; }
.eclt-news-body { padding: 1.25rem 1.4rem 1.5rem; }
.eclt-news-meta { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--tenant-slate); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.eclt-news-media { display: block; position: relative; }
/* Type pill on the photo, matching the home-card status badge. */
.eclt-news-kind {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--tenant-surface);
  color: var(--eclt-teal-deep);
  box-shadow: 0 1px 3px rgb(16 41 42 / 0.18);
}
.eclt-news-title { margin: 0; font-family: var(--tenant-font-heading); font-size: var(--eclt-card-title); font-weight: 600; line-height: 1.25; }
.eclt-news-title a { color: var(--tenant-ink); text-decoration: none; }
.eclt-news-title a::after { content: ""; position: absolute; inset: 0; }
.eclt-news:is(:hover, :focus-within) .eclt-news-title a { color: var(--eclt-teal); }
.eclt-news-excerpt { margin: 0.6rem 0 0; color: var(--tenant-slate); font-size: var(--eclt-copy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Team */
.eclt-person { position: relative; text-align: left; }
.eclt-person-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--eclt-radius-lg); overflow: hidden; background: var(--tenant-tint); margin-bottom: 0.9rem; }
.eclt-person-photo img { width: 100%; height: 100%; object-fit: cover; }
.eclt-person-initials { font-family: var(--tenant-font-heading); font-size: 2.2rem; font-weight: 700; color: var(--eclt-teal); }
.eclt-person-name { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.25; font-family: var(--tenant-font-heading); }
.eclt-person-name a { color: var(--tenant-ink); text-decoration: none; }
.eclt-person-name a::after { content: ""; position: absolute; inset: 0; }
.eclt-person-name a:hover { color: var(--eclt-teal); }
.eclt-person-role { margin: 0.2rem 0 0; color: var(--tenant-slate); font-size: 0.95rem; }

/* Resources */
.eclt-list--resources { list-style: none; margin: 0; padding: 0; gap: 1rem; }
.eclt-resource { position: relative; display: flex; gap: 1rem; align-items: center; background: var(--tenant-surface); border: 1px solid var(--tenant-line); border-radius: var(--eclt-radius-lg); padding: 1rem 1.2rem; transition: var(--eclt-step-t); }
.eclt-resource-kind { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 8px; background: var(--tenant-tint); color: var(--eclt-teal-deep); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; }
.eclt-resource-title { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.25; font-family: var(--tenant-font-heading); }
.eclt-resource-title a { color: var(--tenant-ink); }
.eclt-resource-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card clickable */
.eclt-resource:is(:hover, :focus-within) .eclt-resource-title a { color: var(--eclt-teal); }
.eclt-resource-meta { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--tenant-slate); }

/* Plain cards */
.eclt-plain { position: relative; background: var(--tenant-surface); border-radius: var(--eclt-radius-lg); overflow: hidden; box-shadow: var(--eclt-shadow); transition: var(--eclt-step-t); }
.eclt-plain:is(:hover, :focus-within) .eclt-plain-title a { color: var(--eclt-teal); }
.eclt-plain-body { padding: 1.25rem 1.4rem 1.5rem; }
.eclt-plain-title { margin: 0; font-size: var(--eclt-card-title); font-family: var(--tenant-font-heading); font-weight: 600; line-height: 1.25; }
.eclt-plain-title a { color: var(--tenant-ink); text-decoration: none; }
.eclt-plain-title a::after { content: ""; position: absolute; inset: 0; }
.eclt-plain-text { margin: 0.5rem 0 0; font-size: var(--eclt-copy); color: var(--tenant-slate); }

/* ── Testimonials: neighbors speaking ────────────────────────────────────────
   Homes on one ground line, each person's words in a speech bubble above
   their home, names on the ground below. Bubbles bottom-align so every tail
   meets its roof; the captions' ground lines join into one across the row. */
.eclt-voices { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 2.75rem; max-width: 74rem; }
/* Desktop: bubbles, homes and names each share a row across the columns
   (subgrid), so every home stands on the same ground line whatever the
   length of the quote above or the caption below. */
@media (min-width: 900px) {
  .eclt-voices { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0; }
  .eclt-voices > .eclt-voice { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 0 clamp(0.75rem, 0.4rem + 1vw, 1.25rem); }
  .eclt-voices > .eclt-voice > figure { display: contents; }
  .eclt-voices .eclt-voice-bubble { align-self: end; }
  .eclt-voices .eclt-voice-home { justify-self: center; align-self: end; }
  .eclt-voices .eclt-voice-cite { align-self: start; margin-inline: calc(-1 * clamp(0.75rem, 0.4rem + 1vw, 1.25rem)); }
}
.eclt-voices:has(> .eclt-voice:only-child) { max-width: 42rem; }
.eclt-voice figure { height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; padding: 0 clamp(0.75rem, 0.4rem + 1vw, 1.25rem); }
.eclt-voice-bubble { position: relative; width: 100%; margin: auto 0 1.05rem; box-sizing: border-box; padding: 1.5rem 1.6rem 1.45rem; background: var(--tenant-surface); color: var(--tenant-ink); border-radius: 20px; box-shadow: 0 22px 44px -26px rgb(0 0 0 / 0.55); transform-origin: 50% 100%; }
.eclt-voice-bubble::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 26px; height: 26px; background: var(--tenant-surface); border-radius: 0 0 6px 0; transform: translateX(-50%) rotate(45deg); }
.eclt-voice-mark { display: block; width: 1.9rem; height: auto; margin-bottom: 0.7rem; fill: var(--eclt-orange); }
.eclt-voice-bubble p { position: relative; z-index: 1; margin: 0; font-size: var(--eclt-copy); line-height: 1.55; }
.eclt-voices:has(> .eclt-voice:only-child) .eclt-voice-bubble p { font-family: var(--tenant-font-heading); font-size: 1.4rem; line-height: 1.45; }
.eclt-voice-home { display: block; width: clamp(5.5rem, 4.5rem + 2.5vw, 7.75rem); height: auto; overflow: visible; }
.eclt-voice-home path { fill: none; stroke-width: 4.5; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-voice-wall { stroke: var(--eclt-teal-deep); }
.eclt-voice-light { stroke: var(--eclt-orange); fill: var(--eclt-orange) !important; }
.eclt-voice-light--door { stroke: var(--tenant-red); fill: var(--tenant-red) !important; }
.eclt-voices-band--dark .eclt-voice-wall { stroke: rgb(255 255 255 / 0.92); }
.eclt-voice-cite { position: relative; align-self: stretch; margin: 0 calc(-1 * clamp(0.75rem, 0.4rem + 1vw, 1.25rem)); padding: 1rem 0.75rem 0; text-align: center; }
.eclt-voice-cite::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--eclt-teal-deep); transform-origin: 0 50%; }
.eclt-voices-band--dark .eclt-voice-cite::before { background: rgb(255 255 255 / 0.55); }
.eclt-voice-cite > span:last-child { display: block; }
.eclt-voice-name { display: block; font-weight: 700; font-size: 1.08rem; }
.eclt-voice-role { display: block; margin-top: 0.15rem; font-size: 0.95rem; opacity: 0.82; }
.eclt-voices-band--dark .eclt-voice-cite { color: #fff; }
.eclt-voice-photo { display: block; width: 3rem; height: 3rem; margin: 0 auto 0.5rem; border-radius: 50%; overflow: hidden; }
.eclt-voice-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .eclt-voice-cite { margin-inline: 0; }
}
/* Scroll-in: the ground draws, the homes draw and light, the bubbles pop. */
.eclt-voices[data-reveal="armed"]:not([data-inview]) .eclt-voice-cite::before { transform: scaleX(0); }
.eclt-voices[data-reveal="armed"]:not([data-inview]) .eclt-voice-home path { stroke-dashoffset: 1; }
.eclt-voices[data-reveal="armed"]:not([data-inview]) .eclt-voice-light { fill-opacity: 0; }
.eclt-voices[data-reveal="armed"]:not([data-inview]) :is(.eclt-voice-bubble, .eclt-voice-cite > span, .eclt-voice-photo) { opacity: 0; }
.eclt-voices[data-reveal="armed"]:not([data-inview]) .eclt-voice-bubble { transform: translateY(14px) scale(0.92); }
.eclt-voices[data-inview="true"] .eclt-voice-cite::before { transition: transform 0.7s ease calc(var(--i) * 0.12s); }
.eclt-voices[data-inview="true"] .eclt-voice-home path { transition: stroke-dashoffset 0.8s ease calc(0.35s + var(--i) * 0.2s), fill-opacity 0.4s ease calc(1.05s + var(--i) * 0.2s); }
.eclt-voices[data-inview="true"] .eclt-voice-bubble { transition: opacity 0.45s ease calc(1.25s + var(--i) * 0.25s), transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) calc(1.25s + var(--i) * 0.25s); }
.eclt-voices[data-inview="true"] :is(.eclt-voice-cite > span, .eclt-voice-photo) { transition: opacity 0.5s ease calc(1.35s + var(--i) * 0.25s); }
/* Continuous life, after the entrance and only for visitors who accept motion:
   smoke curls up from the chimney, lit windows breathe, bubbles float. The
   float uses `translate` (the entrance animates `transform`), and every
   property here is cheap to animate. Staggered so nothing moves in step. */
.eclt-voice-smoke path { fill: none; stroke: var(--tenant-slate); stroke-width: 3; stroke-linecap: round; stroke-dasharray: none; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.eclt-voices-band--dark .eclt-voice-smoke path { stroke: rgb(255 255 255 / 0.75); }
@media (prefers-reduced-motion: no-preference) {
  .eclt-voice-smoke path { animation: eclt-voice-smoke 4.8s ease-out calc(2s + var(--s) * 1.6s) infinite; }
  .eclt-voice-light { animation: eclt-voice-glow 5.5s ease-in-out calc(2.2s + var(--i) * 1.4s) infinite; }
  .eclt-voice-bubble { animation: eclt-voice-float 6.5s ease-in-out calc(2.4s + var(--i) * 1.7s) infinite; }
}
@keyframes eclt-voice-smoke {
  0% { opacity: 0; translate: 0 5px; scale: 0.7; }
  25% { opacity: 0.8; }
  100% { opacity: 0; translate: 4px -18px; scale: 1.35; }
}
@keyframes eclt-voice-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes eclt-voice-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* The ridgeline behind the homes: one stretch per column, sitting on the ground
   line (bottom of the stretch = top of the caption) and joining its neighbors.
   The homes are filled with the band's own colour, so the ridge passes behind
   them. Strokes don't scale with the stretched viewBox. */
.eclt-voices-band.eclt-band--brand { --eclt-voice-ground: var(--eclt-teal); }
.eclt-voices-band.eclt-band--ink { --eclt-voice-ground: var(--eclt-night); }
.eclt-voices-band.eclt-band--mist { --eclt-voice-ground: var(--tenant-mist); }
.eclt-voices-band.eclt-band--tint { --eclt-voice-ground: var(--tenant-tint); }
.eclt-voices-band.eclt-band--surface { --eclt-voice-ground: var(--tenant-surface); }
.eclt-voice-wall { fill: var(--eclt-voice-ground, transparent) !important; }
.eclt-voice-bubble { z-index: 1; }
.eclt-voice-home { position: relative; z-index: 1; }
.eclt-voice-ridge { position: absolute; left: 0; bottom: 100%; z-index: 0; width: 100%; height: clamp(6rem, 4.5rem + 3.5vw, 8.25rem); overflow: visible; pointer-events: none; }
/* The ridge stretches to its column (preserveAspectRatio none), so its
   strokes are non-scaling to keep one weight. That rules out the pathLength
   dash draw used elsewhere: with non-scaling-stroke Chrome lays the dash out
   in screen pixels, so any column wider than the 400-unit drawing (a stacked
   tablet layout) drew only part of each ridge. The draw is a left-to-right
   wipe of the whole ridge instead, which holds at any width. */
.eclt-voice-ridge path { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.eclt-voice-ridge-far { stroke: rgb(255 255 255 / 0.07); }
.eclt-voice-ridge-near { stroke: rgb(255 255 255 / 0.2); }
.eclt-voice-snow { stroke: rgb(255 255 255 / 0.32); fill: rgb(255 255 255 / 0.1) !important; }
.eclt-voices-band:not(.eclt-voices-band--dark) .eclt-voice-ridge-far { stroke: color-mix(in srgb, var(--eclt-teal) 18%, transparent); }
.eclt-voices-band:not(.eclt-voices-band--dark) .eclt-voice-ridge-near { stroke: color-mix(in srgb, var(--eclt-teal) 32%, transparent); }
.eclt-voices-band:not(.eclt-voices-band--dark) .eclt-voice-snow { stroke: color-mix(in srgb, var(--eclt-teal) 40%, transparent); fill: transparent !important; }
.eclt-voices[data-reveal="armed"]:not([data-inview]) .eclt-voice-ridge { clip-path: inset(-20% 100% -20% -2%); }
.eclt-voices[data-inview="true"] .eclt-voice-ridge { clip-path: inset(-20% -2% -20% -2%); transition: clip-path 1.2s ease calc(0.15s + var(--i) * 0.15s); }
@media (prefers-reduced-motion: no-preference) {
  .eclt-voice-snow { animation: eclt-voice-shimmer 7s ease-in-out calc(2.5s + var(--i) * 2.2s) infinite; }
}
@keyframes eclt-voice-shimmer { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }


/* ── Call-to-action band ───────────────────────────────────────────────────── */
.eclt-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  background: var(--eclt-teal-deep);
  color: #fff;
  border-radius: var(--eclt-radius-lg);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.75rem, 1rem + 3vw, 4rem);
}
@media (min-width: 900px) { .eclt-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.eclt-cta-title { margin: 0; color: #fff !important; }
.eclt-cta-text { margin: 0.9rem 0 0; font-size: 1.3rem; color: rgb(255 255 255 / 0.85); max-width: 38rem; }
.eclt-cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.eclt-cta-copy { position: relative; z-index: 1; }
/* Colorado ridgeline across the panel's bottom edge (PeaksMark). Draws in on
   scroll (Reveal arms it); the sun draws, then rises from behind the range. */
.eclt-cta { padding-bottom: calc(clamp(1.75rem, 1rem + 2.5vw, 3rem) + clamp(2.5rem, 0.5rem + 6.5vw, 7rem)); }
/* The range + sun get their own strip under the copy: the sun rises to ~14%
   of the panel width above its bottom edge, so the bottom padding clears it
   at every width (a percentage padding tracks the panel's width). */
.eclt-cta { padding-bottom: max(clamp(2.25rem, 1.5rem + 3vw, 4rem), calc(14.5% + 0.75rem)); }
.eclt-cta-peaks { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; pointer-events: none; z-index: 0; }
@media (max-width: 640px) {
  .eclt-cta { padding-bottom: calc(30% + 0.75rem); }
  .eclt-cta-peaks { left: -62%; right: auto; width: 210%; }
}
.eclt-peaks path, .eclt-peaks circle { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-peaks-far { stroke: rgb(255 255 255 / 0.28); stroke-width: 2; }
.eclt-peaks path.eclt-peaks-mask { fill: var(--eclt-teal-deep); stroke: none; stroke-dasharray: none; }
.eclt-peaks-near { stroke: rgb(255 255 255 / 0.7); stroke-width: 2.5; }
.eclt-peaks path.eclt-peaks-snow { stroke: #fff; stroke-width: 2.5; fill: rgb(255 255 255 / 0.16); }
.eclt-peaks { overflow: visible; }
.eclt-peaks-sun circle { stroke: var(--eclt-orange); stroke-width: 3; }
.eclt-peaks-rays path { stroke: var(--eclt-orange); stroke-width: 3; }
/* The rays turn slowly around the sun's centre once they are out. */
.eclt-peaks-rays-spin { transform-box: view-box; transform-origin: 740px -16px; }
/* Start state only until the panel scrolls into view (so the in-view rules
   never have to out-rank it). */
.eclt-cta[data-reveal="armed"]:not([data-inview]) .eclt-peaks :is(.eclt-peaks-far, .eclt-peaks-near, .eclt-peaks-snow, circle, .eclt-peaks-rays path) { stroke-dashoffset: 1; }
.eclt-cta[data-reveal="armed"]:not([data-inview]) .eclt-peaks-sun { transform: translateY(40px); }
.eclt-cta[data-inview="true"] .eclt-peaks-far { stroke-dashoffset: 0; transition: stroke-dashoffset 2s cubic-bezier(0.45, 0, 0.25, 1) 0.1s; }
.eclt-cta[data-inview="true"] .eclt-peaks-near { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s; }
.eclt-cta[data-reveal="armed"]:not([data-inview]) .eclt-peaks-snow { fill-opacity: 0; }
.eclt-cta[data-inview="true"] .eclt-peaks-snow { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease-out 1.8s, fill-opacity 0.6s ease-out 2.3s; }
.eclt-cta[data-inview="true"] .eclt-peaks-sun circle { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s ease-out 1.2s; }
.eclt-cta[data-inview="true"] .eclt-peaks-sun { transform: none; transition: transform 2.6s cubic-bezier(0.22, 1, 0.36, 1) 1.3s; }
.eclt-cta[data-inview="true"] .eclt-peaks-rays path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.35s ease-out calc(2.4s + var(--r) * 0.08s); }
.eclt-cta[data-inview="true"] .eclt-peaks-rays-spin { animation: eclt-rays-spin 60s linear 3.4s infinite; }
@keyframes eclt-rays-spin { to { transform: rotate(360deg); } }

/* ── Shared blocks restyled (video, photo cards, headings) ─────────────────── */
[data-tenant="elevation-community-land-trust"] .st-img-sec .aspect-video { border-radius: var(--eclt-radius-lg); box-shadow: -1.5rem 1.5rem 0 -2px var(--eclt-ground, var(--tenant-surface)), -1.5rem 1.5rem 0 0 var(--eclt-orange), var(--eclt-shadow-lift); }
@media (max-width: 640px) { [data-tenant="elevation-community-land-trust"] .st-img-sec .aspect-video { box-shadow: -0.75rem 0.75rem 0 -2px var(--eclt-ground, var(--tenant-surface)), -0.75rem 0.75rem 0 0 var(--eclt-orange), var(--eclt-shadow-lift); } }
[data-tenant="elevation-community-land-trust"] .st-img-sec p.text-lg { font-size: 1.3rem; }
/* Shared gallery (the community pages' photo rows): the photos on the card
   radius; on a wide screen the middle one drops and carries the offset
   orange square; on a phone the first runs full width over a pair. */
[data-tenant="elevation-community-land-trust"] .st-img-sec .grid.grid-cols-2 { gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); align-items: start; }
[data-tenant="elevation-community-land-trust"] .st-img-sec .grid.grid-cols-2 > img { border-radius: var(--eclt-radius-lg); box-shadow: var(--eclt-shadow); }
@media (min-width: 768px) {
  [data-tenant="elevation-community-land-trust"] .st-img-sec .grid.grid-cols-2 > img:nth-child(3n + 2) { margin-top: 2.75rem; box-shadow: -1.25rem 1.25rem 0 -2px var(--eclt-ground, var(--tenant-surface)), -1.25rem 1.25rem 0 0 var(--eclt-orange), var(--eclt-shadow); }
}
@media (max-width: 767px) {
  [data-tenant="elevation-community-land-trust"] .st-img-sec .grid.grid-cols-2 > img:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
[data-tenant="elevation-community-land-trust"] .st-card,
[data-tenant="elevation-community-land-trust"] .st-card-cell > div { border-radius: var(--eclt-radius-lg); }
[data-tenant="elevation-community-land-trust"] .st-card { border-color: var(--tenant-line); }
[data-tenant="elevation-community-land-trust"] .st-card h3 { font-size: var(--eclt-card-title); line-height: 1.25; }
/* The shared photo card hard-codes 17px body copy; match the site copy size. */
[data-tenant="elevation-community-land-trust"] .st-card h3 ~ div { font-size: var(--eclt-copy); }
[data-tenant="elevation-community-land-trust"] main section[data-tone="mist"] { background: var(--tenant-mist); }

/* Two bands of the same ground in a row read as one section. */
.eclt-band--surface + .eclt-band--surface,
.eclt-band--mist + .eclt-band--mist,
.eclt-band--tint + .eclt-band--tint { padding-top: 0; }

/* ── Illustrated cards (vision / values / mission) ─────────────────────────
   Each card leads with a line illustration (illustrations.tsx) on a ground
   tinted to its accent. On scroll-in the cards rise one after another and
   each picture draws itself (ground, then shapes, then the finishing touch). */
.eclt-illus-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .eclt-illus-cards { grid-template-columns: repeat(var(--eclt-cols, 3), minmax(0, 1fr)); } }
.eclt-illus-card {
  --eclt-illus-bg: var(--tenant-mist);
  --eclt-illus-accent: var(--eclt-teal);
  display: flex;
  flex-direction: column;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
  overflow: hidden;
  box-shadow: var(--eclt-shadow);
}
.eclt-art-panel { --eclt-illus-bg: var(--tenant-mist); --eclt-illus-accent: var(--eclt-teal); }
/* Each illustration's ground and accent: warm orange, coral, or pale teal. */
:is(.eclt-art--sunrise, .eclt-art--form, .eclt-art--savings, .eclt-art--townhomes, .eclt-art--forever, .eclt-art--events) { --eclt-illus-bg: color-mix(in srgb, var(--eclt-orange) 15%, var(--tenant-mist)); --eclt-illus-accent: var(--eclt-orange); }
:is(.eclt-art--heart, .eclt-art--contract, .eclt-art--keys, .eclt-art--city, .eclt-art--growth, .eclt-art--megaphone) { --eclt-illus-bg: color-mix(in srgb, var(--tenant-red) 11%, var(--tenant-mist)); --eclt-illus-accent: var(--tenant-red); }
:is(.eclt-art--neighbors, .eclt-art--approval, .eclt-art--study, .eclt-art--land, .eclt-art--mountain-home) { --eclt-illus-bg: var(--tenant-tint); --eclt-illus-accent: var(--eclt-teal); }
.eclt-illus-art { background: var(--eclt-illus-bg); padding: 1.75rem 1.5rem 0.25rem; border-bottom: 4px solid var(--eclt-illus-accent); }
.eclt-illus { display: block; width: 100%; max-width: 19rem; height: auto; margin-inline: auto; overflow: visible; }
.eclt-illus-body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.7rem 1.8rem; }
.eclt-illus-title { margin: 0 0 0.65rem; font-family: var(--tenant-font-heading); font-size: 1.65rem; font-weight: 600; line-height: 1.2; color: var(--tenant-ink); }
.eclt-illus-text { margin: 0; color: var(--tenant-slate); }
.eclt-illus-tags { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eclt-illus-tags li { padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--eclt-illus-bg); color: var(--tenant-ink); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* Tags with no text above them ARE the card's content (the values): a list. */
.eclt-illus-title + .eclt-illus-tags { flex-direction: column; gap: 0.7rem; margin-top: 0.35rem; }
.eclt-illus-title + .eclt-illus-tags li { display: flex; align-items: center; gap: 0.75rem; padding: 0; background: none; font-family: var(--tenant-font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.eclt-illus-title + .eclt-illus-tags li::before { content: ""; flex: none; width: 0.65rem; height: 0.65rem; background: var(--eclt-illus-accent); }
.eclt-illus-body .eclt-arrow-link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }
/* Longer copy under a card's text: paragraphs, and lists as checklists. */
.eclt-illus-copy { margin-top: 0.85rem; color: var(--tenant-slate); }
.eclt-illus-title + .eclt-illus-copy { margin-top: 0; }
.eclt-illus-copy > :first-child { margin-top: 0; }
.eclt-illus-copy > :last-child { margin-bottom: 0; }
.eclt-illus-copy p { margin: 0 0 0.75rem; }
.eclt-illus-copy ul { margin: 0.5rem 0 0.9rem; }

.eclt-illus :is(path, circle) { fill: none; stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-illus-ground { stroke: var(--eclt-teal-deep); }
.eclt-illus .eclt-illus-mask { fill: var(--eclt-illus-bg); stroke: none; }
.eclt-illus .eclt-illus-fill { fill: var(--eclt-illus-bg); }
.eclt-illus .eclt-illus-light { fill: currentColor; }
.eclt-illus-house { stroke: var(--eclt-teal); }
.eclt-illus-door { stroke: var(--tenant-red); }
.eclt-illus-window { stroke: var(--eclt-orange); }
.eclt-illus-sun :is(circle, path) { stroke: var(--eclt-orange); stroke-width: 3.5; }
.eclt-illus-rays { transform-box: view-box; transform-origin: 164px 92px; }
.eclt-illus path.eclt-illus-heart { stroke: var(--tenant-red); fill: var(--tenant-red); stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 60%; }
.eclt-illus-values path { stroke-width: 4.5; }
.eclt-illus-value--1 { stroke: var(--eclt-teal); }
.eclt-illus-value--2 { stroke: var(--eclt-orange); }
.eclt-illus-value--3 { stroke: var(--tenant-red); }
.eclt-illus-value--4 { stroke: var(--eclt-teal-deep); }
.eclt-illus-sparks path { stroke: var(--eclt-orange); stroke-width: 3.5; }
.eclt-illus-home--1, .eclt-illus-home--3 { stroke: var(--eclt-teal); }
.eclt-illus-home--2 { stroke: var(--eclt-teal-deep); }
.eclt-illus--neighbors path.eclt-illus-light { stroke: var(--eclt-orange); fill: var(--eclt-orange); }
.eclt-illus--neighbors path.eclt-illus-light--2 { stroke: var(--tenant-red); fill: var(--tenant-red); }
.eclt-illus-arc { stroke: var(--tenant-red); stroke-width: 3; }

.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus-card { opacity: 0; transform: translateY(16px); }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus :is(path, circle) { stroke-dashoffset: 1; }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus :is(.eclt-illus-light, .eclt-illus-heart) { fill-opacity: 0; }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus-sun { transform: translateY(62px); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-card { --t: calc(var(--i) * 0.35s); transition: opacity 0.6s ease var(--t), transform 0.6s ease var(--t), var(--eclt-step-t); }
.eclt-illus-reveal { --t: 0s; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus :is(path, circle) { --at: calc(var(--t) + 0.3s + var(--d, 1) * 0.2s); transition: stroke-dashoffset var(--dur, 0.7s) cubic-bezier(0.65, 0, 0.35, 1) var(--at), fill-opacity 0.45s ease calc(var(--at) + var(--dur, 0.7s)); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus .eclt-illus-ground { transition-duration: 0.6s; transition-delay: calc(var(--t) + 0.2s); }
/* Vision: house, door + window, then the sun climbs and its rays flick out. */
.eclt-illus-reveal[data-inview="true"] .eclt-illus-door { transition-duration: 0.45s; transition-delay: calc(var(--t) + 1.2s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-window { transition-duration: 0.35s; transition-delay: calc(var(--t) + 1.45s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-sun circle { transition-duration: 0.6s; transition-delay: calc(var(--t) + 1.5s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-sun { transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--t) + 1.5s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-rays path { transition: stroke-dashoffset 0.3s ease-out calc(var(--t) + 2.4s + var(--r) * 0.07s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-rays { animation: eclt-rays-spin 60s linear calc(var(--t) + 3.2s) infinite; }
/* Values: house, then the heart traces and fills, four rays, one beat. */
.eclt-illus-reveal[data-inview="true"] .eclt-illus path.eclt-illus-heart { transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--t) + 1.1s), fill-opacity 0.5s ease calc(var(--t) + 1.9s); animation: eclt-heart-beat 0.9s ease-in-out calc(var(--t) + 2.9s) 1; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-values path { transition: stroke-dashoffset 0.3s ease-out calc(var(--t) + 2.2s + var(--v) * 0.12s); }
.eclt-illus-value--1 { --v: 0; } .eclt-illus-value--2 { --v: 1; } .eclt-illus-value--3 { --v: 2; } .eclt-illus-value--4 { --v: 3; }
@keyframes eclt-heart-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.1); } 40% { transform: scale(0.98); } 60% { transform: scale(1.07); } }
/* Mission: the homes draw left to right, their lights come on, the arc joins them. */
.eclt-illus-reveal[data-inview="true"] .eclt-illus-home { transition-duration: 0.75s; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-home--2 { transition-delay: calc(var(--t) + 0.8s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-home--3 { transition-delay: calc(var(--t) + 1.1s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus--neighbors path.eclt-illus-light { transition: stroke-dashoffset 0.3s ease-out var(--lit), fill-opacity 0.45s ease var(--lit); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-light--1 { --lit: calc(var(--t) + 1.7s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-light--2 { --lit: calc(var(--t) + 1.95s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-light--3 { --lit: calc(var(--t) + 2.2s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-arc { transition-duration: 0.9s; transition-delay: calc(var(--t) + 2.45s); }


/* Colour roles for the sequenced illustrations (illustrations.tsx). */
.eclt-illus .eclt-i-teal { stroke: var(--eclt-teal); color: var(--eclt-teal); }
.eclt-illus .eclt-i-deep { stroke: var(--eclt-teal-deep); color: var(--eclt-teal-deep); }
.eclt-illus .eclt-i-orange { stroke: var(--eclt-orange); color: var(--eclt-orange); }
.eclt-illus .eclt-i-red { stroke: var(--tenant-red); color: var(--tenant-red); }
.eclt-illus .eclt-i-soft { stroke: color-mix(in srgb, var(--eclt-teal) 40%, transparent); }
.eclt-illus .eclt-i-orange-soft { stroke: color-mix(in srgb, var(--eclt-orange) 55%, transparent); stroke-width: 3; }
.eclt-illus .eclt-illus-bar { stroke-width: 11; }
.eclt-illus path.eclt-illus-snow { fill: #fff; }
/* Named motions: a group moves at its own --d beat. */
.eclt-illus-pop { transform-box: fill-box; transform-origin: 50% 50%; }
.eclt-illus-drop { transform-box: fill-box; transform-origin: 50% 100%; }
.eclt-illus :is(.eclt-illus-swing, .eclt-illus-sway, .eclt-illus-spin) { transform-box: view-box; }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus-pop { transform: scale(0.3); opacity: 0; }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus-drop { transform: translateY(-34px); opacity: 0; }
.eclt-illus-reveal[data-reveal="armed"]:not([data-inview]) .eclt-illus-swing { transform: rotate(-24deg); opacity: 0; }
.eclt-illus-reveal[data-inview="true"] :is(.eclt-illus-pop, .eclt-illus-drop, .eclt-illus-swing) { transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--t) + 0.3s + var(--d) * 0.2s), opacity 0.25s ease calc(var(--t) + 0.3s + var(--d) * 0.2s); }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-sway { animation: eclt-illus-sway 1.6s ease-in-out calc(var(--t) + 1.3s + var(--d) * 0.2s) 1; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-spin { animation: eclt-rays-spin 40s linear calc(var(--t) + 2s + var(--d) * 0.2s) infinite; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-lift { animation: eclt-illus-lift 1.5s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--t) + 1.4s + var(--d) * 0.2s) 1; }
.eclt-illus-reveal[data-inview="true"] .eclt-illus-float { animation: eclt-illus-float 2.4s ease-in-out calc(var(--t) + 1s + var(--d) * 0.2s) infinite alternate; }
@keyframes eclt-illus-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(9deg); } 65% { transform: rotate(-5deg); } }
@keyframes eclt-illus-lift { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-12px); } 72% { transform: translateY(1px); } }
@keyframes eclt-illus-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* ── Stats: a ring per percentage, every figure counts up ──────────────────── */
.eclt-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.75rem 2rem; }
@media (min-width: 760px) { .eclt-stats { grid-template-columns: repeat(var(--eclt-stats, 3), minmax(0, 1fr)); } }
.eclt-stat { display: grid; justify-items: center; align-content: start; gap: 1rem; text-align: center; }
.eclt-stat-value { font-family: var(--tenant-font-heading); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem); line-height: 1; color: var(--tenant-ink); font-variant-numeric: tabular-nums; }
.eclt-stat--ring { grid-template-areas: "ring" "label"; }
.eclt-stat--ring .eclt-stat-ring, .eclt-stat--ring .eclt-stat-value { grid-area: ring; }
.eclt-stat--ring .eclt-stat-value { align-self: center; }
.eclt-stat--ring .eclt-stat-label { grid-area: label; }
.eclt-stat-ring { width: clamp(10.5rem, 8.5rem + 5vw, 13rem); height: auto; transform: rotate(-90deg); }
.eclt-stat-ring circle { fill: none; stroke-width: 9; }
/* Deeper sand, so the empty part of the ring still reads on the tan band. */
.eclt-stat-track { stroke: color-mix(in srgb, var(--tenant-line) 62%, #a8906f); }
.eclt-stat-fill { stroke: var(--eclt-teal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--eclt-pct, 0)); }
.eclt-stat:nth-child(3n + 2) .eclt-stat-fill { stroke: var(--eclt-orange); }
.eclt-stat:nth-child(3n + 3) .eclt-stat-fill { stroke: var(--tenant-red); }
.eclt-stat-label { max-width: 17rem; font-size: var(--eclt-copy); line-height: 1.45; color: var(--tenant-slate); }
.eclt-stats[data-reveal="armed"]:not([data-inview]) .eclt-stat-fill { stroke-dashoffset: 100; }
.eclt-stats[data-inview="true"] .eclt-stat-fill { transition: stroke-dashoffset 1.5s cubic-bezier(0.33, 1, 0.68, 1) calc(0.25s + var(--i) * 0.18s); }
.eclt-band--brand .eclt-stat-value, .eclt-band--ink .eclt-stat-value { color: #fff; }
.eclt-band--brand .eclt-stat-track, .eclt-band--ink .eclt-stat-track { stroke: rgb(255 255 255 / 0.16); }
.eclt-band--brand .eclt-stat-label, .eclt-band--ink .eclt-stat-label { color: rgb(255 255 255 / 0.85); }

/* ── Where we are: the Colorado map ────────────────────────────────────────
   The counts double as the legend (pin colour per status). On scroll-in the
   state outline, mountains and interstates draw, then the pins drop in. */
.eclt-map-grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .eclt-map-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } }
.eclt-map-copy .eclt-head { margin-bottom: 1.75rem; }
.eclt-map-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.eclt-map-stat { display: grid; grid-template-columns: 1.5rem auto minmax(0, 1fr); align-items: center; gap: 0 1rem; padding: 1rem 1.25rem; background: var(--tenant-surface); border: 1px solid var(--tenant-line); border-radius: var(--tenant-radius); box-shadow: var(--eclt-shadow); }
.eclt-map-stat--occupied, .eclt-map-pin--occupied { --eclt-pin: var(--tenant-red); }
.eclt-map-stat--for_sale, .eclt-map-pin--for_sale { --eclt-pin: var(--eclt-orange); }
.eclt-map-stat--construction, .eclt-map-pin--construction { --eclt-pin: var(--eclt-teal); }
.eclt-map-stat-pin { width: 1.35rem; height: auto; overflow: visible; }
.eclt-map-stat-pin path, .eclt-map-pin path { fill: var(--eclt-pin); stroke: #fff; stroke-width: 1.5; }
.eclt-map-stat-pin circle, .eclt-map-pin circle { fill: #fff; }
.eclt-map-stat-value { min-width: 3.2ch; font-family: var(--tenant-font-heading); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--tenant-ink); font-variant-numeric: tabular-nums; }
.eclt-map-stat-label { font-size: var(--eclt-copy); line-height: 1.3; color: var(--tenant-slate); }
.eclt-map-note { margin: 1rem 0 0; font-size: 0.95rem; font-style: italic; color: var(--tenant-slate); }
.eclt-map-figure { margin: 0; padding: clamp(0.75rem, 0.25rem + 2vw, 2rem); background: var(--tenant-tint); border-radius: var(--eclt-radius-lg); }
.eclt-map { display: block; width: 100%; height: auto; overflow: visible; --eclt-map-land: color-mix(in srgb, var(--tenant-surface) 60%, var(--tenant-tint)); }
.eclt-map-state { fill: var(--eclt-map-land); stroke: var(--eclt-teal-deep); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-map-mtn path { fill: none; stroke: color-mix(in srgb, var(--eclt-teal) 50%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-map-mtn path.eclt-map-snow { fill: rgb(255 255 255 / 0.9); stroke: color-mix(in srgb, var(--eclt-teal) 65%, transparent); }
.eclt-map-road { fill: none; stroke: color-mix(in srgb, var(--tenant-slate) 42%, transparent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-map-shield rect { fill: var(--tenant-slate); }
.eclt-map-shield text { fill: #fff; font: 700 11px var(--tenant-font-body); text-anchor: middle; }
.eclt-map-pin > g { transform-box: fill-box; transform-origin: 50% 100%; }
.eclt-map-dot { fill: var(--tenant-slate); }
.eclt-map-label { font: 700 13px var(--tenant-font-body); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--eclt-teal-deep); paint-order: stroke; stroke: var(--eclt-map-land); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 640px) { .eclt-map-figure { padding: 0.5rem; } .eclt-map-label { font-size: 21px; } .eclt-map-shield { display: none; } }

.eclt-map-grid[data-reveal="armed"]:not([data-inview]) .eclt-map :is(.eclt-map-state, .eclt-map-mtn path, .eclt-map-road) { stroke-dashoffset: 1; }
.eclt-map-grid[data-reveal="armed"]:not([data-inview]) .eclt-map-pin > g { opacity: 0; transform: translateY(-26px); }
.eclt-map-grid[data-reveal="armed"]:not([data-inview]) :is(.eclt-map-label, .eclt-map-shield, .eclt-map-dot) { opacity: 0; }
.eclt-map-grid[data-reveal="armed"]:not([data-inview]) .eclt-map-stat { opacity: 0; transform: translateY(12px); }
.eclt-map-grid[data-inview="true"] .eclt-map-state { transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.eclt-map-grid[data-inview="true"] .eclt-map-mtn path { transition: stroke-dashoffset 0.7s ease-out calc(0.6s + var(--m) * 0.15s); }
.eclt-map-grid[data-inview="true"] .eclt-map-road { transition: stroke-dashoffset 1.2s ease-in-out 0.8s; }
.eclt-map-grid[data-inview="true"] .eclt-map-shield { transition: opacity 0.4s ease 1.8s; }
.eclt-map-grid[data-inview="true"] .eclt-map-pin > g { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.3s + var(--k) * 0.06s), opacity 0.2s ease calc(1.3s + var(--k) * 0.06s); }
.eclt-map-grid[data-inview="true"] :is(.eclt-map-label, .eclt-map-dot) { transition: opacity 0.5s ease 1.6s; }
.eclt-map-grid[data-inview="true"] .eclt-map-stat { transition: opacity 0.5s ease calc(0.7s + var(--i) * 0.2s), transform 0.5s ease calc(0.7s + var(--i) * 0.2s); }

/* ── Photo feature (media object): photo framed by the nested-square motif ─ */
.eclt-feature-grid { display: grid; gap: clamp(2.75rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) {
  .eclt-feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eclt-feature--flip :is(.eclt-feature-media, .eclt-art-media) { order: 2; }
}
.eclt-feature--text .eclt-feature-grid { grid-template-columns: minmax(0, 46rem); }
/* Long copy (or rows that open into it): the picture tops its column and stays
   in view while the copy scrolls. */
@media (min-width: 1000px) {
  .eclt-feature--long .eclt-feature-grid { align-items: start; }
  .eclt-feature--long :is(.eclt-feature-media, .eclt-art-media) { position: sticky; top: 7.5rem; }
}
.eclt-feature-media { position: relative; margin: 0 0 1.5rem 1.5rem; }
.eclt-feature--flip .eclt-feature-media { margin: 0 1.5rem 1.5rem 0; }
.eclt-feature-outline { position: absolute; left: -1.5rem; top: 1.5rem; width: 100%; height: auto; aspect-ratio: 5 / 4; overflow: visible; z-index: 0; }
.eclt-feature--flip .eclt-feature-outline { left: 1.5rem; }
.eclt-feature-outline rect { fill: none; stroke: var(--eclt-orange); stroke-width: 0.65; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-feature-frame { position: relative; z-index: 1; aspect-ratio: 5 / 4; border-radius: var(--eclt-radius-lg); overflow: hidden; box-shadow: var(--eclt-shadow-lift); background: var(--tenant-tint); }
.eclt-feature-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eclt-feature-title { margin: 0 0 1.1rem; }
.eclt-feature-body { color: var(--tenant-slate); }
.eclt-feature-body :is(p, ul, ol) { margin: 0 0 1rem; }
.eclt-feature-body > :last-child { margin-bottom: 0; }
.eclt-feature-media[data-reveal="armed"]:not([data-inview]) .eclt-feature-outline rect { stroke-dashoffset: 1; }
.eclt-feature-media[data-reveal="armed"]:not([data-inview]) .eclt-feature-frame { opacity: 0; transform: translateY(14px); }
.eclt-feature-media[data-inview="true"] .eclt-feature-outline rect { transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
.eclt-feature-media[data-inview="true"] .eclt-feature-frame { transition: opacity 0.6s ease, transform 0.6s ease; }

/* ── Team bios: the card opens the shared dialog (CardDetail) ──────────────── */
.eclt-list--team > button { border-radius: var(--eclt-radius-lg); }
.eclt-list--team > button:focus-visible { outline: 3px solid var(--eclt-teal); outline-offset: 6px; }
.eclt-person-photo img { transition: transform 0.4s ease; }
.eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-photo img { transform: scale(1.04); }
.eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-name { color: var(--eclt-teal); }
.eclt-person-more { margin-top: 0.65rem; }
.eclt-person-more svg { transition: transform 0.25s ease; }
.eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-more { color: var(--eclt-teal-deep); border-bottom-color: var(--eclt-orange); }
.eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-more svg { transform: rotate(90deg); }
[data-tenant="elevation-community-land-trust"] .st-detail {
  --st-detail-radius: var(--eclt-radius-lg);
  --st-detail-role-color: var(--eclt-teal);
  --st-detail-prose-color: var(--tenant-slate);
  max-width: 54rem;
  border-top: 5px solid var(--eclt-teal);
}
[data-tenant="elevation-community-land-trust"] .st-detail-media { object-position: 50% 22%; }
[data-tenant="elevation-community-land-trust"] .st-detail-title { font-family: var(--tenant-font-heading); font-size: 2rem; font-weight: 700; line-height: 1.2; }
[data-tenant="elevation-community-land-trust"] .st-detail-role { font-size: 1rem; font-weight: 700; }
[data-tenant="elevation-community-land-trust"] .st-detail-prose { font-size: var(--eclt-copy); line-height: 1.65; }
[data-tenant="elevation-community-land-trust"] .st-detail-prose :is(p, ul, ol) { margin: 0 0 0.9rem; }
[data-tenant="elevation-community-land-trust"] .st-detail-prose > :last-child { margin-bottom: 0; }

/* ── Illustrated feature: the illustration panel beside copy ────────────────── */
.eclt-art-media { position: relative; }
.eclt-art-panel { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); background: var(--eclt-illus-bg); border-radius: var(--eclt-radius-lg); border-bottom: 5px solid var(--eclt-illus-accent); box-shadow: var(--eclt-shadow); }
.eclt-art-panel .eclt-illus { width: 88%; max-width: 30rem; }
.eclt-art-logo { display: block; width: min(15rem, 70%); margin-bottom: 1.4rem; }
.eclt-art-logo img { display: block; width: 100%; height: auto; }
.eclt-art-media[data-reveal="armed"]:not([data-inview]) .eclt-art-panel { opacity: 0; transform: translateY(14px); }
.eclt-art-media[data-inview="true"] .eclt-art-panel { transition: opacity 0.6s ease, transform 0.6s ease; }

/* Lists in copy and cards read as checklists (teal check, no bullet). */
:is(.eclt-feature-body, .eclt-feature-details, .eclt-feature-list, [data-tenant="elevation-community-land-trust"] .st-card) ul,
.eclt-feature-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.55rem; }
:is(.eclt-feature-body, .eclt-feature-details, [data-tenant="elevation-community-land-trust"] .st-card) ul li,
.eclt-feature-list li { position: relative; padding-left: 1.9rem; margin: 0; }
:is(.eclt-feature-body, .eclt-feature-details, [data-tenant="elevation-community-land-trust"] .st-card) ul li::before,
.eclt-feature-list li::before { content: ""; position: absolute; left: 0.35rem; top: 0.22em; width: 0.45rem; height: 0.85rem; border: solid var(--eclt-teal); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.eclt-feature-body em { color: var(--tenant-slate); }
.eclt-feature-body a { color: var(--eclt-teal); font-weight: 600; }

/* ── Path fork: one start, a branch per path ──────────────────────────────── */
.eclt-paths { --eclt-fork: var(--eclt-teal); }
.eclt-paths-start { display: flex; justify-content: center; }
.eclt-paths-pill { margin: 0; max-width: 38rem; padding: 0.85rem 1.5rem; border-radius: 999px; background: var(--eclt-teal-deep); color: #fff; font-family: var(--tenant-font-heading); font-size: 1.15rem; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: var(--eclt-shadow-lift); }
.eclt-fork { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); height: 4.25rem; }
.eclt-fork-trunk, .eclt-fork-bar, .eclt-fork-drop { position: absolute; background: var(--eclt-fork); border-radius: 2px; }
.eclt-fork-trunk { left: calc(50% - 1.5px); top: 0; width: 3px; height: 50%; transform-origin: 50% 0; }
.eclt-fork-bar { top: calc(50% - 1.5px); height: 3px; left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); transform-origin: 50% 50%; }
.eclt-fork-drop { position: relative; grid-row: 1; grid-column: calc(var(--i) + 1); justify-self: center; align-self: end; width: 3px; height: calc(50% - 0.5rem); transform-origin: 50% 0; }
.eclt-fork-drop::after { content: ""; position: absolute; left: 50%; bottom: -0.55rem; transform: translateX(-50%); border: 0.45rem solid transparent; border-top: 0.6rem solid var(--eclt-orange); border-bottom: 0; }
.eclt-paths-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.eclt-path { display: flex; flex-direction: column; }
.eclt-path .eclt-arrow-link { margin-top: auto; padding-top: 1rem; align-self: flex-start; }
@media (max-width: 899px) {
  /* Stacked: the fork becomes one rail from the pill down the cards' left edge. */
  .eclt-fork { display: none; }
  .eclt-paths-list { grid-template-columns: 1fr; position: relative; padding-left: 1.5rem; margin-top: 1.5rem; }
  .eclt-paths-list::before { content: ""; position: absolute; left: 0.25rem; top: -1.5rem; bottom: 2rem; width: 3px; border-radius: 2px; background: var(--eclt-fork); }
}
.eclt-paths[data-reveal="armed"]:not([data-inview]) :is(.eclt-fork-trunk, .eclt-fork-drop) { transform: scaleY(0); }
.eclt-paths[data-reveal="armed"]:not([data-inview]) .eclt-fork-bar { transform: scaleX(0); }
.eclt-paths[data-reveal="armed"]:not([data-inview]) .eclt-fork-drop::after { opacity: 0; }
.eclt-paths[data-reveal="armed"]:not([data-inview]) .eclt-path { opacity: 0; transform: translateY(16px); }
.eclt-paths[data-inview="true"] .eclt-fork-trunk { transition: transform 0.35s ease-in 0.25s; }
.eclt-paths[data-inview="true"] .eclt-fork-bar { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; }
.eclt-paths[data-inview="true"] .eclt-fork-drop { transition: transform 0.35s ease-out calc(1.1s + var(--i) * 0.1s); }
.eclt-paths[data-inview="true"] .eclt-fork-drop::after { transition: opacity 0.2s ease calc(1.4s + var(--i) * 0.1s); }
.eclt-paths[data-inview="true"] .eclt-path { transition: opacity 0.55s ease calc(1.4s + var(--i) * 0.15s), transform 0.55s ease calc(1.4s + var(--i) * 0.15s), var(--eclt-step-t); }

/* ── Headline figures (shared stats): count up under a colour bar ─────────── */
.eclt-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
/* Figures are short: three stay three across on a tablet (no lone third). */
@media (min-width: 640px) { .eclt-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eclt-figures:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eclt-figures { grid-template-columns: repeat(var(--eclt-stats, 3), minmax(0, 1fr)); } }
.eclt-figure { --eclt-bar: var(--eclt-teal); display: grid; align-content: start; gap: 0.6rem; padding: 1.6rem 1.5rem 1.7rem; border-top: 5px solid var(--eclt-bar); border-radius: var(--tenant-radius); background: var(--tenant-surface); box-shadow: var(--eclt-shadow); }
.eclt-figure:nth-child(3n + 2) { --eclt-bar: var(--eclt-orange); }
.eclt-figure:nth-child(3n + 3) { --eclt-bar: var(--tenant-red); }
.eclt-figure-value { font-family: var(--tenant-font-heading); font-weight: 700; font-size: clamp(2.3rem, 1.9rem + 1.4vw, 3.1rem); line-height: 1.05; color: var(--tenant-ink); font-variant-numeric: tabular-nums; }
.eclt-figure-label { font-size: var(--eclt-copy); line-height: 1.4; color: var(--tenant-slate); }
.eclt-band--brand .eclt-figure, .eclt-band--ink .eclt-figure { background: rgb(255 255 255 / 0.07); box-shadow: none; }
/* On a teal band the teal accent bar would vanish: the first colour becomes a pale tint. */
.eclt-band--brand .eclt-figure:nth-child(3n + 1), .eclt-band--ink .eclt-figure:nth-child(3n + 1) { --eclt-bar: var(--tenant-tint); }
.eclt-band--brand .eclt-figure-value, .eclt-band--ink .eclt-figure-value { color: #fff; }
.eclt-band--brand .eclt-figure-label, .eclt-band--ink .eclt-figure-label { color: rgb(255 255 255 / 0.86); }
.eclt-figures[data-reveal="armed"]:not([data-inview]) .eclt-figure { opacity: 0; transform: translateY(14px); }
.eclt-figures[data-inview="true"] .eclt-figure { transition: opacity 0.5s ease calc(var(--i) * 0.12s), transform 0.5s ease calc(var(--i) * 0.12s); }

@media (prefers-reduced-motion: reduce) {
  .eclt-illus :is(.eclt-illus-sway, .eclt-illus-spin, .eclt-illus-lift, .eclt-illus-float) { animation: none !important; }
  .eclt-paths *, .eclt-figures *, .eclt-art-media * { transition: none !important; }
}

/* ── Photo cards (Card Image): every photo a home ───────────────────────────
   card_grid.tsx. No box: each card is a house drawn in one teal line, a roof,
   two walls and a base around the photo and the copy. The card is the
   container, so 1cqw = 1% of its width:
   - The roof (an SVG, viewBox units = cqw) rises 12 from eave to peak across
     the full width, so its pitch holds at 16:10 in a row of three and 2:1 in
     a row of two.
   - The walls and base are one border, its bottom corners rounded with the
     cards' radius. It starts where the roof ends (12cqw down) and follows any
     copy length.
   - The photo sits 5cqw inside the line, its top cut to a gable parallel to
     the roof (rise 0.24 x 45 = 10.8cqw).
   On scroll-in the line draws like one pen stroke, card by card: over the
   roof, down the right wall, round the corner and along the base, then up
   the left wall to close. The border draws through a clip-path polygon
   that grows along it (eclt-roof-walls keyframes).
   The photo settles in under the roof. A linked card lifts on hover, its
   line darkens and its photo zooms; a card without a link stays still.
   The line's weight is in roof units, so it scales with the card like the
   line illustrations (0.6; 0.42 in a row of two to keep the same weight).
   Not non-scaling-stroke: with it, Chrome lays the pathLength dash out in
   screen pixels and the roof draws as broken dashes. */
.eclt-roof-grid { display: grid; gap: 2.25rem 1.75rem; align-items: stretch; }
@media (min-width: 700px) { .eclt-roof-grid:not(.eclt-roof-grid--carousel) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eclt-roof-grid:not(.eclt-roof-grid--carousel) { grid-template-columns: repeat(var(--eclt-cols, 3), minmax(0, 1fr)); } }
.eclt-roof-grid--carousel { display: block; }
@media (min-width: 700px) and (max-width: 999px) {
  .eclt-roof-grid:not(.eclt-roof-grid--carousel) > .eclt-roof-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.875rem); }
}
.eclt-roof-card {
  --eclt-roof-sw: 0.6;
  --eclt-roof-bw: calc(var(--eclt-roof-sw) * 1cqw);
  --eclt-roof-ink: var(--eclt-teal);
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.eclt-roof-grid:has(> :nth-child(2):last-child) .eclt-roof-card { --eclt-roof-sw: 0.42; }
.eclt-roof-line { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.eclt-roof-line path { fill: none; stroke: var(--eclt-roof-ink); stroke-width: var(--eclt-roof-sw); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Centred on the card's edges, like the roof's stroke, so they meet at the eaves. */
.eclt-roof-walls {
  /* The strip the draw reveals along each side: wide enough for a corner. */
  --c: calc(var(--eclt-radius-lg) + var(--eclt-roof-bw) + 2px);
  position: absolute;
  top: 12cqw;
  left: calc(var(--eclt-roof-bw) / -2);
  right: calc(var(--eclt-roof-bw) / -2);
  bottom: calc(var(--eclt-roof-bw) / -2);
  border: var(--eclt-roof-bw) solid var(--eclt-roof-ink);
  border-top: 0;
  border-radius: 0 0 var(--eclt-radius-lg) var(--eclt-radius-lg);
  pointer-events: none;
}
.eclt-roof-photo {
  position: relative;
  margin: 5cqw 5cqw 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: var(--tenant-tint);
  clip-path: polygon(0 10.8cqw, 50% 0, 100% 10.8cqw, 100% 100%, 0 100%);
}
.eclt-roof-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.eclt-roof-grid:has(> :nth-child(2):last-child) .eclt-roof-photo { aspect-ratio: 2 / 1; }
.eclt-roof-body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 5cqw 1.8rem; }
.eclt-roof-eyebrow { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eclt-teal); }
.eclt-roof-title { margin: 0; color: var(--tenant-ink); font-size: var(--eclt-card-title); line-height: 1.25; }
.eclt-roof-text { margin-top: 0.6rem; color: var(--tenant-slate); font-size: var(--eclt-copy); }
.eclt-roof-text > :last-child { margin-bottom: 0; }
.eclt-roof-body .eclt-arrow-link { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }
/* On a dark band the line and copy turn light. */
:is(.eclt-band--brand, .eclt-band--ink) .eclt-roof-card { --eclt-roof-ink: rgb(255 255 255 / 0.7); }
:is(.eclt-band--brand, .eclt-band--ink) :is(.eclt-roof-title, .eclt-roof-eyebrow) { color: #fff; }
:is(.eclt-band--brand, .eclt-band--ink) .eclt-roof-text { color: rgb(255 255 255 / 0.85); }
/* A linked card: its arrow link covers the whole house. */
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link) { transition: translate 0.22s ease; }
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link) .eclt-arrow-link::before { content: ""; position: absolute; inset: 0; }
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link):is(:hover, :focus-within) { translate: 0 -4px; --eclt-roof-ink: var(--eclt-teal-deep); }
:is(.eclt-band--brand, .eclt-band--ink) .eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link):is(:hover, :focus-within) { --eclt-roof-ink: #fff; }
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link):is(:hover, :focus-within) .eclt-roof-photo img { transform: scale(1.04); }
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link):is(:hover, :focus-within) .eclt-arrow-link:not(.eclt-arrow-link--on-dark) { color: var(--eclt-teal-deep); border-bottom-color: var(--eclt-orange); }
.eclt-roof-card:has(> .eclt-roof-body > .eclt-arrow-link):is(:hover, :focus-within) .eclt-arrow-link svg { transform: translateX(3px); }
/* The draw, one stroke per card: --t is the card's start. */
.eclt-roof-grid[data-reveal="armed"]:not([data-inview]) .eclt-roof-line path { stroke-dashoffset: 1; }
.eclt-roof-grid[data-reveal="armed"]:not([data-inview]) .eclt-roof-walls { clip-path: inset(0 0 100% 0); }
.eclt-roof-grid[data-reveal="armed"]:not([data-inview]) .eclt-roof-photo { opacity: 0; transform: translateY(12px); }
.eclt-roof-grid[data-inview="true"] .eclt-roof-card { --t: calc(0.15s + var(--i, 0) * 0.2s); }
.eclt-roof-grid[data-inview="true"] .eclt-roof-line path { transition: stroke-dashoffset 0.75s cubic-bezier(0.45, 0, 0.8, 0.6) var(--t); }
.eclt-roof-grid[data-inview="true"] .eclt-roof-walls { animation: eclt-roof-walls 1.4s linear calc(var(--t) + 0.75s) both; }
.eclt-roof-grid[data-inview="true"] .eclt-roof-photo { transition: opacity 0.6s ease calc(var(--t) + 0.3s), transform 0.6s ease calc(var(--t) + 0.3s); }
/* One eight-point polygon throughout, so each stage interpolates: a strip
   down the right side, then a band along the bottom growing right to left,
   then a strip up the left side. Each stage's strip takes in its corner. */
@keyframes eclt-roof-walls {
  0% { clip-path: polygon(100% 0, 100% 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) 0, calc(100% - var(--c)) 0); }
  34% { clip-path: polygon(100% 0, 100% 100%, calc(100% - var(--c)) 100%, calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 0); }
  66% { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--c)), var(--c) calc(100% - var(--c)), var(--c) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 0); animation-timing-function: cubic-bezier(0.2, 0.4, 0.4, 1); }
  100% { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, var(--c) 0, var(--c) calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 0); }
}
@media (prefers-reduced-motion: reduce) {
  .eclt-roof-card, .eclt-roof-photo img { transition: none !important; }
  .eclt-roof-card:is(:hover, :focus-within) .eclt-roof-photo img { transform: none !important; }
}

/* ── Cards with a call-to-action respond; cards without one stay still ──────
   A card whose action is one arrow link (Card Icon, Path, Card Steps,
   Illustrated Cards) stretches that link over the whole card and steps off
   its square on hover or keyboard focus (below). (The roofline photo cards have no box to shadow;
   their hover is with their own rules above.) The shared photo card keeps its image zoom only
   when it is a link, and lifts the same way. A card with no CTA (text cards,
   the BirdWhistle photo cards, contact cards whose only links are an email in
   the copy) has no hover at all. The lift uses `translate`, not `transform`,
   so it never fights the scroll-in reveals, which animate `transform`. */
.eclt-card-icon:has(> .eclt-arrow-link),
.eclt-step-body:has(> .eclt-arrow-link),
.eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link) { position: relative; transition: var(--eclt-step-t); }
:is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)) .eclt-arrow-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--eclt-teal) 40%, var(--tenant-line));
}
:is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)):is(:hover, :focus-within) .eclt-arrow-link { color: var(--eclt-teal-deep); border-bottom-color: var(--eclt-orange); }
:is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)):is(:hover, :focus-within) .eclt-arrow-link--on-dark { color: #fff; }
/* On a dark band, and on the dark finish step, the lift keeps the card's own edge. */
:is(.eclt-band--brand, .eclt-band--ink) :is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)):is(:hover, :focus-within) { border-color: rgb(255 255 255 / 0.45); }
:is(.eclt-card-icon:has(> .eclt-arrow-link), .eclt-step-body:has(> .eclt-arrow-link), .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link)):is(:hover, :focus-within) .eclt-arrow-link svg { transform: translateX(3px); }
.eclt-step:last-child .eclt-step-body:has(> .eclt-arrow-link):is(:hover, :focus-within) { border-color: var(--eclt-teal-deep); }
.eclt-step:last-child .eclt-step-body:has(> .eclt-arrow-link):is(:hover, :focus-within) .eclt-arrow-link { color: #fff; }
.eclt-card-icon-mark { transition: rotate 0.3s ease; }
.eclt-card-icon:has(> .eclt-arrow-link):is(:hover, :focus-within) .eclt-card-icon-mark { rotate: -6deg; }
/* Cards on hover step off the logo's square: every linked card lifts up and
   to the right while an orange outline square slides out from behind it to
   the bottom-left, the nested squares of the logo (the team photos and photo
   frames use the same square). It is a box-shadow pair: an inner layer in the
   band's ground (--eclt-ground) over an orange layer 2px larger, so a 2px
   orange outline shows. At rest the orange layer sits a little inside the
   card, under the ground layer, so even a translucent card on a dark band
   shows nothing; it slides rather than pops. Each card's resting shadow
   rides along as --eclt-card-shadow (two layers, so the change
   interpolates). The roofline cards draw their own house and keep their own
   hover. */
:is(
  .eclt-home:has(.eclt-home-title a),
  .eclt-news:has(.eclt-news-title a),
  .eclt-plain:has(.eclt-plain-title a),
  .eclt-resource:has(.eclt-resource-title a),
  .eclt-card-icon:has(> .eclt-arrow-link),
  .eclt-step-body:has(> .eclt-arrow-link),
  .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link),
  [data-tenant="elevation-community-land-trust"] .st-card-cell > div:has(> a > .st-card)
) {
  --eclt-sq: 0rem;
  --eclt-sq-spread: -3px;
  --eclt-lift: 0px;
  box-shadow:
    calc(var(--eclt-sq) * -1) var(--eclt-sq) 0 -2px var(--eclt-ground, var(--tenant-surface)),
    calc(var(--eclt-sq) * -1) var(--eclt-sq) 0 var(--eclt-sq-spread) var(--eclt-orange),
    var(--eclt-card-shadow, var(--eclt-shadow));
  translate: var(--eclt-lift) calc(var(--eclt-lift) * -1);
}
/* Timing lives in each card's own transition list (--eclt-step-t), since
   the reveals set transitions on the same cards. The shared cell's comes here. */
[data-tenant="elevation-community-land-trust"] .st-card-cell > div { transition: var(--eclt-step-t); }
:is(
  .eclt-home:has(.eclt-home-title a),
  .eclt-news:has(.eclt-news-title a),
  .eclt-plain:has(.eclt-plain-title a),
  .eclt-resource:has(.eclt-resource-title a),
  .eclt-card-icon:has(> .eclt-arrow-link),
  .eclt-step-body:has(> .eclt-arrow-link),
  .eclt-illus-card:has(> .eclt-illus-body > .eclt-arrow-link),
  [data-tenant="elevation-community-land-trust"] .st-card-cell > div:has(> a > .st-card)
):is(:hover, :focus-within) {
  --eclt-sq: 0.75rem;
  --eclt-sq-spread: 0px;
  --eclt-lift: 4px;
  --eclt-card-shadow: var(--eclt-shadow-lift);
}
/* Cards that rest without a shadow (resource rows; icon cards on a white
   band, which are sand) keep none, as two empty layers. */
.eclt-resource, .eclt-band--surface .eclt-card-icon { --eclt-card-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
:is(.eclt-band--brand, .eclt-band--ink) .eclt-step-body { --eclt-card-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
/* A shared card with no link stays still (the shared cell lifts on hover). */
[data-tenant="elevation-community-land-trust"] .st-card-cell > div:not(:has(> a)):hover { translate: none; }
/* Photos zoom inside their frames on every linked card. */
:is(.eclt-news, .eclt-plain):has(:is(.eclt-news-title, .eclt-plain-title) a):is(:hover, :focus-within) .eclt-photo img { transform: scale(1.04); }
/* Team: the photo gains the logo's offset orange square (box-shadow, so the
   photo's rounded clip doesn't cut it), and the name turns teal. */
.eclt-person-photo { transition: box-shadow 0.3s ease, translate 0.3s ease; }
.eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-photo { translate: 0 -3px; box-shadow: -0.7rem 0.7rem 0 -2px var(--eclt-ground, var(--tenant-surface)), -0.7rem 0.7rem 0 0 var(--eclt-orange); }
@media (prefers-reduced-motion: reduce) {
  :is(.eclt-home, .eclt-news, .eclt-plain, .eclt-resource, .eclt-card-icon, .eclt-step-body, .eclt-illus-card, .st-card-cell > div) { transition: none !important; translate: none !important; }
  .eclt-list--team > button:is(:hover, :focus-visible) .eclt-person-photo { translate: none; }
}
/* Shared photo cards, two to a row: each is twice as wide as in a row of
   three, so the shared 16:10 crop turns tall; a 2:1 crop keeps the row in
   proportion. */
[data-tenant="elevation-community-land-trust"] :has(> .st-card-cell:nth-child(2):last-child) .st-card > div:first-child:has(> img) { aspect-ratio: 2 / 1; }
/* Shared photo card: a link card lifts with its zoom; a plain card doesn't zoom. */
[data-tenant="elevation-community-land-trust"] a > .st-card { transition: border-color 0.22s ease; }
[data-tenant="elevation-community-land-trust"] a:is(:hover, :focus-visible) > .st-card { border-color: color-mix(in srgb, var(--eclt-teal) 40%, var(--tenant-line)); }
[data-tenant="elevation-community-land-trust"] :not(a) > .st-card img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.eclt-card-icon, .eclt-step-body, .eclt-illus-card, .eclt-roof-card, .st-card):is(:hover, :focus-within) { translate: none !important; }
}

/* A section reached by an in-page link (SmoothAnchor) takes focus so keyboard
   and screen-reader users land on it; it isn't a control, so no focus ring. */
/* No platform page-load fade (globals.css st-band-in: every top-level band
   fades up from transparent on load). Here it read as a white flash on every
   page, because the page paints finished now that its stylesheets block the
   first paint (#665). ECLT's own motion is the scroll-in Reveal, which leaves
   anything already on screen as painted. */
[data-tenant="elevation-community-land-trust"] :is(main > section, main > div > section) { animation: none; }
[data-tenant="elevation-community-land-trust"] [id][tabindex="-1"]:focus { outline: none; }
/* Breadcrumbs follow the menu here (theme.breadcrumbsFromMenu), so a home's
   trail runs four deep; on a phone it wraps instead of running off the edge. */
[data-tenant="elevation-community-land-trust"] nav[aria-label="Breadcrumb"] { flex-wrap: wrap; row-gap: 0.2rem; }

/* ── FAQs (faq.tsx): numbered rows on a fine rule, no boxes ───────────────────
   The accordion block, the FAQs collection's lists (accordion_media) and the
   Illustrated Feature's detail rows (unnumbered) share these rows.
   - Hover, keyboard focus or open: a teal line draws along the row from its
     number and the outlined toggle fills teal.
   - Open: the plus turns to a minus, the number turns orange and the answer
     slides down (::details-content where supported) with a teal line drawn
     down beside it from the number.
   A line-drawn house holding a question mark heads the section and draws in
   on scroll-in. */
.eclt-faq-head { display: flex; flex-direction: column; gap: 1rem; }
.eclt-faq-head--center { align-items: center; }
.eclt-faq-mark { width: 3.6rem; height: auto; overflow: visible; }
.eclt-faq-mark :is(path) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eclt-faq-mark-house { stroke: var(--eclt-teal); stroke-width: 3; }
.eclt-faq-mark-q { stroke: var(--eclt-orange); stroke-width: 3.4; }
.eclt-faq-mark-dot { fill: var(--eclt-orange); }
.eclt-faq-band--dark .eclt-faq-mark-house { stroke: #fff; }
.eclt-faq-head[data-reveal="armed"]:not([data-inview]) .eclt-faq-mark path { stroke-dashoffset: 1; }
.eclt-faq-head[data-reveal="armed"]:not([data-inview]) .eclt-faq-mark-dot { opacity: 0; scale: 0; }
.eclt-faq-head[data-inview="true"] .eclt-faq-mark-house { transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.eclt-faq-head[data-inview="true"] .eclt-faq-mark-q { transition: stroke-dashoffset 0.6s ease 1s; }
.eclt-faq-head[data-inview="true"] .eclt-faq-mark-dot { transform-box: fill-box; transform-origin: center; transition: opacity 0.2s ease 1.55s, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s; }
@media (prefers-reduced-motion: no-preference) {
  .eclt-faq-head[data-inview="true"] .eclt-faq-mark-q { animation: eclt-faq-wonder 6s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes eclt-faq-wonder { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -9deg; } 94% { rotate: 7deg; } }

.eclt-faq-list {
  --eclt-faq-rule: color-mix(in srgb, var(--eclt-teal) 22%, var(--tenant-line));
  --eclt-faq-num: 3.25rem;
  interpolate-size: allow-keywords;
  max-width: 54rem;
  margin-inline: auto;
  border-top: 1px solid var(--eclt-faq-rule);
}
.eclt-faq-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) {
  .eclt-faq-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; }
  .eclt-faq-split-head { position: sticky; top: 7rem; }
}
:is(.eclt-faq-split, .eclt-faq-grid) .eclt-faq-list { max-width: none; margin: 0; }
.eclt-faq { position: relative; border-bottom: 1px solid var(--eclt-faq-rule); }
/* The drawn rule: a teal line along the row's bottom edge. */
.eclt-faq::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--eclt-teal); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
.eclt-faq:is(:hover, [open], :has(> summary:focus-visible))::after { transform: scaleX(1); }
.eclt-faq > summary {
  display: grid;
  grid-template-columns: var(--eclt-faq-num) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
}
.eclt-faq > summary::-webkit-details-marker { display: none; }
.eclt-faq > summary:focus-visible { outline: 3px solid var(--eclt-orange); outline-offset: 4px; border-radius: 6px; }
.eclt-faq-num { font-family: var(--tenant-font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; color: var(--eclt-teal); font-variant-numeric: tabular-nums; transition: color 0.25s ease, translate 0.25s ease; }
.eclt-faq-q { margin: 0; color: var(--tenant-ink); transition: color 0.2s ease; }
.eclt-faq-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--eclt-teal) 50%, transparent); color: var(--eclt-teal); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, rotate 0.35s ease; }
.eclt-faq-toggle-v { transform-box: fill-box; transform-origin: center; transition: scale 0.3s ease; }
.eclt-faq:is(:hover, :has(> summary:focus-visible)) .eclt-faq-q { color: var(--eclt-teal-deep); }
.eclt-faq:is(:hover, :has(> summary:focus-visible)) .eclt-faq-num { translate: 3px 0; }
.eclt-faq:is(:hover, [open], :has(> summary:focus-visible)) .eclt-faq-toggle { background: var(--eclt-teal); border-color: var(--eclt-teal); color: #fff; }
.eclt-faq[open] .eclt-faq-toggle { rotate: 180deg; }
.eclt-faq[open] .eclt-faq-toggle-v { scale: 1 0; }
.eclt-faq[open] .eclt-faq-num { color: var(--eclt-orange); }
/* The answer sits under the question, past the number column; a teal line
   runs down from the number beside it. */
.eclt-faq-a { position: relative; padding: 0 3.5rem 1.75rem calc(var(--eclt-faq-num) + 1rem); color: var(--tenant-slate); }
.eclt-faq-a.prose-tenant { max-width: calc(44rem + var(--eclt-faq-num) + 4.5rem); }
.eclt-faq-a > :first-child { margin-top: 0; }
.eclt-faq-a > :last-child { margin-bottom: 0; }
.eclt-faq-a::before { content: ""; position: absolute; left: 0.85rem; top: 0; bottom: 1.75rem; width: 2px; border-radius: 2px; background: var(--eclt-teal); transform: scaleY(0); transform-origin: top; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.1s; }
.eclt-faq[open] .eclt-faq-a::before { transform: scaleY(1); }
.eclt-faq::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.4s cubic-bezier(0.65, 0, 0.35, 1), content-visibility 0.4s allow-discrete; }
.eclt-faq[open]::details-content { block-size: auto; }
/* Unnumbered (the Illustrated Feature's detail rows): question and toggle
   only; the answer's line runs at the row's left edge. */
.eclt-faq-list--plain { --eclt-faq-num: 0rem; }
.eclt-faq-list--plain .eclt-faq > summary { grid-template-columns: minmax(0, 1fr) auto; padding-block: 1.1rem; }
.eclt-faq-list--plain .eclt-faq-a { padding: 0 1rem 1.4rem 1.25rem; }
.eclt-faq-list--plain .eclt-faq-a::before { left: 0; bottom: 1.4rem; }
.eclt-feature-details { margin: 1.75rem 0 0; max-width: none; }
.eclt-feature-details .eclt-faq-q { font-size: 1.15rem; }
.eclt-feature-details .prose-tenant :is(ul, p) { font-size: 1.05rem; }
/* On a dark band. */
.eclt-faq-band--dark .eclt-faq-list { --eclt-faq-rule: rgb(255 255 255 / 0.22); }
.eclt-faq-band--dark :is(.eclt-faq-q, .eclt-faq-num) { color: #fff; }
.eclt-faq-band--dark .eclt-faq-a { color: rgb(255 255 255 / 0.85); }
.eclt-faq-band--dark .eclt-faq-toggle { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.eclt-faq-band--dark .eclt-faq::after, .eclt-faq-band--dark .eclt-faq-a::before { background: #fff; }
.eclt-faq-band--dark .eclt-faq:is(:hover, [open], :has(> summary:focus-visible)) .eclt-faq-toggle { background: #fff; border-color: #fff; color: var(--eclt-teal-deep); }
@media (max-width: 640px) {
  .eclt-faq-list { --eclt-faq-num: 2.1rem; }
  .eclt-faq > summary { column-gap: 0.75rem; padding-block: 1.15rem; }
  .eclt-faq-num { font-size: 1rem; }
  .eclt-faq-toggle { width: 2.25rem; height: 2.25rem; }
  .eclt-faq-a { padding-right: 0; padding-left: calc(var(--eclt-faq-num) + 0.75rem); }
  .eclt-faq-a::before { left: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .eclt-faq::after, .eclt-faq-a::before, .eclt-faq-num, .eclt-faq-toggle, .eclt-faq-toggle-v { transition: none !important; }
  .eclt-faq::details-content { transition: none !important; }
}
/* A photo beside the FAQs collection's rows, when the block has one. */
.eclt-faq-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .eclt-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } }
.eclt-faq-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--eclt-radius-lg); box-shadow: var(--eclt-shadow); }

/* ── Forms: the shared widget in a white panel on the sand band ────────────── */
.eclt-form-panel { max-width: 46rem; margin-inline: auto; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--tenant-surface); border: 1px solid var(--tenant-line); border-radius: var(--eclt-radius-lg); box-shadow: var(--eclt-shadow); }
.eclt-form-empty { margin: 0; text-align: center; color: var(--tenant-slate); }

@media (prefers-reduced-motion: reduce) {
  .eclt-illus-rays { animation: none !important; }
  .eclt-illus-cards *, .eclt-stats *, .eclt-map-grid *, .eclt-feature-media * { transition: none !important; }
}

/* ── Listing filters (shared CollectionFilter, restyled) ────────────────────
   The search, dropdowns and result count sit in a sand panel above the
   grid; chosen values show as teal chips. Scoped by data-tenant so these
   beat the shared component's utility classes. */
[data-tenant="elevation-community-land-trust"] .st-filter {
  margin-bottom: 2.25rem;
  padding: 1.1rem;
  background: var(--tenant-mist);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
}
@media (max-width: 1099px) {
  [data-tenant="elevation-community-land-trust"] .st-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-tenant="elevation-community-land-trust"] .st-filter-search { grid-column: 1 / -1; }
  [data-tenant="elevation-community-land-trust"] .st-filter-count { grid-column: 1 / -1; }
  [data-tenant="elevation-community-land-trust"] .st-filter-count-text { text-align: left; }
}
[data-tenant="elevation-community-land-trust"] :is(.st-filter-input, .st-filter-trigger) {
  height: 3.1rem;
  border-radius: 10px;
  border-color: var(--tenant-line);
  background: var(--tenant-surface);
  font-size: 1.02rem;
  color: var(--tenant-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
@media (max-width: 639px) {
  [data-tenant="elevation-community-land-trust"] .st-filter { padding: 0.85rem; }
  [data-tenant="elevation-community-land-trust"] .st-filter-bar { gap: 0.55rem; }
  [data-tenant="elevation-community-land-trust"] .st-filter-trigger { padding-inline: 0.85rem; font-size: 0.97rem; }
  [data-tenant="elevation-community-land-trust"] .st-filter-panel { min-width: min(16rem, calc(100vw - 2.5rem)); }
  [data-tenant="elevation-community-land-trust"] .st-filter-facet:nth-of-type(even) .st-filter-panel { left: auto; right: 0; }
}
[data-tenant="elevation-community-land-trust"] .st-filter-input::placeholder { color: var(--tenant-slate); opacity: 0.8; }
[data-tenant="elevation-community-land-trust"] :is(.st-filter-input, .st-filter-trigger):hover { border-color: color-mix(in srgb, var(--eclt-teal) 45%, var(--tenant-line)); }
[data-tenant="elevation-community-land-trust"] :is(.st-filter-input, .st-filter-trigger):focus-visible,
[data-tenant="elevation-community-land-trust"] .st-filter-input:focus { border-color: var(--eclt-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eclt-teal) 22%, transparent); outline: none; }
[data-tenant="elevation-community-land-trust"] .st-filter-trigger[aria-expanded="true"],
[data-tenant="elevation-community-land-trust"] .st-filter-trigger[data-active] { border-color: var(--eclt-teal); background: color-mix(in srgb, var(--tenant-tint) 55%, #fff); }
[data-tenant="elevation-community-land-trust"] .st-filter-trigger-label { font-weight: 600; }
[data-tenant="elevation-community-land-trust"] .st-filter-search-icon { color: var(--eclt-teal); }
[data-tenant="elevation-community-land-trust"] .st-filter-chevron { color: var(--eclt-teal); }
[data-tenant="elevation-community-land-trust"] .st-filter-badge { background: var(--eclt-orange); color: var(--tenant-ink); }
[data-tenant="elevation-community-land-trust"] .st-filter-panel {
  border-radius: 12px;
  border-color: var(--tenant-line);
  box-shadow: var(--eclt-shadow-lift);
  animation: eclt-filter-panel 0.16s ease-out;
}
@keyframes eclt-filter-panel { from { opacity: 0; translate: 0 -4px; } }
[data-tenant="elevation-community-land-trust"] .st-filter-option { font-size: 1rem; border-radius: 8px; }
[data-tenant="elevation-community-land-trust"] .st-filter-option:hover { background: var(--tenant-tint); }
[data-tenant="elevation-community-land-trust"] .st-filter-checkbox { accent-color: var(--eclt-teal); width: 1.05rem; height: 1.05rem; }
[data-tenant="elevation-community-land-trust"] .st-filter-option-count { color: var(--tenant-slate); font-weight: 600; }
[data-tenant="elevation-community-land-trust"] .st-filter-panel-foot button { color: var(--eclt-teal-deep); }
[data-tenant="elevation-community-land-trust"] .st-filter-count { font-weight: 600; color: var(--tenant-ink); font-size: 0.98rem; }
[data-tenant="elevation-community-land-trust"] .st-filter-summary { margin-top: 0.9rem; }
[data-tenant="elevation-community-land-trust"] .st-filter-chip {
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--eclt-teal-deep);
  background: var(--tenant-surface);
  border-color: color-mix(in srgb, var(--eclt-teal) 35%, var(--tenant-line));
}
[data-tenant="elevation-community-land-trust"] .st-filter-chip:hover { border-color: var(--eclt-orange); }
[data-tenant="elevation-community-land-trust"] .st-filter-chip-facet { color: var(--tenant-slate); font-weight: 500; }
[data-tenant="elevation-community-land-trust"] .st-filter-clear { font-size: 0.9rem; color: var(--eclt-teal-deep); text-decoration: underline; text-decoration-color: var(--eclt-orange); text-underline-offset: 3px; }

/* Pagination + no results */
[data-tenant="elevation-community-land-trust"] .st-filter-pagination { margin-top: 3rem; gap: 0.5rem; }
[data-tenant="elevation-community-land-trust"] .st-filter-page {
  height: 2.9rem;
  min-width: 2.9rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tenant-ink);
  border-color: var(--tenant-line);
  background: var(--tenant-surface);
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
[data-tenant="elevation-community-land-trust"] .st-filter-page:not(:disabled):hover { border-color: var(--eclt-teal); color: var(--eclt-teal-deep); }
[data-tenant="elevation-community-land-trust"] .st-filter-page--current {
  background: var(--eclt-teal);
  border-color: var(--eclt-teal);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--eclt-orange);
}
[data-tenant="elevation-community-land-trust"] .st-filter-page--current:hover { color: #fff !important; }
[data-tenant="elevation-community-land-trust"] .st-filter-page:disabled { opacity: 0.4; }
[data-tenant="elevation-community-land-trust"] .st-filter-empty {
  padding: 3rem 1.5rem;
  font-size: var(--eclt-copy);
  color: var(--tenant-slate);
  background: var(--tenant-mist);
  border: 1px dashed var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
}
[data-tenant="elevation-community-land-trust"] .st-filter-empty button { color: var(--eclt-teal-deep); }

/* ── News: the lead story, and the article page (eclt_article) ─────────────── */
@media (min-width: 900px) {
  .eclt-list--lead .eclt-news--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .eclt-news--lead .eclt-news-media { height: 100%; }
  .eclt-news--lead .eclt-photo { aspect-ratio: auto; height: 100%; min-height: 22rem; }
  .eclt-news--lead .eclt-news-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 1rem + 2vw, 3rem); }
  .eclt-news--lead .eclt-news-title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.2; }
  .eclt-news--lead .eclt-news-excerpt { -webkit-line-clamp: 5; font-size: var(--eclt-copy); }
}
.eclt-news-lead-label { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eclt-orange); }

.eclt-article-band { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; }
.eclt-article { max-width: 46rem; margin-inline: auto; }
.eclt-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin: 0 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--tenant-line); color: var(--tenant-slate); font-weight: 600; }
.eclt-article-kind { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--tenant-tint); color: var(--eclt-teal-deep); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.eclt-article-meta time + .eclt-article-source-name::before { content: "·"; margin-right: 0.85rem; color: var(--eclt-orange); }
.eclt-article-body { max-width: none; font-size: 1.2rem; line-height: 1.7; color: var(--tenant-ink); }
.eclt-article-body > p:first-child { font-size: 1.32rem; line-height: 1.6; }
.eclt-article-body a { color: var(--eclt-teal-deep); text-decoration-color: var(--eclt-orange); text-underline-offset: 3px; }
.eclt-article-body a:hover { color: var(--eclt-teal); }
.eclt-article-body img { border-radius: var(--eclt-radius-lg); }
.eclt-article-body h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.05rem); line-height: 1.2; }
.eclt-article-body h3 { margin: 2rem 0 0.75rem; font-size: 1.35rem; line-height: 1.3; }
.eclt-article-body :is(h2, h3):first-child { margin-top: 0; }
.eclt-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tenant-line); }
.eclt-article-credit { margin: 0; color: var(--tenant-slate); }
.eclt-article-credit :is(a, strong) { color: var(--tenant-ink); font-weight: 700; }
.eclt-article-back { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--eclt-teal-deep); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.18s ease; }
.eclt-article-back:hover { border-bottom-color: var(--eclt-orange); }
.eclt-article-back svg { transition: transform 0.18s ease; }
.eclt-article-back:hover svg { transform: translateX(-3px); }

/* ── Home detail page (eclt_home_details) ─────────────────────────────────────
   Photos and description on the left; the listing card (status, price,
   address, specs, buttons), Property Information and Location on the right.
   On a phone the two columns dissolve (display: contents) and the cards
   interleave: listing, photos, facts, description, map. */
.eclt-homed-band { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important; }
.eclt-homed-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  font-weight: 600;
  color: var(--eclt-teal-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}
.eclt-homed-back:hover { border-bottom-color: var(--eclt-orange); }
.eclt-homed-back svg { transition: transform 0.18s ease; }
.eclt-homed-back:hover svg { transform: translateX(-3px); }

.eclt-homed-head {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
  box-shadow: var(--eclt-shadow);
}

.eclt-homed-headline { display: grid; gap: 0.2rem; justify-items: start; }
.eclt-homed-status {
  margin: 0 0 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--tenant-tint);
  color: var(--eclt-teal-deep);
}
.eclt-homed-status--under-contract { background: var(--eclt-night); color: #fff; }
.eclt-homed-status--coming-soon { background: var(--eclt-orange); color: var(--tenant-ink); }
.eclt-homed-price { margin: 0; font-family: var(--tenant-font-heading); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--tenant-ink); }
.eclt-homed-from { display: block; font-family: var(--tenant-font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenant-slate); }
.eclt-homed-address { margin: 0; font-size: 1.05rem; color: var(--tenant-slate); }
.eclt-homed-specs { list-style: none; margin: 0; padding: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.55rem; border-top: 1px solid var(--tenant-line); }
.eclt-homed-specs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--tenant-mist);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tenant-ink);
}
.eclt-homed-specs svg { width: 1.3rem; height: 1.3rem; color: var(--eclt-teal); flex: none; }
@media (max-width: 639px) {
  .eclt-homed-specs li { gap: 0.4rem; padding: 0.42rem 0.75rem; font-size: 0.95rem; }
  .eclt-homed-specs svg { width: 1.1rem; height: 1.1rem; }
}
.eclt-homed-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.eclt-homed-actions > * { flex: 1 1 9rem; justify-content: center; }

.eclt-homed-grid { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 1000px) {
  .eclt-homed-grid { grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr); gap: 2.5rem; }
  .eclt-homed-main { display: grid; gap: 2.75rem; min-width: 0; }
  .eclt-homed-aside { display: grid; gap: 1.5rem; }
}
@media (max-width: 999px) {
  .eclt-homed-main, .eclt-homed-aside { display: contents; }
  .eclt-gal { order: 1; }
  .eclt-homed-head { order: 2; }
  .eclt-homed-card:not(.eclt-homed-loc) { order: 3; }
  .eclt-homed-about { order: 4; }
  .eclt-homed-loc { order: 5; }
}
.eclt-homed-card {
  padding: 1.5rem;
  background: var(--tenant-surface);
  border: 1px solid var(--tenant-line);
  border-radius: var(--eclt-radius-lg);
  box-shadow: var(--eclt-shadow);
}
.eclt-homed-h { margin: 0 0 0.9rem; }
.eclt-homed-about .eclt-homed-h { margin-bottom: 1.1rem; }
.eclt-homed-body { max-width: none; font-size: var(--eclt-copy); }
.eclt-homed-facts { margin: 0; }
.eclt-homed-fact { display: flex; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px dashed var(--tenant-line); }
.eclt-homed-fact:last-child { border-bottom: 0; }
.eclt-homed-fact dt { color: var(--tenant-slate); }
.eclt-homed-fact dd { margin: 0; font-weight: 700; color: var(--tenant-ink); text-align: right; }
.eclt-homed-sub { margin: 1.25rem 0 0.7rem; font-family: var(--tenant-font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eclt-teal-deep); }
.eclt-homed-amenities { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.eclt-homed-amenities li { display: flex; align-items: center; gap: 0.6rem; color: var(--tenant-ink); }
.eclt-homed-amenities svg { flex: none; width: 1.5rem; height: 1.5rem; padding: 0.28rem; border-radius: 50%; background: var(--tenant-tint); color: var(--eclt-teal); }
.eclt-homed-community { display: grid; gap: 0.4rem; justify-items: start; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--tenant-line); color: var(--tenant-slate); }
.eclt-homed-community strong { color: var(--tenant-ink); }

/* Location: the Colorado outline draws, then the pin drops on the home. */
.eclt-homed-loc { display: grid; gap: 0.6rem; justify-items: start; }
.eclt-homed-map { width: 100%; height: auto; margin: 0.1rem 0 0.4rem; overflow: visible; }
.eclt-homed-map-state { fill: color-mix(in srgb, var(--tenant-tint) 55%, #fff); stroke: var(--eclt-teal); stroke-width: 4; }
.eclt-homed-map-mtn { fill: none; stroke: color-mix(in srgb, var(--eclt-teal) 45%, var(--tenant-line)); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.eclt-homed-map-road { fill: none; stroke: color-mix(in srgb, var(--eclt-orange) 70%, #fff); stroke-width: 4; stroke-linecap: round; }
.eclt-homed-map-halo { fill: color-mix(in srgb, var(--tenant-red) 16%, transparent); transform-box: fill-box; transform-origin: center; animation: eclt-homed-halo 2.6s ease-out infinite; }
.eclt-homed-map-pin path { fill: var(--tenant-red); stroke: #fff; stroke-width: 1.4; }
.eclt-homed-map-pin circle { fill: #fff; }
.eclt-homed-map-label { font-family: var(--tenant-font-body); font-size: 30px; font-weight: 700; fill: var(--tenant-ink); paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.eclt-homed-loc-address { margin: 0; font-weight: 600; color: var(--tenant-ink); }
@keyframes eclt-homed-halo { 0% { transform: scale(0.55); opacity: 0.9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.eclt-homed-loc[data-reveal="armed"]:not([data-inview]) :is(.eclt-homed-map-state, .eclt-homed-map-mtn, .eclt-homed-map-road) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.eclt-homed-loc[data-reveal="armed"]:not([data-inview]) .eclt-homed-map-pin { opacity: 0; transform: translateY(-34px); }
.eclt-homed-loc[data-reveal="armed"]:not([data-inview]) :is(.eclt-homed-map-label, .eclt-homed-map-halo) { opacity: 0; }
.eclt-homed-loc[data-inview="true"] :is(.eclt-homed-map-state, .eclt-homed-map-mtn, .eclt-homed-map-road) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.eclt-homed-loc[data-inview="true"] .eclt-homed-map-mtn { transition-delay: 0.35s; }
.eclt-homed-loc[data-inview="true"] .eclt-homed-map-road { transition-delay: 0.55s; }
.eclt-homed-loc[data-inview="true"] .eclt-homed-map-pin { transition: opacity 0.2s ease 1.1s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s; }
.eclt-homed-loc[data-inview="true"] .eclt-homed-map-label { transition: opacity 0.4s ease 1.5s; }
.eclt-homed-loc[data-inview="true"] .eclt-homed-map-halo { animation-delay: 1.6s; }

/* Gallery: one large photo, previous / next, a thumbnail strip. */
.eclt-gal { min-width: 0; }
.eclt-gal-stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--eclt-radius-lg); background: var(--tenant-mist); box-shadow: var(--eclt-shadow); touch-action: pan-y; }
.eclt-gal-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.eclt-gal-open:focus-visible { outline: 3px solid var(--eclt-orange); outline-offset: -3px; }
.eclt-gal-img { width: 100%; height: 100%; object-fit: cover; animation: eclt-gal-in 0.3s ease; }
@keyframes eclt-gal-in { from { opacity: 0.35; } }
.eclt-gal-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--tenant-ink);
  box-shadow: 0 2px 10px rgb(16 41 42 / 0.25);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.eclt-gal-nav:hover { background: var(--eclt-teal); color: #fff; }
.eclt-gal-nav:focus-visible { outline: 3px solid var(--eclt-orange); outline-offset: 2px; }
.eclt-gal-nav--prev { left: 0.9rem; }
.eclt-gal-nav--next { right: 0.9rem; }
.eclt-gal-count { position: absolute; right: 0.9rem; bottom: 0.9rem; margin: 0; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgb(16 41 42 / 0.72); color: #fff; font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.eclt-gal-thumbs { list-style: none; margin: 0.8rem 0 0; padding: 0 0 0.35rem; display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.eclt-gal-thumbs li { flex: 0 0 clamp(5.25rem, 4.5rem + 2vw, 7rem); scroll-snap-align: start; }
.eclt-gal-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; opacity: 0.68; outline: 3px solid transparent; outline-offset: -3px; transition: opacity 0.18s ease, outline-color 0.18s ease; }
.eclt-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eclt-gal-thumb:hover, .eclt-gal-thumb:focus-visible { opacity: 1; }
.eclt-gal-thumb[aria-current="true"] { opacity: 1; outline-color: var(--eclt-orange); }

/* Full-screen viewer */
.eclt-gal-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(10 24 25 / 0.95); color: #fff; }
.eclt-gal-lightbox::backdrop { background: rgb(0 0 0 / 0.55); }
.eclt-gal-lightbox[open] { animation: eclt-gal-fade 0.2s ease; }
@keyframes eclt-gal-fade { from { opacity: 0; } }
.eclt-gal-lightbox-frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 4rem 1rem; touch-action: pan-y; }
.eclt-gal-lightbox-img { max-width: min(94vw, 1500px); max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: 6px; animation: eclt-gal-in 0.25s ease; }
.eclt-gal-lightbox .eclt-gal-nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.eclt-gal-lightbox .eclt-gal-nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.eclt-gal-lightbox .eclt-gal-count { right: auto; left: 50%; bottom: 1.25rem; translate: -50% 0; }
.eclt-gal-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; transition: background-color 0.18s ease; }
.eclt-gal-close:hover { background: rgb(255 255 255 / 0.25); }
.eclt-gal-close:focus-visible { outline: 3px solid var(--eclt-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .eclt-gal-img, .eclt-gal-lightbox-img, .eclt-gal-lightbox[open], [data-tenant="elevation-community-land-trust"] .st-filter-panel { animation: none; }
  .eclt-homed-map-halo { animation: none; opacity: 0; }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
[data-tenant="elevation-community-land-trust"] .st-footer { background: var(--eclt-night) !important; }
[data-tenant="elevation-community-land-trust"] .st-footer > span:first-child { background: linear-gradient(90deg, var(--eclt-teal) 0 70%, var(--eclt-orange) 70% 85%, var(--tenant-red) 85%) !important; height: 5px; }
[data-tenant="elevation-community-land-trust"] .st-footer-heading { color: #fff; letter-spacing: 0.14em; }
[data-tenant="elevation-community-land-trust"] .st-footer-link { color: rgb(255 255 255 / 0.78) !important; font-size: 1.06rem; }
/* Footer type a size up from the shared chrome's small print: tagline and
   contact (text-sm), column headings (0.7rem), the copyright / legal row
   (text-xs) and the social icons. */
[data-tenant="elevation-community-land-trust"] .st-footer .text-sm { font-size: 1.06rem; line-height: 1.6; }
[data-tenant="elevation-community-land-trust"] .st-footer .st-footer-heading { font-size: 0.84rem; }
[data-tenant="elevation-community-land-trust"] .st-footer .text-xs { font-size: 0.94rem; }
[data-tenant="elevation-community-land-trust"] .st-footer address p + p { margin-top: 0.15rem; }
[data-tenant="elevation-community-land-trust"] .st-footer a[aria-label][target="_blank"]:has(> svg) { width: 2.5rem; height: 2.5rem; }
[data-tenant="elevation-community-land-trust"] .st-footer a[aria-label][target="_blank"]:has(> svg) svg { width: 1.15rem; height: 1.15rem; }
[data-tenant="elevation-community-land-trust"] .st-footer-link:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .eclt-mark path { animation: none !important; stroke-dashoffset: 0; }
  .eclt-steps * { transition: none !important; }
  .eclt-peaks, .eclt-peaks * { transition: none !important; }
  .eclt-cta .eclt-peaks :is(path, circle) { stroke-dashoffset: 0 !important; }
  .eclt-cta .eclt-peaks-sun { transform: none !important; }
  .eclt-peaks-rays-spin { animation: none !important; }
  .eclt-cta .eclt-peaks-rays path { stroke-dashoffset: 0 !important; }
  .eclt-step-key path, .eclt-key-body { animation: none !important; stroke-dashoffset: 0 !important; }
  .eclt-key-sparks path { opacity: 0.35; }
  .eclt-home, .eclt-news, .eclt-plain, .eclt-resource, .eclt-photo img, .eclt-arrow-link svg { transition: none !important; }
  :is(.eclt-home, .eclt-news, .eclt-plain, .eclt-resource):is(:hover, :focus-within) { transform: none !important; }
}