/* ==========================================================================
   CPG PROPERTIES — project-rich navigation
   Loaded only by the Properties layout override.
   ========================================================================== */

.cpg-body--properties .cpg-header.is-menu-open {
  background: var(--cpg-bone);
  border-bottom-color: var(--cpg-rule-strong);
  box-shadow: none;
}
.cpg-body--properties .cpg-header.is-menu-open .cpg-wordmark__mark,
.cpg-body--properties .cpg-header.is-menu-open .cpg-menu-toggle,
.cpg-body--properties .cpg-header.is-menu-open .cpg-lang__summary { color: var(--cpg-ink); }
.cpg-body--properties .cpg-header.is-menu-open .cpg-wordmark__qualifier { color: var(--cpg-text-muted); }
.cpg-body--properties .cpg-header.is-menu-open .cpg-crosslink { color: var(--cpg-ink); border-color: var(--cpg-ink); }

.cpg-body--properties .cpg-mega {
  position: fixed;
  inset: var(--cpg-header-height-sm) 0 0;
  max-height: none;
  overflow-y: auto;
  /* The ground is painted by the curtain below, which animates. The panel
     keeps the same colour as a base so that a browser that cannot run the
     animation still opens onto a solid surface. */
  background: var(--cpg-white);
  border-top: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  color: var(--cpg-ink);
}

/* ==========================================================================
   FULLSCREEN MENU CURTAIN
   Ported from the supplied reference. Six columns — two edge columns either
   side of four inside the container — sweeping open one after another from
   left to right, with the menu's own content following them in.

   The states are driven by `is-priming`, not by `is-open`: `is-open` is what
   makes the panel display at all, so a transition keyed off it would have no
   starting frame to run from. The script adds `is-priming` while the panel is
   still being shown and drops it a frame later, which is what actually plays
   the sweep.
   ========================================================================== */
.cpg-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  pointer-events: none;
}
.cpg-curtain__mid {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.cpg-curtain__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.cpg-curtain__col > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cpg-white);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .72s cubic-bezier(.7, 0, .2, 1);
}
.cpg-drawer.is-priming .cpg-curtain__col > span { transform: scaleX(0); }
/* Left to right on the way in. */
.cpg-curtain > .cpg-curtain__col--edge:first-child > span { transition-delay: 0s; }
.cpg-curtain__mid > .cpg-curtain__col:nth-child(1) > span { transition-delay: .06s; }
.cpg-curtain__mid > .cpg-curtain__col:nth-child(2) > span { transition-delay: .12s; }
.cpg-curtain__mid > .cpg-curtain__col:nth-child(3) > span { transition-delay: .18s; }
.cpg-curtain__mid > .cpg-curtain__col:nth-child(4) > span { transition-delay: .24s; }
.cpg-curtain > .cpg-curtain__col--edge:last-child > span { transition-delay: .30s; }

/* And the other way on the way out. */
.cpg-drawer.is-closing .cpg-curtain > .cpg-curtain__col--edge:first-child > span { transition-delay: .30s; }
.cpg-drawer.is-closing .cpg-curtain__mid > .cpg-curtain__col:nth-child(1) > span { transition-delay: .24s; }
.cpg-drawer.is-closing .cpg-curtain__mid > .cpg-curtain__col:nth-child(2) > span { transition-delay: .18s; }
.cpg-drawer.is-closing .cpg-curtain__mid > .cpg-curtain__col:nth-child(3) > span { transition-delay: .12s; }
.cpg-drawer.is-closing .cpg-curtain__mid > .cpg-curtain__col:nth-child(4) > span { transition-delay: .06s; }
.cpg-drawer.is-closing .cpg-curtain > .cpg-curtain__col--edge:last-child > span { transition-delay: 0s; }

/* The menu's own content follows the sweep across, one block after another. */
.cpg-drawer .cpg-mega__inner > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.25, .74, .22, .99), transform .7s cubic-bezier(.25, .74, .22, .99);
}
.cpg-drawer.is-priming .cpg-mega__inner > *,
.cpg-drawer.is-closing .cpg-mega__inner > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.cpg-drawer .cpg-mega__inner > *:nth-child(1) { transition-delay: .52s; }
.cpg-drawer .cpg-mega__inner > *:nth-child(2) { transition-delay: .60s; }
.cpg-drawer .cpg-mega__inner > *:nth-child(3) { transition-delay: .68s; }
.cpg-drawer .cpg-mega__inner > *:nth-child(n + 4) { transition-delay: .76s; }
.cpg-drawer.is-closing .cpg-mega__inner > * { transition-duration: .25s; transition-delay: 0s; }

