/* ==========================================================================
   CPG PROPERTIES — HOMEPAGE
   --------------------------------------------------------------------------
   The Figma composition (node 0:3) translated onto the existing CPG token
   system. Loaded ONLY on the Properties homepage, so nothing here can affect
   another route or the shared layer that both platforms verify by checksum.

   Everything is namespaced `cpgh-` (CPG home) so it cannot collide with the
   shared `cpg-` component library, which is still doing the work underneath:
   the header, drawer, language disclosure, footer, badges, status markers and
   form controls are all the shared, already-audited components — this file
   restyles their composition, it does not replace them.

   Colour still comes from the CPG tokens. The Figma's palette is a restrained
   black / white / neutral, which is exactly what --cpg-ink / --cpg-bone
   already are, and Signal Copper stays a controlled highlight rather than a
   surface.
   ========================================================================== */

.cpgh {
  /* ---- Type -------------------------------------------------------------
     The Figma's display voice is large, open and light. It is reproduced here
     without adding a display webfont to the shared CPG typography layer.

     --cpg-font-body resolves to Helvetica Neue / Arial / Noto Sans Georgian.
     Where Helvetica Neue exists it supplies a genuine 300 weight, which is the
     Figma's voice almost exactly; elsewhere it falls back to Arial regular,
     which stays clean and neutral at these sizes. The shared layout may still
     load Noto Sans Georgian for Georgian glyph coverage; this homepage adds
     no font request of its own.

     The CPG wordmark is untouched and keeps its approved Arial Black
     construction — this affects page headings only. Switching the display
     face later is a one-line change to this block. */
  --cpgh-display: var(--cpg-font-body);
  /* The warm ground the About and services screens sit on. */
  --cpgh-warm: #FFFCF8;
  --cpgh-display-weight: 300;
  --cpgh-display-tracking: -0.022em;

  --cpgh-hero-size: clamp(2.75rem, 7.6vw, 6.75rem);
  --cpgh-title-size: clamp(1.875rem, 1.15rem + 2.6vw, 3rem);
  --cpgh-lead-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);

  /* ---- Shape ------------------------------------------------------------
     Large corner radii are the most recognisable trait of the Figma. */
  --cpgh-radius-hero: clamp(1.5rem, 3vw, 3rem);
  --cpgh-radius-panel: clamp(1.25rem, 2.2vw, 2rem);
  --cpgh-radius-card: clamp(1rem, 1.6vw, 1.5rem);
  --cpgh-radius-media: clamp(0.75rem, 1.2vw, 1.25rem);

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

  /* ---- Surfaces ---------------------------------------------------------- */
  /* Surface-only token: never read as a text colour, so it carries the dark
     panel charcoal rather than the ink used for type. */
  --cpgh-ink: var(--cpg-panel-ink, #16181b);
  --cpgh-on-ink: #FFFFFF;
  --cpgh-on-ink-muted: var(--cpg-text-on-ink-muted);
  --cpgh-media: var(--cpg-surface-media);

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

/* Reduce the shared body rhythm on this route: the homepage owns its spacing. */
body:has(.cpgh) main { padding: 0; }

/* ==========================================================================
   HEADER — floating pill navigation over the hero
   --------------------------------------------------------------------------
   The shared header markup is unchanged; this lifts it onto the hero.

   Two rules matter for robustness:

   1. The bar carries its OWN dark gradient. Legibility of white header text
      must not depend on what happens to be composited behind it — otherwise
      any layout edge case (or a full-page capture, which is how this was
      caught) puts white text on the light page ground.

   2. The solid state is driven by `.cpgh-solid`, set by the homepage script,
      not by the shared `.is-scrolled` class. Both scripts toggle on scroll and
      keying off the shared class produced a race where the solid background
      applied but the matching text colours did not.
   ========================================================================== */
@media (min-width: 64rem) {
  body:has(.cpgh) .cpg-header {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: var(--cpg-z-header);
    background: transparent;
    border-bottom: 0;
    transition: background-color var(--cpg-duration-base) var(--cpg-ease);
  }
  body:has(.cpgh) .cpg-header__inner { min-height: 5.25rem; }

  /* The bar's own backdrop, so contrast is guaranteed. */
  body:has(.cpgh) .cpg-header::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 10rem;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(13, 13, 12, 0.72) 0%, rgba(13, 13, 12, 0.34) 55%, rgba(13, 13, 12, 0) 100%);
    transition: opacity var(--cpg-duration-base) var(--cpg-ease);
  }

  body:has(.cpgh) .cpg-header .cpg-wordmark__mark { color: var(--cpg-text-on-ink); }
  body:has(.cpgh) .cpg-header .cpg-wordmark__qualifier { color: rgba(255, 255, 255, 0.9); }

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

  body:has(.cpgh) .cpg-crosslink {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--cpg-text-on-ink);
    border-radius: var(--cpg-radius-pill);
  }
  body:has(.cpgh) .cpg-crosslink:hover { background: #FFFFFF; color: var(--cpg-ink); border-color: #FFFFFF; }
  body:has(.cpgh) .cpg-lang__summary { color: rgba(255, 255, 255, 0.95); }
  body:has(.cpgh) .cpg-menu-toggle { color: var(--cpg-text-on-ink); }
  body:has(.cpgh) .cpg-header .cpg-btn--ink {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--cpg-ink);
    border-radius: var(--cpg-radius-pill);
  }
  body:has(.cpgh) .cpg-header .cpg-btn--ink:hover { background: var(--cpg-copper); border-color: var(--cpg-copper); color: #FFFFFF; }

  /* --- Past the hero: a solid, readable bar ------------------------------- */
  body:has(.cpgh) .cpg-header.cpgh-solid {
    position: fixed;
    background: var(--cpg-bone);
    border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
  }
  body:has(.cpgh) .cpg-header.cpgh-solid::before { opacity: 0; }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-wordmark__mark { color: var(--cpg-ink); }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-wordmark__qualifier { color: var(--cpg-text-muted); }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-crosslink { border-color: var(--cpg-ink); color: var(--cpg-ink); }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-lang__summary { color: var(--cpg-text-subtle); }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-header__nav { background: #FFFFFF; }
  body:has(.cpgh) .cpg-header.cpgh-solid .cpg-btn--ink {
    background: var(--cpg-panel-ink);
    border-color: var(--cpg-panel-ink);
    color: var(--cpg-text-on-ink);
  }

  /* The project-rich menu is a paper surface even while the homepage header
     is floating over its dark hero. Keep the complete header legible whenever
     that menu is open. */
  body:has(.cpgh) .cpg-header.is-menu-open {
    background: var(--cpg-bone);
    border-bottom-color: var(--cpg-rule-strong);
  }
  body:has(.cpgh) .cpg-header.is-menu-open::before { opacity: 0; }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-wordmark__mark,
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-menu-toggle { color: var(--cpg-ink); }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-wordmark__qualifier { color: var(--cpg-text-muted); }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-crosslink { border-color: var(--cpg-ink); color: var(--cpg-ink); }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-lang__summary { color: var(--cpg-text-subtle); }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-header__nav { background: var(--cpg-white); }
  body:has(.cpgh) .cpg-header.is-menu-open .cpg-btn--ink {
    background: var(--cpg-panel-ink);
    border-color: var(--cpg-panel-ink);
    color: var(--cpg-white);
  }
}

/* Below the pill breakpoint the shared sticky bar is kept exactly as audited:
   solid, legible, with the accessible drawer. Only the corners are softened. */
@media (max-width: 63.999rem) {
  body:has(.cpgh) .cpg-header { background: var(--cpg-bone); }
  body:has(.cpgh) .cpg-menu-toggle,
  body:has(.cpgh) .cpg-header .cpg-btn { border-radius: var(--cpg-radius-pill); }
}

/* Homepage masthead over the hero.
   The Properties editorial and dark-theme sheets load after this file and
   deliberately own the solid header used by inner pages. This higher-scope
   top-state rule keeps only the homepage masthead transparent until the hero
   has scrolled away; the solid and open-menu states remain unchanged. */
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: var(--cpg-z-header);
  width: 100%;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open)::before {
  display: none !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-wordmark__mark,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-wordmark__qualifier,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-menu-toggle,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-lang__summary,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-lang[open] .cpg-lang__summary {
  color: #FFFFFF !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-header__nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-nav__link,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-nav__link:hover,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-nav__link[aria-current="page"] {
  background: transparent !important;
  color: #FFFFFF !important;
  border-bottom-color: transparent !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-nav__link:hover,
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-nav__link[aria-current="page"] {
  border-bottom-color: #FFFFFF !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-theme-toggle {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #FFFFFF !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-register {
  background: #FFFFFF !important;
  color: #111111 !important;
  border-color: #FFFFFF !important;
}

:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header:not(.cpgh-solid):not(.is-menu-open) .cpg-register:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #111111 !important;
  border-color: #FFFFFF !important;
}

/* Switching from the over-hero state to sticky positioning after the element
   has already left the top of the document can make it re-enter late. Fixing
   the solid state guarantees the intended immediate hand-off. */
:root body.cpg-body.cpg-body--properties:has(.cpgh)
  .cpg-header.cpgh-solid:not(.is-menu-open) {
  position: fixed !important;
  inset: 0 0 auto !important;
  width: 100%;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.cpgh-hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-end-start-radius: var(--cpgh-radius-hero);
  border-end-end-radius: var(--cpgh-radius-hero);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
  padding-block-start: 7rem;
}

/* ==========================================================================
   PORTFOLIO NAVIGATOR
   ========================================================================== */
.cpgh-navigator { padding-block: clamp(2.25rem, 5vw, 5rem); }
.cpgh-navigator__head {
  display: grid;
  gap: var(--cpg-space-md);
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.cpgh-navigator__head .cpgh-title { max-width: 15ch; }
.cpgh-navigator__head .cpgh-support { align-self: end; max-width: 35rem; }
.cpgh-navigator__grid { display: grid; gap: 0.625rem; }
.cpgh-navigator__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 12rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  overflow: hidden;
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
  color: var(--cpg-text);
  text-decoration: none;
  transition: transform var(--cpgh-speed) var(--cpgh-ease), border-color var(--cpgh-speed) var(--cpgh-ease);
}
.cpgh-navigator__link:hover { transform: translateY(-3px); border-color: var(--cpg-copper); }
.cpgh-navigator__link > span:first-child {
  max-width: 14ch;
  font-size: var(--cpg-text-sm);
  font-weight: 700;
}
.cpgh-navigator__link strong {
  margin-top: auto;
  font-family: var(--cpg-font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: var(--cpg-display-weight);
  letter-spacing: var(--cpg-display-tracking);
  line-height: 0.9;
}
.cpgh-navigator__link small { margin-top: 0.35rem; color: var(--cpg-text-muted); }
.cpgh-navigator__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--cpg-border-hair) solid currentColor;
  border-radius: 50%;
}
.cpgh-navigator__link--ink { background: var(--cpgh-ink); border-color: var(--cpgh-ink); color: var(--cpgh-on-ink); }
.cpgh-navigator__link--ink small { color: var(--cpgh-on-ink-muted); }
.cpgh-navigator__link--copper { background: var(--cpg-copper); border-color: var(--cpg-copper); color: var(--cpg-white); }

@media (min-width: 40rem) {
  .cpgh-navigator__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cpgh-navigator__head { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); }
  .cpgh-navigator__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpgh-navigator__link { min-height: 19rem; }
}
.cpgh-hero__media { position: absolute; inset: 0; z-index: -2; }
.cpgh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cpgh-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two stops, not one: the top keeps the pill nav legible, the bottom keeps
     the headline and the Discover panel legible. */
  background:
    linear-gradient(180deg, rgba(13,13,12,0.66) 0%, rgba(13,13,12,0.22) 24%, rgba(13,13,12,0.62) 58%, rgba(13,13,12,0.92) 100%);
}
/* The header carries its own backdrop gradient (see the header block), so the
   hero does not need a second band here. */

