/* gtcx://fleet/chrome-fix/v1
 * Double-chevron: captured Drupal HTML already includes caret SVGs;
 * theme JS addCaret / accordionShareholders injects a second copy.
 * Brand: size the GTCX logo mark in header/footer chrome.
 */

/* Keep first caret only (desktop + mobile accordion injectors) */
.menu-item--expanded > button > svg ~ svg,
.menu-item--expanded > a > svg ~ svg,
.menu-item button > svg:nth-of-type(n + 2),
.menu-item a > svg:nth-of-type(n + 2),
.accordion-item > button > svg ~ svg,
.li-1st-lvl > button > svg ~ svg,
header.main-header button > svg ~ svg,
header.mobile-header button > svg ~ svg,
footer.main-footer button > svg ~ svg,
.language-switcher button > svg ~ svg,
button.text-white > svg ~ svg {
  display: none !important;
}

/* GTCX wordmark in Brookfield logo-outer slot */
.logo-outer a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo-outer .gtcx-brand-logo,
img.gtcx-brand-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: min(180px, 42vw);
  object-fit: contain;
}

footer .gtcx-brand-logo,
.footer .gtcx-brand-logo {
  height: 32px;
  max-width: 200px;
}

/* Brand mark contrast in header chrome.
 *
 * The white wordmark only reads on a dark ground, but the theme paints the
 * header white in every state except one. Mirroring its own selectors:
 *   :not(.header-transparent) .header-bg-outline  -> white
 *   .main-header.scrolled     .header-bg-outline  -> white
 *   body.header-engaged       .header-inner       -> white   (menu open)
 *   body.header-transparent, unscrolled           -> transparent over dark hero
 * .mobile-header is white at all times.
 *
 * So: ink is the default and white is the exception. Swapping via content:
 * url() rather than per-page src keeps one rule for every page depth — CSS
 * urls resolve against this stylesheet, not the document.
 * The footer sits on navy and keeps its white mark (scoped out below).
 */
header.main-header .gtcx-brand-logo,
header.mobile-header .gtcx-brand-logo {
  content: url("../images/gtcx-logo.png");
}

body.header-transparent header.main-header:not(.scrolled) .gtcx-brand-logo {
  content: url("../images/gtcx-logo-white.png");
}

/* Menu open forces white chrome even on a transparent-header page. */
body.header-engaged header.main-header .gtcx-brand-logo {
  content: url("../images/gtcx-logo.png");
}

/* Webflow navbar wordmarks */
.navbar img.gtcx-brand-logo,
.nav-brand img.gtcx-brand-logo,
.w-nav-brand img.gtcx-brand-logo,
a.w-inline-block > img.gtcx-brand-logo {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Media accordion: make the wired <img> fill its sized frame.
 *
 * The frame carries the sizing and crop utilities:
 *   .list-media-accordion__image { position:absolute; h-[598px]; object-cover }
 * but object-fit only applies to replaced elements, and the reskin re-wire
 * nests the real <img> several unclassed divs deeper. So the image ignored the
 * 598/644px frame, rendered at its natural aspect (747px at xxl) and spilled
 * out of the section into the block below.
 *
 * Pass the height down the wrapper chain and let the img actually cover.
 * Affects 34 sections across 5 pages (institutions, financial-advisors,
 * asset-management, wealth-solutions, who-we-are).
 */
.list-media-accordion__image > div,
.list-media-accordion__image > div > div,
.list-media-accordion__image > div > div > div,
.list-media-accordion__image picture {
  display: block;
  height: 100%;
}

.list-media-accordion__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feature marquee: continuous scroll.
 * js/gtcx-marquee.js measures the non-cloned run and publishes it as
 * --gtcx-marquee-shift; the wrap is seamless because Slick's leftover clones
 * repeat that run. Composited, so it does not depend on per-frame JS.
 */
@keyframes gtcx-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--gtcx-marquee-shift)), 0, 0); }
}

[data-gtcx-marquee-running] {
  animation: gtcx-marquee-scroll var(--gtcx-marquee-duration, 60s) linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-gtcx-marquee-running] { animation: none; }
}

/* gtcx://exchange/header-logo-scale/v1 */
header.main-header .logo-outer a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

header.main-header .logo-outer .gtcx-brand-logo {
  width: 120px;
  height: auto;
  max-width: min(120px, 34vw);
}

