/* ==========================================================================
   CPG.GE SHELL — brand layer, overlay header, fullscreen menu
   --------------------------------------------------------------------------
   Loaded on the holding platform only, after components.css, so it may
   redefine the shared header block. Two things live here:

     1. The cpg.ge brand layer — charcoal #373737 + gold #C5A47E, Oswald for
        display and Montserrat for text. These are the colours and faces the
        live cpg.ge uses today; the redesign keeps the identity and changes
        the layout.
     2. The site chrome — a transparent overlay header that sits on the hero
        and condenses into a solid bar on scroll, plus the fullscreen menu it
        opens. Layout follows the reference build: menu trigger and language
        left, wordmark centred, actions right.

   The header must stay legible on every page, not only over the hero, so a
   page that does not declare an overlay hero renders the solid bar from the
   start. Nothing here depends on JavaScript for legibility: without it the
   header is solid and the menu is a normal in-page list.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BRAND LAYER
   -------------------------------------------------------------------------- */
:root[data-cpg-platform="holding"] {
  /* Type — cpg.ge pairs Oswald (condensed display) with Montserrat (text).
     Both carry Latin and Cyrillic; Georgian falls through to Noto Sans
     Georgian, which is why it stays in every stack. */
  --cpg-font-display: "Oswald", "Noto Sans Georgian", "Arial Narrow", Arial, sans-serif;
  --cpg-font-body:    "Montserrat", "Noto Sans Georgian", Arial, sans-serif;
  --cpg-display-weight: 600;
  --cpg-display-tracking: 0.004em;

  /* Colour — the dark chrome palette. The light editorial palette in
     tokens.css is untouched; these are the values the chrome and the hero
     paint with. */
  --cpg-charcoal:      #373737;  /* cpg.ge ground                          */
  --cpg-charcoal-deep: #2C2C2C;  /* menu overlay ground                    */
  --cpg-gold:          #C5A47E;  /* cpg.ge accent — fills, borders, marks  */
  /* The same accent as TEXT on a dark ground. #C5A47E is a fill colour: at
     12–14px over photography it does not clear 4.5:1, so small gold type uses
     this lighter tint instead. Same doctrine as --cpg-copper-lit in tokens.css. */
  --cpg-gold-on-dark:  #D9BF9E;
  /* And as TEXT on a light ground, where the fill colour is far too pale:
     #7E6238 clears 4.4:1 on bone, so it holds even at heading sizes. */
  --cpg-gold-ink:      #7E6238;
  --cpg-gold-lit:      #E4D0B5;  /* hover / focus state on dark            */

  /* The light editorial grounds, lifted for cpg.ge. tokens.css is the shared
     layer and stays where it is; these three raise bone, paper and shell by
     the same step, so every relationship between them — and every contrast
     measured against them — holds, only lighter. */
  --cpg-bone:  #F5F3EE;  /* was #ECE9E2 — the page's own ground */
  --cpg-paper: #FCFBF8;  /* was #F3F1EC */
  --cpg-shell: #F6F4EF;  /* was #EDEAE3 */

  --cpg-hair-on-dark:        rgba(255, 255, 255, 0.16);
}

/* The shared eyebrow draws its short rule in the copper the other platform
   uses; on cpg.ge the rule is gold, like every other mark. */
.cpg-body--holding .cpg-eyebrow::before { background: var(--cpg-gold); }
:root[data-cpg-platform="holding"] {
  --cpg-hair-on-dark-strong: rgba(255, 255, 255, 0.32);

  /* Chrome geometry */
  --cpg-shell-x:      clamp(1.25rem, 0.55rem + 2.8vw, 2.8125rem); /* 20→45px */
  --cpg-shell-h:      5.875rem;  /* 94px — matches the reference bar        */
  --cpg-shell-h-cond: 4.5rem;    /* 72px — condensed, after scroll          */
  --cpg-track-wide:   0.28em;
}

/* A 94px bar costs too much of a phone viewport; the reference's proportions
   only hold on a wide screen. */
@media (max-width: 48rem) {
  :root[data-cpg-platform="holding"] {
    --cpg-shell-h: 4.5rem;
    --cpg-shell-h-cond: 3.75rem;
  }
}

