/* ==========================================================================
   CPG HOLDING — platform layer
   Depends on: tokens.css, base.css, components.css
   Character: calm, editorial, corporate, minimal. Institutional trust.
   This is not a listings portal: no search bar, no filters, no price rails.
   ========================================================================== */

.cpg-body--holding {
  background: var(--cpg-bone);
}

/* --- Hero --------------------------------------------------------------------
   Holding's hero is text-led. When no photography is loaded the ink ground
   plus a fine baseline grid reads as deliberate, not as a broken image. */
.cpg-body--holding .cpg-hero {
  min-height: var(--cpg-hero-min-height);
}
.cpg-body--holding .cpg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--cpg-rule-on-ink) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  opacity: 0.5;
  pointer-events: none;
}
.cpg-body--holding .cpg-hero__title {
  font-size: var(--cpg-text-6xl);
  max-width: 15ch;
}
.cpg-body--holding .cpg-hero__lead {
  max-width: 46ch;
  font-size: var(--cpg-text-lg);
}

/* The project hero carries the floating bar too, so it reserves the same room
   at the top that the home hero does. */
.cpg-body--holding .cpg-hero--project {
  padding-block-start: var(--cpg-shell-h);
}

/* --- Metrics rail ------------------------------------------------------------ */
.cpg-body--holding .cpg-metric__value {
  font-size: var(--cpg-text-4xl);
}
.cpg-body--holding .cpg-metric__note {
  margin-top: var(--cpg-space-sm);
}

/* --- Sectors: editorial rules rather than boxes ------------------------------ */
.cpg-body--holding .cpg-list-item {
  border-top-color: var(--cpg-ink);
  border-top-width: var(--cpg-border-thick);
  padding-block: var(--cpg-space-md) var(--cpg-space-lg);
}

/* --- Sibling module ---------------------------------------------------------- */
.cpg-sibling-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cpg-space-2xs);
  padding: var(--cpg-space-lg);
  border: var(--cpg-border-hair) solid var(--cpg-rule-on-ink);
}
.cpg-sibling-mark .cpg-sibling__label {
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cpg-text-on-ink-dim);
}
@media (min-width: 64rem) {
  .cpg-sibling-mark { padding: var(--cpg-space-2xl); }
}

/* --- Cards keep a flat institutional register -------------------------------- */
.cpg-body--holding .cpg-card { background: var(--cpg-white); }

/* ==========================================================================
   CPG.GE HOME MODULES
   The section set carried over from the live cpg.ge: the group statement and
   the two sectors it specialises in, the portfolio, the track record with the
   councils CPG sits on, and the partner wall.
   ========================================================================== */

/* --- About: statement beside a portrait ------------------------------------- */
.cpg-feature--wide {
  display: grid;
  gap: var(--cpg-space-xl);
  align-items: start;
}
@media (min-width: 64rem) {
  .cpg-feature--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--cpg-space-3xl); }
}

/* --- Specialisation: two sectors, icon above the label ---------------------- */
.cpg-specialisation {
  margin-block-start: var(--cpg-section-y-tight);
  padding-block-start: var(--cpg-space-lg);
  border-top: var(--cpg-border-thick) solid var(--cpg-ink);
}
.cpg-specialisation__title {
  margin: 0 0 var(--cpg-space-lg);
  font-size: var(--cpg-text-2xl);
}
.cpg-specialisation__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--cpg-space-lg) var(--cpg-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-specialisation__item {
  display: flex;
  align-items: center;
  gap: var(--cpg-space-md);
  font-family: var(--cpg-font-display);
  font-size: var(--cpg-text-xl);
  font-weight: var(--cpg-display-weight);
  line-height: var(--cpg-leading-snug);
  text-transform: uppercase;
}
:lang(ka) .cpg-specialisation__item { text-transform: none; }
.cpg-specialisation__icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

/* --- Track record ------------------------------------------------------------ */
.cpg-record {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cpg-space-md) var(--cpg-space-xl);
}
.cpg-record__value {
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: clamp(4rem, 2rem + 9vw, 10rem);
  font-weight: var(--cpg-display-weight);
  line-height: 0.9;
  color: var(--cpg-gold);
}
.cpg-record__text {
  margin: 0;
  max-width: 22ch;
  font-size: var(--cpg-text-2xl);
  white-space: pre-line;
}

/* The record and the councils stand on the site's charcoal — the brand's own
   ground — and close up to the portfolio above them. */
.cpg-section--councils { background: var(--cpg-charcoal-deep); color: var(--cpg-text-on-ink); overflow: hidden; }

/* --- Councils: a rail of boxes ---------------------------------------------
   Built to the supplied reference: outlined boxes 555 wide and 485 tall,
   padded 50, each opening on its number and a small "/", the council's own
   mark where the reference puts a dot, the text held in the middle and the
   name set large at the foot. They run as a rail from the content column's
   left edge, 30px apart, and the arrows step them. On the site's charcoal
   the boxes are drawn as hairlines rather than filled. */
.cpg-councils {
  --cpg-councils-inset: calc(max(0px, (100vw - var(--cpg-container)) / 2) + var(--cpg-gutter));
  position: relative;
  margin-block-start: var(--cpg-space-2xl);
}
.cpg-councils__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cpg-space-md);
  margin: 0 0 var(--cpg-space-lg);
  padding-inline: var(--cpg-councils-inset);
}
.cpg-councils__head .cpg-eyebrow { margin: 0; }
/* The parent is in the selector so this beats the ul[class] reset. */
.cpg-councils .cpg-councils__track {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  padding-inline: var(--cpg-councils-inset);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--cpg-councils-inset);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cpg-councils__track::-webkit-scrollbar { display: none; }
.cpg-councils__track:focus-visible { outline: 2px solid var(--cpg-white); outline-offset: -4px; }
.cpg-council {
  flex: 0 0 min(555px, 84vw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--cpg-space-lg);
  min-height: 485px;
  padding: 50px;
  border: 1px solid var(--cpg-hair-on-dark-strong);
  scroll-snap-align: start;
  color: var(--cpg-text-on-ink);
}
.cpg-council__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cpg-space-md); }
.cpg-council__index {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cpg-white);
}
.cpg-council__index small { font-family: var(--cpg-font-body); font-size: 1rem; font-weight: 300; color: var(--cpg-text-on-ink-dim); }
/* The councils' marks are wide; the box is wider than tall so they read,
   and large enough that the mark carries the box's top the way the
   reference's dot does. */
.cpg-council__icon { flex: none; width: 13rem; height: 5.75rem; object-fit: contain; object-position: right top; }
/* Where the reference puts a dot and the council has no mark of its own. */
.cpg-council__dot { flex: none; width: 10px; height: 10px; margin-block-start: 0.9rem; border-radius: 50%; background: var(--cpg-gold); }
.cpg-council__text {
  align-self: end;
  margin: 0;
  max-width: 44ch;
  font-size: var(--cpg-text-md);
  line-height: 1.6;
  color: var(--cpg-text-on-ink-muted);
}
.cpg-council__title {
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cpg-white);
}
/* --- the arrows, at the head's right ------------------------------------------- */
.cpg-councils__nav { display: flex; gap: 0.5rem; }
.cpg-councils__nav[hidden] { display: none; }
.cpg-councils__btn {
  display: grid;
  place-items: center;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  border: 1px solid var(--cpg-hair-on-dark-strong);
  background: transparent;
  color: var(--cpg-white);
  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);
}
.cpg-councils__btn svg { width: 1.25rem; height: 0.75rem; }
.cpg-councils__btn:hover:not(:disabled) { background: var(--cpg-white); border-color: var(--cpg-white); color: var(--cpg-charcoal-deep); }
.cpg-councils__btn:disabled { opacity: 0.35; cursor: default; }
.cpg-councils__btn:focus-visible { outline: 2px solid var(--cpg-white); outline-offset: 3px; }

@media (max-width: 47.999rem) {
  .cpg-council { min-height: 0; padding: 32px 28px; gap: var(--cpg-space-md); }
  .cpg-council__icon { width: 9.5rem; height: 4.25rem; }
  .cpg-council__index { font-size: 2rem; }
  .cpg-council__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cpg-councils__track { scroll-behavior: auto; }
}

/* --- Partner wall ------------------------------------------------------------ */
/* The partner marks in one row, six to a screen on a desktop (three on a
   tablet, two on a phone), stepped along by the arrows in the heading row;
   nothing moves by itself. The row scrolls by touch as well. */
