/* The CIO composition is independent of the personnel gallery and CMS editor widths. */
.energy-design--cio .energy-cio-cms-page { padding: 0; }
.energy-design--cio .energy-cio-cms-page > .container { width: 100%; max-width: none; padding: 0; }
.energy-design--cio .energy-cio { color: #333; font-family: Sukhumvit, sans-serif; }
.energy-design--cio .cio-container { width: calc(100% - 48px); max-width: 1440px; margin: 0 auto; }
.energy-design--cio .cio-hero { position: relative; border-bottom: 7px solid #ff5000; }
.energy-design--cio .cio-hero::before {
    content: ""; position: absolute; inset: 275px 0 0;
    background: #ff5000 url('../images/energy-design/cio-texture.png') center / cover no-repeat;
}
.energy-design--cio .cio-hero__inner { position: relative; min-height: 575px; }
.energy-design--cio .cio-brand { position: absolute; top: 85px; left: 550px; width: 480px; max-width: 50%; height: auto; transform: translateX(-50%); }
.energy-design--cio .cio-identity { position: relative; width: 600px; padding-top: 342px; padding-bottom: 70px; margin-left: 250px; color: #fff; text-align: center; }
.energy-design--cio .cio-identity h2 { margin: 0 0 8px; font-size: 44px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.energy-design--cio .cio-identity p { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.3; }
.energy-design--cio .cio-identity p[lang="en"] { font-size: 24px; font-weight: 400; }
.energy-design--cio .cio-portrait { position: absolute; right: 208px; bottom: 0; width: 393px; height: 515px; object-fit: cover; object-position: center; }
.energy-design--cio .cio-policy { background: #f6f6fa; padding: 48px 0 78px; }
.energy-design--cio .cio-policy h2,
.energy-design--cio .cio-strategy h2 { margin: 0 0 24px; color: #ff5000; font-size: 36px; font-weight: 500; line-height: 1.25; }
.energy-design--cio .cio-policy ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 76px; margin: 0; padding: 0; list-style: none; }
.energy-design--cio .cio-policy li { margin: 0; padding: 106px 0 0; font-size: 20px; font-weight: 400; line-height: 1.4; background-repeat: no-repeat; background-position: left top; background-size: auto 82px; overflow-wrap: anywhere; }
.energy-design--cio .cio-policy li:nth-child(3n + 1) { background-image: url('../images/energy-design/cio-integration.png'); background-size: auto 76px; background-position: left 6px; }
.energy-design--cio .cio-policy li:nth-child(3n + 2) { background-image: url('../images/energy-design/cio-review.png'); background-size: auto 69px; background-position: left 13px; }
.energy-design--cio .cio-policy li:nth-child(3n) { background-image: url('../images/energy-design/cio-support.png'); }
.energy-design--cio .cio-policy li p,
.energy-design--cio .cio-strategy li p { margin: 0; font: inherit; }
.energy-design--cio .cio-strategy { padding: 48px 0 104px; }
.energy-design--cio .cio-strategy > .cio-container > p { margin: 0 0 22px; font-size: 20px; line-height: 1.4; }
.energy-design--cio .cio-strategy ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; counter-reset: cio-strategy; }
.energy-design--cio .cio-strategy li { position: relative; counter-increment: cio-strategy; margin: 0; padding: 0 0 44px 66px; min-height: 130px; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.energy-design--cio .cio-strategy li::before { content: counter(cio-strategy, decimal-leading-zero); position: absolute; top: 4px; left: 0; width: 34px; padding-bottom: 8px; border-bottom: 7px solid #ff5000; font-size: 25px; font-weight: 600; line-height: 1; }
.energy-design--cio .cio-strategy li:nth-child(n + 3) { padding-top: 35px; padding-bottom: 0; border-top: 1px solid #dedede; }
.energy-design--cio .cio-strategy li:nth-child(n + 3)::before { top: 39px; }
.energy-design--cio .cio-strategy a,
.energy-design--cio .cio-policy a { color: #b53700; text-decoration: underline; }
.energy-design--cio .cio-policy img, .energy-design--cio .cio-strategy img { max-width: 100%; height: auto; }
@media (max-width: 1500px) {
    .energy-design--cio .cio-brand { left: 33%; }
    .energy-design--cio .cio-identity { margin-left: 8%; width: 50%; }
    .energy-design--cio .cio-portrait { right: 10%; width: 28%; height: auto; aspect-ratio: 393 / 515; }
}
@media (max-width: 1100px) {
    .energy-design--cio .cio-brand { left: 28.5%; }
    .energy-design--cio .cio-identity { margin-left: 0; width: 57%; }
    .energy-design--cio .cio-identity h2 { font-size: 32px; }
    .energy-design--cio .cio-identity p { font-size: 22px; }
    .energy-design--cio .cio-portrait { right: 0; width: 40%; }
    .energy-design--cio .cio-policy ul { gap: 32px; }
    .energy-design--cio .cio-policy h2, .energy-design--cio .cio-strategy h2 { font-size: 34px; }
    .energy-design--cio .cio-policy li, .energy-design--cio .cio-strategy li,
    .energy-design--cio .cio-strategy > .cio-container > p { font-size: 20px; }
}
@media (max-width: 700px) {
    .energy-design--cio .cio-container { width: calc(100% - 40px); }
    .energy-design--cio .cio-hero::before { inset: auto 0 0; height: 55%; }
    .energy-design--cio .cio-hero__inner { display: flex; flex-direction: column; align-items: center; min-height: 0; padding-top: 36px; }
    .energy-design--cio .cio-brand { position: static; width: 360px; max-width: 100%; margin: 0 0 28px; transform: none; }
    .energy-design--cio .cio-portrait { position: static; order: 1; width: 72%; max-width: 300px; height: auto; aspect-ratio: 393 / 515; }
    .energy-design--cio .cio-identity { order: 2; width: calc(100% + 40px); margin: 0; padding: 24px 20px 32px; background: #ff5000; }
    .energy-design--cio .cio-identity h2 { font-size: 28px; }
    .energy-design--cio .cio-identity p { font-size: 20px; }
    .energy-design--cio .cio-identity p[lang="en"] { font-size: 18px; }
    .energy-design--cio .cio-policy { padding: 36px 0 40px; }
    .energy-design--cio .cio-policy h2, .energy-design--cio .cio-strategy h2 { font-size: 29px; line-height: 1.35; }
    .energy-design--cio .cio-policy h2 br, .energy-design--cio .cio-strategy h2 br { display: none; }
    .energy-design--cio .cio-policy ul { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .energy-design--cio .cio-policy li:nth-child(n) { padding-top: 90px; background-size: auto 66px; background-position: left top; }
    .energy-design--cio .cio-strategy { padding: 36px 0 60px; }
    .energy-design--cio .cio-strategy ol { grid-template-columns: minmax(0, 1fr); }
    .energy-design--cio .cio-strategy li { min-height: 0; padding: 24px 0 24px 54px; }
    .energy-design--cio .cio-strategy li + li { border-top: 1px solid #dedede; }
    .energy-design--cio .cio-strategy li:nth-child(n + 3) { padding: 24px 0 24px 54px; }
    .energy-design--cio .cio-strategy li::before, .energy-design--cio .cio-strategy li:nth-child(n + 3)::before { top: 28px; }
}