/* ==========================================================================
   CPG PROPERTIES — INNER PAGES (PDF screens 02–09)
   --------------------------------------------------------------------------
   The board deck's grey wireframe blocks translated into the approved Figma
   homepage language, NOT into the deck's literal square styling.

   How this file relates to everything else:

     tokens.css          colour, type scale, space, status, focus  (shared)
     base.css            reset, container, prose, focus, motion    (shared)
     components.css      header, footer, chips, table, form field  (shared)
     properties.css      platform layer                            (shared)
     properties-home.css the approved homepage composition         (Properties)
     properties-pages.css  ← this file                             (Properties)

   The inner pages LOAD properties-home.css and reuse its component classes
   verbatim — `.cpgh-pill`, `.cpgh-eyebrow`, `.cpgh-title`, `.cpgh-head`,
   `.cpgh-media`, `.cpgh-badge`, `.cpgh-unit`, `.cpgh-reveal`. That is
   deliberate: those classes ARE the approved design, and re-declaring them
   here would guarantee the two surfaces drift apart. properties-home.css is
   not edited by this work and the homepage is not touched.

   The custom properties those classes read (`--cpgh-radius-*`, `--cpgh-gap`,
   `--cpgh-display`) are declared on `.cpgh` in that file. Inner pages declare
   the identical set on `.cpgp` below, so the components inherit them here too.
   Rules in properties-home.css scoped to `body:has(.cpgh)` stay inert on inner
   pages, because inner pages never carry the `.cpgh` class.

   Everything genuinely new to the inner pages is namespaced `cpgp-`.
   ========================================================================== */

.cpgp {
  /* ---- Type: identical to the homepage's `.cpgh` declaration -------------- */
  --cpgh-display: var(--cpg-font-body);
  --cpgh-display-weight: 300;
  --cpgh-display-tracking: -0.022em;

  --cpgh-hero-size: clamp(2.25rem, 5.6vw, 4.5rem);
  --cpgh-title-size: clamp(1.875rem, 1.15rem + 2.6vw, 3rem);
  --cpgh-lead-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

  /* ---- Shape: identical radii to the homepage ---------------------------- */
  --cpgh-radius-hero: clamp(1.5rem, 3vw, 3rem);
  --cpgh-radius-panel: clamp(1.25rem, 2.2vw, 2rem);
  --cpgh-radius-card: clamp(1rem, 1.6vw, 1.5rem);
  --cpgh-radius-media: clamp(0.75rem, 1.2vw, 1.25rem);

  --cpgh-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --cpgh-section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);

  /* ---- Surfaces ---------------------------------------------------------- */
  /* Surface-only token: never read as a text colour, so it can carry the
     panel charcoal itself. */
  --cpgh-ink: var(--cpg-panel-ink, #16181b);
  --cpgh-on-ink: #FFFFFF;
  --cpgh-on-ink-muted: var(--cpg-text-on-ink-muted);
  --cpgh-media: var(--cpg-surface-media);

  /* ---- Inner-page rhythm -------------------------------------------------- */
  --cpgp-rail: 17.5rem;          /* Discover / Availability filter rail       */
  --cpgp-subnav-h: 3.5rem;       /* sticky project sub-navigation             */

  /* The band a sticky element inside the page must clear. On most inner
     pages that is the site header alone. A project page adds the sticky
     project sub-navigation on top of it, and .cpgp-project raises this to
     match — otherwise the sticky inventory-table head parks underneath the
     sub-nav and takes the first row of the table with it. */
  --cpgp-sticky-top: var(--cpg-header-height);

  display: block;
  background: var(--cpg-bone);
}

/* The homepage owns its own spacing; so do these pages. */
body:has(.cpgp) main { padding: 0; }

/* ==========================================================================
   HEADER — the homepage's PAST-THE-HERO state, made permanent
   --------------------------------------------------------------------------
   Inner pages have no full-bleed film behind the bar, so the transparent
   treatment would have nothing to sit on. What they take instead is exactly
   what the homepage settles into once the hero scrolls away: a bone bar, a
   white pill nav and an ink primary action. Same markup, same drawer, same
   locale switcher — this only restyles them.
   ========================================================================== */
@media (min-width: 64rem) {
  body:has(.cpgp) .cpg-header__inner { min-height: 5.25rem; }

  body:has(.cpgp) .cpg-header__nav {
    padding: 0.3125rem;
    background: #FFFFFF;
    border-radius: var(--cpg-radius-pill);
    box-shadow: 0 10px 30px -22px rgba(13, 13, 12, 0.5);
  }
  body:has(.cpgp) .cpg-nav__list { gap: 0.125rem; }
  body:has(.cpgp) .cpg-nav__link {
    min-height: 2.375rem;
    padding-inline: 0.9375rem;
    border-bottom: 0;
    border-radius: var(--cpg-radius-pill);
    color: var(--cpg-ink);
    font-weight: 500;
  }
  body:has(.cpgp) .cpg-nav__link:hover { background: rgba(13, 13, 12, 0.07); }
  body:has(.cpgp) .cpg-nav__link[aria-current="page"] {
    background: var(--cpg-panel-ink);
    color: var(--cpg-text-on-ink);
  }

  body:has(.cpgp) .cpg-crosslink,
  body:has(.cpgp) .cpg-header .cpg-btn--ink { border-radius: var(--cpg-radius-pill); }
}

@media (max-width: 63.999rem) {
  body:has(.cpgp) .cpg-menu-toggle,
  body:has(.cpgp) .cpg-header .cpg-btn { border-radius: var(--cpg-radius-pill); }
}

/* Footer: the same softened top corners the homepage uses. */
body:has(.cpgp) .cpg-footer {
  border-start-start-radius: clamp(1.5rem, 3vw, 3rem);
  border-start-end-radius: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3vw, 3rem);
}
body:has(.cpgp) .cpg-footer .cpg-wordmark__mark { color: #FFFFFF; }

/* ==========================================================================
   SECTION RHYTHM
   ========================================================================== */
.cpgp-section { padding-block: var(--cpgh-section-y); }
.cpgp-section--tight { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); }
.cpgp-section--flush-top { padding-block-start: 0; }
.cpgp-section--sunken { background: var(--cpg-paper); }

.cpgp-stack { display: grid; gap: var(--cpg-space-sm); align-content: start; }
.cpgp-stack--md { gap: var(--cpg-space-md); }
.cpgp-list-reset { list-style: none; margin: 0; padding: 0; }
.cpgp-rule { border: 0; border-top: 1px solid var(--cpg-rule); margin: 0; }

/* ==========================================================================
   COMPACT TEXT HERO — search, tables and forms
   --------------------------------------------------------------------------
   The PDF gives these screens a title row and goes straight to work. This
   keeps that economy while carrying the homepage's voice: copper eyebrow,
   large light display title, quiet support column on the right.
   ========================================================================== */
.cpgp-head {
  display: grid;
  gap: 1rem;
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
.cpgp-head__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: var(--cpgh-hero-size);
  line-height: 1.05;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.cpgp-head__support { display: grid; gap: 1rem; align-content: start; }
.cpgp-head__lead {
  margin: 0;
  font-size: var(--cpgh-lead-size);
  line-height: 1.55;
  color: var(--cpg-text-muted);
  max-width: 42ch;
}
@media (min-width: 64rem) {
  .cpgp-head {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .cpgp-head .cpgh-eyebrow { padding-top: 0.75rem; }
}

/* Breadcrumbs as a quiet pill row. */
.cpgp-crumbs { padding-block-start: clamp(1.25rem, 3vw, 2.25rem); }
.cpgp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-muted);
}
.cpgp-crumbs li { display: flex; align-items: center; gap: 0.5rem; }
/* WCAG 2.2 AA target size: 24px minimum. A breadcrumb link would otherwise be
   19px tall at this type size. */
.cpgp-crumbs a,
.cpgp-crumbs [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}
.cpgp-crumbs li + li::before { content: "/"; color: var(--cpg-rule-strong); }
.cpgp-crumbs a { color: inherit; text-decoration: none; }
.cpgp-crumbs a:hover { color: var(--cpg-ink); text-decoration: underline; text-underline-offset: 0.16em; }
.cpgp-crumbs [aria-current="page"] { color: var(--cpg-ink); font-weight: 500; }
.cpgp-crumbs--on-ink ol { color: rgba(255, 255, 255, 0.7); }
.cpgp-crumbs--on-ink a:hover,
.cpgp-crumbs--on-ink [aria-current="page"] { color: #FFFFFF; }

/* ==========================================================================
   EDITORIAL HERO — project pages
   --------------------------------------------------------------------------
   The homepage hero at inner-page scale: real CPG photography inside a large
   rounded ink panel, the headline spread wide, verified meta underneath.
   ========================================================================== */
.cpgp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
  gap: 1rem;
  min-height: clamp(22rem, 52vh, 34rem);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  margin-top: clamp(1rem, 2.5vw, 2rem);
  border-radius: var(--cpgh-radius-hero);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-hero__media { position: absolute; inset: 0; z-index: -2; }
.cpgp-hero__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.cpgp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Weighted so the photograph stays open through the middle while the two
     text zones — breadcrumbs at the top, title block at the bottom — always
     sit on enough darkness to clear AA, whatever the frame underneath. */
  background:
    linear-gradient(180deg,
      rgba(13, 13, 12, 0.62) 0%,
      rgba(13, 13, 12, 0.20) 34%,
      rgba(13, 13, 12, 0.66) 70%,
      rgba(13, 13, 12, 0.88) 100%);
}
.cpgp-hero__body { display: grid; gap: 0.75rem; align-content: end; }
.cpgp-hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.cpgp-hero__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: var(--cpgh-hero-size);
  line-height: 1.04;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}
.cpgp-hero__meta {
  margin: 0;
  font-size: var(--cpgh-lead-size);
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
}
.cpgp-hero__note { margin: 0; }
.cpgp-hero .cpgp-crumbs { padding-block-start: 0; }

/* ==========================================================================
   STICKY PROJECT SUB-NAVIGATION
   --------------------------------------------------------------------------
   Shared across every project page, exactly as the deck specifies. Pill
   controls, one primary Register Interest action, and never a second copy of
   that action stacked in the header.
   ========================================================================== */
/* A page carrying the sticky project sub-nav has two stacked bands, so every
   other sticky element on it must clear both. */
.cpgp-project { --cpgp-sticky-top: calc(var(--cpg-header-height) + var(--cpgp-subnav-h)); }

body:has(.cpgp) .cpg-subnav {
  position: sticky;
  top: var(--cpg-header-height-sm);
  z-index: var(--cpg-z-sticky);
  background: rgba(236, 233, 226, 0.92);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--cpg-rule);
}
body:has(.cpgp) .cpg-subnav__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  min-height: var(--cpgp-subnav-h);
}
body:has(.cpgp) .cpg-subnav__list {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  margin: 0;
  padding: 0.375rem 0;
  list-style: none;
}
/* Where the row scrolls, the last pill fades rather than being cut dead — an
   affordance, not decoration. The mask is purely visual: every link stays in
   the tab order and reachable. */
@media (max-width: 63.999rem) {
  body:has(.cpgp) .cpg-subnav__list {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    padding-inline-end: 2rem;
  }
}
body:has(.cpgp) .cpg-subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding-inline: 0.875rem;
  border: 0;
  border-radius: var(--cpg-radius-pill);
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--cpg-text-subtle);
  text-decoration: none;
}
body:has(.cpgp) .cpg-subnav__link:hover { background: rgba(13, 13, 12, 0.07); color: var(--cpg-ink); }
body:has(.cpgp) .cpg-subnav__link[aria-current="true"] {
  background: var(--cpg-panel-ink);
  color: var(--cpg-text-on-ink);
}
.cpgp-subnav__cta { flex: none; min-height: 2.5rem; }
@media (min-width: 64rem) {
  body:has(.cpgp) .cpg-subnav { top: var(--cpg-header-height); }
}
/* Anchors land below the two stacked sticky bars, not underneath them. */
.cpgp [id]:target,
.cpgp-anchor { scroll-margin-top: calc(var(--cpg-header-height) + var(--cpgp-subnav-h) + 1rem); }

/* ==========================================================================
   PILL CONTROLS — filters, chips and quiet buttons
   --------------------------------------------------------------------------
   The shared chip and button components restyled to the homepage's pill
   register. Markup, focus behaviour and 44px target sizing are unchanged.
   ========================================================================== */
body:has(.cpgp) .cpg-chips { gap: 0.5rem; }
body:has(.cpgp) .cpg-chip {
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  border-radius: var(--cpg-radius-pill);
  border-color: var(--cpg-rule-strong);
  background: #FFFFFF;
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body:has(.cpgp) .cpg-chip:hover { border-color: var(--cpg-ink); background: var(--cpg-paper); }
body:has(.cpgp) .cpg-chip[aria-current="true"] {
  background: var(--cpg-panel-ink);
  border-color: var(--cpg-panel-ink);
  color: var(--cpg-text-on-ink);
}
/* A second chip row (city after source) sits under the first, not beside it. */
body:has(.cpgp) .cpg-chips + .cpg-chips { margin-top: 0.5rem; }

body:has(.cpgp) .cpg-btn { border-radius: var(--cpg-radius-pill); }
body:has(.cpgp) .cpg-input,
body:has(.cpgp) .cpg-select,
body:has(.cpgp) .cpg-textarea {
  min-height: 2.875rem;
  border-radius: 1.25rem;
  border-color: var(--cpg-rule-strong);
  background: #FFFFFF;
}
body:has(.cpgp) .cpg-textarea { border-radius: 1.25rem; }
body:has(.cpgp) .cpg-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  color: var(--cpg-text-subtle);
}