.cpgh-hero__inner {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  /* Asymmetric on purpose: the Discover panel is the hero's last element and
     should sit close to the rounded edge, not float above a dead dark band. */
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2vw, 1.75rem);
}

/* The Figma spreads the headline across the full width in three beats. */
.cpgh-hero__headline {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: var(--cpgh-hero-size);
  line-height: 0.98;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  text-wrap: balance;
  max-width: 20ch;
}
.cpgh-hero__headline em { font-style: normal; color: var(--cpg-copper-lit); }

.cpgh-hero__cols { display: grid; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.cpgh-hero__lead {
  font-size: var(--cpgh-lead-size);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 42ch;
  margin: 0;
}
.cpgh-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Verified flagship facts, never a marketing claim. */
.cpgh-facts {
  display: grid;
  gap: 0.625rem;
  /* The hero photograph is busy exactly where this sits, so the rail carries
     its own quiet plate rather than relying on the gradient alone. */
  padding: clamp(0.875rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.5rem);
  background: rgba(13, 13, 12, 0.42);
  backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cpgh-radius-panel);
}
.cpgh-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpgh-fact { display: grid; gap: 0.125rem; }
.cpgh-fact__value {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  max-width: 18ch;
  text-wrap: balance;
}
.cpgh-fact__label { font-size: var(--cpg-text-xs); color: rgba(255, 255, 255, 0.82); }
.cpgh-facts__note { font-size: var(--cpg-text-2xs); color: rgba(255, 255, 255, 0.68); margin: 0; }

@media (min-width: 64rem) {
  .cpgh-hero__cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .cpgh-facts { justify-items: end; text-align: right; }
  .cpgh-facts__row { justify-content: flex-end; }
  .cpgh-fact { justify-items: end; }
}

/* --- Pill buttons (Figma): label + circular arrow ------------------------ */
.cpgh-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.375rem 0.375rem 0.375rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--cpg-radius-pill);
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cpg-duration-fast) var(--cpg-ease),
              color var(--cpg-duration-fast) var(--cpg-ease),
              border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgh-pill__arrow {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--cpg-radius-pill);
  flex: none;
  transition: transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgh-pill__arrow svg { width: 1rem; height: 1rem; }
.cpgh-pill:hover .cpgh-pill__arrow { transform: translateX(3px); }

.cpgh-pill--light { background: #FFFFFF; color: var(--cpg-ink); }
.cpgh-pill--light .cpgh-pill__arrow { background: var(--cpg-panel-ink); color: #FFFFFF; }
.cpgh-pill--light:hover { background: var(--cpg-copper); color: #FFFFFF; }
.cpgh-pill--light:hover .cpgh-pill__arrow { background: #FFFFFF; color: var(--cpg-copper); }

.cpgh-pill--dark { background: var(--cpg-panel-ink); color: #FFFFFF; }
.cpgh-pill--dark .cpgh-pill__arrow { background: #FFFFFF; color: var(--cpg-ink); }
.cpgh-pill--dark:hover { background: var(--cpg-copper); }

.cpgh-pill--copper { background: var(--cpg-copper); color: #FFFFFF; }
.cpgh-pill--copper .cpgh-pill__arrow { background: #FFFFFF; color: var(--cpg-copper-ink); }
.cpgh-pill--copper:hover { background: var(--cpg-panel-ink); }

.cpgh-pill--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.45); }
.cpgh-pill--ghost .cpgh-pill__arrow { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.cpgh-pill--ghost:hover { background: #FFFFFF; color: var(--cpg-ink); border-color: #FFFFFF; }
.cpgh-pill--ghost:hover .cpgh-pill__arrow { background: var(--cpg-panel-ink); color: #FFFFFF; }

/* ==========================================================================
   DISCOVER PANEL — the Figma's floating panel, carrying the existing search
   ========================================================================== */
/* This element also carries the shared `.cpg-discover` class so the platform's
   Discover contract is preserved. The shared rules paint a copper band meant
   for the interior pages; on the homepage the panel floats on the hero
   instead, so those properties are reset explicitly here. */
.cpgh-discover {
  position: relative;
  z-index: 2;
  border-bottom: 0;
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.375rem);
  background: rgba(13, 13, 12, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cpgh-radius-panel);
}
.cpgh-discover__form { display: grid; gap: 0.625rem; }
/* The assistant field and the two routes beside it. */
.cpgh-discover__row { display: grid; gap: 0.625rem; }
@media (min-width: 48rem) {
  .cpgh-discover__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.cpgh-discover__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1.125rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--cpg-ink);
  border: 1px solid transparent;
  border-radius: var(--cpg-radius-pill);
  font-size: var(--cpg-text-md);
}
.cpgh-discover__input::placeholder { color: var(--cpg-text-muted); }
/* A keyboard visitor still gets a clear focus ring, but a neutral one drawn
   inside the field: the tinted ring the shared token carries read as an
   accent colour on this panel, which it is not meant to be. */
.cpgh-discover__input:focus-visible {
  outline: 2px solid rgba(13, 13, 12, .62);
  outline-offset: -3px;
}
.cpgh-discover__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cpgh-discover__hint {
  margin: 0.75rem 0 0;
  font-size: var(--cpg-text-2xs);
  color: rgba(255, 255, 255, 0.62);
}
@media (min-width: 48rem) {
  .cpgh-discover__form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cpgh-discover__actions { grid-template-columns: repeat(2, auto); }
}

/* ==========================================================================
   SECTION SCAFFOLD — eyebrow / large two-line title / supporting copy
   ========================================================================== */
.cpgh-section { padding-block: var(--cpgh-section-y); }
.cpgh-section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.cpgh-section--flush-top { padding-block-start: 0; }

.cpgh-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cpgh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}
.cpgh-eyebrow::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--cpg-copper);
  flex: none;
}
.cpgh-title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: var(--cpgh-title-size);
  line-height: 1.1;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.cpgh-support {
  margin: 0;
  font-size: var(--cpgh-lead-size);
  line-height: 1.55;
  color: var(--cpg-text-muted);
  max-width: 42ch;
}
@media (min-width: 64rem) {
  /* The eyebrow sits directly above the title and both start on the
     container's left edge. The heading used to be indented into a middle
     column, which left it floating in the middle of the band with the corner
     empty beside it. */
  .cpgh-head {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 3vw, 3rem);
  }
  .cpgh-head > .cpgh-eyebrow { grid-column: 1; grid-row: 1; }
  .cpgh-head > .cpgh-title { grid-column: 1; grid-row: 2; }
  .cpgh-head__support { grid-column: 2; grid-row: 1 / span 2; padding-top: 0.5rem; }
}

.cpgh-rule { border: 0; border-top: 1px solid var(--cpg-rule); margin: 0; }

/* ==========================================================================
   MEDIA PANELS
   ========================================================================== */
.cpgh-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--cpgh-radius-card);
  background: var(--cpgh-media);
  aspect-ratio: var(--cpgh-ratio, 4 / 3);
}
/* <picture> is an inline wrapper by default. Without this the img's
   `height: 100%` has no definite containing block and collapses to auto,
   leaving a stretched panel part-filled. */
.cpgh-media > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.cpgh-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cpgh-focal, 50% 50%);
  display: block;
  transition: transform var(--cpg-duration-slow) var(--cpg-ease);
}

/* Named crops. Each photograph has one subject worth keeping in frame, and
   which part that is belongs in the stylesheet, not in the markup. */
.cpgh-media--focal-center { --cpgh-focal: 50% 50%; }
.cpgh-media--focal-upper  { --cpgh-focal: 50% 32%; }
.cpgh-media--focal-lower  { --cpgh-focal: 50% 68%; }
/* The shoreline render is a tall portrait whose subject sits low in the
   frame; anything higher crops to empty sky. */
.cpgh-media--focal-shore  { --cpgh-focal: 50% 82%; }
.cpgh-media--tall { --cpgh-ratio: 3 / 4; }
.cpgh-media--wide { --cpgh-ratio: 16 / 10; }
.cpgh-media--square { --cpgh-ratio: 1 / 1; }
a:hover > .cpgh-media img,
.cpgh-card:hover .cpgh-media img { transform: scale(1.04); }

.cpgh-caption { display: grid; gap: 0.25rem; margin-top: 0.875rem; }
.cpgh-caption__label { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgh-caption__value {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.01em;
}

/* --- Utility classes that replace inline style attributes ----------------- */
.cpgh-eyebrow--on-dark { color: rgba(255, 255, 255, 0.74); }
.cpgh-eyebrow--on-dark-quiet { color: rgba(255, 255, 255, 0.62); }
.cpgh-figure { margin: 0; }
/* A quiet statement of fact where a section has nothing verified to show. Not
   a placeholder for missing content — the sentence IS the content. */
.cpgh-note {
  margin: 0;
  padding-block-start: 1rem;
  border-block-start: var(--cpg-border-hair) solid var(--cpg-rule);
  max-width: 64ch;
  font-size: var(--cpg-text-sm);
  line-height: 1.6;
  color: var(--cpg-text-muted);
}
.cpgh-list-reset { list-style: none; margin: 0; padding: 0; }
.cpgh-hero__media .cpgh-media,
.cpgh-cta__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }

/* ==========================================================================
   STAGGERED PROJECT MARQUEE — NeoArc reference section
   --------------------------------------------------------------------------
   The source composition shows 3.75 natural-ratio frames on desktop, two on
   tablet and one on mobile. Each frame has its own vertical offset, while the
   whole row advances as a continuous ribbon. JS supplies the seamless motion
   and drag gesture; this remains a complete, readable project row without it.
   ========================================================================== */
.cpgh-project-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 4.375rem 6.25rem;
  background: #FFFFFF;
}

.cpgh-project-marquee__viewport {
  width: 100%;
  /* ((100vw + 80px) / 3.75 - 80px) × 920 / 760 */
  height: calc(32.2807vw - 4.443rem);
  min-height: 16rem;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
}

.cpgh-project-marquee__viewport::-webkit-scrollbar { display: none; }
.cpgh-project-marquee.is-enhanced .cpgh-project-marquee__viewport { overflow: hidden; }
.cpgh-project-marquee:not(.is-enhanced) .cpgh-project-marquee__group[aria-hidden="true"] { display: none; }
.cpgh-project-marquee__viewport.is-dragging { cursor: grabbing; }
.cpgh-project-marquee__viewport:focus-visible {
  outline: 2px solid var(--cpg-copper-ink);
  outline-offset: -0.25rem;
}

.cpgh-project-marquee__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: flex-start;
  transform: translate3d(0, 0, 0);
  will-change: auto;
  margin-inline: -2.5rem;
}
.cpgh-project-marquee.is-in-view .cpgh-project-marquee__track { will-change: transform; }

.cpgh-project-marquee__group {
  display: flex;
  flex: none;
  height: 100%;
  align-items: flex-start;
}

