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

* {
    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-block-start: calc(var(--header-h) + 1.25rem);
    -webkit-tap-highlight-color: transparent;
    interpolate-size: allow-keywords;
}

body {
    font-family: "Elza Text", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: var(--c-nero);
    background-color: var(--c-bianco);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

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;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================================== */
/* FONT */
/* ======================================== */

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

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

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

/* ======================================== */
/* TOKENS */
/* ======================================== */

:root {
    --c-nero: #181818;
    --c-bianco: #ffffff;
    --c-arancio: #fc6c47;
    --c-rosa: #ffbdd4;
    --c-bordeaux: #851826;
    --c-azzurro: #a5ced9;
    --c-verde: #5eaf66;
    --c-giallo: #f7f481;
    --c-blu: #187bea;
    --c-grigio-50: #f7f7f7;
    --c-grigio-100: #efefef;
    --c-grigio-300: #dfdfdf;
    --c-grigio-500: #cfcfcf;
    --c-grigio-700: #868686;

    --on-surface: var(--c-nero);
    --surface: var(--c-bianco);

    --header-h: 6.3125rem;
    --section-space: clamp(4rem, 2.6rem + 6vw, 7.5rem);
    --radius-card: 0.625rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --container-columns: 12;
    --container-gap: 1.25rem;
    --container-column-width: 5.2083rem;
    --container-x-padding: 2rem;

    --form-gap-row: 1.5rem;
    --form-gap-col: 1.5rem;
    --form-field-min-width: 14.375rem;
    --form-checkbox-size: 1.375rem;
    --form-checkbox-bg: var(--c-grigio-50);
    --form-checkbox-border: var(--c-grigio-300);
    --form-checkbox-checked-bg: var(--c-arancio);
    --form-input-bg: var(--c-grigio-50);
    --form-input-border: var(--c-grigio-50);
    --form-input-font-size: 1rem;
    --form-input-weight: 400;
    --form-input-padding-block: 0.8125rem;
    --form-input-padding-inline: 1.5rem;
    --form-label-weight: 400;
    --form-border-radius-input: 0.625rem;
    --form-border-radius-checkbox: 0.4375rem;
    --form-border-radius-radio: 50%;
    --form-label-field-gap: 0.5rem;
    --form-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC44NzUiIGhlaWdodD0iNy4xOTciIHZpZXdCb3g9IjAgMCAxMC44NzUgNy4xOTciPgogIDxwYXRoIGlkPSJUcmFjY2lhdG9fMjA4ODUiIGRhdGEtbmFtZT0iVHJhY2NpYXRvIDIwODg1IiBkPSJNLTE1NjA2LjA3Niw2ODc4LjMwN2wzLjI2MywzLjI2Myw0Ljc4NC00Ljc4NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU2MDcuNDkgLTY4NzUuMzczKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
}

@media (max-width: 768px) {
    :root {
        --container-x-padding: 1.25rem;
        --header-h: 4.5rem;
    }
}

/* ======================================== */
/* TYPOGRAPHY */
/* ======================================== */

.t-display-xl,
.t-display-l,
.t-display-m,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-lead,
.t-body-l-medium,
.t-label,
.t-menu,
.t-tab,
.t-button {
    font-weight: 500;
}

.t-display-xl {
    font-size: clamp(3.5rem, 1.651rem + 7.887vw, 8.75rem);
    line-height: 0.857;
    letter-spacing: -0.06em;
}

.t-display-l {
    font-size: clamp(2.75rem, 1.7375rem + 4.319vw, 5.625rem);
    line-height: 0.967;
    letter-spacing: -0.058em;
}

.t-display-m {
    font-size: clamp(2.5rem, 1.84rem + 2.817vw, 4.375rem);
    line-height: 1;
    letter-spacing: -0.058em;
}

.t-h1 {
    font-size: clamp(2.125rem, 1.817rem + 1.315vw, 3rem);
    line-height: 1.125;
    letter-spacing: -0.04em;
}

.t-h2 {
    font-size: clamp(1.875rem, 1.655rem + 0.939vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.t-h3 {
    font-size: clamp(1.625rem, 1.493rem + 0.563vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.t-h4 {
    font-size: clamp(1.3125rem, 1.246rem + 0.282vw, 1.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.t-lead {
    font-size: clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem);
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.t-body-l,
.t-body-l-medium {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.t-body-m {
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.t-body-m-bold {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.t-label {
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.t-menu {
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.t-tab {
    font-size: 0.9375rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.t-button {
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.t-note {
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

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

.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: 1rem;
}

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

.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: 1rem;
    inset-inline-start: 1rem;
    z-index: 9999;
    inline-size: auto;
    block-size: auto;
    padding: 0.75rem 1.25rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    background-color: var(--on-surface, #000);
    color: var(--surface, #fff);
    border-radius: 0.25rem;
    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;
}

.layers {
    display: grid;
}

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

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

.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;
}

.section {
    padding-block: var(--section-space);
}

.section-head {
    display: grid;
    gap: 1.25rem;
    margin-block-end: clamp(2.5rem, 1.8rem + 3vw, 4.375rem);
}

.section-head > p {
    max-inline-size: 26.25rem;
}

/* Characters: SVG body uses currentColor, so the colour is a plain `color` */
.char {
    display: block;
    color: var(--char-color, var(--c-arancio));
    pointer-events: none;
}

.char svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
}

.char--arancio { --char-color: var(--c-arancio); }
.char--rosa { --char-color: var(--c-rosa); }
.char--bordeaux { --char-color: var(--c-bordeaux); }
.char--azzurro { --char-color: var(--c-azzurro); }
.char--verde { --char-color: var(--c-verde); }
.char--giallo { --char-color: var(--c-giallo); }
.char--blu { --char-color: var(--c-blu); }
.char--grigio { --char-color: var(--c-grigio-500); }

/* Reveal on scroll: progressive enhancement, content is visible without support */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-reveal] {
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        translate: 0 2.5rem;
    }
}

/* ======================================== */
/* BUTTONS */
/* ======================================== */

/* Label scrolls up inside a clipping box and is replaced by an identical copy (::after) */
.btn {
    --_bg: var(--c-nero);
    --_border: var(--c-nero);
    --_fg: var(--c-bianco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.9375rem;
    padding-inline: 2.1875rem;
    border: 2px solid var(--_border);
    border-radius: 6.25rem;
    background-color: var(--_bg);
    color: var(--_fg);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.btn-label {
    display: grid;
    overflow: clip;
    block-size: 1lh;
    line-height: 1;
}

.btn-label > span,
.btn-label::after {
    grid-area: 1 / 1;
    transition: translate 0.45s var(--ease-out);
}

.btn-label::after {
    content: attr(data-label) / "";
    translate: 0 110%;
}

@media (hover: hover) {
    :is(.btn, .btn-text, .has-btn-hover):hover .btn-label > span {
        translate: 0 -110%;
    }

    :is(.btn, .btn-text, .has-btn-hover):hover .btn-label::after {
        translate: 0 0;
    }
}

.btn--small {
    padding-block: 0.625rem;
    padding-inline: 1.5rem;
    font-size: 0.8125rem;
}

.btn--bianco {
    --_bg: var(--c-bianco);
    --_border: var(--c-bianco);
    --_fg: var(--c-nero);
}

.btn--grigio {
    --_bg: var(--c-grigio-500);
    --_border: var(--c-grigio-500);
    --_fg: var(--c-nero);
}

.btn--arancio {
    --_bg: var(--c-arancio);
    --_border: var(--c-arancio);
    --_fg: var(--c-bianco);
}

.btn--outline {
    --_bg: var(--c-bianco);
    --_border: var(--c-nero);
    --_fg: var(--c-nero);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Text button: 13px with a fixed underline, same label scroll */
.btn-text {
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    padding-block-end: 0.25rem;
    border-block-end: 1px solid currentColor;
    cursor: pointer;
}

.btn-text--grigio {
    color: var(--c-grigio-500);
}

/* Round button 52×52: arrow or plus/minus */
.btn-round {
    --_bg: var(--c-nero);
    --_border: var(--c-nero);
    --_fg: var(--c-bianco);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border: 2px solid var(--_border);
    border-radius: 50%;
    background-color: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
}

.btn-round--bianco {
    --_bg: var(--c-bianco);
    --_border: var(--c-grigio-100);
    --_fg: var(--c-nero);
}

.btn-round--grigio {
    --_bg: var(--c-grigio-100);
    --_border: var(--c-grigio-100);
    --_fg: var(--c-nero);
}

.btn-round--arancio {
    --_bg: var(--c-arancio);
    --_border: var(--c-arancio);
    --_fg: var(--c-bianco);
}

.btn-round--outline {
    --_bg: transparent;
    --_border: var(--c-nero);
    --_fg: var(--c-nero);
}

.btn-round svg {
    overflow: visible;
}

/* Arrow: default shows only the tip, on hover the shaft grows and the tip slides */
.icon-arrow .icon-arrow-shaft {
    transform-origin: right center;
    transform-box: fill-box;
    scale: 0.1 1;
    transition: scale 0.4s var(--ease-out);
}

.icon-arrow .icon-arrow-tip {
    transition: translate 0.4s var(--ease-out);
}

@media (hover: hover) {
    :is(.btn-round, .has-arrow-hover):hover .icon-arrow-shaft {
        scale: 1 1;
    }

    :is(.btn-round, .has-arrow-hover):hover .icon-arrow-tip {
        translate: 3px 0;
    }
}

/* Plus/minus: the vertical bar folds into the horizontal one when open */
.icon-plus .icon-plus-v {
    transform-origin: center;
    transform-box: fill-box;
    transition: scale 0.35s var(--ease-out);
}

[aria-expanded="true"] .icon-plus .icon-plus-v,
details[open] > summary .icon-plus .icon-plus-v {
    scale: 1 0;
}

/* ======================================== */
/* FORMS / 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);
    border: 2px solid var(--form-checkbox-border);
    flex-shrink: 0;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

input[type="checkbox"] {
    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);
    border-color: var(--form-checkbox-checked-bg);
    background-image: var(--form-icon-check);
    background-repeat: no-repeat;
    background-position: center;
}

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

input:is([type="text"], [type="number"], [type="email"], [type="tel"]),
.wpcf7-styled select,
.wpcf7-styled textarea {
    inline-size: 100%;
    min-block-size: 3.125rem;
    padding-block: var(--form-input-padding-block);
    padding-inline: var(--form-input-padding-inline);
    border: 2px 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);
    letter-spacing: -0.03em;
    outline: none;
    transition: border-color 0.2s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--c-grigio-700);
}

.wpcf7-styled textarea {
    block-size: 9.375rem;
    padding-block: 1.125rem;
    resize: vertical;
}

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(--c-nero);
}

.wpcf7-styled .wpcf7-not-valid {
    border-color: var(--c-arancio);
}

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

.wpcf7-styled form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--form-gap-row);
    column-gap: var(--form-gap-col);
}

.wpcf7-styled form > :is(p, div):not(.form-field) {
    grid-column: 1 / -1;
}

.wpcf7-styled .form-field--wide {
    grid-column: 1 / -1;
}

.wpcf7-styled .form-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 3.125rem;
    row-gap: 1.5rem;
}

.wpcf7-styled .form-footer .btn {
    inline-size: 100%;
}

.wpcf7-styled br,
.wpcf7-styled .wpcf7-spinner {
    display: none;
}

.wpcf7-styled .wpcf7-not-valid-tip {
    font-size: 0.75rem;
    margin-block-start: 0.25rem;
    color: var(--c-arancio);
}

.wpcf7-styled .wpcf7-acceptance label {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

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

.wpcf7-styled .wpcf7-acceptance a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

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

.wpcf7-styled form.sent .wpcf7-response-output {
    background-color: rgb(from var(--c-verde) r g b / 0.15);
    border-color: var(--c-verde);
}

.wpcf7-styled form:is(.invalid, .failed, .aborted, .spam) .wpcf7-response-output {
    border-color: var(--c-arancio);
}

@media (max-width: 640px) {
    .wpcf7-styled form,
    .wpcf7-styled .form-footer {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    block-size: var(--header-h);
    border-block-end: 1px solid rgb(0 0 0 / 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 0.3s ease;
}

.site-header.is-scrolled {
    background-color: rgb(255 255 255 / 0.75);
}

.site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    block-size: 100%;
    padding-inline: clamp(1.25rem, 3.47vw, 3.125rem);
}

.site-header-logo {
    display: block;
    inline-size: 10.625rem;
    --logo-accent: var(--c-arancio);
}

.site-header-logo svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.site-header-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.875rem;
}

.menu-list {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.site-header-end .menu-list {
    gap: 1.875rem;
}

.menu-list a {
    position: relative;
    display: inline-block;
    padding-block: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.menu-list a::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -0.125rem;
    inline-size: 100%;
    block-size: 2px;
    background-color: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.35s var(--ease-out);
}

.menu-list a:hover::after,
.menu-list .current-menu-item > a::after,
.menu-list .current-menu-ancestor > a::after,
.menu-list a[aria-current="page"]::after {
    scale: 1 1;
}

.site-header-toggle {
    display: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border-radius: 50%;
    background-color: var(--c-nero);
    color: var(--c-bianco);
}

.site-header-toggle svg {
    inline-size: 1.125rem;
}

.mobile-menu {
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    padding: calc(var(--header-h) + 2rem) var(--container-x-padding) 2.5rem;
    border: none;
    background-color: var(--c-giallo);
    color: var(--c-nero);
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    opacity: 0;
    translate: 0 -1.5rem;
    transition-property: opacity, translate, display, overlay;
    transition-duration: 0.35s;
    transition-timing-function: var(--ease-out);
    transition-behavior: allow-discrete;
}

.mobile-menu:popover-open {
    display: flex;
    opacity: 1;
    translate: 0 0;

    @starting-style {
        opacity: 0;
        translate: 0 -1.5rem;
    }
}

.mobile-menu nav {
    display: grid;
    gap: 1.25rem;
}

.mobile-menu .menu-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.mobile-menu .menu-list a {
    font-size: 2.25rem;
    letter-spacing: -0.04em;
}

.mobile-menu-close {
    position: absolute;
    inset-block-start: calc((var(--header-h) - 2.75rem) / 2);
    inset-inline-end: var(--container-x-padding);
    inline-size: 2.75rem;
    block-size: 2.75rem;
}

.mobile-menu-close .icon-plus {
    rotate: 45deg;
}

@media (max-width: 1024px) {
    .site-header-inner {
        grid-template-columns: auto 1fr;
    }

    .site-header-start,
    .site-header-end .menu-list {
        display: none;
    }

    .site-header-logo {
        inline-size: 7.5rem;
    }

    .site-header-end {
        gap: 0.75rem;
    }

    .site-header-toggle {
        display: inline-grid;
    }
}

@media (max-width: 480px) {
    .site-header-end > .btn {
        display: none;
    }
}

/* ======================================== */
/* PAGE HERO (coloured banner with curved bottom edge) */
/* ======================================== */

.page-hero {
    --hero-bg: var(--c-giallo);
    --curve-h: 3.0556vw;
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: calc(var(--header-h) + clamp(4rem, 2.5rem + 6vw, 7.5rem)) calc(clamp(4rem, 2.5rem + 6vw, 7.5rem) + var(--curve-h));
    background-color: var(--hero-bg);
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--curve-h) + 1px) no-repeat,
        url("assets/images/curve.svg") bottom / 100% var(--curve-h) no-repeat;
}

.page-hero-title {
    position: relative;
    z-index: 1;
    text-align: center;
    text-wrap: balance;
}

.page-hero-inline-char {
    inline-size: 1.367em;
    margin-inline: 0.12em;
}

.page-hero-char {
    position: absolute;
    z-index: 0;
}

.page-hero-char--right {
    inline-size: clamp(8rem, 20.4vw, 18.375rem);
    inset-inline-end: -4.9%;
    inset-block-end: -4.5rem;
    rotate: -18.22deg;
}

.page-hero-char--left {
    inline-size: clamp(7rem, 15vw, 14.5rem);
    inset-inline-start: 2.5%;
    inset-block-end: -2.5rem;
    rotate: -8deg;
}

@media (max-width: 768px) {
    .page-hero-char--right {
        inset-block-end: -3rem;
    }

    .page-hero-char--left {
        inset-block-end: -2rem;
    }
}

/* ======================================== */
/* CARDS */
/* ======================================== */

.card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.875rem;
    border-radius: var(--radius-card);
    background-color: var(--c-grigio-100);
}

/* ======================================== */
/* FAQ (details/summary accordion, exclusive via `name`) */
/* ======================================== */

.faq {
    display: grid;
    gap: 3.125rem;
    padding-block: 5rem 7.5rem;
}

.faq-wrap {
    position: relative;
    isolation: isolate;
    max-inline-size: 50.4375rem;
}

.faq--centered .faq-wrap {
    inline-size: 100%;
    margin-inline: auto;
}

.faq-char {
    position: absolute;
    z-index: -1;
    inset-inline-start: calc(100% - 2.75rem);
    inset-block-start: 7.25rem;
    inline-size: 11.0625rem;
    rotate: 90deg;
}

.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    border-radius: 0.75rem;
    background-color: var(--c-grigio-50);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.375rem 2.25rem;
    list-style: none;
    cursor: pointer;
    transition: padding 0.35s var(--ease-out);
}

.faq-item[open] summary {
    padding-block: 1.75rem 1.25rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .btn-round {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.faq-item[open] summary .btn-round {
    --_bg: var(--c-arancio);
    --_border: var(--c-arancio);
}

.faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size 0.45s var(--ease-out),
        content-visibility 0.45s allow-discrete;
}

.faq-item[open]::details-content {
    block-size: auto;
}

.faq-answer {
    display: grid;
    justify-items: start;
    gap: 1.875rem;
    padding: 0 2.25rem 2rem;
}

.faq-answer .rich-text > *:not(:last-child) {
    margin-block-end: 0.875rem;
}

@media (max-width: 1100px) {
    .faq-char {
        display: none;
    }
}

@media (max-width: 640px) {
    .faq-item summary {
        padding-inline: 1.25rem;
    }

    .faq-answer {
        padding-inline: 1.25rem;
    }
}

/* ======================================== */
/* CTA + FOOTER */
/* ======================================== */

.cta {
    position: relative;
    margin-block-start: var(--section-space);
    color: var(--c-nero);
}

.cta-top {
    position: relative;
    display: block;
    color: var(--c-giallo);
    margin-block-end: -7%;
}

.cta-top svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.cta-body {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3.75rem;
    padding-block: 3.75rem 7.5rem;
    background-color: var(--c-giallo);
    text-align: center;
}

.cta-title {
    max-inline-size: 69.375rem;
    text-wrap: balance;
}

.cta-text {
    max-inline-size: 26.6875rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.cta-text p + p {
    margin-block-start: 1lh;
}

.cta-face .cta-pupil {
    transition: translate 0.3s ease-out;
}

.site-footer {
    padding-block: 6.25rem 1.875rem;
    border-block-start: 1px solid rgb(0 0 0 / 0.1);
    background-color: var(--c-giallo);
    color: var(--c-nero);
}

.site-footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.75rem;
    margin-block-end: 6.25rem;
}

.site-footer-logo {
    display: block;
    inline-size: 10.625rem;
    --logo-accent: var(--c-verde);
}

.site-footer-logo svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.site-footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 13.9rem);
    gap: 4.3125rem;
}

.site-footer-col {
    display: grid;
    align-content: start;
    gap: 1.875rem;
}

.site-footer-col ul {
    display: grid;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.site-footer-col a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer-social {
    display: flex;
    gap: 1.875rem;
}

.site-footer-social a {
    display: block;
    inline-size: 1.875rem;
    color: var(--c-nero);
    transition: color 0.2s ease;
}

.site-footer-social a:hover {
    color: var(--c-arancio);
}

.site-footer-social svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

@media (max-width: 900px) {
    .site-footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
        inline-size: 100%;
    }
}

@media (max-width: 768px) {
    .cta-body {
        gap: 2.5rem;
        padding-block: 2.5rem 5rem;
    }

    .site-footer {
        padding-block-start: 4rem;
    }

    .site-footer-top {
        margin-block-end: 3.75rem;
    }
}

/* ======================================== */
/* CONTACT DIALOG */
/* ======================================== */

.contact-dialog {
    inline-size: min(55rem, 100% - 2rem);
    max-inline-size: none;
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    border: none;
    border-radius: 0.625rem;
    background-color: var(--c-bianco);
    color: var(--c-nero);
    overflow: hidden;
    opacity: 0;
    translate: 0 2rem;
    scale: 0.97;
    transition-property: opacity, translate, scale, display, overlay;
    transition-duration: 0.4s;
    transition-timing-function: var(--ease-out);
    transition-behavior: allow-discrete;
}

.contact-dialog::backdrop {
    background-color: rgb(207 207 207 / 0);
    backdrop-filter: blur(0);
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 0.4s;
    transition-behavior: allow-discrete;
}

.contact-dialog[open]:not([data-closing]) {
    opacity: 1;
    translate: 0 0;
    scale: 1;

    @starting-style {
        opacity: 0;
        translate: 0 2rem;
        scale: 0.97;
    }
}

.contact-dialog[open]:not([data-closing])::backdrop {
    background-color: rgb(207 207 207 / 0.75);
    backdrop-filter: blur(12px);

    @starting-style {
        background-color: rgb(207 207 207 / 0);
        backdrop-filter: blur(0);
    }
}

.contact-dialog-scroll {
    position: relative;
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5rem 5rem 3.75rem 6.25rem;
}

.contact-dialog-title {
    margin-block-end: 3.75rem;
}

.contact-dialog-clip {
    position: absolute;
    inset: 0;
    overflow: clip;
    pointer-events: none;
}

.contact-dialog-char {
    position: absolute;
    inset-block-start: 5.175rem;
    inset-inline-end: 0;
    inline-size: 5.855rem;
    rotate: -37.59deg;
}

.contact-dialog-close {
    position: absolute;
    z-index: 1;
    inset-block-start: 1.1875rem;
    inset-inline-end: 1.1875rem;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: none;
    rotate: 45deg;
}

.contact-dialog-close svg {
    inline-size: 0.875rem;
}

@media (max-width: 768px) {
    .contact-dialog-scroll {
        padding: 4.5rem 1.5rem 2.5rem;
    }

    .contact-dialog-title {
        margin-block-end: 2.5rem;
    }

    .contact-dialog-char {
        inline-size: 3.5rem;
        inset-block-start: 3.5rem;
        inset-inline-end: 1rem;
    }
}

/* ======================================== */
/* SHARED SECTIONS */
/* ======================================== */

.t-medium {
    font-weight: 500;
}

/* Character inline in a title, sized on the font-size */
.title-char {
    display: inline-block;
    inline-size: 1.41em;
    margin-block: -0.4em;
    vertical-align: middle;
}

.section-title {
    display: grid;
    gap: 1.875rem;
    padding-block: 3.75rem 1.875rem;
}

.section-title p {
    max-inline-size: 38rem;
}

.bullet-list {
    display: grid;
    gap: 0.3125rem;
}

.bullet-list li {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}

.bullet-list li::before {
    content: "";
    flex-shrink: 0;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background-color: var(--c-arancio);
    translate: 0 -0.1em;
}

.media-text {
    display: grid;
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
    align-items: center;
    gap: 5rem;
    padding-block: clamp(5rem, 3.5rem + 5vw, 9.375rem) clamp(3.75rem, 3rem + 3vw, 6.25rem);
}

.media-text-media {
    aspect-ratio: 600 / 453;
    border-radius: var(--radius-card);
}

.media-text-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.1);
}

.media-text-body {
    display: grid;
    justify-items: start;
    gap: 2.5rem;
}

.media-text-texts {
    display: grid;
    gap: 1.875rem;
}

@media (max-width: 900px) {
    .media-text {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* Carousel dots (generated by main.js) */
.carousel-dots {
    display: flex;
    gap: 0.5rem;
}

.carousel-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.carousel-dot[aria-current="true"] {
    opacity: 1;
}

/* ======================================== */
/* HOME */
/* ======================================== */

.home-hero {
    padding-block: calc(var(--header-h) + clamp(4rem, 2rem + 6vw, 8.125rem)) 3.75rem;
    text-align: center;
}

.home-hero-title {
    max-inline-size: 69.375rem;
    margin-inline: auto;
}

.home-hero-char {
    inline-size: 1.41em;
    margin-inline: 0.05em;
}

/* Totem with a swappable screen and the "customize" slider */
.home-totem {
    position: relative;
    padding-block: 3.75rem 6.25rem;
}

.home-totem-device {
    position: relative;
    inline-size: min(31.25rem, 80vw);
    margin-inline: auto;
}

.home-totem-mockup {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.home-totem-screen {
    position: absolute;
    inset: 2.5% 8.99% 29.21%;
    overflow: hidden;
    border-radius: 0.625rem;
    z-index: 2;
    background-color: var(--c-rosa);
}

.home-totem-screen-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.home-totem-screen-img[aria-hidden="true"] {
    opacity: 0;
}

.home-totem-side {
    position: absolute;
    inset-block-start: 22.75rem;
    inset-inline: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
}

.home-totem-side > * {
    pointer-events: auto;
}

.home-totem-text {
    max-inline-size: 13rem;
    margin-block-start: 2.5rem;
    font-weight: 500;
}

.home-totem-customizer {
    display: grid;
    justify-items: end;
    gap: 1.75rem;
    text-align: end;
}

.home-totem-customizer label {
    max-inline-size: 10rem;
    cursor: default;
}

.home-totem-range {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 10rem;
    block-size: 4.5rem;
    padding-inline: 1.875rem;
    border-radius: var(--radius-card);
    background-color: var(--c-grigio-100);
}

/* tick marks, one per step */
.home-totem-range::before {
    content: "";
    position: absolute;
    inset-inline: calc(1.875rem + 5px);
    inset-block-start: 50%;
    block-size: 0.5rem;
    translate: 0 -50%;
    background: repeating-linear-gradient(to right, var(--c-nero) 0 2px, transparent 2px calc((100% - 2px) / var(--steps)));
    background-size: calc(100% + (100% - 2px) / var(--steps)) 100%;
    pointer-events: none;
}

.home-totem-range input[type="range"] {
    position: relative;
    appearance: none;
    inline-size: 100%;
    block-size: 1.8125rem;
    background: transparent;
}

.home-totem-range input[type="range"]::-webkit-slider-runnable-track {
    block-size: 1.5px;
    background-color: var(--c-nero);
}

.home-totem-range input[type="range"]::-moz-range-track {
    block-size: 1.5px;
    background-color: var(--c-nero);
}

.home-totem-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 0.6875rem;
    block-size: 1.8125rem;
    margin-block-start: -0.8594rem;
    border-radius: 3px;
    background-color: var(--c-arancio);
    cursor: grab;
}

.home-totem-range input[type="range"]::-moz-range-thumb {
    inline-size: 0.6875rem;
    block-size: 1.8125rem;
    border: none;
    border-radius: 3px;
    background-color: var(--c-arancio);
    cursor: grab;
}

@media (max-width: 900px) {
    .home-totem {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .home-totem-side {
        position: static;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
        order: -1;
    }

    .home-totem-text {
        margin: 0;
        max-inline-size: 20rem;
    }

    .home-totem-customizer {
        justify-items: center;
        text-align: center;
        order: 2;
    }

    .home-totem-device {
        order: 1;
    }
}

/* "I nostri giochi" marquee + game cards */
.home-games {
    padding-block-end: 3.75rem;
}

.marquee {
    overflow: clip;
    padding-block: 6.25rem 1.875rem;
}

.marquee-track {
    display: flex;
    inline-size: max-content;
    animation: marquee 28s linear infinite;
}

.marquee-item {
    padding-inline-end: 0.35em;
    white-space: nowrap;
}

.marquee-char {
    inline-size: 1.264em;
    margin-inline: 0.15em;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee {
    to {
        translate: -50% 0;
    }
}

.home-games-text {
    max-inline-size: 37.5rem;
    padding-block: 1.875rem 2.5rem;
    font-weight: 500;
}

.home-games-label {
    padding-block: 1.875rem 3.75rem;
}

.home-games .game-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 19.375rem));
    justify-content: center;
    gap: 1.875rem;
    max-inline-size: calc(83.125rem + 2 * var(--container-x-padding));
}

.game-card-link {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
}

.game-card-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    aspect-ratio: 310 / 420;
    padding: 1.875rem 1.25rem;
    overflow: clip;
    border-radius: var(--radius-card);
    background-color: var(--card-bg, var(--c-rosa));
    transition: border-radius 0.4s var(--ease-out);
}

.game-card-img,
.game-card-video {
    position: absolute;
    inset-inline: 0;
    z-index: -1;
}

.game-card-img {
    inset-block-start: 3.5%;
    inline-size: 100%;
    block-size: auto;
    transition: translate 0.5s var(--ease-out);
}

.game-card-video {
    inset-block: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card-logo {
    inline-size: 5.625rem;
    color: var(--c-nero);
}

.game-card-logo svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.game-card-title {
    text-align: center;
    text-wrap: balance;
}

.game-card-title.is-light {
    color: var(--c-bianco);
}

.game-card-btn {
    opacity: 0;
    translate: 0 -0.5rem;
    transition:
        opacity 0.3s ease,
        translate 0.3s var(--ease-out);
}

.game-card:is(:hover, :focus-within) .game-card-btn {
    opacity: 1;
    translate: 0 0;
}

.game-card:is(:hover, :focus-within) .game-card-video {
    opacity: 1;
}

.game-card:is(:hover, :focus-within) .game-card-img {
    translate: 0 -3%;
}

@media (max-width: 1100px) {
    .home-games .game-cards {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(19.375rem, 72vw);
        justify-content: start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--container-x-padding);
        scrollbar-width: none;
        padding-block-end: 0.5rem;
    }

    .home-games .game-cards > li {
        scroll-snap-align: start;
    }

    .game-card-btn {
        opacity: 1;
        translate: 0 0;
    }
}

/* Two paths: library vs custom */
.home-paths {
    display: grid;
    grid-template-columns: minmax(0, 393fr) minmax(0, 797fr);
    gap: 1.875rem;
    padding-block: 3.75rem;
}

.path-card {
    position: relative;
    overflow: clip;
    border-radius: 0.9375rem;
    min-block-size: 28.3125rem;
}

.path-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
}

.path-card--library {
    padding: 3.125rem;
    background-color: var(--c-grigio-100);
}

.path-card-char {
    position: absolute;
    inset-block-start: 19.625rem;
    inset-inline-start: 14.625rem;
    inline-size: 10.157rem;
    rotate: -12.24deg;
    transition: rotate 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}

.path-card--library:hover .path-card-char {
    rotate: 0deg;
    translate: 0 -0.75rem;
}

.path-card--custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24.5625rem);
    gap: 1.25rem;
    padding-inline-start: 3.125rem;
    background-color: var(--c-rosa);
}

.path-card--custom .path-card-body {
    justify-content: space-between;
    padding-block: 3.125rem;
    padding-inline-end: 1.875rem;
}

.path-card-texts {
    display: grid;
    gap: 1.875rem;
}

.path-card-media {
    block-size: 100%;
}

.path-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.1);
}

@media (max-width: 1024px) {
    .home-paths {
        grid-template-columns: minmax(0, 1fr);
    }

    .path-card--library {
        padding-block-end: 12rem;
    }

    .path-card-char {
        inset-block-start: auto;
        inset-block-end: -2rem;
        inset-inline-start: auto;
        inset-inline-end: 2rem;
    }
}

@media (max-width: 640px) {
    .path-card--library {
        padding: 2rem 1.5rem 11rem;
    }

    .path-card--custom {
        grid-template-columns: minmax(0, 1fr);
        padding-inline-start: 0;
    }

    .path-card--custom .path-card-body {
        padding: 2rem 1.5rem 0;
        gap: 1.875rem;
    }

    .path-card-media {
        aspect-ratio: 4 / 3;
    }
}

/* Case studies: full-bleed slides with a coloured card */
.cases {
    position: relative;
    color: var(--c-bianco);
    margin-block-start: 1.875rem;
}

.cases-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.cases-track::-webkit-scrollbar {
    display: none;
}

.case {
    position: relative;
    display: grid;
    align-items: center;
    flex: 0 0 100%;
    min-block-size: clamp(34rem, 25rem + 25vw, 47.625rem);
    padding-block: 4rem 6rem;
    scroll-snap-align: start;
}

.case-media.img-wrapper {
    position: absolute;
    inset: 0;
}

.case-content {
    position: relative;
}

.case-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    inline-size: min(23.0625rem, 100%);
    min-block-size: 28.3125rem;
    padding: 2.5rem;
    border-radius: var(--radius-card);
    background-color: var(--case-bg, var(--c-verde));
}

.case-card-head {
    display: grid;
    gap: 1.25rem;
}

.cases-controls {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    pointer-events: none;
}

.cases-controls .carousel-dots {
    position: absolute;
    inset-block-end: 3.75rem;
    pointer-events: auto;
}

.cases-next {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--container-x-padding);
    translate: 0 -50%;
    pointer-events: auto;
}