/* The panel's own ground only appears once the curtain has finished, so the
   sweep is what the visitor sees rather than a flat colour underneath it. */
.cpg-body--properties .cpg-mega { background: transparent; }
.cpg-body--properties .cpg-mega .cpg-mega__inner { position: relative; z-index: 1; }

/* While the drawer is closing the script keeps it in the document for the
   length of the retraction; nothing in it is clickable during that time. */
.cpg-drawer.is-closing { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cpg-curtain__col > span { transition: none; transform: none; }
  .cpg-drawer .cpg-mega__inner > *,
  .cpg-drawer.is-priming .cpg-mega__inner > * { opacity: 1; transform: none; transition: none; }
  .cpg-body--properties .cpg-mega { background: var(--cpg-white); }
}

/* ==========================================================================
   MENU TRIGGER
   The reference's three-bar mark: two short bars that retract while the
   middle one and its crossing twin rotate into a close mark.
   ========================================================================== */
.cpg-body--properties .cpg-menu-toggle__bars {
  gap: 4px;
  width: 25px;
  transition: transform .3s cubic-bezier(.65, .05, .36, 1);
}
.cpg-body--properties .cpg-menu-toggle__bars span {
  position: relative;
  width: 25px;
  background-color: currentColor;
  transition: transform .3s cubic-bezier(.65, .05, .36, 1), opacity .3s;
}
.cpg-body--properties .cpg-menu-toggle__bars span:first-child {
  width: 20px;
  transform-origin: 0 center;
}
.cpg-body--properties .cpg-menu-toggle__bars span:last-child {
  width: 15px;
  transform-origin: 0 center;
}
.cpg-body--properties .cpg-menu-toggle__bars span:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: inherit;
  transform: rotate(0deg) scaleX(0);
  transition: transform .3s cubic-bezier(.65, .05, .36, 1);
}

/* The shared sheet morphs the three bars individually; this replaces that
   with the reference's single rotation of the whole group. */
.cpg-body--properties .cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars {
  transform: rotate(135deg);
  transition-delay: .2s;
}
.cpg-body--properties .cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(1),
.cpg-body--properties .cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(3) {
  transform: scaleX(0);
  opacity: 1;
}
.cpg-body--properties .cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(2) {
  transform: none;
  opacity: 1;
}
.cpg-body--properties .cpg-menu-toggle[aria-expanded="true"] .cpg-menu-toggle__bars span:nth-child(2)::before {
  transform: rotate(90deg) scaleX(1);
  transition-delay: .2s;
}

@media (prefers-reduced-motion: reduce) {
  .cpg-body--properties .cpg-menu-toggle__bars,
  .cpg-body--properties .cpg-menu-toggle__bars span,
  .cpg-body--properties .cpg-menu-toggle__bars span::before { transition: none; }
}
.cpg-body--properties .cpg-mega.is-open { display: block; }
.cpg-mega__inner { padding-block: clamp(1rem, 2.6vh, 2.25rem); }
.cpg-mega__lead {
  display: grid;
  gap: var(--cpg-space-md);
  padding-bottom: clamp(.875rem, 2vh, 1.5rem);
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule-strong);
}
.cpg-mega__eyebrow,
.cpg-mega__label,
.cpg-mega-card__meta {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-copper-ink);
}
.cpg-mega__title {
  max-width: 18ch;
  margin-top: var(--cpg-space-3xs);
  font-family: var(--cpg-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: var(--cpg-display-weight);
  letter-spacing: var(--cpg-display-tracking);
  line-height: 1.05;
}
.cpg-mega__intro { max-width: 42rem; color: var(--cpg-text-muted); }
.cpg-mega__body { display: grid; gap: clamp(1.25rem, 3vw, 3rem); padding-block: clamp(.875rem, 2vh, 1.75rem); }
.cpg-mega__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cpg-mega__all { min-height: 2rem; color: var(--cpg-text); font-size: var(--cpg-text-sm); text-decoration: none; }
.cpg-mega__all:hover { text-decoration: underline; }
.cpg-mega__project-grid { display: grid; gap: var(--cpg-space-sm); }
/* The photograph fills the card at every width and the copy rides over its
   foot, so a phone gets the same card as a desktop rather than the old
   thumbnail-and-list row. */
.cpg-mega-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--cpg-space-sm);
  min-height: 10rem;
  padding: .875rem;
  background: var(--cpg-white);
  border: var(--cpg-border-hair) solid var(--cpg-rule);
  border-radius: 1rem;
  color: var(--cpg-text);
  text-decoration: none;
  transition: transform var(--cpg-duration-fast) var(--cpg-ease), border-color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-mega-card:hover { transform: translateY(-2px); border-color: var(--cpg-copper); }
/* The photograph fills the whole card and the copy rides over its foot. */
.cpg-mega-card { position: relative; overflow: hidden; isolation: isolate; }
.cpg-mega-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
  height: auto;
  border-radius: 0;
  background: var(--cpg-surface-media);
}
.cpg-mega-card__media .cpgh-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.cpg-mega-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 8, 12, .10) 0%, rgba(3, 8, 12, .04) 42%, rgba(3, 8, 12, .78) 100%);
}
.cpg-mega-card__index {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}
.cpg-mega-card__copy { position: relative; z-index: 1; margin-top: auto; color: #FFFFFF; }
.cpg-mega-card__copy strong { color: #FFFFFF; }
.cpg-mega-card__location { color: rgba(255, 255, 255, .78); white-space: normal; }
.cpg-mega-card__arrow { color: #FFFFFF; }
.cpg-mega-card__media .cpgh-media,
.cpg-mega-card__media picture { display: block; width: 100%; height: 100%; }
.cpg-mega-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cpg-mega-card__copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cpg-mega-card__copy strong { font-family: var(--cpg-font-display); font-size: var(--cpg-text-lg); line-height: 1.05; }
.cpg-mega-card__location { overflow: hidden; color: rgba(255, 255, 255, .78); font-size: var(--cpg-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.cpg-mega-card__arrow {
  position: absolute;
  inset-inline-end: .875rem;
  inset-block-start: .875rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--cpg-border-hair) solid rgba(255, 255, 255, .5);
  border-radius: 50%;
}
.cpg-mega__rail { display: grid; gap: var(--cpg-space-xl); }
.cpg-mega__compact,
.cpg-mega__links { display: flex; flex-direction: column; }
.cpg-mega__compact a,
.cpg-mega__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding-block: 0.55rem;
  border-bottom: var(--cpg-border-hair) solid var(--cpg-rule);
  color: var(--cpg-text);
  text-decoration: none;
}
.cpg-mega__compact a { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
.cpg-mega__compact small { color: var(--cpg-text-muted); }
.cpg-mega__links a:hover,
.cpg-mega__compact a:hover { color: var(--cpg-copper-ink); }
.cpg-mega__foot {
  display: flex;
  flex-direction: column;
  gap: var(--cpg-space-sm);
  padding-top: var(--cpg-space-md);
  border-top: var(--cpg-border-hair) solid var(--cpg-rule-strong);
}
.cpg-mega__foot-actions { display: flex; flex-wrap: wrap; gap: var(--cpg-space-2xs); }

@media (min-width: 48rem) {
  .cpg-mega__lead { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); align-items: end; }
  .cpg-mega__project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpg-mega-card {
    min-height: min(18rem, 34vh);
    padding: clamp(.75rem, 1.5vw, 1.125rem);
  }
  .cpg-mega-card__copy { padding: 0; }
  .cpg-mega__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* The open menu is one screen, never a scroll. The panel is exactly as tall
   as the viewport below the header, its middle row takes whatever is left
   over, and the card photographs absorb the difference — so the same menu
   fits a short laptop window and a tall desktop one without either scrolling
   or leaving a hole. */
@media (min-width: 64rem) {
  .cpg-body--properties .cpg-mega { overflow: hidden; }
  .cpg-body--properties .cpg-mega .cpg-mega__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
  }
  /* The height has to travel the whole way down for the photographs to be
     the part that gives: body → projects → grid → item → card → media. A
     single `auto` anywhere in that chain and the card keeps its natural
     height and pushes through the row below it. */
  .cpg-body--properties .cpg-mega__body {
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
  }
  .cpg-body--properties .cpg-mega__projects {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .cpg-body--properties .cpg-mega__project-grid { min-height: 0; }
  .cpg-body--properties .cpg-mega__project-grid > li { min-height: 0; height: 100%; }
  .cpg-body--properties .cpg-mega-card { min-height: 0; height: 100%; }
  /* The photograph is the card's ground now, so the card itself takes the
     height the row can spare rather than a media block inside it. */
  .cpg-body--properties .cpg-mega-card { min-height: 0; height: 100%; }
}

@media (min-width: 64rem) {
  .cpg-body--properties .cpg-menu-toggle { display: inline-flex; }
  .cpg-body--properties .cpg-mega { inset-block-start: var(--cpg-header-height); }
  .cpg-body--properties .cpg-mega.is-open { display: block !important; }
  .cpg-mega__body { grid-template-columns: minmax(0, 2.2fr) minmax(18rem, 0.8fr); }
  .cpg-mega__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   SCROLL INDICATOR
   --------------------------------------------------------------------------
   A vertical "scroll" label above a hairline track whose dot follows the
   reading position, fixed to the right edge and doubling as a link back to
   the top. Ported from the supplied reference and rebuilt on the CPG tokens,
   so it follows the light and dark themes through currentColor.

   Wide screens only, as in the reference: on a narrow viewport the bar would
   sit over the content it is meant to describe.
   ========================================================================== */
.cpg-scroll-indicator {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--cpg-z-sticky);
  display: none;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  /* Never intercepts a click meant for the page behind it. */
  pointer-events: none;
}
.cpg-scroll-indicator[hidden] { display: none; }

@media (min-width: 62rem) {
  .cpg-scroll-indicator:not([hidden]) { display: flex; }
}

.cpg-scroll-indicator__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding-block: .75rem;
  color: var(--cpg-text-muted);
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-scroll-indicator__link:hover { color: var(--cpg-text); }
.cpg-scroll-indicator__link:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring);
  outline-offset: 4px;
  border-radius: var(--cpg-radius-pill);
}

/* The label reads bottom-to-top, as in the reference. */
.cpg-scroll-indicator__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.cpg-scroll-indicator__track {
  position: relative;
  display: block;
  width: 1px;
  height: 3.75rem;
}
/* The faint track is a pseudo-element rather than a dimmed box, so the dot
   inside it is not dragged into the same opacity group. */
.cpg-scroll-indicator__track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: currentColor;
  opacity: .3;
}
.cpg-scroll-indicator__dot {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: -4px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cpg-scroll-indicator__link { transition: none; }
}

/* --------------------------------------------------------------------------
   Language switcher — Properties only

   The shared panel is a hard-edged box. Here it is a soft, rounded sheet with
   no drawn border: the shadow does the separating, and each row rounds with
   it. The shared stylesheet is untouched.
   -------------------------------------------------------------------------- */
.cpg-body--properties .cpg-lang__menu {
  padding: .375rem;
  border: 0;
  border-radius: 1rem;
  background: var(--cpg-white);
  box-shadow:
    0 1px 2px rgba(13, 13, 12, .06),
    0 12px 32px -8px rgba(13, 13, 12, .22);
}
.cpg-body--properties .cpg-lang__link {
  border-radius: .75rem;
  padding-inline: .75rem;
}
.cpg-body--properties .cpg-lang__link:hover { background: var(--cpg-bone); }
/* The shared sheet marks the current language with a tick. Here it is a small
   dot inside a ring — the same mark the rest of this site uses. */
.cpg-body--properties .cpg-lang__link[aria-current="true"]::after {
    content: "";
    flex: none;
    width: .75rem;
    height: .75rem;
    border: 1px solid var(--cpg-ink);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--cpg-ink) 0 40%, transparent 40%) center / 100% 100% no-repeat;
    box-sizing: border-box;
}