.cpg-partners-rail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cpg-space-md); margin-bottom: var(--cpg-space-lg); }
.cpg-partners-rail__head h2 { margin: 0; }
.cpg-partners-rail__nav { display: flex; gap: 0.5rem; }
.cpg-partners-rail__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--cpg-hair);
  border-radius: 50%;
  background: transparent;
  color: var(--cpg-charcoal-deep);
  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);
}
.cpg-partners-rail__btn svg { width: 1.125rem; height: 0.625rem; }
.cpg-partners-rail__btn:hover:not(:disabled) { background: var(--cpg-charcoal-deep); border-color: var(--cpg-charcoal-deep); color: var(--cpg-white); }
.cpg-partners-rail__btn:disabled { opacity: 0.3; cursor: default; }
.cpg-partners {
  --cpg-partners-basis: 50%;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cpg-partners::-webkit-scrollbar { display: none; }
@media (min-width: 30rem) { .cpg-partners { --cpg-partners-basis: 33.3334%; } }
@media (min-width: 48rem) { .cpg-partners { --cpg-partners-basis: 25%; } }
@media (min-width: 64rem) { .cpg-partners { --cpg-partners-basis: 16.6667%; } }
.cpg-partners__item {
  flex: 0 0 var(--cpg-partners-basis);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  scroll-snap-align: start;
}
.cpg-partners__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--cpg-duration-base) var(--cpg-ease), opacity var(--cpg-duration-base) var(--cpg-ease), transform var(--cpg-duration-base) var(--cpg-ease);
}
.cpg-partners__item:hover img { filter: none; opacity: 1; transform: scale(1.08); }


@media (prefers-reduced-motion: reduce) {
  .cpg-partners__item img { transition: filter var(--cpg-duration-base) linear, opacity var(--cpg-duration-base) linear; }
  .cpg-partners__item:hover img { transform: none; }
}

/* --- Founders ----------------------------------------------------------------
   One person per row, portrait beside the biography, alternating side so a
   long list does not read as a column of identical blocks. */
.cpg-people { display: flex; flex-direction: column; gap: var(--cpg-section-y-tight); margin: 0; padding: 0; list-style: none; }
.cpg-person { display: grid; gap: var(--cpg-space-lg); align-items: start; }
/* The portraits come in square; they are shown taller than wide, cropped from
   the middle, and on a wider column, so each stands 520px at the full width. */
.cpg-person__portrait.cpg-media--square { aspect-ratio: 4 / 5; }
@media (min-width: 60rem) {
  .cpg-person { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--cpg-space-2xl); }
  .cpg-person:nth-child(even) .cpg-person__portrait { order: 2; }
  .cpg-person:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}
/* Each founder arrives on their own as the page reaches them: the portrait
   slides in from its own side and the biography rises after it, and the
   rows in view together come one after another rather than at once. The
   observer in cpg.js supplies is-visible; without it, or under
   prefers-reduced-motion, everything simply stands. */
.cpg-person.cpg-reveal { transform: none; }
.cpg-person .cpg-person__portrait,
.cpg-person .cpg-person__body { opacity: 0; }
.cpg-person .cpg-person__portrait { transform: translate3d(-28px, 0, 0); }
.cpg-person:nth-child(even) .cpg-person__portrait { transform: translate3d(28px, 0, 0); }
.cpg-person .cpg-person__body { transform: translate3d(0, 18px, 0); }
html.cpg-motion .cpg-person .cpg-person__portrait,
html.cpg-motion .cpg-person .cpg-person__body {
  transition: opacity 640ms var(--cpg-ease) var(--cpg-person-delay, 0ms), transform 720ms var(--cpg-ease) var(--cpg-person-delay, 0ms);
}
html.cpg-motion .cpg-person .cpg-person__body { transition-delay: calc(var(--cpg-person-delay, 0ms) + 160ms); }
.cpg-person:nth-child(2) { --cpg-person-delay: 140ms; }
.cpg-person:nth-child(3) { --cpg-person-delay: 280ms; }
.cpg-person:nth-child(4) { --cpg-person-delay: 420ms; }
.cpg-person:nth-child(n + 5) { --cpg-person-delay: 560ms; }
html.cpg-motion .cpg-person.is-visible .cpg-person__portrait,
html.cpg-motion .cpg-person.is-visible .cpg-person__body,
html:not(.cpg-motion) .cpg-person .cpg-person__portrait,
html:not(.cpg-motion) .cpg-person .cpg-person__body,
html.no-js .cpg-person .cpg-person__portrait,
html.no-js .cpg-person .cpg-person__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cpg-person .cpg-person__portrait,
  .cpg-person .cpg-person__body { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.cpg-person__name { margin: 0 0 var(--cpg-space-2xs); font-size: var(--cpg-text-3xl); }
.cpg-person__role {
  margin: 0 0 var(--cpg-space-md);
  font-size: var(--cpg-text-sm);
  letter-spacing: var(--cpg-eyebrow-tracking);
  text-transform: uppercase;
  /* cpg.ge's accent, not the other platform's copper. */
  color: var(--cpg-gold-ink);
}
:lang(ka) .cpg-person__role { text-transform: none; }
.cpg-person__body > p { max-width: var(--cpg-measure); }
.cpg-person__body > p + p { margin-top: var(--cpg-space-sm); }

/* --- Project gallery ---------------------------------------------------------- */
.cpg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--cpg-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-gallery__item--lead { grid-column: 1 / -1; }

/* --- About: quote, directions, and where the group is based -------------------- */
.cpg-quote { margin: 0; padding: 0; border: 0; }
.cpg-quote p {
  margin: 0 0 var(--cpg-space-md);
  font-size: var(--cpg-text-xl);
  line-height: var(--cpg-leading-snug);
}
.cpg-quote__author {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin: var(--cpg-space-lg) 0 0;
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-on-ink-muted);
}

.cpg-directions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--cpg-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-direction__icon { width: 4.5rem; height: 4.5rem; object-fit: contain; margin-bottom: var(--cpg-space-md); }
.cpg-direction__title { margin: 0 0 var(--cpg-space-2xs); font-size: var(--cpg-text-xl); }
.cpg-direction__text { margin: 0; color: var(--cpg-text-muted); }

.cpg-locus { display: grid; gap: var(--cpg-space-xl); align-items: center; }
@media (min-width: 60rem) { .cpg-locus { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.cpg-locus__map { width: 100%; height: auto; }
.cpg-locus__card { padding: var(--cpg-space-lg); border: var(--cpg-border-thick) solid var(--cpg-ink); }
.cpg-locus__card h3 { margin: 0 0 var(--cpg-space-md); font-size: var(--cpg-text-2xl); }
.cpg-locus__list { display: flex; flex-direction: column; gap: var(--cpg-space-2xs); margin: 0; padding: 0; list-style: none; }

/* --- Footer wordmark ----------------------------------------------------------
   The qualifier is the full company name now, not a single word: the inline
   lockup the mark was sized for runs into the next column, so the footer
   stacks it and sets it at a fixed small size instead of scaling with the mark. */
.cpg-footer .cpg-wordmark {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  white-space: normal;
}
.cpg-footer .cpg-wordmark__qualifier {
  font-size: var(--cpg-text-2xs);
  line-height: var(--cpg-leading-snug);
}

/* ==========================================================================
   FOOTER
   Three bands: the closing invitation over a photograph, the published
   contact details beside the accounts behind a divider, then the base row.
   Built to the layout CPG Properties uses.
   ========================================================================== */

.cpg-body--holding .cpg-footer {
  /* The invitation band runs to the footer's top edge; the padding the shared
     footer carried would show as a black strip above the photograph. */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--cpg-ink); /* the header's black */
  color: var(--cpg-text-on-ink);
}

/* --- Band 1: the invitation, over a photograph ------------------------------- */
.cpg-outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cpg-outro__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cpg-outro__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* The action sits on the right, over whichever part of the photograph
       happens to be brightest, so that side keeps enough scrim to clear
       4.5:1 while the picture still reads. */
    /* Plain black, and lighter than before (2026-09-09): the photograph is
       meant to be seen through it, not buried under it. */
    linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.58) 42%, rgba(0, 0, 0, 0.44) 78%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.20) 100%);
}
.cpg-outro__inner {
  position: relative;
  display: grid;
  gap: var(--cpg-space-lg);
  /* Centred, so the action sits level with the middle of the invitation
     rather than dropping to the foot of the band. */
  align-items: center;
  padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
}
@media (min-width: 48rem) {
  .cpg-outro__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .cpg-outro__cta { justify-self: end; }
}
.cpg-outro__lead { display: grid; gap: var(--cpg-space-md); align-content: center; }
.cpg-outro__title {
  margin: 0;
  max-width: 14ch;
  /* Set in the text face at a light weight, not the condensed display face
     the rest of the page uses for headings. */
  font-family: var(--cpg-font-body);
  font-weight: 300;
  font-size: clamp(2rem, 1rem + 3.4vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--cpg-text-on-ink);
}
.cpg-outro__text {
  margin: 0;
  max-width: 48ch;
  font-size: var(--cpg-text-md);
  font-weight: 300;
  line-height: 1.35;
  color: var(--cpg-text-on-ink);
}
.cpg-outro__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  justify-self: start;
  min-height: 3.25rem;
  padding-inline: clamp(1.5rem, 3vw, 2.25rem);
  border: var(--cpg-border-hair) solid var(--cpg-hair-on-dark-strong);
  color: var(--cpg-text-on-ink);
  font-size: var(--cpg-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--cpg-duration-base) var(--cpg-ease),
    color var(--cpg-duration-base) var(--cpg-ease),
    border-color var(--cpg-duration-base) var(--cpg-ease);
}
:lang(ka) .cpg-outro__cta { text-transform: none; letter-spacing: 0.06em; }
.cpg-outro__cta:hover,
.cpg-outro__cta:focus-visible {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal-deep);
}
.cpg-outro__cta-icon { transition: transform var(--cpg-duration-fast) var(--cpg-ease); }
.cpg-outro__cta:hover .cpg-outro__cta-icon { transform: translateX(4px); }