/* Standing illustrative-data notice: same copper-tinted band as the homepage. */
body:has(.cpgp) .cpg-sample-notice {
  border-radius: 0 var(--cpgh-radius-media) var(--cpgh-radius-media) 0;
  border-inline-start: 3px solid var(--cpg-copper);
  background: var(--cpg-copper-tint);
  color: var(--cpg-copper-ink);
  padding: 0.875rem 1.125rem;
  font-size: var(--cpg-text-sm);
}

body:has(.cpgp) .cpg-empty {
  border-radius: var(--cpgh-radius-card);
  border: 1px dashed var(--cpg-rule-strong);
  background: #FFFFFF;
}
body:has(.cpgp) .cpg-alert { border-radius: var(--cpgh-radius-media); }
body:has(.cpgp) .cpg-pagination .page-link { border-radius: var(--cpg-radius-pill); }

/* Compact control row — the pill register applied to the shared form controls. */
.cpgp-controls {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: clamp(0.875rem, 1.6vw, 1.25rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-controls__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
@media (min-width: 48rem) {
  .cpgp-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    column-gap: 1rem;
  }
}

/* ==========================================================================
   RESULT META ROW — count on the left, sort/actions on the right
   ========================================================================== */
.cpgp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.875rem;
  border-block: 1px solid var(--cpg-rule);
  margin-bottom: var(--cpgh-gap);
}
.cpgp-meta__count { margin: 0; font-size: var(--cpg-text-sm); color: var(--cpg-text-subtle); }
.cpgp-meta__count b { font-weight: 700; color: var(--cpg-ink); }
.cpgp-meta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* ==========================================================================
   PROJECT SLATE — screen 03
   --------------------------------------------------------------------------
   "Curation over volume: small slate, large cards — never an MLS-style grid."
   One card template serves own and (Stage 2) partner projects; only the badge
   and the source_type field change. The rhythm is deliberately asymmetric on
   desktop — a wide lead card, then a pair — and a single coherent stack on
   mobile.
   ========================================================================== */
.cpgp-slate { display: grid; gap: var(--cpgh-gap); }
/* Cards in the same row match height whatever their content. */
.cpgp-slate > li { display: grid; }
.cpgp-slate .cpgp-card { height: 100%; }
@media (min-width: 64rem) {
  .cpgp-slate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgp-slate > .cpgp-slate__lead { grid-column: 1 / -1; }
  .cpgp-slate--even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cpgp-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
  transition: border-color var(--cpg-duration-fast) var(--cpg-ease),
              transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgp-card:hover { border-color: var(--cpg-border-control); transform: translateY(-2px); }
.cpgp-card:focus-within { border-color: var(--cpg-ink); }
.cpgp-card__media { position: relative; }
.cpgp-card__media .cpgh-media { --cpgh-ratio: 16 / 10; border-radius: 0; }
.cpgp-card__badges {
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline-start: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  z-index: 1;
}
.cpgp-card__badges .cpgh-badge { background: rgba(13, 13, 12, 0.72); backdrop-filter: blur(6px); }
.cpgp-card__badges .cpgh-badge--status { background: var(--cpg-copper); }
.cpgp-card__body {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.125rem, 2vw, 1.75rem);
}
.cpgp-card__top { display: grid; gap: 0.5rem; align-content: start; }
.cpgp-card__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.cpgp-card__title a { color: inherit; text-decoration: none; }
/* The whole card is the link target; the visible text keeps the accessible
   name, so nothing needs a duplicate "read more" control. */
.cpgp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cpgp-card__title a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.cpgp-card__meta { margin: 0; font-size: var(--cpg-text-sm); color: var(--cpg-text-muted); }
.cpgp-card__excerpt {
  margin: 0.25rem 0 0;
  font-size: var(--cpg-text-md);
  line-height: 1.6;
  color: var(--cpg-text-subtle);
  max-width: 42ch;
}
.cpgp-card__note { margin: 0; }
.cpgp-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--cpg-rule);
}
.cpgp-card__stats { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; }
.cpgp-card__stat { display: grid; gap: 0.125rem; }
.cpgp-card__stat b { font-size: var(--cpg-text-md); font-weight: 500; }
.cpgp-card__stat span { font-size: var(--cpg-text-2xs); color: var(--cpg-text-muted); }
.cpgp-card__cue {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--cpg-radius-pill);
  background: var(--cpg-panel-ink);
  color: #FFFFFF;
  transition: transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgp-card__cue svg { width: 1rem; height: 1rem; }
.cpgp-card:hover .cpgp-card__cue { transform: translateX(3px); }
/* The lead card's cue is the same pill the homepage uses. It is decorative:
   the card title already carries the link and its accessible name. */
.cpgp-card__pill { pointer-events: none; }
.cpgp-card:hover .cpgp-card__pill { background: var(--cpg-copper); }

@media (min-width: 48rem) {
  .cpgp-card--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
  /* Two content rows and a spacer, not three loose rows: the title group sits
     at the top and the fact row at the bottom, so the lead card gains presence
     without opening a hole in the middle of it. */
  .cpgp-card--wide .cpgp-card__body {
    grid-template-rows: auto 1fr;
    align-content: stretch;
    padding: clamp(1.5rem, 3vw, 2.75rem);
  }
  .cpgp-card--wide .cpgp-card__foot { align-self: end; }
  .cpgp-card--wide .cpgp-card__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
  /* The photograph fills whatever height the editorial column earns, instead
     of its own intrinsic ratio dictating the row and leaving a hole beside the
     copy. It is taken out of flow so only its floor contributes to the row. */
  .cpgp-card--wide .cpgp-card__media { min-height: 17rem; }
  .cpgp-card--wide .cpgp-card__media .cpgh-media {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Pending collateral — an honest empty state, never a striped placeholder
   pretending to be a photograph. */
.cpgp-pending {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.375rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  border-radius: var(--cpgh-radius-media);
  background: var(--cpg-shell);
  border: 1px dashed var(--cpg-rule-strong);
  color: var(--cpg-text-muted);
}
.cpgp-pending__label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-subtle);
}
.cpgp-pending__text { margin: 0; font-size: var(--cpg-text-xs); max-width: 34ch; }
.cpgp-card__media .cpgp-pending {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--cpg-rule);
  aspect-ratio: 16 / 10;
}
.cpgp-unit__media .cpgp-pending { min-height: 11rem; }

/* ==========================================================================
   DISCOVER — screen 02
   --------------------------------------------------------------------------
   Filter rail on the left, footprint panel and results on the right, matching
   the deck's three-column split without pretending to geographic precision.
   ========================================================================== */
/* --- Unit floors: the drawings and the room schedule ----------------------
   One block per floor — its 3D cutaway or 2D plan and the rooms it holds.
   Both drawings are in the document; the toggle swaps which one shows.
   -------------------------------------------------------------------------- */

.cpgu__floors { display: grid; }
.cpgu__floor { display: none; }
.cpgu__floor.is-current { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

/* Without the script every floor stands in turn, captioned by its own list. */
.cpgu__views:not(.is-live) .cpgu__floor { display: grid; gap: 1rem; }
.cpgu__views:not(.is-live) .cpgu__floor + .cpgu__floor { margin-top: 2rem; }

@media (min-width: 48rem) {
  .cpgu__floor.is-current { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
}

.cpgu__floor-plans { position: relative; min-width: 0; }

/* Named through the parent: a bare `.cpgu__plan` loses to the page's own
   `img { display: block }`, which is why both drawings were showing at once. */
.cpgu__floor-plans .cpgu__plan {
  display: none;
  width: 100%;
  height: auto;
  max-height: 30rem;
  margin-inline: auto;
  object-fit: contain;
}

.cpgu__floor-plans .cpgu__plan.is-current { display: block; }
.cpgu__views:not(.is-live) .cpgu__floor-plans .cpgu__plan--2d { display: block; }

.cpgu__rooms {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three fixed columns — icon, name, area — so a room with no icon still
   keeps its name and its figure in line with the rows around it. */
.cpgu__room {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--cpg-rule);
}

.cpgu__room:first-child { border-top: 1px solid var(--cpg-rule); }
.cpgu__room-icon { grid-column: 1; width: 1.75rem; height: 1.75rem; object-fit: contain; }
.cpgu__room-name { grid-column: 2; font-size: var(--cpg-text-sm); color: var(--cpg-text-muted); }
.cpgu__room-area { grid-column: 3; font-size: var(--cpg-text-sm); font-weight: 600; text-align: end; }

/* --- The floor and plan-mode controls ------------------------------------- */

.cpgu__floor-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--cpg-rule);
}

.cpgu__floor-tabs,
.cpgu__plan-toggle { display: flex; gap: 1px; }

.cpgu__floor-tab,
.cpgu__plan-mode {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: var(--cpg-white, #fff);
  color: var(--cpg-text-muted);
  cursor: pointer;
  font-size: var(--cpg-text-sm);
  transition: background-color 0.3s, color 0.3s;
}

.cpgu__floor-tab.is-current,
.cpgu__plan-mode.is-current { background: var(--cpg-ink); color: var(--cpg-white, #fff); }

.cpgu__floor-tab:focus-visible,
.cpgu__plan-mode:focus-visible { outline: 2px solid var(--cpg-focus-ring); outline-offset: -3px; }

.cpgu__plan-toggle { border: 1px solid var(--cpg-rule); background: var(--cpg-rule); }

@media (prefers-reduced-motion: reduce) {
  .cpgu__floor-tab,
  .cpgu__plan-mode { transition: none; }
}

/* --- Step to the next home ------------------------------------------------
   The project page's previous / all / next rail, repeated at the foot of the
   unit page. Written here rather than borrowed from the project stylesheet,
   which the unit page does not load.
   -------------------------------------------------------------------------- */

.cpgu-pfnav { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem); }

.cpgu-pfnav .cpgx-pfnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--cpg-rule);
}

.cpgu-pfnav .cpgx-pfnav__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-basis: 33.3333%;
  margin-block: 1.25rem;
  color: var(--cpg-ink);
  line-height: 1.5;
  text-decoration: none;
}

.cpgu-pfnav .cpgx-pfnav__link--next { justify-content: flex-end; text-align: end; }
.cpgu-pfnav .cpgx-pfnav__link--next:only-child { margin-inline-start: auto; }

.cpgu-pfnav .cpgx-pfnav__link svg {
  width: 12px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.65s var(--cpg-ease, ease);
}

.cpgu-pfnav .cpgx-pfnav__link--prev:hover svg { transform: translateX(-7px) scale(1.25, 0.8); }
.cpgu-pfnav .cpgx-pfnav__link--next:hover svg { transform: translateX(7px) scale(1.25, 0.8); }

.cpgu-pfnav .cpgx-pfnav__text { display: flex; flex-direction: column; }
.cpgu-pfnav .cpgx-pfnav__subtitle { color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpgu-pfnav .cpgx-pfnav__title { font-size: var(--cpg-text-lg); }

.cpgu-pfnav .cpgx-pfnav__all {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 4px;
  flex: none;
}

.cpgu-pfnav .cpgx-pfnav__all span {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--cpg-ink);
  transition: opacity 0.3s;
}

.cpgu-pfnav .cpgx-pfnav__all:hover span { opacity: 0.4; }

@media (max-width: 47.999rem) {
  .cpgu-pfnav .cpgx-pfnav__title { font-size: var(--cpg-text-sm); }
  .cpgu-pfnav .cpgx-pfnav__subtitle { font-size: var(--cpg-text-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .cpgu-pfnav .cpgx-pfnav__link svg,
  .cpgu-pfnav .cpgx-pfnav__all span { transition: none; }
  .cpgu-pfnav .cpgx-pfnav__link:hover svg { transform: none; }
}

/* --- Range controls -------------------------------------------------------
   Two handles over one track, the figures read back underneath in their own
   chips. The number inputs are the real controls — the handles write into
   them — so the filter still submits with the script off.
   -------------------------------------------------------------------------- */

.cpgd .cpgd-filters .cpgd-range { display: grid; gap: 0.5rem; }

.cpgd-range__track {
  position: relative;
  display: block;
  height: 1.25rem;
  margin-block: 0.125rem;
}

.cpgd-range__track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--cpg-rule);
  transform: translateY(-50%);
}

.cpgd-range__fill {
  position: absolute;
  inset-block-start: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--cpg-ink);
  transform: translateY(-50%);
}

/* Both sliders sit on the same line; only their thumbs take the pointer. */
.cpgd-range__handle {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.cpgd-range__handle::-webkit-slider-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--cpg-ink);
  border-radius: 50%;
  background: var(--cpg-white, #fff);
  cursor: grab;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.cpgd-range__handle::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--cpg-ink);
  border-radius: 50%;
  background: var(--cpg-white, #fff);
  cursor: grab;
  pointer-events: auto;
}

.cpgd-range__handle:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cpg-focus-ring); outline-offset: 2px; }
.cpgd-range__handle:focus-visible::-moz-range-thumb { outline: 2px solid var(--cpg-focus-ring); outline-offset: 2px; }