.cases-next[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .case {
        align-items: end;
    }

    .case-card {
        min-block-size: 0;
        padding: 1.5rem;
    }

    .cases-next {
        inset-block-start: 2rem;
        translate: none;
    }

    .cases-controls .carousel-dots {
        inset-block-end: 2.5rem;
    }
}

/* ======================================== */
/* INFO CARDS (grey/white boxes with title + text) */
/* ======================================== */

.info-cards {
    display: grid;
    gap: 1.25rem;
}

.info-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card {
    display: grid;
    align-content: start;
    gap: 1.875rem;
    padding: 2.5rem;
    border-radius: 0.9375rem;
    background-color: var(--c-grigio-100);
}

.info-card.is-highlight {
    background-color: var(--c-giallo);
}

@media (max-width: 1100px) {
    .info-cards--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .info-cards--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .info-cards--2,
    .info-cards--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .info-card {
        padding: 1.875rem 1.5rem;
        gap: 1.25rem;
    }
}

/* ======================================== */
/* COME FUNZIONA */
/* ======================================== */

/* "Il totem, dal vero" */
.totem-cards {
    display: grid;
    grid-template-columns: minmax(0, 20.125rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem 3.75rem;
    padding-block: 7.5rem 5rem;
}

.totem-cards-media {
    aspect-ratio: 322 / 535;
    border-radius: 0.9375rem;
}

.totem-cards-body {
    display: grid;
    gap: 3.75rem;
}

.totem-cards-head {
    display: grid;
    gap: 1.875rem;
}

.totem-cards-head p {
    max-inline-size: 38rem;
}

.totem-cards-foot {
    display: grid;
    gap: 2.5rem;
}

.totem-cards-note {
    max-inline-size: 18.125rem;
}

@media (max-width: 900px) {
    .totem-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .totem-cards-media {
        inline-size: min(20.125rem, 70%);
    }
}

/* "Quattro configurazioni" (global block) */
.configurations {
    display: grid;
    justify-items: start;
    gap: 3.75rem;
    padding-block: 5rem;
}

.configurations-head {
    display: grid;
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
    gap: 1.25rem 7.6875rem;
    inline-size: 100%;
}

.configurations-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.625rem;
    inline-size: 100%;
}