.cpgh-project-marquee__item {
  --cpgh-marquee-lift: 0rem;
  display: block;
  flex: 0 0 calc((100vw + 5rem) / 3.75);
  width: calc((100vw + 5rem) / 3.75);
  box-sizing: border-box;
  padding-inline: 2.5rem;
  padding-block-start: var(--cpgh-marquee-lift);
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

.cpgh-project-marquee__item--1 { --cpgh-marquee-lift: 0rem; }
.cpgh-project-marquee__item--2 { --cpgh-marquee-lift: 8.75rem; }
.cpgh-project-marquee__item--3 { --cpgh-marquee-lift: 2.5625rem; }
.cpgh-project-marquee__item--4 { --cpgh-marquee-lift: 0.25rem; }
.cpgh-project-marquee__item--5 { --cpgh-marquee-lift: 4.5625rem; }

.cpgh-project-marquee__media {
  width: 100%;
  border-radius: 0;
  background: var(--cpg-surface-media);
}

.cpgh-project-marquee__item--1 .cpgh-project-marquee__media { --cpgh-ratio: 19 / 23; }
.cpgh-project-marquee__item--2 .cpgh-project-marquee__media { --cpgh-ratio: 7 / 5; }
.cpgh-project-marquee__item--3 .cpgh-project-marquee__media { --cpgh-ratio: 1 / 1; }
.cpgh-project-marquee__item--4 .cpgh-project-marquee__media { --cpgh-ratio: 8 / 7; }
.cpgh-project-marquee__item--5 .cpgh-project-marquee__media { --cpgh-ratio: 7 / 5; }

.cpgh-project-marquee__media img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.cpgh-project-marquee__item:hover > .cpgh-project-marquee__media img { transform: none; }

@media (max-width: 63.999rem) {
  .cpgh-project-marquee { padding-block: 0 3.75rem; }
  /* ((100vw + 80px) / 2 - 80px) × 920 / 760 */
  .cpgh-project-marquee__viewport {
    height: calc(60.5263vw - 3.026rem);
    min-height: 24rem;
  }
  .cpgh-project-marquee__item {
    flex-basis: calc((100vw + 5rem) / 2);
    width: calc((100vw + 5rem) / 2);
  }
  .cpgh-project-marquee__item--2 { --cpgh-marquee-lift: 6rem; }
  .cpgh-project-marquee__item--3 { --cpgh-marquee-lift: 2rem; }
  .cpgh-project-marquee__item--5 { --cpgh-marquee-lift: 3.5rem; }
}

@media (max-width: 47.999rem) {
  .cpgh-project-marquee__viewport {
    height: 121.0526vw;
    min-height: 0;
    max-height: none;
  }
  .cpgh-project-marquee__item {
    flex-basis: calc(100vw + 5rem);
    width: calc(100vw + 5rem);
  }
  .cpgh-project-marquee__item--2 { --cpgh-marquee-lift: 4rem; }
  .cpgh-project-marquee__item--3 { --cpgh-marquee-lift: 1rem; }
  .cpgh-project-marquee__item--5 { --cpgh-marquee-lift: 2rem; }
}

/* ==========================================================================
   PLATFORM INTRODUCTION — asymmetric media row
   ========================================================================== */
.cpgh-intro { display: grid; gap: var(--cpgh-gap); }
.cpgh-intro__lead .cpgh-media { --cpgh-ratio: 16 / 11; }
.cpgh-intro__side { display: grid; gap: var(--cpgh-gap); }
@media (min-width: 48rem) {
  .cpgh-intro__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  /* Stretch, not start: the lead panel grows to the height of the two stacked
     satellites so the row reads as one composition instead of leaving a hole
     under the shorter column. */
  .cpgh-intro { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
  .cpgh-intro__lead { display: flex; flex-direction: column; }
  .cpgh-intro__lead .cpgh-media { flex: 1; aspect-ratio: auto; min-height: 26rem; }
  .cpgh-intro__side { grid-template-columns: minmax(0, 1fr); align-content: space-between; }
  .cpgh-intro__side .cpgh-media { --cpgh-ratio: 4 / 3; }
  .cpgh-intro__side .cpgh-media--tall { --cpgh-ratio: 4 / 3; }
}

/* ==========================================================================
   PROOF — asymmetric three-card row (the centre card is taller and darker)
   ========================================================================== */
.cpgh-proof { display: grid; gap: var(--cpgh-gap); align-items: stretch; }
.cpgh-proof__card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-panel);
}
.cpgh-proof__card--feature {
  background: var(--cpgh-ink);
  border-color: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
}
.cpgh-proof__index {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-2xs);
  letter-spacing: 0.12em;
  color: var(--cpg-copper-ink);
}
.cpgh-proof__card--feature .cpgh-proof__index { color: var(--cpg-copper-lit); }
.cpgh-proof__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.cpgh-proof__text { margin: 0; font-size: var(--cpg-text-sm); line-height: 1.6; color: var(--cpg-text-muted); }
.cpgh-proof__card--feature .cpgh-proof__text { color: var(--cpgh-on-ink-muted); }
@media (min-width: 48rem) {
  .cpgh-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpgh-proof__card--feature { transform: translateY(-1.25rem); }
}

/* ==========================================================================
   FEATURED PROJECTS — the Figma's large centre composition + satellites
   ========================================================================== */
.cpgh-projects { display: grid; gap: var(--cpgh-gap); align-items: start; }

.cpgh-feature {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
  border-radius: var(--cpgh-radius-panel);
  overflow: hidden;
}

/* Each project is a real element rather than a display:contents wrapper.
   That matters: an inline display value beats the [hidden] UA rule, which is
   exactly how a carousel ends up rendering every slide at once. */
.cpgh-feature__panel {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.cpgh-feature__panel[hidden] { display: none; }
.cpgh-feature__body { display: grid; gap: 0.875rem; align-content: space-between; }
/* Two blocks — description and action — so a short fact list does not get
   stretched down the full height of a tall panel. */
.cpgh-feature__top { display: grid; gap: 1.25rem; align-content: start; }
.cpgh-feature__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cpgh-feature__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.cpgh-feature__title a { color: inherit; text-decoration: none; }
.cpgh-feature__title a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.cpgh-feature__location { margin: 0; font-size: var(--cpg-text-sm); color: var(--cpgh-on-ink-muted); }
.cpgh-feature__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--cpg-rule-on-ink);
}
.cpgh-feature__stat { display: grid; gap: 0.125rem; }
.cpgh-feature__stat b {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cpgh-feature__stat span { font-size: var(--cpg-text-2xs); color: var(--cpgh-on-ink-muted); }
.cpgh-feature__media .cpgh-media { --cpgh-ratio: 16 / 11; border-radius: var(--cpgh-radius-media); }
.cpgh-feature__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }

/* The controls sit under the panel content, spanning both columns. */
.cpgh-feature__controls { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .cpgh-feature__controls { position: absolute; inset-block-end: clamp(1.25rem, 2vw, 1.75rem); inset-inline-start: clamp(1.25rem, 2vw, 1.75rem); }
  .cpgh-feature__panel { padding-block-end: 3.5rem; }
}

.cpgh-carousel { display: flex; align-items: center; gap: 0.5rem; }
.cpgh-carousel__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--cpg-duration-fast) var(--cpg-ease), color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgh-carousel__btn:hover { background: #FFFFFF; color: var(--cpg-ink); }
.cpgh-carousel__btn svg { width: 1rem; height: 1rem; }
.cpgh-carousel__count {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-xs);
  color: var(--cpgh-on-ink-muted);
  font-variant-numeric: tabular-nums;
  padding-inline: 0.375rem;
}

.cpgh-satellite { display: grid; gap: var(--cpgh-gap); }
.cpgh-sat {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cpgh-sat .cpgh-media { --cpgh-ratio: 4 / 3; }
.cpgh-sat__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-lg);
  letter-spacing: -0.01em;
  margin: 0;
}
.cpgh-sat__meta { margin: 0; font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }

@media (min-width: 48rem) {
  .cpgh-satellite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgh-feature__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: stretch; }
  .cpgh-feature__media .cpgh-media { height: 100%; aspect-ratio: auto; min-height: 20rem; }
}
@media (min-width: 64rem) {
  /* Stretch both columns so the tall satellite stack and the feature panel
     end on the same line, instead of leaving a hole under the shorter one. */
  .cpgh-projects { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); align-items: stretch; }
  .cpgh-satellite { grid-template-columns: minmax(0, 1fr); align-content: space-between; }
  .cpgh-feature { height: 100%; }
  .cpgh-feature__panel { align-content: stretch; }
  .cpgh-sat { display: flex; flex-direction: column; }
  .cpgh-sat .cpgh-media { flex: 1; aspect-ratio: auto; min-height: 13rem; }
}

/* Project badge, reusing the shared badge but on the dark panel. */
.cpgh-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--cpg-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cpgh-badge--status { background: var(--cpg-copper); }
.cpgh-badge--note { background: transparent; color: var(--cpg-copper-lit); box-shadow: inset 0 0 0 1px currentColor; }

/* ==========================================================================
   COMPLETED PROJECTS — a separate historic portfolio
   ========================================================================== */
.cpgh-completed {
  display: grid;
  gap: var(--cpgh-gap);
}
.cpgh-completed__link {
  display: grid;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--cpgh-radius-panel);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
  text-decoration: none;
  box-shadow: 0 22px 50px -38px rgba(13, 13, 12, 0.72);
}
.cpgh-completed__media { min-height: 16rem; }
.cpgh-completed__media .cpgh-media {
  height: 100%;
  min-height: inherit;
  border-radius: 0;
}
.cpgh-completed__media img {
  transition: transform 700ms var(--cpg-ease);
}
.cpgh-completed__link:hover .cpgh-completed__media img { transform: scale(1.025); }
.cpgh-completed__body {
  display: grid;
  gap: 0.875rem;
  align-content: end;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.cpgh-completed__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: var(--cpgh-display-tracking);
  text-wrap: balance;
}
.cpgh-completed__meta {
  margin: 0;
  color: var(--cpgh-on-ink-muted);
  font-size: var(--cpg-text-sm);
}
.cpgh-completed__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  width: fit-content;
  padding-top: 0.375rem;
  color: #FFFFFF;
  font-size: var(--cpg-text-sm);
  font-weight: 700;
}
@media (min-width: 48rem) {
  .cpgh-completed__link { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.8fr); }
  .cpgh-completed__media { min-height: 24rem; }
}

/* ==========================================================================
   BUYER JOURNEY — numbered rows
   ========================================================================== */
