.capabilities-hub {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  gap: clamp(54px, 7vw, 118px);
  align-items: center;
  min-height: calc(100svh - 162px);
  padding: clamp(38px, 5vw, 72px) clamp(24px, 6vw, 100px);
  overflow: hidden;
}

.capabilities-hub-copy,
.capability-menu {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.back-link,
.page-trail a {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.back-link:hover,
.page-trail a:hover { color: var(--orange); }
.back-link span { margin-right: 8px; color: var(--orange); font-size: 13px; }

.capabilities-hub .eyebrow { margin: clamp(30px, 4vh, 46px) 0 22px; }

.capabilities-hub h1,
.detail-hero h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.84;
  text-transform: uppercase;
}

.capabilities-hub h1 { font-size: clamp(64px, 7.1vw, 112px); }

.capabilities-hub h1 em,
.detail-hero h1 em {
  color: var(--orange);
  font-weight: 600;
}

.hub-summary,
.detail-summary {
  color: #b5b1a9;
  line-height: 1.7;
}

.hub-summary {
  max-width: 570px;
  margin: clamp(26px, 3.5vh, 40px) 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
}

.capabilities-hub .atmosphere {
  right: -12%;
  bottom: -34%;
  left: auto;
  width: min(53vw, 760px);
  transform: rotate(-4deg);
}

.capabilities-hub .trace {
  top: 9%;
  right: 4%;
  left: auto;
  width: 30%;
  height: 45%;
}

.capability-menu {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.76);
}

.capability-menu a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  min-height: clamp(116px, 15vh, 146px);
  padding: clamp(22px, 3vh, 34px) clamp(20px, 2.6vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.capability-menu a:hover {
  color: var(--orange);
  background: rgba(238, 234, 224, 0.035);
}

.menu-number {
  align-self: start;
  color: var(--orange);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.menu-copy { display: grid; gap: 10px; }

.menu-copy strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(30px, 2.8vw, 43px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

.menu-copy small {
  max-width: 560px;
  color: #89867f;
  font-size: 12px;
  line-height: 1.55;
}

.menu-arrow { justify-self: end; font-size: 17px; }

.detail-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(400px, 53svh, 570px);
  padding: clamp(42px, 5vw, 74px) clamp(24px, 6vw, 100px) clamp(64px, 7vw, 104px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.detail-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(100%, 1050px);
  min-height: inherit;
}

.page-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: auto;
  color: #5f5c56;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-trail span[aria-current="page"] { color: #8c8982; }
.page-trail > span:not([aria-current="page"]) { color: var(--orange); }

.detail-hero .eyebrow { margin: clamp(50px, 8vh, 82px) 0 22px; }
.detail-hero h1 { max-width: 1030px; font-size: clamp(64px, 7.5vw, 118px); }

.detail-summary {
  max-width: 760px;
  margin: clamp(28px, 4vh, 42px) 0 0;
  font-size: clamp(15px, 1.25vw, 19px);
}

.detail-hero .atmosphere {
  right: -9%;
  bottom: -34%;
  left: auto;
  width: min(48vw, 700px);
  transform: rotate(-4deg);
}

.detail-hero .trace {
  top: 9%;
  right: 5%;
  left: auto;
  width: 29%;
  height: 52%;
}

.detail-page .capability-section { padding-top: clamp(68px, 8vw, 118px); padding-bottom: clamp(68px, 8vw, 118px); }

.detail-switcher {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}

.detail-switcher a {
  padding: 24px clamp(18px, 3vw, 44px);
  border-right: 1px solid var(--line);
  color: #8c8982;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.detail-switcher a:last-child { border-right: 0; }
.detail-switcher a:hover { color: var(--orange); background: rgba(238, 234, 224, 0.025); }
.detail-switcher a[aria-current="page"] { color: var(--orange); }

.capabilities-layout footer a { text-decoration: none; }

@media (max-height: 800px) and (min-width: 851px) {
  .capabilities-hub { padding-top: 30px; padding-bottom: 30px; }
  .capabilities-hub .eyebrow { margin-top: 28px; }
  .capabilities-hub h1 { font-size: clamp(62px, 6.5vw, 92px); }
  .hub-summary { margin-top: 24px; line-height: 1.6; }
  .capability-menu a { min-height: 94px; padding-top: 14px; padding-bottom: 14px; }
  .menu-copy { gap: 6px; }
  .menu-copy strong { font-size: clamp(28px, 2.45vw, 38px); }
  .menu-copy small { font-size: 11px; line-height: 1.45; }
}

@media (max-width: 850px) {
  .capabilities-hub {
    grid-template-columns: 1fr;
    gap: 54px;
    min-height: 0;
    padding-top: 46px;
    padding-bottom: 72px;
  }

  .capabilities-hub h1 { max-width: 660px; font-size: clamp(66px, 14vw, 104px); }
  .capabilities-hub .atmosphere { top: 30px; right: -33%; bottom: auto; width: min(90vw, 670px); }
  .capabilities-hub .trace { top: 26px; width: 46%; height: 310px; }
  .capability-menu a { min-height: 128px; }

  .detail-hero { min-height: 510px; }
  .detail-hero h1 { font-size: clamp(66px, 14vw, 106px); }
  .detail-hero .atmosphere { top: 76px; right: -31%; bottom: auto; width: min(90vw, 680px); }
  .detail-hero .trace { top: 30px; right: 5%; width: 46%; height: 310px; }
}

@media (max-width: 520px) {
  .capabilities-hub { gap: 42px; padding-top: 32px; padding-bottom: 54px; }
  .capabilities-hub .eyebrow { margin-top: 34px; }
  .capabilities-hub h1 { font-size: clamp(58px, 18vw, 76px); }
  .hub-summary { font-size: 15px; }
  .capabilities-hub .atmosphere { top: 54px; right: -54%; width: 120vw; }
  .capabilities-hub .trace { right: 6%; width: 55%; height: 250px; }

  .capability-menu a {
    grid-template-columns: 25px minmax(0, 1fr) 18px;
    gap: 12px;
    min-height: 122px;
    padding: 22px 18px;
  }

  .menu-copy strong { font-size: 31px; }
  .menu-copy small { font-size: 11px; }

  .detail-hero { min-height: 480px; padding-top: 32px; padding-bottom: 60px; }
  .page-trail { gap: 7px; line-height: 1.7; }
  .detail-hero .eyebrow { margin-top: 52px; }
  .detail-hero h1 { font-size: clamp(50px, 15vw, 68px); }
  .detail-summary { font-size: 15px; line-height: 1.65; }
  .detail-hero .atmosphere { top: 90px; right: -52%; width: 118vw; }
  .detail-hero .trace { right: 6%; width: 54%; height: 260px; }

  .detail-switcher { grid-template-columns: 1fr; }
  .detail-switcher a { border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-switcher a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .page-trail a,
  .capability-menu a,
  .detail-switcher a { transition: none; }
}