.configuration {
    display: grid;
    align-content: start;
    gap: 1.875rem;
    padding-block: 1.875rem;
    padding-inline-end: 1.875rem;
}

.configuration-visual {
    position: relative;
    display: flex;
    align-items: center;
    block-size: 9.0625rem;
}

.configuration-img {
    inline-size: auto;
    block-size: 7.6875rem;
    box-shadow: 2px 2px 15px rgb(0 0 0 / 0.1);
}

.configuration-img.is-blend {
    block-size: 100%;
    box-shadow: none;
    mix-blend-mode: darken;
}

.configuration-visual.is-stack .configuration-img {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    block-size: 7.5625rem;
    translate: calc(var(--i) * 2.25rem) -50%;
    rotate: calc(-6deg + var(--i) * 3deg);
    box-shadow: 2px 2px 10px rgb(0 0 0 / 0.15);
    transition: translate 0.5s var(--ease-out), rotate 0.5s var(--ease-out);
}

.configuration:hover .configuration-visual.is-stack .configuration-img {
    translate: calc(var(--i) * 2.75rem) -50%;
    rotate: calc(-9deg + var(--i) * 5deg);
}

.configuration-texts {
    display: grid;
    gap: 1.25rem;
}

.configuration--custom {
    align-content: space-between;
    padding: 2.5rem;
    border-radius: 0.9375rem;
    background-color: var(--c-arancio);
}