.cpgh-journey { display: grid; }
.cpgh-step {
  display: grid;
  gap: 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--cpg-rule);
  align-items: start;
}
.cpgh-step:last-child { border-bottom: 1px solid var(--cpg-rule); }
.cpgh-step__n {
  font-family: var(--cpg-font-mono);
  font-size: var(--cpg-text-sm);
  color: var(--cpg-copper-ink);
  font-variant-numeric: tabular-nums;
}
.cpgh-step__body { display: grid; gap: 0.875rem; align-content: start; }
.cpgh-step__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 18ch;
}
.cpgh-step__text { margin: 0; font-size: var(--cpg-text-sm); line-height: 1.6; color: var(--cpg-text-muted); max-width: 34ch; }
.cpgh-step__media {
  position: relative;
  padding: 0.625rem;
  background: var(--cpgh-ink);
  border-radius: var(--cpgh-radius-panel);
}
.cpgh-step__media .cpgh-media { --cpgh-ratio: 16 / 7; border-radius: var(--cpgh-radius-media); }
@media (min-width: 64rem) {
  .cpgh-step {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .cpgh-step__media .cpgh-media { --cpgh-ratio: 16 / 8; }
}

/* ==========================================================================
   AVAILABILITY STRIP
   ========================================================================== */
.cpgh-units { display: grid; gap: var(--cpgh-gap); }
.cpgh-unit {
  display: grid;
  gap: 0.375rem;
  align-content: start;
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  background: #FFFFFF;
  border: 1px solid var(--cpg-rule);
  border-radius: var(--cpgh-radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cpg-duration-fast) var(--cpg-ease), transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpgh-unit:hover { border-color: var(--cpg-border-control); transform: translateY(-2px); }
.cpgh-unit__project { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgh-unit__ref {
  font-family: var(--cpgh-display);
  font-weight: 500;
  font-size: var(--cpg-text-lg);
  letter-spacing: -0.01em;
}
.cpgh-unit__price {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  letter-spacing: -0.02em;
  color: var(--cpg-copper-ink);
  font-variant-numeric: tabular-nums;
}
.cpgh-unit__meta { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
@media (min-width: 34rem) { .cpgh-units { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cpgh-units { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.cpgh-insights { display: grid; gap: var(--cpgh-gap); }
.cpgh-insight {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--cpg-rule);
}
.cpgh-insight__date { font-size: var(--cpg-text-xs); color: var(--cpg-text-muted); }
.cpgh-insight__title {
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: var(--cpg-text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.cpgh-insight__title a { color: inherit; text-decoration: none; }
.cpgh-insight__title a:hover { text-decoration: underline; text-underline-offset: 0.16em; }
@media (min-width: 48rem) { .cpgh-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   CLOSING CTA — full-bleed rounded panel
   ========================================================================== */
/* Also carries the shared `.cpg-register` class. Both are dark surfaces, so
   only the layout differs. */
.cpgh-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--cpgh-radius-hero);
  background: var(--cpgh-ink);
  color: var(--cpgh-on-ink);
  text-align: center;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}
.cpgh-cta__media { position: absolute; inset: 0; z-index: -2; }
.cpgh-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cpgh-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,12,0.72) 0%, rgba(13,13,12,0.62) 55%, rgba(13,13,12,0.80) 100%);
}
.cpgh-cta__inner { display: grid; gap: 1.25rem; justify-items: center; max-width: 48rem; margin-inline: auto; }
.cpgh-cta__title {
  font-family: var(--cpgh-display);
  font-weight: var(--cpgh-display-weight);
  font-size: clamp(1.875rem, 1.1rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--cpgh-display-tracking);
  margin: 0;
  text-wrap: balance;
}
.cpgh-cta__text { margin: 0; font-size: var(--cpgh-lead-size); color: rgba(255,255,255,0.82); max-width: 40ch; }
.cpgh-cta .cpgh-eyebrow { color: rgba(255,255,255,0.72); }

/* ==========================================================================
   FOOTER — dark, rounded top, per the Figma
   ========================================================================== */
body:has(.cpgh) .cpg-footer {
  border-start-start-radius: var(--cpg-radius-md);
  border-start-end-radius: var(--cpg-radius-md);
  border-start-start-radius: clamp(1.5rem, 3vw, 3rem);
  border-start-end-radius: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3vw, 3rem);
}
body:has(.cpgh) .cpg-footer .cpg-wordmark__mark { color: #FFFFFF; }

/* ==========================================================================
   MOTION — opacity/translate reveals only, and never a barrier to content
   ========================================================================== */
.cpgh-reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
html.cpg-motion .cpgh-reveal {
  transition: opacity 620ms var(--cpg-ease), transform 620ms var(--cpg-ease);
}
html.cpg-motion .cpgh-reveal.is-visible,
html:not(.cpg-motion) .cpgh-reveal,
html.no-js .cpgh-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cpgh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cpgh-media img,
  .cpgh-pill__arrow { transition: none !important; }
  a:hover > .cpgh-media img,
  .cpgh-card:hover .cpgh-media img { transform: none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .cpgh-hero { min-height: auto; color: #000; }
  .cpgh-hero__media, .cpgh-hero__scrim, .cpgh-cta__media, .cpgh-cta__scrim { display: none; }
  .cpgh-hero, .cpgh-cta, .cpgh-feature, .cpgh-proof__card--feature { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   HOMEPAGE REFERENCE MODULES
   Ported from the supplied Liquid Themes page and rebuilt on the CPG token
   system: pinned project panels, the counter row, and the story photograph
   cluster with its accordion.

   Each module renders complete and readable before any script runs. The
   enhanced states below are gated on `.is-enhanced`, which the homepage
   script adds only where the behaviour is appropriate — never on a narrow
   screen and never under prefers-reduced-motion.
   ========================================================================== */

/* --- 4. Pinned project panels --------------------------------------------- */
.cpgh-panels { position: relative; background: var(--cpg-white); }
.cpgh-panels__stage { display: grid; }
.cpgh-panels__panel {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.cpgh-panels__viewport { display: block; }
.cpgh-panels__media { position: relative; overflow: hidden; border-radius: var(--cpgh-radius-media); order: 2; }
.cpgh-panels__body { order: 1; }
@media (min-width: 64rem) {
  .cpgh-panels__media { order: 0; }
  .cpgh-panels__body { order: 0; }
}
.cpgh-panels__media .cpgh-media { border-radius: 0; height: 100%; }
.cpgh-panels__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpgh-panels__body { display: grid; gap: 1rem; align-content: center; justify-items: start; }
.cpgh-panels__group { display: grid; gap: 1rem; justify-items: start; width: 100%; }

/* The editorial column follows the supplied reference's distribution: the
   index and place as a small chip, a two-line title whose first line is the
   display italic, the paragraph beneath it, and the link held at the foot of
   the column rather than floating under the text. */
.cpgh-panels__eyebrow {
  margin: 0;
  padding: .3125rem .625rem;
  border-radius: .25rem;
  background: rgba(13, 13, 12, .07);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .0833em;
  text-transform: uppercase;
  color: var(--cpg-ink);
}
.cpgh-panels__title {
  display: grid;
  gap: .1em;
  margin: 0;
  font-family: var(--cpgh-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cpg-ink);
  text-wrap: balance;
}
/* The first line is the lead word, set in italic and closed with a rule the
   way the reference draws it. Decorative, so it is a pseudo-element and never
   reaches the accessible name. */
.cpgh-panels__title > span:first-child:not(:only-child) {
  font-weight: 400;
  font-style: italic;
}
.cpgh-panels__title > span:first-child:not(:only-child)::after {
  content: " \2014";
  font-style: normal;
}
.cpgh-panels__text {
  margin: .25rem 0 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.56;
  color: rgba(13, 13, 12, .75);
}
.cpgh-panels__cta {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  margin-top: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cpg-ink);
  text-decoration: none;
}
/* One link covers the panel, so the whole surface is clickable without a
   second, nameless anchor competing for the tab order. */
.cpgh-panels__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cpgh-panels__cta-rule { display: block; width: 2.25rem; height: 1px; background: currentColor; transition: width var(--cpg-duration-base) var(--cpg-ease); }
.cpgh-panels__cta-icon { transition: transform var(--cpg-duration-base) var(--cpg-ease); }
.cpgh-panels__cta:hover .cpgh-panels__cta-rule { width: 3.25rem; }
.cpgh-panels__cta:hover .cpgh-panels__cta-icon { transform: translateX(4px); }
.cpgh-panels__cta:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 4px; }

/* The foot of the editorial column: paragraph, facts, links. Grouped so the
   whole set can be held at the bottom of the frame rather than trailing the
   title. */
.cpgh-panels__foot { display: grid; gap: clamp(.875rem, 2vh, 1.25rem); justify-items: start; width: 100%; }

/* Facts, in this site's own manner: a hairline over each, a fine line icon
   with no plate behind it, the value first and the label under it in the
   micro-caps used elsewhere on the page. */
.cpgh-panels__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem 1.75rem;
  width: 100%;
  max-width: 28rem;
  margin: 0;
}
.cpgh-facet {
  display: flex;
  align-items: flex-start;
  gap: .5625rem;
  min-width: 0;
  padding-block-start: .6875rem;
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpgh-facet__icon {
  flex: none;
  display: block;
  width: 1rem;
  height: 1rem;
  margin-block-start: .0625rem;
  color: var(--cpg-text-muted);
}
.cpgh-facet__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cpgh-facet__body { display: grid; gap: .125rem; min-width: 0; }
.cpgh-facet__value {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cpg-ink);
  overflow-wrap: anywhere;
}
.cpgh-facet__label {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--cpg-text-muted);
}


.cpgh-panels__media .cpgh-media,
.cpgh-panels__media img { aspect-ratio: 4 / 3; }
.cpgh-panels__dots { display: none; }

@media (min-width: 64rem) {
  .cpgh-panels__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  /* Chip, title and paragraph sit together at the top of the column; the link
     is held at its foot, as in the reference. */
  /* One group, held together and centred: chip, title, paragraph and link
     read as a single column rather than being pushed to opposite ends of the
     screen. */
  /* Chip and title at the top of the frame, the link at its foot, the
     paragraph directly under the title — the column reads down the height of
     the photograph beside it. */
  /* Chip, title, paragraph and facts read as one group held in the middle of
     the frame beside the photograph; the link sits at its foot. */
  .cpgh-panels__body {
    padding-inline-end: clamp(1rem, 4vw, 4rem);
    padding-block: clamp(1rem, 3vh, 2.5rem);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    justify-items: start;
    gap: clamp(.625rem, 1.4vh, 1rem);
  }
  .cpgh-panels__group { align-content: center; gap: clamp(.625rem, 1.4vh, 1rem); }
  .cpgh-panels__foot { gap: clamp(1.25rem, 3.4vh, 2.25rem); margin-block-start: clamp(.75rem, 2vh, 1.5rem); }
  .cpgh-panels__text { margin: 0; }
  .cpgh-panels__cta { align-self: end; margin-top: 0; }
  .cpgh-panels__media .cpgh-media,
  .cpgh-panels__media img { aspect-ratio: auto; height: min(30rem, 62vh); }
}

/* --- 4a. About carousel ----------------------------------------------------
   The supplied reference: a head row of label, number and hairline, then a
   text carousel beside a photograph that changes with it, then a closing
   hairline. The reference's tinted ground and its line-drawing watermark are
   left out — this sits on the page's own surface.
   -------------------------------------------------------------------------- */
/* The closing rule already separates this from what follows, so the foot of
   the section is held tight against the next one. */
.cpgh-about { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.75rem); background: var(--cpgh-warm); }

.cpgh-about__body {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
.cpgh-about__column { display: grid; align-content: start; gap: clamp(1.5rem, 3.5vw, 2.5rem); }

.cpgh-about__title {
  display: grid;
  gap: .1em;
  margin: 0;
  max-width: 15ch;
  font-family: var(--cpgh-display);
  font-size: clamp(1.75rem, 1.05rem + 2.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--cpg-ink);
}
/* The body copy: plain paragraphs, as asked, rather than a numbered list. */
.cpgh-about__copy { max-width: 52ch; }
.cpgh-about__copy,
.cpgh-about__copy p {
  margin: 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--cpg-text);
}

/* Two photographs beside the copy, as in the second reference. */
/* The pair reads as one band at every width: side by side on a phone too,
   because two stacked three-quarter frames turn the block into a scroll. */
.cpgh-about__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, 1.6vw, 1.25rem); }
.cpgh-about__figure { position: relative; overflow: hidden; margin: 0; background: var(--cpg-surface-media, #e9e7e2); }
.cpgh-about__figure img,
.cpgh-about__figure .cpgh-media {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}

.cpgh-about__rule { display: block; height: 1px; background: var(--cpg-rule); }

@media (min-width: 64rem) {
  /* The photographs run off the right edge of the window, as in the
     reference, and the copy is held beside them. */
  .cpgh-about__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
  }
  .cpgh-about__column { padding-block: clamp(1rem, 3vw, 2.5rem); }
  .cpgh-about__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Out to the window's edge: the distance from the container's right edge
       to the viewport, not 50% of this column. */
    margin-inline-end: calc(-1 * ((100vw - min(100vw, var(--cpg-container))) / 2 + var(--cpg-gutter)));
    align-self: start;
  }
  .cpgh-about__figure img,
  .cpgh-about__figure .cpgh-media { aspect-ratio: auto; height: min(38rem, 74vh); }
}


/* Enhanced: the section pins for one viewport per panel and the whole track
   slides vertically by exactly one panel per step — the reference's
   `translate3d(0, -100%, 0)` behaviour — while the editorial column of the
   panel arriving slides in from the right and fades up.

   `--cpgh-panels-count` and `--cpgh-panels-index` are both set by the script,
   so this geometry can never apply without the behaviour that drives it. */
@media (min-width: 64rem) {
  /* The run used to hold a full screen of scroll per panel, which read as the
     page jamming: most of that distance changed nothing. Each panel now takes
     roughly four fifths of a screen, so the section keeps moving. */
  .cpgh-panels.is-enhanced { height: calc(var(--cpgh-panels-count, 1) * 82vh); }
  .cpgh-panels.is-enhanced .cpgh-panels__viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .cpgh-panels.is-enhanced .cpgh-panels__stage {
    display: block;
    height: 100%;
    transform: translate3d(0, calc(var(--cpgh-panels-index, 0) * -100%), 0);
    transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }
  .cpgh-panels.is-enhanced .cpgh-panels__panel {
    height: 100%;
    align-content: center;
    align-items: center;
    padding-block: clamp(1.5rem, 4vh, 3rem);
    padding-inline: var(--cpg-gutter);
  }
  /* Inside the pinned viewport the frame takes the height it is given, less
     the panel's own padding, so nothing is left over below the fold and the
     link at the end of the column is always on screen. */
  .cpgh-panels.is-enhanced .cpgh-panels__media,
  .cpgh-panels.is-enhanced .cpgh-panels__media .cpgh-media,
  .cpgh-panels.is-enhanced .cpgh-panels__media img { height: 100%; }
  /* Only the text column clears the sticky header; the photograph keeps its
     full bleed to the top edge, as in the reference. */
  .cpgh-panels.is-enhanced .cpgh-panels__body {
    padding-block-start: calc(var(--cpg-header-height, 5rem) + clamp(.5rem, 2vh, 1.5rem));
    padding-block-end: clamp(1.5rem, 4vh, 3rem);
  }
  .cpgh-panels.is-enhanced .cpgh-panels__media { align-self: stretch; }
  /* power4.out, matching the reference's easing on the text column. */
  .cpgh-panels.is-enhanced .cpgh-panels__body {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 620ms cubic-bezier(.165, .84, .44, 1),
                transform 620ms cubic-bezier(.165, .84, .44, 1);
  }
  .cpgh-panels.is-enhanced .cpgh-panels__panel.is-active .cpgh-panels__body {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }
  .cpgh-panels.is-enhanced .cpgh-panels__panel {
    padding: 0 var(--cpg-gutter) 0 0;
    /* The photograph fills its half of the viewport, as the reference does;
       only the editorial column stays vertically centred. */
    align-items: stretch;
    align-content: stretch;
  }
  .cpgh-panels.is-enhanced .cpgh-panels__media { height: 100%; border-radius: 0; }
  .cpgh-panels.is-enhanced .cpgh-panels__media .cpgh-media,
  .cpgh-panels.is-enhanced .cpgh-panels__media picture,
  .cpgh-panels.is-enhanced .cpgh-panels__media img { height: 100%; aspect-ratio: auto; }

  .cpgh-panels.is-enhanced .cpgh-panels__dots {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    transform: translateY(-50%);
    z-index: var(--cpg-z-raised);
    display: grid;
    gap: 1rem;
    justify-content: end;
    width: min(var(--cpg-container), 100%);
    margin-inline: auto;
    padding-inline-end: var(--cpg-gutter);
    height: 0;
  }
  /* Fine dots, not buttons: a quiet grey point for each panel and a thin ring
     around the one on screen. The target stays 28px square so it is still
     comfortably clickable, but only the mark is painted. */
  .cpgh-panels.is-enhanced .cpgh-panels__dot {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cpg-radius-pill);
    background: transparent;
    transition: border-color var(--cpg-duration-fast) var(--cpg-ease);
  }
  .cpgh-panels.is-enhanced .cpgh-panels__dot-mark {
    width: .3125rem;
    height: .3125rem;
    border-radius: var(--cpg-radius-pill);
    background: var(--cpg-text-muted);
    transition: background-color var(--cpg-duration-fast) var(--cpg-ease);
  }
  .cpgh-panels.is-enhanced .cpgh-panels__dot:hover .cpgh-panels__dot-mark { background: var(--cpg-panel-ink); }
  .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] { border-color: var(--cpg-panel-ink); }
  .cpgh-panels.is-enhanced .cpgh-panels__dot[aria-current="true"] .cpgh-panels__dot-mark { background: var(--cpg-panel-ink); }
  .cpgh-panels.is-enhanced .cpgh-panels__dot:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }
}