/* The display-currency switcher sits beside the language one, same form. */
.cpg-body--properties .cpg-currency { margin-inline-start: .25rem; }
.cpg-body--properties .cpg-currency .cpg-lang__link[aria-disabled="true"] { opacity: .45; }

/* The wordmark, a step larger in the header (2026-09-09). */
.cpg-body--properties .cpg-header .cpg-wordmark { --cpg-wordmark-size: 1.75rem; }
@media (max-width: 47.999rem) { .cpg-body--properties .cpg-header .cpg-wordmark { --cpg-wordmark-size: 1.5rem; } }

/* ==========================================================================
   Responsive pass, 2026-09-09
   -------------------------------------------------------------------------- */
/* iPad landscape (1024) showed the full desktop bar — five links, the
   theme switch, two switchers, the action and the menu — which ran 130px
   past the edge and gave the page a sideways scroll. Below 1200px the bar
   keeps the wordmark, the switchers and the menu; the links live in the
   menu, as they do on the phone. */
@media (min-width: 64rem) and (max-width: 74.999rem) {
  .cpg-body--properties .cpg-header__nav { display: none; }
  .cpg-body--properties .cpg-header__desktop-actions .cpg-btn { display: none; }
  .cpg-body--properties .cpg-header__inner { gap: .75rem; }
}
/* The "all homes" dots in the previous / next rail were a 20px target. */
.cpg-body--properties .cpgx-pfnav__all { min-width: 44px; min-height: 44px; display: grid; place-content: center; }