/* Capabilities — progressive-enhancement accordion. All content is readable
   until capabilities.js adds the ready class. */
.capabilities {
  margin: 0 var(--frame-gutter, 12px) var(--frame-gutter, 12px);
  padding: 76px 64px;
  border-radius: var(--frame-radius, 44px);
  background: var(--cobalt, #1e6fd9);
  color: var(--on-dark, #fff);
  scroll-margin-top: 100px;
}
.capabilities-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  max-width: 1512px;
  margin-inline: auto;
}
.capabilities-copy { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; min-width: 0; min-height: 640px; }
 .capabilities-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  font: 400 12px/1.4 var(--font-mono);
  text-transform: uppercase;
  color: var(--on-dark);
}
.capabilities-eyebrow img { width: 34px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.capabilities-rule { flex: 1; height: 1px; background: rgb(255 255 255 / 18%); }
.capabilities-lede { max-width: 100%; margin-top: 48px; color: var(--ground); font-size: 17px; line-height: 1.65; }
.capabilities-pitch { margin-top: auto; padding-top: 110px; }
.capabilities h2 { max-width: none; font-size: clamp(38px, 3.8vw, 60px); line-height: 1.12; letter-spacing: -.048em; font-weight: 500; }
.capabilities .capabilities-cta {
  --cta-width: 280px;
  --cta-disc: 38px;
  display: inline-flex;
  width: var(--cta-width);
  max-width: 100%;
  height: 44px;
  margin-top: 40px;
  opacity: 1;
  transform: none;
  transition: none;
}
.capabilities-cta:hover .cta-mark,
.capabilities-cta:focus-visible .cta-mark {
  transform: translateX(calc(var(--cta-width) - 2 * var(--cta-pad) - var(--cta-disc)));
}
.capabilities-cta .cta-label { font-size: 13px; letter-spacing: 0; }
.capabilities-cta .cta-mark { display: grid; place-items: center; color: var(--ground); }
.capabilities-cta-arrow { display: block; }
.capabilities-footnote { margin-top: auto; padding-top: 50px; max-width: 330px; font: 400 10px/1.8 var(--font-mono); color: #98b2c9; }
.capabilities-deck { display: grid; gap: 10px; min-width: 0; }
/* Layering: each card is its own stacking context (contain: paint once ready).
   The trigger (z 2) sits above panel and art; on closed cards it stretches
   inset:0 over the visibility:hidden panel. */
.capabilities-card { position: relative; min-width: 0; border-radius: 28px; overflow: hidden; background: #f7fbff; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); }
.capabilities-trigger { position: absolute; top: 19px; right: 18px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.capabilities-number { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt); color: var(--ground); font: 400 11px/1 var(--font-mono); letter-spacing: .02em; }
.capabilities-trigger-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.capabilities-toggle { display: none; }
.capabilities-panel { display: flex; flex-direction: column; min-height: 640px; padding: 34px 28px 24px; }
.capabilities-card-copy { padding-right: 27px; }
.capabilities h3 { font-size: 23px; line-height: 1.25; font-weight: 500; letter-spacing: -.045em; }
.capabilities-card-copy p { margin-top: 17px; max-width: 350px; color: #526b82; font-size: 13px; line-height: 1.75; }
.capabilities-art { width: calc(100% + 20px); max-width: none; height: auto; min-height: 0; aspect-ratio: 400 / 320; object-fit: contain; margin: auto -10px; padding-block: 20px; }
.capabilities-art { display: block; flex-shrink: 1; }
.capabilities-art:not(.is-art-visible) *,
.capabilities-card:not(.is-active) .capabilities-art * { animation-play-state: paused !important; }
.capabilities-caption { padding-top: 14px; border-top: 1px solid #cfdfef; color: #526b82; font: 400 9px/1.5 var(--font-mono); letter-spacing: .035em; }
.capabilities--ready .capabilities-deck { display: flex; }
.capabilities--ready .capabilities-card { flex: 0 0 66px; height: 640px; background: rgb(255 255 255 / 72%); color: var(--ink); transition: flex-grow .42s cubic-bezier(.22,.68,0,1), background-color .25s, color .25s; contain: layout paint; }
.capabilities--ready .capabilities-card.is-active { flex: 1 0 66px; background: #f7fbff; color: var(--ink); }
.capabilities--ready .capabilities-card:not(.is-active) .capabilities-trigger { inset: 0; width: 100%; height: 100%; border-radius: 28px; align-items: flex-start; padding-top: 20px; }
.capabilities--ready .capabilities-card:not(.is-active) .capabilities-trigger-label { clip-path: none; width: auto; height: auto; margin: 0; position: absolute; bottom: 31px; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.capabilities--ready .capabilities-panel { width: var(--capabilities-panel-width, 100%); height: 640px; opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s; }
.capabilities--ready .is-active .capabilities-panel { opacity: 1; visibility: visible; transition: opacity .24s .1s, visibility 0s; }
.capabilities--ready .capabilities-card:not(.is-active):hover { background: rgb(255 255 255 / 90%); }
.capabilities-trigger:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -5px; }
.capabilities-cta:focus-visible { outline: 2px solid var(--sky); outline-offset: 5px; }
@media (min-width: 1600px) {
  .capabilities { padding-block: 90px; }
  .capabilities-inner { gap: 80px; }
}
@media (max-width: 1199px) {
  .capabilities { padding: 56px 48px; }
  .capabilities-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .capabilities-copy { display: flex; min-height: 570px; max-width: 720px; }
  .capabilities-pitch { margin-top: auto; }
  .capabilities h2 { font-size: clamp(42px, 5.6vw, 60px); }
  .capabilities-footnote { display: none; }
  .capabilities-panel, .capabilities--ready .capabilities-panel { padding: 34px 34px 24px; }
  .capabilities-art { max-height: 335px; margin-block: auto; }
}
@media (max-width: 809px) {
  .capabilities { padding: 42px 22px 24px; border-radius: 30px; }
  .capabilities-inner { gap: 36px; }
  .capabilities-copy { display: flex; gap: 0; min-height: 480px; }
  .capabilities-lede { max-width: 320px; margin-top: 18px; font-size: 14px; }
  .capabilities-pitch { margin-top: auto; padding-top: 90px; }
  .capabilities h2 { font-size: clamp(29px, 6.8vw, 42px); }
  .capabilities .capabilities-cta { --cta-width: 250px; margin-top: 25px; }
  .capabilities-cta .cta-label { font-size: 12px; }
  .capabilities--ready .capabilities-deck { display: flex; flex-direction: column; }
  .capabilities-card, .capabilities--ready .capabilities-card { border-radius: 16px; }
  .capabilities--ready .capabilities-card { flex: none; height: auto; }
  .capabilities--ready .capabilities-card.is-active { flex: none; }
  .capabilities-trigger, .capabilities--ready .capabilities-card:not(.is-active) .capabilities-trigger { position: relative; inset: auto; width: 100%; height: 70px; display: flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 0 20px; border-radius: 16px; text-align: left; }
  .capabilities-trigger-label, .capabilities--ready .capabilities-card:not(.is-active) .capabilities-trigger-label { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; transform: none; writing-mode: horizontal-tb; white-space: normal; font-size: 15px; font-weight: 500; letter-spacing: -.025em; }
  .capabilities-toggle { position: relative; display: block; width: 12px; height: 12px; margin-left: auto; flex-shrink: 0; }
  .capabilities-toggle::before, .capabilities-toggle::after { content: ''; position: absolute; width: 12px; height: 1px; left: 0; top: 5px; background: currentColor; }
  .capabilities--ready .capabilities-card:not(.is-active) .capabilities-toggle::after { transform: rotate(90deg); }
  .capabilities-panel, .capabilities--ready .capabilities-panel { width: 100%; min-height: 0; height: auto; padding: 0 20px 21px; }
  .capabilities--ready .capabilities-card:not(.is-active) .capabilities-panel { display: none; }
  .capabilities-card-copy { padding: 0; }
  .capabilities h3 { display: none; }
  .capabilities-card-copy p { margin-top: 0; max-width: 420px; }
  .capabilities-art { height: auto; max-height: 340px; margin-top: 8px; padding-block: 12px; }
  .capabilities-caption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .capabilities *, .capabilities *::before, .capabilities *::after { transition: none !important; animation: none !important; }
}

/* ---- illustration motion --------------------------------------------
   Each artwork tells one short loop instead of idling. All of it inherits
   the pause rule above (off-screen or inactive card) and the reduced-motion
   kill switch. Classes are prefixed per artwork because inline SVG styles
   and these rules share the document's scope. */

/* shared: the halo breathes and the sparkles twinkle out of step */
.cap-halo { transform-origin: 200px 177px; animation: cap-breathe 6s ease-in-out infinite; }
.cap-twinkle > * { transform-box: fill-box; transform-origin: center; animation: cap-twinkle 3.6s ease-in-out infinite; }
.cap-twinkle > :nth-child(2) { animation-delay: -1.2s; }
.cap-twinkle > :nth-child(3) { animation-delay: -2.4s; }
@keyframes cap-breathe { 0%, 100% { opacity: .6; transform: scale(.96); } 45%, 60% { opacity: 1; transform: scale(1.03); } }
@keyframes cap-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* 01 nearshore — the three cards fan up out of the tray, then drop back in
   one after another with a soft bounce; each check pops as its card lands
   and the tray's rim lights once the last one is home */
.ops-card { transform-box: fill-box; transform-origin: 50% 100%; animation: ops-gather 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.ops-card-1 { --dx: -18px; --dy: -26px; --rz: -4deg; }
.ops-card-2 { --dx: 18px; --dy: -19px; --rz: 4deg; animation-delay: .12s; }
.ops-card-3 { --dx: 0px; --dy: -11px; --rz: 0deg; animation-delay: .24s; }
@keyframes ops-gather {
  0%, 12% { transform: translate(0, 0) rotate(0); }
  32%, 46% { transform: translate(var(--dx), var(--dy)) rotate(var(--rz)); }
  60% { transform: translate(0, 4px) rotate(0); }
  66% { transform: translate(0, -1.5px) rotate(0); }
  70%, 100% { transform: translate(0, 0) rotate(0); }
}
.ops-check { transform-box: fill-box; transform-origin: center; animation: ops-check 6s ease-out infinite; }
.ops-card-2 .ops-check { animation-delay: .12s; }
@keyframes ops-check { 0%, 58%, 100% { transform: scale(1); } 65% { transform: scale(1.28); } 72% { transform: scale(.96); } 76% { transform: scale(1); } }
.ops-tray-glow { animation: ops-tray 6s ease-in-out infinite; }
@keyframes ops-tray { 0%, 60%, 100% { stroke-opacity: .42; } 68%, 74% { stroke-opacity: .95; } }

/* 02 offshore — a current runs along the live routes, and the location pin
   dips toward the hub as the packets arrive */
.flow-current { stroke-dasharray: 2 12; animation: flow-current 1.4s linear infinite; }
@keyframes flow-current { to { stroke-dashoffset: -28; } }
.flow-pin { animation: flow-pin 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes flow-pin { 0%, 22%, 52%, 100% { transform: translateY(0); } 34% { transform: translateY(5px); } 42% { transform: translateY(-2px); } }

/* 03 dedicated teams — the area fills in under the line as it draws, the
   marker pops when the line reaches it, the ring fills, and the badge's
   check lands at the top of its lift */
.report-area { animation: report-area 6.4s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes report-area { 0%, 10% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.report-dot { transform-box: fill-box; transform-origin: center; animation: report-dot 6.4s ease-out infinite; }
@keyframes report-dot { 0%, 38% { opacity: 0; transform: scale(0); } 44% { opacity: 1; transform: scale(1.35); } 50%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.report-drop { animation: report-drop 6.4s ease-in-out infinite; }
@keyframes report-drop { 0%, 44% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }
.report-ring { animation: report-ring 6.4s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes report-ring { 0%, 8% { stroke-dasharray: 0 151; } 52%, 92% { stroke-dasharray: 108 151; } 100% { stroke-dasharray: 0 151; } }
.report-tick { transform-box: fill-box; transform-origin: center; animation: report-tick 6.4s ease-out infinite; }
@keyframes report-tick { 0%, 46%, 100% { transform: scale(1); } 52% { transform: scale(1.18); } 58% { transform: scale(.97); } 62% { transform: scale(1); } }

/* ---- round two: richer beats + entrance + pointer tilt ---------------- */

/* every time a card opens, its artwork eases up into place. Individual
   translate/scale properties so this composes with the pointer tilt,
   which owns `transform` */
.capabilities--ready .capabilities-card.is-active .capabilities-art { animation: cap-art-in .8s cubic-bezier(.22, 1, .36, 1) .08s both; }
@keyframes cap-art-in { from { opacity: 0; translate: 0 18px; scale: .95; } }
.capabilities-art {
  transform: perspective(900px) rotateX(calc(var(--tilt-y, 0) * -5deg)) rotateY(calc(var(--tilt-x, 0) * 7deg));
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* 01 — teammates join as the cards land, then the two working days slide
   into overlap on the tray and the shared window lights */
.ops-avatar { transform-box: fill-box; transform-origin: center; animation: ops-avatar 6s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(.24s + var(--k) * .14s); }
@keyframes ops-avatar { 0%, 60% { transform: scale(0); } 70%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.ops-hours { animation: ops-hours 6s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ops-hours { 0%, 20% { transform: translateX(0); } 40%, 52% { transform: translateX(40px); } 70%, 100% { transform: translateX(0); } }
.ops-overlap { animation: ops-overlap 6s ease-in-out infinite; }
@keyframes ops-overlap { 0%, 30%, 100% { opacity: 0; } 72%, 90% { opacity: .9; } }

/* 02 — the outer blocks ripple as people leave and arrive, and a match
   chip rises out of the hub when the ring fires */
.flow-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: flow-ripple-in 6s ease-out infinite; }
.flow-ripple-out { animation-name: flow-ripple-out; }
@keyframes flow-ripple-in { 0%, 6% { opacity: 0; transform: scale(1); } 9% { opacity: .7; } 22%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes flow-ripple-out { 0%, 78% { opacity: 0; transform: scale(1); } 81% { opacity: .7; } 94%, 100% { opacity: 0; transform: scale(1.45); } }
.flow-chip { transform-box: fill-box; transform-origin: 0 100%; animation: flow-chip 6s cubic-bezier(.3, 1.3, .5, 1) infinite; }
@keyframes flow-chip { 0%, 38% { opacity: 0; transform: translateY(8px) scale(.85); } 46%, 76% { opacity: 1; transform: translateY(0) scale(1); } 84%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }

/* 03 — a marker rides the tip of the line as it draws, and teammates join
   the header one by one while the curve climbs */
.report-rider {
  offset-path: path('M87 212c18 0 21-23 42-23s24 11 43 0 22-28 43-21 26-18 42-13 30-20 60-24');
  offset-rotate: 0deg;
  animation: report-rider 6.4s cubic-bezier(.3, 0, .2, 1) infinite;
}
@keyframes report-rider { 0%, 6% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 55%, 90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.report-avatar { transform-box: fill-box; transform-origin: center; animation: report-avatar 6.4s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(var(--k) * .7s); }
@keyframes report-avatar { 0%, 18% { transform: scale(0); } 26%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }