/*
 * Division pages (overview, about, services, sectors, projects, contact).
 * Loaded after style.css (original design) and site.css (shared components):
 * rules here adapt the legacy blocks to dynamic content and add the few new
 * blocks the inner pages need. Breakpoints follow the original stylesheet:
 * 1366 / 1023 / 767 / 620 / 420px. Nothing here may be wider than a 320px screen.
 */

/* ==========================================================================
   Legacy blocks with dynamic content
   ========================================================================== */

/* The original sections only clip vertically, which makes overflow-x compute to
   auto: decorations near the right edge (e.g. .floating-rect--who at 768-833px)
   then let a whole section scroll sideways on touch screens. */
.section {
    overflow-x: hidden;
}

/* Anchored sections stop below the fixed header when reached without JS. */
.c-who,
.c-sectors,
.c-sectors__head,
.c-sector__cont,
.c-figures,
.c-service,
.c-capabilities,
.c-data,
.c-delivery,
.c-project,
.c-project__group,
.c-testimonial,
.c-contact,
.c-filters {
    scroll-margin-top: var(--header-height);
}

/* Main banner: positioned so the centred text follows the banner, and tall
   enough for the text on landscape phones. */
.c-main {
    position: relative;
    min-height: 480px;
}
.c-main__text {
    width: calc(100% - 2em);
}
.c-main__title {
    overflow-wrap: break-word;
}
.c-main__cta {
    padding-top: 6px; /* 40px touch target; the underline sits on the bottom padding */
}

/*
 * Key figures band (division/blocks/figures), client review of 2026-10-12: a dark
 * panel (not the white card of the client's example), the numbers in Orbitron, their
 * titles in light grey capitals, thin rules between the cells and the division's
 * accent on the top edge. Four in a row from 1024px, two by two below. Placed first
 * on the page, it sits over the bottom of the banner, growing upwards from 32px above
 * its edge whatever its height, so numbers and titles are in the first screen; the
 * banner's text moves up 32px, which centres it between the header and the panel, and
 * the "scroll" hint gives the panel its place. Phones do the same (client feedback,
 * 2026-10-19), which asks only for the height to fit both: on a screen under 600px
 * tall the panel overlaps the banner's edge only, and keeps its dark background.
 */
.c-figures {
    position: relative;
    padding: 50px 0;
}
.c-figures--raised {
    /* Over the banner, under the fixed header (9). */
    z-index: 2;
    padding: 0;
}
@media screen and (min-height: 600px) {
    .c-figures--raised {
        height: 0;
    }
    .c-figures--raised .c-figures__frame {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 32px;
    }
    .c-main--figures .c-main__text {
        top: calc(50% - 32px);
    }
    .c-main--figures .c-main__text-bottom {
        display: none;
    }
    /*
     * Over the banner, the photo shows through the panel and its shadow stays (client
     * feedback, 2026-10-12, and on phones 2026-10-19): the banner is dark, as its white
     * title needs. Over a light page the panel keeps its dark background, which its
     * white text needs.
     */
    .c-figures--raised .c-figures__panel {
        background: none;
    }
}
@media screen and (max-height: 599px) {
    .c-figures--raised {
        margin-top: -32px;
        padding: 0 0 16px;
    }
    /* The scroll hint stays above the panel. */
    .c-main--figures .c-main__text-bottom {
        bottom: 57px;
    }
}
.c-figures__panel {
    margin: 0 auto;
    padding: 26px 24px;
    border-top: 3px solid var(--division-accent, var(--dic-red));
    background: var(--dic-darker);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    color: #fff;
}
.c-figures__panel--1 {
    max-width: 420px;
}
.c-figures__panel--2 {
    max-width: 760px;
}
.c-figures__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}
.c-figures__item {
    container-type: inline-size;
    padding: 4px 16px;
    text-align: center;
}
.c-figures__item + .c-figures__item {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}
/*
 * Sized by its cell and by the band's longest figure (--figures-chars, set by the
 * view): short figures ("14+") are drawn larger than long ones ("5,000,000+"), which
 * still fit their cell. Older browsers without container units get 1.75em.
 */