/* Georgian has no case: uppercasing it produces Mtavruli, which reads as a
   different voice rather than as emphasis. Chrome labels stay as authored. */
:root[data-cpg-platform="holding"]:lang(ka) {
  --cpg-track-wide: 0.16em;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.cpg-body--holding .cpg-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--cpg-z-header);
  background: var(--cpg-charcoal);
  border-bottom: 0;
  color: var(--cpg-text-on-ink);
  transition:
    background var(--cpg-duration-base) var(--cpg-ease),
    height var(--cpg-duration-base) var(--cpg-ease);
}

/* A page whose first section is a dark full-bleed hero lets the bar float. */
.cpg-body--holding .cpg-header[data-cpg-overlay="1"] {
  background: transparent;
}
.cpg-body--holding .cpg-header[data-cpg-overlay="1"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -1;
  height: 200%;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.62) 0%, rgba(20, 20, 20, 0.28) 45%, rgba(20, 20, 20, 0) 100%);
  pointer-events: none;
  transition: opacity var(--cpg-duration-base) var(--cpg-ease);
}
/* Once the bar paints its own background the scrim is redundant. */
.cpg-body--holding .cpg-header[data-cpg-overlay="1"].is-scrolled::before { opacity: 0; }
/* The tint and the blur are painted by the bar, not by the header: a
   backdrop-filter on the header would make it the containing block of the
   fullscreen menu inside it, and the menu — position: fixed — would then be
   clipped to the bar's 72px. The header stays transparent so the blur has
   the page to see through. */
.cpg-body--holding .cpg-header[data-cpg-overlay="1"].is-scrolled .cpg-header__bar {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: none;
}
@supports (backdrop-filter: blur(6px)) {
  .cpg-body--holding .cpg-header[data-cpg-overlay="1"].is-scrolled .cpg-header__bar {
    /* Opaque enough to read as the brand charcoal rather than as grey over a
       light page, with just enough transparency for the blur to register. */
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(60px);
    backdrop-filter: blur(60px);
  }
}

.cpg-body--holding .cpg-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cpg-space-sm);
  height: var(--cpg-shell-h);
  padding-inline: var(--cpg-shell-x);
  transition: height var(--cpg-duration-base) var(--cpg-ease);
}
.cpg-body--holding .cpg-header { overflow: visible; }

.cpg-body--holding .cpg-header.is-scrolled .cpg-header__bar {
  height: var(--cpg-shell-h-cond);
}
/* The reference bar stands 120px on a desktop and settles to 88px once the
   page has scrolled. */