/* --- 3. How buying works ---------------------------------------------------
   Three columns divided by hairlines: a faint index numeral, a heading whose
   first word is the display italic, a short paragraph and an optional link.
   Ported from the supplied reference, including its entry from the right.
   -------------------------------------------------------------------------- */
/* White ground, not the warm bone the rest of the page uses: the section is
   meant to read as a clear break between the portfolio above and the pinned
   panels below. The token follows the theme, so dark mode still gets its own
   surface rather than a white slab. */
.cpgh-process {
  /* The section above already ends on a deep band of air; this one adds none
     of its own at the top and pulls up into it, so the two are not stacking
     two full paddings between the last card and the first step. */
  /* The section above ends on its own deep band of air. That is cancelled
     here so this section sits the same distance from what is above it as from
     what is below it — the value mirrors --cpge-section in
     properties-editorial.css. */
  margin-block-start: calc(-1 * clamp(4.5rem, 7vw, 8rem));
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cpg-white);
  /* The columns arrive from 30px to the right of where they settle, and that
     offset would otherwise widen the page while they are still off-screen. */
  overflow-x: clip;
}
.cpgh-process__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  /* The steps carry their own rules and padding at the wide breakpoint; the
     grid must not add a list indent on top of the container's gutter. */
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpgh-process__grid > li { min-width: 0; }
.cpgh-process__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem clamp(.75rem, 1.6vw, 1.25rem);
  align-items: start;
}
.cpgh-process__index {
  font-family: var(--cpgh-display);
  font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  /* Theme tokens, not literals: this section is on the page in both themes. */
  color: var(--cpg-text-subtle, rgba(13, 13, 12, .3));
  opacity: .6;
}
.cpgh-process__body { display: grid; gap: .625rem; min-width: 0; }
.cpgh-process__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--cpg-ink);
}
.cpgh-process__title i { font-weight: 400; font-style: italic; }
.cpgh-process__text {
  margin: 0;
  max-width: 34ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--cpg-text-muted);
}
.cpgh-process__link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--cpg-ink);
  text-decoration: none;
}
.cpgh-process__link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s cubic-bezier(.25, .74, .22, .99);
}
.cpgh-process__link::after { content: ""; position: absolute; inset: 0; }
.cpgh-process__link:hover svg { transform: translateX(4px); }
.cpgh-process__link:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }

@media (min-width: 48rem) {
  .cpgh-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .cpgh-process__step {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
    border-inline-start: 1px solid var(--cpg-rule);
  }
  .cpgh-process__step:last-child { border-inline-end: 1px solid var(--cpg-rule); }
  /* The rails are inside the grid, so the last column's own border must not
     add width beyond the container. */
  .cpgh-process__grid { max-width: 100%; }
  .cpgh-process__link { align-self: center; }
}

/* The reference's entry: each column arrives from the right as it comes into
   view, one after another. */
html.cpg-motion-x .cpgh-process__step[data-cpgm="slide"] {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1) var(--cpgm-delay, 0ms),
    transform .9s cubic-bezier(.16, 1, .3, 1) var(--cpgm-delay, 0ms);
}
html.cpg-motion-x .cpgh-process__step[data-cpgm="slide"].is-inview {
  opacity: 1;
  transform: none;
}

/* --- The reference's solid action, with its label switching on hover ------- */
.cpgh-switch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 3.5rem;
  padding: 0 clamp(1.75rem, 4vw, 3.9375rem);
  line-height: 1;
  border-radius: 0;
  border: 1px solid var(--cpg-rule-strong, rgba(13, 13, 12, .22));
  background: transparent;
  color: var(--cpg-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .0833em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .45s cubic-bezier(.25, .74, .22, .99);
}
.cpgh-switch-btn:hover { border-color: var(--cpg-ink); }
/* The label and its alternate are two boxes of exactly the button's height,
   stacked; hovering slides the pair up by one box. Sized this way the second
   label sits precisely outside the button until it is wanted. */
.cpgh-switch-btn__txt {
  position: relative;
  display: grid;
  place-items: center;
  height: 3.5rem;
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.25, .74, .22, .99);
}
.cpgh-switch-btn__txt::after {
  content: attr(data-alt);
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  display: grid;
  place-items: center;
  height: 3.5rem;
}
.cpgh-switch-btn:hover .cpgh-switch-btn__txt,
.cpgh-switch-btn:focus-visible .cpgh-switch-btn__txt { transform: translateY(-100%); }
.cpgh-switch-btn:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 3px;
}

/* --- 4b. Wide reel ----------------------------------------------------------
   The supplied reference's centred carousel: one wide frame in the middle of
   the window with its neighbours peeking either side, an arrow pair with the
   slide count between them, and a drag label that follows the pointer.

   The rail is a scroll container with centre snapping, so it works before the
   script does anything; the script only adds the loop, the arrows and the
   label.
   -------------------------------------------------------------------------- */
.cpgh-reel { padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); background: var(--cpg-white); }
.cpgh-reel__viewport { position: relative; }
.cpgh-reel__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92%;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-inline: 4%;
}
.cpgh-reel__rail::-webkit-scrollbar { display: none; }
.cpgh-reel__rail:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 4px; }
.cpgh-reel__slide { scroll-snap-align: center; min-width: 0; }
.cpgh-reel__figure { margin: 0; overflow: hidden; }
.cpgh-reel__media { aspect-ratio: 2257 / 1104; height: auto; }
.cpgh-reel__figure .cpgh-media { overflow: hidden; border-radius: 0; }
.cpgh-reel__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpgh-reel__cursor {
  position: absolute;
  z-index: 3;
  display: none;
  place-items: center;
  width: 6.875rem;
  height: 6.875rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--cpg-ink);
  font-size: .9375rem;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.6);
  transition: opacity .3s linear, transform .45s cubic-bezier(.25, .74, .22, .99);
}
.cpgh-reel__cursor.is-ready { display: grid; }
.cpgh-reel__cursor.is-visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }

.cpgh-reel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
}
.cpgh-reel__nav[hidden] { display: none; }
.cpgh-reel__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cpg-ink);
  cursor: pointer;
  transition: background-color .35s linear;
}
.cpgh-reel__arrow:hover { background: rgba(13, 13, 12, .07); }
.cpgh-reel__arrow:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 2px; }
.cpgh-reel__arrow svg { width: 1.25rem; height: 1.125rem; fill: currentColor; }
.cpgh-reel__count {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: 1rem;
  color: var(--cpg-ink);
  font-variant-numeric: tabular-nums;
}
.cpgh-reel__count-rule { display: block; width: 1.25rem; height: 1px; background: currentColor; }