header.mobile-header .logo-outer a {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

header.mobile-header .logo-outer .gtcx-brand-logo {
  width: 112px;
  height: auto;
  max-width: min(112px, 42vw);
}

header.main-header .gtcx-brand-logo,
header.mobile-header .gtcx-brand-logo,
body.header-engaged header.main-header .gtcx-brand-logo {
  content: url("../images/gtcx-logo-header.png");
}

body.header-transparent header.main-header:not(.scrolled) .gtcx-brand-logo {
  content: url("../images/gtcx-logo-white-header.png");
}
/* gtcx://exchange/header-logo-scale/end */

/* Participant-class "Obligations of the Class".
 *
 * The stock list-media-w-text module stacks items in one column and caps each
 * at 562px, so on a wide canvas the spec ran down the left third against two
 * thirds of empty page. These are reference pages - the reader is comparing
 * clauses, not reading prose - so the copy wants to be scannable side by side.
 *
 * Two columns from lg, each clause opened by a hairline rule and a counter, in
 * the register of an institutional term sheet. Hairline is warm-gray-3
 * (rgb(217 215 209)), the system's existing rule colour. No cards, no fills,
 * no accent - structure comes from the rules and the numbering alone.
 * Scoped by marker class: this module is shared with captured pages.
 */
.gtcx-spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 64px;
  row-gap: 40px;
  counter-reset: gtcx-spec;
}

@media (min-width: 1024px) {
  .gtcx-spec-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1440px) {
  .gtcx-spec-grid { column-gap: 88px; }
}

.gtcx-spec-grid > div {
  counter-increment: gtcx-spec;
  border-top: 1px solid rgb(217 215 209);
  padding-top: 24px;
}

/* The module caps its own inner width; in a column that cap is the constraint. */
.gtcx-spec-grid > div > div { max-width: none; }

.gtcx-spec-grid > div h3 { position: relative; }

/* Index the clauses. Sits in the gutter at lg where there is room, inline
   below it, so it never collides with the heading. */
.gtcx-spec-grid > div h3::before {
  content: counter(gtcx-spec, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgb(140 137 130);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .gtcx-spec-grid > div h3::before {
    position: absolute;
    top: 4px;
    left: -40px;
    margin-bottom: 0;
  }
  .gtcx-spec-grid > div { padding-left: 40px; }
}

/* Participant-class metrics: fit text values to the column.
 *
 * .metrics-grid is lg:basis-[495px] split in two, so each value gets ~237px.
 * The stock value size is text-serif-42-420, which suits the short numerics
 * the module was built for ("$1B", "150+") but not our text values: "Clearing
 * & Settlement" wrapped to three lines and "GX-GCM" broke at the hyphen.
 *
 * Scale the value down and let it flex with the viewport, keep designations
 * unbroken, and balance the wrap so a two-line value splits evenly rather
 * than leaving one orphan word.
 */
/* The module's own rule is
 *   .paragraph--type--intro-w-stats .bottom-metrics-grid .metric .value
 * at 6.4rem / (0,4,0). Match that weight through .metric so this wins on
 * specificity rather than !important. Codes like GX-GCM read as one token,
 * so they must never break at the hyphen.
 */
.gtcx-class-metrics .metric .value,
.paragraph--type--intro-w-stats .gtcx-class-metrics .metric .value {
  font-size: clamp(26px, 1.9vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}

/* Homepage hero video fills container */
.paragraph--type--hero-homepage .image-container {
  background: #001625;
}
/* 1:1 parity (2026-07-21): removed the video height/max-height override —
   Brookfield's own breakpoint caps (292/420/480/670px) govern, matching the
   original's rendered hero height at every viewport. */

/* Sitewide alert close — above alert-link; usable hit target on static Pages */
.sitewide-alert .close.js-dismiss-button {
  position: absolute;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
.sitewide-alert .alert-link {
  position: relative;
  z-index: 1;
}

/* Local preview: keep OneTrust collapsed until user has a chance; shim handles dismiss */
html.gtcx-ot-ready #onetrust-banner-sdk,
html.gtcx-ot-ready #onetrust-consent-sdk,
html.gtcx-ot-ready .onetrust-pc-dark-filter {
  display: none !important;
}

/* gtcx://exchange/homepage-layout-fixes/v1 */
section.paragraph--type--intro-w-stats .metrics-grid,
section.paragraph--type--intro-w-stats .metric {
  min-width: 0;
}

section.paragraph--type--intro-w-stats .metric .value {
  font-size: clamp(48px, 3.7vw, 72px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
}

@media (min-width: 1024px) {
  section.paragraph--type--intro-w-stats .fluid-container-narrow.flex {
    column-gap: clamp(40px, 5vw, 96px) !important;
  }

  section.paragraph--type--intro-w-stats .metrics-grid {
    flex: 0 1 680px !important;
    max-width: 680px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(36px, 3vw, 64px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  section.paragraph--type--intro-w-stats .metric .value {
    font-size: clamp(44px, 4.25vw, 58px) !important;
  }
}

@media (max-width: 767px) {
  section.paragraph--type--intro-w-stats .metric .value {
    font-size: clamp(42px, 13vw, 58px) !important;
  }
}
/* gtcx://exchange/homepage-layout-fixes/end */