/* Organisation page: the hierarchy as a living diagram, and the office cards. Uses the site's colour tokens so every skin works. */
.k-org-tree { --line: color-mix(in srgb, var(--k-royal) 35%, transparent); display: flex; flex-direction: column; align-items: center; max-width: 1120px; margin: 0 auto; }
.k-tier { position: relative; width: 100%; display: flex; justify-content: center; padding-top: 34px; }
.k-tier:first-child { padding-top: 0; }
.k-tier:not(:first-child)::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 34px; background: var(--k-royal); opacity: .45; transform: translateX(-1px); }
.k-tier:not(:first-child)::after { content: ""; position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--k-gold); box-shadow: 0 0 0 3px var(--surface); }

.k-node { display: inline-flex; align-items: center; gap: .9rem; padding: .9rem 1.4rem; border-radius: 18px; text-decoration: none; color: #fff; background: var(--k-royal); box-shadow: var(--k-shadow-2); min-width: min(100%, 340px); transition: transform .25s, box-shadow .25s; text-align: left; }
.k-node:hover, .k-node:focus-visible { transform: translateY(-3px); box-shadow: var(--k-shadow-3); color: #fff; }
.k-node:focus-visible, .k-dept:focus-visible, .k-field-step:focus-visible, .k-officers a:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 3px; }
.k-node > i { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255, 255, 255, .16); }
.k-node small { display: block; font-size: .78rem; opacity: .85; } .k-node b { display: block; font: 800 1.1rem/1.15 var(--font-display); } .k-node em { display: block; font-style: normal; font-size: .9rem; opacity: .95; margin-top: .15rem; }
.k-node-top { background: linear-gradient(135deg, #04122e, var(--k-royal)); min-width: min(100%, 420px); }
.k-node-dark { background: linear-gradient(135deg, var(--k-deep), var(--k-royal)); }
.k-node-gold { background: var(--surface); color: var(--text); border: 2px solid var(--k-gold); } .k-node-gold:hover { color: var(--text); } .k-node-gold > i { background: var(--k-gold); color: #1a1500; } .k-node-gold small { color: var(--k-royal); opacity: 1; font-weight: 700; } [data-bs-theme="dark"] .k-node-gold small { color: var(--k-sky); }
.k-node-ceo { background: #0a0a0a; border: 2px solid var(--k-gold); } .k-node-ceo > i { background: var(--k-gold); color: #0a0a0a; }
.k-node-pres { padding: 1rem 1.8rem 1rem 1rem; background: linear-gradient(135deg, var(--k-royal), #0a2a66); border: 3px solid var(--k-gold); min-width: min(100%, 400px); }
.k-node-pres img { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--k-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); background: #fff; }
.k-node-pres b { font-size: 1.35rem; }

.k-row { display: grid; gap: 1rem; }
.k-row-3 { grid-template-columns: repeat(3, 1fr); } .k-row-5 { grid-template-columns: repeat(5, 1fr); }
.k-row::after { content: none; }
.k-row > * { position: relative; }
.k-row > *::before { content: ""; position: absolute; left: 50%; top: -18px; width: 2px; height: 18px; background: var(--k-royal); opacity: .45; transform: translateX(-1px); }
.k-row-3 .k-node { min-width: 0; width: 100%; } 
.k-row-3 { position: relative; } .k-row-3::before { z-index: 0; }
.k-row.k-tier::before { /* bus line is drawn by the row itself below */ }
.k-row-3 > :first-child::after, .k-row-5 > :first-child::after { content: ""; position: absolute; top: -18px; left: 50%; height: 2px; width: calc(100% + 1rem); background: var(--k-royal); opacity: .45; }
.k-row-3 > :last-child::after, .k-row-5 > :last-child::after { content: ""; position: absolute; top: -18px; right: 50%; height: 2px; width: calc(100% + 1rem); background: var(--k-royal); opacity: .45; }
.k-row-3 > :nth-child(2)::after, .k-row-5 > :nth-child(n+2):nth-last-child(n+2)::after { content: ""; position: absolute; top: -18px; left: -.5rem; right: -.5rem; height: 2px; background: var(--k-royal); opacity: .45; }
.k-row-3 > :first-child::after, .k-row-5 > :first-child::after { left: 50%; right: -.5rem; width: auto; } .k-row-3 > :last-child::after, .k-row-5 > :last-child::after { left: -.5rem; right: 50%; width: auto; }

.k-panel { width: 100%; max-width: 920px; padding: 1.3rem 1.4rem 1.5rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.k-panel h3 { font-size: 1rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; color: var(--heading, inherit); } .k-panel h3 i { color: var(--k-royal); } [data-bs-theme="dark"] .k-panel h3 i { color: var(--k-sky); }
.k-officers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.k-officers a { display: block; height: 100%; padding: .7rem .9rem; border-radius: 14px; background: var(--k-sky-soft); text-decoration: none; color: var(--text); transition: transform .2s, background .2s; }
.k-officers a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--k-sky) 35%, var(--surface)); }
.k-officers b { display: block; font-size: .92rem; } .k-officers span { display: block; font-size: .83rem; color: var(--kku-muted, #5a5f66); margin-top: .1rem; }

.k-dept { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--k-royal); text-decoration: none; color: var(--text); box-shadow: var(--k-shadow-1); transition: transform .25s, box-shadow .25s; }
.k-dept:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-3); color: var(--text); }
.k-dept > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--k-sky-soft); color: var(--k-royal); font-size: 1.15rem; margin-bottom: .4rem; } [data-bs-theme="dark"] .k-dept > i { color: var(--k-sky); }
.k-dept b { font-size: .95rem; line-height: 1.2; } .k-dept small { color: var(--kku-muted, #5a5f66); margin-bottom: .4rem; }
.k-dept ul { margin: 0; padding-left: 1rem; font-size: .84rem; display: grid; gap: .15rem; }

.k-field { width: 100%; max-width: 760px; display: grid; gap: .6rem; }
.k-field-step { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .85rem 1.2rem; border-radius: 16px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--k-royal); box-shadow: var(--k-shadow-1); transition: transform .25s; }
.k-field-step:hover { transform: translateX(4px); color: var(--text); }
.k-field-step > i { color: var(--k-royal); font-size: 1.25rem; } [data-bs-theme="dark"] .k-field-step > i { color: var(--k-sky); }
.k-fs-1 { margin-inline: 0; } .k-fs-2 { margin-left: 1.5rem; border-left-color: var(--k-sky); } .k-fs-3 { margin-left: 3rem; border-left-color: var(--k-gold); } .k-fs-4 { margin-left: 4.5rem; border-left-color: #0a0a0a; }
.k-org-regions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; } .k-org-regions span { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; background: var(--k-sky-soft); font-size: .8rem; font-weight: 600; }
.k-org-regions .rdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* office cards */
.k-office-col[hidden] { display: none !important; }
.k-office { height: 100%; padding: 1.3rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); scroll-margin-top: 110px; transition: box-shadow .3s, transform .3s; }
.k-office:hover { box-shadow: var(--k-shadow-2); transform: translateY(-3px); }
.k-office-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
.k-office-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--k-royal), var(--k-sky)); }
.k-office-head small { color: var(--k-royal); font-weight: 700; font-size: .75rem; } [data-bs-theme="dark"] .k-office-head small { color: var(--k-sky); }
.k-office h3 { font-size: 1.05rem; line-height: 1.2; margin: 0; }
.k-office-who { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; background: var(--k-sky-soft); width: fit-content; max-width: 100%; }
.k-office-who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--k-gold); } .k-office-who i { color: var(--k-royal); }
.k-office-does { margin: 0 0 .7rem; line-height: 1.55; } .k-office-does b, .k-office-inc b { display: block; font-size: .75rem; color: var(--kku-muted, #5a5f66); margin-bottom: .15rem; }
.k-office-inc div { display: flex; flex-wrap: wrap; gap: .35rem; } .k-office-inc span { padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--k-tint); font-size: .82rem; }
.k-office.k-flash { animation: k-flash 1.6s ease; }
@keyframes k-flash { 0%, 100% { box-shadow: var(--k-shadow-1); } 30% { box-shadow: 0 0 0 4px var(--k-gold), var(--k-shadow-3); } }

.k-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; counter-reset: flow; }
.k-flow li { position: relative; padding: 1.4rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.k-flow li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k-gold); color: #1a1500; font-weight: 800; margin-bottom: .7rem; }
.k-flow h3 { font-size: 1.05rem; } .k-flow p { margin: 0; color: var(--kku-muted, #5a5f66); }

/* home quote with the President's photo */
.k-voice-by { display: flex; align-items: center; gap: .9rem; position: relative; z-index: 1; }
.k-voice-by img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--k-gold); box-shadow: 0 4px 14px rgba(3, 13, 34, .25); }

@media (max-width: 991.98px) {
    .k-row-5 { grid-template-columns: repeat(2, 1fr); } .k-row-5 > *::before, .k-row-5 > *::after { display: none; }
    .k-row-5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .k-row-3 { grid-template-columns: 1fr; } .k-row-3 > *::before, .k-row-3 > *::after { display: none; }
    .k-row-5 { grid-template-columns: 1fr; }
    .k-node { min-width: 0; width: 100%; }
    .k-fs-2, .k-fs-3, .k-fs-4 { margin-left: .8rem; } .k-org-regions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .k-node, .k-dept, .k-office, .k-field-step, .k-officers a { transition: none; } .k-office.k-flash { animation: none; } }