/* Page composition only. All font families and sizes come from Prototype 6.
 * Tier colour is semantic: governance / executive / divisions.
 * DESIGN_VARIANCE 4, MOTION_INTENSITY 2, VISUAL_DENSITY 4.
 * This extends the existing Industrial Editorial Corporate language. */
.og-page { --og-surface-soft:#f2f8fd; --og-tier-1:#102f58; --og-tier-2:#155bb5; --og-tier-3:#1975b5; --og-tier-4:#e7f4fc; --og-tier-5:#fafdff; --og-chart-ink:#103558; --og-connector:#287dbb; }
.og-hero { position:relative; isolation:isolate; overflow:hidden; min-height:430px; background:var(--tank-blue-dark); color:#fff; }
.og-hero__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:64% 64%; z-index:-2; }
.og-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(17,16,74,.92),rgba(17,16,74,.67) 56%,rgba(17,16,74,.18)),linear-gradient(0deg,rgba(17,16,74,.30),rgba(17,16,74,.10)); }
.og-hero__copy { padding-top:var(--hero-copy-top); padding-bottom:48px; }
.og-hero__kicker { color:#bde9fc; }
.og-hero h1 { max-width:18ch; text-wrap:balance; }
.og-hero__body { max-width:35ch; color:rgba(255,255,255,.86); }
/* Shared page navigation: stacked rows on phones, three equal cells on desktop.
 * Preserve the registered navigation font; current-page state uses a soft fill. */
.og-tabs { background:var(--surface); }
.og-tabs__inner { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:0; }
.og-tab { display:flex; align-items:center; justify-content:center; min-width:0; padding:16px 24px; min-height:60px; text-align:center; text-wrap:balance; text-decoration:none; font-family:var(--type-action-family); font-size:var(--type-functional-navigation); font-weight:var(--type-action-weight); font-style:normal; font-synthesis:none; line-height:1.2; letter-spacing:0; color:var(--muted); border:0; background:transparent; }
.og-tab + .og-tab { border-top:1px solid var(--line); }
.og-tab:hover { color:var(--infra-blue); background:#f5f9fc; }
.og-tab[aria-current="page"] { color:var(--infra-blue); background:var(--og-surface-soft); }
.og-tab:focus-visible { outline:3px solid var(--infra-blue); outline-offset:-3px; }
.og-tab[aria-disabled="true"] { color:#727d8d; cursor:default; }
.og-section { padding:54px 0 66px; }
.og-section__intro { max-width:880px; margin-bottom:36px; }
.og-section__intro h2 { margin:0 0 18px; color:var(--tank-blue); }
.og-section__intro>p { color:var(--muted); max-width:66ch; margin:0; }
.og-section__grid { display:block; }
.og-supporting { font-family:var(--type-supporting-family); font-size:var(--type-functional-supporting); font-weight:var(--type-functional-reading-weight); font-style:normal; font-synthesis:none; line-height:var(--type-supporting-leading); letter-spacing:0; }
.og-chart-area { min-width:0; }
.og-chart-toolbar { display:flex; justify-content:flex-end; align-items:baseline; gap:20px; flex-wrap:wrap; padding-bottom:24px; color:var(--muted); }
.og-chart-toolbar .og-chart__expand { border-bottom:0; padding-bottom:0; }
.og-chart { container-type:inline-size; container-name:orgchart; position:relative; padding:8px; }
.og-connectors { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.og-connectors path { fill:none; stroke:var(--og-connector); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.og-connectors circle { fill:var(--og-connector); stroke:var(--surface); stroke-width:1.7; }
.og-tree,.og-tree ol { list-style:none; margin:0; padding:0; }
.og-tree { position:relative; z-index:1; }
.og-tree li { min-width:0; }
.og-box { position:relative; display:flex; align-items:center; justify-content:center; padding:20px 16px; min-height:88px; border:1px solid transparent; border-radius:4px; text-align:center; }
.og-box h3 { position:relative; z-index:1; margin:0; text-wrap:balance; }
/* CI Wave is reserved for the two leadership tiers; Flow Lines for divisions.
 * Decorative layers are clipped independently, keeping the fold control and
 * the connector endpoints outside the box unobstructed. */
.og-box--tier-1,.og-box--tier-2 { isolation:isolate; border-color:rgba(132,197,236,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(16,53,88,.11); }
.og-box--tier-1 { background:linear-gradient(120deg,#174674,var(--og-tier-1) 72%); color:#fff; }
.og-box--tier-2 { background:linear-gradient(120deg,#206bc3,var(--og-tier-2) 72%); color:#fff; }
.og-box--tier-1::before,.og-box--tier-2::before { content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; pointer-events:none; background:url("graphics/ci-wave.svg") right bottom / 100% 46% no-repeat; opacity:.68; }
.og-box--tier-2::before { opacity:.46; }
.og-box--tier-3 { background:linear-gradient(115deg,#2186c1,var(--og-tier-3) 76%); color:#fff; min-height:110px; padding-inline:22px; border-color:#2b8ac1; box-shadow:inset 0 1px 0 rgba(255,255,255,.23),0 4px 10px rgba(16,53,88,.07); }
.og-box--tier-3::before { content:""; position:absolute; inset:0; border-radius:inherit; background:url("graphics/ci-flow-lines.svg") right bottom / 76% 42% no-repeat; opacity:.22; pointer-events:none; }
.og-box--tier-4 { background:linear-gradient(115deg,#f0f8fe,var(--og-tier-4)); color:var(--og-chart-ink); border-color:#b9d9ed; min-height:96px; box-shadow:inset 3px 0 0 #56afe0; }
.og-box--tier-5 { background:var(--og-tier-5); color:var(--og-chart-ink); border-color:#c9deec; min-height:76px; padding-block:16px; }
.og-tree .og-management { padding-top:38px; }
.og-tree .og-divisions { margin-top:48px; padding-left:22px; display:grid; gap:22px; }
.og-tree .og-departments { display:grid; gap:30px; padding:28px 0 0 18px; }
.og-tree .og-teams { display:grid; gap:14px; padding:22px 0 0 18px; }
.og-branch>summary { cursor:pointer; list-style:none; }
.og-branch>summary::-webkit-details-marker { display:none; }
.og-branch>summary:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.og-branch-toggle { position:absolute; right:11px; top:14px; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.og-branch[open] .og-branch-toggle { transform:rotate(225deg); top:18px; }
.og-chart__actions { display:flex; align-items:flex-start; justify-content:flex-end; flex-wrap:wrap; gap:20px; margin-top:28px; }
.og-chart__note { color:var(--muted); max-width:56ch; margin:0; }
.og-chart__expand { display:inline-flex; align-items:center; gap:18px; padding:0 0 8px; border:0; border-bottom:1px solid var(--infra-blue); color:var(--infra-blue); background:transparent; font-family:var(--type-action-family); font-size:var(--type-functional-action); font-weight:var(--type-action-weight); font-style:normal; font-synthesis:none; line-height:var(--type-action-leading); white-space:nowrap; cursor:pointer; min-height:44px; }
.og-chart__expand span[aria-hidden] { display:inline-flex; align-items:center; }
.og-chart__expand:hover { color:var(--tank-blue); border-color:var(--tank-blue); }
.og-dialog { width:min(1560px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:24px; margin:auto; border:0; background:var(--surface); color:var(--tank-blue); }
.og-dialog::backdrop { background:rgba(9,16,45,.78); }
.og-dialog__head { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-bottom:12px; }
.og-dialog__head h2 { margin:0; }
.og-dialog__close { display:grid; place-items:center; width:44px; height:44px; background:var(--surface); border:1px solid var(--line); color:var(--tank-blue); font:32px/1 Arial,sans-serif; cursor:pointer; flex:none; }
.og-dialog__hint { margin:0 0 24px; color:var(--muted); }
.og-dialog__viewport { overflow:auto; padding:0 0 14px; max-height:calc(100dvh - 230px); }
.og-dialog .og-chart { min-width:1260px; padding:12px 20px 20px; }
@container orgchart (min-width:900px) {
  .og-box--tier-1,.og-box--tier-2 { width:340px; margin-inline:auto; min-height:96px; }
  .og-tree .og-divisions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:0; margin-top:64px; align-items:start; }
  .og-box--tier-3 { min-height:116px; }
}
@media(min-width:768px) {
  .og-hero { min-height:500px; }
  .og-hero__copy { padding-bottom:64px; }
  .og-hero__image { object-position:50% 64%; }
  .og-tabs__inner { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .og-tab { min-height:80px; padding-inline:24px; }
  .og-tab + .og-tab { border-top:0; border-inline-start:1px solid var(--line); }
  .og-section { padding:64px 0 82px; }
  .og-section__intro { margin-bottom:44px; }
  .og-chart__actions { flex-wrap:nowrap; }
  .og-dialog { padding:36px; }
}
@media(prefers-reduced-motion:reduce) { .og-page * { scroll-behavior:auto; } }
@media print {
  .site-header,.site-footer,.og-tabs,.consent-banner,.consent-layer,.font-review,.og-chart__expand,.og-hero { display:none!important; }
  .og-section { padding:0; }
  .og-section__grid { display:block; }
  .og-box { -webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid; }
}
