/* Shared public shell: the approved GCP palette, with native content flow. */
:root {
  --site-ink: #edf4f7;
  --site-muted: #b1c4ce;
  --site-cyan: #8deaff;
  --site-line: rgba(149, 195, 216, .22);
}
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: visible; }

body .header,
.bp-header {
  background: rgba(5, 12, 19, .96);
  border-bottom-color: var(--site-line);
}
body .header .navbar { min-height: 5rem; padding-block: 1rem; }
body .header .logo a,
.bp-header a.logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 174px;
  height: 38px;
  padding-left: 44px;
  background: url('/assets/images/logo-mark.png') left center / 32px no-repeat;
  text-indent: 0;
  color: var(--site-ink);
  font: 650 1.1rem/1.2 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -.045em;
  border-radius: 0;
  transform: none;
}
body .header::after,
.bp-header::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, #79a9ff 0 25%, #91ddb6 25% 50%, #f3ca7c 50% 75%, #ff938e 75%);
  opacity: .6;
  pointer-events: none;
}
.bp-header { position: relative; padding-block: 1rem; }
.bp-header .bp-shell { min-height: 3rem; gap: .75rem 1.5rem; }
.bp-header nav { gap: .25rem 1rem; }
.bp-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.header .nav-links > li > a,
.header .nav-mega__link,
.header .nav-mega__toggle { min-height: 44px; align-items: center; }
.header .nav-links > li > a { display: inline-flex; }
.header .nav-links { margin: 0; padding-left: 0; }

.btn.btn-primary,
.bp-button:not(.bp-button--secondary) {
  background: var(--site-cyan);
  color: #031018 !important;
  border: 1px solid var(--site-cyan);
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
}
.btn.btn-primary:hover,
.bp-button:not(.bp-button--secondary):hover {
  background: #c0f5ff;
  border-color: #c0f5ff;
  color: #031018 !important;
}
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--site-cyan);
  outline-offset: 4px;
}
.site-skip {
  position: fixed;
  z-index: 10000;
  top: 1rem;
  left: 1rem;
  padding: .8rem 1.1rem;
  background: var(--site-cyan);
  color: #031018;
  border-radius: 4px;
  transform: translateY(-200%);
}
.site-skip:focus { transform: none; }
main[id], main [id] { scroll-margin-top: 7rem; }

.footer, .bp-footer { border-top-color: var(--site-line); }
.site-footer-routes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--site-line);
}
.site-footer-routes a,
.site-phone,
.bp-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--site-muted);
  text-underline-offset: 4px;
}
.site-phone { color: var(--site-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.footer a:hover, .bp-footer a:hover { color: var(--site-cyan); }
.footer a[aria-label]:has(img), .footer__social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.footer__social a:hover { transform: none; }

@media (max-width: 900px) {
  body .header .navbar { min-height: 4.4rem; height: auto; padding-block: .7rem; }
  body .header .logo a, .bp-header a.logo { min-width: 158px; font-size: 1rem; }
  .header .nav-links { width: min(320px, 100%); height: 100dvh; padding-top: 88px; }
  html[data-nav-pending] body:not(.js-nav-ready) .header .nav-links { visibility: hidden; }
  /* Static navigation remains usable when enhancement is absent or fails. */
  html:not([data-nav-pending]) body:not(.js-nav-ready) .header .navbar { flex-wrap: wrap; gap: .75rem; }
  html:not([data-nav-pending]) body:not(.js-nav-ready) .header .nav-toggle { display: none; }
  html:not([data-nav-pending]) body:not(.js-nav-ready) .header .nav-links {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    visibility: visible;
    padding: 0;
    margin: 0;
    gap: .25rem;
    overflow: visible;
    border: 0;
    background: transparent;
    transition: none;
  }
  html:not([data-nav-pending]) body:not(.js-nav-ready) .header .nav-links a { padding: .5rem .65rem; }
  html:not([data-nav-pending]) body:not(.js-nav-ready) .header { position: relative; }
  .bp-header .bp-shell { align-items: center; }
  .bp-header nav { width: 100%; gap: .25rem 1rem; }
  /* The contact page already contains the task: keep its extra CTA in flow. */
  body.site-contact-page .mobile-lead-bar { position: static; margin-block: 1rem; }
  body.site-contact-page .mobile-lead-bar__spacer { display: none; }
}
@media (min-width: 901px) {
  html:not([data-nav-pending]) body.infrastructure-visual-page:not(.js-nav-ready) .nav-links { visibility: visible; }
}
@media (max-width: 480px) {
  .mobile-lead-bar__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-lead-bar__actions .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: .7rem;
    font-size: .86rem;
    line-height: 1.4;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  body[data-motion-page='about'] .metric-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-motion-page='about'] .metric-grid .metric { min-width: 0; }
  body[data-motion-page='about'] .metric-grid strong { overflow-wrap: anywhere; }
  body[data-motion-page='about'] .motion-editorial-depth { max-width: calc(100% - 1rem); margin-inline: .5rem; }
  body[data-motion-page='about'] .motion-editorial-depth figcaption {
    left: 0;
    right: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .nav-links, .logo a, .btn, .bp-button { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  body .header::after, .bp-header::after { display: none; }
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}