.configuration-custom-label {
    color: var(--c-bianco);
}

@media (max-width: 1100px) {
    .configurations-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .configurations-head {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .configurations-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .configuration--custom {
        min-block-size: 18rem;
        padding: 1.875rem 1.5rem;
    }
}

/* "Lo stesso gioco cambia faccia" */
.brand-cards {
    display: grid;
    justify-items: start;
    gap: 3.75rem;
    padding-block: 5rem 7.5rem;
}

.brand-cards-title {
    max-inline-size: 37.5rem;
}

.brand-cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    inline-size: 100%;
}

.brand-cards-media {
    min-block-size: 23.75rem;
    border-radius: var(--radius-card);
    background-color: var(--c-grigio-500);
}

.brand-cards-grid .info-card {
    min-block-size: 11.25rem;
}

@media (max-width: 900px) {
    .brand-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-cards-media {
        min-block-size: 0;
        aspect-ratio: 600 / 380;
    }
}

/* "Cosa resta dopo l'evento" */
.feature-cards {
    padding-block: 7.5rem;
    background-color: var(--c-grigio-100);
}

.feature-cards-head {
    display: grid;
    gap: 1.875rem;
    margin-block-end: 1.875rem;
}

.feature-cards-head p {
    max-inline-size: 47.5rem;
}