@media (min-width: 64rem) {
  /* The centre frame takes two thirds of the window so its neighbours read
     clearly either side of it. */
  .cpgh-reel__rail { grid-auto-columns: 66%; }
}

/* --- 4b2. Projects index ---------------------------------------------------
   The supplied reference: a display heading with the count as a superscript
   over a hairline, the list numbered across two columns, the supporting lines
   beneath and a closing hairline.
   -------------------------------------------------------------------------- */
.cpgh-index { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--cpgh-warm); }

.cpgh-index__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block-end: clamp(.5rem, 1.2vw, .75rem);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-ink);
}
.cpgh-index__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(2.5rem, 1rem + 5.4vw, 4.875rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--cpg-ink);
}
.cpgh-index__title sup {
  font-size: .24em;
  font-weight: 500;
  vertical-align: super;
  letter-spacing: 0;
  margin-inline-start: .35em;
}
.cpgh-index__number {
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--cpg-ink);
}

.cpgh-index__list {
  display: grid;
  gap: clamp(.25rem, 1vw, .75rem) clamp(2rem, 6vw, 5rem);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}
.cpgh-index__item { min-width: 0; }
.cpgh-index__link {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.125rem);
  padding-block: clamp(.375rem, 1vw, .625rem);
  color: var(--cpg-ink);
  text-decoration: none;
}
.cpgh-index__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--cpg-border-hair) solid var(--cpg-ink);
  border-radius: 50%;
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color var(--cpg-duration-base) var(--cpg-ease), color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgh-index__name {
  font-family: var(--cpg-font-body, inherit);
  font-size: clamp(1.375rem, .95rem + 1.5vw, 2.1875rem);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: -.01em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--cpg-duration-base) var(--cpg-ease);
}
.cpgh-index__link:hover .cpgh-index__name { background-size: 100% 1px; }
.cpgh-index__link:hover .cpgh-index__num { background: var(--cpg-ink); color: var(--cpg-white); }
.cpgh-index__link:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 4px; }

.cpgh-index__notes {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem) clamp(2rem, 6vw, 5rem);
  margin-block: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}
.cpgh-index__notes p {
  margin: 0;
  max-width: 62ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--cpg-ink);
}

.cpgh-index__rule { display: block; height: 1px; background: var(--cpg-ink); }

@media (min-width: 48rem) {
  /* Numbered down the first column, then the second — the reference's order. */
  .cpgh-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--cpgh-index-rows, 3), auto); }
  .cpgh-index__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cpgh-index__num,
  .cpgh-index__name { transition: none; }
}

/* --- 4c. Figures grid ------------------------------------------------------
   The supplied reference's board: counted figures and photographs alternating
   across three columns. Each figure card is a drawn box with the number at the
   top, its name beneath, the copy held low and one way on at the foot.
   -------------------------------------------------------------------------- */
.cpgh-figures { padding-block: clamp(2.5rem, 5vw, 5rem); background: var(--cpgh-warm); }
.cpgh-figures__grid { display: grid; gap: clamp(1rem, 2vw, 1.875rem); }

.cpgh-figure {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: .5rem;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 2.8vw, 2.5rem) clamp(1.75rem, 3.4vw, 3.125rem) clamp(1.75rem, 3.6vw, 3.25rem);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  background: var(--cpg-white);
}
.cpgh-figure__value {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(3.25rem, 1.4rem + 6.4vw, 6rem);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--cpg-ink);
  font-variant-numeric: tabular-nums;
}
.cpgh-figure__title {
  margin: .25rem 0 0;
  font-family: var(--cpg-font-body, inherit);
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  font-weight: 400;
  line-height: 1.44;
  letter-spacing: -.01em;
  color: var(--cpg-ink);
}
.cpgh-figure__text {
  grid-row: 4;
  margin: 0;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cpg-text-muted);
}
.cpgh-figure__link {
  grid-row: 5;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  color: var(--cpg-ink);
  transition: background-color var(--cpg-duration-base) var(--cpg-ease), border-color var(--cpg-duration-base) var(--cpg-ease), color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgh-figure__link svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cpgh-figure__link:hover { background: var(--cpg-ink); border-color: var(--cpg-ink); color: var(--cpg-white); }
.cpgh-figure__link:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }

/* The photographs between them fill their cell edge to edge. The card's own
   row template is dropped here, or the picture would sit in the first row
   instead of taking the height. */
.cpgh-figure--media {
  display: block;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--cpg-surface-media, #e9e7e2);
}
.cpgh-figure--media .cpgh-media,
.cpgh-figure--media picture {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: clamp(12rem, 30vw, 18rem);
  border-radius: 0;
}
.cpgh-figure--media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 48rem) {
  .cpgh-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* Three columns, so the figures and the photographs fall into the
     reference's chequerboard on their own. */
  .cpgh-figures__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpgh-figure--media .cpgh-media,
  .cpgh-figure--media picture { min-height: 0; }
}

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

/* --- 4d. Delivered portfolio -----------------------------------------------
   The supplied reference's carousel: rounded frames, the project's name set
   vertically down the right edge, square controls beneath.

   The rail is a scroll container with snap points rather than a scripted
   slider, so it can be dragged, flicked, wheeled and tabbed through with no
   JavaScript at all. The buttons only step the same scroll.
   -------------------------------------------------------------------------- */
.cpgh-portfolio { padding-block: clamp(2.5rem, 5vw, 5rem); background: var(--cpg-white); }
.cpgh-portfolio__head { margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.cpgh-portfolio__title { margin: 0; }

/* Full bleed: the frames run edge to edge of the window rather than sitting
   inside the text column, and only their first one lines up with it. */
.cpgh-portfolio__frame {
  position: relative;
  margin-inline: calc(50% - 50vw);
}
.cpgh-portfolio__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(92%, 34rem);
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block-end: .25rem;
}
/* The rail opens in the corner of the window — no margin before the first
   frame — and runs off the right edge. The extra specificity is deliberate:
   the list reset this element also carries would otherwise flatten the
   padding. */
.cpgh-portfolio__frame .cpgh-portfolio__rail {
  --cpgh-rail-inset: 0px;
  padding-inline: var(--cpgh-rail-inset) var(--cpg-gutter);
  scroll-padding-inline-start: var(--cpgh-rail-inset);
}
.cpgh-portfolio__rail::-webkit-scrollbar { display: none; }
.cpgh-portfolio__rail:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 4px;
}
.cpgh-portfolio__slide { scroll-snap-align: start; min-width: 0; }
/* A portfolio of one is not a carousel: the single frame takes the full
   width rather than sitting in a half-empty row. */
.cpgh-portfolio__rail--single { grid-auto-columns: calc(100vw - var(--cpg-gutter)); }

.cpgh-pf {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 6px;
  aspect-ratio: 1186 / 836;
  isolation: isolate;
  background: var(--cpg-surface-media, #e9e7e2);
}
.cpgh-pf__media { position: absolute; inset: 0; z-index: -2; display: block; }
.cpgh-pf__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.cpgh-pf__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpgh-pf__media .cpgh-media,
.cpgh-pf__media img { transition: transform .8s cubic-bezier(.25, .74, .22, .99); }
.cpgh-pf:hover .cpgh-pf__media img,
.cpgh-pf:focus-within .cpgh-pf__media img { transform: scale(1.06); }
.cpgh-pf__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 8, 12, 0) 45%, rgba(3, 8, 12, .62) 100%);
}
/* Hover: a wash over the whole frame, so the name and the status read against
   the photograph rather than only against its right-hand edge. */
.cpgh-pf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 8, 12, .34);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.25, .74, .22, .99);
  pointer-events: none;
}
.cpgh-pf:hover::after,
.cpgh-pf:focus-within::after { opacity: 1; }
.cpgh-pf__details { transition: transform .6s cubic-bezier(.25, .74, .22, .99); }
.cpgh-pf:hover .cpgh-pf__details,
.cpgh-pf:focus-within .cpgh-pf__details { transform: rotate(180deg) translateY(-.375rem); }

/* The name runs bottom-to-top down the right-hand edge, as in the reference. */
.cpgh-pf__details {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: .75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.cpgh-pf__name { margin: 0; font-size: clamp(1rem, .85rem + .5vw, 1.25rem); font-weight: 600; line-height: 1.2; }
.cpgh-pf__link { color: #FFFFFF; text-decoration: none; }
.cpgh-pf__link::after { content: ""; position: absolute; inset: 0; }
.cpgh-pf__link:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring-on-ink, #FFFFFF); outline-offset: 4px; }
/* The status sits as a chip in the upper-left corner, so a visitor can tell
   at a glance which developments are still selling and which are finished. */
.cpgh-pf__status {
  position: absolute;
  inset-block-start: clamp(1rem, 2vw, 1.5rem);
  inset-inline-start: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: .3125rem .625rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  color: var(--cpg-ink-surface, #0D0D0C);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cpgh-pf__meta {
  margin: 0;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.cpgh-portfolio__controls { display: flex; gap: .5rem; margin-block-start: clamp(1rem, 2vw, 1.5rem); }
.cpgh-portfolio__controls[hidden] { display: none; }
.cpgh-portfolio__arrow {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  color: var(--cpg-ink-surface, #0D0D0C);
  cursor: pointer;
  transition: opacity .3s linear, background-color .3s linear;
}
.cpgh-portfolio__arrow:hover:not([disabled]) { background: rgba(255, 255, 255, .82); }
.cpgh-portfolio__arrow svg { width: 1rem; height: 1rem; fill: currentColor; }
.cpgh-portfolio__arrow[disabled] { opacity: .35; cursor: default; }
.cpgh-portfolio__arrow:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }

@media (min-width: 64rem) {
  /* Two frames across the window and the third cut in half at the right edge,
     so the rail reads as a rail. Measured against the window rather than the
     text column, so the frames keep their size. */
  .cpgh-portfolio__rail {
    --cpgh-rail-gap: clamp(.75rem, 1.6vw, 1.25rem);
    grid-auto-columns: calc((100vw - 2 * var(--cpgh-rail-gap)) / 2.5);
    gap: var(--cpgh-rail-gap);
  }
  .cpgh-portfolio__rail--single { grid-auto-columns: calc(100vw - var(--cpg-gutter)); }
  /* The controls sit over the foot of the frame, at its left edge. */
  .cpgh-portfolio__controls { position: absolute; inset-block-end: clamp(1.5rem, 3vw, 2.5rem); inset-inline-start: var(--cpg-gutter); margin: 0; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .cpgh-portfolio__rail { scroll-behavior: auto; }
  .cpgh-pf__media .cpgh-media,
  .cpgh-pf__media img,
  .cpgh-pf::after,
  .cpgh-pf__details { transition: none; }
  .cpgh-pf:hover .cpgh-pf__media img { transform: none; }
}

/* --- 4e. Stages ------------------------------------------------------------
   The supplied reference's process rail: the word at display size with the
   count as a superscript, a ring, the lead paragraph, then one bordered card
   per stage.
   -------------------------------------------------------------------------- */
.cpgh-stages { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--cpg-white); }
.cpgh-stages__head {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cpgh-stages__title {
  margin: 0;
  font-family: var(--cpgh-display);
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cpg-ink);
}
.cpgh-stages__title sup { font-size: .28em; font-weight: 400; vertical-align: super; }
.cpgh-stages__mark {
  display: none;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--cpg-rule);
  border-radius: 50%;
  position: relative;
}
.cpgh-stages__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: .375rem;
  height: .375rem;
  margin: -.1875rem 0 0 -.1875rem;
  border-radius: 50%;
  background: var(--cpg-ink);
}
.cpgh-stages__lead {
  max-width: 32ch;
  margin: 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--cpg-text-muted);
}
.cpgh-stages__lead-index {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--cpgh-display);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--cpg-ink);
}

