/* Pillars overview */
.ohero { position: relative; overflow: hidden; background: var(--deep); padding: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)) 0 clamp(4rem, 3rem + 4vw, 7rem); }
.ohero .container { position: relative; display: grid; gap: var(--sp-5); }
.ohero .breadcrumb a { color: var(--sky); }
.ohero .breadcrumb [aria-current] { color: var(--white); }
.ohero__title { max-width: 14ch; }
.ohero .lead { max-width: 62ch; color: var(--navy-text-muted); }

/* ---------- Architecture diagram ---------- */
.arch { display: grid; justify-items: center; }
.arch__master { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-7); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); box-shadow: -10px 10px 0 0 var(--sky); }
.arch__master span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--blue); }
.arch__lines { display: none; width: 100%; height: 90px; overflow: visible; }
.arch__lines path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.arch.will-draw .arch__lines path { stroke-dashoffset: 1; }
.arch.is-drawn .arch__lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-in-out); }
.arch.is-drawn .arch__lines path:nth-child(2) { transition-delay: 120ms; }
.arch.is-drawn .arch__lines path:nth-child(3) { transition-delay: 240ms; }
.arch.is-drawn .arch__lines path:nth-child(4) { transition-delay: 360ms; }
.arch__pillars { width: 100%; display: grid; gap: var(--gutter); margin-top: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .arch__lines { display: block; }
  .arch__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
}
.arch__pillar { border-radius: var(--radius); background: var(--navy); color: var(--white); overflow: hidden; transition: box-shadow var(--dur) var(--ease); }
.arch__pillar.is-open { box-shadow: -10px 10px 0 0 var(--sky); }
.arch__toggle { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-3); padding: var(--sp-5); text-align: left; border: 0; background: transparent; color: inherit; border-radius: var(--radius); }
.arch__num { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-small); color: var(--sky); }
.arch__name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.arch__desc { grid-column: 1; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.arch__more { grid-column: 2; grid-row: 2 / span 2; align-self: center; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sky); transition: transform var(--dur) var(--ease); }
.arch__more .icon { width: 18px; height: 18px; }
.arch__pillar.is-open .arch__more { transform: rotate(180deg); }
.arch__toggle:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
/* Collapsed lists are hidden from keyboard and screen readers too (visibility), not just clipped. */
.arch__offerings { max-height: 0; overflow: hidden; visibility: hidden; padding: 0 var(--sp-5); transition: max-height 420ms var(--ease), padding 420ms var(--ease), visibility 0s linear 420ms; }
.arch__pillar.is-open .arch__offerings { visibility: visible; transition-delay: 0s; }
.arch__pillar.is-open .arch__offerings { max-height: 600px; padding-bottom: var(--sp-5); }
.arch__offerings li { border-top: 1px solid var(--navy-line); }
.arch__offerings a { display: block; padding: 9px 0; color: var(--white); text-decoration: none; font-size: var(--fs-small); }
.arch__offerings a:hover { color: var(--sky); text-decoration: underline; }
.arch__offerings .arch__all a { display: inline-flex; color: var(--sky); font-weight: 700; }
/* Without JavaScript every pillar's list is simply open. */
html:not(.js) .arch__offerings { max-height: none; visibility: visible; padding-bottom: var(--sp-5); }

/* Four levels table: .data-table lives in components.css. */
.arch-section + .section .data-table { min-width: 720px; }
.arch-section + .section .data-table tbody th { white-space: nowrap; }

/* ---------- Charter ---------- */
.charter { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.charter__item { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--mist); }
.charter__head { display: grid; gap: var(--sp-1); }
.charter__num { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-small); }
.charter__head h3 { font-size: 1.3125rem; }
.charter dl { margin: 0; display: grid; gap: var(--sp-3); }
.charter dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.charter dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--graphite); }
.charter .link-arrow { margin-top: auto; }

/* ---------- Combinations ---------- */
.combos { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.combo { display: grid; gap: var(--sp-4); align-content: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--navy-raised); border: 1px solid var(--navy-line); }
.combo h3 { font-size: 1.3125rem; color: var(--white); }
.combo__roles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.combo__roles li { display: grid; gap: 2px; padding-left: var(--sp-4); border-left: 2px solid var(--navy-line); font-size: var(--fs-small); color: var(--navy-text-muted); }
.combo__roles li.is-lead { border-left-color: var(--sky); }
.combo__pillar { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--white); }
.combo__pillar .pill { padding: 2px 8px; font-size: 0.6875rem; }

/* ---------- 3D pillar showcase ---------- */
.showcase { display: grid; gap: var(--sp-6) var(--sp-8); align-items: center; }
@media (min-width: 960px) { .showcase { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.showcase__viz { position: relative; aspect-ratio: 1 / 1; max-height: 640px; width: 100%; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--deep); }
.showcase__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease); }
.showcase__poster.is-active { opacity: 1; }
.showcase__viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease); }
.showcase__viz.is-live canvas { opacity: 1; }
.showcase__viz.is-live .showcase__poster { opacity: 0; }
.showcase__side { display: grid; gap: var(--sp-6); align-content: start; }
.showcase__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 560px) { .showcase__tabs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .showcase__tabs { grid-template-columns: repeat(2, 1fr); } }
.showcase__tab {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-4);
  border-radius: var(--radius-capsule); border: 1.5px solid var(--navy-line); background: transparent;
  color: var(--white); font-weight: 700; font-size: var(--fs-small); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.showcase__tab:hover { border-color: var(--sky); }
.showcase__tab[aria-selected="true"] { background: var(--white); border-color: var(--white); color: var(--navy); box-shadow: -5px 5px 0 0 var(--sky); }
.showcase__num { font-family: var(--font-display); font-weight: 800; color: var(--sky); }
.showcase__tab[aria-selected="true"] .showcase__num { color: var(--blue); }
.showcase__panel { display: grid; gap: var(--sp-3); }
.showcase__panel h3 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.showcase__panel p:not(.eyebrow) { color: var(--navy-text-muted); }
/* Without JavaScript every panel shows; with it, only the selected one. */
.showcase:not(.is-enhanced) .showcase__tabs { display: none; }
.showcase:not(.is-enhanced) .showcase__panel { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--navy-line); }