/* --- Bands 2 and 3 ------------------------------------------------------------ */
.cpgf__inner { display: grid; padding-block: 0 clamp(1.5rem, 2.5vw, 2.25rem); }

.cpgf__row {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding-block-start: clamp(2rem, 4vw, 3.25rem);
  border-top: var(--cpg-border-hair) solid var(--cpg-hair-on-dark);
}
.cpgf__details { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-content: start; }
.cpgf__detail { display: grid; gap: 0.5rem; align-content: start; }
.cpgf__detail-label {
  margin: 0;
  font-size: var(--cpg-text-3xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--cpg-text-on-ink-dim);
}
:lang(ka) .cpgf__detail-label { text-transform: none; letter-spacing: 0.06em; }
.cpgf__detail-value {
  margin: 0;
  max-width: 22ch;
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--cpg-text-on-ink);
}
.cpgf__detail-value a { color: inherit; text-decoration: none; }
.cpgf__detail-value a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.cpgf__contact { display: grid; gap: var(--cpg-space-lg); align-content: start; justify-items: start; }
.cpgf__socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cpgf__social {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border: var(--cpg-border-hair) solid var(--cpg-hair-on-dark-strong);
  border-radius: var(--cpg-radius-pill);
  color: var(--cpg-text-on-ink);
  transition:
    background-color var(--cpg-duration-base) var(--cpg-ease),
    color var(--cpg-duration-base) var(--cpg-ease),
    border-color var(--cpg-duration-base) var(--cpg-ease);
}
.cpgf__social svg { width: 1.1875rem; height: 1.1875rem; }
.cpgf__social:hover,
.cpgf__social:focus-visible {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal-deep);
}
/* An account with no address published yet holds its place in the row and
   does nothing, rather than pointing somewhere it should not. */
.cpgf__social.is-quiet { border-color: var(--cpg-hair-on-dark); color: var(--cpg-text-on-ink-dim); cursor: default; }

.cpgf__base {
  display: grid;
  gap: 1.25rem;
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
  border-top: var(--cpg-border-hair) solid var(--cpg-hair-on-dark);
}
.cpgf__legal { display: grid; gap: 0.2rem; }
.cpgf__legal-line { margin: 0; font-size: var(--cpg-text-sm); line-height: 1.5; color: var(--cpg-text-on-ink-dim); }
.cpgf__legal-name { margin: 0; font-size: var(--cpg-text-sm); font-weight: 600; line-height: 1.5; color: var(--cpg-text-on-ink); }

.cpgf__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.cpgf__links a {
  font-size: var(--cpg-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cpg-text-on-ink);
  text-decoration: none;
  transition: opacity var(--cpg-duration-base) var(--cpg-ease);
}
:lang(ka) .cpgf__links a { text-transform: none; }
.cpgf__links a:hover { opacity: 0.65; }

@media (min-width: 64rem) {
  .cpgf__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .cpgf__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpgf__contact {
    padding-inline-start: clamp(2.5rem, 6vw, 6.75rem);
    border-left: var(--cpg-border-hair) solid var(--cpg-hair-on-dark);
    align-self: stretch;
    align-content: center;
    justify-items: end;
  }
  .cpgf__contact .cpgf__socials { justify-content: flex-end; }
  .cpgf__row--solo { grid-template-columns: minmax(0, 1fr); }
  .cpgf__row--solo .cpgf__contact { padding-inline-start: 0; border-left: 0; }

  .cpgf__base { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem 2rem; }
  .cpgf__links { justify-content: flex-end; }
}

/* Phones: the base row is driven by a thumb, so its targets get a 44px box. */
@media (max-width: 47.999rem) {
  .cpgf__links { gap: 0.25rem 1.25rem; }
  .cpgf__links a,
  .cpgf__detail-value a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .cpgf__social { width: 2.75rem; height: 2.75rem; }
}

/* ==========================================================================
   PORTFOLIO CAROUSEL
   Built to the supplied reference: a two-word heading with the second word in
   the accent, two cards in view bleeding off the right edge, the project name
   set vertically down each card, square controls over the first card's foot,
   and a bordered note underneath.
   ========================================================================== */

/* The band of photographs carries its own ground, so the section around it
   stays on the page's own paper and the heading sits closer to the module
   above it than a full section's leading would put it. */
.cpg-section--portfolio {
  overflow: hidden;
  padding-block-start: var(--cpg-section-y-tight);
  /* The councils follow straight on: nothing between the wall and them. */
  padding-block-end: 0;
  /* White behind the rail, so the cards read as cards against the page's
     bone rather than dissolving into it. */
  background: var(--cpg-white);
}

.cpg-pfhead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em;
  margin: 0 0 clamp(1.75rem, 1rem + 2.4vw, 3rem);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.6875rem);
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
:lang(ka) .cpg-pfhead { text-transform: none; letter-spacing: 0.02em; }
.cpg-pfhead__accent { color: var(--cpg-gold-ink); }

/* --- The note ------------------------------------------------------------------- */
.cpg-pfnote {
  display: inline-block;
  margin: clamp(1.75rem, 1rem + 2.4vw, 3rem) 0 0;
  padding: 0.875rem 1.5rem;
  border: var(--cpg-border-hair) solid var(--cpg-rule-strong);
  border-radius: var(--cpg-radius-pill);
  font-size: var(--cpg-text-sm);
  color: var(--cpg-text-subtle);
}
.cpg-pfnote a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.cpg-pfnote a:hover { color: var(--cpg-gold-ink); }



/* ==========================================================================
   ABOUT — the record, opposite the statement
   Built to the supplied reference: the headline and its opening line on one
   side, the published count set as an outline numeral on the other, with a
   small tracked link beneath it.
   ========================================================================== */

.cpg-record-split__inner {
  display: grid;
  gap: var(--cpg-space-2xl);
  align-items: center;
}
@media (min-width: 64rem) {
  .cpg-record-split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--cpg-space-3xl); }
}

.cpg-record-split__lead { display: grid; gap: var(--cpg-space-md); align-content: center; }
.cpg-record-split__title {
  margin: 0;
  max-width: 16ch;
  font-size: var(--cpg-text-4xl);
  line-height: var(--cpg-leading-tight);
}
.cpg-record-split__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--cpg-text-md);
  line-height: var(--cpg-leading-relaxed);
  color: var(--cpg-text-muted);
}

/* The numeral is drawn, not filled: a hairline outline at a size the rest of
   the page never reaches. */