.c-figures__value {
    margin: 0;
    font-family: 'Orbitron', 'Nunito Sans', sans-serif;
    font-size: 1.75em;
    font-size: clamp(1rem, 120cqi / var(--figures-chars, 10), 2.75rem);
    font-weight: 500;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
/* figures.js holds its width while it counts, so the text after it does not move. */
.c-figures__number {
    display: inline-block;
    text-align: right;
}
.c-figures__label {
    max-width: 24ch;
    margin: 10px auto 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125em;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
    /* A label wraps between its words, as on a desktop. It is never hyphenated: Safari
       on an iPhone filled the line first and cut the word ("CAPACITY COMMIS- / SIONED",
       client feedback, 2026-10-19). A single word wider than its cell still breaks
       rather than overflow it. */
    overflow-wrap: break-word;
}
/*
 * The numbers wait for figures.js, which counts them up (motion allowed, JavaScript on);
 * should it not come, they show after 3 seconds. Without JavaScript or with reduced
 * motion they show at once.
 */
@media (prefers-reduced-motion: no-preference) {
    .js .c-figures__count {
        opacity: 0;
        animation: c-figures-show 0s 3s forwards;
    }
    .js .c-figures.is-ready .c-figures__count {
        opacity: 1;
        animation: none;
    }
}
@keyframes c-figures-show {
    to {
        opacity: 1;
    }
}

/* Who we are: tabs. The pager link grows to a 40px target without moving the
   dot (:before) or the underline (:after) of the original design. */
.c-who_slider-nav-link {
    display: inline-block;
    padding-top: 10px;
    margin: -10px 0 -12px;
}
.c-who_slider-nav-link:before {
    top: -10px;
}
/* Two tabs: the connecting line joins both dots instead of the 3-tab line. */
.c-who_slider-nav--2 {
    position: relative;
    max-width: 400px;
}
.c-who_slider-nav--2::before {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(25% - 18px);
    right: calc(25% - 18px);
    height: 1px;
    background: #afafaf;
}
.c-who_slider-nav--2 .c-who_slider-nav-item {
    flex: 0 0 50%;
    min-width: 0;
}
.c-who_slider-nav--2 .c-who_slider-nav-item:nth-child(2):after {
    content: none;
}
/* Four tabs or more (several who / approach / team sections): rows that wrap,
   without the 3-tab connecting line. */
.c-who_slider-nav--many {
    max-width: 900px;
    justify-content: center;
    gap: 36px 0;
}
.c-who_slider-nav--many .c-who_slider-nav-item:after {
    content: none;
}
/* Panels shown without the slider (single panel, About page). */
.c-who__body {
    padding-top: 40px;
}
.c-who--alt {
    background: url('../img/bg-service.jpg') repeat;
}
.c-who__profile-img-text--red:after {
    background: rgba(219, 31, 37, 0.86);
}
/* Sector in a custom colour: --sector-color / --sector-rgb are set on the element (Sector::colorStyle()). */
.c-who__profile-img-text--custom:after {
    background: rgb(var(--sector-rgb, 64 149 193) / 0.86);
}
.c-who__profile-img-item--empty {
    min-height: 180px;
    background: var(--dic-dark);
}
/* A sector without a page ("Clickable" off): its name set like the link of the others
   (style.css .c-who__profile-img-text a), without the arrow, and the band stays still. */
.c-who__profile-img-label {
    color: #fff;
    font-family: 'Orbitron';
    font-weight: 900;
    text-transform: uppercase;
    padding: 13px;
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.c-who__profile-img-item--static:hover .c-who__profile-img-text:after {
    transform: skewY(-10deg);
    opacity: 1;
}
.c-who__profile-img-holder--compact {
    justify-content: center;
}
.c-who__partner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.c-who__partner-row::before,
.c-who__partner-row::after {
    content: none; /* Bootstrap's clearfix would become a flex item */
}
.c-who__partners-role {
    display: block;
    margin-top: 0.35em;
    color: var(--dic-grey);
    font-size: 0.8125em;
    font-weight: 700;
}

/* Sector blocks: only the last block of a group keeps the original bottom spacing. */
.c-sectors > .c-sector:nth-child(5) {
    padding-bottom: 0;
}
.c-sectors > .c-sector:last-child {
    padding-bottom: 15px;
}
.floating-ico--left {
    left: 0;
    right: auto;
}
/*
 * The logo parts floating over the blocks (red bars, chevrons), where the original
 * site had them. Its percentages measure blocks whose height now follows the
 * content (and its testimonials block enclosed the contact block by mistake):
 * on desktop they are pinned to the offsets they had there; js/main.js counts the
 * bars' scroll movement from where the original page had their block.
 */
@media screen and (min-width: 1024px) {
    .floating-rect--who {
        top: -65px;
    }
    .floating-rect--data {
        top: -290px;
    }
    .floating-rect--testimonial {
        top: -677px;
    }
    .c-contact > .floating-ico--red {
        top: -106px;
    }
}
@media screen and (min-width: 992px) {
    .c-testimonial > .floating-ico--right {
        top: 214px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .c-testimonial > .floating-ico--right {
        top: 285px;
    }
}
.c-sector__cont--red .c-services__img--sector {
    border-color: var(--dic-red);
}
.c-sector__cont--custom .c-services__img--sector {
    border-color: var(--sector-color, var(--dic-blue));
}
.floating-ico--custom {
    color: var(--sector-color, var(--dic-blue));
}
/* Inline chevron of a custom colour: laid out like the legacy chevron images. */
.floating-ico svg {
    display: inline-block;
    vertical-align: middle;
}
.c-sector__title a {
    display: inline-block;
    padding: 7px 0;
    margin: -7px 0;
    color: #fff;
}
.c-sector__title a:hover,
.c-sector__title a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}
.c-sector__services-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    width: 100%;
}
.c-sector__services-link {
    display: inline-block;
    padding-top: 8px;
    text-transform: uppercase;
}
/* The text of a sector sits in the middle of its half, as wide as before: the legacy
   sheet insets it 60px on the left and 20px on the right, whichever side the photo is
   on, so on the rows where the text comes first it stood away from the edge of the
   page and close to the photo (client feedback, 2026-10-19). The same inset on both
   sides lines the text up with the photos of the rows above and below it. Below
   1024px the legacy sheet already insets it evenly, and the two are stacked. */
@media screen and (min-width: 1024px) {
    .c-sector__text-cont {
        padding-right: 40px;
        padding-left: 40px;
    }
}

/* Services: icons have no intrinsic size, so they are boxed like the original. */
.c-services__img img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.c-services__img {
    flex-shrink: 0;
}
.c-service__list .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.c-service__list .row::before,
.c-service__list .row::after {
    content: none;
}
.c-service__holder--link .c-services__name::after {
    content: ' \2192';
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-service__holder--link:hover .c-services__name,
.c-service__holder--link:focus-visible .c-services__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.c-service__holder--sector.c-service__holder--link .c-services__name::after {
    color: inherit;
}

/* Delivery: any number of pillars, and titles that always wrap. */
.c-delivery__list {
    justify-content: center;
}
/* The pillar rings take the division's accent (the original red on Construct). */
.c-delivery__item-img {
    border-color: var(--division-accent, var(--dic-red));
}
.c-delivery__item-title {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto; /* "Controllability" is wider than a 20% column on tablets */
}
.c-delivery__content-title {
    white-space: normal;
    line-height: 1.15;
}
/* A gutter between the text and the photo beside it: the grid of this band drops
   the column padding (.no-margin), and the legacy sheet puts the 25px back only
   when the photo is on the left, so a justified line ran into a photo on the
   right (client feedback, 2026-10-15). Half on each side, as a Bootstrap gutter:
   the text keeps the room it needs for its longest line. Below 768px the two
   are stacked and neither is indented. */
@media screen and (min-width: 768px) {
    .c-delivery__content-inner--left > .col-sm-7 {
        padding-right: 15px;
    }
    .c-delivery__content-inner--left > .col-sm-5 {
        padding-left: 15px;
    }
}

/*
 * Capabilities band (division/blocks/capabilities), client review of 2026-10-12: a band
 * of its own, so it no longer reads as one of the values of the pillars band. On the
 * division's accent colour, darkened where white text needs it (--division-accent-text:
 * the brand red on Construct, a deep cyan on Commissioning): it stands apart from the
 * light services band above it and from the dark photo bands. Lines and note beside the
 * photo; on phones the photo comes first, as in the legacy panels.
 */
.c-capabilities {
    background: var(--division-accent-text, var(--dic-red));
    color: #fff;
}
.c-capabilities__body {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 40px 0 65px;
}
.c-capabilities__text,
.c-capabilities__media {
    flex: 1 1 0;
    min-width: 0;
}
/* Without a photo the list is centred, on phones too (a width, not a flex basis, which a column would read as a height). */
.c-capabilities__body--text-only {
    justify-content: center;
}
.c-capabilities__body--text-only .c-capabilities__text {
    flex: 0 1 auto;
    width: 100%;
    max-width: 760px;
}
.c-capabilities__list {
    margin: 0 0 20px;
    font-size: 1.0625em;
    line-height: 1.5;
}
.c-capabilities__list li {
    overflow-wrap: break-word;
}
.c-capabilities__note {
    margin: 0;
}
.c-capabilities__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 498 / 287;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.c-capabilities .animate {
    transform: translateY(15px);
    opacity: 0;
    transition: transform 1050ms cubic-bezier(0.14, 0.82, 0, 1.01), opacity 600ms linear;
}
.c-capabilities .animate.in-view {
    transform: none;
    opacity: 1;
}
.c-capabilities__media.animate {
    transition-delay: 150ms;
}

/*
 * Projects: cards (components/site/project-card). Client review of 2026-10-12:
 * larger tiles with room for a short description, the same on every division (DIC
 * red, never the division accent). Each card is its own white surface, so it reads on
 * any band. Three per row from 1200px, two from 768px, one below (see the Responsive
 * section: the summary must always fit four lines). With
 * subgrid, the five rows of a card (picture, title, place, summary, "View project")
 * line up across the cards of a row whatever the length of each title; browsers
 * without it still get cards of equal height.
 */
.c-project__grid {
    --card-gap: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--card-gap);
    /* Rows are spaced by each cell's bottom padding; the last row's is taken back. */
    margin-bottom: calc(-1 * var(--card-gap));
}
.c-project__group {
    /* Keeps the grid's negative margin inside the group. */
    display: flow-root;
}
.c-project__group + .c-project__group {
    margin-top: 40px;
}
.c-project__cell,
.c-project-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
}
.c-project__cell {
    padding-bottom: var(--card-gap);
}
.c-project-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-content: start;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.05);
    color: var(--dic-dark);
}
/* The picture: on top, though it comes after the text in the page. */
.c-project-card__media {
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f4f4f4;
}
/* The DIC chevron (img/ico-v-red.svg) in grey: a project without a cover or a logo, and under a photo, should it fail to load. */
.c-project-card__media--photo,
.c-project-card__media--empty {
    background: #f4f4f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 317 333'%3E%3Cpath fill='%23d6d9db' d='M0 333v-85.2l193.7-82.6L0 85.2V0l317 131.7v65.8z'/%3E%3C/svg%3E") center / auto 34% no-repeat;
}
.c-project-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
/* JPG logos come on white: multiplied, their white takes the panel's grey. */
.c-project-card__logo {
    max-width: 72%;
    max-height: 104px;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 400ms ease;
}
.c-project-card__body {
    grid-row: 2 / span 4;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin: 20px 20px 22px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--dic-red);
}
.c-project-card__title {
    grid-row: 1;
    margin: 0;
    color: var(--dic-red);
    font-size: 1.0625rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.c-project-card__place {
    grid-row: 2;
    margin: 6px 0 0;
    color: var(--dic-grey);
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: break-word;
}
.c-project-card__summary {
    grid-row: 3;
    display: -webkit-box;
    margin: 12px 0 0;
    overflow: hidden;
    color: var(--dic-grey);
    font-size: 0.9375rem;
    line-height: 1.55;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.c-project-card__more {
    grid-row: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--dic-red);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}
.c-project-card__arrow {
    transition: transform 250ms ease;
}
/* Only a card with its own page reacts: it rises with a shadow, its picture zooms, its arrow moves. */
.c-project-card--link {
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.c-project-card--link:hover,
.c-project-card--link:focus-visible {
    transform: translateY(-4px);
    border-color: #cfd2d4;
    box-shadow: 0 18px 34px -14px rgba(16, 18, 20, 0.3);
    text-decoration: none;
}
/* Keeps site.css's two-tone focus ring under the shadow. */
.c-project-card--link:focus-visible {
    box-shadow: 0 0 0 4px var(--dic-darker), 0 18px 34px -14px rgba(16, 18, 20, 0.3);
}
.c-project-card--link:hover .c-project-card__photo,
.c-project-card--link:focus-visible .c-project-card__photo,
.c-project-card--link:hover .c-project-card__logo,
.c-project-card--link:focus-visible .c-project-card__logo {
    transform: scale(1.04);
}
.c-project-card--link:hover .c-project-card__arrow,
.c-project-card--link:focus-visible .c-project-card__arrow {
    transform: translateX(4px);
}
.c-section__subsubtitle {
    width: 100%;
    font-family: 'Orbitron';
    font-weight: 500;
    color: #000;
    font-size: 0.875em;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.c-project__more {
    margin: 0;
    padding: 0 0 65px;
    text-align: center;
}
.c-project--page .c-project__list {
    padding-top: 40px;
}

/* Listing filters (components/site/filter-bar): a grey band under the page hero. */
.c-filters {
    position: relative;
    /* Its dropdown lists cover the results (z-index 3 at most) but stay under the fixed header (9). */
    z-index: 8;
    background: #f4f4f4;
    border-bottom: 1px solid #e2e2e2;
}
.c-filters__form {
    padding: 30px 0 20px;
}
.c-filters__fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 16px 20px;
}
.c-filters__field {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 280px;
}
.c-filters__label {
    display: block;
    max-width: none;
    margin: 0 0 8px;
    font-family: 'Orbitron';
    font-size: 0.6875em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
}
.c-filters__control {
    position: relative;
}
/* Chevron in the accent colour, in place of the native arrow. */
.c-filters__control::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    border-bottom: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    transform: rotate(45deg);
    pointer-events: none;
}
.c-filters__select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #858585; /* 3.3:1 on the grey band: the field's edge stays visible */
    border-radius: 0;
    background: #fff;
    color: #000;
    font-size: 1rem; /* below 16px, iOS zooms into the page on focus */
    font-weight: 800;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.c-filters__select::-ms-expand {
    display: none;
}
.c-filters__select option {
    font-weight: 400;
}
.c-filters__select:hover {
    border-color: var(--dic-dark);
}
/* A filter away from its default is marked with the accent, in its readable shade
   (Commissioning's cyan is too light on white). */
.c-filters__select.is-selected {
    border-color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    box-shadow: inset 4px 0 0 var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-filters__select:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dic-darker);
}
/*
 * Dropdowns (js/dropdown.js): the select's box as a button, and a list that
 * fades and slides open under it (over it when there is no room below), with
 * the hovered or keyboard-active option highlighted, a check on the chosen one
 * and the project counts as badges. The native select stays, hidden, in the form.
 */
