/*
    Theme Name: ATC
    Author: Egloo
    Author URI: https://egloo.it
    Version: 1.0.0
    Text Domain: eg-atc
    Description: A custom WordPress theme for ATC, designed by Egloo.
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: "Lust";
    src: url("assets/fonts/lust/lust-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alexandria";
    src: url("assets/fonts/alexandria/alexandria-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope/manrope-200.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope/manrope-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope/manrope-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope/manrope-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("assets/fonts/manrope/manrope-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

dialog {
    margin: auto;
}

a,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
}

img,
video,
iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

button,
label,
input {
    cursor: pointer;
}

input[type="reset"],
input[type="submit"],
button {
    border: none;
    background-color: transparent;
}

span:has(> svg:only-child),
svg {
    line-height: 0;
}

ul {
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 4.6875rem;
    -webkit-tap-highlight-color: transparent;
}

body:has(dialog[open]) {
    overflow: hidden;
}

:focus-visible {
    outline-offset: 4px;
    outline: 0px solid var(--on-surface, currentColor);
    animation:
        focus-ring-in 0.2s forwards,
        focus-ring-out 0.2s 0.2s forwards;
}

@keyframes focus-ring-in {
    to {
        outline-width: 8px;
    }
}

@keyframes focus-ring-out {
    to {
        outline-width: 4px;
    }
}

/* ======================================== */
/* UTILS */
/* ======================================== */

nav.breadcrumbs ul {
    --_gap: 0.9375rem;
    display: block;
}

nav.breadcrumbs li {
    display: inline-block;
    position: relative;
}

nav.breadcrumbs li:not(:last-child) {
    margin-inline-end: var(--_gap);
}

nav.breadcrumbs li svg {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc((var(--_gap) * -1) / 2);
    translate: 50% -50%;
}

nav.breadcrumbs [aria-current] {
    color: rgb(from currentColor r g b / 0.3);
}

.rich-text > *:not(:last-child) {
    margin-block-end: 1lh;
}

.rich-text strong {
    font-weight: 700;
}

.rich-text ul {
    list-style-type: disc;
}

.rich-text ol {
    list-style-type: decimal;
}

.rich-text ul,
.rich-text ol {
    padding-inline-start: 0.75rem;
}

.rich-text a {
    text-decoration: underline;
}

.rich-text table {
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.142857143;
    display: block;
    overflow: auto;
    max-inline-size: calc(100% + (2 * var(--container-x-padding)));
    padding-inline: var(--container-x-padding);
    position: relative;
    inset-inline: calc(-1 * var(--container-x-padding));
    inline-size: calc(100% + (2 * var(--container-x-padding)));
    scrollbar-width: thin;
    scrollbar-color: currentColor transparent;
}

.rich-text table:not(:last-child) {
    margin-block: 4em;
}

.rich-text table th {
    text-wrap: nowrap;
    text-align: left;
}

.rich-text table :is(th, td) {
    border: 1px solid;
    padding: 0.5625rem;
    font-weight: 400;
    vertical-align: top;
}

.rich-text table :is(th, td):last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
}

.rich-text table :is(th, td):first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

/*
 * Weight lock. A heavier weight is a wider word, so a voice that goes bold on
 * hover grows and shoves its neighbours along the row.
 *
 * Usage: .eg-weight-lock plus data-weight-lock="<the element's own label>". The
 * ghost repeats that label at --eg-weight-lock (900 unless the component says
 * otherwise) as a zero-height column sibling, so it lends its width and nothing
 * else and the box is already as wide as the bold state. The visible text keeps
 * the start edge of a box that never changes size, so nothing moves on hover.
 *
 * ::before rather than ::after, so a component is still free to use ::after for
 * an icon (the mobile menu's +/- does exactly that).
 */
.eg-weight-lock {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
}

.eg-weight-lock[data-weight-lock]::before {
    content: attr(data-weight-lock);
    font-weight: var(--eg-weight-lock, 900);
    block-size: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
}

.skip-link:focus {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 9999;
    inline-size: fit-content;
    block-size: fit-content;
    padding: 0.5625rem 0.9375rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    background-color: var(--on-surface, #000);
    color: var(--surface, #fff);
    border-radius: 0.1875rem;
    outline: 2px solid transparent;
}

.img-wrapper.img-wrapper-ratio > picture,
.img-wrapper.img-wrapper-ratio {
    overflow: hidden;
    position: relative;
}

.img-wrapper.img-wrapper-ratio > picture {
    block-size: 100%;
    display: block;
}

.img-wrapper.img-wrapper-ratio > video,
.img-wrapper.img-wrapper-ratio > picture > video,
.img-wrapper.img-wrapper-ratio > picture > img,
.img-wrapper.img-wrapper-ratio > img {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    object-fit: cover;
    inset: 0;
}

/* A media field holding more than one item renders its frames stacked in one wrapper:
   `data-sequence` cycles them on its own, `data-slideshow` only while a card is hovered.
   The first frame keeps whatever box it would have had alone — in an -ratio wrapper the
   rules above already place it, elsewhere it stays in flow and gives the wrapper its
   height — and the remaining frames are laid over it. */
.img-wrapper[data-sequence],
.img-wrapper[data-slideshow] {
    position: relative;
}

.img-wrapper[data-sequence] > .item:not(:first-child),
.img-wrapper[data-slideshow] > .item:not(:first-child) {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    object-fit: cover;
    inset: 0;
}

.img-wrapper[data-sequence] > .item,
.img-wrapper[data-slideshow] > .item {
    opacity: 0;
}

/* At rest (nothing active) show the first frame; while cycling show only the active one. */
.img-wrapper[data-sequence]:not(:has(> .item[data-active])) > .item:first-child,
.img-wrapper[data-sequence] > .item[data-active],
.img-wrapper[data-slideshow]:not(:has(> .item[data-active])) > .item:first-child,
.img-wrapper[data-slideshow] > .item[data-active] {
    opacity: 1;
}

.layers {
    display: grid;
}

.layers > .layer {
    grid-column: -1/1;
    grid-row: -1/1;
}

.layers > .layer.layer-bg {
    position: relative;
}

.layers > .layer.layer-bg > .img-wrapper.img-wrapper-ratio:only-child {
    block-size: 100%;
}

.layers > .layer.layer-bg::before,
.layers > .layer.layer-bg::after {
    content: "";
    pointer-events: none;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
}

.layers > .layer.layer-fg {
    position: relative;
    z-index: 1;
}

:root {
    --container-columns: 12;
    --container-gap: 0.9375rem;
    --container-column-width: 6.234375rem;
    --container-x-padding: 2.34375rem;

    --form-gap-row: 0.609375rem;
    --form-gap-col: var(--container-gap);
    --form-field-min-width: 13.78125rem;
    --form-checkbox-size: 0.609375rem;
    --form-checkbox-bg: transparent;
    --form-checkbox-checked-bg: black;
    --form-checkbox-checked-border: #00b0a6;
    --form-input-bg: #f1f1f1;
    --form-input-border: transparent;
    --form-input-font-size: 0.75rem;
    --form-input-weight: 700;
    --form-input-padding-block: 0.75rem;
    --form-input-padding-inline: 1.359375rem;
    --form-label-weight: 500;
    --form-border-radius-input: 9999px;
    --form-border-radius-checkbox: 0.28125rem;
    --form-border-radius-radio: 50%;
    --form-label-field-gap: 0.46875rem;
    --form-icon-arrow: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.17331 24.905L48.6367 24.905M24.905 48.6367L48.6367 24.905L24.905 1.17334' stroke='black' stroke-width='2.34709' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --form-icon-checkbox: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='23' height='23' rx='6' fill='%2300B0A6'/%3E%3Cpath d='M6.40137 12.7143L10.068 17L17.4014 7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --form-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC44NzUiIGhlaWdodD0iNy4xOTciIHZpZXdCb3g9IjAgMCAxMC44NzUgNy4xOTciPgogIDxwYXRoIGlkPSJUcmFjY2lhdG9fMjA4ODUiIGRhdGEtbmFtZT0iVHJhY2NpYXRvIDIwODg1IiBkPSJNLTE1NjA2LjA3Niw2ODc4LjMwN2wzLjI2MywzLjI2Myw0Ljc4NC00Ljc4NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2MDcuNDkgLTY4NzUuMzczKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
    --form-icon-file: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy4zNjIiIGhlaWdodD0iMTkuNzQ4IiB2aWV3Qm94PSIwIDAgMjMuMzYyIDE5Ljc0OCI+CiAgPGcgaWQ9IlJhZ2dydXBwYV8xNTc4IiBkYXRhLW5hbWU9IlJhZ2dydXBwYSAxNTc4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzM4LjA4NiAtNjU0Mi41MDEpIj4KICAgIDxwYXRoIGlkPSJUcmFjY2lhdG9fMjA5MDkiIGRhdGEtbmFtZT0iVHJhY2NpYXRvIDIwOTA5IiBkPSJNMzQuMzM2LDU3LjQ1N2EuNjE2LjYxNiwwLDAsMC0uNjIyLjYyMnYyLjk2NUEyLjMyLDIuMzIsMCwwLDEsMzEuNCw2My4zNjJIMTYuMTQ4YTIuMzEyLDIuMzEyLDAsMCwxLTIuMzE3LTIuMzE3VjU4LjA3OWEuNjIyLjYyMiwwLDAsMC0xLjI0NSwwdjIuOTY1YTMuNTYzLDMuNTYzLDAsMCwwLDMuNTYzLDMuNTYzSDMxLjM4NWEzLjU2MywzLjU2MywwLDAsMCwzLjU2My0zLjU2M1Y1OC4wNzlhLjYuNiwwLDAsMC0uNjEyLS42MjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MjYgNjQ5Ny4xNDEpIiBmaWxsPSIjYmI4ZWY4IiBzdHJva2U9IiNiYjhlZjgiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHBhdGggaWQ9IlRyYWNjaWF0b18yMDkxMCIgZGF0YS1uYW1lPSJUcmFjY2lhdG8gMjA5MTAiIGQ9Ik0zOS43NTcsMzIuMTZhLjYxNi42MTYsMCwwLDAsLjYyMi0uNjIyVjIwLjg2MWwyLjY2NiwyLjgyN2EuNjQ1LjY0NSwwLDAsMCwuNDQ4LjIuNTY4LjU2OCwwLDAsMCwuNDI0LS4xNzQuNjI4LjYyOCwwLDAsMCwuMDI1LS44ODRsLTMuNzM3LTMuOTc0YS42NDguNjQ4LDAsMCwwLS45MSwwTDM1LjU1OCwyMi44M2EuNjI1LjYyNSwwLDEsMCwuOTA5Ljg2bDIuNjY2LTIuODI3VjMxLjUzOGEuNjE4LjYxOCwwLDAsMCwuNjI0LjYyMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcxMC4wMTYgNjUyNC4zMzIpIiBmaWxsPSIjYmI4ZWY4IiBzdHJva2U9IiNiYjhlZjgiIHN0cm9rZS13aWR0aD0iMSIvPgogIDwvZz4KPC9zdmc+Cg==");
    --form-icon-select: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.02359 2.04426C3.41412 2.43477 4.04727 2.43476 4.43779 2.04424L6.27879 0.203241C6.54961 -0.0675785 6.98869 -0.067596 7.25953 0.203202C7.5304 0.47403 7.53042 0.91317 7.25957 1.18402L4.43781 4.00578C4.04728 4.39631 3.41412 4.39631 3.02359 4.00578L0.201758 1.18395C-0.069058 0.913131 -0.0690589 0.474051 0.201757 0.203234C0.472569 -0.0675773 0.911639 -0.0675829 1.18246 0.203222L3.02359 2.04426Z' fill='%23181818'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
    :root {
        --container-x-padding: 1.25rem;
        --form-input-padding-inline: 1.125rem;
        --form-input-padding-block: 0.6875rem;
    }
}

.container {
    inline-size: 100%;
    max-inline-size: calc((var(--container-x-padding) * 2) + ((var(--container-columns) - 1) * var(--container-gap)) + (var(--container-columns) * var(--container-column-width)));
    margin-inline: auto;
    padding-inline: var(--container-x-padding);
}
.container.container-10 {
    --container-columns: 10;
}
.container.container-8 {
    --container-columns: 8;
}
.container.container-6 {
    --container-columns: 6;
}
.container.container-5 {
    --container-columns: 5;
}
.container.container-4 {
    --container-columns: 4;
}

/* ======================================== */
/* WPCF7 */
/* ======================================== */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    display: none;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    inline-size: var(--form-checkbox-size);
    block-size: var(--form-checkbox-size);
    background-color: var(--form-checkbox-bg);
    flex-shrink: 0;
    cursor: pointer;
}

input[type="checkbox"] {
    inline-size: 1.078125rem;
    block-size: 1.078125rem;
    border: 1px solid black;
    border-radius: var(--form-border-radius-checkbox);
}

input[type="radio"] {
    border-radius: var(--form-border-radius-radio);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--form-checkbox-checked-bg);
    background-image: var(--form-icon-check);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
}