.cpg-record-split__stat { display: grid; gap: var(--cpg-space-md); justify-items: center; }
.cpg-record-split__figure {
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: clamp(6rem, 2rem + 12vw, 11.25rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--cpg-rule-strong);
}
@supports (-webkit-text-stroke: 1px black) {
  .cpg-record-split__figure {
    -webkit-text-stroke: 1.5px var(--cpg-border-control);
    color: transparent;
  }
}
[data-cpg-surface="ink"] .cpg-record-split__figure { color: var(--cpg-rule-on-ink-strong); }
@supports (-webkit-text-stroke: 1px black) {
  [data-cpg-surface="ink"] .cpg-record-split__figure {
    -webkit-text-stroke: 1.5px var(--cpg-rule-on-ink-strong);
    color: transparent;
  }
}

.cpg-record-split__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  font-size: var(--cpg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cpg-text);
  transition: color var(--cpg-duration-fast) var(--cpg-ease);
}
:lang(ka) .cpg-record-split__link { text-transform: none; letter-spacing: 0.06em; }
[data-cpg-surface="ink"] .cpg-record-split__link { color: var(--cpg-text-on-ink); }
.cpg-record-split__link:hover { color: var(--cpg-gold-ink); }
[data-cpg-surface="ink"] .cpg-record-split__link:hover { color: var(--cpg-gold-on-dark); }
.cpg-record-split__icon { width: 1.25rem; height: 0.75rem; transition: transform var(--cpg-duration-fast) var(--cpg-ease); }
.cpg-record-split__link:hover .cpg-record-split__icon { transform: translateX(4px); }

/* ==========================================================================
   ABOUT — the statement beside the photograph
   Built to the supplied reference and sitting directly beneath the record:
   the photograph takes one half of the page and drifts against the scroll,
   the other half carries the rest of the group's statement, the sectors it
   invests in, and the way through to the portfolio.

   The reference's own measurements, at its 1440px width: a 1440x812 band of
   two 720px halves; the statement 403px wide at x=878, set 23/28 bold; the
   sectors in two columns 222px apart, each row 47px, the mark 18px wide and
   the label 16/22; the action 300x52 with a hairline between its label and
   its arrow.
   ========================================================================== */

.cpg-split {
  display: grid;
  background: var(--cpg-charcoal-deep);
  color: var(--cpg-text-on-ink);
}

/* --- the photograph ------------------------------------------------------- */
/* The frame is a window; the image inside it stands taller than the window on
   both edges, so the drift never uncovers one. */
.cpg-split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cpg-charcoal);
}
.cpg-split__media img {
  position: absolute;
  inset: -20% 0;
  display: block;
  width: 100%;
  height: 140%;
  object-fit: cover;
}
.cpg-split__media.is-drifting img { will-change: transform; }

/* The photograph arrives as a wipe from the top rather than the site's usual
   fade-up; the reveal observer supplies the class, so no-JS shows it outright. */
.cpg-split__media.cpg-reveal { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
html.cpg-motion .cpg-split__media.cpg-reveal {
  transition: clip-path calc(var(--cpg-duration-slow) * 2.5) var(--cpg-ease);
}
html.cpg-motion .cpg-split__media.cpg-reveal.is-visible,
html:not(.cpg-motion) .cpg-split__media.cpg-reveal,
html.no-js .cpg-split__media.cpg-reveal { clip-path: inset(0 0 0 0); }

/* --- the statement -------------------------------------------------------- */
.cpg-split__body {
  display: grid;
  align-content: center;
  padding: clamp(2.5rem, 9vw, 4.5rem) var(--cpg-gutter);
}
.cpg-split__inner {
  display: grid;
  align-content: center;
  /* The statement, the sectors and the action share one measure — the two
     sector columns are exactly as wide as the line above them. */
  max-width: 25.1875rem;
}

.cpg-split__title {
  margin: 0;
  font-family: var(--cpg-font-body);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--cpg-text-on-ink);
}

/* Two columns of marked entries. The parent is in the selector because the
   base layer resets every classed list. */
.cpg-split .cpg-split__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
  margin-block-start: clamp(2rem, 4vw, 3.75rem);
  padding: 0;
  list-style: none;
}
.cpg-split__item {
  display: flex;
  align-items: baseline;
  min-height: 2.1875rem;
  font-size: 1rem;
  line-height: 1.375;
}
.cpg-split__plus {
  flex: 0 0 auto;
  width: 1.125rem;
  color: var(--cpg-text-on-ink-dim);
  font-weight: 400;
}
.cpg-split__item a,
.cpg-split__item > span + span {
  /* The reference dims these labels against the statement above them; this is
     CPG's own dimmed ink, which holds its contrast on the charcoal. */
  color: var(--cpg-text-on-ink-dim);
  text-decoration: none;
}
.cpg-split__item a { transition: color var(--cpg-duration-fast) var(--cpg-ease); }
.cpg-split__item a:hover { color: var(--cpg-text-on-ink); }

/* --- the action ----------------------------------------------------------- */
/* A solid block — the one filled control on the page — with the arrow held
   behind a hairline, as the reference sets it. */
.cpg-split__cta {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 3.25rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.3125rem);
  padding-inline: 1.70625rem;
  background: var(--cpg-gold);
  /* The reference sets this label in white on the tan, which does not hold at
     13px; CPG's charcoal on the same tan reads at every size. */
  color: var(--cpg-charcoal-deep);
  font-size: var(--cpg-text-xs);
  font-weight: 700;
  line-height: 1.6923;
  text-decoration: none;
  transition: background-color var(--cpg-duration-base) var(--cpg-ease);
}
.cpg-split__cta:hover { background: var(--cpg-gold-lit); }
.cpg-split__cta-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 1.625rem;
  margin-inline: 2.4375rem;
  background: currentColor;
  opacity: 0.35;
}
.cpg-split__cta-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: 0 0 auto;
  transition: transform var(--cpg-duration-base) var(--cpg-ease);
}
.cpg-split__cta:hover .cpg-split__cta-icon { transform: translateX(4px); }
.cpg-split__cta:focus-visible {
  outline: var(--cpg-focus-width) solid var(--cpg-focus-ring-on-ink, #FFFFFF);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  /* One column on a phone: two 202px columns do not fit, and a half-width
     label wraps to three lines rather than reading as a list. */
  .cpg-split .cpg-split__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cpg-split__cta { margin-inline-end: 0; }
}

@media (min-width: 64rem) {
  /* Two equal halves, edge to edge, at the reference's 1440x812. */
  .cpg-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(50.75rem, 56.4vw);
  }
  .cpg-split__media { aspect-ratio: auto; }
  /* 22% of the half is the reference's 158px inset at its own width. */
  .cpg-split__body { padding-inline: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .cpg-split__media.cpg-reveal { clip-path: none !important; }
  .cpg-split__media img { transform: none !important; }
}

/* ==========================================================================
   PORTFOLIO — the wall of columns
   Built to the supplied reference, at its own measurements: a full-width band
   580px tall at 1440, four columns divided by hairlines, the project's number,
   name and place set at the foot of each, and a white panel that rises from
   the foot of the column a pointer reaches.

   Where the reference puts one photograph behind the whole band and swaps it,
   every column here carries its own — the portfolio is on screen at once, and
   the column in hand is the one that is not dimmed.
   ========================================================================== */

.cpg-showcase {
  --cpg-showcase-visible: 4;
  --cpg-showcase-step: 25%;
  --cpg-showcase-panel-h: clamp(18rem, 24vw, 24rem);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(32rem, 40.3vw, 56rem);
  overflow: hidden;
  overflow: clip;
  background: var(--cpg-charcoal-deep);
  color: var(--cpg-text-on-ink);
}

.cpg-showcase__rail {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  transition: transform 720ms cubic-bezier(0.23, 1, 0.32, 1);
}

.cpg-showcase__item {
  position: relative;
  flex: 0 0 var(--cpg-showcase-step);
  min-width: var(--cpg-showcase-step);
  min-height: inherit;
  /* The reference divides its columns with a hairline; the photographs meet
     each other here instead, with nothing drawn between them. */
}

/* --- the column's own photograph ------------------------------------------ */
.cpg-showcase__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cpg-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform 850ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cpg-showcase.is-enhanced .cpg-showcase__item.is-current .cpg-showcase__media img { transform: scale(1); }

/* The foot of every column carries text, so every column carries the gradient
   that makes it readable; the veil on top of it is what dims the columns the
   pointer is not on. */
.cpg-showcase__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The ramp is set by the highest thing standing on it — the column's
     number — measured against the palest photograph in the portfolio. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.40) 56%, rgba(0, 0, 0, 0.84) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20));
  transition: background 500ms var(--cpg-ease);
  pointer-events: none;
}
.cpg-showcase.is-enhanced .cpg-showcase__item.is-current .cpg-showcase__shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.40) 56%, rgba(0, 0, 0, 0.84) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
}