@media (min-width: 64rem) {
  .cpg-body--holding .cpg-header__bar { height: 7.5rem; padding-inline: 3rem; max-width: 1920px; margin-inline: auto; }
  .cpg-body--holding .cpg-header.is-scrolled .cpg-header__bar { height: 7.5rem; }
}
/* A white page: the bar is white and frosted with black text from the start. */
.cpg-body--holding .cpg-header[data-cpg-theme="white"]::before { opacity: 0; }
.cpg-body--holding .cpg-header[data-cpg-theme="white"] .cpg-header__bar {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
}
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:not(:hover):not(:focus-within) :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark) { color: #010101; }
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:not(:hover):not(:focus-within) .cpg-lang__summary { border-color: #9A9A9A; }
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:not(:hover):not(:focus-within) .cpg-navtrigger__bars i { background: #010101; }
/* Under the pointer the white bar turns black with white text, as on the home page. */
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:hover .cpg-header__bar,
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:focus-within .cpg-header__bar { background: var(--cpg-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:hover :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark),
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:focus-within :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark) { color: var(--cpg-text-on-ink); }
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:hover .cpg-lang__summary,
.cpg-body--holding .cpg-header[data-cpg-theme="white"]:focus-within .cpg-lang__summary { border-color: var(--cpg-text-on-ink); }
/* A light masthead: the bar's text turns black until the bar paints itself. */
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled)::before { opacity: 0; }
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled) :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark) { color: #010101; }
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled) .cpg-lang__summary { border-color: #010101; }
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled) .cpg-navtrigger__bars i { background: #010101; }
/* The bar stays transparent over the page; it paints itself black only
   while the pointer is on it (which is also whenever a panel is open). */
.cpg-body--holding .cpg-header .cpg-header__bar { transition: background-color 0.25s var(--cpg-ease), height var(--cpg-duration-base) var(--cpg-ease); }
.cpg-body--holding .cpg-header:not(.is-scrolled):hover .cpg-header__bar,
.cpg-body--holding .cpg-header:not(.is-scrolled):focus-within .cpg-header__bar { background: var(--cpg-ink); }

/* Once returned after a scroll the bar is white and frosted, its text black,
   as the reference's is; and on the way down it leaves altogether. */
.cpg-body--holding .cpg-header { transition: transform 0.3s var(--cpg-ease), opacity 0.3s var(--cpg-ease); }
.cpg-body--holding .cpg-header.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.cpg-body--holding .cpg-header.is-scrolled .cpg-header__bar {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
}
.cpg-body--holding .cpg-header.is-scrolled :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark) { color: #010101; }
.cpg-body--holding .cpg-header.is-scrolled .cpg-lang__summary { border-color: #9A9A9A; }
.cpg-body--holding .cpg-header.is-scrolled .cpg-navtrigger__bars i { background: #010101; }
.cpg-body--holding .cpg-header.is-scrolled .cpg-topnav__panel { top: 100%; }
@media (prefers-reduced-motion: reduce) {
  .cpg-body--holding .cpg-header { transition: none; }
}
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):hover :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark),
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):focus-within :is(.cpg-topnav__link, .cpg-topnav__search, .cpg-lang__summary, .cpg-navtrigger, .cpg-header__brand .cpg-wordmark__mark) { color: var(--cpg-text-on-ink); }
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):hover .cpg-lang__summary,
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):focus-within .cpg-lang__summary { border-color: var(--cpg-text-on-ink); }
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):hover .cpg-navtrigger__bars i,
.cpg-body--holding .cpg-header[data-cpg-theme="light"]:not(.is-scrolled):focus-within .cpg-navtrigger__bars i { background: var(--cpg-text-on-ink); }

.cpg-header__side {
  display: flex;
  align-items: center;
  gap: var(--cpg-space-2xs);
  min-width: 0;
}
.cpg-header__side--end { justify-content: flex-end; }

/* --- Centred wordmark --------------------------------------------------------
   cpg.ge shows the mark alone; the qualifier stays in the accessible name so
   the link still announces the full brand. */
.cpg-header__brand { display: flex; justify-content: flex-start; margin-inline-end: auto; }
.cpg-header__brand .cpg-wordmark {
  --cpg-wordmark-size: 1.375rem;
  gap: 0;
  color: var(--cpg-gold);
  text-decoration: none;
}
.cpg-header__brand .cpg-wordmark__mark {
  font-family: var(--cpg-font-body);
  font-weight: 700;
  letter-spacing: 0.2em;
  /* The tracking is applied to the right of the last glyph too; pull it back
     so the mark reads optically centred in the grid column. */
  margin-inline-end: -0.2em;
  color: var(--cpg-gold);
}
.cpg-header__brand .cpg-wordmark__qualifier { display: none; }
.cpg-header__brand .cpg-wordmark:hover .cpg-wordmark__mark { color: var(--cpg-gold-lit); }

/* --- Menu trigger ------------------------------------------------------------ */
.cpg-navtrigger {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.375rem;
  /* Drawn without a ring; the fill on hover is the whole change. */
  border: var(--cpg-border-thick) solid transparent;
  border-radius: var(--cpg-radius-pill);
  background: transparent;
  color: var(--cpg-text-on-ink);
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--cpg-duration-fast) var(--cpg-ease),
    color var(--cpg-duration-fast) var(--cpg-ease),
    border-color var(--cpg-duration-fast) var(--cpg-ease);
}
:lang(ka) .cpg-navtrigger { text-transform: none; letter-spacing: 0.06em; }
.cpg-navtrigger:hover,
.cpg-navtrigger:focus-visible {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal);
}
.cpg-navtrigger__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 1.125rem;
}
.cpg-navtrigger__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: width var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-navtrigger__bars i:nth-child(1) { width: 100%; }
.cpg-navtrigger__bars i:nth-child(2) { width: 62%; }
.cpg-navtrigger:hover .cpg-navtrigger__bars i:nth-child(2) { width: 100%; }