input[type="checkbox"]:checked {
    border-color: var(--form-checkbox-checked-border);
    background-color: transparent;
    background-image: var(--form-icon-checkbox);
    background-size: contain;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--on-surface, currentColor);
    outline-offset: 2px;
}

input:is([type="text"], [type="number"], [type="email"], [type="tel"]),
.wpcf7-styled select,
.wpcf7-styled textarea {
    font-family: var(--ff-tertiary);
    inline-size: 100%;
    padding-block: var(--form-input-padding-block);
    padding-inline: var(--form-input-padding-inline);
    border: 1px solid var(--form-input-border);
    background-color: var(--form-input-bg);
    border-radius: var(--form-border-radius-input);
    font-size: var(--form-input-font-size);
    font-weight: var(--form-input-weight);
    outline: none;
    letter-spacing: -0.04em;
}
.wpcf7-styled select {
    appearance: none;
    background-image: var(--form-icon-select);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--form-input-padding-inline)) center;
    padding-inline-end: calc(var(--form-input-padding-inline) + 1.125rem);
}

input::placeholder,
textarea::placeholder,
.wpcf7-styled label:has(input[type="file"]) > span:first-child {
    color: rgb(from var(--on-surface) r g b / 0.4);
    color: #9b9b9b;
    letter-spacing: -0.04em;
}

.wpcf7-styled textarea {
    min-block-size: 11.0625rem;
    field-sizing: content;
    resize: vertical;
    border-radius: 1.171875rem;
    line-height: unset;
}

input:is([type="text"], [type="number"], [type="email"], [type="tel"]):focus-visible,
.wpcf7-styled select:focus-visible,
.wpcf7-styled textarea:focus-visible {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
    outline-offset: 0;
}

.wpcf7-styled label {
    font-size: 0.75rem;
    line-height: 1.571;
    letter-spacing: -0.01em;
    font-weight: var(--form-label-weight);
    display: flex;
    flex-direction: column;
    gap: var(--form-label-field-gap);
}

.wpcf7-styled .align-center {
    text-align: center;
}

.wpcf7-styled label:has(input[type="file"]) {
    overflow: hidden;
    display: grid;
    background-image: var(--form-icon-file);
    background-repeat: no-repeat;
    background-position: calc(100% - 0.75rem) center;
    background-color: rgb(from currentColor r g b / 0.1);
    border: 1px solid transparent;
    border-radius: var(--form-border-radius-input);
    padding-block: var(--form-input-padding-block);
    padding-inline: var(--form-input-padding-inline);
    cursor: pointer;
}