.cpgd-range__values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cpgd-range__value {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.375rem 0.625rem;
  background: var(--cpg-surface-media, #f4f2ee);
}

.cpgd .cpgd-filters .cpgd-range__value .cpg-input {
  min-height: 1.25rem;
  font-size: var(--cpg-text-sm);
  text-align: center;
}

.cpgd-range__value:last-child .cpg-input { text-align: end; }
.cpgd-range__value:first-child .cpg-input { text-align: start; }

/* The reset is an icon beside Apply, not a second full-width button. */
.cpgd .cpgd-filters .cpgp-filters-rail__actions .cpgd-reset {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-height: 3rem;
  border: 0;
  background: var(--cpg-white, #fff);
  color: var(--cpg-ink);
  transition: background-color 0.3s, color 0.3s;
}

.cpgd-reset svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cpgd-reset:hover { background: var(--cpg-ink); color: var(--cpg-white, #fff); }
.cpgd-reset:focus-visible { outline: 2px solid var(--cpg-focus-ring); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .cpgd-reset { transition: none; }
}

/* --- Page head ------------------------------------------------------------
   The supplied reference's section head: the name in caps at display size
   with its count raised beside it, a ringed dot, the standfirst held in the
   right half, the section index above a hairline that closes the row.
   -------------------------------------------------------------------------- */

.cpgt { padding-block-end: clamp(1.25rem, 2.5vw, 2rem); }

.cpgt__head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-block: clamp(1.25rem, 3vw, 2.5rem) 0;
}

/* A short rule, then the word: the homepage's section eyebrow, on every
   inner head and on the project masthead. */
.cpgt__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cpgt__eyebrow::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}

/* Large and light, not shouted: sentence case in the display face. */
.cpgt__title {
  max-width: 14ch;
  margin: 0;
  color: var(--cpg-ink);
  font-family: var(--cpgh-display);
  font-size: clamp(2.5rem, 1.25rem + 4.6vw, 5.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.cpgt__count {
  position: relative;
  top: -0.6em;
  margin-inline-start: 0.25em;
  font-size: 0.22em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: baseline;
}

.cpgt__support {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  max-width: 38em;
}

.cpgt__lead {
  margin: 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-sm);
  line-height: 1.6;
}

.cpgt__action {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--cpg-ink);
  font-size: var(--cpg-text-xs);
  font-weight: 600;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

@media (max-width: 63.999rem) {
  .cpgt__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cpgt__dot { display: none; }
  .cpgt__support { grid-column: 2; }
  .cpgt__index { grid-column: 2; }
}

@media (max-width: 47.999rem) {
  .cpgt__row { grid-template-columns: minmax(0, 1fr); }
  .cpgt__support,
  .cpgt__index { grid-column: 1; }
  .cpgt__support { margin-inline-start: 0; }
  .cpgt__index { justify-self: start; }
}

/* --- Discover head --------------------------------------------------------
   The assistant leads; the title is a label under it, not a display line.
   -------------------------------------------------------------------------- */

.cpgd-head { padding-block-end: clamp(1rem, 2vw, 1.5rem); }

.cpgd-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block-start: clamp(0.5rem, 1.2vw, 1rem);
}

/* --- The assistant, docked ------------------------------------------------
   A conversation belongs at the corner of the screen, not in a column of the
   layout: closed it is one marker, open it is a panel over the page, and it
   folds away again when it is done. <details> does all of that natively, so
   the dock opens and closes with no script at all and the field inside it
   stays the same working GET search. */

.cpgd-dock {
  position: fixed;
  inset-block-end: clamp(1rem, 2vw, 1.5rem);
  inset-inline-end: clamp(1rem, 2vw, 1.5rem);
  z-index: var(--cpg-z-drawer, 300);
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: calc(100vw - 2rem);
  background: var(--cpg-white, #fff);
  color: var(--cpg-ink);
  box-shadow: 0 1.25rem 3rem rgba(17, 17, 17, 0.18);
}

.cpgd-dock[open] {
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100dvh - var(--cpg-header-height, 4.5rem) - 3rem));
  border: 1px solid var(--cpg-ink);
}

/* The summary is the whole control: the marker when the dock is closed, the
   panel's header — and its close button — when it is open. */
.cpgd-dock__bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: var(--cpg-ink);
  color: var(--cpg-white, #fff);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.cpgd-dock__bar::-webkit-details-marker { display: none; }
.cpgd-dock__bar::marker { content: ""; }

.cpgd-dock__bar:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 2px;
}

.cpgd-dock[open] .cpgd-dock__bar {
  flex: 0 0 auto;
  background: var(--cpg-white, #fff);
  color: var(--cpg-ink);
  border-block-end: 1px solid var(--cpg-rule);
}

.cpgd-dock__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(255, 255, 255, 0.14);
}

.cpgd-dock[open] .cpgd-dock__mark { background: var(--cpg-surface-media, #e9e7e2); }

.cpgd-dock__mark svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.cpgd-dock__id { display: grid; gap: 0.125rem; min-width: 0; }

.cpgd-dock__title {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

/* Which page the answers come from — the reference's "on this page" line. */
.cpgd-dock__where {
  overflow: hidden;
  color: currentColor;
  font-size: var(--cpg-text-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.65;
}

.cpgd-dock__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: auto;
}

.cpgd-dock__close svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Closed, the dock is a single marker: no sub-line, no close control. */
.cpgd-dock:not([open]) .cpgd-dock__where,
.cpgd-dock:not([open]) .cpgd-dock__close { display: none; }

.cpgd-dock__panel {
  display: grid;
  gap: 0.875rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(0.875rem, 1.6vw, 1.125rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cpgd-dock__lead {
  margin: 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-xs);
  line-height: 1.6;
}

/* Fewer lines inside a small panel: the field keeps one rule under it, and
   the send control is an arrow rather than a boxed button. */
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field {
  border: 0;
  border-bottom: 1px solid var(--cpg-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field:focus-within {
  border-bottom-color: var(--cpg-ink);
  box-shadow: none;
}

body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field__btn {
  border: 0;
  background: none;
}

@media (max-width: 30rem) {
  .cpgd-dock {
    inset-inline: 0.75rem;
    inset-block-end: 0.75rem;
    max-width: none;
  }
  .cpgd-dock:not([open]) { inset-inline-start: auto; }
  .cpgd-dock[open] { width: auto; }
}

body.cpg-body--properties:has(.cpgp) .cpgd-main .cpgp-meta {
  border-block: 0;
  padding-block: 0 0.5rem;
}

.cpgd-head__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cpgd-head__lead {
  max-width: 34em;
  margin: 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-sm);
}

/* The standing disclosure: present, but a line of meta rather than a panel.
   Named past both the copper band above and the editorial sheet's
   `background: … !important`, which is why it carries the body class, the
   :has() and an !important of its own. */
body.cpg-body--properties:has(.cpgp) .cpg-sample-notice,
body.cpg-body--properties:has(.cpgp) .cpg-sample-notice.cpg-alert {
  display: block;
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  line-height: 1.6;
}

body.cpg-body--properties:has(.cpgp) .cpg-sample-notice strong {
  display: inline;
  color: var(--cpg-ink);
  font-size: var(--cpg-text-2xs);
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

body.cpg-body--properties:has(.cpgp) .cpg-sample-notice strong::after { content: " — "; }

/* No colour change on approach: the card lifts, the rule stays put. */
.cpgd-card:hover { border-color: var(--cpg-rule); }

/* --- The unit schematic ---------------------------------------------------
   Drawn from the record, in the platform's own line. Deliberately plain: one
   weight for the shell, one for the rooms, no fittings and no dimensions, so
   it can never be mistaken for an architectural drawing.
   -------------------------------------------------------------------------- */

.cpgs { display: grid; gap: 0.625rem; }

.cpgs__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--cpg-surface-media, #f4f2ee);
}

.cpgs__shell {
  fill: none;
  stroke: var(--cpg-ink);
  stroke-width: 7;
}

.cpgs__zone,
.cpgs__room {
  fill: rgba(255, 255, 255, 0.55);
  stroke: var(--cpg-ink);
  stroke-width: 2;
}

.cpgs__zone { fill: none; stroke-dasharray: 6 5; stroke-width: 1.5; }
.cpgs__room--living { fill: rgba(255, 255, 255, 0.75); }

.cpgs__fitting {
  fill: none;
  stroke: var(--cpg-ink);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.cpgs__note {
  margin: 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

/* On a result tile the diagram fills the frame and the caption is left to the
   standing notice above the grid. */
.cpgd-card__media--plan {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: var(--cpg-surface-media, #f4f2ee);
}

.cpgd-card__media--plan .cpgs,
.cpgd-card__media--plan img {
  width: 100%;
  max-height: 100%;
}

/* A drawing is shown whole, never cropped: named past the photograph rule
   above, which crops to fill. */
.cpgd-card .cpgd-card__media--plan img {
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.cpgd-card__media--plan { padding: 0.5rem; }

/* Sized by width and left to keep its own ratio: stretched to the tile's
   height the shell's outer wall was being cut off top and bottom. */
.cpgd-card__media--plan .cpgs__svg {
  height: auto;
  max-height: 100%;
  background: none;
}
.cpgd-card:hover .cpgd-card__media--plan img { transform: none; }

/* ==========================================================================
   UNIT — the drawing and the rail
   The supplied reference: the plan held in a wide light panel on the left
   with a Layout / Facade switch beneath it, and a narrow rail on the right
   carrying what the home is, its status, its figures and one action.
   ========================================================================== */

.cpgp-unit.cpgu {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .cpgp-unit.cpgu { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.cpgu__views { min-width: 0; }

.cpgu__stage {
  position: relative;
  display: grid;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--cpg-rule);
  background: var(--cpg-surface-media, #f4f2ee);
}

.cpgu__panel { min-width: 0; }

.cpgu__plan {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34rem;
  margin-inline: auto;
  object-fit: contain;
}

.cpgu__facade { position: relative; }

.cpgu__shot { display: none; margin: 0; }
.cpgu__shot.is-current { display: block; }

.cpgu__facade .cpgh-media,
.cpgu__facade picture,
.cpgu__facade img { display: block; width: 100%; height: 100%; }

.cpgu__facade img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

/* Without the script every photograph simply stands in the list. */
.cpgu__views:not(.is-live) .cpgu__shot { display: block; }
.cpgu__views:not(.is-live) .cpgu__shot + .cpgu__shot { margin-top: 0.5rem; }

.cpgu__facade-nav {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  display: flex;
  gap: 0.375rem;
}

.cpgu__facade-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cpg-white, #fff);
  color: var(--cpg-ink);
  cursor: pointer;
}

.cpgu__facade-arrow svg { width: 0.75rem; height: 1.25rem; }
.cpgu__facade-arrow:hover { background: var(--cpg-ink); color: var(--cpg-white, #fff); }

.cpgu__facade-note {
  margin: 0.625rem 0 0;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

.cpgu__tabs {
  display: flex;
  justify-content: center;
  gap: 1px;
  margin-top: 1px;
  padding: 1px;
  border: 1px solid var(--cpg-rule);
  background: var(--cpg-rule);
}

.cpgu__tab {
  flex: 1 1 auto;
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--cpg-white, #fff);
  color: var(--cpg-text-muted);
  cursor: pointer;
  font-size: var(--cpg-text-sm);
  transition: background-color 0.3s, color 0.3s;
}

.cpgu__tab.is-current { background: var(--cpg-ink); color: var(--cpg-white, #fff); }
.cpgu__tab:focus-visible { outline: 2px solid var(--cpg-focus-ring); outline-offset: -3px; }

/* --- The rail ------------------------------------------------------------- */

.cpgu__rail { display: grid; gap: 0.875rem; align-content: start; }

.cpgu__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cpgu__line { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }

.cpgu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.25rem;
  background: var(--cpg-panel-ink);
  color: var(--cpg-text-on-ink, #fff);
  font-size: var(--cpg-text-xs);
  font-weight: 600;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
}

.cpgu__cta:hover { opacity: 0.85; }

.cpgu__status { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

.cpgu__facts { display: grid; gap: 0; margin: 0.5rem 0 0; }

.cpgu__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--cpg-rule);
}

.cpgu__fact:last-child { border-bottom: 1px solid var(--cpg-rule); }
.cpgu__fact dt { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpgu__fact dd { margin: 0; font-weight: 600; }

/* The room schedule, in the rail. Each floor's list is a block; the script
   shows the current floor's and the tabs switch them. Without it all of them
   stand, each under its floor's name. */
.cpgu__schedule { display: grid; gap: 0.75rem; margin-top: 0.25rem; }
.cpgu__schedule-label {
  margin: 0 0 0.375rem;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}
.cpgu__schedule.is-live .cpgu__schedule-floor { display: none; }
.cpgu__schedule.is-live .cpgu__schedule-floor.is-current { display: block; }
.cpgu__schedule.is-live .cpgu__schedule-label { display: none; }

.cpgu__fact--price dd {
  font-family: var(--cpgh-display);
  font-size: var(--cpg-text-lg);
  font-weight: 500;
}

.cpgu__actions { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

.cpgu__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cpg-ink);
  cursor: pointer;
  font-size: var(--cpg-text-sm);
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cpgu__link:hover { color: var(--cpg-text-muted); }

.cpgu__project { margin: 0.5rem 0 0; font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .cpgu__tab,
  .cpgu__cta { transition: none; }
}

/* ==========================================================================
   DISCOVER — search bar and result cards
   The filter set moves from a tall boxed rail on the left to a square bar
   across the top, which is what the client's reference does and what frees
   the results to use the whole container instead of two thirds of it.
   Square corners throughout: no radius on any control in this bar.
   ========================================================================== */

/* Two classes, so this beats the two-column rule further down the file
   whatever the order. The search column sits on the left with the assistant
   at its head; the results own the rest. */
.cpgp-discover.cpgd {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .cpgp-discover.cpgd { grid-template-columns: 17rem minmax(0, 1fr); }
  .cpgd .cpgd-side { position: sticky; top: calc(var(--cpg-header-height) + 1rem); }
}

/* The conversation moved to the corner dock on 2026-09-09, so the results
   keep the full width beside the filters. */

.cpgd .cpgd-side { display: grid; gap: 1px; min-width: 0; }
.cpgd .cpgd-side__ai { min-width: 0; }
.cpgd .cpgd-main { min-width: 0; }

/* The results sit on white with real air between the cards, so the grid reads
   as a set of cards rather than one ruled table. */
.cpgd .cpgd-main { background: var(--cpg-white, #fff); }
/* The editorial sheet rules the results into one continuous table
   (`gap: 0` plus a top border) at the same specificity as anything scoped to
   .cpgd alone, and it lands later. Named with the body class, this wins and
   the cards get real air between them on white. */
.cpg-body--properties .cpgd .cpgp-results {
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  border-top: 0;
}

.cpgd .cpgd-filters {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 1px solid var(--cpg-ink);
  border-radius: 0;
  background: var(--cpg-ink);
}

.cpgd .cpgd-filters .cpgp-filters-rail__title {
  display: none;
}

.cpgd .cpgd-filters .cpgp-field {
  gap: 0;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  background: var(--cpg-white, #fff);
  grid-column: span 1;
}

.cpgd .cpgd-filters .cpgp-filters-rail__search { grid-column: span 1; }

.cpgd .cpgd-filters .cpgp-field--pair {
  grid-column: span 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
}

/* The two price fields are already inside a two-column cell: without this
   they inherit the bar's own `span 3` and each takes a row of its own. */
.cpgd .cpgd-filters .cpgp-field--pair .cpgp-field {
  grid-column: auto;
  padding: 0;
  background: none;
}

/* Every cell is the same height, so the bar reads as one row of squares
   rather than a ragged grid. */
.cpgd .cpgd-filters .cpgp-field { align-content: start; }

.cpgd .cpgd-filters .cpg-label {
  display: block;
  margin: 0 0 0.125rem;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-2xs);
  font-weight: 600;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
}

/* The controls carry no chrome of their own — the bar's own grid draws the
   lines, so every cell reads as one square field. */
.cpgd .cpgd-filters .cpg-input,
.cpgd .cpgd-filters .cpg-select {
  width: 100%;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--cpg-ink);
  font-size: var(--cpg-text-sm);
}

.cpgd .cpgd-filters .cpg-input:focus-visible,
.cpgd .cpgd-filters .cpg-select:focus-visible {
  outline: 2px solid var(--cpg-focus-ring);
  outline-offset: 2px;
}

.cpgd .cpgd-filters .cpgp-filters-rail__actions {
  grid-column: span 1;
  display: flex;
  gap: 1px;
  padding: 0;
}

.cpgd .cpgd-filters .cpgp-filters-rail__actions .cpg-btn {
  flex: 1 1 auto;
  min-height: 3rem;
  border-radius: 0;
}

/* Between the phone and the two-column layout the rail is full width, so the
   fields pair up rather than running down one very long column. */
@media (min-width: 34rem) and (max-width: 63.999rem) {
  .cpgd .cpgd-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgd .cpgd-filters .cpgp-filters-rail__search,
  .cpgd .cpgd-filters .cpgp-field--pair,
  .cpgd .cpgd-filters .cpgp-filters-rail__actions { grid-column: span 2; }
}

/* --- The result card ------------------------------------------------------
   A photograph, the price under it, then the development and the reference,
   the address, and one row of specs. Square, hairline-bounded, no shadow.
   -------------------------------------------------------------------------- */

.cpgd-card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  height: 100%;
  border: 1px solid var(--cpg-rule);
  border-radius: 0;
  background: var(--cpg-white, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s;
}

/* No ink outline on hover: the card lifts, it does not draw a box round
   itself. The focus ring below is untouched — that one has to stay. */
.cpgd-card:hover { transform: translateY(-2px); }

.cpgd-card:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 3px;
}

.cpgd-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cpg-surface-media, #e9e7e2);
}

.cpgd-card__media .cpgh-media,
.cpgd-card__media picture,
.cpgd-card__media img { display: block; width: 100%; height: 100%; }
.cpgd-card__media img { object-fit: cover; object-position: center; transition: transform 0.9s var(--cpg-ease, ease); }
.cpgd-card:hover .cpgd-card__media img { transform: scale(1.04); }

/* The tile carries a line drawing on a light ground now, so the badge and the
   status chip are set on white with ink text rather than the other way
   round — over a photograph they were legible, over a plan they were not. */
.cpgd-card__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  background: var(--cpg-ink) !important;
  color: var(--cpg-white, #fff);
}

.cpgd-card__badge.cpgh-badge--curated { background: var(--cpg-copper); }

.cpgd-card__status {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--cpg-white, #fff);
}

.cpgd-card__body {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: clamp(0.875rem, 1.4vw, 1.25rem);
}

.cpgd-card__price {
  font-family: var(--cpgh-display);
  font-size: var(--cpg-text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cpgd-card__name { font-size: var(--cpg-text-sm); color: var(--cpg-ink); }
.cpgd-card__ref { color: var(--cpg-text-muted); }
.cpgd-card__place { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

.cpgd-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--cpg-rule);
}

.cpgd-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-muted);
}

.cpgd-card__spec-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cpgd-card__spec-value { color: var(--cpg-ink); }

@media (prefers-reduced-motion: reduce) {
  .cpgd-card,
  .cpgd-card__media img { transition: none; }
  .cpgd-card:hover { transform: none; }
  .cpgd-card:hover .cpgd-card__media img { transform: none; }
}

/* --- The same card, laid out as a list row --------------------------------
   The project page carries the search page's card rather than a table of its
   own: one template, one dataset. It is smaller here and turned on its side —
   the plan at the left, the facts on one line beside it. */
.cpgx-avail-list { display: grid; gap: 0.625rem; }

.cpgd-card--row {
  grid-template-rows: none;
  grid-template-columns: clamp(4rem, 8vw, 5.5rem) minmax(0, 1fr);
  align-items: center;
  height: auto;
}

/* A record with no drawing is a line, not a tile with an empty box in it. */
.cpgd-card--row.cpgd-card--flat { grid-template-columns: minmax(0, 1fr); }

.cpgd-card--row .cpgd-card__media { align-self: stretch; aspect-ratio: auto; height: 100%; }
.cpgd-card--row .cpgd-card__media--plan { padding: 0.25rem; }
.cpgd-card--row .cpgd-card__badge { display: none; }

.cpgd-card--row .cpgd-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding: 0.625rem clamp(0.75rem, 1.4vw, 1rem);
}

/* The status leads the line at this size — it is the fact a list is scanned
   for — and the price closes it. */
.cpgd-card--row .cpgd-card__chip { order: 0; flex: 0 0 auto; }
.cpgd-card--row .cpgd-card__name { order: 1; flex: 1 1 8rem; font-weight: 500; }
.cpgd-card--row .cpgd-card__specs {
  order: 2;
  margin: 0;
  padding: 0;
  border-top: 0;
  gap: 0 1rem;
}
.cpgd-card--row .cpgd-card__price {
  order: 3;
  font-size: var(--cpg-text-base);
}

/* Every row in this section belongs to one development, so the source badge
   and the project address would repeat down the whole list. */
.cpgx-avail-list .cpgd-card__place { display: none; }

@media (min-width: 48rem) {
  .cpgd-card--row .cpgd-card__price { margin-inline-start: auto; }
}

/* Narrow, the row is two lines and always the same two: what it is on the
   first, what it measures and what it costs on the second. */
@media (max-width: 30rem) {
  .cpgd-card--row .cpgd-card__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3125rem 0.75rem;
  }
  .cpgd-card--row .cpgd-card__chip { grid-area: 1 / 1; }
  .cpgd-card--row .cpgd-card__name { grid-area: 1 / 2; }
  .cpgd-card--row .cpgd-card__specs { grid-area: 2 / 1; }
  .cpgd-card--row .cpgd-card__price { grid-area: 2 / 2; justify-self: end; }
}

.cpgp-discover { display: grid; gap: var(--cpgh-gap); align-items: start; }
@media (min-width: 64rem) {
  .cpgp-discover { grid-template-columns: var(--cpgp-rail) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .cpgp-filters-rail { position: sticky; top: calc(var(--cpg-header-height) + 1rem); }
}

.cpgp-filters-rail {
  display: grid;
  gap: 0.875rem;
  padding: clamp(1.125rem, 2vw, 1.5rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-filters-rail__title {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-muted);
  margin: 0;
}
.cpgp-field { display: grid; gap: 0.3125rem; }
.cpgp-field--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cpgp-filters-rail__actions { display: grid; gap: 0.5rem; padding-block-start: 0.25rem; }
@media (max-width: 63.999rem) {
  .cpgp-filters-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgp-filters-rail__title,
  .cpgp-filters-rail__search,
  .cpgp-filters-rail__actions { grid-column: 1 / -1; }
  .cpgp-filters-rail__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Project footprint ------------------------------------------------------
   No approved map provider, so no invented coordinates. This is a labelled
   schematic of the verified city grouping, built from the same project
   records and the same badge logic as every other screen. If a provider is
   approved later the existing marker payload hook takes over and this panel
   becomes the fallback list. */
.cpgp-footprint {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--cpgh-radius-panel);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-footprint__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.cpgp-footprint__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.015em;
  margin: 0;
}
.cpgp-footprint__label {
  margin: 0;
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-copper-lit);
}
.cpgp-footprint__cities { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cpgp-footprint__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpgp-footprint__city { display: grid; gap: 0.625rem; align-content: start; }
.cpgp-footprint__city-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.cpgp-footprint__city-name::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cpg-radius-pill);
  background: var(--cpg-copper);
  flex: none;
}
.cpgp-footprint__pins { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cpgp-pin {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--cpgh-radius-media);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  text-decoration: none;
  min-height: 2.75rem;
  transition: background-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgp-pin:hover { background: rgba(255, 255, 255, 0.14); }
.cpgp-pin__name { font-size: var(--cpg-text-md); font-weight: 500; }
.cpgp-pin__meta { font-size: var(--cpg-text-xs); color: var(--cpgh-on-ink-muted); }
.cpgp-pin__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.125rem 0 0; }
.cpgp-footprint__note {
  margin: 1.25rem 0 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--cpg-rule-on-ink);
  font-size: var(--cpg-text-xs);
  color: var(--cpgh-on-ink-muted);
  max-width: 64ch;
}
.cpgp-footprint .cpgh-eyebrow { color: rgba(255, 255, 255, 0.72); }

/* An approved provider renders here instead; the schematic stays as the
   accessible equivalent underneath it. */
.cpgp-map__canvas {
  min-height: 24rem;
  border-radius: var(--cpgh-radius-media);
  background: var(--cpg-surface-media);
  margin-bottom: 1.25rem;
}

/* --- Result rail ------------------------------------------------------------ */
.cpgp-results { display: grid; gap: var(--cpgh-gap); }
@media (min-width: 34rem) { .cpgp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cpgp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 82rem) { .cpgp-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Inside a project page the result rail is the full container width, so it can
   carry four across at desktop rather than three. */
@media (min-width: 64rem) { .cpgp-results--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cpgp-results--tight { margin-top: var(--cpgh-gap); }

.cpgp-result {
  position: relative;
  display: grid;
  gap: 0.375rem;
  align-content: start;
  padding: clamp(1rem, 1.6vw, 1.375rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--cpg-duration-fast) var(--cpg-ease), transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgp-result:hover { border-color: var(--cpg-border-control); transform: translateY(-2px); }
.cpgp-result__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.25rem; }
.cpgp-result__badges .cpgh-badge { background: var(--cpg-panel-ink); }
.cpgp-result__badges .cpgh-badge--curated { background: var(--cpg-copper); }
.cpgp-result__project { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgp-result__ref {
  font-family: var(--cpgh-display);
  font-weight: 500;
  font-size: var(--cpg-text-lg);
  letter-spacing: -0.01em;
}
.cpgp-result__price {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.02em;
  color: var(--cpg-copper-ink);
  font-variant-numeric: tabular-nums;
}
.cpgp-result__meta { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

/* --- Saved search ------------------------------------------------------------
   Part of the Discover column, not a disconnected utility box. */
.cpgp-saved {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--cpgh-radius-panel);
  background: var(--cpg-copper-tint);
}
.cpgp-saved__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.015em;
  margin: 0;
}
.cpgp-saved__text { margin: 0; font-size: var(--cpg-text-sm); color: var(--cpg-text-subtle); max-width: 46ch; }
.cpgp-saved__form { display: grid; gap: 0.625rem; align-content: start; }
@media (min-width: 64rem) {
  .cpgp-saved { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; gap: clamp(1.5rem, 4vw, 3rem); }
}

/* ==========================================================================
   AVAILABILITY — screen 07
   --------------------------------------------------------------------------
   One InventoryQuery source, two views: a readable sortable table on wide
   screens and the same records as cards on narrow ones.
   ========================================================================== */
.cpgp-table-wrap {
  overflow-x: auto;
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
}
.cpgp-table { width: 100%; border-collapse: collapse; font-size: var(--cpg-text-sm); }
.cpgp-table caption { text-align: start; }
.cpgp-table th,
.cpgp-table td {
  padding: 0.9375rem 1.125rem;
  text-align: start;
  border-block-end: 1px solid var(--cpg-rule);
  vertical-align: middle;
}
.cpgp-table thead th {
  position: sticky;
  top: var(--cpgp-sticky-top);
  z-index: 1;
  background: var(--cpg-panel-ink);
  color: var(--cpg-text-on-ink);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  border-block-end: 0;
}
.cpgp-table thead th:first-child { border-start-start-radius: var(--cpgh-radius-card); }
.cpgp-table thead th:last-child { border-start-end-radius: var(--cpgh-radius-card); }
.cpgp-table tbody tr:last-child th,
.cpgp-table tbody tr:last-child td { border-block-end: 0; }
.cpgp-table tbody tr:nth-child(even) { background: var(--cpg-paper); }
.cpgp-table tbody tr:hover { background: var(--cpg-shell); }
.cpgp-table__ref { font-weight: 700; }
.cpgp-table__ref a {
  display: inline-flex;
  align-items: center;
  /* WCAG 2.2 AA target size: the reference link is 16px tall at this type
     size, so it is given a 24px box. The table is a wide-screen surface; the
     narrow-screen equivalent is a card whose whole body is the target. */
  min-height: 1.5rem;
  /* 24px in BOTH axes: a two-character reference such as "2A" is only 18px
     wide at this type size. The box grows to the right, so no text moves. */
  min-width: 1.5rem;
  color: inherit;
  text-decoration: none;
}
.cpgp-table__ref a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.cpgp-table__price { color: var(--cpg-copper-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpgp-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sort control lives in the header cell as a real link, so sorting works with
   JavaScript disabled and every sorted view is a shareable URL. */
.cpgp-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
  min-height: 1.75rem;
}
.cpgp-sort:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cpgp-sort__cue { font-size: 0.85em; opacity: 0.55; }
.cpgp-sort[aria-sort]:not([aria-sort="none"]) .cpgp-sort__cue,
.cpgp-table thead th[aria-sort]:not([aria-sort="none"]) .cpgp-sort__cue { opacity: 1; color: var(--cpg-copper-lit); }

.cpgp-cards { display: grid; gap: var(--cpgh-gap); }
@media (min-width: 34rem) { .cpgp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpgp-only-wide { display: none; }
.cpgp-only-narrow { display: grid; }
@media (min-width: 64rem) {
  .cpgp-only-wide { display: block; }
  .cpgp-only-narrow { display: none; }
}

/* ==========================================================================
   PROJECT DETAIL — screens 04-06
   ========================================================================== */
.cpgp-overview { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 64rem) {
  .cpgp-overview { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.cpgp-prose { font-size: var(--cpgh-lead-size); line-height: 1.65; color: var(--cpg-text-subtle); max-width: 56ch; }
.cpgp-prose p { margin: 0 0 1em; }
.cpgp-prose p:last-child { margin-bottom: 0; }

/* Verified fact rail. Sample-derived figures never appear here — they live
   under the standing notice in the availability section instead. */
.cpgp-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: clamp(1.125rem, 2vw, 1.75rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8125rem;
  border-block-end: 1px solid var(--cpg-rule);
}
.cpgp-facts > div:last-child { border-block-end: 0; padding-block-end: 0; }
.cpgp-facts > div:first-child { padding-block-start: 0; }
.cpgp-facts dt { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgp-facts dd {
  margin: 0;
  font-size: var(--cpg-text-md);
  font-weight: 500;
  text-align: end;
}
.cpgp-facts__foot {
  margin: 0;
  font-size: var(--cpg-text-xs);
  color: var(--cpg-text-muted);
  max-width: 40ch;
}
.cpgp-note {
  margin: var(--cpgh-gap) 0 0;
  max-width: none;
  padding: 0.875rem 1.125rem;
  border-radius: var(--cpgh-radius-media);
  background: var(--cpg-paper);
  border: 1px solid var(--cpg-rule);
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-subtle);
}
.cpgp-facts__title {
  margin: 0 0 0.25rem;
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}

/* A project-led summary band, modelled as a microsite fact strip. Every value
   is editorial content sourced from the official project record, never sample
   inventory. */
.cpgp-glance {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border-radius: var(--cpgh-radius-panel);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-glance__eyebrow { color: var(--cpg-copper-lit); }
.cpgp-metrics {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cpgh-radius-media);
  background: rgba(255, 255, 255, 0.14);
}
.cpgp-metric {
  display: grid;
  gap: 0.5rem;
  align-content: end;
  min-height: 8.5rem;
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
  background: var(--cpgh-ink);
}
.cpgp-metric dt {
  order: 2;
  color: var(--cpgh-on-ink-muted);
  font-size: var(--cpg-text-xs);
}
.cpgp-metric dd {
  order: 1;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: var(--cpgh-display-tracking);
  text-wrap: balance;
}
@media (min-width: 40rem) {
  .cpgp-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cpgp-highlights {
  display: grid;
  gap: var(--cpgh-gap);
}
.cpgp-highlight {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-content: space-between;
  min-height: clamp(13rem, 24vw, 19rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
  background: #FFFFFF;
}
.cpgp-highlight:nth-child(2n) {
  background: var(--cpgh-ink);
  border-color: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-highlight__number {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-xs);
  color: var(--cpg-copper-ink);
}
.cpgp-highlight:nth-child(2n) .cpgp-highlight__number { color: var(--cpg-copper-lit); }
.cpgp-highlight__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
@media (min-width: 40rem) {
  .cpgp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cpgp-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Product lines (Petra Sea Resort) ---------------------------------------
   Driven by the project's real CMS zone records, so the two Pullman lines are
   only ever distinguished when the data actually distinguishes them. */
.cpgp-lines { display: grid; gap: var(--cpgh-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cpgp-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpgp-line {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
}
.cpgp-line__name {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  letter-spacing: -0.015em;
  margin: 0;
}
.cpgp-line__meta { margin: 0; font-size: var(--cpg-text-sm); color: var(--cpg-text-muted); }

/* --- Gallery ---------------------------------------------------------------
   Two registers from one component: the urban pages read tighter, the resort
   page wider, driven only by the orientation recorded for each official frame.
   ========================================================================== */
.cpgp-gallery { display: grid; gap: var(--cpgh-gap); margin: 0; padding: 0; list-style: none; }
.cpgp-gallery .cpgh-media { border-radius: var(--cpgh-radius-media); }
.cpgp-gallery__item--wide .cpgh-media { --cpgh-ratio: 16 / 9; }
.cpgp-gallery__item--portrait .cpgh-media { --cpgh-ratio: 3 / 4; }
.cpgp-gallery__item--square .cpgh-media { --cpgh-ratio: 4 / 3; }

/* Project ownership path: the same direct, numbered rhythm visitors see on
   the homepage, now grounded in the actions available for this development. */
.cpgp-process {
  display: grid;
  gap: 0.625rem;
  counter-reset: cpgp-process;
}
.cpgp-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: clamp(1.15rem, 2.4vw, 1.75rem);
  overflow: hidden;
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-process__step:nth-child(even) { background: var(--cpg-surface-ink); color: var(--cpg-text-on-ink); }
.cpgp-process__number {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  color: var(--cpg-copper);
}
.cpgp-process__step:nth-child(even) .cpgp-process__number { color: var(--cpg-copper-lit); }
.cpgp-process__step h3 {
  max-width: 13ch;
  margin-top: auto;
  font-family: var(--cpg-font-display);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  font-weight: var(--cpg-display-weight);
  line-height: 1.02;
}
.cpgp-process__step p { max-width: 30ch; margin-top: 0.75rem; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpgp-process__step:nth-child(even) p { color: var(--cpg-text-on-ink-muted); }
.cpgp-process__step > a {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--cpg-border-hair) solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}
.cpgp-process__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--cpg-space-md); }

@media (min-width: 42rem) {
  .cpgp-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cpgp-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The project pages run four steps; About publishes three. Without this the
     three cards would sit in a four-column track and leave a quarter of the
     row empty. */
  .cpgp-process--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpgp-process__step { min-height: 21rem; }
}
@media (min-width: 48rem) {
  .cpgp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpgp-gallery__item--wide { grid-column: span 4; }
  .cpgp-gallery__item--portrait { grid-column: span 2; grid-row: span 2; }
  .cpgp-gallery__item--square { grid-column: span 2; }
}
/* Resort register: a broad band across the full width, distinct from the
   closer-cropped urban treatment. */
@media (min-width: 48rem) {
  /* Six columns rather than four, so a full-width band followed by three
     equal tiles fills the row exactly and leaves no orphan column. */
  .cpgp-project--resort .cpgp-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cpgp-project--resort .cpgp-gallery__item--wide { grid-column: span 6; grid-row: auto; }
  .cpgp-project--resort .cpgp-gallery__item--wide .cpgh-media { --cpgh-ratio: 21 / 9; }
  .cpgp-project--resort .cpgp-gallery__item--portrait { grid-column: span 2; grid-row: auto; }
  .cpgp-project--resort .cpgp-gallery__item--portrait .cpgh-media { --cpgh-ratio: 4 / 5; }
  .cpgp-project--resort .cpgp-gallery__item--square { grid-column: span 2; }
  .cpgp-project--resort .cpgp-gallery__item--square .cpgh-media { --cpgh-ratio: 4 / 5; }
}

/* --- Masterplan ------------------------------------------------------------
   The existing reusable component keeps its markup, its keyboard behaviour and
   its aria-live panel. This restyles the surface it sits on.
   ========================================================================== */
body:has(.cpgp) .cpg-masterplan { gap: var(--cpgh-gap); }
body:has(.cpgp) .cpg-masterplan__figure {
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: var(--cpgh-ink);
  border-radius: var(--cpgh-radius-panel);
}
body:has(.cpgp) .cpg-masterplan__svg {
  width: 100%;
  height: auto;
  border-radius: var(--cpgh-radius-media);
  background: rgba(255, 255, 255, 0.04);
}
body:has(.cpgp) .cpg-masterplan__caption {
  color: var(--cpgh-on-ink-muted);
  padding: 0.75rem 0.25rem 0.25rem;
}
body:has(.cpgp) .cpg-hotspot text {
  /* `fill` is what paints an SVG label; `color` is kept in step with it so a
     contrast audit reading the computed colour measures the real ink. */
  fill: #FFFFFF;
  color: #FFFFFF;
}
body:has(.cpgp) .cpg-hotspot polygon {
  fill: rgba(255, 255, 255, 0.10);
  stroke: rgba(255, 255, 255, 0.30);
  opacity: 1;
}
body:has(.cpgp) .cpg-hotspot__rect { stroke: rgba(255, 255, 255, 0.55); }
body:has(.cpgp) .cpg-hotspot__rect.is-selected { stroke: #FFFFFF; }
body:has(.cpgp) .cpg-legend {
  gap: 1.25rem;
  padding: 0.875rem 1.125rem;
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpg-radius-pill);
  list-style: none;
  margin: 0;
}
@media (min-width: 64rem) {
  body:has(.cpgp) .cpg-masterplan__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
}
body:has(.cpgp) .cpg-plot-list {
  display: grid;
  gap: 0.5rem;
  max-height: 26rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.125rem;
}
body:has(.cpgp) .cpg-plot {
  width: 100%;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 1rem;
  text-align: start;
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpg-radius-pill);
}
body:has(.cpgp) .cpg-plot[aria-pressed="true"] {
  background: var(--cpg-panel-ink);
  border-color: var(--cpg-panel-ink);
  color: var(--cpg-text-on-ink);
}
body:has(.cpgp) .cpg-plot[aria-pressed="true"] .cpg-plot__meta { color: var(--cpg-text-on-ink-muted); }
body:has(.cpgp) .cpg-plot[aria-pressed="true"] .cpg-status { color: #FFFFFF; }
body:has(.cpgp) .cpg-plot-panel {
  position: sticky;
  top: calc(var(--cpg-header-height) + var(--cpgp-subnav-h) + 1rem);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.125rem, 2vw, 1.5rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
body:has(.cpgp) .cpg-plot-panel__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
body:has(.cpgp) .cpg-plot-panel__price { color: var(--cpg-copper-ink); font-variant-numeric: tabular-nums; }

/* --- Closing enquiry band --------------------------------------------------- */
.cpgp-enquire {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--cpgh-radius-hero);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
  text-align: center;
  justify-items: center;
}
.cpgp-enquire__media { position: absolute; inset: 0; z-index: -2; }
.cpgp-enquire__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.cpgp-enquire__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,12,0.78) 0%, rgba(13,13,12,0.68) 55%, rgba(13,13,12,0.84) 100%);
}
.cpgp-enquire__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  text-wrap: balance;
}
.cpgp-enquire__text { margin: 0; font-size: var(--cpgh-lead-size); color: rgba(255,255,255,0.82); max-width: 44ch; }
.cpgp-enquire .cpgh-eyebrow { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   UNIT / LOT DETAIL — screen 08
   ========================================================================== */
.cpgp-unit { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 64rem) {
  .cpgp-unit { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cpgp-unit__rail { position: sticky; top: calc(var(--cpg-header-height) + 1rem); }
}
.cpgp-unit__media { display: grid; gap: var(--cpgh-gap); }
.cpgp-unit__media .cpgh-media { --cpgh-ratio: 4 / 3; border-radius: var(--cpgh-radius-panel); }
.cpgp-unit__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.cpgp-unit__thumbs .cpgh-media { --cpgh-ratio: 4 / 3; border-radius: var(--cpgh-radius-media); }
.cpgp-unit__caption { margin: 0.5rem 0 0; font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgp-figure { margin: 0; }
/* The share control keeps a single text node: the share script swaps its text
   for the "Link copied" confirmation. */
.cpgp-unit__share { width: 100%; justify-content: center; }

.cpgp-unit__rail {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.875rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-unit__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.cpgp-unit__badges .cpgh-badge { background: var(--cpg-panel-ink); }
.cpgp-unit__project { margin: 0; font-size: var(--cpg-text-sm); }
.cpgp-unit__project a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--cpg-text-muted);
}
.cpgp-unit__ref {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
/* The one screen where Signal Copper marks a number rather than an action —
   and only ever inside the disclosed illustrative-data context. */
.cpgp-unit__price {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  letter-spacing: -0.025em;
  color: var(--cpg-copper-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.cpgp-unit__actions { display: grid; gap: 0.5rem; padding-block-start: 0.25rem; }
.cpgp-unit__actions .cpgh-pill { justify-content: space-between; width: 100%; }
.cpgp-unit__actions .cpgp-action--quiet {
  background: transparent;
  color: var(--cpg-ink);
  border-color: var(--cpg-rule-strong);
}
.cpgp-unit__actions .cpgp-action--quiet:hover { background: var(--cpg-panel-ink); color: #FFFFFF; border-color: var(--cpg-panel-ink); }

/* ==========================================================================
   REGISTER INTEREST — screen 09
   ========================================================================== */
.cpgp-register { display: grid; gap: var(--cpgh-gap); align-items: start; }
@media (min-width: 64rem) {
  .cpgp-register { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .cpgp-register__aside { position: sticky; top: calc(var(--cpg-header-height) + 1rem); }
}
.cpgp-register__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-height: clamp(20rem, 34vw, 28rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--cpgh-radius-panel);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-register__media { position: absolute; inset: 0; z-index: -2; }
.cpgp-register__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.cpgp-register__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,12,0.80) 0%, rgba(13,13,12,0.72) 50%, rgba(13,13,12,0.90) 100%);
}
.cpgp-register__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  max-width: 16ch;
}
.cpgp-register__text { margin: 0; font-size: var(--cpg-text-md); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 40ch; }
.cpgp-register .cpgh-eyebrow { color: rgba(255, 255, 255, 0.72); }
.cpgp-register__context {
  display: grid;
  gap: 0.375rem;
  padding: 0.9375rem 1.125rem;
  border-radius: var(--cpgh-radius-media);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--cpg-rule-on-ink);
}
.cpgp-register__context-label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-copper-lit);
}
.cpgp-register__context-value { font-size: var(--cpg-text-md); font-weight: 500; }
.cpgp-register__steps { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.cpgp-register__step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: baseline;
  font-size: var(--cpg-text-sm);
  color: rgba(255, 255, 255, 0.82);
}
.cpgp-register__step b {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-xs);
  font-weight: 400;
  color: var(--cpg-copper-lit);
}

.cpgp-form {
  display: grid;
  gap: 0.875rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
@media (min-width: 48rem) {
  .cpgp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .cpgp-form__wide { grid-column: 1 / -1; }
}
.cpgp-form__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-2xl);
  letter-spacing: -0.015em;
  margin: 0;
}
.cpgp-form__more {
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-media);
  background: var(--cpg-paper);
  padding: 0 1rem;
}
.cpgp-form__more > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-size: var(--cpg-text-sm);
  font-weight: 500;
  list-style: none;
}
.cpgp-form__more > summary::-webkit-details-marker { display: none; }
.cpgp-form__more > summary::after { content: "+"; margin-inline-start: auto; font-size: 1.1em; color: var(--cpg-text-muted); }
.cpgp-form__more[open] > summary::after { content: "–"; }
.cpgp-form__more-grid { display: grid; gap: 0.875rem; padding-block: 0.25rem 1rem; }
@media (min-width: 48rem) { .cpgp-form__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Confirmation ---------------------------------------------------------- */
.cpgp-confirm {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
  margin-block: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--cpgh-radius-hero);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgp-confirm__mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0;
  border-radius: var(--cpg-radius-pill);
  background: var(--cpg-copper);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
}
.cpgp-confirm__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
}
.cpgp-confirm__text { margin: 0; font-size: var(--cpgh-lead-size); color: rgba(255,255,255,0.82); max-width: 46ch; }
.cpgp-confirm__context {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--cpgh-radius-media);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--cpg-rule-on-ink);
}
.cpgp-confirm__context-label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-copper-lit);
}
.cpgp-confirm__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cpgp-confirm .cpgh-eyebrow { color: rgba(255, 255, 255, 0.72); }
.cpgp-confirm__note {
  margin: 0.5rem 0 0;
  font-size: var(--cpg-text-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   PROJECT LOCATION — verified address and CPG's footprint in the same city
   --------------------------------------------------------------------------
   No coordinate is published, so this is not a map surrogate: it is the two
   verified location fields plus the other CPG developments in that city. If a
   map provider is approved later it goes at the head of this panel and the
   city list stays as the accessible equivalent, exactly as on Discover.
   ========================================================================== */
.cpgp-place {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-block-start: var(--cpg-space-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-place__facts { display: grid; gap: 1rem; align-content: start; }
.cpgp-place__fact { display: grid; gap: 0.25rem; }
.cpgp-place__fact-label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cpgp-place__fact-value {
  font-family: var(--cpgh-display, var(--cpg-font-body));
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cpgp-place__body { display: grid; gap: 0.875rem; align-content: start; }
.cpgp-place__title {
  margin: 0;
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cpgp-place__pins { display: grid; gap: 0.5rem; }
.cpgp-pin__pending { justify-self: start; }
.cpgp-place__note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--cpg-text-xs);
  line-height: 1.55;
  color: var(--cpg-text-on-ink-muted);
}
@media (min-width: 48rem) {
  .cpgp-place { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ==========================================================================
   INSIGHTS — the honest empty state, as two panels rather than one box
   --------------------------------------------------------------------------
   Nothing here is a placeholder for content that exists: the platform has no
   approved market figures to publish, and this states the rule and points at
   what IS verified. When posts land, .cpgp-cards renders instead.
   ========================================================================== */
.cpgp-notice-pair { display: grid; gap: 0.625rem; }
.cpgp-notice-pair__panel {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-notice-pair__panel--ink {
  background: var(--cpg-surface-ink);
  border-color: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
}
.cpgp-notice-pair__panel h3 {
  margin: 0;
  font-family: var(--cpgh-display, var(--cpg-font-body));
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.cpgp-notice-pair__panel p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--cpg-text-sm);
  line-height: 1.6;
  color: var(--cpg-text-muted);
}
.cpgp-notice-pair__panel--ink p { color: var(--cpg-text-on-ink-muted); }
.cpgp-notice-pair__status {
  padding-block-start: 0.75rem;
  border-block-start: var(--cpg-border-hair) solid rgba(255, 255, 255, 0.16);
}
.cpgp-notice-pair__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
}
@media (min-width: 48rem) {
  .cpgp-notice-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   CONTACT — details rail and audience routing
   --------------------------------------------------------------------------
   Contact reuses the Register Interest two-panel shell, so only the details
   list inside the context panel and the routing rows below it are new.
   ========================================================================== */
.cpgp-contact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cpgp-contact-list > li {
  display: grid;
  gap: 0.125rem;
  padding-block-end: 0.75rem;
  border-block-end: var(--cpg-border-hair) solid rgba(255, 255, 255, 0.16);
}
.cpgp-contact-list > li:last-child { border-block-end: 0; padding-block-end: 0; }
.cpgp-contact-list__label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cpgp-contact-list__value {
  font-size: var(--cpg-text-base);
  color: var(--cpg-text-on-ink);
}
/* mailto:/tel: are the two things a visitor most often taps on this page, so
   they get the preferred 44px target rather than the 24px AA floor. The value
   is centred in the band, so the extra height reads as spacing. */
a.cpgp-contact-list__value {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}
a.cpgp-contact-list__value:hover { text-decoration: underline; }
.cpgp-contact-note { margin-block-start: 0.25rem; }

/* An inline text link inside a form hint or a context panel. Copper as text
   has two tokens: --cpg-copper-ink for light grounds, --cpg-copper-lit for
   dark ones. The ink aside is a dark ground, so it takes the lit token —
   --cpg-copper-ink measures 2.38:1 there, well under AA. */
.cpgp-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--cpg-copper-ink);
}
.cpgp-register__aside .cpgp-inline-link,
[data-cpg-surface="ink"] .cpgp-inline-link { color: var(--cpg-copper-lit); }

/* Audience routing. Each row is one link so the whole row is the target, and
   the row is 44px-plus tall at every width. */
.cpgp-routes { display: grid; gap: 0.5rem; }
.cpgp-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 4rem;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-media);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cpg-duration-base) var(--cpg-ease),
              background-color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgp-route:hover { border-color: var(--cpg-ink); background: var(--cpg-paper); }
.cpgp-route__label { font-size: var(--cpg-text-base); }
.cpgp-route__action {
  grid-column: 1;
  font-size: var(--cpg-text-sm);
  color: var(--cpg-copper-ink);
}
.cpgp-route__cue {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: var(--cpg-text-lg);
  color: var(--cpg-text-muted);
}
.cpgp-route:hover .cpgp-route__cue { color: var(--cpg-ink); }
@media (min-width: 48rem) {
  .cpgp-route { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) auto; }
  .cpgp-route__action { grid-column: 2; }
  .cpgp-route__cue { grid-column: 3; grid-row: 1; }
}

/* ==========================================================================
   ABOUT — counted figures and the sibling-platform panel
   --------------------------------------------------------------------------
   About is a header destination, so it has to read as the same product as the
   homepage rather than as the Holding composition it used to fall through to.
   It borrows the homepage's head, proof row, intro media grid and pill, and
   adds only the two components below.
   ========================================================================== */
.cpgp-figures {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.cpgp-figure-cell {
  display: grid;
  gap: 0.375rem;
  align-content: end;
  min-height: 10rem;
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-figure-cell:first-child {
  background: var(--cpg-surface-ink);
  border-color: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
}
.cpgp-figure-cell__value {
  font-family: var(--cpgh-display, var(--cpg-font-body));
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.cpgp-figure-cell__label {
  font-size: var(--cpg-text-xs);
  line-height: 1.4;
  color: var(--cpg-text-muted);
}
.cpgp-figure-cell:first-child .cpgp-figure-cell__label { color: var(--cpg-text-on-ink-muted); }

/* The sibling platform gets a real editorial panel rather than a title with a
   square button parked opposite it. */
.cpgp-sibling {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--cpg-surface-ink);
  color: var(--cpg-text-on-ink);
  border-radius: var(--cpgh-radius-panel);
}
.cpgp-sibling__text { display: grid; gap: 0.625rem; }
.cpgp-sibling__title {
  margin: 0;
  font-family: var(--cpgh-display, var(--cpg-font-body));
  font-weight: 300;
  font-size: clamp(1.875rem, 1.15rem + 2.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.cpgp-sibling__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--cpg-text-sm);
  line-height: 1.6;
  color: var(--cpg-text-on-ink-muted);
}
@media (min-width: 48rem) {
  .cpgp-sibling { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ==========================================================================
   STATUS — never colour alone. Shape and label carry the meaning too.
   ========================================================================== */
body:has(.cpgp) .cpg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   MOTION — reveals only, and never a barrier to content.
   `.cpgh-reveal` and its reduced-motion handling live in properties-home.css,
   which these pages also load.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cpgp-card,
  .cpgp-result,
  .cpgp-pin,
  .cpgp-card__cue { transition: none !important; }
  .cpgp-card:hover,
  .cpgp-result:hover { transform: none; }
  /* Sticky positioning is deliberately KEPT here. It is not animation — it is
     how the sub-navigation, the filter rail and the fact rail stay reachable —
     and several of those elements are the containing block for an absolutely
     positioned photograph, so unsetting position would drop that image out of
     its panel. Only transitions and transforms are removed. */
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  body:has(.cpgp) .cpg-subnav,
  .cpgp-filters-rail,
  .cpgp-saved { display: none; }
  .cpgp-hero,
  .cpgp-enquire,
  .cpgp-confirm,
  .cpgp-footprint,
  .cpgp-register__aside { background: #fff !important; color: #000 !important; }
  .cpgp-register__aside .cpgh-eyebrow { color: #000 !important; }
  .cpgp-hero__media,
  .cpgp-hero__scrim,
  .cpgp-enquire__media,
  .cpgp-enquire__scrim,
  .cpgp-register__media,
  .cpgp-register__scrim { display: none; }
}




/* ==========================================================================
   ABOUT — the supplied reference (asyonearc "About"), 2026-09-09
   Namespace cpgab-. Sans display throughout; the "meet" title keeps its
   first line in an italic serif from the system, as the reference sets it.
   ========================================================================== */
.cpgab {
  --cpgab-serif: Georgia, "Times New Roman", "Noto Serif Georgian", serif;
  position: relative;
  overflow-x: clip;
  background: var(--cpg-white, #fff);
}

/* Type */
.cpgab-mark {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .5rem 1rem;
  border-radius: 10em;
  background: var(--cpg-ink);
  color: var(--cpg-white, #fff);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cpgab-mark::before { display: none; }
.cpgab-chip {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .5rem .875rem;
  background: var(--cpg-paper);
  color: var(--cpg-ink);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cpgab-eyebrow { margin: 0 0 1.25rem; color: var(--cpg-ink); font-size: var(--cpg-text-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cpgab-h2 { display: grid; margin: 0; font-family: var(--cpgh-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.cpgab-title { display: grid; margin: 0; font-family: var(--cpgh-display); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.cpgab-title__it { font-family: var(--cpgab-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.cpgab-lead { max-width: 46ch; margin: 1.5rem 0 0; color: var(--cpg-ink); font-size: var(--cpg-text-base); line-height: 1.75; }

/* --- Hero ------------------------------------------------------------------ */
.cpgab-hero { padding-block-start: clamp(2.5rem, 2rem + 4vw, 6rem); }
.cpgab-hero__inner { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .cpgab-hero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.cpgab-hero__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(3.25rem, 1.5rem + 8.5vw, 9rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
}
/* One word at a time. Without motion the first word stands. */
.cpgab-hero__words { position: relative; display: block; height: 1em; overflow: hidden; }
.cpgab-hero__word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  animation: cpgab-word calc(var(--cpgab-words, 3) * 3s) infinite;
}
.cpgab-hero__word:nth-child(2) { animation-delay: 3s; }
.cpgab-hero__word:nth-child(3) { animation-delay: 6s; }
.cpgab-hero__word:nth-child(4) { animation-delay: 9s; }
/* Each word holds for its third of the cycle and hands over in a beat, so
   the line is never empty. */
@keyframes cpgab-word {
  0% { opacity: 0; transform: translateY(35%); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-35%); }
}
.cpgab-hero__index { display: grid; margin: clamp(.5rem, 1vw, 1.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 64rem) { .cpgab-hero__index { justify-self: end; width: min(100%, 17rem); } }
.cpgab-hero__index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-block-end: 1px solid var(--cpg-rule);
  color: var(--cpg-ink);
  font-size: var(--cpg-text-sm);
  text-decoration: none;
}
.cpgab-hero__index li:last-child a { color: var(--cpg-text-muted); }
.cpgab-hero__index a i { width: .5rem; height: .5rem; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--cpg-ease, ease); }
.cpgab-hero__index a:hover i { transform: rotate(45deg) translate(2px, 0); }
.cpgab-hero__wide { margin-top: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.cpgab-hero__wide .cpgh-media { aspect-ratio: 1440 / 520; overflow: hidden; }
.cpgab-hero__wide .cpgh-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- The process ----------------------------------------------------------- */
.cpgab-process { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.cpgab-process__inner { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .cpgab-process__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr); } }
.cpgab-steps { display: grid; gap: 2rem 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cpgab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cpgab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cpgab-step__title { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1rem; font-size: var(--cpg-text-sm); font-weight: 600; }
.cpgab-step__title b { font-size: var(--cpg-text-lg); font-weight: 600; }
.cpgab-step__text { margin: 0; color: var(--cpg-ink); font-size: var(--cpg-text-xs); line-height: 1.7; }

/* --- The photograph strip -------------------------------------------------- */
.cpgab-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 5.5rem);
  width: calc(100% + 2 * clamp(4rem, 12vw, 12rem));
  margin-inline-start: calc(-1 * clamp(4rem, 12vw, 12rem));
  padding-block: clamp(1rem, 3vw, 3rem) clamp(2rem, 5vw, 6rem);
}
.cpgab-strip__figure { margin: 0; }
.cpgab-strip__figure .cpgh-media { aspect-ratio: 1 / 1; overflow: hidden; }
.cpgab-strip__figure .cpgh-media img { width: 100%; height: 100%; object-fit: cover; }
.cpgab-strip__figure--2 { margin-top: clamp(1.5rem, 3vw, 3rem); }
.cpgab-strip__figure--3 { margin-top: clamp(.5rem, 1vw, 1rem); }
.cpgab-strip__figure--4 { margin-top: clamp(1rem, 2.4vw, 2.5rem); }
@media (max-width: 47.999rem) {
  .cpgab-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% + 4rem); margin-inline-start: -2rem; gap: 1rem; }
  .cpgab-strip__figure--3, .cpgab-strip__figure--4 { margin-top: 0; }
}

/* --- Meet ------------------------------------------------------------------ */
.cpgab-meet { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
.cpgab-meet__inner { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (min-width: 64rem) { .cpgab-meet__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cpgab-cluster { position: relative; aspect-ratio: 1 / 1; max-width: 40rem; }
.cpgab-cluster__figure { position: absolute; margin: 0; box-shadow: 0 2rem 4rem rgba(13, 13, 12, .12); background: var(--cpg-white, #fff); }
.cpgab-cluster__figure .cpgh-media { width: 100%; height: 100%; overflow: hidden; }
.cpgab-cluster__figure .cpgh-media img { width: 100%; height: 100%; object-fit: cover; }
.cpgab-cluster__figure--1 { left: 0; top: 30%; width: 38%; aspect-ratio: 1 / 1; }
.cpgab-cluster__figure--2 { right: 8%; top: 4%; width: 42%; aspect-ratio: 5 / 6; }
.cpgab-cluster__figure--3 { left: 24%; bottom: 0; width: 40%; aspect-ratio: 3 / 4; z-index: 2; }
.cpgab-cluster__caption {
  position: absolute;
  left: 66%;
  bottom: 2%;
  margin: 0;
  color: var(--cpg-copper);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* --- Figures -------------------------------------------------------------- */
.cpgab-figures { padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.cpgab-figures__list { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cpgab-figures__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 4rem); } }
.cpgab-figure { padding-inline: clamp(0rem, 2vw, 2rem); }
.cpgab-figure__value { margin: 0 0 1.5rem; font-family: var(--cpgh-display); font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 700; line-height: .95; letter-spacing: -.04em; }
.cpgab-figure__text { margin: 0; max-width: 32ch; color: var(--cpg-ink); font-size: var(--cpg-text-base); line-height: 1.8; }

/* --- The close ------------------------------------------------------------- */
.cpgab-close { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 0; }
.cpgab-close__inner { position: relative; display: grid; }
@media (min-width: 64rem) {
  .cpgab-close__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
  .cpgab-close__panel { position: relative; z-index: 2; margin-block-start: clamp(3rem, 2rem + 4vw, 6rem); margin-inline-end: -12%; }
  .cpgab-close__photo { position: relative; z-index: 1; }
}
.cpgab-close__panel {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  padding: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background: var(--cpg-ink);
  color: var(--cpg-white, #fff);
}
.cpgab-close__title { max-width: 14ch; margin: 0; font-family: var(--cpgh-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.cpgab-close__grid { display: grid; gap: 1rem; }
.cpgab-close__city { margin: 0; font-size: var(--cpg-text-base); font-weight: 600; }
.cpgab-close__cols { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .cpgab-close__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cpgab-close__line { margin: 0; color: rgba(255, 255, 255, .78); font-size: var(--cpg-text-sm); line-height: 1.7; }
.cpgab-close__line a { color: inherit; text-decoration: none; }
.cpgab-close__line a:hover { text-decoration: underline; text-underline-offset: .15em; }
.cpgab-close__text { margin: 0; color: rgba(255, 255, 255, .62); font-size: var(--cpg-text-xs); line-height: 1.8; }
.cpgab-close__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cpgab-close__cta { color: var(--cpg-white, #fff); font-size: var(--cpg-text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: .25rem; }
.cpgab-close__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.cpgab-close__nav a { color: rgba(255, 255, 255, .7); font-size: var(--cpg-text-sm); text-decoration: none; }
.cpgab-close__nav a:hover { color: var(--cpg-white, #fff); }
.cpgab-close__photo .cpgh-media { aspect-ratio: 4 / 5; overflow: hidden; }
.cpgab-close__photo .cpgh-media img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .cpgab-hero__word { animation: none; }
  .cpgab-hero__word:first-child { opacity: 1; }
  .cpgab-hero__index a i { transition: none; }
}

/* ==========================================================================
   UNIT — the split, 2026-09-09 (the supplied reference: a scrolling column
   of images beside a pinned column of facts, boxed in the container).
   ========================================================================== */
.cpgp-unit.cpgu2 { gap: clamp(1.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 64rem) { .cpgp-unit.cpgu2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
@media (min-width: 80rem) { .cpgp-unit.cpgu2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.cpgu2__media { display: grid; gap: 1rem; min-width: 0; }
.cpgu2__figure { position: relative; margin: 0; overflow: hidden; background: var(--cpg-surface-media, #e9e7e2); }
.cpgu2__figure img, .cpgu2__figure .cpgh-media, .cpgu2__figure picture { display: block; width: 100%; }
.cpgu2__figure--plan { display: grid; place-items: center; padding: clamp(1rem, 2vw, 2rem); }
.cpgu2__figure--plan img { width: 100%; height: auto; object-fit: contain; }
.cpgu2__figure--2d { background: var(--cpg-white, #fff); border: 1px solid var(--cpg-rule); }
.cpgu2__figure figcaption {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  padding: .25rem .5rem;
  background: var(--cpg-white, #fff);
  color: var(--cpg-ink);
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cpgu2__figure figcaption span { color: var(--cpg-text-muted); font-weight: 500; }
.cpgu2__note { margin: 1rem 0 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-2xs); letter-spacing: .12em; text-transform: uppercase; }

/* The rail is pinned; taller than the screen, it scrolls inside itself so
   the form at its foot is always reachable. */
.cpgp-unit__rail.cpgu2__rail {
  gap: 1rem;
  border-radius: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}
@media (min-width: 64rem) {
  .cpgp-unit__rail.cpgu2__rail {
    max-height: calc(100vh - var(--cpg-header-height, 4.5rem) - 2rem);
    max-height: calc(100dvh - var(--cpg-header-height, 4.5rem) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.cpgu2__eyebrow { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cpgu2__title { margin: 0; font-family: var(--cpgh-display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.cpgu2__lead { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); line-height: 1.6; }

.cpgu2__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: .5rem 0 0; padding-block: 1rem; border-block: 1px solid var(--cpg-rule); }
.cpgu2__meta-item dt { margin: 0 0 .25rem; color: var(--cpg-text-muted); font-size: var(--cpg-text-xs); }
.cpgu2__meta-item dd { margin: 0; font-weight: 600; }
.cpgu2__meta-item dd a { color: inherit; text-decoration: none; }
.cpgu2__meta-item dd a:hover { text-decoration: underline; text-underline-offset: .15em; }
.cpgu2__meta-item--price dd { font-family: var(--cpgh-display); font-size: var(--cpg-text-lg); font-weight: 500; }

.cpgu2__schedule { display: grid; }
.cpgu2__floor { border-block-end: 1px solid var(--cpg-rule); }
.cpgu2__floor-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 0; font-size: var(--cpg-text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.cpgu2__floor-summary::-webkit-details-marker { display: none; }
.cpgu2__floor-summary i { position: relative; display: block; width: .75rem; height: .75rem; flex: none; }
.cpgu2__floor-summary i::before, .cpgu2__floor-summary i::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.cpgu2__floor-summary i::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s var(--cpg-ease, ease); }
.cpgu2__floor[open] .cpgu2__floor-summary i::after { transform: translateY(-50%) rotate(0); }
.cpgu2__floor .cpgu__rooms { margin-bottom: .75rem; }
.cpgu2__floor .cpgu__room:first-child { border-top: 0; }
.cpgu2__floor .cpgu__room:last-child { border-bottom: 0; }

.cpgu2__form { margin: .5rem 0 0; padding-top: 1.25rem; border-block-start: 1px solid var(--cpg-rule); }
.cpgu2__form-title { margin: 0 0 1rem; font-size: var(--cpg-text-base); font-weight: 600; }
.cpgu2__alerts:empty { display: none; }
.cpgu2__alerts { margin-block-end: .75rem; }
.cpgu2__grid { gap: .875rem 1rem; }
.cpgu2__textarea { min-height: 4.5rem; resize: vertical; }
.cpgu2__submit { grid-column: 1 / -1; width: 100%; }

/* ==========================================================================
   UNIT v3 — 2026-09-09. The facts beside the name on the left, the drawings
   under two tabs on the right, the enquiry across the foot.
   ========================================================================== */
.cpgp-unit.cpgu3__split { gap: clamp(1.5rem, 2rem + 2vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .cpgp-unit.cpgu3__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }

.cpgu3__facts { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.cpgu3__title { margin: 0; font-family: var(--cpgh-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.cpgu3__sub { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpgu3__sub span { color: var(--cpg-text-subtle, #8a877f); }

.cpgu3__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: .5rem 0 0; padding-block: 1rem; border-block: 1px solid var(--cpg-rule); }
.cpgu3__meta-item dt { margin: 0 0 .25rem; color: var(--cpg-text-muted); font-size: var(--cpg-text-xs); }
.cpgu3__meta-item dd { margin: 0; font-weight: 600; }
.cpgu3__meta-item dd a { color: inherit; text-decoration: none; }
.cpgu3__meta-item dd a:hover { text-decoration: underline; text-underline-offset: .15em; }
.cpgu3__meta-item--price dd { font-family: var(--cpgh-display); font-size: var(--cpg-text-lg); font-weight: 500; }

.cpgu3__schedule { display: grid; }
.cpgu3__floor { border-block-end: 1px solid var(--cpg-rule); }
.cpgu3__floor-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 0; font-size: var(--cpg-text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.cpgu3__floor-summary::-webkit-details-marker { display: none; }
.cpgu3__floor-summary i { position: relative; display: block; width: .75rem; height: .75rem; flex: none; }
.cpgu3__floor-summary i::before, .cpgu3__floor-summary i::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.cpgu3__floor-summary i::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s var(--cpg-ease, ease); }
.cpgu3__floor[open] .cpgu3__floor-summary i::after { transform: translateY(-50%) rotate(0); }
.cpgu3__floor .cpgu__rooms { margin-bottom: .75rem; }
.cpgu3__floor .cpgu__room:first-child { border-top: 0; }
.cpgu3__floor .cpgu__room:last-child { border-bottom: 0; }
.cpgu3__cta { margin-top: .5rem; }

/* The drawings: a tab row, then a column of floors. */
.cpgu3__views { display: grid; gap: 1rem; min-width: 0; }
.cpgu3__tabs { display: flex; gap: .25rem; order: -1; }
.cpgu3__tabs .cpgu__tab { min-width: 4rem; }
.cpgu3__stage { display: grid; gap: 1rem; }
.cpgu3__stage .cpgu__panel { display: grid; gap: 1rem; }
.cpgu3__figure { position: relative; margin: 0; overflow: hidden; background: var(--cpg-surface-media, #e9e7e2); padding: clamp(1rem, 2vw, 2rem); }
.cpgu3__figure img { display: block; width: 100%; height: auto; object-fit: contain; }
.cpgu3__figure--2d { background: var(--cpg-white, #fff); border: 1px solid var(--cpg-rule); }
.cpgu3__figure figcaption { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .25rem .5rem; background: var(--cpg-white, #fff); color: var(--cpg-ink); font-size: var(--cpg-text-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cpgu3__note { margin: 0; color: var(--cpg-text-muted); font-size: var(--cpg-text-2xs); letter-spacing: .12em; text-transform: uppercase; }
/* Without the script both tabs' columns stand one after the other. */
.cpgu3__views:not(.is-live) .cpgu__panel[hidden] { display: grid; }

/* The enquiry across the foot. */
.cpgu3__enquire { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); border-block-start: 1px solid var(--cpg-rule); }
.cpgu3__enquire-inner { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .cpgu3__enquire-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.cpgu3__enquire-title { margin: 0 0 .5rem; font-family: var(--cpgh-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.cpgu3__enquire-lead { margin: 0 0 1.5rem; color: var(--cpg-text-muted); font-size: var(--cpg-text-sm); }
.cpgu3__enquire-links { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cpgu3__enquire-links a { color: var(--cpg-ink); font-size: var(--cpg-text-sm); text-decoration: underline; text-underline-offset: .2em; }
.cpgu3__form { margin: 0; }
.cpgu3__alerts:empty { display: none; }
.cpgu3__alerts { margin-block-end: .75rem; }
.cpgu3__textarea { min-height: 4.5rem; resize: vertical; }

/* ==========================================================================
   UNIT v4 — 2026-09-09. Photographs on the left, as a slider; facts on the
   right. The 3D / 2D tabs switch which set the slider holds.
   ========================================================================== */
@media (min-width: 64rem) {
  .cpgp-unit.cpgu4__split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cpgu4__split .cpgu3__facts { order: 2; }
  .cpgu4__split .cpgu3__views { order: 1; }
}
.cpgu4-slider { position: relative; }
.cpgu4-slider.is-live .cpgu4__shot:not(.is-current) { display: none; }
.cpgu4-slider.is-live .cpgu4__shot.is-current { display: grid; }
.cpgu4__nav {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem;
  background: var(--cpg-white, #fff);
  border: 1px solid var(--cpg-rule);
}
.cpgu4__arrow {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cpg-ink);
  cursor: pointer;
}
.cpgu4__arrow:hover { background: var(--cpg-paper); }
.cpgu4__arrow svg { width: .625rem; height: 1rem; }
.cpgu4__count { min-width: 3.5rem; font-size: var(--cpg-text-xs); font-variant-numeric: tabular-nums; text-align: center; }
/* A tab's panel that is hidden stays hidden once the script runs: the grid
   the stage gives its panels must not override the `hidden` attribute. */
.cpgu3__views.is-live .cpgu__panel[hidden] { display: none !important; }

/* --- Register: the panel at the form's height (2026-09-09) ------------------
   The dark panel used to be pinned at its own height beside a taller form;
   the two columns stretch together now and the panel's copy sits centred. */
@media (min-width: 64rem) {
  .cpgp-register { align-items: stretch; }
  /* relative, not static: the photograph inside is positioned against
     the panel and must stay inside it. */
  .cpgp-register__aside { position: relative; top: auto; height: 100%; min-height: 100%; display: grid; align-content: center; overflow: hidden; }
}

/* --- The assistant dock: rounded, and taller once open ----------------------- */
.cpgd-dock { border-radius: 1.25rem; overflow: hidden; }
.cpgd-dock:not([open]) { border-radius: 10em; }
.cpgd-dock:not([open]) .cpgd-dock__bar { padding: .75rem 1.25rem .75rem .875rem; }
.cpgd-dock:not([open]) .cpgd-dock__mark { border-radius: 50%; }
.cpgd-dock[open] { width: min(26rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100dvh - var(--cpg-header-height, 4.5rem) - 2rem)); }
.cpgd-dock[open] .cpgd-dock__panel { min-height: min(32rem, calc(100dvh - var(--cpg-header-height, 4.5rem) - 8rem)); grid-template-rows: auto minmax(0, 1fr); }
/* The field is the thing the dock is for: full width, a real height, a
   readable size, and it stays at the foot of the panel as the thread grows. */
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-shell { display: flex; flex-direction: column-reverse; min-height: 0; }
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field { flex: none; margin-top: .75rem; border: 1px solid var(--cpg-rule); border-radius: .875rem; padding: .25rem .25rem .25rem .875rem; }
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field__input { min-height: 3rem; font-size: var(--cpg-text-base); }
body.cpg-body--properties:has(.cpgp) .cpgd-dock .cpga-field__btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cpg-panel-ink, #16181b); color: #fff; }

/* --- Unit: the 3D / 2D switch on the drawing, and no ground behind it ------
   (2026-09-09) Two small words in the drawing's corner instead of a bar of
   two buttons above it; the tile behind the drawings loses its beige. */
.cpgu3__views { position: relative; }
.cpgu3__tabs {
  position: absolute;
  z-index: 3;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  order: 0;
  gap: 0;
  padding: .125rem;
  border: 1px solid var(--cpg-rule);
  border-radius: 10em;
  background: var(--cpg-white, #fff);
}
.cpgu3__tabs .cpgu__tab {
  min-width: 0;
  padding: .375rem .875rem;
  border: 0;
  border-radius: 10em;
  background: none;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}
.cpgu3__tabs .cpgu__tab.is-current { background: var(--cpg-panel-ink, #16181b) !important; color: var(--cpg-white, #fff); }
.cpgu3__figure { background: none; padding: 0; }
.cpgu3__figure--2d { border: 0; }
.cpgu3__figure figcaption { inset-block-start: 1rem; inset-inline-start: 1rem; }
/* No ground behind the drawings at all: the stage and its panels are clear
   too, not only the figure. */
.cpgu3__views .cpgu__stage, .cpgu3__stage, .cpgu3__stage .cpgu__panel, .cpgu4-slider { background: none !important; }
/* The slider is one fixed box (4:3) whatever the floor's drawing measures,
   so the step control never moves; each drawing is fitted inside it. The
   stage's hairline frame is gone. */
.cpgu3__views .cpgu__stage { border: 0 !important; padding: 0; }
.cpgu4-slider.is-live { position: relative; aspect-ratio: 4 / 3; min-height: 18rem; }
.cpgu4-slider.is-live .cpgu4__shot.is-current { position: absolute; inset: 0; display: block; }
.cpgu4-slider.is-live .cpgu4__shot img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   Responsive pass, 2026-09-09
   ========================================================================== */
/* The unit slider's minimum height forced a 384px-wide box on a 360px
   phone; on a phone the box follows the width alone. */
@media (max-width: 47.999rem) {
  .cpgu4-slider.is-live { min-height: 0; }
  .cpgu3__tabs { inset-block-start: .5rem; inset-inline-end: .5rem; }
  .cpgu4__nav { inset-block-end: .5rem; inset-inline-end: .5rem; }
  /* The assistant dock: full-width panel, pill marker, on a phone. */
  .cpgd-dock[open] { width: auto; inset-inline: .75rem; max-height: calc(100dvh - var(--cpg-header-height-sm, 3.75rem) - 1.5rem); }
  .cpgd-dock[open] .cpgd-dock__panel { min-height: 0; }
  /* Micro-caps that were 10px read at 11.5px on a phone. */
  .cpgf-stack__label, .asy-cols__eyebrow, .cpgh-pf__status { font-size: .72rem !important; }
}

/* --- Availability (2026-09-09) ---------------------------------------------
   Plain tabs instead of boxed chips; a light column header instead of the
   ink band; a drawing at the start of every row. */
body:has(.cpgp) .cpgav-tabs { gap: 0 1.5rem; border-block-end: 1px solid var(--cpg-rule); }
body:has(.cpgp) .cpgav-tabs .cpg-chip {
  padding: .75rem 0;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  margin-block-end: -1px;
  background: none !important;
  color: var(--cpg-text-muted);
  font-size: var(--cpg-text-sm);
  font-weight: 600;
}
body:has(.cpgp) .cpgav-tabs .cpg-chip:hover { color: var(--cpg-ink); }
body:has(.cpgp) .cpgav-tabs .cpg-chip[aria-current="true"] { color: var(--cpg-ink); border-block-end-color: var(--cpg-ink); }
.cpg-body--properties .cpgp-table thead { background: none !important; }
.cpg-body--properties .cpgp-table thead th {
  background: none !important;
  color: var(--cpg-text-muted) !important;
  border-block-end: 1px solid var(--cpg-ink);
  border-radius: 0 !important;
}
.cpg-body--properties .cpgp-table thead th .cpgp-sort { color: inherit; }
.cpgp-table__plan { width: 5.5rem; padding-block: .5rem !important; }
.cpgav-plan { display: block; width: 4.75rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cpg-white, #fff); border: 1px solid var(--cpg-rule); }
.cpgav-plan img, .cpgav-plan .cpgs, .cpgav-plan svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- Projects: the portfolio card as a grid (2026-09-09) ------------------- */
.cpgp-grid { display: grid; gap: clamp(1rem, 1.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cpgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Two across from a tablet up (2026-09-09). */
@media (min-width: 64rem) { .cpgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpgp-grid__item { min-width: 0; }
.cpgp-grid__card { aspect-ratio: 4 / 3; }
/* The column header is a plain row now — not pinned, not on ink. The pinned
   ink band was the "black bar" above the table. */
.cpg-body--properties .cpgp-table thead th { position: static; }
.cpg-body--properties .cpgp-table-wrap { border-color: var(--cpg-rule); }

/* --- Unit: the drawing pinned while the column scrolls (2026-09-09) --------- */
@media (min-width: 64rem) {
  .cpgp-unit.cpgu4__split { align-items: start; }
  .cpgu4__split .cpgu3__views { position: sticky; top: calc(var(--cpg-header-height, 4.5rem) + 1.5rem); }
}
.cpgu3__facts .cpgu3__enquire-inner { display: grid; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.5rem; border-block-start: 1px solid var(--cpg-rule); }
.cpgu3__facts .cpgu3__enquire-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.cpgu3__facts .cpgu3__enquire-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
/* Availability (2026-09-09): no frame round the table; the figures carry
   their icons, as the search cards do. */
.cpg-body--properties .cpgp-table-wrap { border: 0 !important; }
.cpgav-specs { white-space: nowrap; }
.cpgav-spec { display: inline-flex; align-items: center; gap: .375rem; margin-inline-end: 1rem; color: var(--cpg-ink); }
.cpgav-spec:last-child { margin-inline-end: 0; }
.cpgav-spec svg { width: 1rem; height: 1rem; fill: none; stroke: var(--cpg-text-muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
/* The "About us" mark is ink with white lettering in every theme; the
   eyebrow class it shares was tinting its text (2026-09-09). */
.cpg-body--properties .cpgab-mark { color: var(--cpg-white, #fff) !important; background: var(--cpg-panel-fixed, #16181b) !important; }

/* The "Illustrative data" strip is hidden on every screen (2026-09-09, by
   decision). The markup stays — the figures it qualified are still sample
   records — so bringing it back is deleting this rule. */
.cpg-body--properties .cpg-sample-notice { display: none !important; }
.cpgp-meta--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* The provisional-name marker on a portfolio card sits as a small chip
   under the status, upright — not rotated with the name column. */
.cpgp-grid__note { position: absolute; inset-block-start: 3.75rem; inset-inline-start: 1.5rem; z-index: 3; margin: 0; padding: .25rem .5rem; background: var(--cpg-white, #fff); color: var(--cpg-ink); font-size: var(--cpg-text-2xs); letter-spacing: .06em; text-transform: uppercase; }