/* ==========================================================================
   Responsive layer — applied on top of all section styles.
   Matches the reference site's model: Desktop (base) / Tablet (≤1024) /
   Phone (≤600). Navbar collapses to a hamburger ≤900. Loaded last so it
   overrides the per-section desktop rules.
   ========================================================================== */

/* ---------- Navbar: hamburger ---------- */
.sec-navbar__toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sec-navbar__toggle-bar,
.sec-navbar__toggle-bar::before,
.sec-navbar__toggle-bar::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.sec-navbar__toggle-bar {
  position: relative;
}

.sec-navbar__toggle-bar::before {
  position: absolute;
  top: -7px;
  left: 0;
}

.sec-navbar__toggle-bar::after {
  position: absolute;
  top: 7px;
  left: 0;
}

.sec-navbar.is-open .sec-navbar__toggle-bar {
  background: transparent;
}

.sec-navbar.is-open .sec-navbar__toggle-bar::before {
  transform: translateY(7px) rotate(45deg);
}

.sec-navbar.is-open .sec-navbar__toggle-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .sec-navbar__toggle {
    display: inline-flex;
  }

  /* desktop link row becomes a dropdown panel */
  .sec-navbar__links {
    display: none;
  }

  .sec-navbar.is-open .sec-navbar__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    right: 8px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
    padding: 12px 24px 20px;
    z-index: 60;
  }

  .sec-navbar__links .sec-navbar__link,
  .sec-navbar__links .sec-navbar__dropdown {
    width: 100%;
  }

  .sec-navbar__link {
    padding: 12px 0;
  }

  /* no hover mega-menu on mobile — Platform is just a link */
  .sec-navbar__mega {
    display: none !important;
  }

  .sec-navbar__chevron {
    display: none;
  }
}

/* ==================== Tablet ≤1024 ==================== */
@media (max-width: 1024px) {
  .sec-navbar {
    padding: 16px 24px;
  }

  /* keep full-bleed sections off the viewport edges */
  .sec-footer {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* scale big headings down a step */
  .sec-footer__cta-title {
    font-size: 36px;
    line-height: 1.2;
  }

  .sec-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .sec-footer__cta-right {
    max-width: none;
  }
}

/* ==================== Phone ≤600 ==================== */
@media (max-width: 600px) {
  .sec-navbar {
    padding: 14px 20px;
  }

  /* CTA would overlap the logo on a phone bar — keep just logo + hamburger */
  .sec-navbar__actions .sec-navbar__btn {
    display: none;
  }

  /* the radial hub diagram is too dense to read at phone size */
  .hub-diagram {
    display: none;
  }

  /* tighten horizontal padding everywhere */
  .sec-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* headings smaller still */
  .sec-footer__cta-title {
    font-size: 28px;
    line-height: 1.25;
  }

  /* footer columns wrap */
  .sec-footer__columns {
    flex-wrap: wrap;
    gap: 32px 24px;
  }
  .sec-footer__brand {
    width: 100%;
  }
  .sec-footer__nav {
    width: calc(50% - 12px);
  }

}

/* ==================== Hub diagram (mobile) ==================== */
/* The radial "Corporate AI asset" diagram is a fixed 1360×780 stage scaled to
   fit by hub.js; on phones it shrank to ~6px text and was hidden entirely.
   Instead of hiding, restack it as a vertical list: hub on top, the seven
   capabilities below. hub.js writes inline transform/height and each label has
   inline left/top, so these are overridden with !important. hub.js and the
   desktop/tablet radial are untouched. */
@media (max-width: 600px) {
  .hub-diagram {
    display: flex;
    height: auto !important; /* beat hub.js inline height */
    overflow: visible;
    padding: 8px 4px 0;
  }

  .hub-diagram__stage {
    transform: none !important; /* beat hub.js inline scale() */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* connecting spokes are meaningless once the layout is a vertical list */
  .hub-diagram__lines {
    display: none;
  }

  .hub-diagram__hub {
    position: static;
    left: auto;
    top: auto;
    order: -1; /* hub sits at the top */
    width: 168px;
    height: 168px;
    margin: 0 auto 18px;
  }

  .hub-diagram__label {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    text-align: center !important;
    transform: none !important; /* no radial scale/positioning */
    font-size: 16px;
    line-height: 1.45;
    padding: 14px 12px;
    border-top: 1px solid #ececec;
  }

  /* keep the auto-cycling highlight but without the scale jump */
  .hub-diagram__label.is-active {
    transform: none !important;
  }
}