/* ==========================================================================
   LAYOUT — site chrome that repeats on every page
   (TopBar, Header/Navbar, Footer). In React these become the <Layout>
   wrapper: <TopBar/> <Header/> <main/> <Footer/>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0.36px;
  position: relative;
  z-index: 9;
}

.topbar__inner {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: 0.4rem;
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-white);
}

.topbar__item:hover {
  color: var(--c-white);
  opacity: 0.85;
}

.topbar__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.topbar__locale {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.topbar__locale a {
  color: var(--c-white);
}

.topbar__sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   HEADER / NAVBAR
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--c-white);
  box-shadow: var(--sh-header);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--t-base);
}

/* Lift only once the page has scrolled — flat at rest keeps the top clean. */
.site-header.is-stuck {
  box-shadow: var(--sh-header-stuck);
}

/* Bootstrap's .navbar supplies the flex row; we only set the height and
   kill its default padding so the container spacing stays ours. */
.site-header__nav {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-color: var(--c-border-strong);
  --bs-navbar-toggler-focus-width: 0.2rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.site-header__nav > .container {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  width: 233px;
  max-width: 46vw;
  height: auto;
}

/* Two marks in the markup, one shown at a time. Only the overlay header ever
   needs the light one, and only while it is still transparent. */
.site-logo__mark--light {
  display: none;
}

/* --------------------------------------------------------------------------
   OVERLAY HEADER  —  body.overlay-header

   The home banner is a full-screen photograph, so the header sits on it rather
   than above it: no white band, logo and nav straight over the picture. Scoped
   to a body class because it is a property of the PAGE, not of the header —
   every inner page's banner is a light gradient, where a light logo and white
   links would disappear.

   position: fixed, not sticky. Sticky takes space in the flow, which is what
   pushed the banner down; fixed lifts the header out so the banner can start at
   the very top and fill the screen, and it still stays put while scrolling.

   Once the banner has passed under it the header goes solid white and behaves
   normally — main.js flips .is-stuck at the bottom of the banner rather than
   after 8px, so it does not turn white while the picture is still behind it.
   -------------------------------------------------------------------------- */
.overlay-header .site-header {
  position: fixed;
  inset: 0 0 auto;
}

/* Transparent only while it is still over the banner. Once .is-stuck lands the
   base .site-header rules take back over — white, with the deeper shadow — so
   there is nothing to restore here. */
.overlay-header .site-header:not(.is-stuck) {
  background: transparent;
  box-shadow: none;
}

.overlay-header .site-header:not(.is-stuck) .site-logo__mark--light {
  display: block;
}

.overlay-header .site-header:not(.is-stuck) .site-logo__mark--solid {
  display: none;
}

/* The bars of the hamburger, which is the only nav control visible below xl. */
.overlay-header .site-header:not(.is-stuck) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.45);
}

.overlay-header .site-header:not(.is-stuck) .nav-toggle span {
  background: var(--c-white);
}

/* Only from xl, where Bootstrap flattens the offcanvas into an inline row. Below
   that the same links live in a white drawer and must stay dark. */
@media (min-width: 1200px) {
  .overlay-header .site-header:not(.is-stuck) .site-nav__link {
    color: var(--c-white);
  }

  .overlay-header .site-header:not(.is-stuck) .site-nav__link:hover,
  .overlay-header .site-header:not(.is-stuck) .site-nav__link[aria-current="page"] {
    color: var(--c-accent);
  }

  .overlay-header .site-header:not(.is-stuck) .site-nav__link::before {
    background: var(--c-accent);
  }
}

/* Primary navigation ------------------------------------------------------ */

/* At lg+ Bootstrap flattens .offcanvas into a normal flex row; this just
   spaces the two groups (links, CTA) inside it. */
.site-nav .offcanvas-body {
  display: flex;
  gap: var(--sp-6);
}

.site-nav__list {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.4rem;
  /* Tightened a step: in caps the items read as longer blocks, so the old
     2.35rem between them left the bar looking gappy. */
  gap: clamp(0.5rem, 0.25rem + 0.5vw, 0.95rem);
}

/* Set in caps, which needs a touch more weight and tracking to stay legible
   at this size. */
.site-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-900);
  white-space: nowrap;
}

/* Animated underline on hover / current page.
   Uses ::before, NOT ::after — Bootstrap builds the dropdown caret out of
   .dropdown-toggle::after, so sharing that pseudo-element made the two rules
   overwrite each other (the caret's border-top stretched across the 100%-wide
   underline box and rendered as a black bar, with no caret at all). */
.site-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--c-primary);
}

.site-nav__link:hover::before,
.site-nav__link[aria-current="page"]::before {
  transform: scaleX(1);
}

/* Dropdown ---------------------------------------------------------------- */
.site-nav__link.dropdown-toggle::after {
  margin-left: 0.4rem;
  vertical-align: 0.14em;
  border-top: 0.32em solid;
  border-right: 0.32em solid transparent;
  border-left: 0.32em solid transparent;
  border-bottom: 0;
  opacity: 0.5;
  transition: transform var(--t-base), opacity var(--t-base);
}