/* --- Language ---------------------------------------------------------------- */
.cpg-body--holding .cpg-lang__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: auto;
  min-width: 4.75rem;
  height: 1.875rem;
  min-height: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--cpg-text-on-ink);
  border-radius: 2px;
  color: var(--cpg-text-on-ink);
  font-family: "Inter", var(--cpg-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background 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-body--holding .cpg-lang__summary::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-inline-start: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-30%) rotate(45deg);
  opacity: 1;
  font-size: inherit;
  transition: transform var(--cpg-duration-fast) var(--cpg-ease);
}
.cpg-body--holding .cpg-lang[open] .cpg-lang__summary::after { transform: translateY(15%) rotate(225deg); }
.cpg-body--holding .cpg-lang__summary:hover,
.cpg-body--holding .cpg-lang[open] .cpg-lang__summary {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal);
}
.cpg-body--holding .cpg-lang__menu {
  /* The switcher sits at the start of the bar, so its panel opens that way
     too rather than hanging off the left edge. */
  inset-inline-start: auto;
  inset-inline-end: 0;
  border: var(--cpg-border-hair) solid var(--cpg-hair-on-dark);
  background: var(--cpg-charcoal-deep);
  border-radius: var(--cpg-radius-xs);
}
.cpg-body--holding .cpg-lang__link { color: var(--cpg-text-on-ink); }
.cpg-body--holding .cpg-lang__link:hover { background: rgba(255, 255, 255, 0.08); color: var(--cpg-gold); }
.cpg-body--holding .cpg-lang__link[aria-current="true"]::after { color: var(--cpg-gold); }

/* --- Pill action + square action --------------------------------------------- */
.cpg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.75rem;
  /* Drawn without a ring; the fill on hover is the whole change. */
  border: var(--cpg-border-hair) solid transparent;
  border-radius: var(--cpg-radius-pill);
  background: transparent;
  color: var(--cpg-text-on-ink);
  font-family: var(--cpg-font-body);
  font-size: var(--cpg-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--cpg-duration-fast) var(--cpg-ease),
    color var(--cpg-duration-fast) var(--cpg-ease),
    border-color var(--cpg-duration-fast) var(--cpg-ease);
}
:lang(ka) .cpg-pill { text-transform: none; letter-spacing: 0.06em; }
.cpg-pill:hover,
.cpg-pill:focus-visible {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal);
}
.cpg-pill__icon { flex: none; width: 0.75rem; height: 0.75rem; }
.cpg-pill:hover .cpg-pill__icon { transform: translateX(3px); }
.cpg-pill__icon { transition: transform var(--cpg-duration-fast) var(--cpg-ease); }

.cpg-pill--gold {
  border-color: var(--cpg-gold);
  color: var(--cpg-gold-on-dark);
}
.cpg-pill--gold:hover,
.cpg-pill--gold:focus-visible {
  background: var(--cpg-gold);
  border-color: var(--cpg-gold);
  color: var(--cpg-charcoal);
}

/* The bar is fixed, so a page that does not put a hero underneath it has to
   reserve the space itself. The full height is reserved even though the bar
   condenses on scroll: the reservation only matters at the top of the page,
   where the bar is at full height. */
.cpg-body--holding .cpg-header:not([data-cpg-overlay="1"]) ~ main {
  padding-block-start: var(--cpg-shell-h);
}

/* Anchor targets must not land under the fixed bar. */
.cpg-body--holding :target { scroll-margin-block-start: calc(var(--cpg-shell-h) + var(--cpg-space-sm)); }

/* --- Circular icon action ----------------------------------------------------
   The reference pairs its pill with a 48px circle on each side of the bar;
   here the circle is a direct dial, which is also the most useful thing to
   hand a phone visitor. */
.cpg-circlelink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  /* Drawn without a ring; the fill on hover is the whole change. */
  border: var(--cpg-border-hair) solid transparent;
  border-radius: var(--cpg-radius-pill);
  color: var(--cpg-text-on-ink);
  text-decoration: none;
  transition:
    background 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-circlelink:hover,
.cpg-circlelink:focus-visible {
  background: var(--cpg-text-on-ink);
  border-color: var(--cpg-text-on-ink);
  color: var(--cpg-charcoal);
}
.cpg-circlelink svg { width: 1rem; height: 1rem; }