/* --- what the column says before it is opened ----------------------------- */
.cpg-showcase__trigger {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.5rem);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.cpg-showcase__trigger:focus-visible { outline: 2px solid var(--cpg-white); outline-offset: -5px; }

.cpg-showcase__preview {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  transition: opacity 360ms var(--cpg-ease), transform 520ms var(--cpg-ease);
}
.cpg-showcase__item.is-active .cpg-showcase__preview {
  opacity: 0;
  transform: translateY(1.25rem);
  pointer-events: none;
}
.cpg-showcase__ordinal {
  font-family: var(--cpg-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  color: var(--cpg-text-on-ink);
}
.cpg-showcase__preview-title {
  max-width: 13ch;
  font-family: var(--cpg-font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}
.cpg-showcase__preview-meta {
  max-width: 24ch;
  font-size: var(--cpg-text-2xs);
  line-height: 1.45;
  color: var(--cpg-text-on-ink-muted);
}

/* --- the panel that rises -------------------------------------------------- */
.cpg-showcase__panel {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: var(--cpg-showcase-panel-h);
  padding: clamp(1.35rem, 2.4vw, 2.4rem);
  background: var(--cpg-white);
  color: var(--cpg-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition:
    transform 700ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 260ms ease,
    visibility 0s linear 700ms;
  pointer-events: none;
}
.cpg-showcase__item.is-active .cpg-showcase__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  /* A press anywhere on the column — the panel included — falls through to
     the column's own link; only the panel's link catches the pointer itself. */
  pointer-events: none;
}
.cpg-showcase__item.is-active .cpg-showcase__panel a { pointer-events: auto; }

.cpg-showcase__panel-head { display: grid; align-content: start; gap: 0.8rem; }
.cpg-showcase__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0;
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:lang(ka) .cpg-showcase__kicker { text-transform: none; letter-spacing: 0.04em; }
.cpg-showcase__kicker span + span::before { content: "·"; margin-inline-end: 0.8rem; color: var(--cpg-text-muted); }
.cpg-showcase__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: clamp(1.75rem, 2.2vw, 2.65rem);
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
}
.cpg-showcase__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.25rem;
  margin-block-start: 0.2rem;
  padding-block-start: 0.75rem;
  border-top: var(--cpg-border-hair) solid var(--cpg-rule);
}
.cpg-showcase__fact { display: grid; gap: 0.12rem; }
.cpg-showcase__fact b { font-size: var(--cpg-text-2xs); font-weight: 700; line-height: 1.3; }
.cpg-showcase__fact small {
  font-size: var(--cpg-text-3xs);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}
:lang(ka) .cpg-showcase__fact small { text-transform: none; letter-spacing: 0.02em; }

.cpg-showcase__panel-foot { display: grid; gap: 1rem; align-items: end; padding-block-start: 1rem; }
.cpg-showcase__meta {
  display: grid;
  gap: 0.25rem;
  max-width: 32ch;
  margin: 0;
  font-size: var(--cpg-text-2xs);
  line-height: 1.45;
  color: var(--cpg-text-muted);
}
.cpg-showcase__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding-block-start: 0.9rem;
  border-top: 1px solid var(--cpg-ink);
  color: var(--cpg-ink);
  font-size: var(--cpg-text-3xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
}
:lang(ka) .cpg-showcase__link { text-transform: none; letter-spacing: 0.04em; }
.cpg-showcase__link-icon { width: 1.25rem; height: 0.75rem; transition: transform 280ms var(--cpg-ease); }
.cpg-showcase__link:hover .cpg-showcase__link-icon { transform: translateX(0.3rem); }

/* --- stepping through the wall --------------------------------------------- */
.cpg-showcase__controls {
  position: absolute;
  z-index: 6;
  top: clamp(1.25rem, 2.8vw, 2.5rem);
  inset-inline-start: clamp(1.25rem, 2.8vw, 2.5rem);
  display: flex;
  gap: 0.5rem;
}
.cpg-showcase__controls[hidden] { display: none; }
.cpg-showcase__arrow {
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 4.5vw, 4rem);
  height: clamp(3.2rem, 4.5vw, 4rem);
  padding: 0;
  border: 1px solid var(--cpg-white);
  background: var(--cpg-white);
  color: var(--cpg-ink);
  cursor: pointer;
  transition: background-color 250ms ease, color 250ms ease;
}
.cpg-showcase__arrow:hover:not(:disabled),
.cpg-showcase__arrow:focus-visible { background: var(--cpg-charcoal-deep); color: var(--cpg-white); }
.cpg-showcase__arrow:focus-visible { outline: 2px solid var(--cpg-white); outline-offset: 3px; }
.cpg-showcase__arrow svg { width: 1.25rem; height: 0.75rem; }

@media (min-width: 64rem) and (max-width: 89.999rem) {
  .cpg-showcase { --cpg-showcase-visible: 3; --cpg-showcase-step: 33.3333%; }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  /* A tablet shows two columns and walks them, as the desktop does. */
  .cpg-showcase { --cpg-showcase-visible: 2; --cpg-showcase-step: 50%; --cpg-showcase-panel-h: clamp(17rem, 40vw, 22rem); min-height: clamp(30rem, 66vw, 40rem); }
}

@media (max-width: 47.999rem) {
  /* One column at a time on a phone: two would be too narrow to read, so
     they stack and cross-fade instead of running off the side. */
  .cpg-showcase {
    --cpg-showcase-panel-h: clamp(17rem, 46vw, 19rem);
    min-height: clamp(37rem, 78vw, 43rem);
  }
  .cpg-showcase__rail { display: grid; grid-template-columns: minmax(0, 1fr); transform: none !important; }
  .cpg-showcase__item {
    grid-area: 1 / 1;
    min-width: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 380ms ease, visibility 0s linear 380ms;
  }
  .cpg-showcase__item.is-current { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .cpg-showcase__shade,
  .cpg-showcase.is-enhanced .cpg-showcase__item.is-current .cpg-showcase__shade {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.46) 56%, rgba(0, 0, 0, 0.9) 100%);
  }
}

@media (max-width: 39.999rem) {
  .cpg-showcase { --cpg-showcase-panel-h: 17rem; min-height: 36rem; }
  .cpg-showcase__panel { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cpg-showcase__rail,
  .cpg-showcase__media img,
  .cpg-showcase__preview,
  .cpg-showcase__shade,
  .cpg-showcase__link-icon { transition: none; }
  .cpg-showcase__panel { transition: opacity 1ms linear, visibility 0s; }
}

/* ==========================================================================
   ABOUT — the story, the panel, the photograph and the pointer
   Built to the supplied reference, at its own measurements: a white band
   padded 72/40; a grid of 60% and the rest, the story cell padded 80 / 150 /
   80 / 50 with a 32px heading and a 200x50 solid action; a dark panel with a
   10px label and 14/22 text, held in the middle of its height; a 395px
   photograph that turns between two frames and drifts closer while it shows;
   a pointer with a 46px title; and, under the grid, a ruled two-column list
   of cards with an 18px mark and 17px labels.
   ========================================================================== */

.cpg-story {
  --cpg-story-lead: 60%;
  --cpg-story-pad-y: 80px;
  --cpg-story-pad-x: 60px;
  padding-block: 72px 40px;
  background: var(--cpg-white);
  color: var(--cpg-ink);
}

.cpg-story__inner {
  width: 100%;
  max-width: var(--cpg-container);
  margin-inline: auto;
  padding-inline: var(--cpg-gutter);
}

.cpg-story__grid {
  display: grid;
  grid-template-columns: var(--cpg-story-lead) auto;
}
.cpg-story__cell { min-width: 0; }

/* --- the story and its action ----------------------------------------------- */
.cpg-story__cell--lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--cpg-story-pad-y) 150px var(--cpg-story-pad-y) 50px;
}
.cpg-story__heading {
  margin: 0 0 32px;
  font-size: 2rem;
  font-weight: var(--cpg-display-weight);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cpg-ink);
}
.cpg-story__text {
  margin: 0;
  font-size: var(--cpg-text-sm);
  line-height: 1.5714;
  color: var(--cpg-text-muted);
}
.cpg-story__text + .cpg-story__text { margin-block-start: 1.4em; }
.cpg-story__text--lead { color: var(--cpg-text); }