.site-nav__link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
}

.site-dropdown {
  --bs-dropdown-min-width: 15rem;
  --bs-dropdown-padding-y: 0.5rem;
  /* Deliberate gap between the nav link and the panel — see the bridge below,
     which keeps the pointer "inside" the item while crossing it. */
  --bs-dropdown-spacer: 0.55rem;
  --bs-dropdown-border-color: var(--c-border-mid);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--c-ink-800);
  --bs-dropdown-link-hover-color: var(--c-primary);
  --bs-dropdown-link-hover-bg: var(--c-tint-indigo);
  --bs-dropdown-link-active-color: var(--c-primary);
  --bs-dropdown-link-active-bg: var(--c-tint-indigo);
  --bs-dropdown-item-padding-x: 1.1rem;
  --bs-dropdown-item-padding-y: 0.55rem;
  --bs-dropdown-font-size: var(--fs-body);
  box-shadow: 0 16px 38px rgba(11, 28, 45, 0.12);
  font-family: var(--font-body);
}

/* Invisible bridge across the spacer gap. Without it the pointer leaves the
   .nav-item on its way from the link down to the panel, which reads as the
   menu flickering shut just as you reach it. */
.site-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--bs-dropdown-spacer) + 2px);
}

/* Bootstrap flips display:none → block, so a transition has nothing to run
   on; a keyframe on .show is the reliable way to animate it. The toggles use
   data-bs-display="static" so Popper is not writing its own transform here —
   otherwise animating transform would fight the positioning. */
@keyframes site-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-dropdown.show {
  animation: site-dropdown-in 0.2s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .site-dropdown.show {
    animation: none;
  }
}

.site-dropdown .dropdown-item {
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}

.site-dropdown .dropdown-item:hover {
  padding-left: 1.35rem;
}

.site-dropdown__all {
  font-weight: var(--fw-medium);
  color: var(--c-primary);
}

.site-header__cta {
  flex-shrink: 0;
}

/* Hamburger — Bootstrap's .navbar-toggler handles show/hide and the
   aria-expanded state; these are the three bars and their X animation. */
.nav-toggle {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-strong);
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-ink-900);
  transition: transform var(--t-base), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   PAGE HERO  →  <PageHero title breadcrumb />
   Site chrome: used by every inner page (About, Solutions, Services and each
   solution detail page), which is why it lives here rather than in a
   page-specific stylesheet.
   -------------------------------------------------------------------------- */
/* Light banner on the same washed circuit background as the home page hero,
   so the two pages read as one system. The original version was flat and
   half-empty; the structure below (two columns + a facts panel) is what fixes
   that, not darkness. */
.page-hero {
  position: relative;
  /* Enough to clear the header and the first section without the banner
     becoming a screen of its own — at 81px a side a detail page spent its
     opening scroll on padding. */
  padding-block: clamp(1.9rem, 1.35rem + 2vw, 3rem);
  /* A quiet light gradient rather than the circuit photograph: on an inner
     page the banner is a label for what follows, and the picture was
     competing with the content underneath it. */
  background: linear-gradient(
    115deg,
    #eef3fb 0%,
    #f6f8fc 42%,
    #f2f7fd 72%,
    #eaf4fb 100%
  );
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  isolation: isolate;
}

/* A single soft brand bloom in the top corner keeps it from reading flat. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    70% 120% at 88% 0%,
    rgba(0, 129, 189, 0.1) 0%,
    rgba(0, 129, 189, 0) 68%
  );
}

.page-hero__title {
  font-family: var(--font-body);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.44px;
  color: var(--c-ink-900);
  margin-block: 0.9rem 1rem;
}

/* Own line, so the title never breaks mid-phrase — and it echoes the
   two-line accent treatment of the home page hero. */
.page-hero__title .text-brand {
  display: block;
  color: var(--c-primary);
}

/* Banner paragraph sits at body size, matching .overview__text, rather than
   the larger --fs-lead the home page hero uses. */
.page-hero__lead {
  max-width: 38rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.5px;
  color: var(--c-ink-850);
  margin-bottom: 2rem;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* "At a glance" panel — fills the right-hand space with substance instead of
   whitespace. The Credentials section further down goes deeper; this is the
   headline version. */
/* The 1px grid gap over a tinted background is what draws the hairline
   dividers between cells — no per-cell borders to get wrong at the edges. */
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-border-mid);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}