.c-dropdown {
    position: relative;
}
.c-dropdown .c-dropdown__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.c-filters__control.has-dropdown::after,
.c-filters__control:has(.c-dropdown)::after {
    content: none;
}
.c-dropdown__button {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #858585;
    background: #fff;
    color: #000;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.c-dropdown__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The chevron turns over while the list is open. */
.c-dropdown__button::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    border-bottom: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    transform: rotate(45deg);
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), margin-top 250ms ease;
}
.c-dropdown.is-open .c-dropdown__button::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}
.c-dropdown__button:hover {
    border-color: var(--dic-dark);
}
.c-dropdown.is-selected .c-dropdown__button {
    border-color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    box-shadow: inset 4px 0 0 var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-dropdown.is-open .c-dropdown__button {
    border-color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-dropdown__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dic-darker);
}
.c-dropdown.is-selected .c-dropdown__button:focus-visible {
    box-shadow: inset 4px 0 0 var(--division-accent-text, var(--division-accent, var(--dic-red))), 0 0 0 4px var(--dic-darker);
}
/* While the picked filter loads: a spinner in place of the chevron. */
.c-dropdown.is-busy .c-dropdown__button::after {
    right: 15px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid #d4d4d4;
    border-top-color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    border-radius: 50%;
    animation: c-dropdown-spin 700ms linear infinite;
}
@keyframes c-dropdown-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.c-dropdown__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(320px, 55vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e2e2;
    box-shadow: 0 18px 40px rgba(16, 18, 20, 0.18), 0 2px 6px rgba(16, 18, 20, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 150ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 200ms;
}
.c-dropdown:not(.is-open) .c-dropdown__list {
    pointer-events: none;
}
.c-dropdown--up .c-dropdown__list {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(8px) scale(0.98);
    transform-origin: bottom center;
}
.c-dropdown.is-open .c-dropdown__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 150ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.c-dropdown__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px; /* touch target */
    padding: 10px 12px 10px 38px;
    color: #2b2b2b;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.c-dropdown__option + .c-dropdown__option {
    margin-top: 2px;
}
.c-dropdown__option.is-active {
    background: #f0f1f2;
    color: #000;
    box-shadow: inset 3px 0 0 var(--dic-dark);
    /* Transparent here, drawn in forced-colours (high contrast) mode. */
    outline: 2px solid transparent;
    outline-offset: -2px;
}
@media (forced-colors: active) {
    .c-dropdown__option.is-active {
        outline-color: Highlight;
    }
}
.c-dropdown__option[aria-selected='true'] {
    background: #f4f4f4;
    background: color-mix(in srgb, var(--division-accent, var(--dic-red)) 10%, #fff);
    color: #000;
    font-weight: 800;
}
.c-dropdown__option[aria-selected='true'].is-active {
    background: #ebebeb;
    background: color-mix(in srgb, var(--division-accent, var(--dic-red)) 18%, #fff);
}
/* The chosen option's check mark. */
.c-dropdown__option[aria-selected='true']::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border-right: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    border-bottom: 2px solid var(--division-accent-text, var(--division-accent, var(--dic-red)));
    transform: rotate(45deg);
}
.c-dropdown__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.c-dropdown__count {
    flex: 0 0 auto;
    min-width: 30px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ececec;
    color: #3d3d3d;
    font-size: 0.75em;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    transition: background-color 120ms ease, color 120ms ease;
}
.c-dropdown__option.is-active .c-dropdown__count {
    background: #e0e0e0;
}
/* White on the accent's readable shade: at least 4.5:1, like the accent text on white. */
.c-dropdown__option[aria-selected='true'] .c-dropdown__count {
    background: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    color: #fff;
}
.c-dropdown__option.is-empty:not([aria-selected='true']) {
    color: #6b6b6b;
}

.c-filters__apply {
    flex: 0 0 auto;
    min-height: 48px;
    cursor: pointer;
}
/* Hidden by js/filters.js when the selects are dropdowns: a pick applies at once. */
.c-filters__apply[hidden] {
    display: none;
}
/* With filters.js a picked option applies itself: the button stays for keyboard
   users (shown on focus, or once a select was changed with the arrow keys). */
.c-filters__form.is-enhanced:not(.is-dirty) .c-filters__apply:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.c-filters__summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 24px;
    min-height: 40px;
    margin: 12px 0 0;
    color: var(--dic-grey);
    font-weight: 800;
}
/* Alone on its line (a list whose count is switched off, with a filter to clear),
   "Clear filters" stays in the middle, where the narrow layout spreads the two apart. */
