/* ==========================================================================
   CPG PROPERTIES — EDITORIAL / ARCHITECTURAL FINISH
   --------------------------------------------------------------------------
   This last-loaded, Properties-only layer replaces the previous soft UI
   treatment with a flatter and more deliberate real-estate language.

   Reference principles:
   - NEXT Property: information-dense project stories, strong black/white
     sections, direct navigation and useful conversion points.
   - Forteris Figma: asymmetric editorial grids and photography-led rhythm.
   - CPG: official imagery, verified inventory and a neutral graphite accent.

   Deliberately absent: floating pills, glass panels, blur, decorative shadow,
   inflated card radii and hover-lift effects.
   ========================================================================== */

.cpg-body--properties {
  --cpge-black: #0b0b0b;
  --cpge-white: #ffffff;
  --cpge-paper: #f4f3ef;
  --cpge-line: #d7d5cf;
  --cpge-line-dark: rgba(255, 255, 255, 0.22);
  --cpge-muted: #65635e;
  --cpge-accent: #303735;
  --cpg-copper: #303735;
  --cpg-copper-ink: #303735;
  --cpg-copper-lit: #d3d9d6;
  --cpg-copper-tint: #eef0ef;
  --cpg-focus-ring: #566660;
  --cpg-status-reserved: #5f5745;
  --cpge-section: clamp(4.5rem, 7vw, 8rem);
  --cpge-gutter: clamp(1rem, 3.2vw, 3rem);
  --cpg-container: 86rem;
  --cpg-gutter: var(--cpge-gutter);
  background: var(--cpge-white);
}

.cpg-body--properties :is(.cpgh, .cpgp) {
  --cpgh-radius-hero: 0px;
  --cpgh-radius-panel: 0px;
  --cpgh-radius-card: 0px;
  --cpgh-radius-media: 0px;
  --cpgh-section-y: var(--cpge-section);
  --cpgh-display-weight: 400;
  --cpgh-display-tracking: -0.035em;
}

/* Shadows and translucent glass are removed at the platform boundary. */
.cpg-body--properties main *,
.cpg-body--properties .cpg-header *,
.cpg-body--properties .cpg-footer * {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cpg-body--properties :is(
  .cpgh-media,
  .cpgh-feature,
  .cpgh-proof__card,
  .cpgh-completed__link,
  .cpgh-step__media,
  .cpgh-unit,
  .cpgh-cta,
  .cpgp-hero,
  .cpgp-facts,
  .cpgp-glance,
  .cpgp-highlight,
  .cpgp-result,
  .cpgp-card,
  .cpgp-place,
  .cpgp-pin,
  .cpgp-table-wrap,
  .cpgp-process__step,
  .cpgp-enquire,
  .cpgp-footprint,
  .cpgp-filters-rail,
  .cpgp-controls,
  .cpgp-form,
  .cpgp-register__aside,
  .cpgp-register__context,
  .cpgp-form__more,
  .cpgp-confirm,
  .cpgp-confirm__context,
  .cpgp-route,
  .cpgp-figure-cell,
  .cpgp-sibling,
  .cpgp-notice-pair__panel,
  .cpgp-pending,
  .cpg-empty,
  .cpg-alert,
  .cpg-map,
  .cpg-saved-search,
  .cpg-unit-card
) {
  border-radius: 0 !important;
}

.cpg-body--properties :is(
  .cpg-btn,
  .cpgh-pill,
  .cpg-crosslink,
  .cpg-chip,
  .cpg-input,
  .cpg-select,
  .cpg-textarea,
  .cpgh-discover__input,
  .cpgp-card__cue,
  .cpgp-result__cue,
  .cpg-pagination .page-link
) {
  border-radius: 2px !important;
}

.cpg-body--properties :is(
  .cpgh-navigator__arrow,
  .cpgh-carousel__btn,
  .cpgp-process__step > a,
  .cpgp-confirm__mark
) {
  border-radius: 0 !important;
}

/* ==========================================================================
   HEADER — one precise white navigation bar
   ========================================================================== */

.cpg-body--properties .cpg-header,
body.cpg-body--properties:has(.cpgh) .cpg-header,
body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  z-index: var(--cpg-z-header);
  background: var(--cpge-white) !important;
  color: var(--cpge-black) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cpge-line) !important;
  box-shadow: none !important;
}

.cpg-body--properties .cpg-header::before { display: none !important; }

.cpg-body--properties .cpg-header__inner,
body.cpg-body--properties:has(.cpgh) .cpg-header__inner {
  min-height: 5rem;
}

.cpg-body--properties .cpg-header .cpg-wordmark__mark,
.cpg-body--properties .cpg-header .cpg-menu-toggle,
.cpg-body--properties .cpg-header .cpg-lang__summary {
  color: var(--cpge-black) !important;
}

.cpg-body--properties .cpg-header .cpg-wordmark__qualifier {
  color: var(--cpge-muted) !important;
}

