/* ==========================================================================
   CPG PROPERTIES — PROJECT SINGLE PAGE
   --------------------------------------------------------------------------
   The composition, spacing and type of the approved architecture reference
   (asyonearc.liquid-themes.com project single). Everything on the page is
   built from five archetypes, exactly as the reference is:

     1. HERO      white ground, oversized split display title, 20px lead,
                  a three-column meta rail and one very large scroll cue.
     2. BAND      an edge-to-edge photograph with no content over it; fixed
                  (parallax) on desktop, scrolling below 1025px.
     3. OFFSET    a text or tab column pushed into one half of the grid —
                  right (margin-inline-start: 51%) then left (58% wide),
                  alternating down the page.
     4. VOICES    a centred quote carousel on a white ground.
     5. PF-NAV    a hairline rule with previous / all / next project links.

   Only the archetypes come from the reference; every word, figure and image
   on the page is CPG's own. Header and footer are untouched — this file
   never selects outside `.cpgx-project`.

   Measured values taken from the reference (desktop / ≤1024 / ≤767):
     container 1140px · hero 180-50 · band 320-320, 390-390, 325-325
     offset section 110-100 and 150-150 · voices 90-80
     h1 162 / 140 / 38 · h2 43 · lead 20/1.35 · body 17/1.7 · base 18/1.7
     ground #F8F8F8 · text #767676 · lead #5F5F5F · rule #E2E2E2
   ========================================================================== */

.cpgx-project {
  /* --- Ground and ink --------------------------------------------------- */
  --asy-ground: #f8f8f8;
  --asy-white: #ffffff;
  --asy-ink: #000000;
  --asy-text: #767676;
  --asy-lead: #5f5f5f;
  --asy-rule: #e2e2e2;
  --asy-rule-soft: rgba(0, 0, 0, 0.08);
  --asy-dim: rgba(0, 0, 0, 0.25);
  --asy-label: rgba(0, 0, 0, 0.35);

  /* --- Grid ------------------------------------------------------------- */
  --asy-container: 1140px;
  --asy-gutter: 15px;
  --asy-offset-right: 51%;
  --asy-offset-left: 42%;
  --asy-title-width: min(860px, 62vw);
  /* The site header's own left edge: where the wordmark starts. Read from the
     platform's container and gutter tokens so anything set against it stays
     aligned with the header at every width, and measured against the
     element's own width rather than the viewport so a classic scrollbar
     cannot push the two apart. */
  --asy-inset: calc(max(0px, (100% - var(--cpg-container, 86rem)) / 2) + var(--cpg-gutter, 1rem));

  /* --- Rhythm ----------------------------------------------------------- */
  /* The reference's own rhythm was 110/100. The page is much longer than the
     reference's, so the sections were reading as islands with a screen of air
     between them; this closes the gap without crowding them. */
  --asy-section-top: 72px;
  --asy-section-bottom: 64px;
  --asy-band-1: 641px;
  --asy-band-2: 781px;
  --asy-band-3: 651px;

  /* --- Type ------------------------------------------------------------- */
  --asy-font: "Inter", "Noto Sans Georgian", "Helvetica Neue", Arial, sans-serif;
  --asy-h1: 162px;
  --asy-h2: 43px;
  --asy-lead-size: 20px;
  --asy-body-size: 17px;
  --asy-ease: cubic-bezier(0.19, 1, 0.22, 1);

  position: relative;
  background: var(--asy-ground);
  color: var(--asy-text);
  font-family: var(--asy-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: clip;
}

@media (max-width: 1024px) {
  .cpgx-project {
    --asy-h1: 140px;
    --asy-title-width: 62vw;
    --asy-section-top: 56px;
    --asy-section-bottom: 52px;
    --asy-offset-right: 28%;
    --asy-offset-left: 28%;
    --asy-band-1: 401px;
    --asy-band-2: 401px;
    --asy-band-3: 401px;
  }
}

@media (max-width: 767px) {
  .cpgx-project {
    --asy-h1: 38px;
    --asy-h2: 30px;
    --asy-title-width: 84vw;
    --asy-section-top: 44px;
    --asy-section-bottom: 60px;
    --asy-offset-right: 0%;
    --asy-offset-left: 0%;
    --asy-band-1: 301px;
    --asy-band-2: 301px;
    --asy-band-3: 301px;
    --asy-gutter: 20px;
  }
}

/* ==========================================================================
   0 — RESET
   The page previously carried a dark, glassy, rounded language. Every one of
   those treatments is cleared here in one place so no module has to fight it
   rule by rule.
   ========================================================================== */

.cpgx-project *,
.cpgx-project *::before,
.cpgx-project *::after {
  box-sizing: border-box;
}

.cpgx-project .cpgp-glance,
.cpgx-project .cpgp-highlights,
.cpgx-project .cpgp-lines,
.cpgx-project .cpgp-gallery,
.cpgx-project .cpgp-process,
.cpgx-project .cpgp-cards,
.cpgx-project [data-cpg-surface="ink"],
.cpgx-project .cpgx-band,
.cpgx-project .cpgx-band--ink,
.cpgx-project .cpgx-band--paper,
.cpgx-project .cpgx-band--white,
.cpgx-project .cpgx-glass,
.cpgx-project .cpgx-glass-card,
.cpgx-project .cpgx-glass-chip,
.cpgx-project .cpgx-media-card,
.cpgx-project .cpgh-media {
  background: transparent;
  color: inherit;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cpgx-project .cpgx-page-pad,
.cpgx-project .cpgp-glance {
  padding: 0;
  margin: 0;
}

/* The page ground shows through every section; only the hero and the voices
   carousel sit on white, exactly as the reference does. */
.cpgx-project > section,
.cpgx-project > .cpgx-page-pad > section {
  position: relative;
  padding-block: var(--asy-section-top) var(--asy-section-bottom);
  background: transparent;
}

.cpgx-project > section > .cpg-container,
.cpgx-project > .cpgx-page-pad > section > .cpg-container,
.cpgx-project .cpgx-inner,
.cpgx-project [class$="__inner"] {
  width: 100%;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--asy-gutter);
}

/* --- Type --------------------------------------------------------------- */

.cpgx-project h1,
.cpgx-project h2,
.cpgx-project h3,
.cpgx-project h4,
.cpgx-project h5,
.cpgx-project h6 {
  color: var(--asy-ink);
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.cpgx-project h2 {
  margin: 0 0 1.55em;
  font-size: var(--asy-h2);
  line-height: 1.06em;
}

.cpgx-project h3 {
  margin: 0 0 0.6em;
  font-size: 20px;
  line-height: 1.35em;
}

.cpgx-project h4 {
  margin: 0 0 0.6em;
  font-size: 17px;
  line-height: 1.4em;
}

.cpgx-project p {
  margin: 0 0 1.25em;
  font-size: var(--asy-body-size);
  line-height: 1.7em;
}

.cpgx-project p:last-child {
  margin-bottom: 0;
}

.cpgx-project ul,
.cpgx-project ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpgx-project a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s, opacity 0.3s;
}

.cpgx-project img {
  max-width: 100%;
  height: auto;
}

.cpgx-project .cpgh-media,
.cpgx-project .cpgx-media-card {
  position: relative;
  overflow: hidden;
}

.cpgx-project .cpgh-media img,
.cpgx-project .cpgx-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section eyebrows keep the reference's small-caps meta voice. */
.cpgx-project .cpgx-kicker,
.cpgx-project .cpgx-concept__eyebrow {
  margin: 0 0 1.4em;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cpgx-project .cpgx-section-title {
  margin: 0 0 0.4em;
  font-size: var(--asy-h2);
  font-weight: 500;
  line-height: 1.06em;
}

.cpgx-project .cpgx-section-lead {
  max-width: 34em;
  color: var(--asy-text);
  font-size: var(--asy-body-size);
  line-height: 1.7em;
}

/* Every split section head becomes the reference's offset column: heading
   left, supporting line beneath it, never a two-column band. */
.cpgx-project .cpgx-section-head {
  margin: 0 0 60px;
  max-width: 58%;
}

.cpgx-project .cpgx-section-head--split {
  display: block;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-section-head {
    max-width: 72%;
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-section-head {
    max-width: none;
    margin-bottom: 36px;
  }
}

/* --- Shared links and buttons ------------------------------------------- */

.cpgx-project .cpgx-text-link,
.cpgx-project .cpgx-city-mosaic__cta,
.cpgx-project .cpgx-cinematic__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cpgx-project .cpgx-text-link > [aria-hidden],
.cpgx-project .cpgx-city-mosaic__cta > [aria-hidden],
.cpgx-project .cpgx-cinematic__cta > [aria-hidden] {
  display: none;
}

.cpgx-project .cpgx-text-link::after,
.cpgx-project .cpgx-city-mosaic__cta::after,
.cpgx-project .cpgx-cinematic__cta::after {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  transition: width 0.65s var(--asy-ease);
}

.cpgx-project .cpgx-text-link:hover::after,
.cpgx-project .cpgx-city-mosaic__cta:hover::after,
.cpgx-project .cpgx-cinematic__cta:hover::after {
  width: 66px;
}

.cpgx-project .cpg-btn,
.cpgx-project .cpgx-glass-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 56px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  background: var(--asy-panel);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 16px;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}

.cpgx-project .cpg-btn:hover,
.cpgx-project .cpgx-glass-action:hover {
  background: #2b2b2b;
  color: #fff;
}

.cpgx-project .cpg-btn--ink,
.cpgx-project .cpgx-layouts__whatsapp {
  background: transparent;
  color: var(--asy-ink);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.cpgx-project .cpg-btn--ink:hover {
  background: var(--asy-panel);
  color: #fff;
}

/* The sample-inventory notice keeps its meaning but loses its chip. */
.cpgx-project .cpg-note,
.cpgx-project .cpg-sample-notice,
.cpgx-project .cpgx-sample-notice {
  margin: 0 0 32px;
  padding: 0 0 0 16px;
  border: 0;
  border-inline-start: 1px solid var(--asy-rule);
  border-radius: 0;
  background: none;
  color: var(--asy-text);
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   1 — HERO
   ========================================================================== */

.cpgx-project .cpgx-hero {
  padding-block: 180px 50px;
  background: var(--asy-white);
}

.cpgx-hero__inner {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  width: 100%;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--asy-gutter);
}

.cpgx-hero__copy {
  /* The display line is allowed to run wider than this column; without an
     explicit zero minimum the flex item would grow to match it and push the
     scroll cue off the grid. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 57.607%;
}

.cpgx-hero__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin-inline-start: auto;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
}

.cpgx-hero__title {
  /* The display size is the reference's 162px and steps down only when the
     project's own name would not fit. --asy-title-measure is the width of the
     longest display line in ems, measured from the title itself; the line is
     allowed to run past the copy column into the empty half of the grid,
     exactly as the reference's own display line does. */
  width: var(--asy-title-width);
  max-width: calc(100vw - var(--asy-gutter) * 2);
  margin: 0 0 0.15em;
  color: var(--asy-ink);
  font-size: min(var(--asy-h1), calc(var(--asy-title-width) / max(var(--asy-title-measure, 4), 1)));
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: -0.015em;
}

.cpgx-hero__title em {
  display: block;
  font-style: italic;
}

.cpgx-hero__lead {
  max-width: 34em;
  margin: 0;
  color: var(--asy-lead);
  font-size: var(--asy-lead-size);
  line-height: 1.35em;
}

.cpgx-hero__note {
  margin: 1em 0 0;
  color: var(--asy-text);
  font-size: 13px;
}

.cpgx-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 0 0;
}

.cpgx-hero__meta-part {
  width: calc(100% / 3);
  margin-bottom: 1em;
  color: var(--asy-ink);
}

.cpgx-hero__meta-part p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65em;
}

.cpgx-hero__meta-part p:first-of-type {
  opacity: 0.35;
}

/* The display measure ladder. The template picks the step that fits the
   project's own name; the script then refines it to the exact rendered
   width, so nothing about the type scale lives in the markup. */
.cpgx-hero__title--m4 { --asy-title-measure: 4; }
.cpgx-hero__title--m5 { --asy-title-measure: 5; }
.cpgx-hero__title--m6 { --asy-title-measure: 6; }
.cpgx-hero__title--m7 { --asy-title-measure: 7; }
.cpgx-hero__title--m8 { --asy-title-measure: 8; }
.cpgx-hero__title--m9 { --asy-title-measure: 9; }
.cpgx-hero__title--m10 { --asy-title-measure: 10; }
.cpgx-hero__title--m12 { --asy-title-measure: 12; }
.cpgx-hero__title--m14 { --asy-title-measure: 14; }
.cpgx-hero__title--m16 { --asy-title-measure: 16; }
.cpgx-hero__title--m20 { --asy-title-measure: 20; }

.cpgx-hero__cue {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  color: var(--asy-ink);
}

.cpgx-hero__cue svg {
  display: block;
  width: 66px;
  height: 104px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: square;
  transition: transform 0.65s var(--asy-ease);
}

.cpgx-hero__cue:hover svg {
  transform: translateY(10px);
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-hero {
    padding-block: 150px 40px;
  }

  .cpgx-hero__copy {
    max-width: 75%;
  }

  .cpgx-hero__cue svg {
    width: 44px;
    height: 70px;
    stroke-width: 6;
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-hero {
    padding-block: 110px 32px;
  }

  .cpgx-hero__inner {
    display: block;
  }

  .cpgx-hero__copy {
    max-width: none;
  }

  .cpgx-hero__aside {
    display: none;
  }

  .cpgx-hero__meta {
    margin-top: 32px;
  }

  .cpgx-hero__meta-part {
    width: 100%;
  }

  .cpgx-hero__meta-part p {
    font-size: 16px;
  }
}

/* ==========================================================================
   1B — OPENING SLIDER
   The reference's asymmetric slider, measured at 1440px: container 1170,
   display line in the left 46%, a 175px outlined slide counter that starts
   under it and runs on over the top of the photograph, a 268px category /
   2px rule / name block on the right, and one edge-to-edge frame 651px tall
   with two 70x60 white arrow blocks in its top-right corner.

   One departure from the reference, and it is deliberate: there the display
   line itself also crosses the photograph, which only works because that
   demo's frame opens on bright sky. CPG's frames are architectural, so the
   line stays on the white ground and only the counter crosses — and it
   crosses in difference blending, so its outline is dark on the white half
   and light on the photograph, whatever the photograph happens to be.
   ========================================================================== */

.cpgx-project .cpgx-hero.asy-asym {
  --asy-asym-title: 88px;
  --asy-asym-count: 175px;
  --asy-asym-info: 25px;
  --asy-asym-gap: 16px;
  /* Two frames whole and the third cut in half. The measure is taken off the
     window, not the container, because the rail starts flush at the page's
     left edge and runs off its right one. */
  --asy-asym-card: calc((100vw - 2 * var(--asy-asym-gap)) / 2.5);
  --asy-asym-arrow-w: 70px;
  --asy-asym-arrow-h: 60px;
  --asy-asym-ease: cubic-bezier(0.62, 0.05, 0.01, 0.99);

  /* The masthead sits on the header's own grid rather than the reference's
     narrower container, so the project's name starts exactly under the
     wordmark. */

  padding-block: 44px 0;
  background: var(--asy-white);
}

.asy-asym__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  /* The white space the upper part of the slide counter drops into. */
  padding-block-end: calc(var(--asy-asym-count) * 0.38);
  padding-inline: var(--asy-inset);
}

.asy-asym__title-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 46%;
}