.c-filters__summary > :only-child {
    margin-right: auto;
    margin-left: auto;
}
.c-filters__count strong {
    color: #000;
    font-weight: 900;
}
.c-filters__clear {
    display: inline-block;
    padding: 12px 0; /* 40px touch target */
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    font-size: 0.8125em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.c-filters__clear:hover,
.c-filters__clear:focus-visible {
    color: #000;
}
/* While the filtered page loads, the current results fade. */
.c-filters__form.is-loading {
    cursor: progress;
}
.c-filters:has(.is-loading) ~ * {
    opacity: 0.45;
    transition: opacity 200ms ease;
}

/* Testimonials: quote markup (blockquote) without Bootstrap's quote styling. */
.c-testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
}
.c-testimonial__quote p:last-child {
    margin-bottom: 1.25em;
}
.c-testimonial__desc .c-testimonial__author {
    margin: 3.5em 0 0;
    font-size: 1.125rem;
    line-height: 1.1;
}
/* Owl dots: 40px touch targets around the original 14px dots. */
.owl-dot {
    position: relative;
    margin: 0 13px;
    cursor: pointer;
}
.owl-dot::after {
    content: '';
    position: absolute;
    inset: -13px;
}

/* Contact band */
.c-contact--single::before,
.c-contact--light::before {
    display: none;
}
.c-contact--light {
    background: #fff;
}
.c-contact__address {
    display: block;
}
/* An office's address and phone in the type of the "Useful information" file names
   next to them: 1em Nunito Sans ExtraBold, and 0.875em Medium on small phones, like
   .c-useful__item p in style.css (the client's review of 2026-10-07). */