.feature-cards .info-card:not(.is-highlight) {
    background-color: var(--c-bianco);
}

@media (max-width: 768px) {
    .feature-cards {
        padding-block: 4.5rem;
    }
}

/* ======================================== */
/* AGENZIE & PARTNER */
/* ======================================== */

/* "3 modi di lavorare insieme": cards + side photo */
.cards-photo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20.125rem);
    align-items: center;
    gap: 3.75rem 1.25rem;
    padding-block: 7.5rem;
}

.cards-photo-title,
.cards-photo-list,
.cards-photo-foot {
    grid-column: 1;
}

.cards-photo-media {
    grid-column: 2;
    grid-row: 1 / span 3;
    aspect-ratio: 322 / 535;
    border-radius: 0.9375rem;
}

.cards-photo-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.cards-photo-caption {
    max-inline-size: 18.125rem;
    text-align: end;
}

.info-card--labelled {
    align-content: space-between;
}

.info-card-head {
    display: grid;
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .cards-photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .cards-photo-media {
        grid-column: 1;
        grid-row: auto;
        inline-size: min(20.125rem, 70%);
    }

    .cards-photo-caption {
        text-align: start;
    }
}

/* "Chi fa cosa": grey card + orange card with photo */
.duo-cards {
    display: grid;
    grid-template-columns: minmax(0, 393fr) minmax(0, 797fr);
    gap: 1.875rem;
    padding-block-end: 7.5rem;
}