/* A solid block whose foot rests on the cell's own bottom edge. */
.cpg-story__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 50px;
  margin-block-start: 40px;
  padding: 0 25px;
  border: 1px solid var(--cpg-charcoal-deep);
  background: var(--cpg-charcoal-deep);
  color: var(--cpg-white);
  font-size: var(--cpg-text-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s var(--cpg-ease), color 0.3s var(--cpg-ease);
}
:lang(ka) .cpg-story__cta { text-transform: none; letter-spacing: 0.03em; }
.cpg-story__cta:hover,
.cpg-story__cta:focus-visible { background: var(--cpg-white); color: var(--cpg-charcoal-deep); }
.cpg-story__cta:focus-visible { outline: var(--cpg-focus-width) solid var(--cpg-focus-ring); outline-offset: 3px; }

/* --- the dark panel --------------------------------------------------------- */
.cpg-story__cell--ink {
  /* The story column is the long one; the panel holds the middle of the row
     rather than stranding its text at the top of a tall block. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--cpg-story-pad-y) var(--cpg-story-pad-x);
  background: var(--cpg-charcoal-deep);
  color: var(--cpg-text-on-ink-muted);
}
.cpg-story__eyebrow {
  margin: 0 0 30px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpg-white);
}
:lang(ka) .cpg-story__eyebrow { text-transform: none; letter-spacing: 0.04em; }
.cpg-story__cell--ink .cpg-story__text { color: var(--cpg-text-on-ink-muted); }

/* --- the photograph that turns ---------------------------------------------- */
.cpg-story__cell--media {
  position: relative;
  min-height: 395px;
  padding: 0;
  overflow: hidden;
  background: var(--cpg-surface-media);
}
.cpg-story__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.cpg-story__slide.is-current { opacity: 1; }
.cpg-story__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Each frame drifts closer while it is the one showing. */
@keyframes cpg-story-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.cpg-story.is-live .cpg-story__slide.is-current img { animation: cpg-story-zoom 10s linear forwards; }

/* --- the pointer ------------------------------------------------------------ */
.cpg-story__cell--aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--cpg-story-pad-x) 40px 80px;
}
.cpg-story__aside-eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--cpg-text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--cpg-text-muted);
}
:lang(ka) .cpg-story__aside-eyebrow { text-transform: none; letter-spacing: 0.04em; }

/* The count is drawn, not filled: a hairline outline at a size nothing else
   on the page reaches, with the accent laid under it as a short rule. */
.cpg-story__figure {
  position: relative;
  margin: 0 0 1.25rem;
  padding-block-end: 1.125rem;
  font-family: var(--cpg-font-display);
  font-size: clamp(6rem, 3rem + 9vw, 10.5rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--cpg-rule-strong);
}
@supports (-webkit-text-stroke: 1px black) {
  .cpg-story__figure { -webkit-text-stroke: 1.5px var(--cpg-ink); color: transparent; }
}
.cpg-story__figure::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.06em;
  bottom: 0;
  width: 3rem;
  height: 3px;
  background: var(--cpg-gold);
}
.cpg-story__caption {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  font-size: var(--cpg-text-sm);
  line-height: 1.5714;
  color: var(--cpg-text-muted);
}
.cpg-story__caption span:first-child {
  font-weight: 600;
  color: var(--cpg-ink);
}
.cpg-story__link {
  align-self: flex-start;
  margin-block-start: 24px;
  padding-block-end: 3px;
  border-bottom: 1px solid currentColor;
  color: var(--cpg-ink);
  font-size: var(--cpg-text-xs);
  line-height: 18px;
  text-decoration: none;
  transition: color var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-story__link:hover,
.cpg-story__link:focus-visible { color: var(--cpg-gold-ink); }

/* --- the cards under the grid ----------------------------------------------- */
.cpg-story .cpg-story__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cpg-rule);
}
.cpg-story__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px 26px 0;
  border-bottom: 1px solid var(--cpg-rule);
}
.cpg-story__card-icon {
  flex: none;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--cpg-gold-ink);
}
.cpg-story__card-copy { display: block; }
.cpg-story__card-copy strong {
  display: block;
  font-size: var(--cpg-text-md);
  font-weight: 500;
  line-height: 1.45em;
  color: var(--cpg-ink);
}

@media (prefers-reduced-motion: reduce) {
  .cpg-story.is-live .cpg-story__slide.is-current img { animation: none; }
  .cpg-story__slide { transition-duration: 1ms; }
}

@media (max-width: 64rem) {
  .cpg-story { --cpg-story-pad-y: 56px; --cpg-story-pad-x: 40px; padding-block: 70px 32px; }
  .cpg-story__cell--lead { padding: var(--cpg-story-pad-y) 60px var(--cpg-story-pad-y) 0; }
  .cpg-story__cell--aside { padding: 32px var(--cpg-story-pad-x) 32px 48px; }
  .cpg-story__cell--media { min-height: 300px; }
  .cpg-story__heading { font-size: 1.75rem; }
  .cpg-story__figure { font-size: clamp(5rem, 2.5rem + 7vw, 8rem); }
  .cpg-story .cpg-story__cards { margin-block-start: 48px; }
}

@media (max-width: 47.999rem) {
  .cpg-story { --cpg-story-pad-y: 36px; --cpg-story-pad-x: 24px; padding-block: 48px 24px; }
  /* The reference's 10px label is a desktop size; 11px is the floor on a phone. */
  .cpg-story__eyebrow { font-size: 0.6875rem; }
  .cpg-story__cta { width: 100%; margin-block-start: 28px; }
  .cpg-story__grid { grid-template-columns: minmax(0, 1fr); }
  /* On one column the panel and the photograph run edge to edge, so they
     still read as panels rather than as indented blocks. */
  .cpg-story__cell--ink,
  .cpg-story__cell--media { margin-inline: calc(-1 * var(--cpg-gutter)); }
  .cpg-story__cell--lead { padding: var(--cpg-story-pad-y) 0; }
  .cpg-story__cell--ink { padding: var(--cpg-story-pad-y) var(--cpg-story-pad-x); }
  .cpg-story__cell--media { min-height: 62vw; }
  .cpg-story__cell--aside { padding: var(--cpg-story-pad-y) 0; }
  .cpg-story__heading { margin-block-end: 20px; font-size: 1.625rem; }
  .cpg-story__figure { font-size: 5rem; }
  .cpg-story .cpg-story__cards { grid-template-columns: minmax(0, 1fr); margin-block-start: 36px; }
}

/* ==========================================================================
   INTERIOR MASTHEAD — the photograph under the bar
   Every interior page opens the way the home page does: a photograph across
   the page, the bar floating over it, and the breadcrumb set on the photo.
   The scrim runs from the top, where the bar and the crumb sit, so both
   clear 4.5:1 over any photograph the CMS puts here.
   ========================================================================== */

.cpg-body--holding .cpg-page-hero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(20rem, 42vh, 30rem);
  /* Room for the floating bar above the crumb. */
  padding-block: calc(var(--cpg-shell-h) + var(--cpg-space-xl)) var(--cpg-space-xl);
  border-bottom: 0;
  background: var(--cpg-charcoal);
  color: var(--cpg-text-on-ink);
  overflow: hidden;
}
.cpg-body--holding .cpg-page-hero--photo.cpg-page-hero--bare {
  min-height: clamp(16rem, 34vh, 24rem);
  padding-block-end: var(--cpg-space-lg);
}
.cpg-page-hero__media { position: absolute; inset: 0; z-index: -2; }
.cpg-page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cpg-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Measured against the palest cover in the portfolio (King's Garden, a
     white facade under the crumb): the foot has to be this deep. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 34%, rgba(0, 0, 0, 0.48) 58%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
}
.cpg-page-hero__inner { position: relative; }