.c-contact__address,
.c-contact__dest .c-contact__tel {
    font-size: 1em;
    font-weight: 800;
}
@media screen and (max-width: 420px) {
    .c-contact__address,
    .c-contact__dest .c-contact__tel {
        font-size: 0.875em;
        font-weight: 500;
    }
}
.c-contact__dest a {
    display: table; /* own line, centred, as wide as its text */
    min-height: 40px;
    margin: 0 auto;
    padding: 6px 0;
    color: #fff;
    overflow-wrap: anywhere;
}
.c-contact__dest a:hover,
.c-contact__dest a:focus-visible {
    color: #fff;
    text-decoration: underline;
}
/* An address with a map link sits where a plain one would: its touch padding reaches
   over the space around it instead of adding to it, so every office keeps the same
   spacing between its name, address and phone (client feedback, 2026-10-14). */
.c-contact__dest a.c-contact__address {
    min-height: 0;
    margin: -6px auto;
}
.c-contact__map {
    font-weight: 800;
    font-size: 0.875em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.c-contact__mail {
    display: inline-block;
    padding-top: 4px;
    overflow-wrap: anywhere;
}
/* "Info: info@..." lines under "Email us": the title at the size of its address. */
.c-contact__email-title {
    font-size: 1.125em;
}
.c-useful__item a {
    padding: 11px 10px 11px 22px;
    margin: -11px 0;
    background-position: 0 11px;
}

/*
 * The texts of the overview and the About page are justified (client feedback on the
 * review of 2026-10-12): who we are and the approach, the sectors, the capabilities, the
 * core values and the testimonials. The short captions drawn centred in narrow boxes
 * (the highlights, the pillars, the partners' bios) stay centred: justified, their
 * few words per line would be spread far apart.
 */
.c-who__profile-text-holder p,
.c-who__profile-text-holder li,
.c-who__approach-text-holder p,
.c-who__approach-text-holder li,
.c-sector__desc,
.c-capabilities__text li,
.c-capabilities__note,
.c-delivery__content li,
.c-delivery__content p,
.c-testimonial__quote p {
    text-align: justify;
}

/* ==========================================================================
   Inner page blocks
   ========================================================================== */

/* Accent colours of sectors (legacy c-sector__cont--* palette). */
.c-accent--blue { --accent: var(--dic-blue); }
.c-accent--yellow { --accent: var(--dic-yellow); }
.c-accent--green { --accent: var(--dic-green); }
.c-accent--red { --accent: var(--dic-red); }
.c-accent--custom { --accent: var(--sector-color, var(--dic-blue)); }

.c-lead {
    max-width: 760px;
    margin: 0 0 1.4em;
    padding-left: 18px;
    border-left: 4px solid var(--accent, var(--division-accent, var(--dic-red)));
    font-size: 1.25em;
    font-weight: 800;
    line-height: 1.45;
}
.c-prose {
    overflow-wrap: break-word;
}
/* Rich text from the admin editor: wide tables and code scroll inside themselves. */
.c-prose table,
.c-prose pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.c-prose iframe,
.c-prose video {
    max-width: 100%;
}
.c-prose > :last-child {
    margin-bottom: 0;
}
.c-prose a {
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    text-decoration: underline;
}

/* Service hero icon: shown above the title, drawn white on the dark banner. */
.c-page-hero__inner:has(> .c-page-hero__icon) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.c-page-hero__inner:has(> .c-page-hero__icon) .c-breadcrumbs {
    order: -2;
}
.c-page-hero__icon {
    order: -1;
    margin: 0 0 18px;
    background: rgba(0, 0, 0, 0.25);
}
.c-page-hero__icon img {
    filter: brightness(0) invert(1);
}
/* Long single words (client or service names) must wrap on narrow phones. */
.c-page-hero__title {
    overflow-wrap: break-word;
}

/* Main text beside an aside (project facts) */
.c-detail {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}
.c-detail__main {
    flex: 1 1 0;
    min-width: 0;
}
.c-detail__aside {
    flex: 0 0 320px;
    min-width: 0;
}
/* The cover photo, whole (the hero crops and darkens it). */
.c-detail__photo {
    margin: 30px 0 0;
}
.c-detail__photo img {
    display: block;
    width: 100%;
    height: auto;
}
.c-facts {
    padding: 28px;
    background: #f4f4f4;
    border-top: 4px solid var(--division-accent, var(--dic-red));
}
.c-facts__logo {
    margin-bottom: 20px;
}
.c-facts__title {
    margin: 0 0 8px;
    font-family: 'Orbitron';
    font-size: 0.875em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.c-facts__list {
    margin: 0;
}
.c-facts__row {
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}
.c-facts__row:last-child {
    border-bottom: 0;
}
.c-facts__row dt {
    color: var(--dic-grey);
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.c-facts__row dd {
    margin: 4px 0 0;
    font-weight: 800;
    overflow-wrap: break-word;
}
/* Industry and country open the filtered listing. Black text with an accent
   underline: accent-coloured text drops below 4.5:1 on the grey panel. */
.c-facts__link {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
    color: #000;
    text-decoration: underline;
    text-decoration-color: var(--division-accent, var(--dic-red));
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.c-facts__link:hover,
.c-facts__link:focus-visible {
    color: var(--dic-dark);
    text-decoration-color: currentColor;
}

.c-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.c-gallery__item a {
    display: block;
    overflow: hidden;
}
.c-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 400ms ease;
}
.c-gallery__item a:hover img,
.c-gallery__item a:focus-visible img {
    transform: scale(1.04);
}

/* Gallery tiles and the case-study photo open the photo viewer: a zoom cursor and,
   on hover or focus, an "enlarge" mark over the photo. */
.c-gallery__item a,
.c-detail__photo-link {
    position: relative;
    display: block;
    cursor: zoom-in;
}
.c-gallery__item a::after,
.c-detail__photo-link::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(24, 24, 27, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.c-gallery__item a:hover::after,
.c-gallery__item a:focus-visible::after,
.c-detail__photo-link:hover::after,
.c-detail__photo-link:focus-visible::after {
    opacity: 1;
    transform: none;
}

/*
 * Photo viewer (js/gallery.js): a full-screen dialog, photo centred between the
 * counter and close button (top) and the thumbnails (bottom), round arrows on
 * either side. The page behind does not scroll while it is open.
 */
html.has-lightbox {
    overflow: hidden;
}
.c-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(24, 24, 27, 0.97);
    color: #fff;
    overscroll-behavior: contain;
}
.c-lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: c-lightbox-in 220ms ease;
}
.c-lightbox::backdrop {
    background: transparent;
}
@keyframes c-lightbox-in {
    from {
        opacity: 0;
    }
}
.c-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}
.c-lightbox__counter {
    margin: 0;
    padding-left: 4px;
    color: #d4d4d8;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.c-lightbox__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(63, 63, 70, 0.6);
    color: #e4e4e7;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.c-lightbox__button:hover {
    background: rgba(82, 82, 91, 0.9);
    color: #fff;
}
.c-lightbox__button:active {
    transform: scale(0.94);
}
.c-lightbox__button:focus-visible,
.c-lightbox__thumb:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.c-lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 84px;
    /* Pinch-zoom stays with the browser; one-finger swipes go to js/gallery.js. */
    touch-action: pinch-zoom;
}
.c-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    opacity: 0;
    transition: opacity 250ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.c-lightbox__figure[data-direction='next'] {
    transform: translateX(40px);
}
.c-lightbox__figure[data-direction='prev'] {
    transform: translateX(-40px);
}
.c-lightbox__figure.is-shown {
    opacity: 1;
    transform: none;
}
.c-lightbox__img {
    display: block;
    max-width: 100%;
    /* The bar (68px), the thumbnails (88px) and the caption (40px) stay in view. */
    max-height: calc(100vh - 196px);
    max-height: calc(100dvh - 196px);
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.c-lightbox__caption {
    min-height: 40px;
    padding-top: 12px;
    color: #d4d4d8;
    font-size: 0.875rem;
    text-align: center;
}
.c-lightbox__caption:empty {
    visibility: hidden;
}
.c-lightbox__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 150ms ease 150ms;
    animation: c-dropdown-spin 800ms linear infinite;
    pointer-events: none;
}
.c-lightbox.is-loading .c-lightbox__spinner {
    opacity: 1;
}
.c-lightbox__nav {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
}
.c-lightbox__nav--prev {
    left: 16px;
}
.c-lightbox__nav--next {
    right: 16px;
}
.c-lightbox__thumbs {
    display: flex;
    justify-content: safe center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 16px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.c-lightbox__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 56px;
    padding: 0;
    border: 0;
    background: #27272a;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
}
.c-lightbox__thumb:hover {
    opacity: 0.8;
}
.c-lightbox__thumb[aria-current='true'] {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff;
}
.c-lightbox__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* One photo: no arrows, no thumbnails. */
.c-lightbox.is-single .c-lightbox__nav,
.c-lightbox.is-single .c-lightbox__thumbs {
    display: none;
}
.c-lightbox.is-single .c-lightbox__img {
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
}
@media screen and (max-width: 767px) {
    .c-lightbox__stage {
        padding: 0 8px;
    }
    .c-lightbox__nav {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        background: rgba(24, 24, 27, 0.6);
    }
    .c-lightbox__nav--prev {
        left: 8px;
    }
    .c-lightbox__nav--next {
        right: 8px;
    }
    .c-lightbox__thumb {
        width: 60px;
        height: 44px;
    }
}

