@import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css");

/* Two-row header: shared grid aligns logo / links (col 1) with CTAs (col 2) */
:root {
  --site-primary: #0d4d8c;
  --site-accent: #1a8fd4;
  --site-dark: #0a2d4a;
  --site-text: #1a1a1a;
  --site-nav-muted: #3d4f5f;
  --site-border: #e2e8f0;
  --site-border-tertiary: rgba(26, 26, 26, 0.12);
  --site-header-top-h: 44px;
  --site-header-sub-h: 42px;
  --site-header-h: calc(var(--site-header-top-h) + var(--site-header-sub-h));
  --site-header-content-gap: 0.5cm;
  --site-header-max-w: 1320px;
  --site-nav-gap: 5px;
  --site-nav-row-gap: 8px;
  --site-nav-font-size: 13px;
  --site-nav-link-px: 0.12rem;
  --site-nav-inactive: #0c2340;
  --site-subnav-bg: #f4f8fc;
  --site-font-family: Calibri, "Carlito", "Segoe UI", Arial, sans-serif;
  /* Uniform page intro (hero h1) and section headline (h2) sizes sitewide */
  --site-hero-title-size: clamp(1.48rem, 3.2vw, 2.33rem);
  --site-hero-title-line-height: 1.2;
  --site-section-title-size: clamp(1.35rem, 2.5vw, 1.85rem);
  --site-section-title-line-height: 1.25;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-header-h) + 3rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#site-header-mount {
  min-height: var(--site-header-h);
  margin: 0;
  padding: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border-bottom: 0 solid transparent;
  transition: border-bottom-color 0.15s ease;
  padding-top: env(safe-area-inset-top, 0px);
}

.site-header.site-header-scrolled {
  border-bottom: 0.5px solid var(--site-border-tertiary);
}

.site-header-shell {
  max-width: var(--site-header-max-w);
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

.site-header-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--site-header-top-h) var(--site-header-sub-h);
  column-gap: 0;
  align-items: stretch;
  width: 100%;
}

.site-header-brand-row {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding-right: 1rem;
  border-bottom: 1px solid var(--site-border);
}

.site-header-cta-row {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-left: 1rem;
  border-bottom: 1px solid var(--site-border);
  gap: 12px;
  flex-shrink: 0;
}

.site-nav-links-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-height: var(--site-header-sub-h);
  padding: 0.15rem 0;
  background-color: #ffffff;
  border-bottom: 1px solid var(--site-border);
  overflow: hidden;
  flex-wrap: nowrap;
}

.site-header-cta-spacer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: none;
  min-height: var(--site-header-sub-h);
  background: var(--site-subnav-bg);
  border-bottom: 1px solid var(--site-border);
}

.site-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.site-brand img {
  height: 30px;
  width: auto;
  display: block;
}

/* Pipe between every row-2 nav link */
.site-nav-links-row a + a::before {
  content: "|";
  display: inline-block;
  margin: 0 0.2rem;
  padding-right: 0.05rem;
  color: rgba(26, 26, 26, 0.38);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1;
  vertical-align: baseline;
  pointer-events: none;
  user-select: none;
}

.site-nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.site-nav-cta-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile-first: only one CTA row visible (real devices + emulators) */
.site-nav-cta-desktop {
  display: none;
  gap: 12px;
  flex-shrink: 0;
}

.site-nav-cta-deck {
  display: inline-block;
}

.site-nav-cta .btn-invest-primary,
.site-nav-cta .btn-invest-secondary,
#site-header-mount .btn-invest-primary,
#site-header-mount .btn-invest-secondary {
  margin: 0;
  flex-shrink: 0;
  font-size: 13px;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  line-height: 1.2;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.site-nav-cta .btn-invest-primary,
#site-header-mount .btn-invest-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--site-accent), var(--site-primary)) !important;
  border: none !important;
}

.site-nav-cta .btn-invest-primary:hover,
#site-header-mount .btn-invest-primary:hover {
  color: #fff !important;
  opacity: 0.9;
  transform: none;
  box-shadow: 0 2px 8px rgba(26, 141, 212, 0.24);
}

.site-nav-cta .btn-invest-secondary,
#site-header-mount .btn-invest-secondary {
  color: var(--site-primary) !important;
  background: #fff !important;
  border: 1.5px solid var(--site-primary) !important;
}

.site-nav-cta .btn-invest-secondary:hover,
#site-header-mount .btn-invest-secondary:hover {
  transform: none;
  background: var(--site-subnav-bg) !important;
}

.site-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--site-primary);
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.site-mobile-toggle .ti {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--site-font-family);
}

/* Hero intro titles (top-of-page h1) */
.co-hero h1,
.pbs-hero h1,
.invest-hero h1 {
  font-size: var(--site-hero-title-size);
  line-height: var(--site-hero-title-line-height);
  font-weight: 700;
}