.cpgh-stages__frame { margin-inline: calc(50% - 50vw); }
.cpgh-stages__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 22rem);
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
/* The first card lines up with the heading above it; the rest run off the
   right edge of the window. The extra specificity is deliberate — the list
   reset this element also carries would otherwise flatten the inset. */
.cpgh-stages__frame .cpgh-stages__rail {
  --cpgh-rail-inset: calc((100vw - min(100vw, var(--cpg-container))) / 2 + var(--cpg-gutter));
  padding-inline: var(--cpgh-rail-inset);
  scroll-padding-inline-start: var(--cpgh-rail-inset);
}
.cpgh-stages__rail::-webkit-scrollbar { display: none; }

/* The reference's card: a drawn box with the number and a mark at the top,
   the paragraph held low in the frame and the name on the floor of it.

   The border is not on the card itself: it is drawn by two overlaid frames
   that grow from the top-left corner and meet at the bottom-right, so the box
   draws itself in rather than appearing whole. The card keeps a transparent
   border of the same width, so nothing about the layout moves. */
.cpgh-stage {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  min-height: clamp(17rem, 23vw, 21.5rem);
  min-width: 0;
  padding: clamp(1.375rem, 2.6vw, 2.25rem);
  border: 1px solid var(--cpg-ink);
}

/* Without the motion layer the card keeps its plain drawn box. */
html.cpg-motion-x .cpgh-stage { border-color: transparent; }
html.cpg-motion-x .cpgh-stage::before,
html.cpg-motion-x .cpgh-stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  transition:
    transform var(--cpgm-draw, 620ms) var(--cpgm-ease, cubic-bezier(.25, .74, .22, .99)) var(--cpgm-delay, 0ms),
    opacity 1ms linear var(--cpgm-delay, 0ms);
}
/* Top and right, growing out of the top-left corner. */
html.cpg-motion-x .cpgh-stage::before {
  border-top: 1px solid var(--cpg-ink);
  border-right: 1px solid var(--cpg-ink);
  transform-origin: 0 0;
  transform: scaleX(0);
}
/* Bottom and left, growing out of the bottom-right, so the two meet. */
html.cpg-motion-x .cpgh-stage::after {
  border-bottom: 1px solid var(--cpg-ink);
  border-left: 1px solid var(--cpg-ink);
  transform-origin: 100% 100%;
  transform: scaleX(0);
  transition-delay: calc(var(--cpgm-delay, 0ms) + 120ms);
}
html.cpg-motion-x .cpgh-stage.is-inview::before,
html.cpg-motion-x .cpgh-stage.is-inview::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.cpg-motion-x .cpgh-stage { border-color: var(--cpg-ink); }
  html.cpg-motion-x .cpgh-stage::before,
  html.cpg-motion-x .cpgh-stage::after { display: none; }
}
.cpgh-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cpgh-stage__index {
  font-family: var(--cpgh-display);
  font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--cpg-ink);
}
.cpgh-stage__index span { padding-inline-start: .75em; font-size: .55em; font-weight: 400; }
.cpgh-stage__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cpg-ink); }
.cpgh-stage__text {
  margin: 0;
  align-self: end;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--cpg-ink);
}
.cpgh-stage__title {
  margin: 0;
  align-self: end;
  /* The reference sets the name in the text face at a normal weight, not in
     the heavy display face the rail's own heading uses. */
  font-family: var(--cpg-font-body, inherit);
  font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cpg-ink);
}

@media (min-width: 64rem) {
  /* The word holds the left; the mark and the supporting line are carried
     over to the right edge together. */
  .cpgh-stages__head { grid-template-columns: minmax(0, 1fr) auto auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .cpgh-stages__mark { display: block; }
  .cpgh-stages__rail { grid-auto-columns: min(31%, 26rem); }
}

/* --- 6. Story cluster + accordion ------------------------------------------ */
.cpgh-story { padding-block: clamp(3rem, 5vw, 4.375rem) clamp(4rem, 8vw, 7.5rem); background: var(--cpg-bone); }
.cpgh-story__inner { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
/* The cluster used to run half again as tall as the column beside it, which
   left a hole under the enquiry. It now sits close to the copy's own height. */
.cpgh-story__cluster { position: relative; aspect-ratio: 1; }
.cpgh-story__figure { position: absolute; margin: 0; }
/* The figure carries the crop; the radius and clipping sit on an inner frame so
   the tag can sit proud of the photograph without being clipped away. */
.cpgh-story__figure .cpgh-media,
.cpgh-story__figure picture,
.cpgh-story__figure img {
  width: 100%;
  height: 100%;
  border-radius: var(--cpgh-radius-media);
  overflow: hidden;
  aspect-ratio: auto;
}
.cpgh-story__figure img { display: block; object-fit: cover; }
.cpgh-story__figure--1 { inset-inline-start: 0; inset-block-start: 0; width: 36%; aspect-ratio: 428 / 434; z-index: 2; }
/* Pulled in from the right so its lower corner runs behind the large frame,
   which sits a layer above it. */
.cpgh-story__figure--2 { inset-inline-end: 10%; inset-block-start: 10%; width: 38%; aspect-ratio: 482 / 536; z-index: 1; }
.cpgh-story__figure--3 { inset-inline-start: 4%; inset-block-start: 28%; width: 58%; aspect-ratio: 615 / 751; z-index: 3; }
.cpgh-story__tag {
  position: absolute;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(-2rem, -1.5vw, -0.75rem);
  z-index: 4;
}
.cpgh-story__tag a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding-inline: 1.125rem;
  border-radius: var(--cpg-radius-pill);
  background: var(--cpg-panel-ink);
  color: var(--cpg-white);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.cpgh-story__tag a:hover { background: var(--cpg-copper); }
.cpgh-story__tag a:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }
.cpgh-story__body { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: center; }
.cpgh-story__title {
  display: grid;
  margin: 0;
  font-family: var(--cpgh-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.8125rem);
  line-height: 1.11;
  letter-spacing: -.02em;
  color: var(--cpg-ink);
}
.cpgh-story__accordion { display: grid; }
.cpgh-story__item { border-top: 1px solid var(--cpg-rule); }
.cpgh-story__item:last-child { border-bottom: 1px solid var(--cpg-rule); }
.cpgh-story__item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1.0625rem;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cpg-ink);
  list-style: none;
}
.cpgh-story__item-title::-webkit-details-marker { display: none; }
.cpgh-story__item-title:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 2px; }
.cpgh-story__expander { position: relative; flex: none; width: 1rem; height: 1rem; }
.cpgh-story__expander::before,
.cpgh-story__expander::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--cpg-duration-base) var(--cpg-ease);
}
.cpgh-story__expander::after { transform: rotate(90deg); }
.cpgh-story__item[open] .cpgh-story__expander::after { transform: rotate(0deg); }
.cpgh-story__panel { padding-block: 0 1.25rem; }
.cpgh-story__panel p { margin: 0; max-width: 52ch; font-size: .875rem; line-height: 1.57; color: rgba(13, 13, 12, .75); }
@media (max-width: 47.999rem) {
  /* The overlap needs width to read; below 48rem the frames stack plainly. */
  .cpgh-story__cluster { aspect-ratio: auto; display: grid; gap: 1rem; }
  .cpgh-story__figure { position: relative; inset: auto; width: 100%; }
  .cpgh-story__figure--1 { aspect-ratio: 16 / 11; }
  .cpgh-story__figure--2 { aspect-ratio: 16 / 11; }
  .cpgh-story__figure--3 { aspect-ratio: 4 / 3; }
  .cpgh-story__tag { inset-inline-end: .75rem; }
}
@media (min-width: 64rem) {
  .cpgh-story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); }
}

/* --- Enquiry, in the column ------------------------------------------------
   The Register Interest fields beside the photographs, kept minimal: no
   plates and no boxes — a micro-caps label over a field that sits on a single
   hairline, the pair of selects beside one another, and a quiet action on the
   same line as the fields above it.
   -------------------------------------------------------------------------- */
.cpgh-story__form { margin: 0; }
.cpgf-stack__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.125rem, 2.6vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
}
.cpgf-stack__field { display: grid; gap: .375rem; margin: 0; min-width: 0; }
.cpgf-stack__field--wide { grid-column: 1 / -1; }
.cpgf-stack__label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--cpg-text-muted);
}
.cpgf-stack__input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  margin: 0;
  padding: 0 0 .5rem;
  border: 0;
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  border-radius: 0;
  background: none;
  color: var(--cpg-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  transition: border-color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgf-stack__input::placeholder { color: var(--cpg-text-muted); opacity: .7; }
.cpgf-stack__input:hover,
.cpgf-stack__input:focus { outline: none; border-bottom-color: var(--cpg-ink); }
.cpgf-stack__input:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 4px; }
/* The select keeps its own mark rather than the platform's chrome. */
.cpgf-stack__select {
  padding-inline-end: 1.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .5rem top 40%, right .125rem top 40%;
  background-size: .375rem .375rem, .375rem .375rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The action sits on the line the fields keep, not across the column. */
.cpgf-stack__submit {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 2.75rem;
  margin-block-start: .25rem;
  padding-inline: clamp(1.25rem, 3vw, 1.875rem);
  border: var(--cpg-border-hair) solid var(--cpg-ink);
  border-radius: 0;
  background: none;
  color: var(--cpg-ink);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--cpg-duration-base) var(--cpg-ease), color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgf-stack__submit:hover { background: var(--cpg-ink); color: var(--cpg-white); }
.cpgf-stack__submit:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }

.cpgf-stack__note {
  margin: clamp(.875rem, 2vw, 1.125rem) 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--cpg-text-muted);
}