.page-hero__fact {
  padding: 1.5rem 1.4rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-hero__fact dt {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.35rem;
}

.page-hero__fact dd {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--c-navy-900);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Breadcrumb */
.breadcrumb-sysin {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  color: var(--c-ink-400);
}

.breadcrumb-sysin a:hover {
  color: var(--c-primary);
}

.breadcrumb-sysin [aria-current] {
  color: var(--c-primary);
}

.breadcrumb-sysin svg {
  width: 12px;
  height: 12px;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
/* Light wash rather than white — the same #f7f8fa the banner sits on, so the
   page closes on a tint instead of running the white section straight into
   the bottom of the window. */
.site-footer {
  background: #fffef9;
  border-top: 1px solid var(--c-border);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 3.43rem);
  color: var(--c-ink-600);
  font-family: var(--font-ui);
}
.site-footer__bottom-cc{
  background-color: #fbfbfb;
}

/* Vertical hairline separating the brand column from the link columns. */
.site-footer__brand {
  position: relative;
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
      display: flex;
    align-items: center;
}

/* .site-footer__brand::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 1px;
  height: calc(100% - 0.5rem);
  background: var(--c-divider);
} */

.site-footer__logo {
  width: 261px;
  max-width: 100%;
  margin-bottom: 1.6rem;
}

/* Phone and email as one list: same icon, same baseline, same left edge, so
   the two read as a pair rather than as a heading with two loose links. */
.site-footer__contact {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.site-footer__ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  color: var(--c-primary);
  box-shadow: var(--sh-card);
}

.site-footer__ico svg {
  width: 17px;
  height: 17px;
}

/* One treatment for both: they are two ways of reaching the same desk, and
   sizing the phone up made the email read as an afterthought. */
.site-footer__phone,
.site-footer__email {
  font-family: var(--font-ui);
  font-size: 1.0925rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
  color: var(--c-navy-900);
  transition: color var(--t-base);
}

.site-footer__phone:hover,
.site-footer__email:hover {
  color: var(--c-primary);
}

/* Sits under a hairline so it reads as its own row rather than as a third
   contact line. */
.site-footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  /* padding-top: 1.5rem; */
  /* border-top: 1px solid var(--c-divider); */
}

.site-footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  color: var(--c-ink-600);
  transition: color var(--t-base), background var(--t-base),
    border-color var(--t-base), transform var(--t-base);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-2px);
}

.site-footer__social svg {
  width: 17px;
  height: 17px;
}

.site-footer__col-title {
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.35px;
  color: var(--c-ink-600);
  margin-bottom: 1.55rem;
}

.site-footer__links li + li {
  margin-top: 1.15rem;
}

.site-footer__links a {
  font-family: var(--font-ui);
  font-size: 1.0125rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.35px;
  color: var(--c-ink-600);
}

.site-footer__links a:hover {
  color: var(--c-primary);
  padding-left: 3px;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--c-border);
  font-family: var(--font-ui);
  font-size: 1.0125rem;
  color: var(--c-ink-600);
}

/* On a phone the floating support button sits exactly where this row ends —
   leave it room rather than letting it cover the legal links. */
@media (max-width: 575.98px) {
  .site-footer__bottom {
    padding-bottom: 4.75rem;
  }
}

.site-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.site-footer__legal .sep {
  opacity: 0.5;
}

/* Back-to-top button (progressively enhanced). */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 8px 20px rgba(0, 129, 189, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
  z-index: 1020;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   HERO SCENE  →  <HeroScene icon chips />

   A hand-authored isometric illustration for inner-page banners: a stacked
   platform, a gradient shield carrying the page's own mark, and floating
   chips for related marks, wired together with dashed links.

   All of it is SVG driven by design tokens — no raster artwork, nothing to
   re-export per page, and it stays crisp at any size.
   -------------------------------------------------------------------------- */
.hero-scene {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
}

.hero-scene svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Slow drift on the whole shield group. */
.hero-scene__float {
  animation: hero-scene-float 7s ease-in-out infinite;
  transform-origin: 240px 180px;
}

.hero-scene__chip {
  animation: hero-scene-float 6s ease-in-out infinite;
}

.hero-scene__chip--b {
  animation-duration: 7.5s;
  animation-delay: -2s;
}

.hero-scene__chip--c {
  animation-duration: 8.5s;
  animation-delay: -4s;
}

/* The dashed links pulse along their length. */
.hero-scene__link {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 1.8;
  stroke-dasharray: 4 7;
  opacity: 0.55;
  animation: hero-scene-dash 2.4s linear infinite;
}

.hero-scene__orbit {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 1.4;
  stroke-dasharray: 3 8;
  opacity: 0.3;
  transform-origin: 240px 300px;
  animation: hero-scene-spin 60s linear infinite;
}

/* radar sweep on the cybersecurity scene */
.hero-scene__sweep {
  animation: hero-scene-spin 8s linear infinite;
}

/* migration arrows on the cloud scene */
.hero-scene__rise {
  animation: hero-scene-rise 2s linear infinite;
}

@keyframes hero-scene-rise {
  to { stroke-dashoffset: -28; }
}

@keyframes hero-scene-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes hero-scene-dash {
  to { stroke-dashoffset: -22; }
}

@keyframes hero-scene-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene__float,
  .hero-scene__chip,
  .hero-scene__link,
  .hero-scene__orbit,
  .hero-scene__sweep,
  .hero-scene__rise {
    animation: none;
  }
}