.asy-asym__eyebrow { margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem); }

.asy-asym__title {
  margin: 0;
  color: var(--asy-ink);
  /* The same measure ladder the masthead already used: the step is the
     rendered width of the project's own name in ems, so a long name steps
     the display size down instead of breaking the column. */
  font-size: min(var(--asy-asym-title), calc(46vw / max(var(--asy-title-measure, 6), 1)));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* The counter straddles the photograph's top edge: a little over a third of
   it stands on the white ground and the rest crosses the frame. It is the
   stage's last child, and neither it nor the stage carries a z-index, so it
   paints over the photograph while still blending against it. */
.asy-asym__count {
  position: absolute;
  /* Under the display line, which is under the wordmark. */
  inset-inline-start: var(--asy-inset);
  top: calc(var(--asy-asym-count) * -0.38);
  height: var(--asy-asym-count);
  margin: 0;
  pointer-events: none;
}

.asy-asym__count-item {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: transparent;
  font-size: var(--asy-asym-count);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.14em);
  transition: opacity 0.5s var(--asy-asym-ease), transform 0.7s var(--asy-asym-ease);
  -webkit-text-stroke: 2px #ffffff;
  mix-blend-mode: difference;
}

.asy-asym__count-item.is-current {
  opacity: 1;
  transform: translateY(0);
}

/* Where difference blending is not available the numeral falls back to a
   plain ink outline, which is what it looks like on the white half anyway. */
@supports not (mix-blend-mode: difference) {
  .asy-asym__count-item {
    -webkit-text-stroke-color: var(--asy-ink);
    mix-blend-mode: normal;
  }
}

.asy-asym__info {
  flex: 0 0 auto;
  width: 268px;
  max-width: 30%;
  color: var(--asy-ink);
}

.asy-asym__info-kind {
  margin: 0;
  font-size: var(--asy-asym-info);
  font-weight: 600;
  line-height: 2;
}

.asy-asym__info-rule {
  width: 100%;
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: 2px solid var(--asy-ink);
  opacity: 1;
}

.asy-asym__info-name {
  margin: 0;
  font-size: var(--asy-asym-info);
  font-weight: 600;
  line-height: 1.2;
}

.asy-asym__info-name span {
  opacity: 0.4;
}

.asy-asym__info .cpgx-hero__note {
  margin-top: 1em;
}

/* --- The stage ---------------------------------------------------------- */

.asy-asym__stage {
  position: relative;
}

.asy-asym__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--asy-asym-card);
  gap: var(--asy-asym-gap);
  overflow-x: auto;
  padding-inline-end: var(--asy-asym-gap);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.asy-asym__rail::-webkit-scrollbar {
  display: none;
}

.asy-asym__rail:focus-visible {
  outline: 2px solid var(--asy-ink);
  outline-offset: 4px;
}

.asy-asym__frame {
  min-width: 0;
  scroll-snap-align: start;
}

.asy-asym__frame-inner {
  overflow: hidden;
  /* The proportion the platform's own portfolio cards already use. */
  aspect-ratio: 1186 / 836;
  background: var(--asy-ground);
}

.asy-asym__frame img,
.asy-asym__frame picture,
.asy-asym__frame .cpgh-media,
.asy-asym__frame figure {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.asy-asym__frame img {
  object-fit: cover;
  object-position: center;
  transition: transform 0.9s var(--asy-asym-ease);
}

.asy-asym__frame:hover img {
  transform: scale(1.04);
}

.asy-asym__arrows {
  position: absolute;
  top: 0;
  /* The reference hangs these on the viewport edge. This page keeps a scroll
     rail there, so they stop on the header's right edge instead, in line with
     the category block above them. */
  inset-inline-end: var(--asy-inset);
  z-index: 2;
  display: flex;
}

.asy-asym__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--asy-asym-arrow-w);
  height: var(--asy-asym-arrow-h);
  padding: 0;
  border: 0;
  background: var(--asy-white);
  color: var(--asy-ink);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, transform 0.3s var(--asy-asym-ease);
}

.asy-asym__arrow svg {
  display: block;
  width: 32px;
  height: 20px;
  fill: currentColor;
}

.asy-asym__arrow:hover {
  background: var(--asy-ink);
  color: var(--asy-white);
}

.asy-asym__arrow:focus-visible {
  outline: 2px solid var(--asy-ink);
  outline-offset: -4px;
}

.asy-asym__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* --- The paragraph and fact rail below the photograph ------------------- */

.asy-asym__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  padding-block: 50px 0;
  padding-inline: var(--asy-inset);
}

.asy-asym__foot .cpgx-hero__lead {
  flex: 1 1 380px;
  max-width: 40em;
}

.asy-asym__foot .cpgp-glance {
  flex: 1 1 420px;
}