.wpcf7-styled label:has(input[type="file"]) > span:first-child {
    overflow: hidden;
    max-inline-size: calc(100% - 2.25rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.wpcf7-styled label:has(input[type="file"]) input[type="file"] {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
    z-index: -1;
}

.wpcf7-styled label:has([aria-required="true"]) .label-title::after {
    content: " *";
    color: currentColor;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--form-field-min-width), 100%), 1fr));
    row-gap: var(--form-gap-row);
    column-gap: var(--form-gap-col);
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p .wide {
    grid-column: 1 / -1;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    gap: 1.21875rem;
    inline-size: fit-content;
    margin-inline-end: auto;
    margin-block-start: 0.796875rem;
    font-family: var(--ff-secondary);
    font-style: italic;
    font-size: 3.328125rem;
    line-height: 3.46875rem;
    letter-spacing: -0.04em;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.796875rem;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit::after {
    content: "";
    flex-shrink: 0;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    background-image: var(--form-icon-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: translate 0.3s ease;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit:hover::after {
    translate: 0.375rem 0;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) > p br,
.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-spinner {
    display: none;
}

.wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    margin-top: 0.1875rem;
}

.wpcf7-styled .wpcf7-acceptance label {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5625rem;
    margin-block-start: 0.703125rem;
}

.wpcf7-styled .wpcf7-acceptance label span {
    text-box: trim-both cap alphabetic;
    font-family: var(--ff-tertiary);
    font-size: 0.75rem;
    line-height: 1.6;
    font-weight: 400;
    margin-block-start: 0.5em;
}

.wpcf7-styled .wpcf7-acceptance label span a {
    text-decoration: underline;
}

.wpcf7-styled .wide [data-name="acceptance"] {
    display: block;
    margin-block: var(--form-gap-row);
}

.wpcf7-styled .wpcf7-list-item {
    margin-inline-start: 0;
}

.wpcf7-styled .wpcf7-response-output {
    padding: 0.75rem;
    text-wrap: balance;
    font-size: 0.75rem;
    inline-size: 100%;
    border: 1px solid transparent;
    margin-block-start: 2.25rem;
    border-radius: var(--form-border-radius-input);
}

.wpcf7-styled form.sent .wpcf7-response-output {
    background-color: #5ad66521;
    border-color: #5ad6659e;
}

.wpcf7-styled form.invalid .wpcf7-response-output {
    border-color: #ffb900cc;
}

@media (max-width: 768px) {
    .wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit {
        font-size: 1.875rem;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.5rem;
        gap: 0.5em;
    }

    .wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit::after {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }
}

.form-note {
    font-family: var(--ff-tertiary);
    font-size: 0.75rem;
    line-height: 1.6;
    font-weight: 400;
    margin-block-start: 1em;
}

.form-note a {
    text-decoration: underline;
}

.eg-pagination ul {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    align-items: center;
}

.eg-pagination .page-btn:disabled,
.eg-pagination .page-separator,
.eg-pagination .page:not(.page-current) {
    opacity: 0.4;
}

.eg-pagination :disabled {
    pointer-events: none;
}

/* ======================================== */
/* THEME */
/* ======================================== */

@view-transition {
    navigation: auto;
}

:root {
    --ff-primary: "Alexandria", sans-serif;
    --ff-secondary: "Lust", serif;
    --ff-tertiary: "Manrope", sans-serif;
}

html {
    font-family: var(--ff-primary);
}

.ff-primary {
    font-family: var(--ff-primary);
}

.ff-secondary {
    font-family: var(--ff-secondary);
}

.ff-tertiary {
    font-family: var(--ff-tertiary);
}

/* ======================================== */
/* HERO MEDIA */
/* ======================================== */

section.hero-media {
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100svh;
}

section.hero-media .media {
    block-size: 100%;
}

/* An iframe ignores object-fit: cover it by scaling a 16:9 box past both axes. */
section.hero-media .item-embed {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 100vw;
    block-size: 56.25vw; /* 100vw * 9 / 16 */
    min-inline-size: 177.78vh; /* 100vh * 16 / 9 */
    min-block-size: 100vh;
    min-block-size: 100svh;
    border: 0;
    pointer-events: none;
}

section.hero-media .item-mobile {
    display: none;
}

@media (max-width: 768px) {
    section.hero-media .item-desktop {
        display: none;
    }

    section.hero-media .item-mobile {
        display: block;
    }

    /* Let the media size to its own aspect ratio instead of cropping to the viewport. */
    section.hero-media.hero-media-auto,
    section.hero-media.hero-media-auto .media,
    section.hero-media.hero-media-auto .media > picture {
        block-size: auto;
    }

    section.hero-media.hero-media-auto .item {
        position: static;
        block-size: auto;
        object-fit: initial;
    }
}

/* ======================================== */
/* BIG TEXT */
/* ======================================== */

/* ============================================================
   Word reveal (shared). egSplitWords() wraps each word of a
   [data-split] element in .word-mask > .word and marks it for the
   reveal observer; egRevealObserve() toggles .is-inview. Each word
   slides up from behind its mask, staggered by its --index. Non-text
   nodes (<br>) are kept, so titles with manual line breaks survive.
   Gated behind reduced-motion, so those users get static, fully
   visible text. Per-use knobs: --word-clip, --word-stagger, --ease-reveal.
   The default clip has generous top/bottom slack because these titles use
   very tight line-heights, so a flush clip would shave ascenders, accents
   and descenders. --reveal-delay (set by the batch observer) offsets the
   whole stagger where present, and defaults to 0s elsewhere. */
@media (prefers-reduced-motion: no-preference) {
    [data-split] {
        --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
        --word-stagger: 0.075s;
        --word-clip: inset(-0.45em -0.2em -0.18em -0.2em);
    }

    [data-split] .word-mask {
        display: inline-block;
        clip-path: var(--word-clip);
    }

    [data-split] .word {
        display: inline-block;
        transform: translateY(130%);
        transition: transform 1.25s var(--ease-reveal) calc(var(--reveal-delay, 0s) + var(--index, 0) * var(--word-stagger));
    }

    [data-split].is-inview .word {
        transform: none;
    }
}

/* Registered/trademark marks lifted by egSplitWords(). Sized and offset in em so
   they scale with the title, no media queries needed. line-height: 0 plus a
   baseline vertical-align keeps the mark out of the line box calculation, so the
   raised glyph never grows the line and never gets shaved by the .word-mask clip. */
[data-split] .word .mark {
    font-size: 0.42em;
    line-height: 0;
    vertical-align: baseline;
    position: relative;
    inset-block-start: -0.9em;
}

section.big-text {
    padding-block: 4.6875rem;
    text-align: center;
    font-size: 7.96875rem;
    line-height: 0.823529;
    letter-spacing: -0.04em;
    font-weight: 900;
}

@media (max-width: 768px) {
    section.big-text {
        padding-block: 3.125rem;
        font-size: 2.8125rem;
        line-height: 0.77777777;
    }
}

/* ======================================== */
/* CHIPS */
/* ======================================== */

.chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 1.171875rem;
}

/* The background is fixed, so the text colour is too: the chip sits on surfaces
   that set their own color (white in the card, author-picked in the case body). */
.chip {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1.075;
    font-weight: 500;
    padding-block: 0.210938rem 0.28125rem;
    padding-inline: 0.515625rem;
    border-radius: 99999px;
    background-color: #d9d9d9;
    color: #1a1a1a;
    font-family: var(--ff-tertiary);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

a.chip:hover,
a.chip:focus-visible {
    background-color: #000;
    color: #fff;
}

@media only screen and (max-width: 768px) {
    .chip {
        padding-block: 0.2625rem 0.2875rem;
    }

    body.tax-case-category .chip {
        background-color: #f3f3f3;
    }
}

/* ======================================== */
/* CARD CASE HISTORY */
/* ======================================== */

article.card.card-case-history {
    --on-surface: white;
    position: relative;
}

article.card.card-case-history .layer-bg .img-wrapper {
    aspect-ratio: 16/9;
}

article.card.card-case-history .layer-bg::after {
    background-image: linear-gradient(to top, black, transparent 45%);
    opacity: 0.66;
}

article.card.card-case-history .layer-fg {
    color: white;
    display: grid;
    align-items: end;
}

article.card.card-case-history .card-text {
    display: flex;
    flex-direction: column;
    gap: 0.796875rem;
    /*
     * Replaces a former @container query keyed on the card's own width (< 60rem).
     * A card is under 60rem in exactly two situations: it sits in a two-up small
     * row, or it fills a full-bleed large row on a viewport narrower than 60rem.
     * These two rules reproduce both without a container context.
     */
    padding-block: 2.671875rem;
}

section.featured-cases .row-large article.card.card-case-history .card-text {
    padding-block: 3.140625rem;
}

article.card.card-case-history .card-title {
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 700;
    text-box: trim-both cap alphabetic;
}

article.card.card-case-history .card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

article.card.card-case-history .card-subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    text-box: trim-both cap alphabetic;
}

article.card.card-case-history .chips {
    margin-block-start: 0.28125rem;
}

/* Lift the chips above the title's full-card overlay link, or they aren't clickable. */
article.card.card-case-history .chip {
    position: relative;
    z-index: 1;
}

/*
 * Scroll reveal (auge-style). JS adds `is-inview` when the card enters the
 * viewport and sets a per-card `--reveal-delay` for a light stagger.
 * The initial hidden state is gated behind (prefers-reduced-motion: no-preference)
 * so reduced-motion users — and anyone whose JS never runs — see content at once.
 */
@media (prefers-reduced-motion: no-preference) {
    article.card.card-case-history[data-observe] {
        --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Image reveal: applies at every width — on mobile it is the ONLY reveal,
       since the layers stop overlapping and the text must not move. Clip the
       whole .layer-bg (not just the image) so its darkening gradient ::after
       opens in step with the image instead of sitting at full size over a
       still-clipped picture. */
    article.card.card-case-history[data-observe] .layer-bg {
        opacity: 0;
        clip-path: inset(10%);
        transition:
            opacity 1.5s var(--ease-reveal) var(--reveal-delay, 0s),
            clip-path 2s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    article.card.card-case-history.is-inview .layer-bg {
        opacity: 1;
        clip-path: inset(0);
    }
}

/* Desktop only: layers are stacked, so the whole card fades and rises as a unit. */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    article.card.card-case-history[data-observe] {
        opacity: 0;
        transform: translate3d(0, 15%, 0);
        transition:
            opacity 1.5s var(--ease-reveal) var(--reveal-delay, 0s),
            transform 1.5s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    article.card.card-case-history.is-inview {
        opacity: 1;
        transform: translateZ(0);
    }
}

@media (max-width: 768px) {
    /*
     * Mobile drops the desktop overlay: the layers stop stacking in one grid
     * cell and become a column, full-bleed 16:9 image on top, dark text below.
     * column-reverse because the foreground (text) comes first in the DOM.
     */
    article.card.card-case-history .layers {
        display: flex;
        flex-direction: column-reverse;
    }

    article.card.card-case-history .layer-fg {
        display: block;
        color: #000;
        position: static;
    }

    /* Nothing sits over the image now, so its darkening gradient goes. */
    article.card.card-case-history .layer-bg::after {
        display: none;
    }

    section.featured-cases .row-large article.card.card-case-history .card-text,
    article.card.card-case-history .card-text {
        padding-block: 0.9375rem 2.5rem;
        gap: 0.75rem;
    }

    article.card.card-case-history .card-title {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    article.card.card-case-history .card-subtitle {
        font-size: 1rem;
        line-height: 1.3;
    }

    article.card.card-case-history .chips {
        gap: 0.5rem 1.25rem;
        margin-block-start: 0.1875rem;
    }
}

/* ===================================== */
/* FEATURED CASES */
/* ======================================== */

section.featured-cases .row-small {
    display: grid;
    --grid-item-width: 23.4375rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
}

@media (max-width: 768px) {
    section.featured-cases .rows {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    section.featured-cases .row-small {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ======================================== */
/* TEXT ACCORDIONS */
/* ======================================== */

section.text-accordions {
    background-color: #ffb283;
}

section.text-accordions .container {
    padding-block: 4.6875rem;
    display: flex;
    flex-direction: column;
    gap: 4.6875rem;
}

section.text-accordions .title {
    font-size: 6.5625rem;
    line-height: 0.785714;
    letter-spacing: -0.04em;
    font-weight: 900;
}

section.text-accordions .accordions {
    display: flex;
    flex-direction: column;
    gap: 1.546875rem;
}

section.text-accordions .accordion-title {
    font-size: 3.28125rem;
    line-height: 0.7;
    font-weight: 700;
}

section.text-accordions .accordion-title button {
    transition: color 0.2s ease;
}

/* The +/- icon only exists in the mobile design; desktop keeps the plain title. */
section.text-accordions .accordion-icon {
    display: none;
}

@media (min-width: 769px) {
    section.text-accordions .accordion-title button[aria-expanded="false"]:not(:hover) {
        color: #fff;
    }
}

section.text-accordions .accordion-panel {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
}

section.text-accordions .accordion-panel[inert] {
    grid-template-rows: 0fr;
}

section.text-accordions .accordion-panel > div {
    min-block-size: 0;
}

section.text-accordions .accordion-panel-content {
    padding-block: 0.9375rem 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.984375rem;
}

section.text-accordions .accordion-description {
    font-size: 1.40625rem;
    line-height: 1.433333;
    font-weight: 200;
}

section.text-accordions .accordion-cta {
    background-color: rgb(98 98 98 / 0.8);
    padding-block: 0.539063rem 0.632813rem;
    padding-inline: 0.773438rem;
    border-radius: 99999px;
    color: white;
    font-size: 0.75rem;
    line-height: 1.428571;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

section.text-accordions .accordion-cta:where(:hover, :focus-visible) {
    background-color: #000;
}

@media (max-width: 768px) {
    section.text-accordions .container {
        padding-block: 1.375rem 3rem;
        gap: 1.5rem;
    }

    section.text-accordions .title {
        font-size: 2.1875rem;
        line-height: 0.857142857;
    }

    section.text-accordions .accordions {
        gap: 1.6875rem;
    }

    section.text-accordions .accordion-title {
        font-size: 1.4375rem;
    }

    section.text-accordions .accordion-title button {
        color: #000;
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 1rem;
        inline-size: 100%;
        text-align: start;
    }

    section.text-accordions .accordion-icon {
        display: block;
        flex-shrink: 0;
        inline-size: 1.0625rem;
        block-size: 1.0625rem;
    }

    section.text-accordions .accordion-icon svg {
        display: block;
        inline-size: 100%;
        block-size: 100%;
    }

    /* Open panel: drop the vertical bar so the plus reads as a minus. */
    section.text-accordions .accordion-title button[aria-expanded="true"] .bar-v {
        display: none;
    }

    section.text-accordions .accordion-description {
        font-size: 1rem;
        line-height: 1.125;
        font-weight: 400;
    }

    section.text-accordions .accordion-panel-content {
        padding-block: 0.5rem 0.3125rem;
        gap: 1.25rem;
    }

    section.text-accordions .accordion-cta {
        padding-block: 0.40625rem 0.53125rem;
    }
}

/* ======================================== */
/* SIDE FORM */
/* ======================================== */

section.side-form .container {
    padding-block: 4.6875rem;
    display: flex;
    gap: var(--container-gap);
}

section.side-form .zone-text {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    justify-content: space-between;
    padding-inline-start: calc(var(--container-column-width) + var(--container-gap));
}

section.side-form .title {
    font-size: 4.6875rem;
    line-height: 0.9;
    letter-spacing: 0;
    font-weight: 900;
}

section.side-form .info {
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 700;
}

section.side-form .zone-form {
    inline-size: 100%;
    max-inline-size: 27.609375rem;
}

@media (max-width: 768px) {
    section.side-form .zone-text {
        padding-inline: 0;
        flex-direction: column;
        gap: 1.4375rem;
    }

    section.side-form .container {
        padding-block: 3.125rem;
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }

    section.side-form .title {
        font-size: 1.875rem;
        line-height: 0.833333333;
    }

    section.side-form .title br {
        display: none;
        text-wrap: balance;
    }
}

/* ======================================== */
/* MARQUEE */
/* ======================================== */

section.marquee {
    --marquee-duration: 80s;
    --marquee-logo-size: 5.765625rem;
    --marquee-gap: 2.625rem;
    overflow: hidden;
}

main > section.marquee:last-child {
    margin-block-end: 4.6875rem;
}

/* The home page appends the partner marquee in the footer; hide it on mobile. */
@media (max-width: 768px) {
    main > section.marquee:last-child {
        display: none;
    }
}

section.marquee .wrapper {
    display: flex;
    inline-size: max-content;
}

section.marquee .track {
    display: flex;
    flex-shrink: 0;
    animation: marquee var(--marquee-duration) linear infinite;
}

section.marquee.reverse .track {
    animation-direction: reverse;
}

section.marquee .item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--marquee-gap) / 2);
}

section.marquee .item img {
    block-size: var(--marquee-logo-size);
    inline-size: auto;
    max-inline-size: none;
    object-fit: contain;
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

section.marquee .item img:hover {
    filter: grayscale(0);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    section.marquee .track {
        animation: none;
    }
}

@media (max-width: 768px) {
    section.marquee {
        --marquee-logo-size: 4rem;
        --marquee-gap: 1rem;
    }
}

/* ======================================== */
/* FOOTER */
/* ======================================== */

footer {
    border-block-start: 2px solid currentColor;
    padding-block: 3.5625rem 2.71875rem;
    display: flex;
    flex-direction: column;
    gap: 4.921875rem;
}

footer .start .container {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    justify-items: center;
}

footer .start .logos {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}

footer .start .logos .logo a {
    display: block;
}

footer .start .logos .logo img {
    inline-size: 100%;
    block-size: auto;
}

footer .start .separator {
    inline-size: 100%;
    background-color: currentColor;
    flex-shrink: 0;
}

footer .start .infos {
    max-inline-size: 23.625rem;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

footer .start .socials {
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
    font-family: var(--ff-tertiary);
}

footer .start .socials ul {
    font-weight: 800;
}

footer .start .newsletter {
    display: flex;
    flex-direction: column;
    gap: 1.03125rem;
}

footer .start .newsletter h2 {
    font-size: 2.34375rem;
    line-height: 0.96;
    letter-spacing: -0.04em;
    font-weight: 700;
}

footer .start .newsletter .wpcf7-submit {
    font-size: 1.6875rem;
    line-height: 1.1;
}

footer .end .container {
    max-inline-size: unset;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.40625rem;
}

footer .end .full-text {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 6.48vw;
    text-box: trim-both cap alphabetic;
}

footer .end .sub-text {
    color: #808080;
    font-size: 0.75rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: var(--ff-tertiary);
}

footer .end .sub-text p + p {
    margin-block-start: 0.75em;
}

footer .end .sub-text a {
    text-decoration: underline;
}

@media (max-width: 768px) {
    footer {
        padding-block: 1.875rem;
        gap: 1.625rem;
        border-block-start-width: 1px;
    }

    footer .start .container {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    footer .start .logos .logo img {
        block-size: 5.4375rem;
        inline-size: auto;
        max-inline-size: 100%;
    }

    footer .start .infos {
        gap: 1.875rem;
    }

    footer .start .socials {
        font-size: 1.25rem;
        liine-height: 1.5;
    }

    footer .end .container {
        border-block-start: 1px solid currentColor;
        padding-block-start: 1.75rem;
    }

    footer .end .full-text {
        font-size: 11vw;
        line-height: 0.777777778;
        font-weight: 800;
        text-align: start;
    }

    footer .end .container {
        gap: 1.0625rem;
    }

    footer .end .sub-text {
        font-size: 0.625rem;
    }
}

/* ======================================== */
/* BANNER CUSTOMIZABLE */
/* ======================================== */

section.banner.banner-customizable .layer-fg .container {
    padding-block: 5.0625rem;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: var(--container-gap);
    block-size: 100%;
    padding-inline-start: calc(var(--container-x-padding) + 5.109375rem);
}

section.banner.banner-customizable .pretitle {
    font-size: 1.125rem;
    line-height: 2.5;
    font-weight: 500;
}

section.banner.banner-customizable .main-infos {
    display: flex;
    flex-direction: column;
    gap: 1.78125rem;
}

section.banner.banner-customizable .title {
    font-size: 3.28125rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

section.banner.banner-customizable .cta a {
    font-size: 0.9375rem;
    line-height: 1.89;
    letter-spacing: -0.004em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    font-weight: 400;
    display: flex;
    gap: 0.234375rem;
}

section.banner.banner-customizable .cta a svg {
    transition: translate 0.2s ease;
}

section.banner.banner-customizable .cta a:where(:hover, :focus-visible) svg {
    translate: 10%;
}

section.banner.banner-customizable .layer-bg {
    display: flex;
    justify-content: end;
}

section.banner.banner-customizable .layer-bg .img-wrapper {
    block-size: 0;
    min-block-size: 39.28125rem;
    inline-size: auto;
}

section.banner.banner-customizable .layer-bg .img-wrapper img {
    block-size: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    section.banner.banner-customizable .layer-fg .container {
        padding-inline: var(--container-x-padding);
        padding-block: 1rem;
        gap: 0.875rem;
        display: flex;
        flex-direction: column;
    }

    section.banner.banner-customizable .layers {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    section.banner.banner-customizable .main-infos {
        gap: 1.25rem;
    }

    section.banner.banner-customizable .pretitle {
        font-size: 0.875rem;
        line-height: 1.428571429;
        text-transform: uppercase;
    }

    section.banner.banner-customizable .title {
        font-size: 1.625rem;
        line-height: 1;
    }

    section.banner.banner-customizable .title br {
        display: none;
    }

    section.banner.banner-customizable .cta a {
        font-size: 0.75rem;
        line-height: 1;
        text-underline-offset: auto;
    }

    section.banner.banner-customizable .cta a svg {
        block-size: 1.2em;
        inline-size: 1.2em;
    }

    section.banner.banner-customizable .layer-bg .img-wrapper {
        min-block-size: unset;
        block-size: auto;
    }

    section.banner.banner-customizable .layer-bg .img-wrapper img {
        block-size: auto;
    }
}

/* ======================================== */
/* STANDARD */
/* ======================================== */

section.standard {
    display: flow-root;
    /* "Contenuta" media width: container-10 content + 400px. */
    --contained-width: calc((9 * var(--container-gap)) + (10 * var(--container-column-width)) + 25rem);
}

body:not(.page-template-about) section.standard {
    border-block-end: 2px solid currentColor;
}

body:is(.page-template-about, .single-case-history, .page-template-default, .post-type-archive-case-history) section.side-form {
    border-block-start: 2px solid currentColor;
}

@media (max-width: 768px) {
    body:is(.page-template-about, .single-case-history, .page-template-default, .post-type-archive-case-history) section.side-form {
        border-block-start-width: 1px;
    }
}

section.standard .hero .container {
    padding-block-start: 10.171875rem;
    display: flex;
    flex-direction: column;
    gap: 0.46875rem;
}

section.standard .hero h1 {
    font-size: 6.5625rem;
    line-height: 0.785714;
    font-weight: 900;
    text-transform: uppercase;
    max-inline-size: 53.90625rem;
}

:where(body.single-news) section.standard .hero h1 {
    font-size: 4.6875rem;
    line-height: 0.9;
}

section.standard .hero .subtitle {
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.25;
}

section.standard .block {
    margin-block: 4.6875rem;
}

/* Zero bottom margin only when the block ends on its media: without an image
   the text would sit flush against whatever follows (e.g. a slider). */
section.standard .block.block-text-full-img:has(> .img-wrapper):not(:has(.second-description)) {
    margin-block-end: 0;
}

section.standard .block h2 {
    font-size: 2.34375rem;
    line-height: 1;
    font-weight: 900;
}

section.standard .block .description {
    font-size: 1.03125rem;
    line-height: 1.272727;
    font-weight: 400;
    font-family: var(--ff-tertiary);
}

section.standard .block-intro .text {
    display: flex;
    flex-direction: column;
    gap: 4.6875rem;
    max-inline-size: 56.0625rem;
}

/* The About intro hosts the hero video as the first item of .text so mobile can
   reorder it between title and description. On desktop it breaks back out to the
   original full-screen hero: full viewport width, 100vh, flush under the header
   (the top margin is dropped; the gap to the title comes from .text's own gap). */
section.standard .block-intro {
    margin-block-start: 0;
    overflow-x: clip; /* trims the 100vw hero's scrollbar-width bleed, no h-scroll */
}

section.standard .block-intro .hero-media {
    /* container-10 outer width, so we know when the container stops being
       full-width and starts centering (wide viewports). */
    --intro-container: calc((var(--container-x-padding) * 2) + (9 * var(--container-gap)) + (10 * var(--container-column-width)));
    inline-size: 100vw;
    block-size: 100vh;
    block-size: 100svh;
    /* Break out from the left-aligned .text to the viewport's left edge, whether
       the container is full-width or centered. */
    margin-inline-start: calc(-1 * (var(--container-x-padding) + max(0px, (100vw - var(--intro-container)) / 2)));
}

section.standard .block-intro h2 {
    font-size: 4.6875rem;
    line-height: 0.9;
    font-weight: 900;
    text-transform: uppercase;
    max-inline-size: 48.84375rem;
}

section.standard .block-split .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.standard .block-split .text {
    display: flex;
    flex-direction: column;
    gap: 1.40625rem;
}

section.standard .block-split .text {
    max-inline-size: 27.75rem;
}

section.standard .block-text-full-img,
section.standard .block-text-full-img .container {
    display: flex;
    flex-direction: column;
    gap: 1.40625rem;
}

section.standard .block-text-full-img .img-wrapper {
    block-size: 39.84375rem;
}

/* "Contenuta": a bit wider than the text column (container-10 content + 400px),
   never wider than the padded viewport. */
section.standard .block-text-full-img .img-wrapper.img-wrapper-contained {
    inline-size: min(100% - (2 * var(--container-x-padding)), var(--contained-width));
    align-self: center;
}

/* "Naturale": no fixed box, the media keeps its own aspect ratio. */
section.standard .block-text-full-img .img-wrapper.img-wrapper-natural {
    block-size: auto;
}

section.standard .block-text-full-img .img-wrapper.img-wrapper-natural > :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

section.standard .block-cta {
    text-align: center;
    font-size: 1.6875rem;
    font-family: var(--ff-secondary);
    line-height: 1.513889;
    font-style: italic;
    letter-spacing: -0.0004em;
    text-decoration: underline;
}

section.standard .block-highlights .container {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}

section.standard .block-highlights .container:not(.card .container) {
    padding-inline: 0;
}

section.standard .block-highlights .container > h2 {
    text-align: center;
    padding-inline: var(--container-x-padding);
}

section.standard .block-highlights .items {
    display: grid;
    --grid-item-width: 16.40625rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: var(--container-gap);
}

/* Highlights render the case-history card, but desktop wants only the image:
   the foreground is pulled out of flow (so the image alone sizes the tile) and
   faded out. The link inside stays present, so the tile is still navigable, and
   the darkening gradient meant for overlaid text goes. Mobile keeps the full
   card — see the mobile block below. */
section.standard .block-highlights .card-case-history .layer-fg {
    position: absolute;
    inset: 0;
    opacity: 0;
}

section.standard .block-highlights .card-case-history .layer-bg::after {
    display: none;
}

@media (max-width: 768px) {
    section.standard .hero .container {
        padding-block-start: 7.8125rem;
        gap: 0.875rem;
    }

    section.standard .hero h1 {
        font-size: 2.1875rem;
        line-height: 0.857142857;
    }

    /* Servizi / Expertise category pages: the term name is the whole point of the
       page, so it gets the same weight the case archive title has on mobile. */
    body.tax-case-category section.standard .hero h1 {
        font-size: 2.8125rem;
        line-height: 0.822222222;
    }

    section.standard .hero .subtitle {
        font-size: 1.25rem;
        line-height: 1.1;
        font-weight: 600;
    }

    section.standard .block {
        margin-block: 3.125rem;
    }

    section.standard .block.block-highlights {
        margin-block-end: 0;
    }

    section.standard .block h2 {
        font-size: 1.5625rem;
        line-height: 0.88;
    }

    section.standard .block-split .text {
        gap: 0.75rem;
    }

    section.standard .block-split .container {
        display: flex;
        flex-direction: column;
        gap: 0.9375rem;
    }

    section.standard .block .description {
        font-size: 1rem;
        line-height: 1.125;
    }

    section.standard .block-text-full-img .img-wrapper {
        block-size: 11.125rem;
    }

    section.standard .block-text-full-img .img-wrapper.img-wrapper-natural {
        block-size: auto;
    }

    section.standard .block-cta {
        font-size: 1.375rem;
        line-height: 1.181818182;
        text-decoration-thickness: 1px;
    }

    /* On mobile each highlight is a full case-history card: restore the
       foreground the desktop rule hid, and the card's own mobile styles handle
       the rest (image on top, title/subtitle/categories below). */
    section.standard .block-highlights .card-case-history .layer-fg {
        position: static;
        opacity: 1;
    }

    /* About intro, mobile order: title, then the hero video at its natural size
       (hero-media-auto), then the description. The title is now the first thing
       on the page, so clear the fixed header like the other hero does. */
    section.standard .block-intro {
        padding-block-start: 7.8125rem;
    }

    section.standard .block-intro:first-child {
        margin-block-start: 0;
    }

    section.standard .block-intro section.hero-media {
        position: relative;
        inset-inline: calc(var(--container-x-padding) * -1);
        inline-size: calc(100% + (2 * var(--container-x-padding)));
    }

    section.standard .block-intro .text {
        gap: 3.125rem;
    }

    section.standard .block-intro h2 {
        order: 1;
        font-size: 2.1875rem;
        line-height: 0.857142857;
    }

    section.standard .block-intro .hero-media {
        order: 2;
        inline-size: 100%;
        block-size: auto;
        margin-inline-start: 0;
    }

    section.standard .block-intro .description {
        order: 3;
    }
}

/* ======================================== */
/* PRIDE COLLECTION */
/* ======================================== */

section.pride-collection > div {
    margin-block: 4.6875rem;
}

section.pride-collection h2 {
    font-size: 2.34375rem;
    line-height: 0.9;
    font-weight: 900;
}

section.pride-collection .description {
    font-size: 1.03125rem;
    line-height: 1.272727;
    font-weight: 400;
    font-family: var(--ff-tertiary);
}

section.pride-collection .awards .container {
    display: flex;
    flex-direction: column;
    gap: 1.40625rem;
}

section.pride-collection .awards .items {
    display: grid;
    --grid-item-width: 8.0625rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 2.34375rem;
    font-size: 1.03125rem;
    line-height: 1.272727;
    font-weight: 400;
    font-family: var(--ff-tertiary);
}

section.pride-collection .awards .item h3 {
    text-transform: uppercase;
    font-weight: 800;
}

section.pride-collection .certifications .container {
    display: flex;
    flex-direction: column;
    gap: 1.40625rem;
}

section.pride-collection .certifications .items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.40625rem;
}

section.pride-collection .certifications .items .img-wrapper {
    block-size: 3.28125rem;
}

section.pride-collection .certifications .items .img-wrapper img {
    block-size: 100%;
    inline-size: auto;
}

section.pride-collection .partners {
    display: flex;
    flex-direction: column;
    gap: 2.8125rem;
}

section.pride-collection .partners .marquees-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.8125rem;
}

@media (max-width: 768px) {
    section.pride-collection .awards .container {
        gap: 0.9375rem;
    }

    section.pride-collection > div {
        margin-block: 3.125rem;
    }

    section.pride-collection h2 {
        font-size: 1.5625rem;
        line-height: 1;
    }

    section.pride-collection .description {
        font-size: 1rem;
        line-height: 1.125;
    }

    section.pride-collection .awards .items {
        font-size: 1rem;
        line-height: 1.125;
        gap: 0.9375rem;
    }

    section.pride-collection .awards .item h3 {
        font-size: 1.125rem;
    }

    section.pride-collection .certifications .items {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        align-items: start;
    }

    section.pride-collection .partners,
    section.pride-collection .certifications .container {
        gap: 1.25rem;
    }

    section.pride-collection .partners .marquees-wrapper {
        gap: 0.625rem;
    }
}

/* ======================================== */
/* SLIDER BASIC */
/* ======================================== */

section.slider-basic .img-wrapper {
    aspect-ratio: 16/9;
}

/* Case Category toggles, same meaning as on "Testo + immagine full". */
section.standard section.slider-basic.slider-contained {
    inline-size: min(100% - (2 * var(--container-x-padding)), var(--contained-width));
    margin-inline: auto;
}

section.slider-basic.slider-natural .img-wrapper {
    aspect-ratio: auto;
}

section.slider-basic.slider-natural .img-wrapper > :is(img, video),
section.slider-basic.slider-natural .img-wrapper > picture > :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

section.slider-basic .swiper-pagination {
    line-height: 0;
    inset-block-end: 1.734375rem;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bullet-size: 1.125rem;
}

section.slider-basic .swiper-pagination-bullet {
    background-color: rgb(169 169 169 / 0.4);
    opacity: 1;
    border: 1px solid white;
    border-radius: 9999px;
    transition: inline-size 0.3s ease;
}

section.slider-basic .swiper-pagination-bullet-active {
    inline-size: 2.578125rem;
}

@media (max-width: 768px) {
    section.slider-basic .swiper-pagination {
        position: static;
        margin-block-start: 0.875rem;
        --swiper-pagination-bullet-size: 1.25rem;
        --swiper-pagination-bullet-horizontal-gap: 5px;
    }
}

/* ======================================== */
/* RELATED CASES */
/* ======================================== */

section.related-cases .container {
    padding-block: 4.6875rem;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}

section.related-cases h2 {
    font-size: 3.28125rem;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    font-weight: 900;
}

section.related-cases .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
}

section.related-cases .card {
    display: flex;
    flex-direction: column;
    gap: 0.46875rem;
    position: relative;
}

/* Scroll reveal, matching the archive cards: the card fades and rises, its image
   opens via clip-path, staggered by --reveal-delay across the row. */
@media (prefers-reduced-motion: no-preference) {
    section.related-cases .card[data-observe] {
        --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
        opacity: 0;
        transform: translate3d(0, 12%, 0);
        transition:
            opacity 1.5s var(--ease-reveal) var(--reveal-delay, 0s),
            transform 1.5s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    section.related-cases .card.is-inview {
        opacity: 1;
        transform: none;
    }

    section.related-cases .card[data-observe] .img-wrapper {
        clip-path: inset(8%);
        transition: clip-path 2s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    section.related-cases .card.is-inview .img-wrapper {
        clip-path: inset(0);
    }
}

/* The ratio comes from the card component elsewhere; here the wrapper needs its own. */
section.related-cases .card .img-wrapper {
    aspect-ratio: 16/9;
    margin-block-end: 0.703125rem;
}

section.related-cases .card .title {
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 700;
    text-box: trim-both cap alphabetic;
}

section.related-cases .card .title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

section.related-cases .card .subtitle {
    font-size: 0.75rem;
    line-height: 1.6;
    font-weight: 400;
    text-box: trim-both cap alphabetic;
}

/* The margin adds to the card's 0.625rem gap for 1.25rem (20px) above the chips. */
section.related-cases .card .chips {
    gap: 0.65625rem;
    margin-block-start: 0.46875rem;
}

/* Lift the chips above the title's full-card overlay link, or they aren't clickable.
   The padding is the global chip's, 2px tighter on each side. */
section.related-cases .card .chip {
    font-size: 0.75rem;
    padding-block: 0.117188rem 0.1875rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    section.related-cases .container {
        padding-inline: 0;
        padding-block: 3.4375rem 1.875rem;
        gap: 1.875rem;
    }

    section.related-cases h2 {
        font-size: 1.875rem;
        line-height: 0.833333333;
        padding-inline: var(--container-x-padding);
    }

    section.related-cases .cards {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    section.related-cases .card > *:not(.img-wrapper) {
        padding-inline: var(--container-x-padding);
    }
}

/* ======================================== */
/* SINGLE CASE */
/* ======================================== */

section.case-body .description {
    font-size: 1.03125rem;
    line-height: 1.272727273;
    font-family: var(--ff-tertiary);
}

section.case-body .intro .container {
    padding-block: 4.6875rem;
    padding-inline-start: 2.90625rem;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
}

section.case-body .intro .text {
    display: flex;
    flex-direction: column;
    gap: 3.1875rem;
}

section.case-body .intro h1 {
    font-size: 6.5625rem;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0.714285714;
}

section.case-body .intro .description {
    max-inline-size: 27.703125rem;
}

section.case-body .intro .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

section.case-body .intro .meta button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1.6875rem;
    font-style: italic;
    font-family: var(--ff-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* The "Chiudi" label only surfaces inside the mobile sheet's open state. */
section.case-body .intro .meta button .label-close {
    display: none;
}

/* Expanded: the + turns into a minus. */
section.case-body .intro .meta button .vertical {
    transition: opacity 0.3s ease;
}

section.case-body .intro .meta button[aria-expanded="true"] .vertical {
    opacity: 0;
}

/* Animated underline on the "Approfondisci" label — desktop only; on mobile the
   button becomes a pill with no underline (disabled in the mobile query below).
   Replaces text-decoration with a pseudo so the icon stays un-underlined. Static
   full underline at rest; on hover it wipes out to the right and back from left. */
section.case-body .intro .meta button {
    text-decoration: none;
}

section.case-body .intro .meta button .label-more {
    position: relative;
}

section.case-body .intro .meta button .label-more::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.3em;
    block-size: 1px;
    background: currentColor;
    transform-origin: left;
    /* Static full underline by default (reduced-motion / no-JS affordance). */
    transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    /* Draws in from the left (scaleX 0 -> 1) when the button reveals on scroll,
       like the rest of the page. */
    section.case-body .intro .meta button[data-observe] .label-more::after {
        transform: scaleX(0);
        transition: transform 0.8s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    section.case-body .intro .meta button.is-inview .label-more::after {
        transform: scaleX(1);
    }
}

section.case-body .content {
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
}

/* A third of the row it sits in, as a fraction rather than a measure. The row is
   .content, which is full-bleed: sizing the panel off the container's column
   width pinned it at 519px, which is a third of the 1440 grid but only a fifth of
   a 2560 viewport — so on a wide screen it read as a narrow strip.

   --header-height is published on :root by js/main.js; without it the panel used
   to stick 2.25rem from the top, i.e. straight under the header CTA, which stays
   anchored there while the bar slides away and printed itself over the text. */
/* Registered so they can be transitioned: an unregistered custom property is a
   token, and the fade would snap in and out. */
@property --fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

section.case-body .content-description-wrapper {
    inline-size: 33.3333%;
    overflow: hidden;
    transition: inline-size 0.3s ease;
    flex-shrink: 0;
    position: sticky;
    inset-block-start: calc(var(--header-height, 0px) + 2.25rem);
    padding-block-end: 3em;
}

section.case-body .content-description-wrapper[inert] {
    inline-size: 0px;
}

/* Ragged right, centred in the third the panel was given.
   Three bounds, outermost first: never into the gutters; never below the base
   four-column measure; and above that, a share of the panel so the text opens up
   a little as the panel does. It stops well short of filling the third — a line
   run across the full third of a 2560 screen would be some 800px and unreadable —
   so the growth only shows up on the very wide screens that needed it, and normal
   widths land on the base measure exactly as before. */
section.case-body .content-description-inner .description {
    inline-size: min(
        calc(100% - (2 * var(--container-x-padding))),
        max(calc((4 * var(--container-column-width)) + (3 * var(--container-gap))), 65%)
    );
    margin-inline: auto;
    text-align: start;
}

/* Mobile has its own floating pill for this button (further down), so the desktop
   treatment is fenced off rather than fighting it on specificity. */
@media (min-width: 769px) {
    /* Open: the toggle detaches to the bottom of the viewport so the minus stays
       reachable however far the page has scrolled. Bottom rather than top because
       the top is where the anchored header CTA lives. The translucent pill keeps
       it legible over the panel text it now floats above. */
    section.case-body .intro .meta button[aria-expanded="true"] {
        z-index: 10;
        position: fixed;
        inset-block-end: 2.25rem;
        inset-inline-end: var(--container-x-padding);
        color: black;
        background-color: rgb(252 252 252 / 0.8);
        backdrop-filter: blur(10px);
        border-radius: 99999px;
        padding-block: 0.375rem 0.5rem;
        padding-inline: 1.125rem 0.875rem;
    }

    /* As a pill it carries the minus as its state; the underline reads as a stray
       rule inside the rounded box. */
    section.case-body .intro .meta button[aria-expanded="true"] .label-more::after {
        display: none;
    }

    /* Detached, it would otherwise float over the footer (JS toggles .is-tucked). */
    section.case-body .intro .meta button[aria-expanded="true"].is-tucked {
        opacity: 0;
        pointer-events: none;
    }

    /* Closed, the panel is 0 wide but its text still lays out inside it, one word
       per line: Safari lets that column's height stretch the row, leaving a tall
       empty band under the blocks. Collapsing its height too takes it out of the
       row's sizing (the text is invisible at 0 width anyway). */
    section.case-body .content-description-wrapper[inert] {
        block-size: 0;
        padding-block-end: 0;
    }

    /* Room at the end of the panel for the pill that now floats over it.

       Capped to the space the sticky panel actually occupies on screen: on a
       short viewport a long text is taller than that, and sticky keeps its top
       pinned, so everything past the fold was simply unreachable. Scrolling the
       panel itself gives the overflow back; overscroll-behavior stops the page
       from taking over once it ends. */
    section.case-body .content-description-wrapper:not([inert]) {
        padding-block-end: 6rem;
        max-block-size: calc(100dvh - var(--header-height, 0px) - 2.25rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Scrolls, but without a bar: the panel is a column of text over the
           case's own colour, and a track down its edge reads as chrome. */
        scrollbar-width: none;
    }

    section.case-body .content-description-wrapper:not([inert])::-webkit-scrollbar {
        display: none;
    }

    /* Scrolling a column that is cut mid-line at its edges reads as broken, so
       the mask fades the text out at whichever edge still has text past it.
       js/main.js sets the two attributes, so an edge you have already reached
       stays sharp and a panel that fits has no fade at all. Gradients take
       physical keywords only, hence `to bottom`. Desktop only: on mobile the
       approfondimento is a full-screen sheet, where a fade over the header and
       over the closing pill only muddies it. */
    section.case-body .content-description-wrapper {
        --fade-size: 3.75rem;
        transition:
            inline-size 0.3s ease,
            --fade-start 0.1s linear,
            --fade-end 0.1s linear;
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            black var(--fade-start),
            black calc(100% - var(--fade-end)),
            transparent 100%
        );
    }

    section.case-body .content-description-wrapper[data-overflow-start] {
        --fade-start: var(--fade-size);
    }

    section.case-body .content-description-wrapper[data-overflow-end] {
        --fade-end: var(--fade-size);
    }
}

/* The blocks column is a flex item: without this a slider inside it sizes off its
   own track instead of the available width and pushes the row wider. */
section.case-body .blocks {
    min-inline-size: 0;
}

section.case-body .block-two-medias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

section.case-body .block-text-img-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
}

section.case-body .block-text-img-row .text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    max-inline-size: calc(28.3125rem + (2 * var(--container-x-padding)));
    margin-inline: auto;
    padding: var(--container-x-padding);
}

section.case-body .block-text-img-row h2 {
    text-transform: uppercase;
    font-size: 3.28125rem;
    line-height: 1;
    font-weight: 900;
}

section.case-body .block-text-img-row .description {
    max-inline-size: 25.96875rem;
}

/* Flipped: the media leads and the text follows. Only meaningful while the row
   really is two columns — stacked (panel open, or mobile) the text stays on top. */
section.case-body .block-text-img-row.is-flipped .text {
    order: 2;
}

section.case-body .block-text-img-column {
    display: flex;
    flex-direction: column-reverse;
}

/* The provider's iframe carries fixed width/height attributes: the wrapper owns the
   proportions (--ratio, set per block in the editor) and the iframe just fills it. */
section.case-body .block-oembed .embed {
    aspect-ratio: var(--ratio, 16 / 9);
}

section.case-body .block-oembed .embed iframe,
section.case-body .block-oembed .embed video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

/* Expanded: the panel takes a third of the row, so the blocks that were side by
   side stack instead of being squeezed. Keyed off the panel itself, not the button,
   so the layout state lives with the element that drives it. */
section.case-body .content:has(> .content-description-wrapper:not([inert])) .block-two-medias {
    grid-template-columns: 1fr;
}

section.case-body .content:has(> .content-description-wrapper:not([inert])) .block-text-img-row {
    grid-template-columns: 1fr;
}

section.case-body .content:has(> .content-description-wrapper:not([inert])) .block-text-img-row.is-flipped .text {
    order: 0;
}

section.case-body .content:has(> .content-description-wrapper:not([inert])) .block-text-img-row .text-wrapper {
    grid-template-columns: 1fr;
    padding-block: 15.625rem;
}

section.case-body .block-text-img-column .text-wrapper {
    padding-block: 4.6875rem;
    padding-inline: var(--container-x-padding);
    max-inline-size: 70.828125rem;
    margin-inline: auto;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.0625rem;
}

section.case-body .block-text-img-column h2 {
    font-size: 3.28125rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
}

section.case-body .block-text-img-column .description {
    max-inline-size: 51.140625rem;
}

/* ============================================================
   Case history — scroll reveals, word reveal & parallax
   (auge-inspired). Reuses the [data-observe] -> is-inview system.
   All gated behind reduced-motion; parallax additionally behind
   scroll-driven support, so unsupported browsers (Firefox) and
   reduced-motion users simply get static, fully-visible content.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    section.case-body {
        --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* #1 — Image reveal: clip-path opens + fade as the media enters. */
    section.case-body .img-wrapper[data-observe] {
        opacity: 0;
        clip-path: inset(8%);
        transition:
            opacity 1.5s var(--ease-reveal) var(--reveal-delay, 0s),
            clip-path 2s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    section.case-body .img-wrapper.is-inview {
        opacity: 1;
        clip-path: inset(0);
    }

    /* Descriptions: simple fade-up (titles get the word reveal instead). */
    section.case-body .description[data-observe] {
        opacity: 0;
        transform: translate3d(0, 1.5rem, 0);
        transition:
            opacity 1s var(--ease-reveal) var(--reveal-delay, 0s),
            transform 1s var(--ease-reveal) var(--reveal-delay, 0s);
    }

    section.case-body .description.is-inview {
        opacity: 1;
        transform: none;
    }

    /* Category chips: staggered fade-up, indexed by egStagger(). */
    section.case-body .chips[data-stagger] > li {
        opacity: 0;
        transform: translate3d(0, 0.75rem, 0);
        transition:
            opacity 0.7s var(--ease-reveal) calc(var(--index, 0) * var(--chip-stagger, 0.06s)),
            transform 0.7s var(--ease-reveal) calc(var(--index, 0) * var(--chip-stagger, 0.06s));
    }

    section.case-body .chips.is-inview > li {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 768px) {
    section.case-body .intro .container {
        padding-block: 3.125rem 2.3125rem;
        padding-inline: var(--container-x-padding);
        gap: 0.9375rem;
    }

    section.case-body .intro .text {
        gap: 0.8125rem;
    }

    section.case-body .intro h1 {
        font-size: 2.1875rem;
        line-height: 0.857142857;
    }

    section.case-body .description {
        font-size: 1rem;
        line-height: 1.125;
    }

    /* The "Approfondisci" trigger detaches into a floating pill, mirroring the
       archive filters bar, and toggles a sheet with the long-form content. */
    section.case-body .intro .meta button {
        z-index: 999;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 2.375rem;
        margin-inline: auto;
        inline-size: fit-content;
        max-inline-size: calc(100vw - var(--container-gap) * 2);
        gap: 0.625rem;
        font-size: 1.0625rem;
        font-style: italic;
        font-family: var(--ff-secondary);
        text-decoration: none;
        color: black;
        background-color: rgb(252 252 252 / 80%);
        backdrop-filter: blur(10px);
        border-radius: 99999px;
        padding-block: 3px 1px;
        padding-inline: 1.25rem 0.9375rem;
        transition: translate 0.4s ease, opacity 0.4s ease;
    }

    section.case-body .intro .meta button[aria-expanded="true"] {
        background: black;
        color: white;
    }

    /* Tuck below the viewport once the footer scrolls in (JS toggles .is-tucked).
       Never while the sheet is open, so the "Chiudi" pill stays reachable. */
    section.case-body .intro .meta button.is-tucked:not([aria-expanded="true"]) {
        translate: 0 calc(100% + 2.375rem);
        opacity: 0;
        pointer-events: none;
    }

    /* The pill carries no underline. */
    section.case-body .intro .meta button .label-more::after {
        display: none;
    }

    section.case-body .intro .meta button svg {
        inline-size: 1rem;
        block-size: 1rem;
    }

    /* Open: the label reads "Chiudi" instead of "Approfondisci". */
    section.case-body .intro .meta button[aria-expanded="true"] .label-more {
        display: none;
    }

    section.case-body .intro .meta button[aria-expanded="true"] .label-close {
        display: inline;
    }

    /* Full-screen sheet that sits *under* the header (z 9) and the pill (z 999)
       in the stacking order, so both stay painted on top of it. Its content is
       padded clear of the header; only its background runs the full height.

       It takes the case's own background (published as --case-body-bg by
       inc/case/body.php) rather than a flat white, so opening the sheet reads as
       staying inside the case. Colour is inherited for the same reason — the
       section already sets the case's foreground. */
    section.case-body .content-description-wrapper {
        z-index: 8;
        position: fixed;
        inset-block-start: 0;
        inset-block-end: 0;
        inset-inline: 0;
        inline-size: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--case-body-bg, white);
        color: inherit;
        padding-block: 6.8125rem 8.75rem;
        transition:
            opacity 0.3s ease,
            translate 0.3s ease;
    }

    /* Closed: the same fixed box, faded out and inert. */
    section.case-body .content-description-wrapper[inert] {
        inline-size: auto;
        opacity: 0;
        translate: 0 1rem;
        pointer-events: none;
    }

    /* Desktop gets its gutters from the auto margins either side of a fixed
       four-column measure; the full-width sheet has to pad itself instead. */
    section.case-body .content-description-inner .description {
        inline-size: auto;
        margin-inline: 0;
        padding-inline: var(--container-x-padding);
    }

    /* Freeze the page behind the open sheet. */
    html:has(section.case-body .intro .meta button[aria-expanded="true"]) {
        overflow: hidden;
    }

    section.case-body .block-two-medias {
        display: block;
    }

    section.case-body .block-text-img-row {
        display: block;
    }

    section.case-body .block-text-img-row h2 {
        font-size: 1.875rem;
    }

    section.case-body .block-text-img-row .text-wrapper {
        gap: 0.9375rem;
    }

    section.case-body .block-text-img-column .text-wrapper {
        padding-block: 3.125rem 1.875rem;
        gap: 0.9375rem;
    }

    section.case-body .block-text-img-column h2 {
        font-size: 1.875rem;
        line-height: 0.833333333;
    }
}

/* The sheet (and the desktop panel) resolve without travel for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    section.case-body .content-description-wrapper,
    section.case-body .content-description-wrapper[inert] {
        translate: none;
        transition-property: opacity;
    }
}

/* ======================================== */
/* STANDARD PAGE */
/* ======================================== */

section.standard-page {
    padding-block: 10.171875rem 2.8125rem;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

section.standard-page .hero .container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

section.standard-page .hero h1 {
    font-size: 2.34375rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

section.standard-page :is(.hero .subtitle, .final-text) {
    font-size: 0.75rem;
    line-height: 2;
    color: #606060;
}

section.standard-page .content {
    font-size: 0.75rem;
    line-height: 1.75;
}

section.standard-page .content ::marker {
    font-size: 0.7em;
}

section.standard-page .content h2 {
    font-size: 1.03125rem;
    line-height: 1.272727;
    font-weight: 700;
    margin-block-end: 0.5lh;
}

section.standard-page .content h3 {
    font-weight: 700;
    margin-block-end: 0.5lh;
}

@media (max-width: 768px) {
    section.standard-page {
        padding-block-start: 7.8125rem;
    }

    section.standard-page .hero h1 {
        font-size: 2.1875rem;
        line-height: 0.857142857;
    }

    section.standard-page .hero .container {
        gap: 0.6875rem;
    }
}

/* ======================================== */
/* HEADER */
/* ======================================== */

header.egloo .bar .menu-toggle {
    display: none;
}

/* The roll toggle is a desktop-only alternative to the language list; hidden
   by default so it never collides with the list at the 768px breakpoint edge. */
header.egloo .bar .end .lang-toggle {
    display: none;
}

@media (hover: hover) and (min-width: 768px) {
    header.egloo {
        --submenu-transition: 0.3s ease;
        --header-transition: 0.3s ease;

        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 9;
        background-color: transparent;
        transition:
            background-color var(--submenu-transition),
            transform var(--header-transition);
    }

    /* The veil is a layer of its own, not the bar's background: the design runs it
       16.5rem down the page, well past the bar itself, and a background would be
       clipped to the padding box. The fill is Figma's 0.56 white at 80% layer
       opacity (0.448), gone by 56.25% of the height; the stops in between follow a
       smoothstep curve, since the two-stop linear ramp reads as a visible band. */
    header.egloo::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: 0;
        block-size: 16.5rem;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(to bottom,
                rgb(255 255 255 / 0.448) 0%,
                rgb(255 255 255 / 0.435) 5.6%,
                rgb(255 255 255 / 0.401) 11.25%,
                rgb(255 255 255 / 0.351) 16.9%,
                rgb(255 255 255 / 0.29) 22.5%,
                rgb(255 255 255 / 0.224) 28.1%,
                rgb(255 255 255 / 0.158) 33.75%,
                rgb(255 255 255 / 0.097) 39.4%,
                rgb(255 255 255 / 0.047) 45%,
                rgb(255 255 255 / 0.013) 50.6%,
                rgb(255 255 255 / 0) 56.25%);
    }

    /* The 404 heroes are flat colour fields: no veil over them. */
    body.error404 header.egloo::after {
        content: none;
    }

    /* An open submenu is a reading surface, not a passing bar: it (and the bar it
       hangs off, so the two read as one panel with no seam) goes near-opaque. The
       veil paints over it, so the two only ever add up. */
    header.egloo.submenu-open {
        background-color: rgb(255 255 255 / 0.9);
    }

    header.egloo.is-hidden {
        transform: translateY(-100%);
    }

    /* The CTA stays anchored while the rest of the bar slides away: it cancels the
       header's own transform. --header-h is published by the header script; without
       it the CTA simply travels with the bar. Both sides share --header-transition,
       so they cancel at every frame rather than only at the extremes. */
    header.egloo.is-hidden .bar .end .cta {
        transform: translateY(var(--header-h, 0px));
    }

    /* Direct child only: the submenu panel carries a .container of its own, and the
       bar's three-column grid must not reach it. */
    header.egloo .bar > .container {
        padding-block: 0.546875rem;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: var(--container-gap);
        align-items: center;
    }

    header.egloo .bar .logo {
        max-inline-size: 5.195313rem;
    }

    header.egloo .bar .logo a {
        display: block;
    }

    header.egloo .bar ul.level-1 {
        font-size: 0.875rem;
        line-height: 1.575;
        font-weight: 500;
        display: flex;
        gap: 1.09375rem;
        text-transform: uppercase;
    }

    /* UA stylesheets set text-transform: none on button, which wins over the value
       inherited from ul.level-1 — unlike the plain <a> siblings. */
    header.egloo .bar ul.level-1 .submenu-toggle {
        text-transform: inherit;
    }

    header.egloo .bar ul.level-1 > li > a:hover,
    header.egloo .bar ul.level-1 .submenu-toggle:hover,
    header.egloo .bar ul.level-1 .submenu-toggle[aria-expanded="true"],
    header.egloo .bar .submenu ul.level-2 a:hover {
        font-weight: 900;
    }

    /* Weight is the hover state here, so the voices carry .eg-weight-lock (see
       UTILS) and reserve their bold width up front rather than growing into
       their neighbours. Nothing to add: the utility is weight 900 by default,
       which is exactly the hover weight above. */

    header.egloo .bar .submenu {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        background-color: rgb(255 255 255 / 0.9);
        display: grid;
        grid-template-rows: 1fr;
        overflow: hidden;
        transition:
            grid-template-rows var(--submenu-transition),
            background-color var(--submenu-transition);
    }

    header.egloo .bar .submenu[inert] {
        grid-template-rows: 0fr;
        background-color: transparent;
    }

    header.egloo .bar .submenu > div {
        min-block-size: 0;
    }

    header.egloo .bar .submenu .container {
        border-block-start: 1px solid #4e4e4e;
        padding-block: 1.804688rem 2.460938rem;
    }

    /* Two rows filled column by column: inside container-8 the track size lands four
       columns, so seven voices read 2 + 2 + 2 + 1 as in the design. */
    header.egloo .bar .submenu ul.level-2 {
        display: grid;
        --grid-item-width: 12.578125rem;
        grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
        grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        gap: 1rem var(--container-gap);
        font-size: 0.875rem;
        line-height: 1.575;
        font-weight: 500;
    }

    header.egloo .bar .end {
        display: flex;
        align-items: center;
        gap: 0.820313rem;
        justify-content: end;
    }

    /* Desktop uses the single roll toggle below, not the list. */
    header.egloo .bar .end .lang-selector {
        display: none;
    }

    header.egloo .bar .end .lang-toggle {
        display: block;
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 1.575;
    }

    /* Roll toggle: a two-code track (current + target) stacked vertically inside
       a one-line clipped viewport. The track sizes to the widest code, so neither
       is clipped. On hover it slides up one line to reveal the target. */
    header.egloo .bar .end .lang-toggle a .roll {
        display: inline-block;
        overflow: hidden;
        block-size: 1lh;
        vertical-align: bottom;
    }

    header.egloo .bar .end .lang-toggle a .roll .roll-track {
        display: inline-block;
        transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    header.egloo .bar .end .lang-toggle a .roll .roll-track > span {
        display: block;
        text-align: center;
    }

    header.egloo .bar .end .lang-toggle a:hover .roll .roll-track {
        transform: translateY(-50%);
    }

    /* text-box trims the font's leading away so the pill's own padding is what
       centres the label: with the ascender/descender slack gone, equal padding
       reads as optically centred instead of sitting low in the pill. */
    header.egloo .bar .end .cta {
        font-size: 0.875rem;
        line-height: 0.6875;
        font-weight: 800;
        color: white;
        background-color: black;
        border-radius: 99999px;
        text-box: trim-both cap alphabetic;
        padding-block: 0.519531rem;
        padding-inline: 0.875rem;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        /* The transform is what counter-translates the hiding bar (see above). */
        transition:
            transform var(--header-transition),
            background-color 0.3s ease;
    }

    /* Without text-box the font's leading is still in the box, so symmetric padding
       would read low: keep the hand-tuned asymmetry that compensated for it. */
    @supports not (text-box: trim-both cap alphabetic) {
        header.egloo .bar .end .cta {
            padding-block: 0.492188rem 0.546875rem;
        }
    }

    header.egloo .bar .end .cta:where(:hover, :focus-visible) {
        background-color: #626262;
    }
}

@media (hover: none) or (max-width: 768px) {
    header.egloo {
        --submenu-transition: 0.3s ease;
        --menu-transition: 0.3s ease;
        --menu-bg: #99ffa5;
        --icon-menu: url("data:image/svg+xml,%3Csvg width='32' height='26' viewBox='0 0 32 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.2 10.8333C31.2 4.4186 22.7206 0 15.6 0C8.47938 0 0 4.20543 0 10.8333H31.2Z' fill='black'/%3E%3Cpath d='M0 21.6667H31.2V24.655C31.2 25.3973 30.5911 26 29.8412 26H1.36516C0.608874 26 0 25.3973 0 24.6486V21.6667Z' fill='black'/%3E%3Crect y='14.0833' width='31.2' height='4.33333' fill='black'/%3E%3C/svg%3E");
        --icon-close: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='19.3171' width='27.3185' height='3.79423' transform='rotate(-45 0 19.3171)' fill='black'/%3E%3Crect x='2.68442' width='27.3185' height='3.79423' transform='rotate(45 2.68442 0)' fill='black'/%3E%3C/svg%3E");
        --icon-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 25.2127 25.2127' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6064 24.6187V0.594017M24.6187 12.6064L12.6064 0.594017L0.594017 12.6064' transform='rotate(90 12.6064 12.6064)' stroke='black' stroke-width='1.18803' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        position: fixed;
        z-index: 9;
        inset-inline: 0;
        inset-block-start: 0;
    }

    /* The toggle sits between the nav and the language selector in the markup, so the
       open state has no wrapper to hang off — the bar's own container becomes the panel
       and reflows its children into rows.

       The three rows are declared even while the panel is closed. They cost nothing
       (their items are `display: none`, so they collapse to zero and the row gap is
       kept at zero), and they have to outlive the toggle: on the way out the items are
       still fading, and an area that stopped existing would drop them into auto
       placement mid-transition. The gaps ride on the items' own margins instead. */
    header.egloo .bar > .container {
        padding-block: 2.8125rem 2.5rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "start toggle"
            "middle middle"
            "end end";
        align-items: center;
        align-content: start;
        column-gap: var(--container-gap);
    }

    header.egloo .bar .start {
        grid-area: start;
    }

    header.egloo .bar .menu-toggle {
        grid-area: toggle;
    }

    header.egloo .bar .middle {
        grid-area: middle;
        margin-block-start: 2.5rem;
    }

    /* The language row sits well clear of the voices above it: with the list this
       tight, 2.5rem read as part of the menu rather than below it. */
    header.egloo .bar .end {
        grid-area: end;
        margin-block-start: 5rem;
    }

    header.egloo .bar .logo img {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        object-fit: contain;
    }

    /* The panel fades in as a whole: its two halves are hidden until the toggle opens
       them, and `display` rides along on the transition so they stay painted long
       enough to fade back out. */
    header.egloo .bar .middle,
    header.egloo .bar .end {
        display: none;
        opacity: 0;
        translate: 0 0.75rem;
        transition:
            opacity var(--menu-transition),
            translate var(--menu-transition),
            display var(--menu-transition) allow-discrete;
    }

    /* The icon is a mask rather than a background so it keeps taking its colour from
       the button, and swapping states is one property. */
    header.egloo .bar .menu-toggle {
        display: block;
        inline-size: 2rem;
        block-size: 1.625rem;
        background-color: black;
        mask: var(--icon-menu) center / contain no-repeat;
    }

    header.egloo .bar .menu-toggle[aria-expanded="true"] {
        inline-size: 1.375rem;
        block-size: 1.375rem;
        mask-image: var(--icon-close);
    }

    /* --- Open panel --- */

    /* The green is a pseudo-element rather than the header's own background: the header
       only takes over the viewport while the panel is open, and that jump is discrete.
       A fixed layer of its own can fade on both edges of the toggle regardless. */
    header.egloo::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-color: var(--menu-bg);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--menu-transition);
    }

    header.egloo:has(.menu-toggle[aria-expanded="true"])::before {
        opacity: 1;
    }

    header.egloo:has(.menu-toggle[aria-expanded="true"]) {
        inset-block-end: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The panel covers the viewport, so the page behind it must not scroll with it. */
    html:has(header.egloo .menu-toggle[aria-expanded="true"]) {
        overflow: hidden;
    }

    header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .middle {
        display: block;
    }

    header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .end {
        display: flex;
    }

    header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .middle,
    header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .end {
        opacity: 1;
        translate: 0 0;
    }

    @starting-style {
        header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .middle,
        header.egloo:has(.menu-toggle[aria-expanded="true"]) .bar .end {
            opacity: 0;
            translate: 0 0.75rem;
        }
    }

    header.egloo .bar ul.level-1 {
        font-size: 3rem;
        line-height: 0.729167;
        font-weight: 900;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        gap: 1.125rem;
    }

    /* The weight lock is a desktop affair: there is no hover here, the voices are
       stacked so nothing could be pushed sideways anyway, and the toggle needs
       its own row layout for the +/- glyph. Opt back out.

       All three properties, not just display: the toggle re-declares `display:
       flex` on its own below, so reverting only display left the utility's
       `flex-direction: column` in force and dropped the +/- underneath its label. */
    header.egloo .bar .eg-weight-lock {
        display: revert;
        flex-direction: revert;
        align-items: revert;
    }

    header.egloo .bar .eg-weight-lock[data-weight-lock]::before {
        content: none;
    }

    /* Full width with the +/- pushed to the far end, rather than tucked against the
       label: that keeps the glyph's overhang (see below) out over the empty right
       margin instead of alongside the next voice, which is what let the list tighten. */
    header.egloo .bar ul.level-1 .submenu-toggle {
        text-transform: inherit;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        inline-size: 100%;
        justify-content: space-between;
    }

    /* The +/- is far larger than the row it marks. Collapsing its line box to zero keeps
       it from stretching the row: the glyph overflows around the centre line and the
       rhythm of the list survives. */
    header.egloo .bar ul.level-1 .submenu-toggle::after {
        content: "+";
        font-size: 3.359375rem;
        line-height: 0;
        font-weight: 400;
    }

    header.egloo .bar ul.level-1 .submenu-toggle[aria-expanded="true"]::after {
        content: "-";
    }

    header.egloo .bar .submenu {
        display: grid;
        grid-template-rows: 1fr;
        overflow: hidden;
        transition: grid-template-rows var(--submenu-transition);
    }

    header.egloo .bar .submenu[inert] {
        grid-template-rows: 0fr;
    }

    header.egloo .bar .submenu > div {
        min-block-size: 0;
    }

    /* Inside the panel the submenu is already within the bar's container, so it drops
       the second set of gutters and indents off the level-1 text instead. */
    header.egloo .bar .submenu .container {
        max-inline-size: none;
        padding-inline: 1.875rem 0;
        padding-block: 1.9375rem 1.25rem;
    }

    header.egloo .bar ul.level-2 {
        font-size: 1.5rem;
        line-height: 1;
        font-weight: 400;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        gap: 1.625rem;
    }

    header.egloo .bar .end {
        align-items: center;
        gap: 0.875rem;
    }

    header.egloo .bar .end .lang-selector ul {
        display: flex;
        align-items: center;
        gap: 5rem;
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.575;
        text-transform: uppercase;
    }

    header.egloo .bar .end .lang-selector ul a {
        color: #707070;
    }

    header.egloo .bar .end .lang-selector ul a[aria-current="true"] {
        color: black;
        text-decoration: underline;
    }

    /* The CTA is an arrow here, not a pill. The label stays in the DOM for assistive
       tech and is pushed out of the (clipped) box; the negative margin cancels the
       padding the mask leaves around the glyph so the arrow lines up with the gutter. */
    header.egloo .bar .end .cta {
        order: -1;
        flex: none;
        inline-size: 2.625rem;
        block-size: 2.625rem;
        margin-inline-start: -0.5rem;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background-color: black;
        mask: var(--icon-arrow) center / 1.575rem no-repeat;
    }
}

/* ======================================== */
/* MOBILE PRESERVATION */
/* ======================================== */

/*
 * The rules above were authored for the 1440 desktop (every rem scaled to
 * 3/4 of the original 1920 draft). These restore the pre-scale sizes on
 * mobile for the base declarations the mobile layout inherits without an
 * override of its own, so the mobile rendering is unchanged.
 */
@media (max-width: 768px) {
    html {
        scroll-padding: 6.25rem;
    }

    nav.breadcrumbs ul {
        --_gap: 1.25rem;
    }

    .rich-text ul {
        padding-inline-start: 1rem;
    }

    .rich-text ol {
        padding-inline-start: 1rem;
    }

    .rich-text table {
        font-size: 0.875rem;
    }

    .rich-text table :is(th, td) {
        padding: 0.75rem;
    }

    .skip-link:focus {
        inset-block-start: 1rem;
        inset-inline-start: 1rem;
        padding: 0.75rem 1.25rem;
        border-radius: 0.25rem;
    }

    :root {
        --container-gap: 1.25rem;
        --container-column-width: 8.3125rem;
        --form-gap-row: 0.8125rem;
        --form-field-min-width: 18.375rem;
        --form-checkbox-size: 0.8125rem;
        --form-input-font-size: 1rem;
        --form-border-radius-checkbox: 0.375rem;
        --form-label-field-gap: 0.625rem;
    }

    input[type="checkbox"] {
        inline-size: 1.4375rem;
        block-size: 1.4375rem;
    }

    .wpcf7-styled select {
        padding-inline-end: calc(var(--form-input-padding-inline) + 1.5rem);
    }

    .wpcf7-styled textarea {
        min-block-size: 14.75rem;
        border-radius: 1.5625rem;
    }

    .wpcf7-styled label {
        font-size: 0.875rem;
    }

    .wpcf7-styled label:has(input[type="file"]) {
        background-position: calc(100% - 1rem) center;
    }

    .wpcf7-styled label:has(input[type="file"]) > span:first-child {
        max-inline-size: calc(100% - 3rem);
    }

    .wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit {
        margin-block-start: 1.0625rem;
        line-height: 4.625rem;
    }

    .wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-submit:hover::after {
        translate: 0.5rem 0;
    }

    .wpcf7-styled :is([data-class="wpcf7cf_group"], form) .wpcf7-not-valid-tip {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .wpcf7-styled .wpcf7-acceptance label {
        gap: 0.75rem;
        margin-block-start: 0.9375rem;
    }

    .wpcf7-styled .wpcf7-acceptance label span {
        font-size: 0.8125rem;
    }

    .wpcf7-styled .wpcf7-response-output {
        padding: 1rem;
        font-size: 0.875rem;
        margin-block-start: 3rem;
    }

    .form-note {
        font-size: 0.8125rem;
    }

    .eg-pagination ul {
        gap: 0.5rem;
    }

    .chips {
        gap: 0.5rem 1.5625rem;
    }

    .chip {
        font-size: 1rem;
        padding-inline: 0.6875rem;
    }

    section.featured-cases .row-small {
        --grid-item-width: 31.25rem;
    }

    section.text-accordions .accordion-cta {
        padding-inline: 1.03125rem;
        font-size: 0.875rem;
    }

    section.side-form .info {
        font-size: 1.25rem;
    }

    section.side-form .zone-form {
        max-inline-size: 36.8125rem;
    }

    main > section.marquee:last-child {
        margin-block-end: 6.25rem;
    }

    footer .start .logos {
        gap: 1.25rem;
    }

    footer .start .infos {
        max-inline-size: 31.5rem;
    }

    footer .start .newsletter {
        gap: 1.375rem;
    }

    footer .start .newsletter h2 {
        font-size: 3.125rem;
    }

    footer .start .newsletter .wpcf7-submit {
        font-size: 2.25rem;
    }

    section.banner.banner-customizable .cta a {
        gap: 0.3125rem;
    }

    section.standard .hero h1 {
        max-inline-size: 71.875rem;
    }

    :where(body.single-news) section.standard .hero h1 {
        font-size: 6.25rem;
    }

    section.standard .block-intro .text {
        max-inline-size: 74.75rem;
    }

    section.standard .block-intro h2 {
        max-inline-size: 65.125rem;
    }

    section.standard .block-split .text {
        max-inline-size: 37rem;
    }

    section.standard .block-text-full-img {
        gap: 1.875rem;
    }

    section.standard .block-text-full-img .container {
        gap: 1.875rem;
    }

    section.standard .block-highlights .container {
        gap: 1.25rem;
    }

    section.standard .block-highlights .items {
        --grid-item-width: 21.875rem;
    }

    section.pride-collection .awards .items {
        --grid-item-width: 10.75rem;
    }

    section.pride-collection .certifications .items .img-wrapper {
        block-size: 4.375rem;
    }

    section.slider-basic .swiper-pagination {
        inset-block-end: 2.3125rem;
    }

    section.slider-basic .swiper-pagination-bullet-active {
        inline-size: 3.4375rem;
    }

    section.related-cases .card {
        gap: 0.625rem;
    }

    section.related-cases .card .img-wrapper {
        margin-block-end: 0.9375rem;
    }

    section.related-cases .card .title {
        font-size: 1.25rem;
    }

    section.related-cases .card .subtitle {
        font-size: 1rem;
    }

    section.related-cases .card .chips {
        gap: 0.875rem;
        margin-block-start: 0.625rem;
    }

    section.related-cases .card .chip {
        font-size: 0.8125rem;
        padding-block: 0.15625rem 0.25rem;
    }

    section.case-body .intro .description {
        max-inline-size: 36.9375rem;
    }

    section.case-body .intro .meta {
        gap: 1rem;
    }

    section.case-body .block-text-img-row .text-wrapper {
        max-inline-size: calc(37.75rem + (2 * var(--container-x-padding)));
    }

    section.case-body .block-text-img-row .description {
        max-inline-size: 34.625rem;
    }

    section.case-body .block-text-img-column .text-wrapper {
        max-inline-size: 94.4375rem;
    }

    section.case-body .block-text-img-column .description {
        max-inline-size: 68.1875rem;
    }

    section.standard-page {
        padding-block-end: 3.75rem;
        gap: 2.5rem;
    }

    section.standard-page :is(.hero .subtitle, .final-text) {
        font-size: 0.875rem;
    }

    section.standard-page .content {
        font-size: 1rem;
    }

    section.standard-page .content h2 {
        font-size: 1.375rem;
    }
}

/* ======================================== */
/* 404 */
/* ======================================== */

section.not-found {
    background-color: #cab3ff;
    min-block-size: 50.25rem;
    padding-block: 11.25rem 5.8125rem;
    border-block-end: 2px solid currentColor;
}

section.not-found.not-found-case {
    background-color: #f0ff9e;
    padding-block-start: 7.125rem;
}

section.not-found .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

section.not-found h1 {
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

section.not-found .artwork {
    display: block;
    inline-size: min(42.5rem, 100%);
    block-size: auto;
    margin-block-start: 2.875rem;
}

section.not-found .text {
    max-inline-size: 35.75rem;
    margin-block-start: 1.265625rem;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.25;
}

/* "Under design": title, circle and pen laid out on the Figma group (642x650),
   in percentages and container units so the whole composition scales as one. */
section.not-found .under-design {
    position: relative;
    container-type: inline-size;
    inline-size: min(30.09375rem, 100%);
    aspect-ratio: 642 / 650;
}

section.not-found .under-design h1 {
    position: absolute;
    inset-block-start: 4.92%;
    inset-inline-start: 0;
    /* min-content puts each word on its own line; the indent shifts "UNDER". */
    inline-size: min-content;
    font-size: 17.08cqi;
    text-indent: 0.78em;
    text-align: start;
}

section.not-found .under-design .circle {
    position: absolute;
    inset-block-start: 42.18%;
    inset-inline-start: 6.04%;
    inline-size: 58.54%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #dbf642;
}

section.not-found .under-design .pen {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 23.64%;
    inline-size: 76.36%;
    block-size: auto;
}

section.not-found.not-found-case .text {
    max-inline-size: 34.21875rem;
    margin-block-start: 2.15625rem;
}

@media (max-width: 768px) {
    section.not-found {
        min-block-size: auto;
        padding-block: 8.75rem 3.75rem;
    }

    section.not-found.not-found-case {
        padding-block-start: 7.5rem;
    }

    section.not-found h1 {
        font-size: 2.5rem;
    }

    section.not-found .artwork {
        margin-block-start: 1.875rem;
    }

    section.not-found .text {
        font-size: 1.25rem;
    }
}