/* CEO feedback: four connected areas, a clear working principle, and a direct invitation. */
.ceo-focus { background: radial-gradient(ellipse at 100% 40%, #e3efff75, transparent 60%), var(--paper); }
.ceo-focus .section-heading { gap: 60px; }
.ceo-focus .section-heading h2 { font-size: clamp(40px, 4.4vw, 64px); }
.ceo-focus .section-intro { max-width: 300px; color: #506888; font-size: 14px; }
.ceo-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* Capability artwork supports the headings and copy, which stay editable. */
.ceo-focus .ceo-focus-card {
    --area-accent: #145bbb;
    --area-art: #287de2;
    --area-line: #cfdef7;
    --area-wash: #eef5ff;
    --area-edge: #bfd5f5;
    --area-hover: #639ce5;
    --area-filter: none;
    display: flex;
    flex-direction: column;
    min-height: 375px;
    padding: 30px 30px 23px;
    background: linear-gradient(110deg, #fff, #fafdff);
    border-color: var(--area-edge);
    border-radius: 12px;
    box-shadow: none;
}
/* Change these named colors to refresh an area without replacing its artwork. */
.ceo-focus .capability-field {
    --area-accent: #16734a;
    --area-art: #1b925d;
    --area-line: #cce7d6;
    --area-wash: #edf8f0;
    --area-edge: #bfdcc9;
    --area-hover: #65ac80;
    --area-filter: none;
}
.ceo-focus .capability-market {
    --area-accent: #08747b;
    --area-art: #098892;
    --area-line: #c5e5e3;
    --area-wash: #eaf8f6;
    --area-edge: #b5dbd7;
    --area-hover: #58a9a4;
    --area-filter: none;
}
.ceo-focus .capability-physical {
    --area-accent: #276694;
    --area-art: #337fae;
    --area-line: #cddfea;
    --area-wash: #edf5fa;
    --area-edge: #bfd5e5;
    --area-hover: #6b9fc2;
    --area-filter: none;
}
.ceo-focus .ceo-focus-card:hover { border-color: var(--area-hover); box-shadow: 0 20px 45px #1d559817; }
.ceo-focus .ceo-focus-card::after { background: radial-gradient(380px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), var(--area-wash), transparent 65%); }
.ceo-focus .focus-card-visual {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 57px;
    width: 64%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: none;
    border: 0;
    border-radius: 0;
    pointer-events: none;
    opacity: 1;
    mask-image: none;
}
.ceo-focus .focus-card-visual img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; filter: var(--area-filter); }
/* Retained reference artwork can use source-aligned color layers. */
.ceo-focus .capability-color-layers { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ceo-focus .focus-card-visual::after { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #fff, #fffffff0 28%, #ffffff80 48%, transparent 75%); }
.ceo-focus .focus-card-content { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ceo-focus .focus-card-top { justify-content: flex-start; gap: 14px; margin-bottom: 21px; }
.ceo-focus .focus-card-top svg { width: 26px; height: 26px; color: var(--area-art); }
.ceo-focus .focus-card-top > span { font-size: 9px; letter-spacing: .075em; text-transform: uppercase; color: var(--area-accent); }
.ceo-focus .focus-card h3 { max-width: 76%; min-height: 0; font-size: 31px; line-height: 1.2; margin-bottom: 17px; color: #0a2148; }
/* A soft white backing keeps the description readable over the richer artwork. */
.ceo-focus .focus-card-content > p { max-width: 66%; color: #425a76; font-size: 13px; line-height: 1.8; background: #ffffffeb; box-shadow: 0 0 14px 10px #ffffffeb; border-radius: 4px; }
.ceo-focus .card-tags { position: relative; z-index: 1; max-width: 90%; gap: 8px; margin-top: 22px; padding-bottom: 24px; }
.ceo-focus .card-tags > span { font-size: 9px; color: var(--area-accent); background: var(--area-wash); border: 1px solid var(--area-line); padding: 6px 9px; }
.ceo-focus .capability-physical .card-tags > span:last-child { color: #825500; background: #fff5df; border-color: #ecd9ae; }
.ceo-focus .focus-card-link { position: relative; z-index: 1; color: var(--area-accent); border-top-color: var(--area-line); font-size: 12px; margin-top: auto; }
.ceo-focus .focus-card-link:hover { color: var(--area-accent); }
/* One shared layout keeps all four natural-color scenes consistent. */
.ceo-focus .capability-scene .focus-card-visual::after { background: linear-gradient(90deg, #fff, #ffffff40 20%, transparent 45%); }
/* Photographs keep their full frame, with a little space from the card edge. */
.ceo-focus .capability-photo .focus-card-visual img { height: auto; border-radius: 8px; }
/* Leave each complete scene visible beside the copy. */
@media (min-width: 961px) {
    .ceo-focus .capability-photo .focus-card-visual { right: 12px; width: 62%; display: flex; align-items: center; }
    .ceo-focus .capability-scene .focus-card-content > p { max-width: 52%; }
    /* Soft backing protects longer headings in either language. */
    .ceo-focus .capability-scene h3 {
        width: fit-content;
        background: #ffffffeb;
        box-shadow: 0 0 12px 8px #ffffffeb;
        border-radius: 4px;
    }
}
/* Keep the original copy layout; match the other three background photos. */
@media (min-width: 1201px) {
    .ceo-focus .capability-digital .focus-card-content { max-width: 44%; }
    .ceo-focus .capability-digital h3,
    .ceo-focus .capability-digital .focus-card-content > p,
    .ceo-focus .capability-digital .card-tags { max-width: 100%; }
    .ceo-focus .capability-digital h3,
    .ceo-focus .capability-digital .focus-card-content > p { background: none; box-shadow: none; }
    .ceo-focus .capability-digital .focus-card-visual { width: 62%; }
}
/* Native details keep each principle available before Blazor connects. */
.ceo-approach .approach-layout { grid-template-columns: .95fr 1.05fr; gap: 90px; }
.ceo-approach .approach-intro { max-width: 430px; font-size: 14px; color: #b6c8e2; line-height: 1.9; }
.approach-principle { max-width: 430px; margin-top: 35px; padding-top: 27px; border-top: 1px solid #37699a94; }
.approach-principle > p { color: #36ddf6; font-size: 17px; line-height: 1.6; }
.approach-principle > span { display: block; color: #acc4e4; font-size: 12px; margin-top: 10px; line-height: 1.8; }
.ceo-approach .approach-principles { border-color: #3177a86e; }
.ceo-approach .approach-principles details { border-color: #3177a86e; }
.ceo-approach .principle-answer p { color: #b6c8e2; font-size: 13px; }
.ceo-approach .approach-principles h3 { min-width: 0; flex: 1; line-height: 1.35; }
.ceo-approach .details-plus { flex-shrink: 0; }
.approach-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.approach-tags > span { display: inline-block; padding: 5px 10px; border: 1px solid #396589; border-radius: 30px; background: #0a1c35; color: #6be3fb; font-size: 10px; line-height: 1.5; }

/* The brand V lives behind this invitation, with a dark enough surface for the copy. */
.ceo-contact {
    padding-block: 100px;
    background: linear-gradient(110deg, #073475, #074ba9 60%, #0758b3);
}
.ceo-contact::after { display: none; }
.contact-brand-v { position: absolute; z-index: -1; top: -24%; right: -13%; width: 84%; height: 158%; color: #6cdcff; opacity: .15; pointer-events: none; }
.ceo-contact .contact-layout { grid-template-columns: 1.12fr 1fr; gap: 100px; align-items: center; }
.ceo-contact .contact-layout .section-label { color: #c8e7ff; }
.ceo-contact .section-marker { width: 25px; }
.ceo-contact .contact-layout h2 { font-size: clamp(58px, 6.5vw, 94px); }
.ceo-contact .contact-layout h2 > span { color: #79f0ff; }
.ceo-contact .contact-copy > p { max-width: 470px; margin-bottom: 29px; color: #f1f7ff; font-size: 14px; line-height: 1.8; }
.ceo-contact .conversation-options { border-top: 1px solid #c8e5ff80; }
.ceo-contact .conversation-option { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 15px; padding: 23px 0; min-height: 80px; border-bottom: 1px solid #c8e5ff80; transition: background calc(.25s / var(--transition-speed)), padding calc(.25s / var(--transition-speed)); }
.ceo-contact .conversation-option strong { font-family: var(--display); font-size: 21px; color: #fff; font-weight: 500; letter-spacing: -.025em; }
.ceo-contact .conversation-option .arrow-icon { color: #9bf5ff; width: 28px; height: 28px; }
.ceo-contact .conversation-option:hover { padding-inline: 10px; background: #092d7040; }
.ceo-footer .footer-top > div > p { font-size: 12px; color: #c0d1e9; }
.ceo-footer .footer-top .footer-statement { color: #93bde6; font-size: 11px; max-width: none; }
.ceo-footer .footer-links > span { color: #91bae3; }
.ceo-footer .footer-links a { color: #d9e8fc; }
.ceo-footer .footer-links a:hover { color: var(--cyan); }
.ceo-footer .footer-top .footer-links > p { color: #93bde6; font-size: 11px; }
.ceo-footer .footer-bottom { color: #a1bfdc; }

@media (max-width: 1200px) {
    .ceo-focus .section-heading { gap: 40px; }
    .ceo-focus .section-intro { max-width: 250px; font-size: 13px; }
    .ceo-focus .ceo-focus-card { padding: 28px 26px 23px; min-height: 375px; }
    .ceo-focus .focus-card h3 { font-size: 29px; }
    .ceo-focus .focus-card-content > p { max-width: 73%; font-size: 12px; }
    .ceo-approach .approach-layout { gap: 60px; }
    .ceo-contact .contact-layout { gap: 65px; }
}
@media (max-width: 960px) {
    .ceo-focus .section-heading { display: block; }
    .ceo-focus .section-intro { max-width: 560px; padding-top: 0; margin-top: 25px; }
    .ceo-focus .section-heading h2 { font-size: 51px; }
    .ceo-focus .ceo-focus-card { min-height: 380px; padding: 25px 23px 23px; }
    .ceo-focus .focus-card h3 { font-size: 28px; max-width: 100%; }
    .ceo-focus .focus-card-top { gap: 11px; margin-bottom: 21px; }
    .ceo-focus .focus-card-top > span { font-size: 8px; }
    .ceo-focus .focus-card-visual { width: 82%; right: -16%; }
    .ceo-focus .focus-card-visual::after { background: linear-gradient(90deg, #fff 5%, #fffffff2 38%, #ffffff91 65%, transparent 100%); }
    .ceo-focus .focus-card-content > p { max-width: 94%; }
    .ceo-focus .card-tags { max-width: 100%; gap: 5px; }
    .ceo-focus .card-tags > span { font-size: 8px; padding-inline: 7px; }
    .ceo-approach .approach-layout { gap: 40px; }
    .ceo-approach .approach-intro { font-size: 13px; }
    .approach-principle > p { font-size: 16px; }
    .approach-principle > span { font-size: 11px; }
    .ceo-contact .contact-layout { gap: 40px; }
    .ceo-contact .contact-layout h2 { font-size: 61px; }
    .ceo-contact .contact-copy > p { font-size: 13px; }
    .ceo-contact .conversation-option strong { font-size: 18px; }
}
@media (max-width: 700px) {
    .ceo-focus-grid { grid-template-columns: 1fr; gap: 22px; }
    .ceo-focus .section-heading h2 { font-size: clamp(36px, 6.6vw, 47px); }
    .ceo-focus .ceo-focus-card { min-height: 375px; padding: 28px 26px 23px; }
    .ceo-focus .focus-card h3 { max-width: 76%; font-size: 31px; }
    .ceo-focus .focus-card-content > p { max-width: 70%; font-size: 13px; }
    .ceo-focus .focus-card-visual { width: 65%; right: 0; }
    .ceo-focus .focus-card-visual::after { background: linear-gradient(90deg, #fff, #fffffff0 28%, #ffffff80 48%, transparent 75%); }
    .ceo-focus .focus-card-top > span { font-size: 9px; }
    .ceo-focus .card-tags > span { font-size: 9px; }
    .ceo-approach .approach-layout { grid-template-columns: 1fr; gap: 42px; }
    .ceo-approach .approach-intro { max-width: 500px; }
    .approach-principle { margin-top: 28px; max-width: 500px; }
    .ceo-contact { padding-block: 76px; }
    .ceo-contact .contact-layout { grid-template-columns: 1fr; gap: 34px; }
    .ceo-contact .contact-layout h2 { font-size: clamp(53px, 12vw, 76px); }
    .ceo-contact .contact-copy > p { max-width: 520px; font-size: 13px; }
    .ceo-contact .conversation-option strong { font-size: 21px; }
    .contact-brand-v { right: -47%; top: -12%; width: 145%; height: 145%; opacity: .11; }
    .ceo-footer .footer-bottom { gap: 15px; }
}
@media (max-width: 440px) {
    .ceo-focus .section-heading h2 { font-size: 36px; }
    .ceo-focus .ceo-focus-card { min-height: 385px; padding: 25px 23px 23px; }
    .ceo-focus .focus-card h3 { max-width: 100%; font-size: 29px; }
    .ceo-focus .focus-card-content > p { max-width: 98%; }
    .ceo-focus .focus-card-visual { width: 100%; right: -27%; top: 35px; }
    .ceo-focus .focus-card-visual::after { background: linear-gradient(90deg, #fff 10%, #ffffffed 40%, #ffffffb3 64%, #ffffff38 100%); }
    .ceo-focus .focus-card-top { margin-bottom: 23px; }
    .ceo-focus .card-tags { max-width: 100%; }
    .ceo-focus .card-tags > span { font-size: 8px; }
    .ceo-contact .conversation-option strong { font-size: 19px; }
    .ceo-footer .footer-bottom > span:nth-child(2) { width: 100%; order: 2; }
}
@media (max-width: 360px) {
    .ceo-focus .section-heading h2 { font-size: 31px; }
    .ceo-focus .ceo-focus-card { padding-inline: 20px; }
    .ceo-focus .focus-card h3 { font-size: 27px; }
    .ceo-contact .contact-layout h2 { font-size: 51px; }
    .ceo-contact .conversation-option strong { font-size: 18px; }
}
/* Detailed scenes move below the copy on smaller screens, with no subject cropping. */
@media (max-width: 960px) {
    .ceo-focus .capability-scene .focus-card-content { order: 0; flex: none; }
    .ceo-focus .capability-scene .focus-card-visual {
        position: relative;
        order: 1;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 0 0 18px;
    }
    .ceo-focus .capability-scene .focus-card-visual::after { display: none; }
    .ceo-focus .capability-scene .focus-card-link { order: 2; }
}
/* Photographs need their own space when desktop columns become narrow. */
@media (max-width: 1200px) {
    .ceo-focus .capability-photo .focus-card-content { order: 0; flex: none; }
    .ceo-focus .capability-photo .focus-card-content > p,
    .ceo-focus .capability-photo h3 { max-width: 100%; }
    .ceo-focus .capability-photo .focus-card-visual {
        position: relative;
        display: block;
        order: 1;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 0 0 18px;
    }
    .ceo-focus .capability-photo .focus-card-visual::after { display: none; }
    .ceo-focus .capability-photo .focus-card-link { order: 2; }
}