.asy-asym__foot .cpgx-hero__meta {
  margin: 0;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-hero.asy-asym {
    --asy-asym-title: 66px;
    --asy-asym-count: 128px;
    --asy-asym-info: 20px;
    --asy-asym-gap: 12px;
    --asy-asym-arrow-w: 58px;
    --asy-asym-arrow-h: 50px;

    padding-block: 36px 0;
  }

  .asy-asym__title-wrap {
    max-width: 52%;
  }

  .asy-asym__info {
    width: 230px;
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-hero.asy-asym {
    --asy-asym-title: 38px;
    --asy-asym-count: 76px;
    --asy-asym-info: 16px;
    --asy-asym-gap: 10px;
    /* One frame whole with the next showing its edge: two and a half do not
       survive a phone. */
    --asy-asym-card: calc(100vw - var(--asy-asym-gap) - 56px);
    --asy-asym-arrow-w: 48px;
    --asy-asym-arrow-h: 44px;

    padding-block: 28px 0;
  }

  .asy-asym__head {
    display: block;
    /* The category block sits under the display line here rather than beside
       it, so the counter has nothing to drop into: on a phone it stands
       wholly on the photograph instead of straddling its edge. */
    padding-block-end: 24px;
  }

  .asy-asym__count {
    top: 10px;
  }

  .asy-asym__title-wrap {
    max-width: none;
  }

  .asy-asym__title {
    font-size: min(var(--asy-asym-title), calc(92vw / max(var(--asy-title-measure, 6), 1)));
  }

  .asy-asym__info {
    width: auto;
    max-width: none;
    margin-top: 24px;
  }

  .asy-asym__info-rule {
    margin: 12px 0;
  }

  .asy-asym__foot {
    padding-block: 32px 0;
  }

  .asy-asym__foot .cpgx-hero__lead,
  .asy-asym__foot .cpgp-glance {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asy-asym__rail {
    scroll-behavior: auto;
  }

  .asy-asym__frame img,
  .asy-asym__count-item {
    transition-duration: 1ms;
  }

  .asy-asym__frame:hover img {
    transform: none;
  }
}

/* ==========================================================================
   1C — OVERVIEW COLUMNS
   The reference's four-cell grid, measured at 1440px: container 1140 split
   60/40, the two upper cells 341 tall and the two lower ones 395. The lead
   cell is padded 80/150/80/50, the ink panel 80/60 on #1b1b1b with white
   text, the closing cell 0/60/0/80. Type: 32/32 and 46/55 for the headings,
   a 10px eyebrow, 14/22 for every paragraph. The enquiry action is a solid
   200x50 block whose foot rests on the section's top edge.
   ========================================================================== */

.cpgx-project .asy-cols {
  --asy-cols-lead: 60%;
  --asy-cols-pad-y: 80px;
  --asy-cols-pad-x: 60px;

  /* The band of running type below opens the next movement, so the section
     closes tight against it rather than leaving a gap between the two. */
  padding-block: 72px 40px;
  background: var(--asy-white);
}

.cpgx-project .asy-cols__inner {
  width: 100%;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--asy-gutter);
}

.cpgx-project .asy-cols__cta {
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 50px;
  padding: 0 25px;
  border: 1px solid var(--asy-ink);
  background: #1b1b1b;
  color: var(--asy-white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.3s var(--asy-ease), color 0.3s var(--asy-ease);
}

.cpgx-project .asy-cols__cta:hover,
.cpgx-project .asy-cols__cta:focus-visible {
  background: var(--asy-white);
  color: var(--asy-ink);
}

.cpgx-project .asy-cols__grid {
  display: grid;
  grid-template-columns: var(--asy-cols-lead) auto;
}

.cpgx-project .asy-cols__cell {
  min-width: 0;
}

.cpgx-project .asy-cols__cell--lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--asy-cols-pad-y) 150px var(--asy-cols-pad-y) 50px;
}

/* The standfirst leads the column; the story runs on beneath it. */
.cpgx-project .asy-cols__text + .asy-cols__text {
  margin-top: 1.4em;
}

.cpgx-project .asy-cols__text--lead {
  color: var(--asy-ink);
}

.cpgx-project .asy-cols__cell--ink {
  /* The story column is the long one; the panel holds the middle of the row
     rather than stranding its text at the top of a tall block. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--asy-cols-pad-y) var(--asy-cols-pad-x);
  background: #1b1b1b;
  color: rgba(255, 255, 255, 0.7);
}

.cpgx-project .asy-cols__cell--aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--asy-cols-pad-x) 40px 80px;
}

.cpgx-project .asy-cols__heading {
  margin: 0 0 32px;
  color: var(--asy-ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.cpgx-project .asy-cols__title {
  margin: 0 0 23px;
  color: var(--asy-ink);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.cpgx-project .asy-cols__eyebrow {
  margin: 0 0 30px;
  color: var(--asy-white);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cpgx-project .asy-cols__text {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
}

.cpgx-project .asy-cols__cell--lead .asy-cols__text,
.cpgx-project .asy-cols__cell--aside .asy-cols__text {
  color: rgba(0, 0, 0, 0.6);
}

.cpgx-project .asy-cols__cell--ink .asy-cols__text {
  color: rgba(255, 255, 255, 0.7);
}

.cpgx-project .asy-cols__link {
  align-self: flex-start;
  margin-top: 24px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: var(--asy-ink);
  font-size: 13px;
  line-height: 18px;
}

.cpgx-project .asy-cols__link:hover,
.cpgx-project .asy-cols__link:focus-visible {
  color: var(--asy-text);
}

/* --- The cross-fading photograph ---------------------------------------- */

.cpgx-project .asy-cols__cell--media {
  position: relative;
  min-height: 395px;
  padding: 0;
  overflow: hidden;
  background: var(--asy-ground);
}

.cpgx-project .asy-cols__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}

.cpgx-project .asy-cols__slide.is-current {
  opacity: 1;
}

.cpgx-project .asy-cols__slide img,
.cpgx-project .asy-cols__slide picture,
.cpgx-project .asy-cols__slide .cpgh-media {
  display: block;
  width: 100%;
  height: 100%;
}

.cpgx-project .asy-cols__slide img {
  object-fit: cover;
  object-position: center;
}

/* The reference zooms each frame slowly while it is showing. */
@keyframes asy-cols-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.cpgx-project .asy-cols.is-live .asy-cols__slide.is-current img {
  animation: asy-cols-zoom 10s linear forwards;
}

.cpgx-project .asy-cols__cards {
  margin-top: 70px;
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-project .asy-cols.is-live .asy-cols__slide.is-current img {
    animation: none;
  }

  .cpgx-project .asy-cols__slide {
    transition-duration: 1ms;
  }
}

@media (max-width: 1024px) {
  .cpgx-project .asy-cols {
    --asy-cols-pad-y: 56px;
    --asy-cols-pad-x: 40px;

    padding-block: 70px 32px;
  }

  .cpgx-project .asy-cols__cell--lead {
    padding: var(--asy-cols-pad-y) 60px var(--asy-cols-pad-y) 0;
  }

  .cpgx-project .asy-cols__cell--aside {
    padding: 32px var(--asy-cols-pad-x) 32px 48px;
  }

  .cpgx-project .asy-cols__cell--media {
    min-height: 300px;
  }

  .cpgx-project .asy-cols__heading {
    font-size: 28px;
  }

  .cpgx-project .asy-cols__title {
    font-size: 34px;
  }

  .cpgx-project .asy-cols__cards {
    margin-top: 48px;
  }
}