.duo-card {
    min-block-size: 29.25rem;
    overflow: clip;
    border-radius: 0.9375rem;
}

.duo-card-body {
    display: grid;
    align-content: center;
    gap: 1.875rem;
}

.duo-card--grey {
    display: grid;
    padding: 3.125rem;
    background-color: var(--c-grigio-100);
}

.duo-card--orange {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24.5625rem);
    gap: 1.25rem;
    padding-inline-start: 3.125rem;
    background-color: var(--c-arancio);
}

.duo-card--orange .duo-card-body {
    padding-block: 3.125rem;
    padding-inline-end: 1.875rem;
}

.duo-card .bullet-list {
    gap: 0.625rem;
}

.bullet-list--light li::before {
    background-color: var(--c-bianco);
}

.duo-card-media {
    block-size: 100%;
}

@media (max-width: 1024px) {
    .duo-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .duo-card {
        min-block-size: 0;
    }
}

@media (max-width: 640px) {
    .duo-card--grey {
        padding: 2rem 1.5rem;
    }

    .duo-card--orange {
        grid-template-columns: minmax(0, 1fr);
        padding-inline-start: 0;
    }

    .duo-card--orange .duo-card-body {
        padding: 2rem 1.5rem 0;
    }

    .duo-card-media {
        aspect-ratio: 4 / 3;
    }
}