.cpg-body--holding .cpg-page-hero--photo .cpg-breadcrumbs { margin-bottom: var(--cpg-space-sm); }
.cpg-body--holding .cpg-page-hero--photo.cpg-page-hero--bare .cpg-breadcrumbs { margin-bottom: 0; }
.cpg-body--holding .cpg-page-hero--photo .cpg-breadcrumbs ol {
  color: var(--cpg-text-on-ink-muted);
  /* A photograph a post brings with it can be pale under the crumb; the
     shadow is what keeps the small type readable on those. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
}
.cpg-body--holding .cpg-page-hero--photo .cpg-breadcrumbs li + li::before { color: var(--cpg-text-on-ink-dim); }
.cpg-body--holding .cpg-page-hero--photo .cpg-breadcrumbs [aria-current="page"] { color: var(--cpg-white); }
.cpg-body--holding .cpg-page-hero--photo .cpg-breadcrumbs a:hover { color: var(--cpg-gold-on-dark); }
@media (max-width: 47.999rem) {
  /* The crumb's links are small words; on a phone each gets a 44px box. */
  .cpg-body--holding .cpg-breadcrumbs a,
  .cpg-body--holding .cpg-breadcrumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.cpg-body--holding .cpg-page-hero--photo h1 { color: var(--cpg-white); }
/* The small lines share the crumb's shadow: on a short phone masthead they
   sit where the scrim is thinnest, and the gold label measured 4.2 there. */
.cpg-body--holding .cpg-page-hero--photo .cpg-eyebrow,
.cpg-body--holding .cpg-page-hero--photo .cpg-lead {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
}
.cpg-body--holding .cpg-page-hero--photo .cpg-eyebrow { color: var(--cpg-gold-on-dark); }
.cpg-body--holding .cpg-page-hero--photo .cpg-lead { color: var(--cpg-text-on-ink-muted); }

@media (max-width: 47.999rem) {
  .cpg-body--holding .cpg-page-hero--photo { min-height: clamp(14rem, 40vw, 20rem); }
  .cpg-body--holding .cpg-page-hero--photo.cpg-page-hero--bare { min-height: clamp(11rem, 32vw, 15rem); }
  /* A short masthead puts the label in the scrim's thin middle; on a phone
     the middle is deeper, so the gold label clears 4.5:1 on the site photo. */
  .cpg-page-hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.50) 34%, rgba(0, 0, 0, 0.62) 58%, rgba(0, 0, 0, 0.9) 100%);
  }
}

/* --- The wall as a grid ---------------------------------------------------------
   The projects page: the same columns as the home page's wall, every one of
   them on the page at once in rows, so nothing walks and there are no arrows.
   Four to a row at the full width, then three, two, one — each column keeps
   the wall's own proportion (360 x 580 at 1440). */
.cpg-showcase--grid { min-height: 0; overflow: visible; }
.cpg-showcase--grid .cpg-showcase__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 0;
  transform: none !important;
  transition: none;
}
.cpg-showcase--grid .cpg-showcase__item {
  flex: none;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 360 / 580;
  border: 0;
  /* The panel rises inside its own column. Without this it would start
     below the column, over the row underneath, and read as coming up out
     of the wrong project. */
  overflow: hidden;
  /* Rows of columns need a seam between them; the wall's own dark ground is
     what shows through it. */
  outline: 1px solid var(--cpg-charcoal-deep);
}
/* Boxed to the content column, the wall sits a step below the filters. */
.cpg-container > .cpg-showcase--grid { margin-block-start: var(--cpg-space-lg); }
@media (min-width: 64rem) and (max-width: 89.999rem) {
  .cpg-showcase--grid .cpg-showcase__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .cpg-showcase--grid .cpg-showcase__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
  /* Not the wall's stacked, cross-fading mode: on a grid every column stays
     on the page, and the pointer's column is still the one not dimmed. */
  .cpg-showcase--grid .cpg-showcase__item {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    aspect-ratio: 360 / 520;
  }
  .cpg-showcase--grid .cpg-showcase__shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.46) 56%, rgba(0, 0, 0, 0.9) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34));
  }
  .cpg-showcase--grid.is-enhanced .cpg-showcase__item.is-current .cpg-showcase__shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0.46) 56%, rgba(0, 0, 0, 0.9) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
  }
  .cpg-showcase--grid .cpg-showcase__panel { right: 0; left: 0; width: auto; }
}
@media (max-width: 39.999rem) {
  .cpg-showcase--grid .cpg-showcase__rail { grid-template-columns: minmax(0, 1fr); }
  .cpg-showcase--grid .cpg-showcase__item { aspect-ratio: 390 / 480; }
}

/* ==========================================================================
   PROJECTS PAGE — the record in figures, and the filters
   Built to the supplied reference: three columns of 380 on a 1140 column,
   the figure set 81px bold with its digits rolling into place, a 14/22 line
   under it opening on a bold lead. The filters are plain words on a hairline,
   not buttons; the wall's cells meet with nothing drawn between them.
   ========================================================================== */

.cpg-stats { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.75rem); }
.cpg-stats .cpg-stats__list {
  display: grid;
  gap: var(--cpg-space-xl) var(--cpg-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-stat { display: grid; gap: 30px; align-content: start; padding-inline-end: 28px; }
.cpg-stat__figure {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-family: var(--cpg-font-display);
  font-size: clamp(3.5rem, 2rem + 4vw, 5.0625rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cpg-ink);
  font-variant-numeric: tabular-nums;
}
.cpg-stat__suffix { font-size: 0.7em; }
.cpg-stat__text { margin: 0; font-size: var(--cpg-text-sm); line-height: 1.57; color: var(--cpg-text-subtle); }
.cpg-stat__text b { font-weight: 700; color: var(--cpg-ink); }

/* Each digit is a column of ten; the column slides to the digit meant. */
.cpg-odometer { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; }
.cpg-odometer__digit { position: relative; display: inline-block; width: 0.58em; height: 1em; overflow: hidden; }
.cpg-odometer__reel {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(0);
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--cpg-odometer-delay, 0ms);
}
.cpg-odometer__reel li { height: 1em; line-height: 1; text-align: center; }
.cpg-odometer.is-set .cpg-odometer__reel { transform: translateY(calc(-1em * var(--cpg-odometer-to, 0))); }

@media (min-width: 48rem) { .cpg-stats .cpg-stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cpg-odometer__reel { transition: none; } }

/* --- the filters: words, not buttons ------------------------------------------- */
.cpg-body--holding .cpg-chips { gap: 0.25rem 1.5rem; }
.cpg-body--holding .cpg-chips + .cpg-chips { margin-block-start: 0.5rem; }
.cpg-body--holding .cpg-chip {
  min-height: 2rem;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-size: var(--cpg-text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpg-text-muted);
  transition: color var(--cpg-duration-fast) var(--cpg-ease), border-color var(--cpg-duration-fast) var(--cpg-ease);
}
:lang(ka) .cpg-body--holding .cpg-chip { text-transform: none; letter-spacing: 0.04em; }
.cpg-body--holding .cpg-chip:hover { color: var(--cpg-ink); border-color: var(--cpg-rule-strong); }
.cpg-body--holding .cpg-chip[aria-current="true"] { background: none; color: var(--cpg-ink); border-color: var(--cpg-ink); }
.cpg-body--holding .cpg-result-count { margin-block-start: 0.75rem; }
@media (max-width: 47.999rem) {
  /* A word is a small target; on a phone each gets a 44px box, the line under
     the current one drawn at the word's foot rather than the box's. */
  .cpg-body--holding .cpg-chip { position: relative; min-height: 2.75rem; padding-block: 0.75rem; border-bottom: 0; }
  .cpg-body--holding .cpg-chip::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.5rem; height: 1px; background: transparent; transition: background-color var(--cpg-duration-fast) var(--cpg-ease); }
  .cpg-body--holding .cpg-chip[aria-current="true"]::after { background: var(--cpg-ink); }
  .cpg-body--holding .cpg-chips { gap: 0 1.25rem; }
}

/* --- the wall's cells meet, with nothing drawn between them ----------------- */
.cpg-showcase--grid { background: transparent; }
.cpg-showcase--grid .cpg-showcase__item { outline: 0; }

/* ==========================================================================
   OUR BUSINESS — built to the supplied reference (kkcg.com), identically, at
   its own measurements at every width:
     phone   ( <1024): 76px padding, one column, 84px rows 24px apart,
                        28/36 names, no lines;
     desktop (≥1024): 128px padding, two columns 36px apart in a column
                        48px from each edge, 92px rows 56px apart, 36/44
                        names, a vertical hairline just left of the middle
                        and one across the row gap;
     wide    (≥1440): 152px padding, the column 5/6 of the width less 86px
                        (1114 at 1440, 1514 at 1920 and beyond), 100px rows,
                        44/52 names.
   The heading is 24/32 in every case. Pointing at a name lights it white
   and brings its film up behind the whole band at 65%, under a gradient.
   ========================================================================== */