@media (max-width: 767px) {
  .cpgx-project .asy-cols {
    --asy-cols-pad-y: 36px;
    --asy-cols-pad-x: 24px;

    padding-block: 48px 24px;
  }

  .cpgx-project .asy-cols__cta {
    width: 100%;
    margin-top: 28px;
  }

  .cpgx-project .asy-cols__grid {
    grid-template-columns: 1fr;
  }

  /* On one column the ink panel and the photograph are set edge to edge so
     they still read as panels rather than indented blocks. The row is the
     full window here, so pulling each one out by the gutter is all it takes —
     no viewport arithmetic, which is what got this wrong the first time. */
  .cpgx-project .asy-cols__cell--ink,
  .cpgx-project .asy-cols__cell--media {
    margin-inline: calc(-1 * var(--asy-gutter));
  }

  .cpgx-project .asy-cols__cell--lead {
    padding: var(--asy-cols-pad-y) 0;
  }

  .cpgx-project .asy-cols__cell--ink {
    padding: var(--asy-cols-pad-y) var(--asy-cols-pad-x);
  }

  .cpgx-project .asy-cols__cell--media {
    min-height: 62vw;
  }

  .cpgx-project .asy-cols__cell--aside {
    padding: var(--asy-cols-pad-y) 0;
  }

  .cpgx-project .asy-cols__heading {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .cpgx-project .asy-cols__title {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .cpgx-project .asy-cols__cards {
    margin-top: 36px;
  }
}

/* ==========================================================================
   2 — SUB-NAVIGATION
   Not part of the reference page, but the CPG project page is long and its
   section index has to survive. It is reduced to the reference's own quiet
   meta voice: a hairline, uppercase labels, no chrome.
   ========================================================================== */

.cpgx-project nav.cpg-subnav,
.cpgx-project nav.cpgx-subnav {
  /* The reference floats its section index as a pill near the foot of the
     window rather than pinning a bar under the header: 5px of padding on a
     #f6f6f6 ground, a 900px radius and one soft shadow. It is visible by
     default, so the index survives with the script off; the script only tucks
     it away over the opening slider and the page's closing navigation. */
  position: fixed;
  top: auto;
  bottom: 32px;
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: calc(100vw - var(--asy-gutter) * 2);
  padding: 5px;
  border: 0;
  border-radius: 900px;
  background: #f6f6f6;
  box-shadow: 0 10px 35px -3px rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
  transition: opacity 0.45s var(--asy-ease), transform 0.45s var(--asy-ease), visibility 0.45s;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.cpgx-project nav.cpgx-subnav.is-tucked {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 150%);
}

.cpgx-project nav.cpg-subnav .cpg-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  min-height: 0;
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.cpgx-project nav.cpg-subnav .cpg-subnav__list {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

/* The travelling fill. It is one element that moves and resizes between the
   items rather than eight backgrounds switching on and off, so the index
   reads as following the page rather than flicking through it. The script
   creates it; without the script the current item paints its own fill. */
.cpgx-project nav.cpg-subnav .cpg-subnav__marker {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 0;
  width: 0;
  border-radius: 36px;
  background: var(--asy-ink);
  opacity: 0;
  transition: transform 0.45s var(--asy-ease), width 0.45s var(--asy-ease), opacity 0.3s linear;
  pointer-events: none;
}

.cpgx-project nav.cpg-subnav .cpg-subnav__list::-webkit-scrollbar {
  display: none;
}

.cpgx-project nav.cpg-subnav .cpg-subnav__list > li {
  flex: none;
  margin-inline: 4.5px;
  margin-block: 0;
  padding: 0;
}

/* Inside the pill each item is its own small pill: quiet until it is the
   section you are in, then filled. */
.cpgx-project nav.cpg-subnav .cpg-subnav__link,
.cpgx-project nav.cpg-subnav .cpg-subnav__link[aria-current="true"] {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 0;
  padding: 7px 14px;
  border: 0;
  /* The editorial sheet flattens every properties sub-nav link with
     `border-radius: 0 !important; background: transparent !important`. Inside
     the pill the item is the pill, so those two are answered in kind and
     nowhere else. */
  border-radius: 36px !important;
  background: none !important;
  color: var(--asy-ink);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}

.cpgx-project nav.cpg-subnav .cpg-subnav__link:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--asy-ink);
}

.cpgx-project nav.cpg-subnav .cpg-subnav__link.is-active,
.cpgx-project nav.cpg-subnav .cpg-subnav__link[aria-current="true"] {
  background: var(--asy-ink) !important;
  color: var(--asy-white);
}

/* Once the travelling fill is there it does the painting, so the item itself
   goes back to carrying only its own colour. */
.cpgx-project nav.cpg-subnav.has-marker .cpg-subnav__link.is-active,
.cpgx-project nav.cpg-subnav.has-marker .cpg-subnav__link[aria-current="true"] {
  background: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-project nav.cpg-subnav .cpg-subnav__marker {
    transition-duration: 1ms;
  }

  .cpgx-project nav.cpg-subnav .cpg-subnav__list {
    scroll-behavior: auto;
  }
}

@media (max-width: 1024px) {
  .cpgx-project nav.cpg-subnav,
  .cpgx-project nav.cpgx-subnav {
    bottom: 20px;
  }

  .cpgx-project nav.cpg-subnav .cpg-subnav__link {
    padding: 6px 11px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .cpgx-project nav.cpg-subnav,
  .cpgx-project nav.cpgx-subnav {
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }

  .cpgx-project nav.cpg-subnav .cpg-subnav__list {
    /* Eight labels do not fit a phone; the row scrolls inside the pill. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cpgx-project nav.cpg-subnav .cpg-subnav__link {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   3 — BAND
   A photograph across the full width with nothing on it. On desktop the
   image is pinned to the viewport (the reference uses background-attachment:
   fixed); below 1025px it scrolls, exactly as the reference does.
   ========================================================================== */

.cpgx-band-media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: var(--asy-band-height, var(--asy-band-1));
  overflow: hidden;
  clip-path: inset(0);
}

.cpgx-band-media--tall {
  --asy-band-height: var(--asy-band-2);
}

.cpgx-band-media--short {
  --asy-band-height: var(--asy-band-3);
}

.cpgx-band-media .cpgh-media,
.cpgx-band-media > picture,
.cpgx-band-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cpgx-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .cpgx-band-media .cpgh-media,
  .cpgx-band-media > picture,
  .cpgx-band-media > img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-band-media .cpgh-media,
  .cpgx-band-media > picture,
  .cpgx-band-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* The cinematic module is the page's first band. */
.cpgx-project .cpgx-cinematic {
  padding-block: 0;
}

.cpgx-project .cpgx-cinematic__media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: var(--asy-band-1);
  overflow: hidden;
  border-radius: 0;
  clip-path: inset(0);
}

.cpgx-project .cpgx-cinematic__media .cpgh-media {
  position: absolute;
  inset: 0;
}

@media (min-width: 1025px) {
  .cpgx-project .cpgx-cinematic__media .cpgh-media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
}

.cpgx-project .cpgx-cinematic__shade {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cpgx-project .cpgx-cinematic__cta {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--asy-container);
  padding: 0;
  color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.cpgx-project .cpgx-cinematic__cta-dot {
  display: none;
}

/* ==========================================================================
   4 — OFFSET COLUMNS
   The reference alternates a right-hand column (starts at 51% of the grid)
   with a left-hand one (58% wide). Every prose module on this page uses one
   of the two.
   ========================================================================== */

.cpgx-offset-right {
  margin-inline-start: var(--asy-offset-right);
}

.cpgx-offset-left {
  margin-inline-end: var(--asy-offset-left);
}

/* --- Overview / concept -------------------------------------------------- */

.cpgx-project .cpgx-concept {
  padding-block: 110px 100px;
}

.cpgx-project .cpgx-concept__inner > * {
  margin-inline-start: var(--asy-offset-right);
}

.cpgx-project .cpgx-concept__head {
  display: block;
}

.cpgx-project .cpgx-concept__head h2 {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-concept__intro p:not(.cpgx-concept__eyebrow) {
  color: var(--asy-lead);
  font-size: var(--asy-lead-size);
  line-height: 1.5em;
}

.cpgx-project .cpgx-concept__description {
  margin-top: 1.5em;
}

.cpgx-project .cpgx-concept__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 50px;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-concept-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px 26px 0;
  border-bottom: 1px solid var(--asy-rule);
  background: none;
  box-shadow: none;
}

.cpgx-project .cpgx-concept-card__icon {
  flex: none;
  color: var(--asy-dim);
  font-size: 18px;
  line-height: 1.4;
}

.cpgx-project .cpgx-concept-card__copy {
  display: block;
}

.cpgx-project .cpgx-concept-card__copy strong {
  display: block;
  color: var(--asy-ink);
  font-size: var(--asy-body-size);
  font-weight: 500;
  line-height: 1.45em;
}

.cpgx-project .cpgx-concept-card__copy span {
  display: block;
  margin-top: 0.5em;
  font-size: 15px;
  line-height: 1.65em;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-concept__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Gallery -------------------------------------------------------------
   The supplied reference, measured at 1440px: the section padded 100/50, one
   frame held in the middle of the window at 939px — a little under two thirds
   of it — with 32px of air on either side of every cell so the neighbours
   show. The arrows are 40px circles with a 20x18 glyph, and between them the
   current number sits over a dash and the total. The row is set against the
   left edge of the centre frame.
   ------------------------------------------------------------------------- */

.cpgx-project .asy-gal {
  --asy-gal-gap: 16px;
  /* Two frames whole and the third cut in half, on the same measure as the
     masthead's own rail so the two rows read as one system. */
  --asy-gal-cell: calc((100vw - 2 * var(--asy-gal-gap)) / 2.5);
  --asy-gal-arrow: 40px;

  padding-block: 100px 50px;
}

.cpgx-project .asy-gal__viewport {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cpgx-project .asy-gal__viewport::-webkit-scrollbar {
  display: none;
}

.cpgx-project .asy-gal__viewport:focus-visible {
  outline: 2px solid var(--asy-ink);
  outline-offset: -4px;
}

.cpgx-project .asy-gal__track {
  display: flex;
  gap: var(--asy-gal-gap);
  /* The row starts flush at the page's left corner — the first frame is not
     inset — and keeps one gap of air after the last one. */
  padding-inline: 0 var(--asy-gal-gap);
  margin: 0;
  list-style: none;
}

.cpgx-project .asy-gal__slide {
  flex: 0 0 var(--asy-gal-cell);
  min-width: 0;
  scroll-snap-align: start;
}

.cpgx-project .asy-gal__media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--asy-ground);
}

.cpgx-project .asy-gal__media .cpgh-media,
.cpgx-project .asy-gal__media picture,
.cpgx-project .asy-gal__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.cpgx-project .asy-gal__media img {
  object-fit: cover;
  object-position: center;
  /* Room for the frame to drift inside its own crop as the page scrolls. */
  height: 118%;
  margin-block-start: -9%;
  will-change: transform;
}

/* The project's own action, on the same grid line as the counter row. */
.cpgx-project .asy-gal__cta {
  margin-block: 18px 0;
  padding-inline-start: var(--asy-inset);
}

/* --- The arrow / counter / arrow row ------------------------------------- */

.cpgx-project .asy-gal__nav {
  display: flex;
  align-items: center;
  margin-block-start: 28px;
  /* The row is flush at the corner, so the controls sit on the header's grid
     rather than on the frame's edge. */
  padding-inline-start: var(--asy-inset);
  color: var(--asy-ink);
  font-size: 15px;
}

.cpgx-project .asy-gal__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--asy-gal-arrow);
  height: var(--asy-gal-arrow);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10em;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s, opacity 0.3s;
}

.cpgx-project .asy-gal__arrow svg {
  width: 20px;
  height: 18px;
  fill: currentColor;
}

.cpgx-project .asy-gal__arrow:hover {
  border-color: currentColor;
}

.cpgx-project .asy-gal__arrow:focus-visible {
  outline: 2px solid var(--asy-ink);
  outline-offset: 2px;
}

.cpgx-project .asy-gal__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
}

.cpgx-project .asy-gal__count {
  display: inline-flex;
  align-items: center;
  margin: 0 1em;
  font-size: 1em;
  line-height: 1;
}

/* The current number travels up its own strip rather than being swapped, so
   the count reads as counting. */
.cpgx-project .asy-gal__count-window {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  text-align: center;
}

.cpgx-project .asy-gal__count-strip {
  display: block;
  transition: transform 0.5s var(--asy-ease);
}