/* Section headline titles (in-page h2 and equivalent classes) */
.co-section h2,
.invest-section-title,
.int-section-title,
.pe-section-title,
.pbs-gcp-title,
.pbs-cloud-why-title,
.pbs-api-section-title,
.pbs-architecture-title {
  font-size: var(--site-section-title-size);
  line-height: var(--site-section-title-line-height);
  font-weight: 700;
}

.site-header .site-nav-main a,
.site-header .site-nav-main a:link,
.site-header .site-nav-main a:visited,
#site-header-mount .site-nav-main a,
#site-header-mount .site-nav-main a:link,
#site-header-mount .site-nav-main a:visited {
  color: var(--site-nav-inactive) !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-family: var(--site-font-family);
  font-size: var(--site-nav-font-size);
  font-weight: 600;
  line-height: 1.3;
  padding: 0.2rem 0.08rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  border-radius: 2px;
}

.site-header .site-nav-main a:hover,
#site-header-mount .site-nav-main a:hover {
  color: var(--site-text) !important;
  border-bottom-color: var(--site-accent) !important;
  background: rgba(26, 141, 212, 0.05) !important;
}

.site-header .site-nav-main a.active,
#site-header-mount .site-nav-main a.active {
  color: #0c2340 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #1a56db !important;
  background: transparent !important;
}

@media (min-width: 768px) {
  :root {
    --site-header-content-gap: 0.5cm;
  }

  .site-header-grid {
    grid-template-columns: 1fr auto;
    column-gap: 0;
  }

  .site-nav-links-row {
    display: flex;
  }

  .site-header-cta-spacer {
    display: none;
  }

  .site-nav-cta-desktop {
    display: flex !important;
  }

  .site-nav-cta-mobile {
    display: none !important;
  }

  .site-nav-cta-deck {
    display: inline-block;
  }

  .site-header-brand-row {
    padding-right: 1rem;
  }

  .site-header-cta-row {
    padding-left: 1rem;
  }
}

@media (min-width: 1200px) {
  .site-nav-links-row a + a::before {
    margin: 0 0.28rem;
  }
}

.page-company .site-header .site-nav-main a.site-nav-who-we-are.active {
  color: #0c2340 !important;
}

.page-invest .site-header .site-nav-main a.site-nav-who-we-are:not(.active) {
  color: var(--site-nav-inactive) !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
}

.site-mobile-menu {
  position: fixed;
  top: var(--site-header-top-h);
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--site-border);
  padding: 0.75rem 1rem 1rem;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 1040;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.site-mobile-menu:not(.show) {
  display: none;
}

.site-mobile-menu.show {
  display: block;
}

.site-mobile-menu a {
  display: block;
  padding: 0.55rem 0;
  color: var(--site-nav-muted) !important;
  text-decoration: none !important;
  font-weight: 400;
  font-size: 14px;
  border-bottom: 1px solid var(--site-border);
  background: transparent !important;
}

.site-mobile-menu a:hover {
  color: var(--site-accent) !important;
}

.site-mobile-menu a.active {
  color: var(--site-primary) !important;
  font-weight: 500 !important;
  background: var(--site-subnav-bg) !important;
  padding-left: 0.35rem;
  margin-left: -0.35rem;
  border-radius: 4px;
}

.site-mobile-menu .site-mobile-cta {
  margin-top: 0.5rem;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--site-primary) !important;
}

.site-mobile-menu .site-mobile-cta-primary {
  background: linear-gradient(135deg, var(--site-accent), var(--site-primary)) !important;
  color: #fff !important;
  border: none !important;
}

@media (max-width: 767.98px) {
  :root {
    --site-header-h: var(--site-header-top-h);
    --site-header-content-gap: calc(var(--site-header-top-h) + 0.35rem);
  }

  body {
    overflow-x: hidden;
  }

  #site-header-mount {
    min-height: var(--site-header-top-h);
  }

  .site-header-shell {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .site-header-grid {
    grid-template-rows: var(--site-header-top-h);
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
  }

  .site-header-brand-row {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
    min-width: 0;
  }

  .site-header-cta-row {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 62vw;
  }

  .site-nav-links-row,
  .site-header-cta-spacer {
    display: none !important;
  }

  .site-nav-cta-desktop {
    display: none !important;
  }

  .site-nav-cta-mobile {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
  }

  .site-nav-cta .btn-invest-primary,
  .site-nav-cta .btn-invest-secondary,
  #site-header-mount .btn-invest-primary,
  #site-header-mount .btn-invest-secondary {
    font-size: 11px;
    padding: 0.38rem 0.65rem;
    max-width: 100%;
  }

  .site-brand img {
    height: 26px;
    max-width: 100%;
  }

  .site-mobile-menu {
    top: calc(var(--site-header-top-h) + env(safe-area-inset-top, 0px));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}