/* "Il Margine": coloured box with CTA and character */
.box-cta-inner {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 1.875rem;
    padding: 5rem 6.875rem;
    overflow: clip;
    border-radius: 1.25rem;
    background-color: var(--box-bg, var(--c-rosa));
}

.box-cta-texts {
    display: grid;
    gap: 1.875rem;
    max-inline-size: 43.5625rem;
}

.box-cta-texts p + p {
    margin-block-start: 1lh;
}

.box-cta-char {
    position: absolute;
    inset-inline-start: calc(100% - 15.625rem);
    inset-block-start: 14.3125rem;
    inline-size: 15.77rem;
    rotate: -18.22deg;
}

@media (max-width: 900px) {
    .box-cta-inner {
        padding: 3rem 1.5rem 9rem;
    }

    .box-cta-char {
        inset-block-start: auto;
        inset-block-end: -5rem;
        inset-inline-start: auto;
        inset-inline-end: -1.5rem;
        inline-size: 11rem;
    }
}

/* ======================================== */
/* GIOCO (single) */
/* ======================================== */

.game-hero.page-hero {
    padding-block: var(--header-h) calc(var(--curve-h) + 1.5rem);
}

.game-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 18.125rem) minmax(0, 31.25rem) minmax(0, 18.125rem);
    justify-content: space-between;
    align-items: start;
    gap: 2rem;
}

.game-hero-intro,
.game-hero-specs {
    position: sticky;
    inset-block-start: var(--header-h);
    padding-block: 7.5rem;
}

.game-hero-intro {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
}

.game-hero-device {
    position: relative;
    margin-block-start: 7.5rem;
}

.game-hero-specs {
    display: grid;
    gap: 0.625rem;
}

.spec {
    display: grid;
    gap: 0.3125rem;
    padding-block-end: 0.625rem;
    border-block-end: 1px solid rgb(0 0 0 / 0.1);
}

.spec summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 0.3125rem;
    list-style: none;
    cursor: pointer;
}

.spec summary::-webkit-details-marker {
    display: none;
}

.spec-label {
    display: flex;
    align-items: center;
    min-block-size: 1.875rem;
}

.spec-toggle {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.spec-value {
    grid-column: 1 / -1;
}

.spec::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size 0.4s var(--ease-out),
        content-visibility 0.4s allow-discrete;
}

.spec[open]::details-content {
    block-size: auto;
}

.spec-details {
    list-style: disc;
    padding-inline-start: 1.5rem;
    padding-block-start: 0.3125rem;
}

@media (max-width: 1100px) {
    .game-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2.5rem;
    }

    .game-hero-intro,
    .game-hero-specs {
        position: static;
        padding-block: 0;
    }

    .game-hero-intro {
        grid-column: 1 / -1;
        padding-block-start: 4rem;
    }

    .game-hero-device {
        margin-block-start: 2.5rem;
    }

    .game-hero-specs {
        align-self: center;
    }
}

@media (max-width: 640px) {
    .game-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .game-hero-device {
        inline-size: min(20rem, 80%);
        justify-self: center;
    }
}

/* Photo gallery carousel */
.gallery {
    --track-pad: max(var(--container-x-padding), calc((100% - 76.25rem) / 2));
    padding-block: 7.5rem 5rem;
}

.gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-block-end: 3.75rem;
}

.gallery-nav {
    display: flex;
    gap: 0.625rem;
}

.gallery-prev svg {
    rotate: 180deg;
}

.gallery-nav .btn-round:disabled {
    opacity: 0.3;
    cursor: default;
}

.gallery-track {
    display: flex;
    gap: 1.875rem;
    padding-inline: var(--track-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--track-pad);
    scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    flex: 0 0 min(19.375rem, 75vw);
    aspect-ratio: 310 / 420;
    overflow: clip;
    border-radius: var(--radius-card);
    background-color: var(--c-grigio-300);
    scroll-snap-align: start;
}