.cpg-business {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 76px;
  background: var(--cpg-ink);
  color: var(--cpg-white);
}
.cpg-business__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cpg-business__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms var(--cpg-ease);
}
.cpg-business__frame img,
.cpg-business__frame video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The gradient the reference lays over its film, so the names stay readable. */
.cpg-business__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.cpg-business[data-active="0"] .cpg-business__frame[data-cpg-business-frame="0"],
.cpg-business[data-active="1"] .cpg-business__frame[data-cpg-business-frame="1"],
.cpg-business[data-active="2"] .cpg-business__frame[data-cpg-business-frame="2"],
.cpg-business[data-active="3"] .cpg-business__frame[data-cpg-business-frame="3"],
.cpg-business[data-active="4"] .cpg-business__frame[data-cpg-business-frame="4"],
.cpg-business[data-active="5"] .cpg-business__frame[data-cpg-business-frame="5"],
.cpg-business[data-active="6"] .cpg-business__frame[data-cpg-business-frame="6"],
.cpg-business[data-active="7"] .cpg-business__frame[data-cpg-business-frame="7"] { opacity: 0.65; }

.cpg-business__inner { position: relative; width: calc(100% - 32px); margin-inline: auto; }
.cpg-business__title {
  margin: 0 0 48px;
  font-family: var(--cpg-font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3334;
  color: #F0F0F0;
}

.cpg-business .cpg-business__list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-business__cell { position: relative; display: flex; }
.cpg-business__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
  padding: 24px 0;
  color: #656565;
  text-decoration: none;
  transition: color 300ms var(--cpg-ease);
}
.cpg-business__label {
  font-family: var(--cpg-font-body);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2858;
  letter-spacing: -0.01em;
}
.cpg-business__chevron { flex: none; width: 32px; height: 32px; }
.cpg-business__link:hover,
.cpg-business__link:focus-visible { color: var(--cpg-white); }
.cpg-business__link:focus-visible { outline: 2px solid var(--cpg-white); outline-offset: 4px; }

@media (min-width: 64rem) {
  .cpg-business { padding-block: 128px; }
  .cpg-business__inner { width: calc(100% - 96px); }
  .cpg-business__title { margin-bottom: 76px; }
  .cpg-business .cpg-business__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 36px; }
  .cpg-business__link { min-height: 92px; padding: 24px 16px 24px 0; }
  .cpg-business__label { font-size: 2.25rem; line-height: 1.2223; }

  /* The two hairlines, rgb(72,72,72): one standing just left of the middle
     from 8px above the first row to 8px below the last, one lying across
     each row gap, 6px in from either edge. */
  .cpg-business .cpg-business__list::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: calc(50% - 0.75rem);
    width: 1px;
    background: #484848;
    pointer-events: none;
  }
  .cpg-business__cell:nth-child(n + 3)::before {
    content: "";
    position: absolute;
    top: -29px;
    left: 0;
    right: 0;
    height: 1px;
    background: #484848;
    pointer-events: none;
  }
  .cpg-business__cell:nth-child(n + 3):nth-child(odd)::before { left: 6px; right: -36px; }
  .cpg-business__cell:nth-child(n + 3):nth-child(even)::before { right: 6px; }
}
@media (min-width: 90rem) {
  .cpg-business { padding-block: 152px; }
  .cpg-business__inner { width: min(calc(83.3334% - 86px), 1514px); }
  .cpg-business__title { margin-bottom: 56px; }
  .cpg-business__link { min-height: 100px; }
  .cpg-business__label { font-size: 2.75rem; line-height: 1.1819; }
}
@media (prefers-reduced-motion: reduce) {
  .cpg-business__frame, .cpg-business__link { transition: none; }
}

/* ==========================================================================
   NEWS — built to the supplied reference (kkcg.com home) at its own
   measurements: white, 128px padding (76 on a phone); the heading 72/80
   with 56px under it; cards in a row — three from 1440 with 64px between,
   four from 1920 with 48px, two on a tablet with 40px, one column on a
   phone with 24px; a card is a 16:9 picture (4:3 on a phone), the category
   and date in 12/16 capitals, the title in 20/28, and a "Read more" pill;
   pointing at a card tints it and grows the picture a little. Under the row
   "More news" stands centred, 56px down.
   ========================================================================== */
.kk-news {
  padding-block: 76px;
  background: #fff;
  color: #010101;
  font-family: "Inter", var(--cpg-font-body);
}
.kk-news__inner { width: calc(100% - 32px); margin-inline: auto; }
.kk-news__title {
  margin: 0 0 48px;
  font-family: "Inter", var(--cpg-font-body);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: #010101;
}
.kk-news .kk-news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kk-news__cell:nth-child(n + 4) { display: none; }
.kk-news__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding-bottom: 24px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.5s var(--cpg-ease);
}
.kk-news__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F2F8F8;
}
.kk-news__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s var(--cpg-ease);
}
.kk-news__body { display: block; flex: 1 1 auto; width: 100%; }
.kk-news__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0 16px;
  font-size: 0.75rem;
  line-height: 1.334;
  color: #212E30;
}
.kk-news__cat { text-transform: uppercase; text-decoration: underline; }
.kk-news__heading {
  display: block;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  color: #484848;
}
.kk-news__read { margin-top: 12px; }
.kk-news__card:hover { background: rgba(222, 235, 236, 0.675); }
.kk-news__card:hover .kk-news__media img { transform: scale(1.1); }
.kk-news__card:hover .kk-news__read { border-color: #719095; }
.kk-news__card:hover .kk-pill__mark { background: #94BDC3; }
.kk-news__card:focus-visible { outline: 2px solid #94BDC3; outline-offset: 4px; }
.kk-news__more { margin-top: 48px; text-align: center; }

/* The pill, as the About pages draw it, for pages that do not load them. */
.kk-news .kk-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 8px 16px 8px 8px;
  border: 1px solid #94BDC3;
  border-radius: 9999px;
  background: transparent;
  color: #010101;
  font-family: "Inter", var(--cpg-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s var(--cpg-ease), background-color 0.3s var(--cpg-ease);
}
.kk-news .kk-pill__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #DEEBEC;
  color: #010101;
  transition: background-color 0.3s var(--cpg-ease);
}
.kk-news .kk-pill__mark svg { width: 16px; height: 16px; }
.kk-news a.kk-pill:hover { border-color: #719095; }
.kk-news a.kk-pill:hover .kk-pill__mark { background: #94BDC3; }

@media (min-width: 64rem) {
  .kk-news { padding-block: 128px; }
  .kk-news__inner { width: calc(100% - 96px); }
  .kk-news__title { margin-bottom: 56px; font-size: 4rem; line-height: 1.1875; }
  .kk-news .kk-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .kk-news__cell:nth-child(n + 3) { display: none; }
  .kk-news__card { padding-bottom: 32px; }
  .kk-news__media { aspect-ratio: 16 / 9; }
  .kk-news__meta { padding: 32px 24px 16px; }
  .kk-news__heading { padding-inline: 24px; }
  .kk-news__read { margin: 32px 0 0 24px; }
  .kk-news__more { margin-top: 56px; }
}
@media (min-width: 90rem) {
  .kk-news__inner { width: min(calc(83.3334% - 86px), 1514px); }
  .kk-news__title { font-size: 4.5rem; line-height: 80px; }
  .kk-news .kk-news__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; }
  .kk-news__cell:nth-child(3) { display: block; }
  .kk-news__cell:nth-child(4) { display: none; }
}
@media (min-width: 120rem) {
  .kk-news .kk-news__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
  .kk-news__cell:nth-child(4) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .kk-news__card, .kk-news__media img, .kk-news .kk-pill, .kk-news .kk-pill__mark { transition: none; }
  .kk-news__card:hover .kk-news__media img { transform: none; }
}

/* The news heading row: the title at the left, "More news" at the right. */
.kk-news__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.kk-news__head .kk-news__title { margin-bottom: 0; }
@media (min-width: 64rem) { .kk-news__head { margin-bottom: 56px; } }
/* The closing band: the action stands level with the title, not the middle. */
@media (min-width: 64rem) {
  .cpg-outro__inner { align-items: start; }
  .cpg-outro__cta { margin-top: 0.35em; }
}