@media (max-width: 29.999rem) {
  .cpgf-stack__grid { grid-template-columns: minmax(0, 1fr); }
  .cpgf-stack__submit { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .cpgf-stack__input,
  .cpgf-stack__submit { transition: none; }
}

/* --- 7. The map -----------------------------------------------------------
   A full-width band closing the page: no padding of its own, so it meets the
   section above it and the footer below it on a line.
   -------------------------------------------------------------------------- */
.cpgh-map { display: block; margin: 0; padding: 0; line-height: 0; background: var(--cpg-bone); }
.cpgh-map iframe {
  display: block;
  width: 100%;
  height: clamp(10rem, 22vw, 19rem);
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

@media (max-width: 47.999rem) {
  .cpgh-map iframe { height: 9rem; }
}

/* --- Reduced motion for the three modules ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cpgh-panels.is-enhanced .cpgh-panels__stage,
  .cpgh-panels.is-enhanced .cpgh-panels__body,
  .cpgh-panels__cta-rule,
  .cpgh-panels__cta-icon,
  .cpgh-story__expander::before,
  .cpgh-story__expander::after { transition: none !important; }
  .cpgh-panels__cta:hover .cpgh-panels__cta-icon { transform: none; }
  .cpgh-panels.is-enhanced .cpgh-panels__body { opacity: 1; transform: none; }
  .cpgh-story__figure { transform: none !important; }
}

/* ==========================================================================
   HERO INTRO CARDS
   --------------------------------------------------------------------------
   Ported from the supplied reference: one statement card at 6/11 of the row
   and two square photographic links at 2.5/11 each, sharing a band that sits
   on the foot of the hero.

   The reference's accent colour is deliberately not reproduced. The statement
   card takes CPG's own ink surface, so the row belongs to this brand rather
   than borrowing another one.

   The row's height is set by the square cards and the statement card
   stretches to match, so the three stay aligned whatever the gap.
   ========================================================================== */
.cpgh-intro-cards {
  position: relative;
  z-index: 2;
}
/* One group per hero slide, stacked in the same cell; only the current one is
   painted. Without JavaScript the first group is the visible one and the rest
   simply follow it in the flow, so nothing is lost. */
/* One explicit column, capped at the container: without the minmax() the
   stacked rows size the column to their own max-content and the band spills
   past the right edge of the page. */
.cpgh-intro-cards__groups { display: grid; grid-template-columns: minmax(0, 1fr); }
.cpgh-intro-cards__row { display: grid; min-width: 0; gap: clamp(.5rem, 1vw, .875rem); }
.cpgh-intro-cards__row > * { min-width: 0; }
.cpgh-anim .cpgh-intro-cards__row {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity .8s cubic-bezier(.25, .74, .22, .99),
              transform .8s cubic-bezier(.25, .74, .22, .99),
              visibility 0s linear .8s;
}
.cpgh-anim .cpgh-intro-cards__row.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.cpgh-intro-card {
  position: relative;
  overflow: clip;
  display: block;
  border-radius: var(--cpgh-radius-media);
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
}
.cpgh-intro-card--large {
  /* Text only, no media: nothing here needs clipping, and clipping it stopped
     the row growing to fit the facts and the actions. */
  overflow: visible;
  background: var(--cpgh-ink, var(--cpg-panel-ink));
  padding: clamp(.875rem, 1.5vw, 1.375rem);
}
/* The square only governs the card while its height is free. Once the row is
   taller than the square — the statement card decides that — the explicit
   width stops the ratio transferring that height back into the inline axis
   and blowing the band past the page. */
.cpgh-intro-card--small { width: 100%; aspect-ratio: 1; }

.cpgh-intro-card__media { position: absolute; inset: 0; z-index: -2; display: block; }
.cpgh-intro-card__media .cpgh-media { height: 100%; border-radius: 0; aspect-ratio: auto; }
.cpgh-intro-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpgh-intro-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 8, 12, .40) 0%, rgba(3, 8, 12, .12) 42%, rgba(3, 8, 12, .72) 100%);
}

/* Reference geometry: headline top-left, mark top-right, note bottom-right. */
.cpgh-intro-card__headline {
  display: grid;
  gap: .1em;
  margin: 0;
  /* Each CMS line is its own row and should hold on one line; the cap only
     keeps the longest of them clear of the wordmark in the top-right. */
  max-width: 100%;
  font-size: clamp(.9375rem, .78rem + .55vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.cpgh-intro-card__mark {
  position: absolute;
  inset-block-start: clamp(.875rem, 1.5vw, 1.375rem);
  inset-inline-end: clamp(.875rem, 1.5vw, 1.375rem);
}
.cpgh-intro-card__mark .cpg-wordmark__mark { color: #FFFFFF; }
.cpgh-intro-card__mark .cpg-wordmark__qualifier { color: rgba(255, 255, 255, .78); }

.cpgh-intro-card__label {
  position: absolute;
  inset-block-end: clamp(1.125rem, 2vw, 1.75rem);
  inset-inline-end: clamp(1.125rem, 2vw, 1.75rem);
  margin: 0;
  text-align: end;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
.cpgh-intro-card__note {
  margin: 0;
  max-width: 26ch;
  text-align: end;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* The statement card's lower half: the deal facts, then the two actions with
   the project's own meta line opposite them. Everything here is in normal
   flow, so the card grows with its content instead of clipping it. */
.cpgh-intro-card__foot {
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1.125rem);
  align-content: end;
}
.cpgh-intro-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.625rem, 1.4vw, 1rem) clamp(.875rem, 2.2vw, 1.75rem);
  margin: 0;
}
/* Labels sit at the top of the strip and figures share one baseline at the
   foot of it, however many lines a label or a figure runs to. */
.cpgh-intro-facts { align-items: stretch; }
.cpgh-intro-facts__item { display: grid; grid-template-rows: 1fr auto; gap: .35rem; }
.cpgh-intro-facts__label {
  margin: 0;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}
.cpgh-intro-facts__value {
  margin: 0;
  font-size: clamp(1.0625rem, .85rem + .75vw, 1.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.cpgh-intro-card__bottom {
  display: grid;
  gap: clamp(.625rem, 1.4vw, 1rem);
  align-items: end;
}
.cpgh-intro-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 1.2vw, .875rem);
}
.cpgh-intro-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 2.5rem;
  padding: 0 clamp(.875rem, 1.8vw, 1.375rem);
  border: 1px solid transparent;
  border-radius: .625rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .4s cubic-bezier(.25, .74, .22, .99),
              color .4s cubic-bezier(.25, .74, .22, .99),
              border-color .4s cubic-bezier(.25, .74, .22, .99);
}
/* Literal values, not tokens: this card is a dark panel in both themes, so a
   token that flips for dark mode would paint a near-black button on a
   near-black card. */
.cpgh-intro-action--form {
  background: #ECE9E2;
  color: #0D0D0C;
}
.cpgh-intro-action--form:hover { background: #FFFFFF; }
.cpgh-intro-action--whatsapp {
  background: transparent;
  border-color: rgba(255, 255, 255, .42);
  color: #FFFFFF;
}
.cpgh-intro-action--whatsapp:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .78);
}
.cpgh-intro-action:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 3px;
}
.cpgh-intro-action__icon {
  display: inline-flex;
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
}
.cpgh-intro-action__icon svg { width: 100%; height: 100%; fill: currentColor; }

.cpgh-intro-card__icon {
  position: absolute;
  inset-block-start: clamp(1.125rem, 2vw, 1.75rem);
  inset-inline-end: clamp(1.125rem, 2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
}
.cpgh-intro-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a.cpgh-intro-card .cpgh-intro-card__media {
  transition: transform .5s cubic-bezier(.25, .74, .22, .99);
}
a.cpgh-intro-card:hover .cpgh-intro-card__media { transform: scale(1.1); }
a.cpgh-intro-card:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 3px;
}

/* Tablet: the statement card takes a full row of its own and the two links
   pair up beneath it. Squeezing all three into one row at this width left the
   links as slivers. */
@media (min-width: 48rem) {
  .cpgh-intro-cards__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .cpgh-intro-card--large { grid-column: 1 / -1; }
  /* The headline holds the top of the card, the facts and the actions the
     foot, whatever height the square cards beside it settle on. */
  .cpgh-intro-card--large {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    gap: clamp(1rem, 2vw, 1.625rem);
  }
  /* Clear of the wordmark parked in the top-right corner. */
  .cpgh-intro-card__headline { max-width: 58%; }
  .cpgh-intro-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpgh-intro-card__bottom {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
  }
  .cpgh-intro-card__bottom .cpgh-intro-card__note { justify-self: end; max-width: 30ch; }
}

/* --- Phones: the statement card ------------------------------------------
   There is no corner to park the wordmark in at this width, so it takes the
   top of the card in normal flow and the headline follows it. The meta line
   reads from the same edge as everything else. */
@media (max-width: 47.999rem) {
  .cpgh-intro-card--large {
    display: grid;
    gap: clamp(.875rem, 3vw, 1.25rem);
    padding: clamp(1.125rem, 4vw, 1.5rem);
  }
  .cpgh-intro-card__mark { position: static; margin-block-end: -.25rem; }
  .cpgh-intro-card__headline { max-width: 100%; }
  .cpgh-intro-card__note { max-width: none; text-align: start; }
  .cpgh-intro-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgh-intro-action { width: 100%; }
}

@media (min-width: 64rem) {
  /* Desktop: the reference's own three-across geometry. The link cards stop
     being square here — the square was what set the band's height, and the
     band has to stay short enough to finish on the fold. */
  .cpgh-intro-cards__row { grid-template-columns: 6fr 2.5fr 2.5fr; }
  .cpgh-intro-card--large { grid-column: auto; }
  .cpgh-intro-card--small { aspect-ratio: 1.45; }

  /* The band sits on the slide itself rather than below it. The hero's own
     title has been lifted to meet it (properties-editorial.css), so the two
     read as one composition with air between them instead of the title
     resting on the roof of the card. */
  .cpgh-intro-cards { margin-top: calc(-1 * var(--cpgh-band-pull, clamp(12rem, 24vw, 22rem))); }
}

@media (prefers-reduced-motion: reduce) {
  a.cpgh-intro-card .cpgh-intro-card__media { transition: none; }
  a.cpgh-intro-card:hover .cpgh-intro-card__media { transform: none; }
  .cpgh-intro-action { transition: none; }
}

/* Responsive pass, 2026-09-09: the journey steps ran 14px past a phone's
   edge (the grid's negative bleed); on a phone they stack inside the
   container. The about title's long Georgian words wrap inside the column. */
@media (max-width: 63.999rem) {
  .cpgh-process__grid { margin-inline: 0; width: auto; }
  .cpgh-process__step { margin-inline: 0; width: auto; max-width: 100%; }
  .cpgh-process__body { max-width: 100%; }
}
.cpgh-about__title { overflow-wrap: anywhere; }

/* --- The stage frame, drawn as one line (2026-09-09) ------------------------
   One stroke starts at the top-left corner, runs round the box and closes
   on the point it started from. Replaces the two half-frames that used to
   scale in from opposite corners. */
html.cpg-motion-x .cpgh-stage::before,
html.cpg-motion-x .cpgh-stage::after { display: none; }
.cpgh-stage__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.cpgh-stage__line rect {
  fill: none;
  stroke: var(--cpg-ink);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.cpg-motion-x .cpgh-stage { border-color: transparent; }
html.cpg-motion-x .cpgh-stage__line rect {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms cubic-bezier(.4, 0, .2, 1);
}
/* One box at a time: the second starts drawing when the first has closed. */
html.cpg-motion-x .cpgh-stage:nth-child(2) .cpgh-stage__line rect { transition-delay: 1100ms; }
html.cpg-motion-x .cpgh-stage:nth-child(3) .cpgh-stage__line rect { transition-delay: 2200ms; }
html.cpg-motion-x .cpgh-stage:nth-child(4) .cpgh-stage__line rect { transition-delay: 3300ms; }
html.cpg-motion-x .cpgh-stage:nth-child(5) .cpgh-stage__line rect { transition-delay: 4400ms; }
html.cpg-motion-x .cpgh-stage.is-inview .cpgh-stage__line rect { stroke-dashoffset: 0; }
html:not(.cpg-motion-x) .cpgh-stage__line { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cpgh-stage__line { display: none; }
  html.cpg-motion-x .cpgh-stage { border-color: var(--cpg-ink); }
}
/* Micro-caps that were 10px read at 11.5px on a phone (this sheet is on
   every page; the inner-page sheet is not on the homepage). */
@media (max-width: 47.999rem) {
  .cpg-body--properties :is(.cpgf-stack__label, .asy-cols__eyebrow, .cpgh-pf__status, .cpgh-showcase__kicker, .cpgh-hero__kicker) { font-size: .72rem !important; }
}

/* Phone (2026-09-09): the large card on its own row, the two small cards
   side by side beneath it, as on wider screens. */
@media (max-width: 47.999rem) {
  .cpgh-intro-cards__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpgh-intro-card--large { grid-column: 1 / -1; }
  .cpgh-intro-card--small { aspect-ratio: 1; }
}
/* Phone (2026-09-09): the two search actions side by side. */
@media (max-width: 47.999rem) {
  .cpg-body--properties .cpgh-discover__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .cpg-body--properties .cpgh-discover__actions .cpgh-pill { width: 100%; justify-content: center; min-height: 3.25rem; padding-inline: .875rem; }
  .cpg-body--properties .cpgh-discover__actions .cpgh-pill span:first-child { white-space: nowrap; }
}