.gallery-item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* -----------------------------------
==============================================================================
#IUBENDA
==============================================================================
----------------------------------- */


body #iubenda-cs-banner *,
body #iubenda-cs-banner .iubenda-banner-content:not(.iubenda-custom-content) *,
body #iubenda-cs-banner [class*=" iub"],
body #iubenda-cs-banner [class^="iub"] {
    font-family: "Elza Text" !important;
    color: #000 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

body.menu-open .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float][data-tp-float="bottom-left"] {
    display: none !important;
}

body #iubenda-cs-banner label {
    margin-bottom: 0;
}

body #purposes-content-container .purposes-header .purposes-header-text,
body #purposes-content-container .purposes-section-header-text {
    font-size: 14px !important;
}

body #purposes-content-container .purposes-item .purposes-item-body,
body #purposes-content-container .purposes-item .purposes-item-title .purposes-item-title-btn {
    font-weight: 500 !important;
}

body #purposes-content-container .purposes-section-header-title {
    line-height: 1.4 !important;
    padding-bottom: 7px !important;
}

body #purposes-content-container .purposes-header {
    padding-top: 0 !important;
}

body #iubenda-iframe .purposes-header-right button {
    background-color: var(--c-arancio) !important;
    color: white !important;
    border: 0.5px solid var(--c-arancio) !important;
    box-shadow: none !important;
    opacity: 1;
    border-radius: 64px !important;
}

body #iubenda-iframe .purposes-header-right button:hover {
    opacity: 0.8;
    background-color: var(--c-arancio) !important;
    color: white !important;
    border: 0.5px solid var(--c-arancio) !important;
}

body #iubenda-iframe .iub-toggle-checkbox input.style1:checked {
    background-color: var(--c-arancio) !important;
}

body #iubenda-iframe .iub-btn-stroked {
    border: 1px solid black !important;
}

body #purposes-content-container .purposes-header .purposes-header-title {
    font-weight: 600 !important;
    font-size: 2rem !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
    padding-bottom: 0.5rem !important;
    padding-top: 1.6rem !important;
}

body #iubenda-cs-banner .iubenda-granular-controls-container .granular-control-checkbox input.style1:checked {
    background-color: var(--c-arancio) !important;
}

body #iubenda-cs-banner .iubenda-cs-opt-group button,
body .iubenda-alert button.iubenda-button-cancel,
body #iiubenda-cs-banner .iub-btn-consent,
body #iubenda-iframe #iubFooterBtnContainer button,
body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn {
    border: 0.5px solid var(--c-arancio) !important;
    font-weight: 600 !important;
    outline: none !important;
    box-shadow: none !important;
    color: white !important;
    background-color: var(--c-arancio) !important;
    transition: opacity 200ms ease-in-out;

    font-size: 14px !important;
}

body #iubenda-cs-banner.iub-btn-consent.iub-btn-reject,
body #iubenda-cs-banner .iub-btn-consent.iub-btn-accept {
    color: white !important;
    background-image: none !important;
    padding-left: 25px !important;
    padding-right: 25px !important;

    font-size: 12px !important;
}

body #iubenda-iframe .iub-btn-consent.iub-btn-reject {
    background-size: 9px !important;
}

body #iubenda-iframe .iub-btn-consent.iub-btn-accept {
    background-size: 11px !important;
}

body #iubenda-cs-banner .iubenda-cs-opt-group button:hover,
body .iubenda-alert button.iubenda-button-cancel:hover,
body #iubenda-iframe #iubFooterBtnContainer button:hover,
body #iubenda-iframe #iubFooterBtnContainer button:focus {
    background-color: var(--c-arancio) !important;
    color: white !important;
    border: 0.5px solid var(--c-arancio) !important;
    box-shadow: none !important;
    opacity: 0.8;
}

body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn {
    background: var(--c-arancio) !important;
    color: white !important;
}

body #iubenda-cs-banner [tabindex]:not([tabindex="-1"]):focus,
body #iubenda-cs-banner a[href]:focus,
body #iubenda-cs-banner button:focus,
body #iubenda-cs-banner details:focus,
body #iubenda-cs-banner input:focus,
body #iubenda-cs-banner select:focus,
body #iubenda-cs-banner textarea:focus,
body #iubenda-iframe [tabindex]:not([tabindex="-1"]):focus,
body #iubenda-iframe a[href]:focus,
body #iubenda-iframe button:focus,
body #iubenda-iframe details:focus,
body #iubenda-iframe input:focus,
body #iubenda-iframe select:focus,
body #iubenda-iframe textarea:focus {
    outline: none !important;
}

body .iubenda-tp-btn[data-tp-float][data-tp-float="bottom-right"] {
    border-radius: 50% !important;
    bottom: 2.5rem !important;
    right: 2.5rem !important;
    margin: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    background-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--c-arancio) !important;
    background-size: 22px !important;
    opacity: 0.5;
    transition: all 200ms ease-in-out;
}

body .iubenda-tp-btn[data-tp-float][data-tp-float="bottom-right"]:hover {
    opacity: 1;
}

body #iubenda-iframe .purposes-header-right .iub-iframe-brand-button {
    display: none !important;
}

body #iubenda-cs-banner.iubenda-cs-branded .iubenda-cs-close-btn {
    height: 32px !important;
    min-width: 32px !important;
    font-size: 25px !important;
    margin-top: 6px !important;
}

body #cookie-warning {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    body #purposes-content-container .purposes-header .purposes-header-title {
        font-size: 1.2rem !important;
    }

    body .iubenda-tp-btn[data-tp-float][data-tp-float="bottom-right"] {
        right: 1.25rem !important;
        bottom: 1.25rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    body #purposes-content-container .purposes-section-header-title {
        font-size: 17px !important;
    }

    body #purposes-content-container .purposes-header {
        padding-top: 0 !important;
        padding-bottom: 1.5rem !important;
    }

    body #purposes-content-container .purposes-item {
        margin: 0 !important;
    }

    body #iubenda-cs-banner.iubenda-cs-default .iubenda-cs-brand {
        margin-bottom: -1rem !important;
        margin: -8px -8px 0 !important;
        margin: 0 !important;
        margin-bottom: -0.8rem !important;
    }

    body #iubenda-iframe .iubenda-modal-navigation.iubenda-modal-navigation-brand .iubenda-modal-navigation-logo img {
        max-width: 100% !important;
    }
}