/* Below the tablet breakpoint the labelled action would collide with the
   centred wordmark — "კონტაქტი" and "Контакт" are wider than "Contact" — so
   the bar keeps the circular dial, which is the same action in one tap. The
   labelled route stays one tap away inside the menu. */
@media (max-width: 48rem) {
  .cpg-header__side--end .cpg-pill { display: none; }
}

/* --- Focus on the dark chrome -------------------------------------------------
   The default ring is copper, which does not clear 3:1 against charcoal and
   can vanish over a bright patch of hero photography. A white ring on a dark
   halo is legible over both. */
.cpg-body--holding .cpg-header :focus-visible,
.cpg-navoverlay :focus-visible,
.cpg-hero-slider :focus-visible {
  outline-color: var(--cpg-white);
  box-shadow: 0 0 0 calc(var(--cpg-focus-width) + var(--cpg-focus-offset)) rgba(20, 20, 20, 0.85);
}
@media (max-width: 40rem) {
  .cpg-navtrigger { padding-inline: 0.875rem; }
  /* Icon only: the label would otherwise crowd the language box. */
  .cpg-navtrigger__txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .cpg-navtrigger__bars { width: 1.25rem; }
}

/* --------------------------------------------------------------------------
   THE ROW ACROSS THE BAR — built to the supplied reference (kkcg.com): the
   destinations in 14px capitals 36px apart, a chevron on the ones that open
   a panel, a 2px line drawn under the one pointed at; the panel a full-width
   black band under the bar, its cells equal, each with its label at the top
   left and a short arrow at the bottom right that draws out to 94px on
   hover, when the cell fills with the brand gold.
   -------------------------------------------------------------------------- */
.cpg-topnav, .cpg-topnav__search { display: none; }
@media (min-width: 64rem) {
  .cpg-navtrigger { display: none; }
  .cpg-topnav { display: flex; align-self: stretch; }
  .cpg-topnav__list {
    display: flex;
    align-items: stretch;
    gap: 36px;
    margin: 0;
    padding: 0 36px 0 0;
    list-style: none;
  }
  .cpg-topnav__item { position: static; display: flex; align-items: center; }
  .cpg-topnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: var(--cpg-text-on-ink);
    font-family: "Inter", var(--cpg-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.43;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .cpg-topnav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--cpg-ease);
  }
  .cpg-topnav__item:hover > .cpg-topnav__link::after,
  .cpg-topnav__item:focus-within > .cpg-topnav__link::after,
  .cpg-topnav__link[aria-current="page"]::after { transform: scaleX(1); }
  .cpg-topnav__chevron { flex: none; width: 1.25rem; height: 1.25rem; transition: transform 0.3s var(--cpg-ease); }
  .cpg-topnav__item:hover .cpg-topnav__chevron,
  .cpg-topnav__item:focus-within .cpg-topnav__chevron { transform: rotate(180deg); }

  .cpg-topnav__panel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 2;
    background: var(--cpg-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.25s var(--cpg-ease),
      transform 0.25s var(--cpg-ease),
      visibility 0s linear 0.25s;
  }
  .cpg-topnav__item--panel:hover .cpg-topnav__panel,
  .cpg-topnav__item--panel:focus-within .cpg-topnav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.25s var(--cpg-ease),
      transform 0.25s var(--cpg-ease),
      visibility 0s;
  }
  .cpg-header .cpg-topnav__cells {
    display: flex;
    justify-content: flex-end;
    width: min(100%, 1920px);
    margin: 0 auto;
    padding: 0 3rem;
    list-style: none;
  }
  /* Four cells share the column; from 1536px every cell is a sixth of it
     and the four stand at the right, as the reference's do. */
  .cpg-topnav__cellwrap { flex: 0 0 calc(100% / max(var(--cpg-cells, 4), 4)); }
  @media (min-width: 96rem) { .cpg-topnav__cellwrap { flex-basis: 16.6667%; } }
  .cpg-topnav__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-end: 2.25rem;
    color: var(--cpg-text-on-ink);
  }
  .cpg-topnav__search svg { width: 1.5rem; height: 1.5rem; }
  .cpg-topnav__cellwrap { display: flex; }
  .cpg-topnav__cell {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 146px;
    padding: 32px 16px 32px 40px;
    color: #656565;
    text-decoration: none;
    transition: background-color 0.3s var(--cpg-ease), color 0.3s var(--cpg-ease);
  }
  .cpg-topnav__cell-label {
    display: block;
    margin-bottom: 50px;
    font-family: "Inter", var(--cpg-font-body);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.33;
  }
  .cpg-topnav__cell-arrow {
    position: absolute;
    right: 16px;
    bottom: 32px;
    width: 16px;
    height: 16px;
    overflow: visible;
    transition: width 0.5s var(--cpg-ease);
  }
  .cpg-topnav__cell-arrow svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .cpg-topnav__cell-arrow .cpg-topnav__cell-arrowhead { left: auto; right: 0; width: 16px; }
  .cpg-topnav__cell:hover,
  .cpg-topnav__cell:focus-visible { background: #94BDC3; color: #212E30; }
  .cpg-topnav__cell:hover .cpg-topnav__cell-arrow,
  .cpg-topnav__cell:focus-visible .cpg-topnav__cell-arrow { width: 94px; }
  .cpg-topnav__cell[aria-current="page"] .cpg-topnav__cell-label { color: var(--cpg-text-on-ink); }
}
/* Between the tablet and the desktop breakpoints the row would not fit
   with the Georgian and Russian labels; the sheet serves instead. */