.c-cta__inner {
    text-align: center;
}
.c-cta__text {
    max-width: 560px;
    margin: 0 auto 1.6em;
    font-size: 1.0625em;
}

.c-empty .c-button {
    margin: 10px 5px 0;
}

/* Careers (client review of 2026-10-12): one row per open position, the whole row a
   link to its page, with the title, the location and type as tags, and "Apply now". */
.c-careers__list {
    border-top: 1px solid #e2e2e2;
}
.c-careers__item {
    border-bottom: 1px solid #e2e2e2;
}
.c-careers__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px 32px;
    padding: 28px 24px;
    color: #000;
    transition: box-shadow 250ms ease;
}
/* Hovered or focused: an accent bar along its edge. The row stays white: small
   accent text on grey can drop below 4.5:1. */
.c-careers__link:hover,
.c-careers__link:focus-visible {
    color: #000;
    text-decoration: none;
    box-shadow: inset 4px 0 0 var(--division-accent, var(--dic-red));
}
/* Keeps site.css's two-tone focus ring with the bar, above the next row. */
.c-careers__link:focus-visible {
    z-index: 1;
    box-shadow: inset 4px 0 0 var(--division-accent, var(--dic-red)), 0 0 0 4px var(--dic-darker);
}
.c-careers__main {
    flex: 1 1 auto;
    min-width: 0;
}
.c-careers__title {
    margin: 0 0 12px;
    font-size: 1.25em;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: break-word;
    transition: color 250ms ease;
}
.c-careers__link:hover .c-careers__title,
.c-careers__link:focus-visible .c-careers__title {
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
.c-careers__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.c-careers__tag {
    min-width: 0;
    padding: 4px 10px;
    border: 1px solid #bfbfbf;
    color: var(--dic-dark);
    font-family: 'Orbitron';
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.c-careers__apply {
    flex: 0 0 auto;
}
/* The row's hover gives the button its own hover look (site.css .c-button:hover). */
.c-careers__link:hover .c-careers__apply,
.c-careers__link:focus-visible .c-careers__apply {
    background: transparent;
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
}
/* On the position's banner: white tags, then the jump to "How to apply". */
.c-careers__tags--hero {
    margin-top: 18px;
}
.c-careers__tags--hero .c-careers__tag {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}
.c-careers__hero-apply {
    margin-top: 22px;
}
.c-career__section + .c-career__section {
    margin-top: 48px;
}
.c-back-link {
    margin: 48px 0 0;
}
.c-back-link a {
    color: var(--division-accent-text, var(--division-accent, var(--dic-red)));
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* "How to apply": reached from "Apply now", it stops below the fixed header. */
.c-apply {
    scroll-margin-top: calc(var(--header-height) + 20px);
}
.c-apply p {
    margin: 10px 0 0;
}
/* Black with an accent underline, like the project facts' links (.c-facts__link). */
.c-apply__email {
    color: #000;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--division-accent, var(--dic-red));
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}
.c-apply__email:hover,
.c-apply__email:focus-visible {
    color: var(--dic-dark);
    text-decoration-color: currentColor;
}
.c-apply .c-apply__label {
    margin: 22px 0 6px;
    color: var(--dic-grey);
    font-size: 0.75em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.c-apply__documents {
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-apply__documents li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-weight: 800;
    overflow-wrap: break-word;
}
.c-apply__documents li::before {
    content: '';
    position: absolute;
    top: calc(4px + 0.5em);
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--division-accent, var(--dic-red));
}
.c-apply .c-apply__notes {
    margin-top: 18px;
    overflow-wrap: break-word;
}
.c-apply__button {
    display: block;
    margin-top: 24px;
    text-align: center;
}

/* ==========================================================================
   Responsive (same breakpoints as the original stylesheet)
   ========================================================================== */

/*
 * Project tiles two per row below 1200px. A summary has up to 140 characters
 * (Project::CARD_SUMMARY_LENGTH), always shown whole in four lines: measured with the
 * longest English and French summaries, that needs a text column of 260px, which
 * three tiles per row only give from about 1110px (234px at 1024px) and two from
 * 740px (275px at 768px).
 */
@media screen and (max-width: 1199px) {
    .c-project__grid {
        --card-gap: 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1023px) {
    .c-services__img img {
        width: 28px;
        height: 28px;
    }
    .c-capabilities__body {
        gap: 30px;
        padding: 30px 0 50px;
    }
    /* Key figures two by two; a lone last one takes the whole row. */
    .c-figures__panel {
        padding: 6px 16px;
    }
    .c-figures__list {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .c-figures__item {
        padding: 20px 14px;
    }
    .c-figures__item + .c-figures__item {
        border-left: 0;
    }
    .c-figures__item:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
    .c-figures__item:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
    .c-figures__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .c-detail {
        flex-direction: column;
        gap: 40px;
    }
    .c-detail__main,
    .c-detail__aside {
        flex: none;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .c-who__partner-row > [class*='col-'] {
        width: 100%;
    }
    /*
     * One tile per row, no wider than 460px, with a flatter picture: a phone held
     * sideways still sees a whole picture, and the overview band does not grow endless.
     */
    .c-project__grid {
        --card-gap: 20px;
        grid-template-columns: minmax(0, 1fr);
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
    .c-project-card__media {
        aspect-ratio: 16 / 10;
    }
    .c-figures {
        padding: 36px 0;
    }
    .c-figures--raised {
        padding: 0 0 16px;
    }
    .c-figures__panel {
        padding: 4px 12px;
    }
    .c-figures__item {
        padding: 18px 10px;
    }
    .c-figures__label {
        font-size: 0.75em;
        letter-spacing: 0.06em;
    }
    /* One above the other, the photo first. */
    .c-capabilities__body {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 25px 0 40px;
    }
    .c-capabilities__text,
    .c-capabilities__media,
    .c-capabilities__body--text-only .c-capabilities__text {
        flex: none;
        width: 100%;
    }
    .c-capabilities__media {
        order: -1;
    }
    .c-project__more {
        padding-bottom: 45px;
    }
    .c-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .c-lead {
        font-size: 1.125em;
    }
    /* Filters stack full width: one select per line, then the count and "Clear filters". */
    .c-filters__form {
        padding: 22px 0 10px;
    }
    .c-filters__fields {
        gap: 14px;
    }
    .c-filters__field,
    .c-filters__apply {
        flex: 1 1 100%;
        max-width: none;
    }
    .c-filters__summary {
        justify-content: space-between;
        gap: 0 16px;
    }
}

@media screen and (max-width: 620px) {
    .c-who_slider-nav--2::before {
        display: none;
    }
    .c-who_slider-nav--2 .c-who_slider-nav-item {
        flex-basis: 100%;
    }
    .c-who__profile-img-text a {
        padding: 10px 0; /* thumbnails become a list of 40px links */
    }
    .c-who__profile-img-label {
        position: static;
        display: block;
        padding: 10px 0; /* the same rows as the links */
        color: #000;
    }
    .c-who__profile-img-item--empty {
        min-height: 0;
        background: none;
    }
    .c-testimonial__item {
        padding: 30px 16px 20px;
    }
    .c-testimonial__desc div {
        padding: 0 24px;
    }
    /* A position's row: "Apply now" under its title and tags. */
    .c-careers__link {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 16px;
    }
}

@media screen and (max-width: 420px) {
    .c-project-card__body {
        margin: 16px 16px 18px;
        padding-inline-start: 12px;
    }
    /* Four lines hold a whole summary down to 360px wide; the narrowest phones may need five or six. */
    .c-project-card__summary {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
    .c-project-card__title {
        font-size: 1rem;
    }
    .c-main__title {
        font-size: 2em;
    }
    .c-services__img img {
        width: 20px;
        height: 20px;
    }
    .c-delivery__item {
        padding: 0 6px;
    }
    .c-delivery__item-title {
        font-size: 1em;
    }
    .c-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
    .c-facts {
        padding: 20px;
    }
    .c-empty .c-button {
        display: block;
        margin: 10px 0 0;
    }
    .c-careers__apply {
        align-self: stretch;
        text-align: center;
    }
}

/* ==========================================================================
   Reduced motion: reveal-on-scroll content is shown in place, and the
   parallax elements and fixed backgrounds stay still.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-scroll-speed] {
        transform: none !important;
    }
    .c-main,
    .c-data,
    .c-testimonial {
        background-attachment: scroll;
    }
    .animate:not(.floating-ico),
    .c-sector__text-cont > *,
    .c-contact .c-section__title,
    .c-useful__item,
    .c-contact__list > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .c-sector__img-holder img {
        opacity: 1 !important;
    }
    .floating-ico {
        transform: none !important;
    }
    .c-filters:has(.is-loading) ~ * {
        transition: none;
    }
    .c-gallery__item a:hover img,
    .c-gallery__item a:focus-visible img {
        transform: none;
    }
    .c-project-card--link:hover,
    .c-project-card--link:focus-visible,
    .c-project-card--link:hover .c-project-card__photo,
    .c-project-card--link:focus-visible .c-project-card__photo,
    .c-project-card--link:hover .c-project-card__logo,
    .c-project-card--link:focus-visible .c-project-card__logo,
    .c-project-card--link:hover .c-project-card__arrow,
    .c-project-card--link:focus-visible .c-project-card__arrow {
        transform: none;
    }
}