.cpgx-project .asy-gal__count-strip > span {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.cpgx-project .asy-gal__count-rule {
  width: 1em;
  height: 1em;
  margin-inline: 0.25em;
  fill: currentColor;
}

.cpgx-project .asy-gal__count-total {
  line-height: 1;
}

@media (max-width: 1024px) {
  .cpgx-project .asy-gal {
    --asy-gal-gap: 12px;

    padding-block: 70px 40px;
  }
}

@media (max-width: 767px) {
  .cpgx-project .asy-gal {
    --asy-gal-gap: 10px;
    /* Two and a half do not survive a phone: one frame whole with the next
       showing its edge, as the masthead rail does. */
    --asy-gal-cell: calc(100vw - var(--asy-gal-gap) - 56px);
    --asy-gal-arrow: 36px;

    padding-block: 48px 32px;
    font-size: 14px;
  }

  .cpgx-project .asy-gal__nav {
    margin-block-start: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-project .asy-gal__viewport {
    scroll-behavior: auto;
  }

  .cpgx-project .asy-gal__count-strip {
    transition-duration: 1ms;
  }

  .cpgx-project .asy-gal__media img {
    height: 100%;
    margin-block-start: 0;
    transform: none !important;
  }
}

/* --- Location ------------------------------------------------------------ */

.cpgx-project .cpgx-reference-location {
  padding-block: 90px 80px;
}

.cpgx-project .cpgx-reference-location__inner {
  display: block;
}

.cpgx-project .cpgx-reference-location__intro {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-reference-location__intro h2 span {
  display: none;
}

.cpgx-project .cpgx-reference-location__intro p {
  margin-top: 16px;
}

/* The map itself. Edge to edge, in the page's own grey so it sits with the
   rest of the section rather than as a colour photograph dropped into it. */
.cpgx-project .cpgx-reference-location__map {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: clamp(18rem, 34vw, 30rem);
  margin: 40px 0 0;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: var(--asy-ground);
  line-height: 0;
}

.cpgx-project .cpgx-reference-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.cpgx-project .cpgx-reference-location__where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 30px;
  margin-top: 24px;
}

.cpgx-project .cpgx-reference-location__address {
  margin: 0;
  color: var(--asy-text);
  font-size: 14px;
  line-height: 22px;
}

.cpgx-project .cpgx-reference-location__address strong {
  display: block;
  color: var(--asy-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.cpgx-project .cpgx-reference-location__details {
  margin-top: 28px;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-reference-location__details summary {
  padding: 18px 0;
  color: var(--asy-ink);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-reference-location__details summary:focus-visible {
  outline: 2px solid var(--asy-ink);
  outline-offset: 3px;
}

.cpgx-project .cpgx-reference-location__context {
  padding-bottom: 24px;
}

.cpgx-project .cpgx-reference-location__media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: var(--asy-band-3);
  margin: 60px 0 0;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.cpgx-project .cpgx-reference-location__media .cpgh-media,
.cpgx-project .cpgx-reference-location__media picture,
.cpgx-project .cpgx-reference-location__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.cpgx-project .cpgx-reference-location__media img {
  object-fit: cover;
  object-position: center;
}

.cpgx-project .cpgx-reference-location__play {
  position: absolute;
  inset-block-end: 24px;
  inset-inline-start: max(var(--asy-gutter), calc((100% - var(--asy-container)) / 2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--asy-white);
  color: var(--asy-ink);
}

.cpgx-project .cpgx-reference-location__play svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-reference-location {
    padding-block: 56px 48px;
  }

  .cpgx-project .cpgx-reference-location__map {
    height: 60vw;
    margin-top: 28px;
  }

  .cpgx-project .cpgx-reference-location__intro {
    margin-inline-end: 0;
  }
}

/* --- City mosaic ---------------------------------------------------------
   Rebuilt on 2026-09-08 after the Location rewrite took the block out with
   it: a heading and standfirst over a four-up slate of the city's own frames,
   then one text link out to Discover.
   ------------------------------------------------------------------------- */

.cpgx-project .cpgx-city-mosaic {
  padding-block: var(--asy-section-top) var(--asy-section-bottom);
  background: var(--asy-white);
}

.cpgx-project .cpgx-city-mosaic__inner {
  width: 100%;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--asy-gutter);
}

.cpgx-project .cpgx-city-mosaic__head {
  max-width: 44em;
}

.cpgx-project .cpgx-city-mosaic__head h2 {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-city-mosaic__head p {
  margin: 0;
  color: var(--asy-lead);
  font-size: var(--asy-lead-size);
  line-height: 1.4;
}

.cpgx-project .cpgx-city-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.cpgx-project .cpgx-city-mosaic__grid > li {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--asy-ground);
}

.cpgx-project .cpgx-city-mosaic__grid .cpgh-media,
.cpgx-project .cpgx-city-mosaic__grid picture,
.cpgx-project .cpgx-city-mosaic__grid img {
  display: block;
  width: 100%;
  height: 100%;
}

.cpgx-project .cpgx-city-mosaic__grid img {
  object-fit: cover;
  object-position: center;
}

.cpgx-project .cpgx-city-mosaic__cta {
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-city-mosaic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 36px;
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-city-mosaic__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 28px;
  }

  .cpgx-project .cpgx-city-mosaic__grid > li {
    aspect-ratio: 4 / 3;
  }
}

.cpgx-project .cpgx-general-plan {
  padding-block: 90px 0;
}

.cpgx-project .cpgx-general-plan__inner {
  /* Copy first, then its photograph — so the page keeps alternating text and
     band instead of stacking two photographs on top of each other. */
  display: flex;
  flex-direction: column-reverse;
}

.cpgx-project .cpgx-general-plan__copy {
  margin-inline-start: var(--asy-offset-right);
}

.cpgx-project .cpgx-general-plan__visual {
  margin-top: 90px;
}

.cpgx-project .cpgx-general-plan__image {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: var(--asy-band-1);
  overflow: hidden;
}

.cpgx-project .cpgx-general-plan__image .cpgh-media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-general-plan__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin: 24px auto 0;
  padding-inline: var(--asy-gutter);
  color: var(--asy-text);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-general-plan__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cpgx-project .cpgx-general-plan__legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--asy-panel);
}

.cpgx-project .cpgx-general-plan__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 50px 0 0;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-general-plan__stat {
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-general-plan__stat dd {
  margin: 0;
  color: var(--asy-ink);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
}

.cpgx-project .cpgx-general-plan__stat dt {
  margin: 6px 0 0;
  color: var(--asy-text);
  font-size: 14px;
}

/* --- Residences / amenities fallbacks ------------------------------------ */

.cpgx-project .cpgx-residences-grid,
.cpgx-project .cpgx-experience {
  display: block;
}

.cpgx-project .cpgx-residences-grid__media,
.cpgx-project .cpgx-experience__media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 70px calc(50% - 50vw);
  height: var(--asy-band-1);
  overflow: hidden;
}

.cpgx-project .cpgx-residences-grid__media .cpgh-media,
.cpgx-project .cpgx-experience__media .cpgh-media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-residences-grid__body {
  margin-inline-start: var(--asy-offset-right);
}

.cpgx-project .cpgx-line-list,
.cpgx-project .cpgx-spec-list,
.cpgx-project .cpgx-experience__list {
  margin: 0 0 40px;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-line-card,
.cpgx-project .cpgx-spec-list li,
.cpgx-project .cpgx-experience__list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--asy-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgx-line-card__number,
.cpgx-project .cpgx-spec-list li > span:first-child,
.cpgx-project .cpgx-experience__list li > span:first-child {
  flex: none;
  color: var(--asy-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-line-card h3,
.cpgx-project .cpgx-experience__list li strong {
  margin: 0;
  color: var(--asy-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35em;
}

.cpgx-project .cpgx-experience__list li i {
  margin-inline-start: auto;
  color: var(--asy-dim);
  font-style: normal;
}

.cpgx-project .cpgp-line__meta {
  width: 100%;
  margin: 6px 0 0;
  font-size: 14px;
}

.cpgx-project .cpgx-experience__list {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-residences-grid__media,
  .cpgx-project .cpgx-experience__media {
    margin-bottom: 40px;
  }
}

/* --- Comfort ------------------------------------------------------------- */

.cpgx-project .cpgx-comfort-grid {
  padding-block: 150px;
}

.cpgx-project .cpgx-comfort-grid__head {
  margin-inline-end: var(--asy-offset-left);
  margin-bottom: 70px;
}

.cpgx-project .cpgx-comfort-grid__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.cpgx-project .cpgx-comfort-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.cpgx-project .cpgx-comfort-card__media {
  margin-bottom: 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ececec;
}

.cpgx-project .cpgx-comfort-card__media.is-empty {
  display: none;
}

.cpgx-project .cpgx-comfort-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-comfort-card__number {
  margin: 0 0 8px;
  color: var(--asy-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-comfort-card h3 {
  margin: 0 0 0.5em;
  font-size: var(--asy-lead-size);
  font-weight: 500;
  line-height: 1.3em;
}

.cpgx-project .cpgx-comfort-card__description {
  font-size: 15px;
  line-height: 1.65em;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-comfort-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-comfort-grid__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* --- Architecture and facade -------------------------------------------- */

.cpgx-project .cpgx-architecture-facade {
  padding-block: 150px;
}

.cpgx-project .cpgx-architecture-facade__top {
  display: block;
}

.cpgx-project .cpgx-architecture-facade__copy {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-architecture-facade__lead {
  color: var(--asy-text);
}

.cpgx-project .cpgx-architecture-facade__green-note {
  margin-top: 1.5em;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-architecture-facade__hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 90px 0 0 calc(50% - 50vw);
}

.cpgx-project .cpgx-architecture-facade__hero figcaption {
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin: 0 auto 18px;
  padding-inline: var(--asy-gutter);
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-architecture-facade__hero-media {
  height: var(--asy-band-3);
  overflow: hidden;
  background: #ececec;
}

.cpgx-project .cpgx-architecture-facade__hero-media.is-empty {
  display: none;
}

.cpgx-project .cpgx-architecture-facade__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-architecture-facade__materials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 70px;
}

.cpgx-project .cpgx-architecture-material figure {
  margin: 0;
}

.cpgx-project .cpgx-architecture-material__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ececec;
}

.cpgx-project .cpgx-architecture-material__media.is-empty {
  display: none;
}

.cpgx-project .cpgx-architecture-material__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-architecture-material figcaption {
  margin-top: 16px;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-architecture-facade__materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-architecture-facade__materials {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- High standard of living (band with copy) ---------------------------- */

.cpgx-project .cpgx-high-standard {
  position: relative;
  padding-block: 0;
  color: #fff;
}

.cpgx-project .cpgx-high-standard__media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-high-standard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-high-standard__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

.cpgx-project .cpgx-high-standard__inner {
  position: relative;
  padding-block: 170px;
}

.cpgx-project .cpgx-high-standard h2,
.cpgx-project .cpgx-high-standard h3 {
  color: #fff;
}

.cpgx-project .cpgx-high-standard p {
  color: rgba(255, 255, 255, 0.82);
}

.cpgx-project .cpgx-high-standard__head {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-high-standard__head h2 {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-high-standard__measure {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px 0;
}

.cpgx-project .cpgx-high-standard__measure-line {
  display: block;
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.cpgx-project .cpgx-high-standard__measure p {
  margin: 0;
  color: #fff;
  font-size: 43px;
  font-weight: 500;
  line-height: 1;
}

.cpgx-project .cpgx-high-standard__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 40px;
}

.cpgx-project .cpgx-high-standard__benefit h3 {
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-high-standard__inner {
    padding-block: 90px;
  }

  .cpgx-project .cpgx-high-standard__benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .cpgx-project .cpgx-high-standard__measure p {
    font-size: 30px;
  }
}

/* --- Interior collage ---------------------------------------------------- */

.cpgx-project .cpgx-interior {
  padding-block: 150px;
}

.cpgx-project .cpgx-interior__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.cpgx-project .cpgx-interior__head {
  grid-column: 1 / -1;
  margin-inline-end: var(--asy-offset-left);
  margin-bottom: 40px;
}

.cpgx-project .cpgx-interior__title {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-interior__lead {
  color: var(--asy-text);
}

.cpgx-project .cpgx-interior__frame {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.cpgx-project .cpgx-interior__frame img,
.cpgx-project .cpgx-interior__frame .cpgh-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-interior__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Materials board ----------------------------------------------------- */

.cpgx-project .cpgx-materials {
  padding-block: 150px;
}

.cpgx-project .cpgx-materials__layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 70px;
}

.cpgx-project .cpgx-materials__head {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-materials__title {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-materials__lead {
  color: var(--asy-text);
}

.cpgx-project .cpgx-materials__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.cpgx-project .cpgx-materials__item {
  position: static;
  transform: none;
  inset: auto;
}

.cpgx-project .cpgx-materials__swatch {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ececec;
}

.cpgx-project .cpgx-materials__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-materials__label {
  display: block;
  margin-top: 14px;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-materials__board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-materials__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* --- Pool ---------------------------------------------------------------- */

.cpgx-project .cpgx-pool {
  padding-block: 150px 0;
}

.cpgx-project .cpgx-pool__intro {
  margin-inline-end: var(--asy-offset-left);
  margin-bottom: 70px;
}

.cpgx-project .cpgx-pool__title {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-pool__lead {
  color: var(--asy-text);
}

.cpgx-project .cpgx-pool__stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: var(--asy-band-3);
  overflow: hidden;
}

.cpgx-project .cpgx-pool__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-pool__stage--panel {
  background: #ececec;
}

.cpgx-project .cpgx-pool__specs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: calc(var(--asy-container) + var(--asy-gutter) * 2);
  margin: 0 auto;
  padding: calc(var(--asy-band-3) - 150px) var(--asy-gutter) 0;
}

.cpgx-project .cpgx-pool__spec {
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgx-pool__spec + .cpgx-pool__spec {
  border-inline-start: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-pool__spec dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--asy-text);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-pool__spec-icon svg {
  width: 18px;
  height: 18px;
}

.cpgx-project .cpgx-pool__spec dd {
  margin: 10px 0 0;
  color: var(--asy-ink);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-pool__specs {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--asy-band-3) - 40px);
  }

  .cpgx-project .cpgx-pool__spec + .cpgx-pool__spec {
    border-inline-start: 0;
    border-top: 1px solid var(--asy-rule);
  }
}

/* --- Apartment layouts --------------------------------------------------- */

.cpgx-project .cpgx-layouts {
  padding-block: 150px;
}

.cpgx-project .cpgx-layouts__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.cpgx-project .cpgx-layouts__stage {
  position: relative;
}

.cpgx-project .cpgx-layouts__plan img {
  width: 100%;
  height: auto;
}

.cpgx-project .cpgx-layouts__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--asy-white);
  color: var(--asy-ink);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.cpgx-project .cpgx-layouts__arrow:hover {
  background: var(--asy-panel);
  color: #fff;
}

.cpgx-project .cpgx-layouts__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.cpgx-project .cpgx-layouts__arrow--prev { left: 0; }
.cpgx-project .cpgx-layouts__arrow--next { right: 0; }

.cpgx-project .cpgx-layouts__title {
  margin-bottom: 0.6em;
}

.cpgx-project .cpgx-layouts__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.cpgx-project .cpgx-layouts__panel-shell {
  margin-top: 70px;
}

.cpgx-project .cpgx-layouts__tablist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-layouts__type {
  margin: 0;
  color: var(--asy-ink);
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-layouts__dots {
  display: flex;
  gap: 10px;
}

.cpgx-project .cpgx-layouts__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.3s;
}

.cpgx-project .cpgx-layouts__dot[aria-selected="true"] {
  background: var(--asy-panel);
}

.cpgx-project .cpgx-layouts__panel {
  padding-top: 34px;
}

.cpgx-project .cpgx-layouts__panel[hidden] {
  display: none;
}

.cpgx-project .cpgx-layouts__panel-name {
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-layouts__range {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: 1.25em;
}

.cpgx-project .cpgx-layouts__range-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cpgx-project .cpgx-layouts__range b {
  color: var(--asy-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-layouts__price,
.cpgx-project .cpgx-layouts__area {
  color: var(--asy-ink);
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-layouts__spaces h4 {
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-layouts__spaces ul {
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-layouts__spaces li {
  padding: 12px 0;
  border-bottom: 1px solid var(--asy-rule);
  font-size: 15px;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-layouts__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* --- Reserve ------------------------------------------------------------- */

.cpgx-project .cpgx-reserve {
  position: relative;
  padding-block: 0;
  color: #fff;
}

.cpgx-project .cpgx-reserve__media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-reserve__media img,
.cpgx-project .cpgx-reserve__media .cpgh-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-reserve__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cpgx-project .cpgx-reserve__inner {
  position: relative;
  padding-block: 150px;
}

.cpgx-project .cpgx-reserve h2,
.cpgx-project .cpgx-reserve h3 {
  color: #fff;
}

.cpgx-project .cpgx-reserve p,
.cpgx-project .cpgx-reserve li {
  color: rgba(255, 255, 255, 0.82);
}

.cpgx-project .cpgx-reserve__head {
  margin-inline-end: var(--asy-offset-left);
  margin-bottom: 60px;
}

.cpgx-project .cpgx-reserve__head h2 {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-reserve__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.cpgx-project .cpgx-reserve__step {
  display: block;
  padding: 34px 30px 34px 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgx-reserve__step + .cpgx-reserve__step {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.28);
  padding-inline-start: 30px;
}

.cpgx-project .cpgx-reserve__number {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-reserve__body h3 {
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-reserve__body li {
  padding: 6px 0;
  font-size: 15px;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-reserve__inner {
    padding-block: 90px;
  }

  .cpgx-project .cpgx-reserve__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpgx-project .cpgx-reserve__step + .cpgx-reserve__step {
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-inline-start: 0;
  }
}

/* --- Payment calculation ------------------------------------------------- */

.cpgx-project .cpgx-payment {
  position: relative;
  padding-block: 0;
  color: #fff;
}

.cpgx-project .cpgx-payment__media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-payment__media img,
.cpgx-project .cpgx-payment__media .cpgh-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgx-project .cpgx-payment__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cpgx-project .cpgx-payment__inner {
  position: relative;
  padding-block: 150px;
}

.cpgx-project .cpgx-payment h2 {
  color: #fff;
}

.cpgx-project .cpgx-payment p {
  color: rgba(255, 255, 255, 0.82);
}

.cpgx-project .cpgx-payment__head {
  margin-inline-end: var(--asy-offset-left);
  margin-bottom: 40px;
}

.cpgx-project .cpgx-payment__head h2 {
  margin-bottom: 0.5em;
}

.cpgx-project .cpgx-payment__helper {
  font-size: 14px;
}

.cpgx-project .cpgx-payment .cpg-note,
.cpgx-project .cpgx-payment .cpg-sample-notice {
  border-inline-start-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.75);
}

.cpgx-project .cpgx-payment__formula {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.cpgx-project .cpgx-payment__op {
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 26px;
  line-height: 1;
}

.cpgx-project .cpgx-payment__term {
  min-width: 150px;
}

.cpgx-project .cpgx-payment__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}

.cpgx-project .cpgx-payment__box--result {
  background: #fff;
  color: var(--asy-ink);
  border-color: #fff;
}

.cpgx-project .cpgx-payment__months a {
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.55);
}

.cpgx-project .cpgx-payment__months a[aria-current="true"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.cpgx-project .cpgx-payment__label {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-payment__inner {
    padding-block: 90px;
  }

  .cpgx-project .cpgx-payment__op {
    display: none;
  }

  .cpgx-project .cpgx-payment__term {
    width: 100%;
  }
}

/* --- Benefits and ROI ---------------------------------------------------- */

.cpgx-project .cpgx-benefits {
  padding-block: 150px;
}

.cpgx-project .cpgx-benefits__title {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-benefits__item {
  padding: 34px 34px 34px 0;
  border-bottom: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-benefits__item h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-benefits__index {
  color: var(--asy-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-roi {
  margin-top: 90px;
  margin-inline-start: var(--asy-offset-right);
}

.cpgx-project .cpgx-roi__title {
  margin-bottom: 0.8em;
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Purchase process and enquiry form ----------------------------------- */

.cpgx-project .cpgx-purchase {
  padding-block: 150px;
  background: var(--asy-white);
}

.cpgx-project .cpgx-purchase__title {
  margin-inline-end: var(--asy-offset-left);
}

.cpgx-project .cpgx-purchase__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-bottom: 90px;
}

.cpgx-project .cpgx-purchase__step {
  padding-top: 22px;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-purchase__number {
  display: block;
  margin-bottom: 16px;
  color: var(--asy-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-purchase__rule {
  display: none;
}

.cpgx-project .cpgx-purchase__step h3 {
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-purchase__step p {
  font-size: 15px;
  line-height: 1.65em;
}

.cpgx-project .cpgx-purchase__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-purchase__fields > * {
  padding: 22px 26px;
  border-bottom: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-purchase__fields > *:nth-child(odd) {
  border-inline-end: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-purchase__fields label {
  display: block;
  margin-bottom: 6px;
  color: var(--asy-text);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.cpgx-project .cpgx-purchase__fields input,
.cpgx-project .cpgx-purchase__fields select,
.cpgx-project .cpgx-purchase__fields textarea {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--asy-ink);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.5;
}

.cpgx-project .cpgx-purchase__fields input:focus,
.cpgx-project .cpgx-purchase__fields select:focus,
.cpgx-project .cpgx-purchase__fields textarea:focus {
  outline: 0;
}

.cpgx-project .cpgx-purchase__submit {
  grid-column: 1 / -1;
  padding: 0;
  border-bottom: 0;
  border-inline-end: 0 !important;
}

.cpgx-project .cpgx-purchase__submit .cpg-btn {
  width: 100%;
  min-height: 66px;
}

.cpgx-project .cpgx-purchase__privacy {
  margin-top: 18px;
  font-size: 13px;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-purchase__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-purchase__steps,
  .cpgx-project .cpgx-purchase__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpgx-project .cpgx-purchase__fields > *:nth-child(odd) {
    border-inline-end: 0;
  }
}

/* --- Availability -------------------------------------------------------- */

.cpgx-project .cpgx-inventory-glass {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-project .cpgx-inventory-glass > li {
  position: relative;
  padding: 26px 26px 26px 0;
  border-bottom: 1px solid var(--asy-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgx-inventory-glass__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--asy-text);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-inventory-glass strong {
  display: block;
  color: var(--asy-ink);
  font-size: 24px;
  font-weight: 500;
}

.cpgx-project .cpgx-inventory-glass p {
  margin: 6px 0 0;
  font-size: 14px;
}

.cpgx-project .cpgx-inventory-glass a {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 0;
}

.cpgx-project .cpg-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--asy-ink);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-table-wrap {
  margin-top: 60px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow-x: auto;
}

.cpgx-project .cpgp-table tbody tr:nth-child(even),
.cpgx-project .cpgp-table tbody tr:nth-child(odd) {
  background: transparent;
}

.cpgx-project .cpgx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.cpgx-project .cpgx-table th,
.cpgx-project .cpgx-table td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--asy-rule);
  text-align: start;
  font-weight: 400;
}

.cpgx-project .cpgx-table thead th {
  color: var(--asy-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgx-table tbody th a {
  color: var(--asy-ink);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-inventory-glass {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-inventory-glass {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Inventory table ------------------------------------------------------
   The shared table component paints a solid header and banded rows. On this
   page it reads as the reference's quiet hairline list instead. */

.cpgx-project .cpgp-table,
.cpgx-project .cpgp-table thead,
.cpgx-project .cpgp-table tbody,
.cpgx-project .cpgp-table tr,
.cpgx-project .cpgp-table th,
.cpgx-project .cpgp-table td {
  position: static;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgp-table thead th {
  color: var(--asy-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-project .cpgp-table th,
.cpgx-project .cpgp-table td {
  padding: 16px 20px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--asy-rule);
  text-align: start;
  vertical-align: baseline;
}

.cpgx-project .cpgp-table__price,
.cpgx-project .cpgp-table__ref a {
  color: var(--asy-ink);
  font-weight: 500;
}

.cpgx-project .cpgp-cards,
.cpgx-project .cpgp-only-narrow {
  display: none;
}

@media (max-width: 767px) {
  .cpgx-project .cpgp-only-wide {
    display: none;
  }

  .cpgx-project .cpgp-cards,
  .cpgx-project .cpgp-only-narrow {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--asy-rule);
  }
}

/* --- Process ------------------------------------------------------------- */

/* --- The closing slideshow ------------------------------------------------
   The supplied reference, measured at 1440px: a full-bleed band 549px tall,
   every frame under a 58% black scrim, the copy inset 212px from the left,
   the name at 55/66 weight 700 with the first word in white and the rest in
   near-black, and a 14px uppercase outlined button under it. Two 55px arrow
   squares stack against the right edge on a 25% black ground with a 62%
   white hairline; the dot column sits 106px in from the left, and the
   two-digit counter reads against the right.
   ------------------------------------------------------------------------- */

/* In the enquire slot the band closes the page, so it stands taller and needs
   no margin under it. */
.cpgx-project .asy-slides-section { padding-block: 0; }

.cpgx-project .asy-slides-section .asy-slides {
  --asy-slides-h: min(78vh, 720px);

  margin-block-end: 0;
}

.cpgx-project .asy-slides {
  --asy-slides-h: 549px;
  --asy-slides-inset: 212px;
  --asy-slides-title: 55px;

  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: var(--asy-slides-h);
  margin: 0 0 70px calc(50% - 50vw);
  overflow: hidden;
  background: var(--asy-ink);
}

.cpgx-project .asy-slides__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpgx-project .asy-slides__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--asy-ease), visibility 0.9s;
}

.cpgx-project .asy-slides__item.is-current {
  opacity: 1;
  visibility: visible;
}

/* Before the script runs the first frame is simply the one that shows. */
.cpgx-project .asy-slides:not(.is-live) .asy-slides__item:first-child {
  opacity: 1;
  visibility: visible;
}

.cpgx-project .asy-slides__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cpgx-project .asy-slides__media .cpgh-media,
.cpgx-project .asy-slides__media picture,
.cpgx-project .asy-slides__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.cpgx-project .asy-slides__media img {
  object-fit: cover;
  object-position: center;
}

.cpgx-project .asy-slides__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.cpgx-project .asy-slides__body {
  position: relative;
  z-index: 2;
  padding-inline: var(--asy-slides-inset) 15px;
}

.cpgx-project .asy-slides__title {
  margin: 0 0 32px;
  font-size: var(--asy-slides-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cpgx-project .asy-slides__title,
.cpgx-project .asy-slides__title a {
  /* The reference picks the first word out in white and sets the tail of the
     name in near-black. That works over its own bright interiors; over CPG's
     night renders the tail simply vanished, so it is recessive white instead
     — the same two-tone idea, legible on any frame. */
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}

.cpgx-project .asy-slides__first {
  color: var(--asy-white);
}

.cpgx-project .asy-slides__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 11px 26px;
  border: 1px solid var(--asy-white);
  border-radius: 5px;
  color: var(--asy-white);
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
}

.cpgx-project .asy-slides__btn:hover,
.cpgx-project .asy-slides__btn:focus-visible {
  background: var(--asy-white);
  color: var(--asy-ink);
}

.cpgx-project .asy-slides__btn-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* The frame's copy rises as it comes forward — the reference's parallax, as a
   transition rather than a scroll-linked one. */
.cpgx-project .asy-slides.is-live .asy-slides__title,
.cpgx-project .asy-slides.is-live .asy-slides__btn {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s var(--asy-ease), transform 0.9s var(--asy-ease);
}

.cpgx-project .asy-slides.is-live .asy-slides__item.is-current .asy-slides__title,
.cpgx-project .asy-slides.is-live .asy-slides__item.is-current .asy-slides__btn {
  opacity: 1;
  transform: translateY(0);
}

.cpgx-project .asy-slides.is-live .asy-slides__item.is-current .asy-slides__btn {
  transition-delay: 0.12s;
}

/* --- Arrows, dots and the counter ---------------------------------------- */

.cpgx-project .asy-slides__arrows {
  position: absolute;
  /* Not vertically centred: on the right edge, at the height the pointer sits
     at while scrolling, the pair kept catching the wheel. They sit in the
     bottom corner instead, side by side and clear of the page's scroll rail. */
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.cpgx-project .asy-slides__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--asy-white);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.cpgx-project .asy-slides__arrow svg {
  width: 14px;
  height: 24px;
}

.cpgx-project .asy-slides__arrow:hover {
  background: var(--asy-white);
  color: var(--asy-ink);
}

.cpgx-project .asy-slides__arrow:focus-visible {
  outline: 2px solid var(--asy-white);
  outline-offset: 2px;
}

.cpgx-project .asy-slides__dots {
  position: absolute;
  top: 50%;
  inset-inline-start: 106px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
}

.cpgx-project .asy-slides__dots button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cpgx-project .asy-slides__dots span {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s;
}

.cpgx-project .asy-slides__dots [aria-current="true"] span {
  background: var(--asy-white);
  transform: scale(1.25);
}

.cpgx-project .asy-slides__dots button:focus-visible {
  outline: 2px solid var(--asy-white);
  outline-offset: 2px;
}

.cpgx-project .asy-slides__count {
  position: absolute;
  inset-block-end: 34px;
  inset-inline-end: 158px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  color: rgba(255, 255, 255, 0.43);
  font-size: 20px;
  line-height: 1.7;
}

.cpgx-project .asy-slides__count-window {
  display: inline-block;
  width: 1.4em;
  height: 1.7em;
  overflow: hidden;
  text-align: center;
}

.cpgx-project .asy-slides__count-strip {
  display: block;
  transition: transform 0.5s var(--asy-ease);
}

.cpgx-project .asy-slides__count-strip > span {
  display: block;
  height: 1.7em;
  line-height: 1.7;
}

.cpgx-project .asy-slides__count-total {
  color: var(--asy-white);
}

.cpgx-project .asy-slides__count-total::before {
  content: "/ ";
}

@media (max-width: 1024px) {
  .cpgx-project .asy-slides {
    --asy-slides-h: 46vw;
    --asy-slides-inset: 90px;
    --asy-slides-title: 40px;
  }

  .cpgx-project .asy-slides__dots {
    inset-inline-start: 32px;
  }

  .cpgx-project .asy-slides__count {
    inset-inline-end: 140px;
  }
}

@media (max-width: 767px) {
  .cpgx-project .asy-slides {
    --asy-slides-h: 96vw;
    --asy-slides-inset: 20px;
    --asy-slides-title: 30px;

    margin-bottom: 40px;
  }

  .cpgx-project .asy-slides__body {
    padding-inline-end: 20px;
  }

  .cpgx-project .asy-slides__dots {
    inset-block-start: auto;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    flex-direction: row;
    transform: none;
  }

  .cpgx-project .asy-slides__arrow {
    width: 44px;
    height: 44px;
  }

  .cpgx-project .asy-slides__arrows {
    inset-block-end: 16px;
    inset-inline-end: 16px;
  }

  .cpgx-project .asy-slides__count {
    inset-block-end: 26px;
    inset-inline-end: 118px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-project .asy-slides__item,
  .cpgx-project .asy-slides.is-live .asy-slides__title,
  .cpgx-project .asy-slides.is-live .asy-slides__btn,
  .cpgx-project .asy-slides__count-strip {
    transition-duration: 1ms;
  }

  .cpgx-project .asy-slides.is-live .asy-slides__title,
  .cpgx-project .asy-slides.is-live .asy-slides__btn {
    transform: none;
  }
}

.cpgx-project .cpgx-process-visual {
  position: relative;
}

.cpgx-project .cpgx-process-visual__media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 70px calc(50% - 50vw);
  height: var(--asy-band-3);
  overflow: hidden;
}

.cpgx-project .cpgx-process-visual__media .cpgh-media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-process-visual__scrim {
  display: none;
}

.cpgx-project .cpgx-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.cpgx-project .cpgx-process__step {
  padding: 22px 0 0;
  border-top: 1px solid var(--asy-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.cpgx-project .cpgp-process__number {
  display: block;
  margin-bottom: 14px;
  color: var(--asy-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.cpgx-project .cpgx-process__step h3 {
  font-size: var(--asy-lead-size);
  font-weight: 500;
}

.cpgx-project .cpgx-process__step p {
  font-size: 15px;
  line-height: 1.65em;
}

@media (max-width: 1024px) {
  .cpgx-project .cpgx-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-process {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Enquire ------------------------------------------------------------- */

.cpgx-project .cpgx-enquire {
  position: relative;
  padding-block: 0;
  color: #fff;
}

.cpgx-project .cpgx-enquire__media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-enquire__media .cpgh-media {
  width: 100%;
  height: 100%;
}

.cpgx-project .cpgx-enquire__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cpgx-project .cpgx-enquire__content {
  position: relative;
  padding-block: 150px;
}

.cpgx-project .cpgx-enquire .cpgx-kicker {
  color: rgba(255, 255, 255, 0.7);
}

.cpgx-project .cpgx-enquire__title {
  max-width: 12em;
  margin: 0 0 0.4em;
  color: #fff;
  font-size: var(--asy-h2);
  font-weight: 500;
  line-height: 1.06em;
}

.cpgx-project .cpgx-enquire__text {
  max-width: 34em;
  margin-bottom: 2em;
  color: rgba(255, 255, 255, 0.82);
}

.cpgx-project .cpgx-enquire .cpgx-glass-action {
  background: #fff;
  color: var(--asy-ink);
}

.cpgx-project .cpgx-enquire .cpgx-glass-action:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--asy-ink);
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-enquire__content {
    padding-block: 90px;
  }
}

/* --- Masterplan fallback ------------------------------------------------- */

.cpgx-project .cpgx-masterplan-pending {
  display: block;
}

.cpgx-project .cpgx-masterplan-pending__media {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 50px calc(50% - 50vw);
  height: var(--asy-band-3);
  overflow: hidden;
}

.cpgx-project .cpgx-masterplan-pending__media .cpgh-media {
  position: absolute;
  inset: 0;
}

.cpgx-project .cpgx-masterplan-pending__note {
  margin-inline-start: var(--asy-offset-right);
  padding: 0;
  background: none;
  border: 0;
}

/* ==========================================================================
   7 — VOICES
   The reference's centred quote carousel: white ground, a centred 43px
   heading, one statement at a time inside a 1015px measure, arrows at the
   measure's edges and a numeric 01 —— 0n indicator.
   ========================================================================== */

.cpgx-project .cpgx-voices {
  padding-block: 90px 80px;
  background: var(--asy-white);
  text-align: center;
}

.cpgx-voices__title {
  margin: 0 0 30px;
  font-size: var(--asy-h2);
  font-weight: 500;
  line-height: 1.06em;
}

.cpgx-voices__carousel {
  position: relative;
  max-width: 1015px;
  margin: 0 auto;
}

.cpgx-voices__viewport {
  overflow: hidden;
}

.cpgx-voices__track {
  display: flex;
  transition: transform 0.75s var(--asy-ease);
}

.cpgx-voices__slide {
  flex: 0 0 100%;
  padding-inline: 100px;
}

.cpgx-voices__quote {
  margin: 0 0 2em;
  color: var(--asy-ink);
  font-size: 21px;
  line-height: 1.5em;
}

.cpgx-voices__name {
  margin: 0;
  color: var(--asy-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cpgx-voices__arrow {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--asy-ink);
  cursor: pointer;
  transition: transform 0.45s var(--asy-ease), opacity 0.3s;
}

.cpgx-voices__arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.cpgx-voices__arrow--prev { left: 0; }
.cpgx-voices__arrow--next { right: 0; }
.cpgx-voices__arrow--prev:hover { transform: translateX(-5px); }
.cpgx-voices__arrow--next:hover { transform: translateX(5px); }

.cpgx-voices__count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 44px;
  color: var(--asy-ink);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.cpgx-voices__count span[aria-hidden] {
  display: block;
  width: 200px;
  height: 1px;
  background: var(--asy-rule);
}

@media (max-width: 767px) {
  .cpgx-project .cpgx-voices {
    padding-block: 60px;
  }

  .cpgx-voices__slide {
    padding-inline: 0;
  }

  .cpgx-voices__arrow {
    position: static;
    margin: 0;
  }

  .cpgx-voices__count span[aria-hidden] {
    width: 90px;
  }
}

/* ==========================================================================
   8 — PROJECT NAVIGATION
   ========================================================================== */

.cpgx-project .cpgx-pfnav {
  padding-block: 90px 80px;
  background: var(--asy-white);
}

.cpgx-pfnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--asy-rule);
}

.cpgx-pfnav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-basis: 33.3333%;
  margin-block: 20px;
  color: var(--asy-ink);
  line-height: 1.5em;
}

.cpgx-pfnav__link--next {
  justify-content: flex-end;
  text-align: end;
}

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

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

.cpgx-pfnav__text {
  display: flex;
  flex-direction: column;
}

.cpgx-pfnav__subtitle {
  opacity: 0.3;
  font-size: 0.9375em;
}

.cpgx-pfnav__title {
  font-size: 18px;
}

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

.cpgx-pfnav__all span {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--asy-panel);
  transition: opacity 0.3s;
}

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

@media (max-width: 767px) {
  .cpgx-pfnav__link {
    flex-basis: calc(50% - 20px);
  }

  .cpgx-pfnav__title {
    font-size: 16px;
  }
}

/* ==========================================================================
   9 — MOTION
   The reference reveals each block as it enters the viewport; the site's own
   `.cpgh-reveal` observer already does this, so only the distance is tuned.
   ========================================================================== */

html.cpg-motion .cpgx-project .cpgh-reveal {
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--asy-ease), transform 0.9s var(--asy-ease);
}

@media (prefers-reduced-motion: reduce) {
  .cpgx-project * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   THE SUPPLIED REFERENCE'S TWO DEVICES

   1. The hero card — the development's category over a rule, then its number
      and its name.
   2. The section rule — a hairline carrying the section's label on the left
      and its number on the right, opening every anchored section.
   ========================================================================== */
.cpgx-hero__card {
    display: grid;
    gap: .625rem;
    width: min(20rem, 100%);
    margin-block-end: auto;
    text-align: start;
}
.cpgx-hero__card-kind {
    margin: 0 0 .5rem;
    padding-block-end: .625rem;
    border-bottom: 1px solid var(--cpg-ink);
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--cpg-ink);
}
.cpgx-hero__card-name {
    margin: 0;
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--cpg-ink);
}
.cpgx-hero__card-name span { font-weight: 600; }

@media (max-width: 47.999rem) {
    .cpgx-hero__card { max-width: none; }
}

/* ==========================================================================
   THE SUPPLIED REFERENCE'S OWN DEVICES

   A travelling band of the project's own words, one word set over the
   photograph, a line of type down the page's left edge, and the purchase
   steps numbered in outline.
   ========================================================================== */

/* --- The closing story block ---------------------------------------------
   The homepage block's own sheet does the layout; this only adds the lead
   under the heading and the space the validation messages take. */
.cpgx-project .cpgx-story__lead {
    max-width: 44ch;
    margin: 0;
    color: var(--cpg-text-muted);
    font-size: var(--cpg-text-sm);
    line-height: 1.6;
}
.cpgx-project .cpgx-story__alerts:empty { display: none; }
.cpgx-project .cpgx-story__alerts { margin-block-end: 1rem; }

/* --- The band ------------------------------------------------------------- */
/* The section rule above sets every section's rhythm, so this one has to be
   named as a section to close the gap: the band reads as the continuation of
   the movement above it, not as a block with air around it. */
.cpgx-project > section.asy-marquee {
    overflow: hidden;
    padding-block: clamp(0.25rem, 0.8vw, 0.75rem) clamp(2rem, 5vw, 4.5rem);
    background: var(--cpg-white);
}
.asy-marquee__line { overflow: hidden; }
.asy-marquee__track {
    display: flex;
    width: max-content;
    animation: asy-marquee-run 38s linear infinite;
}
.asy-marquee__line--solid .asy-marquee__track { animation-direction: reverse; animation-duration: 46s; }
.asy-marquee__set { display: flex; align-items: center; }
.asy-marquee__word,
.asy-marquee__sep {
    font-family: var(--cpg-font-body, inherit);
    font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.asy-marquee__word { padding-inline: .12em; }
.asy-marquee__sep { padding-inline-end: .12em; }

/* The upper line is drawn in outline, the lower one solid — the reference's
   pairing. */
.asy-marquee__line--ghost .asy-marquee__word,
.asy-marquee__line--ghost .asy-marquee__sep {
    color: transparent;
    -webkit-text-stroke: 1px var(--cpg-ink);
    text-stroke: 1px var(--cpg-ink);
}
.asy-marquee__line--solid .asy-marquee__word,
.asy-marquee__line--solid .asy-marquee__sep { color: var(--cpg-ink); }

@keyframes asy-marquee-run {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* --- One word over the frame ----------------------------------------------
   The extra specificity is deliberate: the page's own paragraph sizing is set
   on a two-class selector and would otherwise win. */
.cpgx-cinematic__media .asy-cinematic-word {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    z-index: 2;
    margin: 0;
    transform: translateY(-50%);
    font-family: var(--cpg-font-body, inherit);
    font-size: clamp(2.75rem, 1rem + 6.4vw, 7.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    text-align: center;
    color: #FFFFFF;
    pointer-events: none;
    text-wrap: balance;
}

/* --- The line down the left edge ------------------------------------------ */
.asy-edge {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: clamp(.5rem, 1.4vw, 1.25rem);
    z-index: 3;
    margin: 0;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--cpg-text-muted);
    pointer-events: none;
}

/* --- The purchase steps, numbered in outline ------------------------------ */
.cpgx-purchase__step { position: relative; }
.cpgx-purchase__number {
    font-family: var(--cpg-font-body, inherit);
    font-size: clamp(3.5rem, 1rem + 7vw, 7.5rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--cpg-rule-strong);
    text-stroke: 1px var(--cpg-rule-strong);
}

@media (max-width: 63.999rem) {
    .asy-edge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .asy-marquee__track { animation: none; }
}

/* --- The closing story block: the cluster at the form's height ------------
   The homepage sets the cluster square, which left it short of the enquiry
   beside it here. On the project page the two columns stretch together and
   the frames are enlarged in proportion to fill the taller cluster. */
@media (min-width: 64rem) {
  .cpgx-project .cpgh-story__inner { align-items: stretch; }
  .cpgx-project .cpgh-story__cluster { aspect-ratio: auto; height: 100%; min-height: 38rem; }
  .cpgx-project .cpgh-story__figure--1 { width: 44%; inset-block-start: 0; }
  .cpgx-project .cpgh-story__figure--2 { width: 46%; inset-inline-end: 2%; inset-block-start: 6%; }
  /* The large frame hangs from the foot of the cluster, so the stack always
     reaches the bottom of the form beside it whatever its height. */
  .cpgx-project .cpgh-story__figure--3 { width: 70%; inset-inline-start: 4%; inset-block-start: auto; inset-block-end: 0; }
  .cpgx-project .cpgh-story__tag { inset-block-end: 0; }
}