.cpg-body--properties .cpg-header__nav,
body.cpg-body--properties:has(.cpgh) .cpg-header__nav,
body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-header__nav {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.cpg-body--properties .cpg-nav__list { gap: 1.65rem !important; }

.cpg-body--properties .cpg-nav__link,
body.cpg-body--properties:has(.cpgh) .cpg-nav__link {
  min-height: 5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #272725 !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.cpg-body--properties .cpg-nav__link:hover,
.cpg-body--properties .cpg-nav__link[aria-current="page"] {
  background: transparent !important;
  color: var(--cpge-black) !important;
  border-bottom-color: var(--cpge-black) !important;
}

.cpg-body--properties .cpg-header .cpg-crosslink {
  min-height: 2.5rem;
  padding-inline: 0.875rem;
  border-color: #8e8b84 !important;
  border-radius: 2px !important;
  color: var(--cpge-black) !important;
  background: transparent !important;
  font-size: 0.72rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.cpg-body--properties .cpg-header .cpg-crosslink:hover {
  border-color: var(--cpge-panel) !important;
  background: var(--cpge-panel) !important;
  color: var(--cpge-white) !important;
}

.cpg-body--properties .cpg-header .cpg-btn,
body.cpg-body--properties:has(.cpgh) .cpg-header .cpg-btn--ink,
body.cpg-body--properties:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink {
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  border-color: var(--cpge-panel) !important;
  border-radius: 2px !important;
  background: var(--cpge-panel) !important;
  color: var(--cpge-white) !important;
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.cpg-body--properties .cpg-menu-toggle {
  min-height: 2.75rem;
  gap: 0.5rem;
  border-radius: 0 !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mega menu: project-led, but flat and diagrammatic. */
.cpg-body--properties .cpg-mega {
  background: var(--cpge-white);
  border-top: 0;
}

.cpg-body--properties .cpg-mega__inner { padding-block: clamp(2rem, 4vw, 4.5rem); }
.cpg-body--properties .cpg-mega__lead { border-bottom-color: var(--cpge-black); }
.cpg-body--properties .cpg-mega__title {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 0.96;
}
/* The card is a photograph with its name over the foot, at every width. The
   editorial layer only removes the plate and the rounding the shared card
   ships with; the geometry belongs to the navigation sheet. */
.cpg-body--properties .cpg-mega-card {
  padding: .875rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cpg-body--properties .cpg-mega-card:hover { transform: none; }
.cpg-body--properties .cpg-mega-card__media { height: 100%; border-radius: 0; }
.cpg-body--properties .cpg-mega-card__copy { padding: 0; }
.cpg-body--properties .cpg-mega-card__arrow { border-radius: 50%; }

/* ==========================================================================
   BUTTONS — compact rectangular controls
   ========================================================================== */

.cpg-body--properties .cpgh-pill {
  gap: 0.75rem;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  border-radius: 2px !important;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.cpg-body--properties .cpgh-pill__arrow {
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: 0.25rem;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
}

.cpg-body--properties .cpgh-pill:hover .cpgh-pill__arrow { transform: translateX(2px); }
.cpg-body--properties .cpgh-pill--light { background: var(--cpge-white); color: var(--cpge-black); }
.cpg-body--properties .cpgh-pill--dark { background: var(--cpge-panel); color: var(--cpge-white); }
.cpg-body--properties .cpgh-pill--copper { background: var(--cpge-accent); color: var(--cpge-white); }
.cpg-body--properties .cpgh-pill--ghost { border-color: rgba(255,255,255,0.68); }
.cpg-body--properties .cpgh-pill--light:hover,
.cpg-body--properties .cpgh-pill--dark:hover,
.cpg-body--properties .cpgh-pill--copper:hover { background: var(--cpge-accent); color: var(--cpge-white); }

/* ==========================================================================
   HOMEPAGE — photography first, editorial modules second
   ========================================================================== */

.cpg-body--properties .cpgh { background: var(--cpge-white); }

.cpg-body--properties .cpgh-hero {
  min-height: clamp(40rem, 82svh, 52rem);
  padding-block-start: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--cpge-black);
}

.cpg-body--properties .cpgh-hero__scrim {
  background:
    linear-gradient(90deg, rgba(7,7,7,0.78) 0%, rgba(7,7,7,0.36) 48%, rgba(7,7,7,0.16) 72%),
    linear-gradient(180deg, rgba(7,7,7,0.08) 28%, rgba(7,7,7,0.82) 100%);
}

.cpg-body--properties .cpgh-hero__inner {
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 2.5vw, 2rem);
}

.cpg-body--properties .cpgh-hero__headline {
  max-width: 13ch;
  font-size: clamp(3.25rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.055em;
}

.cpg-body--properties .cpgh-hero__lead {
  max-width: 39ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.48;
}

.cpg-body--properties .cpgh-facts {
  padding: 1rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.52);
  border-bottom: 1px solid rgba(255,255,255,0.52);
  border-radius: 0;
}

.cpg-body--properties .cpgh-fact__value { font-size: clamp(1.5rem, 2vw, 2rem); }

.cpg-body--properties .cpgh-discover {
  margin-block-start: 0;
  padding: 0.875rem;
  background: rgba(8,8,8,0.94);
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 0;
}

.cpg-body--properties .cpgh-discover__input {
  min-height: 3rem;
  border: 1px solid var(--cpge-white);
  border-radius: 2px;
  background: var(--cpge-white);
}

.cpg-body--properties .cpgh-navigator,
.cpg-body--properties .cpgh-section { padding-block: var(--cpge-section); }
.cpg-body--properties .cpgh-section--flush-top { padding-block-start: 0; }

.cpg-body--properties .cpgh-navigator__head,
.cpg-body--properties .cpgh-head {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.cpg-body--properties .cpgh-title {
  max-width: 17ch;
  font-size: clamp(2.1rem, 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.cpg-body--properties .cpgh-eyebrow { color: #474641; }
.cpg-body--properties .cpgh-eyebrow::before {
  width: 1.25rem;
  height: 1px;
  border-radius: 0;
  background: var(--cpge-accent);
}

.cpg-body--properties .cpgh-support { color: var(--cpge-muted); }

.cpg-body--properties .cpgh-navigator__grid { gap: 0; border-top: 1px solid var(--cpge-black); }
.cpg-body--properties .cpgh-navigator__link {
  min-height: 13rem;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid var(--cpge-line);
  border-bottom: 1px solid var(--cpge-black);
  border-radius: 0;
  background: var(--cpge-white);
  transition: background-color 180ms ease, color 180ms ease;
}
.cpg-body--properties .cpgh-navigator__link:last-child { border-right: 0; }
.cpg-body--properties .cpgh-navigator__link:hover { transform: none; border-color: var(--cpge-black); background: var(--cpge-paper); }
.cpg-body--properties .cpgh-navigator__link--ink,
.cpg-body--properties .cpgh-navigator__link--copper { background: var(--cpge-panel); color: var(--cpge-white); }
.cpg-body--properties .cpgh-navigator__link--ink:hover,
.cpg-body--properties .cpgh-navigator__link--copper:hover { background: var(--cpge-accent); color: var(--cpge-white); }
.cpg-body--properties .cpgh-navigator__arrow {
  top: 1.1rem;
  right: 1.1rem;
  width: auto;
  height: auto;
  border: 0;
  font-size: 1.25rem;
}

.cpg-body--properties .cpgh-media { border-radius: 0; background: #e5e4df; }
.cpg-body--properties .cpgh-media img { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.cpg-body--properties a:hover > .cpgh-media img,
.cpg-body--properties .cpgh-card:hover .cpgh-media img { transform: scale(1.018); }

.cpg-body--properties .cpgh-intro { gap: 1px; background: var(--cpge-line); }
.cpg-body--properties .cpgh-intro > * { background: var(--cpge-white); }
.cpg-body--properties .cpgh-intro__side { gap: 1px; background: var(--cpge-line); }
.cpg-body--properties .cpgh-caption { margin-top: 0.75rem; }

.cpg-body--properties .cpgh-proof { gap: 0; border-block: 1px solid var(--cpge-black); }
.cpg-body--properties .cpgh-proof__card,
.cpg-body--properties .cpgh-proof__card--feature {
  min-height: 13rem;
  padding: 1.5rem 1.25rem;
  background: var(--cpge-white);
  border: 0;
  border-right: 1px solid var(--cpge-line);
  color: var(--cpge-black);
  transform: none;
}
.cpg-body--properties .cpgh-proof__card:last-child { border-right: 0; }
.cpg-body--properties .cpgh-proof__card--feature .cpgh-proof__text { color: var(--cpge-muted); }

.cpg-body--properties .cpgh-projects { gap: 1px; background: var(--cpge-line); }
.cpg-body--properties .cpgh-feature {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 0;
  background: var(--cpge-panel);
}
.cpg-body--properties .cpgh-feature__media .cpgh-media { border-radius: 0; }
.cpg-body--properties .cpgh-satellite { gap: 1px; background: var(--cpge-line); }
.cpg-body--properties .cpgh-sat { padding: 0 0 1.25rem; background: var(--cpge-white); }
.cpg-body--properties .cpgh-sat .cpgh-caption { padding-inline: 1rem; }

.cpg-body--properties .cpgh-badge {
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  background: rgba(255,255,255,0.14);
  letter-spacing: 0.08em;
}
.cpg-body--properties .cpgh-badge--status { background: var(--cpge-accent); }
.cpg-body--properties .cpgh-badge--note { border: 1px solid currentColor; }

.cpg-body--properties .cpgh-completed { gap: 1px; }
.cpg-body--properties .cpgh-completed__link {
  border-radius: 0;
  background: var(--cpge-panel);
}

.cpg-body--properties .cpgh-step {
  border-top-color: var(--cpge-black);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.cpg-body--properties .cpgh-step:last-child { border-bottom-color: var(--cpge-black); }
.cpg-body--properties .cpgh-step__media { padding: 0; background: transparent; border-radius: 0; }
.cpg-body--properties .cpgh-step__media .cpgh-media { border: 0; border-radius: 0; }

.cpg-body--properties .cpgh-units { gap: 0; border-top: 1px solid var(--cpge-black); }
.cpg-body--properties .cpgh-unit {
  min-height: 12rem;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid var(--cpge-line);
  border-bottom: 1px solid var(--cpge-black);
  border-radius: 0;
}
.cpg-body--properties .cpgh-unit:last-child { border-right: 0; }
.cpg-body--properties .cpgh-unit:hover { transform: none; background: var(--cpge-paper); }

.cpg-body--properties .cpgh-cta {
  min-height: 28rem;
  border-radius: 0;
  display: grid;
  align-items: center;
}
.cpg-body--properties .cpgh-cta__scrim { background: rgba(5,5,5,0.68); }

/* ==========================================================================
   PROJECT MICROSITES — full-bleed hero, dense and useful project modules
   ========================================================================== */

.cpg-body--properties .cpgp { background: var(--cpge-white); }
.cpg-body--properties .cpgp-portfolio-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2rem;
  border-top: 1px solid var(--cpge-black);
  border-bottom: 1px solid var(--cpge-black);
}

.cpg-body--properties .cpgp-portfolio-tabs a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--cpge-line);
  color: var(--cpge-black);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.cpg-body--properties .cpgp-portfolio-tabs a:last-child { border-right: 0; }
.cpg-body--properties .cpgp-portfolio-tabs a:hover { background: var(--cpge-paper); }
.cpg-body--properties .cpgp-portfolio-tabs a[aria-current="page"] {
  background: var(--cpge-panel);
  color: var(--cpge-white);
}

.cpg-body--properties .cpgp-hero-shell {
  max-width: none;
  padding-inline: 0;
}

.cpg-body--properties .cpgp-hero {
  min-height: clamp(33rem, 68svh, 48rem);
  padding-inline: max(var(--cpge-gutter), calc((100vw - 86rem) / 2 + var(--cpge-gutter)));
  padding-block: clamp(2rem, 5vw, 4rem);
  border-radius: 0;
}

.cpg-body--properties .cpgp-hero__scrim {
  background:
    linear-gradient(90deg, rgba(7,7,7,0.76) 0%, rgba(7,7,7,0.28) 58%, rgba(7,7,7,0.06) 100%),
    linear-gradient(180deg, rgba(7,7,7,0.08) 35%, rgba(7,7,7,0.72) 100%);
}

.cpg-body--properties .cpgp-hero__title {
  max-width: 14ch;
  font-size: clamp(3.25rem, 8vw, 7rem);
  line-height: 0.91;
  letter-spacing: -0.055em;
}

.cpg-body--properties .cpg-subnav {
  background: var(--cpge-white);
  border-block: 0;
  border-bottom: 1px solid var(--cpge-line);
}

.cpg-body--properties .cpg-subnav__inner { min-height: 3.75rem; }
.cpg-body--properties .cpg-subnav__list { gap: 1.25rem; }
.cpg-body--properties .cpg-subnav__link {
  min-height: 3.75rem;
  padding: 0;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
  background: transparent !important;
  color: #4c4a45;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.cpg-body--properties .cpg-subnav__link:hover,
.cpg-body--properties .cpg-subnav__link[aria-current="true"] {
  background: transparent;
  color: var(--cpge-black);
  border-bottom-color: var(--cpge-black);
}

.cpg-body--properties .cpgp-section { padding-block: var(--cpge-section); }
.cpg-body--properties .cpgp-section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.cpg-body--properties .cpgp-section--flush-top { padding-block-start: 0; }

.cpg-body--properties .cpgp-overview {
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid var(--cpge-black);
}

.cpg-body--properties .cpgp-facts {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--cpge-black);
  background: transparent;
}
.cpg-body--properties .cpgp-facts > div { padding: 0.95rem 0; }

.cpg-body--properties .cpgp-glance {
  margin-top: clamp(3rem, 6vw, 6rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cpge-panel);
}
.cpg-body--properties .cpgp-metrics { border-radius: 0; }

.cpg-body--properties .cpgp-highlights { gap: 0; border-top: 1px solid var(--cpge-black); }
.cpg-body--properties .cpgp-highlight {
  min-height: 12rem;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid var(--cpge-line);
  border-bottom: 1px solid var(--cpge-black);
  background: var(--cpge-white) !important;
  color: var(--cpge-black) !important;
}
.cpg-body--properties .cpgp-highlight:last-child { border-right: 0; }

.cpg-body--properties .cpgp-results,
.cpg-body--properties .cpgp-cards { gap: 0; border-top: 1px solid var(--cpge-black); }
.cpg-body--properties .cpgp-result {
  border: 0;
  border-right: 1px solid var(--cpge-line);
  border-bottom: 1px solid var(--cpge-black);
  background: var(--cpge-white);
}
.cpg-body--properties .cpgp-result:hover { transform: none; background: var(--cpge-paper); }

.cpg-body--properties .cpgp-place {
  margin-top: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--cpge-panel);
}
.cpg-body--properties .cpgp-pin {
  border-radius: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cpge-line-dark);
}

.cpg-body--properties .cpgp-gallery { gap: 2px; background: var(--cpge-line); }
.cpg-body--properties .cpgp-gallery > li { background: var(--cpge-white); }
.cpg-body--properties .cpgp-gallery .cpgh-media { border-radius: 0; }

.cpg-body--properties .cpgp-table-wrap {
  overflow: hidden;
  border: 1px solid var(--cpge-black);
  border-radius: 0;
}
.cpg-body--properties .cpgp-table thead { background: var(--cpge-panel); }

.cpg-body--properties .cpgp-process {
  gap: 0;
  border-top: 1px solid var(--cpge-black);
}
.cpg-body--properties .cpgp-process__step {
  min-height: 17rem;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid var(--cpge-line);
  border-bottom: 1px solid var(--cpge-black);
  background: var(--cpge-white) !important;
  color: var(--cpge-black) !important;
}
.cpg-body--properties .cpgp-process__step:last-child { border-right: 0; }
.cpg-body--properties .cpgp-process__step p { color: var(--cpge-muted) !important; }
.cpg-body--properties .cpgp-process__step > a {
  border: 0;
  color: var(--cpge-black) !important;
}

.cpg-body--properties .cpgp-enquire {
  min-height: 28rem;
  border-radius: 0;
}
.cpg-body--properties .cpgp-enquire__scrim { background: rgba(5,5,5,0.7); }

.cpg-body--properties .cpgp-slate { gap: 1px; background: var(--cpge-line); }
.cpg-body--properties .cpgp-slate > li { background: var(--cpge-white); }
.cpg-body--properties .cpgp-card {
  border: 0;
  border-bottom: 1px solid var(--cpge-black);
  background: var(--cpge-white);
}
.cpg-body--properties .cpgp-card:hover { transform: none; border-color: var(--cpge-black); }

/* ==========================================================================
   INNER PAGES — the same flat system for search, forms and content pages
   ========================================================================== */

.cpg-body--properties .cpgp-controls,
.cpg-body--properties .cpgp-filters-rail,
.cpg-body--properties .cpgp-form,
.cpg-body--properties .cpgp-unit__rail,
.cpg-body--properties .cpgp-notice-pair__panel,
.cpg-body--properties .cpgp-route,
.cpg-body--properties .cpgp-figure-cell {
  border-radius: 0;
  border-color: var(--cpge-line);
}

.cpg-body--properties .cpgp-controls,
.cpg-body--properties .cpgp-filters-rail { background: var(--cpge-paper); }

.cpg-body--properties .cpgp-card__badges .cpgh-badge { background: var(--cpge-panel); }
.cpg-body--properties .cpgp-card__badges .cpgh-badge--status { background: var(--cpge-accent); }

.cpg-body--properties .cpgp-register__aside,
.cpg-body--properties .cpgp-sibling,
.cpg-body--properties .cpgp-confirm,
.cpg-body--properties .cpgp-footprint { background: var(--cpge-panel); }

.cpg-body--properties .cpgp-form,
.cpg-body--properties .cpgp-unit__rail { background: var(--cpge-white); }

.cpg-body--properties .cpgp-register__context,
.cpg-body--properties .cpgp-confirm__context {
  border-radius: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cpge-line-dark);
  border-bottom: 1px solid var(--cpge-line-dark);
}

.cpg-body--properties .cpgp-form__more { border-radius: 0; background: var(--cpge-paper); }
.cpg-body--properties .cpgp-route { border-left: 0; border-right: 0; }
.cpg-body--properties .cpgp-route:hover { background: var(--cpge-paper); }

.cpg-body--properties .cpg-sample-notice {
  border-radius: 0 !important;
  background: #eef0ef;
}

/* ==========================================================================
   FOOTER — compact architectural base, no floating container
   ========================================================================== */

.cpg-body--properties .cpg-footer,
body.cpg-body--properties:has(.cpgh) .cpg-footer {
  margin-top: 0;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-radius: 0 !important;
  border-top: 1px solid var(--cpge-line-dark);
  background: var(--cpge-panel);
}

.cpg-body--properties .cpg-footer__top { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cpg-body--properties .cpg-footer__bottom { border-top-color: var(--cpge-line-dark); }

/* Small editorial labels keep their hierarchy without sacrificing AA contrast. */
.cpg-body--properties .cpgh-eyebrow--on-dark,
.cpg-body--properties .cpgh-eyebrow--on-dark-quiet,
/* The register aside is a dark panel too, and its eyebrow was still carrying
   the tone meant for a light ground — well under every contrast floor. */
.cpg-body--properties .cpgp-register__aside .cpgh-eyebrow,
.cpg-body--properties .cpgh-cta .cpgh-eyebrow { color: #b7b4ac; }
.cpg-body--properties .cpgh-proof__index { color: #303735; }

/* The approved hybrid rhythm alternates one ink proof panel between two
   paper panels. It remains completely flat: no radius, shadow or card lift. */
.cpg-body--properties .cpgh-proof__card--feature {
  background: var(--cpge-panel);
  color: var(--cpge-white);
}
.cpg-body--properties .cpgh-proof__card--feature .cpgh-proof__index { color: var(--cpge-white); }
.cpg-body--properties .cpgh-proof__card--feature .cpgh-proof__text { color: #b7b4ac; }

/* Put verified project facts in the first reading screen, immediately after
   the hero image. This is a full-width editorial rail, not a floating card. */
.cpg-body--properties .cpgp-hero-facts {
  border-bottom: 1px solid var(--cpge-line-dark);
  background: var(--cpge-panel);
  color: var(--cpge-white);
}
.cpg-body--properties .cpgp-hero-facts .cpgp-glance {
  margin-top: 0;
  padding: clamp(1.25rem, 2.8vw, 2rem) 0;
  background: transparent;
}
.cpg-body--properties .cpgp-hero-facts .cpgp-glance__eyebrow {
  margin: 0;
  color: #b7b4ac;
}
.cpg-body--properties .cpgp-hero-facts .cpgp-metrics {
  border: 0;
  border-radius: 0;
  background: var(--cpge-line-dark);
}
.cpg-body--properties .cpgp-hero-facts .cpgp-metric {
  min-height: 6.75rem;
  padding: 1rem clamp(.85rem, 2vw, 1.5rem);
  background: var(--cpge-panel);
}
.cpg-body--properties .cpgp-hero-facts .cpgp-metric dt { color: #b7b4ac; }
.cpg-body--properties .cpgp-hero-facts .cpgp-metric dd {
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* ==========================================================================
   MOTION — image motion only; no card lift or staged floating
   ========================================================================== */

.cpg-body--properties .cpgh-reveal,
.cpg-body--properties .cpg-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   RESPONSIVE REFINEMENT
   ========================================================================== */

@media (min-width: 64rem) {
  .cpg-body--properties .cpgh-navigator__link { min-height: 14rem; }
  .cpg-body--properties .cpgh-proof__card { min-height: 14rem; }
  .cpg-body--properties .cpgp-overview {
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.7fr);
  }
  .cpg-body--properties .cpgp-hero-facts .cpgp-glance {
    grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

@media (max-width: 63.999rem) {
  .cpg-body--properties .cpg-header__inner,
  body.cpg-body--properties:has(.cpgh) .cpg-header__inner { min-height: 4.25rem; }

  .cpg-body--properties .cpg-header .cpg-btn,
  .cpg-body--properties .cpg-header .cpg-crosslink,
  .cpg-body--properties .cpg-header .cpg-lang { display: none; }

  .cpg-body--properties .cpgh-hero {
    min-height: clamp(40rem, 86svh, 48rem);
  }

  .cpg-body--properties .cpgh-hero__inner { padding-block-start: 3.5rem; }
  .cpg-body--properties .cpgh-hero__headline,
  .cpg-body--properties .cpgp-hero__title { font-size: clamp(3rem, 12vw, 5.5rem); }

  .cpg-body--properties .cpgh-facts { text-align: left; }
  .cpg-body--properties .cpgh-navigator__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpg-body--properties .cpgh-navigator__link { min-height: 11rem; }

  .cpg-body--properties .cpgh-proof__card { border-right: 0; border-bottom: 1px solid var(--cpge-line); }
  .cpg-body--properties .cpgh-proof__card:last-child { border-bottom: 0; }

  .cpg-body--properties .cpgp-hero-facts .cpgp-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cpg-body--properties .cpgh-unit { border-right: 0; }
  .cpg-body--properties .cpgp-highlight,
  .cpg-body--properties .cpgp-process__step { border-right: 0; }

  .cpg-body--properties .cpgp-hero {
    min-height: 31rem;
    padding-inline: var(--cpge-gutter);
  }

  .cpg-body--properties .cpgp-subnav__cta { display: none; }
}

@media (max-width: 39.999rem) {
  .cpg-body--properties { --cpge-section: 4rem; }
  .cpg-body--properties .cpg-wordmark__mark { font-size: 1.15rem; }
  .cpg-body--properties .cpg-wordmark__qualifier { font-size: 0.55rem; }

  .cpg-body--properties .cpgh-hero__headline,
  .cpg-body--properties .cpgp-hero__title { font-size: clamp(2.75rem, 14vw, 4rem); }

  .cpg-body--properties .cpgh-hero__actions,
  .cpg-body--properties .cpgh-discover__actions { display: grid; grid-template-columns: 1fr; }
  .cpg-body--properties .cpgh-hero__actions .cpgh-pill,
  .cpg-body--properties .cpgh-discover__actions .cpgh-pill { width: 100%; justify-content: space-between; }

  .cpg-body--properties .cpgh-navigator__grid { grid-template-columns: 1fr; }
  .cpg-body--properties .cpgh-navigator__link { min-height: 9.5rem; border-right: 0; }
  .cpg-body--properties .cpgh-title { font-size: clamp(2rem, 10vw, 3rem); }
  .cpg-body--properties .cpgh-head { margin-bottom: 2rem; }

  .cpg-body--properties .cpgp-section,
  .cpg-body--properties .cpgh-section { padding-block: 4rem; }
  .cpg-body--properties .cpgp-section--flush-top,
  .cpg-body--properties .cpgh-section--flush-top { padding-block-start: 0; }

  .cpg-body--properties .cpgp-portfolio-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cpg-body--properties .cpgp-portfolio-tabs a {
    min-width: 0;
    min-height: 4rem;
    padding-inline: 0.6rem;
    font-size: 0.64rem;
    line-height: 1.25;
  }
}

/* ==========================================================================
   CURRENT PROJECT SHOWCASE — full-width hover slideshow
   --------------------------------------------------------------------------
   One photograph fills the viewport-wide module, project columns sit over it,
   and a project opens into a white editorial panel only after interaction.
   Background crossfade and panel easing share the reference's fluid timing.
   ========================================================================== */
.cpg-body--properties .cpgh-showcase {
  --cpgh-showcase-panel-height: clamp(18rem, 24vw, 24rem);
  --cpgh-showcase-visible: 4;
  --cpgh-showcase-step: 25%;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(32rem, 40.3vw, 56rem);
  overflow: hidden;
  overflow: clip;
  background: var(--cpge-panel);
  color: var(--cpge-white);
}

.cpg-body--properties .cpgh-showcase__backgrounds,
.cpg-body--properties .cpgh-showcase__background,
.cpg-body--properties .cpgh-showcase__shade {
  position: absolute;
  inset: 0;
}

.cpg-body--properties .cpgh-showcase__backgrounds { z-index: -3; }
.cpg-body--properties .cpgh-showcase__background {
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 850ms cubic-bezier(.23, 1, .32, 1),
    transform 850ms cubic-bezier(.23, 1, .32, 1);
}
.cpg-body--properties .cpgh-showcase__background.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.cpg-body--properties .cpgh-showcase__background .cpgh-media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--cpge-panel);
}
.cpg-body--properties .cpgh-showcase__background .cpgh-media img {
  transform: none;
  transition: none;
  filter: none;
  image-rendering: auto;
}

.cpg-body--properties .cpgh-showcase__shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(3, 7, 6, .14) 0%, rgba(3, 7, 6, .03) 38%, rgba(3, 7, 6, .52) 100%),
    linear-gradient(90deg, rgba(2, 5, 4, .17), transparent 24%, transparent 76%, rgba(2, 5, 4, .14));
  pointer-events: none;
}

.cpg-body--properties .cpgh-showcase__rail {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  transform: translate3d(0, 0, 0);
  transition: transform 720ms cubic-bezier(.23, 1, .32, 1);
  will-change: transform;
}

.cpg-body--properties .cpgh-showcase__item {
  position: relative;
  flex: 0 0 var(--cpgh-showcase-step);
  min-width: var(--cpgh-showcase-step);
  min-height: inherit;
  overflow: visible;
  border-left: 1px solid rgba(255, 255, 255, .23);
}
.cpg-body--properties .cpgh-showcase__item:last-child {
  border-right: 1px solid rgba(255, 255, 255, .23);
}

.cpg-body--properties .cpgh-showcase__trigger {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cpg-body--properties .cpgh-showcase__trigger:focus-visible {
  outline: 2px solid var(--cpge-white);
  outline-offset: -5px;
}

.cpg-body--properties .cpgh-showcase__preview {
  display: grid;
  gap: .65rem;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms cubic-bezier(.23, 1, .32, 1),
    transform 520ms cubic-bezier(.23, 1, .32, 1);
}
.cpg-body--properties .cpgh-showcase__item.is-active .cpgh-showcase__preview {
  opacity: 0;
  transform: translateY(1.25rem);
  pointer-events: none;
}
.cpg-body--properties .cpgh-showcase__ordinal {
  font-family: var(--cpg-font-mono);
  font-size: .68rem;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, .68);
}
.cpg-body--properties .cpgh-showcase__preview-title {
  max-width: 13ch;
  font-family: var(--cpgh-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.cpg-body--properties .cpgh-showcase__preview-meta {
  max-width: 24ch;
  font-size: .75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.cpg-body--properties .cpgh-showcase__panel {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: var(--cpgh-showcase-panel-height);
  padding: clamp(1.35rem, 2.4vw, 2.4rem);
  background: var(--cpge-white);
  color: var(--cpge-black);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition:
    transform 700ms cubic-bezier(.23, 1, .32, 1),
    opacity 260ms ease,
    visibility 0s linear 700ms;
  pointer-events: none;
}
.cpg-body--properties .cpgh-showcase__item.is-active .cpgh-showcase__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.cpg-body--properties .cpgh-showcase__panel-head {
  display: grid;
  align-content: start;
  gap: .8rem;
}
.cpg-body--properties .cpgh-showcase__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cpg-body--properties .cpgh-showcase__kicker span + span::before {
  content: "·";
  margin-right: .8rem;
  color: var(--cpge-muted);
}
.cpg-body--properties .cpgh-showcase__title {
  max-width: 12ch;
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(1.75rem, 2.2vw, 2.65rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* The name carries the link. It stays typographically a heading — the rule
   only appears on hover and focus, so nothing about the panel changes until
   the pointer is on the word itself. */
.cpg-body--properties .cpgh-showcase__title-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}
.cpg-body--properties .cpgh-showcase__title-link:hover,
.cpg-body--properties .cpgh-showcase__title-link:focus-visible {
  text-decoration: underline;
}

.cpg-body--properties .cpgh-showcase__facts.cpgh-feature__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.25rem;
  margin-top: .2rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cpge-line);
}
.cpg-body--properties .cpgh-showcase__fact {
  display: grid;
  gap: .12rem;
}
.cpg-body--properties .cpgh-showcase__fact b {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .01em;
}
.cpg-body--properties .cpgh-showcase__fact small {
  font-size: .58rem;
  line-height: 1.3;
  letter-spacing: .08em;
  color: var(--cpge-muted);
  text-transform: uppercase;
}
.cpg-body--properties .cpgh-showcase__panel-foot {
  display: grid;
  gap: 1rem;
  align-items: end;
  padding-top: 1rem;
}
.cpg-body--properties .cpgh-showcase__meta {
  display: grid;
  gap: .25rem;
  max-width: 32ch;
  margin: 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--cpge-muted);
}
.cpg-body--properties .cpgh-showcase__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: .9rem;
  border-top: 1px solid var(--cpge-black);
  color: var(--cpge-black);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
.cpg-body--properties .cpgh-showcase__link span:last-child {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 280ms cubic-bezier(.23, 1, .32, 1);
}
.cpg-body--properties .cpgh-showcase__link:hover span:last-child { transform: translateX(.3rem); }

.cpg-body--properties .cpgh-showcase__controls {
  position: absolute;
  z-index: 6;
  top: clamp(1.25rem, 2.8vw, 2.5rem);
  left: clamp(1.25rem, 2.8vw, 2.5rem);
  display: flex;
  gap: .5rem;
}
.cpg-body--properties .cpgh-showcase__controls[hidden] { display: none; }
.cpg-body--properties .cpgh-showcase__arrow {
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 4.5vw, 4rem);
  height: clamp(3.2rem, 4.5vw, 4rem);
  padding: 0;
  border: 1px solid var(--cpge-white);
  border-radius: 0;
  background: var(--cpge-white);
  color: var(--cpge-black);
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}
.cpg-body--properties .cpgh-showcase__arrow:hover,
.cpg-body--properties .cpgh-showcase__arrow:focus-visible {
  background: var(--cpge-panel);
  color: var(--cpge-white);
}
.cpg-body--properties .cpgh-showcase__arrow:focus-visible {
  outline: 2px solid var(--cpge-white);
  outline-offset: 3px;
}
.cpg-body--properties .cpgh-showcase__arrow svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 64rem) and (max-width: 89.999rem) {
  .cpg-body--properties .cpgh-showcase {
    --cpgh-showcase-visible: 3;
    --cpgh-showcase-step: 33.333333%;
  }
}

@media (max-width: 63.999rem) {
  .cpg-body--properties .cpgh-showcase {
    --cpgh-showcase-panel-height: clamp(17rem, 46vw, 19rem);
    min-height: clamp(37rem, 78vw, 43rem);
  }
  .cpg-body--properties .cpgh-showcase__rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    transform: none !important;
    will-change: auto;
  }
  .cpg-body--properties .cpgh-showcase__item {
    min-width: 0;
    grid-area: 1 / 1;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 380ms ease, visibility 0s linear 380ms;
  }
  .cpg-body--properties .cpgh-showcase__item:last-child { border: 0; }
  .cpg-body--properties .cpgh-showcase__item.is-current {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .cpg-body--properties .cpgh-showcase__panel {
    right: 1rem;
    left: auto;
    width: min(31rem, calc(100% - 2rem));
  }
}

@media (max-width: 39.999rem) {
  .cpg-body--properties .cpgh-showcase {
    --cpgh-showcase-panel-height: 17rem;
    min-height: 36rem;
  }
  .cpg-body--properties .cpgh-showcase__panel {
    right: .75rem;
    width: calc(100% - 1.5rem);
    padding: 1.25rem;
  }
  .cpg-body--properties .cpgh-showcase__title { font-size: clamp(2rem, 10vw, 2.75rem); }
  .cpg-body--properties .cpgh-showcase__controls {
    top: 1rem;
    left: 1rem;
  }
  .cpg-body--properties .cpgh-showcase__arrow {
    width: 3.1rem;
    height: 3.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpg-body--properties .cpgh-hero-slide.is-current .cpgh-hero-slide__image { animation: none !important; }
  .cpg-body--properties .cpgh-media img { transition: none !important; }
  .cpg-body--properties a:hover > .cpgh-media img,
  .cpg-body--properties .cpgh-card:hover .cpgh-media img { transform: none !important; }
  .cpg-body--properties .cpgh-showcase__background,
  .cpg-body--properties .cpgh-showcase__preview,
  .cpg-body--properties .cpgh-showcase__panel,
  .cpg-body--properties .cpgh-showcase__item,
  .cpg-body--properties .cpgh-showcase__rail,
  .cpg-body--properties .cpgh-showcase__link span:last-child { transition: none !important; }
}

/* ==========================================================================
   HOMEPAGE HERO — VERTICAL ANIMATED FRAME
   --------------------------------------------------------------------------
   Recreates the supplied Modern Blocks interaction with CPG-owned content:
   a full-viewport image stage, vertical frame transitions, title/content
   roll, lower-left controls, right-side counter and a pointer-follow cursor.
   The Discover module remains docked immediately below the stage.
   ========================================================================== */

.cpg-body--properties {
  /* ------------------------------------------------------------------
     Dark panel surfaces.

     Every box on the site that used to be painted flat black now takes the
     same charcoal the dark theme uses for its own panels. The ink tokens
     themselves are left alone because they are dual-duty — the same value is
     a text colour in half the rules that read it — so only the surface side
     moves, through these four variables.

     Each one falls back to its original token inside the dark theme (see
     properties-dark.css), so dark mode renders exactly as it did.
     ------------------------------------------------------------------ */
  --cpg-panel-ink: #16181b;
  --cpge-panel: #16181b;
  --cpgx-panel: #16181b;
  --asy-panel: #16181b;

  /* A panel that is dark in both themes — the footer and the few surfaces
     that were painted with a literal near-black rather than a token, and so
     never inverted for dark mode. They keep that behaviour, in the new
     colour. */
  --cpg-panel-fixed: #16181b;

  /* Roughly the height of the homepage intro card band. The hero title and
     the slider arrows are anchored off it so they always clear the band's
     top edge; the band's own position is set by the grid below, not by this. */
  --cpgh-band-pull: clamp(11.5rem, 13.7vw, 12.3rem);
  /* The strip of slide left visible below the band. Anything anchored above
     the band adds this too, so the whole group moves together. */
  --cpgh-band-lift: clamp(1.75rem, 4vh, 3.25rem);
}

/* The opening screen is exactly one viewport: the slide fills it and the card
   band is laid over its foot by the grid, so the band's lower edge lands on
   the fold and the docked search begins below it. */
@media (min-width: 64rem) {
  .cpg-body--properties .cpgh-hero__screen {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100svh;
  }
  .cpg-body--properties .cpgh-hero__screen > .cpgh-hero-stage {
    grid-row: 1 / -1;
    grid-column: 1;
    min-height: 0;
  }
  .cpg-body--properties .cpgh-hero__screen > .cpgh-intro-cards {
    grid-row: 2;
    grid-column: 1;
    margin-top: 0;
    /* A strip of the slide stays visible under the band, so the card reads as
       sitting on the photograph rather than balanced on its lower edge. The
       docked search still begins below the fold. */
    margin-bottom: var(--cpgh-band-lift);
  }
}

.cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: var(--cpge-panel);
}

.cpg-body--properties .cpgh-hero-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  background: var(--cpge-panel);
  color: var(--cpge-white);
}

.cpg-body--properties .cpgh-hero-slides,
.cpg-body--properties .cpgh-hero-slide,
.cpg-body--properties .cpgh-hero-slide__frame,
.cpg-body--properties .cpgh-hero-slide__image,
.cpg-body--properties .cpgh-hero-slide__image .cpgh-media,
.cpg-body--properties .cpgh-hero-slide__image picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cpg-body--properties .cpgh-hero-slides { z-index: 0; }

.cpg-body--properties .cpgh-hero-slide {
  z-index: 0;
  visibility: hidden;
  overflow: hidden;
  overflow: clip;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

.cpg-body--properties .cpgh-hero-slide.is-current,
.cpg-body--properties .cpgh-hero-slide.is-preparing,
.cpg-body--properties .cpgh-hero-slide.is-entering,
.cpg-body--properties .cpgh-hero-slide.is-leaving {
  visibility: visible;
}

.cpg-body--properties .cpgh-hero-slide.is-current {
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.cpg-body--properties .cpgh-hero-slide.is-preparing { z-index: 3; }
.cpg-body--properties .cpgh-hero-slide.is-preparing.is-from-bottom { transform: translate3d(0, 100%, 0); }
.cpg-body--properties .cpgh-hero-slide.is-preparing.is-from-top { transform: translate3d(0, -100%, 0); }

.cpg-body--properties .cpgh-hero-slide.is-entering,
.cpg-body--properties .cpgh-hero-slide.is-leaving {
  transition: transform 1200ms cubic-bezier(.77, 0, .18, 1);
}

.cpg-body--properties .cpgh-hero-slide.is-entering {
  z-index: 4;
  transform: translate3d(0, 0, 0);
}

.cpg-body--properties .cpgh-hero-slide.is-leaving { z-index: 2; }
.cpg-body--properties .cpgh-hero-slide.is-leaving.is-to-top { transform: translate3d(0, -100%, 0); }
.cpg-body--properties .cpgh-hero-slide.is-leaving.is-to-bottom { transform: translate3d(0, 100%, 0); }

.cpg-body--properties .cpgh-hero-slide__frame,
.cpg-body--properties .cpgh-hero-slide__image .cpgh-media,
.cpg-body--properties .cpgh-hero-slide__image img,
.cpg-body--properties .cpgh-hero-slide__image video {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: transform 1200ms cubic-bezier(.77, 0, .18, 1);
  will-change: transform;
}

.cpg-body--properties .cpgh-hero-slide.is-preparing .cpgh-hero-slide__frame,
.cpg-body--properties .cpgh-hero-slide.is-leaving .cpgh-hero-slide__frame {
  transform: translate3d(0, 0, 0) scale(.5);
}

.cpg-body--properties .cpgh-hero-slide.is-preparing .cpgh-hero-slide__image img,
.cpg-body--properties .cpgh-hero-slide.is-leaving .cpgh-hero-slide__image img,
.cpg-body--properties .cpgh-hero-slide.is-preparing .cpgh-hero-slide__image video,
.cpg-body--properties .cpgh-hero-slide.is-leaving .cpgh-hero-slide__image video {
  transform: translate3d(0, 0, 0) scale(1.25);
}

.cpg-body--properties .cpgh-hero-slide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* The slide on screen drifts very slowly closer and then back out again. It
   is set on the image's own wrapper rather than on the picture, so it never
   fights the scale the entering and leaving slides already animate. */
@keyframes cpgh-hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

.cpg-body--properties .cpgh-hero-slide.is-current .cpgh-hero-slide__image {
  animation: cpgh-hero-drift 26s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  will-change: transform;
}

/* The developer's own film, laid over its poster photograph. It fades in only
   once the file is actually playing, so a slow or refused download leaves the
   photograph exactly as it was. */
.cpg-body--properties .cpgh-hero-slide__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(.25, .74, .22, .99);
}
.cpg-body--properties .cpgh-hero-slide__video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cpg-body--properties .cpgh-hero-slide__video { display: none; }
}

.cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] .cpgh-hero__scrim {
  z-index: auto;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,7,7,.58) 0%, rgba(7,7,7,.18) 55%, rgba(7,7,7,.38) 100%),
    linear-gradient(180deg, rgba(7,7,7,.28) 0%, rgba(7,7,7,.08) 45%, rgba(7,7,7,.62) 100%);
}

.cpg-body--properties .cpgh-hero-slider__content {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 68%;
  z-index: auto;
  display: grid;
  justify-items: start;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Where the intro card band rides up onto the slide, the title is measured
   from the foot of the hero instead of from a share of its height: the same
   band of air stays between the two whatever the window is doing. The pull
   below must match .cpgh-intro-cards' negative margin in properties-home.css. */
@media (min-width: 64rem) {
  .cpg-body--properties .cpgh-hero-slider__content {
    inset-block-start: auto;
    inset-block-end: calc(var(--cpgh-band-pull) + var(--cpgh-band-lift) + clamp(2.25rem, 3.5vw, 3.5rem));
    transform: none;
  }
}

.cpg-body--properties .cpgh-hero-slider__kicker {
  max-width: min(44rem, 72vw);
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.77, 0, .18, 1);
}

/* The plate stays; the letters are cut out of it. `screen` leaves white white
   and turns black fully transparent, so the slide — the King's Garden film
   included — plays through the type itself. A browser without blend modes
   simply gets the black-on-white plate, which is the design this replaced. */
.cpg-body--properties .cpgh-hero-slider__title-link {
  display: inline-block;
  max-width: min(78vw, 70rem);
  /* Literal white and literal black, in both themes: the knockout is a
     `screen` blend, and it only works when the plate is exactly white and the
     type exactly black. A themed token here would invert the effect and hide
     the name in dark mode. */
  background: #FFFFFF;
  color: #000000;
  text-decoration: none;
  pointer-events: auto;
  mix-blend-mode: screen;
}

.cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] .cpgh-hero__headline {
  max-width: none;
  margin: 0;
  padding: clamp(.5rem, .8vw, .75rem) clamp(.9rem, 1.6vw, 1.4rem);
  overflow: hidden;
  color: #000000;
  font-size: clamp(1.75rem, 3.7vw, 3.625rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.cpg-body--properties .cpgh-hero__headline > span {
  display: block;
  transition: transform 520ms cubic-bezier(.77, 0, .18, 1), opacity 360ms ease;
}

.cpg-body--properties .cpgh-hero-slider__content.is-out-next .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-out-next .cpgh-hero-slider__kicker {
  opacity: 0;
  transform: translate3d(0, -110%, 0);
}

.cpg-body--properties .cpgh-hero-slider__content.is-out-prev .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-out-prev .cpgh-hero-slider__kicker {
  opacity: 0;
  transform: translate3d(0, 110%, 0);
}

.cpg-body--properties .cpgh-hero-slider__content.is-prep-next .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-prep-next .cpgh-hero-slider__kicker,
.cpg-body--properties .cpgh-hero-slider__content.is-prep-prev .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-prep-prev .cpgh-hero-slider__kicker {
  opacity: 0;
  transition: none;
}

.cpg-body--properties .cpgh-hero-slider__content.is-prep-next .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-prep-next .cpgh-hero-slider__kicker {
  transform: translate3d(0, 110%, 0);
}

.cpg-body--properties .cpgh-hero-slider__content.is-prep-prev .cpgh-hero__headline > span,
.cpg-body--properties .cpgh-hero-slider__content.is-prep-prev .cpgh-hero-slider__kicker {
  transform: translate3d(0, -110%, 0);
}

.cpg-body--properties .cpgh-hero-slider__nav {
  position: absolute;
  inset-inline-start: var(--cpge-gutter);
  inset-block-end: clamp(1.5rem, 5vh, 3.25rem);
  z-index: 5;
  display: flex;
  gap: 1.25rem;
}

/* The arrows belong to the right of the frame, on the photograph just above
   the card band and clear of the slide counter's column. */
@media (min-width: 64rem) {
  .cpg-body--properties .cpgh-hero-slider__nav {
    inset-inline-start: auto;
    inset-inline-end: calc(var(--cpge-gutter) + 4.5rem);
    inset-block-end: calc(var(--cpgh-band-pull) + var(--cpgh-band-lift) + clamp(1rem, 1.8vw, 1.75rem));
  }
}

.cpg-body--properties .cpgh-hero-slider__nav[hidden],
.cpg-body--properties .cpgh-hero-slider__count[hidden] { display: none; }

.cpg-body--properties .cpgh-hero-slider__nav button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cpge-white);
  cursor: pointer;
}

.cpg-body--properties .cpgh-hero-slider__nav svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.cpg-body--properties .cpgh-hero-slider__nav button:hover svg,
.cpg-body--properties .cpgh-hero-slider__nav button:focus-visible svg { transform: scale(1.18); }

.cpg-body--properties .cpgh-hero-slider__nav button:focus-visible {
  outline: 2px solid var(--cpge-white);
  outline-offset: 3px;
}

.cpg-body--properties .cpgh-hero-slider__count {
  --cpgh-count-step: 1.45rem;
  position: absolute;
  inset-inline-end: clamp(1.75rem, 4.5vw, 4.5rem);
  inset-block: 30% 30%;
  z-index: 5;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  color: var(--cpge-white);
  font-size: var(--cpg-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.cpg-body--properties .cpgh-hero-slider__count-line {
  display: block;
  width: 1px;
  height: 100%;
  min-height: 4rem;
  background: rgba(255,255,255,.42);
}

.cpg-body--properties .cpgh-hero-slider__count-numbers {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.cpg-body--properties .cpgh-hero-slider__count-current {
  display: block;
  width: 1ch;
  height: var(--cpgh-count-step);
  overflow: hidden;
}

.cpg-body--properties .cpgh-hero-slider__count-track {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, calc(var(--cpgh-hero-index, 0) * var(--cpgh-count-step) * -1), 0);
  transition: transform 760ms cubic-bezier(.77, 0, .18, 1);
}

.cpg-body--properties .cpgh-hero-slider__count-track > span {
  display: grid;
  place-items: center;
  height: var(--cpgh-count-step);
  line-height: var(--cpgh-count-step);
}

.cpg-body--properties .cpgh-hero-slider__count-slash {
  transform: rotate(-18deg);
  font-weight: 400;
}

.cpg-body--properties .cpgh-hero-cursor {
  display: none;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1000;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(7,7,7,.2);
  color: var(--cpge-white);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  transition: width 180ms ease, height 180ms ease, opacity 160ms ease, background-color 180ms ease;
  backdrop-filter: blur(2px);
}

.cpg-body--properties .cpgh-hero-cursor svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.cpg-body--properties .cpgh-hero-cursor.is-visible { opacity: 1; }
.cpg-body--properties .cpgh-hero-cursor.is-active {
  width: 2.65rem;
  height: 2.65rem;
  background: rgba(255,255,255,.18);
}

.cpg-body--properties .cpgh-hero-discover-dock {
  position: relative;
  z-index: 6;
  padding-block: 1rem;
  background: var(--cpge-panel);
}

/* The dock's ground rises out of the slide rather than meeting it on a line:
   the last stretch of the frame fades into exactly the dock's own colour, so
   the two read as one surface. Decoration only, and clipped by the stage. */
.cpg-body--properties .cpgh-hero-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: clamp(7rem, 17vh, 14rem);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(22, 24, 27, 0) 0%,
    rgba(22, 24, 27, .45) 52%,
    rgba(22, 24, 27, .82) 78%,
    /* The fade lands on the colour of the block that follows — the ink
       search dock — which is the same in both themes, so neither shows a
       strip of another colour between the two (2026-09-09). */
    var(--cpg-panel-fixed, #16181b) 100%
  );
}

.cpg-body--properties .cpgh-hero-discover-dock .cpgh-discover {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cpg-body--properties .cpgh-hero-stage.is-cursor-ready,
  .cpg-body--properties .cpgh-hero-stage.is-cursor-ready a,
  .cpg-body--properties .cpgh-hero-stage.is-cursor-ready button { cursor: none; }
  .cpg-body--properties .cpgh-hero-stage.is-cursor-ready .cpgh-hero-cursor { display: grid; }
}

@media (max-width: 63.999rem) {
  .cpg-body--properties .cpgh-hero-stage { min-height: 100svh; }
  .cpg-body--properties .cpgh-hero-slider__content {
    inset-block-start: 64%;
    transform: translateY(-50%);
  }
  .cpg-body--properties .cpgh-hero-slider__count {
    inset-inline-end: var(--cpge-gutter);
    inset-block: auto clamp(1.5rem, 4vh, 2.5rem);
    display: flex;
  }
  .cpg-body--properties .cpgh-hero-slider__count-line { display: none; }
}

@media (max-width: 39.999rem) {
  .cpg-body--properties .cpgh-hero-slider__content { gap: .85rem; }
  .cpg-body--properties .cpgh-hero-slider__kicker {
    max-width: calc(100vw - (2 * var(--cpge-gutter)));
    font-size: .625rem;
  }
  .cpg-body--properties .cpgh-hero-slider__title-link { max-width: calc(100vw - (2 * var(--cpge-gutter))); }
  .cpg-body--properties .cpgh-hero[data-cpgh-hero-slider] .cpgh-hero__headline {
    padding: .55rem .75rem;
    font-size: clamp(1.5rem, 6vw, 1.875rem);
    letter-spacing: -.045em;
    white-space: normal;
  }
  .cpg-body--properties .cpgh-hero-slider__nav {
    inset-inline-start: calc(var(--cpge-gutter) - .5rem);
    gap: .6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpg-body--properties .cpgh-hero-slide,
  .cpg-body--properties .cpgh-hero-slide__frame,
  .cpg-body--properties .cpgh-hero-slide__image .cpgh-media,
  .cpg-body--properties .cpgh-hero-slide__image img,
  .cpg-body--properties .cpgh-hero__headline > span,
  .cpg-body--properties .cpgh-hero-slider__kicker,
  .cpg-body--properties .cpgh-hero-slider__count-track { transition: none !important; }
}

/* ==========================================================================
   PHONES — the smallest labels and one control

   These sizes read at a desk; on a phone they are lifted to a size that still
   holds at arm's length, and the showcase's link is given a thumb's box.
   ========================================================================== */
@media (max-width: 47.999rem) {
    .cpg-body--properties .cpgh-hero-slider__kicker { font-size: .6875rem; }
    .cpg-body--properties .cpgh-showcase__ordinal { font-size: .6875rem; }
    .cpg-body--properties .cpgh-showcase__kicker,
    .cpg-body--properties .cpgh-showcase__kicker span { font-size: .6875rem; }
    .cpg-body--properties .cpgh-showcase__fact small { font-size: .6875rem; }
    .cpg-body--properties .cpgh-showcase__link,
    .cpg-body--properties .cpgh-showcase__link span { font-size: .75rem; }
    .cpg-body--properties .cpgh-showcase__link { min-height: 2.75rem; }
    .cpg-body--properties .cpgh-intro-card__mark .cpg-wordmark__qualifier { font-size: .625rem; }
}