/* --------------------------------------------------------------------------
   THE SHEET — built to the supplied reference: a black sheet that drops from
   the top, the wordmark and "close ×" on its first row, the destinations
   40px tall 24px apart, and the copyright, the languages and the social
   links at its foot.
   -------------------------------------------------------------------------- */
.cpg-navoverlay {
  position: fixed;
  inset: 0;
  z-index: var(--cpg-z-overlay);
  background: var(--cpg-ink);
  color: var(--cpg-text-on-ink);
  /* Closed by default in CSS, not only by the [hidden] the script sets: if
     the script never runs, a full-viewport element at opacity 0 would still
     swallow every click on the page. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  transition:
    transform 0.55s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0s linear 0.55s,
    visibility 0s linear 0.55s;
}
.cpg-navoverlay[hidden] { display: none; }
/* :target is the no-JavaScript path — the trigger is a link to this element.
   With the script running the trigger cancels the navigation, so :target
   never fires and .is-open drives the state. */
.cpg-navoverlay.is-open,
.cpg-navoverlay:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transition:
    transform 0.55s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0s,
    visibility 0s;
}
.cpg-navoverlay__content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 1rem 2rem;
}
.cpg-navoverlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cpg-shell-h);
  flex: none;
}
.cpg-navoverlay__bar .cpg-wordmark,
.cpg-header__brand .cpg-wordmark { color: var(--cpg-text-on-ink); text-decoration: none; }
.cpg-navoverlay__bar .cpg-wordmark__mark {
  font-family: var(--cpg-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cpg-text-on-ink);
}
.cpg-navoverlay__bar .cpg-wordmark__qualifier { display: none; }
.cpg-navclose {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--cpg-text-on-ink);
  font-family: "Inter", var(--cpg-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cpg-navclose__x { flex: none; width: 0.75rem; height: 0.75rem; }
.cpg-navclose:hover,
.cpg-navclose:focus-visible { color: var(--cpg-gold-on-dark); }

.cpg-navoverlay__body { flex: none; padding-block: 1.5rem 3rem; }
.cpg-sheetnav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cpg-sheetnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--cpg-text-on-ink);
  font-family: "Inter", var(--cpg-font-body);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.cpg-sheetnav__link--summary { list-style: none; }
.cpg-sheetnav__link--summary::-webkit-details-marker { display: none; }
.cpg-sheetnav__link:hover,
.cpg-sheetnav__link:focus-visible,
.cpg-sheetnav__link[aria-current="page"] { color: var(--cpg-gold-on-dark); }
.cpg-sheetnav__chevron { flex: none; width: 1.75rem; height: 1.75rem; transition: transform 0.3s var(--cpg-ease); }
.cpg-sheetnav__group[open] .cpg-sheetnav__chevron { transform: rotate(180deg); }
.cpg-sheetnav__children {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.cpg-sheetnav__child {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", var(--cpg-font-body);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.cpg-sheetnav__child:hover,
.cpg-sheetnav__child:focus-visible { color: var(--cpg-text-on-ink); }
.cpg-sheetnav__child[aria-current="page"] { color: var(--cpg-gold-on-dark); }

.cpg-navoverlay__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  line-height: 1.5;
}
.cpg-navoverlay__copy { margin: 0; }
.cpg-navoverlay__langs { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cpg-navoverlay__lang {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.cpg-navoverlay__lang:hover,
.cpg-navoverlay__lang[aria-current="true"] { border-color: var(--cpg-text-on-ink); color: var(--cpg-text-on-ink); }
.cpg-navoverlay__socials { margin-inline-start: auto; }
.cpg-navoverlay .cpg-socials a { color: rgba(255, 255, 255, 0.72); }
.cpg-navoverlay .cpg-socials a:hover { color: var(--cpg-text-on-ink); }

@media (max-width: 40rem) {
  .cpg-sheetnav__link { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cpg-navoverlay,
  .cpg-topnav__panel,
  .cpg-topnav__link::after,
  .cpg-topnav__chevron,
  .cpg-topnav__cell,
  .cpg-topnav__cell-arrow,
  .cpg-sheetnav__chevron { transition: none; }
}

/* The close control only does something once the script has upgraded the
   trigger into a modal button; without it the visitor leaves the menu with
   the browser's back button or by following a link. */
.no-js .cpg-navclose { display: none; }

/* --------------------------------------------------------------------------
   SECTIONS THAT RISE
   holding-rise.js marks every block after the opening one; each is held a
   step below its place and faded until the page reaches it. The class on
   the root is set only once the script has run, so nothing is ever left
   hidden when it has not.
   -------------------------------------------------------------------------- */
html.cpg-rise-ready [data-cpg-rise] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 1s var(--cpg-ease), transform 1.15s var(--cpg-ease);
  will-change: opacity, transform;
}
html.cpg-rise-ready [data-cpg-rise].is-risen { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html.cpg-rise-ready [data-cpg-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   THE CURTAIN
   Charcoal over everything, the wordmark in the middle, a hairline under it
   filling as the page loads. It lifts upward with the same shutter the menu
   uses. Not shown without JavaScript; lifted at 3s by the stylesheet itself
   if the script never does.
   -------------------------------------------------------------------------- */
.cpg-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--cpg-charcoal-deep);
  color: var(--cpg-gold);
  transform: translate3d(0, 0, 0);
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.8s;
  animation: cpg-loader-lift 0.8s cubic-bezier(0.7, 0, 0.2, 1) 3s forwards;
}
html.no-js .cpg-loader { display: none; }
.cpg-loader.is-done { transform: translate3d(0, -100%, 0); visibility: hidden; animation: none; }
.cpg-loader[hidden] { display: none; }
@keyframes cpg-loader-lift { to { transform: translate3d(0, -100%, 0); visibility: hidden; } }

.cpg-loader__inner { display: grid; justify-items: center; gap: 1.25rem; transform: translateY(-2vh); }
.cpg-loader__mark {
  font-family: var(--cpg-font-body);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--cpg-gold);
  opacity: 0;
  animation: cpg-loader-mark 0.9s var(--cpg-ease) 0.1s forwards;
}
@keyframes cpg-loader-mark { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cpg-loader__bar { position: relative; width: 7.5rem; height: 1px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.cpg-loader__bar i {
  position: absolute;
  inset: 0;
  background: var(--cpg-gold);
  transform-origin: left center;
  transform: scaleX(0);
  animation: cpg-loader-fill 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
@keyframes cpg-loader-fill { to { transform: scaleX(1); } }
/* While the curtain is down the page beneath holds still. */
html.cpg-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cpg-loader { transition: none; animation: none; }
  .cpg-loader__mark, .cpg-loader__bar i { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   NOTHING RISES — every page opens standing. The reveal the shared layer
   offers is switched off here, and the rise script is no longer linked.
   -------------------------------------------------------------------------- */
.cpg-body--holding .cpg-reveal,
.cpg-body--holding [data-cpg-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }