
/* ============================================================
   giuseppesaffioti - MVC v4
   First Home: loader + entrance.
   Subsequent MVC navigation: fade-out / fade-in only.
   ============================================================ */

:root {
    --mvc-header-height: 4.63542vw;
    --page-fade-duration: 220ms;
}

/* ------------------------------------------------------------
   Base viewport
   ------------------------------------------------------------ */

html,
body {
    height: 100%;
}

@media screen and (min-width: 769px) {
    html,
    body {
        overflow: hidden;
    }
}

.mvc-main {
    width: 100%;
    height: 100vh;
    min-height: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
}

/*
   Every normal page starts transparent, then site.js applies
   .page-visible. This gives the fade-in after every MVC request.
*/
.mvc-home-page {
    position: relative !important;
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: 100vh !important;
    min-height: 0 !important;
    padding-top: var(--mvc-header-height);
    overflow: hidden !important;

    opacity: 0;
    transition: opacity var(--page-fade-duration) ease;
}

body.page-visible .mvc-home-page {
    opacity: 1;
}

body.page-leaving .mvc-home-page {
    opacity: 0;
}

.mvc-home-page .mvc-section {
    display: flex !important;
    position: relative !important;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - var(--mvc-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - var(--mvc-header-height));
    overflow: hidden;
}

.mvc-home-page .mvc-section .content {
    box-sizing: border-box;
    width: 100vw;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
}

.mvc-home-page .sticky-title {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-shrink: 0;
}

.mvc-home-page .content__left,
.mvc-home-page .content__right {
    height: 100% !important;
    min-height: 0 !important;
}

.header__letter {
    color: #E2DCC8;
    text-decoration: none;
}

.header__menu a {
    cursor: pointer;
}

.header__menu li.active a {
    color: #B66449;
}

.mvc-socials a {
    width: auto !important;
    height: auto !important;
    min-width: 1.2vw;
    font-size: .78vw;
    font-weight: 500;
}

/* ------------------------------------------------------------
   Loader
   Default: NEVER visible.
   Only .first-home-load may show it.
   ------------------------------------------------------------ */

@keyframes animate-circle {
    from { transform: scale(0); opacity: .9; }
    to   { transform: scale(1); opacity: 0; }
}

#preloader {
    display: none;
}

body.first-home-load #preloader {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 9999;

    opacity: 1;

    background: #1C1C1C;
    background: linear-gradient(
        to right,
        rgba(36,31,31,1) 0%,
        rgba(36,31,31,1) 32%,
        rgba(74,71,70,1) 100%
    );
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 5.25rem;
    height: 5.25rem;
    transform: translate(-50%, -50%);
}

.loader > .circle {
    position: absolute;
    width: inherit;
    height: inherit;
    background: #B66449;
    animation: animate-circle .62s cubic-bezier(.9,.24,.62,.79) infinite;
}

.loader > .circle:nth-of-type(1) { animation-delay: 0s; }
.loader > .circle:nth-of-type(2) { animation-delay: -.20s; }
.loader > .circle:nth-of-type(3) { animation-delay: -.40s; }

/* ------------------------------------------------------------
   HOME - common final layout
   ------------------------------------------------------------ */

.mvc-section.home .home__circles {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mvc-section.home .home__circles-lines {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/*
   Normal / returning Home:
   grid is already in its final state. Only the whole page fades.
*/
.mvc-section.home .home__circles-lines > div {
    display: block;
    width: 1px;
    height: 100%;
    min-height: 100%;
    flex: 0 0 1px;
    background: rgba(230,227,217,.24);
    opacity: 1;
}

.mvc-section.home .home__circle {
    top: 50%;
    width: 31.66667vw;
    height: 31.71875vw;
    min-width: 390px;
    min-height: 390px;
    max-width: 610px;
    max-height: 610px;
}

.mvc-section.home .home__circle--left {
    left: 50% !important;
    right: auto !important;
    transform: translateY(-50%) translateX(-95%) !important;
    opacity: 1;
}

.mvc-section.home .home__circle--right {
    left: auto !important;
    right: 50% !important;
    transform: translateY(-50%) translateX(95%) !important;
    opacity: 1;
    z-index: 3;
}

/*
   The recovered JPG came from a screenshot of an already circular
   crop. It contains a few pixels of the surrounding dark background.
   A 1.09 scale removes that crescent while preserving the circle itself.
*/
.mvc-section.home .home__circle-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.09);
    transform-origin: center center;
}

.mvc-section.home .home__circle-text {
    position: relative;
    z-index: 4;
}

.mvc-section.home .content__left {
    justify-content: flex-start;
}

.mvc-section.home .content__description {
    margin-top: 2vw;
}

.mvc-section.home .content__description + .content__btn-block {
    margin-top: 3.5vw;
}

/* ------------------------------------------------------------
   FIRST HOME ONLY:
   reproduce the original entrance choreography.
   ------------------------------------------------------------ */

body.first-home-load .mvc-section.home .home__circles-lines > div {
    height: 0;
    min-height: 0;
    opacity: 0;

    transition:
        height 1.15s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;
}

body.first-home-load .mvc-section.home .home__circle--left {
    left: 250% !important;
    opacity: 0;

    transition:
        left 1.25s cubic-bezier(.22,.61,.36,1) .12s,
        opacity .6s ease .12s;
}

body.first-home-load .mvc-section.home .home__circle--right {
    right: 250% !important;
    opacity: 0;

    transition:
        right 1.25s cubic-bezier(.22,.61,.36,1) .12s,
        opacity .6s ease .12s;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circles-lines > div {
    height: 100%;
    min-height: 100%;
    opacity: 1;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circle--left {
    left: 50% !important;
    opacity: 1;
}

body.first-home-load.home-intro-running
.mvc-section.home .home__circle--right {
    right: 50% !important;
    opacity: 1;
}

/* ------------------------------------------------------------
   Progetti
   ------------------------------------------------------------ */

.mvc-section.projects .content__left {
    overflow: hidden;
}

.mvc-projects-right {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mvc-project-grid {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 1.25rem;
}

.mvc-project-grid .projects__block {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 1.5vw;
}

.mvc-project-grid .projects__block img {
    max-height: 38vh;
    width: 100%;
    object-fit: cover;
}

.mvc-project-grid .projects__block h2 {
    margin-top: .55rem;
    font-size: 1vw;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Esperienze
   ------------------------------------------------------------ */

.mvc-section.experience .content__right {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mvc-section.experience .experience__list {
    padding-bottom: 1rem;
}

.mvc-experience-bg {
    background:
        radial-gradient(circle at 70% 35%, rgba(182,100,73,.20), transparent 35%),
        linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
}

/* ------------------------------------------------------------
   Contatti
   ------------------------------------------------------------ */

.mvc-section.contacts .content__right {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* CONTACT FORM - stile coerente con il sito */
.contact-form {
    width: min(100%, 720px);
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

/* contenitore campo */
.contact-form__field {
    position: relative;
    width: 100%;
}

/* input e textarea */
.contact-form .contact-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(238, 232, 213, 0.72);
    background-color: transparent !important;
    color: #eee8d5;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    appearance: none;
}

/* input normale */
.contact-form input.contact-field {
    height: 3.4rem;
    padding: 1.2rem 0 0.45rem;
}

/* campo messaggio */
.contact-form textarea.contact-field {
    min-height: 190px;
    padding: 1.8rem 0 0.8rem;
    resize: vertical;
}

/* label sovrapposta in alto, come stile minimal */
.contact-form__label {
    position: absolute;
    top: 0.25rem;
    left: 0;
    color: rgba(238, 232, 213, 0.48);
    font-size: 0.86rem;
    font-weight: 600;
    text-transform: uppercase;
    pointer-events: none;
    transition: color 0.2s ease;
}

/* focus */
.contact-form .contact-field:focus {
    border-bottom-color: #c96f4d;
}

    .contact-form .contact-field:focus + .contact-form__label {
        color: #c96f4d;
    }

/* evita bianco/autofill di Chrome */
.contact-form input.contact-field:-webkit-autofill,
.contact-form input.contact-field:-webkit-autofill:hover,
.contact-form input.contact-field:-webkit-autofill:focus,
.contact-form textarea.contact-field:-webkit-autofill,
.contact-form textarea.contact-field:-webkit-autofill:hover,
.contact-form textarea.contact-field:-webkit-autofill:focus {
    -webkit-text-fill-color: #eee8d5;
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* placeholder eventuali */
.contact-form .contact-field::placeholder {
    color: transparent;
}

/* errori */
.contact-field-error {
    display: block;
    margin-top: 0.45rem;
    color: #ff9b8a;
    font-size: 0.82rem;
}

.contact-errors {
    color: #ff9b8a;
    font-size: 0.9rem;
}

/* Cloudflare sempre sotto il messaggio */
.contact-form__verification {
    width: 100%;
    min-height: 84px;
    margin-top: 0.2rem;
    position: relative;
    display: block;
    clear: both;
    overflow: visible;
}

    /* Turnstile largo ma senza sovrapporsi */
    .contact-form__verification .cf-turnstile {
        width: 100%;
        max-width: 100%;
        display: block;
    }

/* bottone */
.contact-form__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.2rem;
}

    .contact-form__actions .btn {
        min-width: 180px;
        min-height: 54px;
    }

/* honeypot nascosto */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-validation-error,
.contact-validation {
    display: block;
    margin-top: .35rem;
    color: #e2a38e;
    font-size: .8rem;
}

.contact-success {
    padding: .8rem 1rem;
    margin: 1rem 0;
    border: 1px solid rgba(226,220,200,.35);
    color: #E2DCC8;
}

.mvc-simple-page {
    height: calc(100vh - var(--mvc-header-height));
    padding: 5rem 8vw;
    overflow-y: auto;
}

/* ------------------------------------------------------------
   Short desktop screens
   ------------------------------------------------------------ */

@media screen and (min-width: 769px) and (max-height: 760px) {
    .mvc-section.home .home__circle {
        min-width: 330px;
        min-height: 330px;
        width: 28vw;
        height: 28vw;
    }

    .mvc-section.home .content__description {
        margin-top: 1.2vw;
    }

    .mvc-section.home .content__description + .content__btn-block {
        margin-top: 1.8vw;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
    :root {
        --mvc-header-height: 18.66667vw;
    }

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .mvc-main {
        height: auto;
        min-height: 100vh !important;
        overflow: visible;
    }

    .mvc-home-page {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: var(--mvc-header-height);
        overflow: visible !important;
    }

    .mvc-home-page .mvc-section {
        display: block !important;
        height: auto !important;
        max-height: none;
        min-height: 0 !important;
        overflow: visible;
    }

    .mvc-home-page .sticky-title {
        position: sticky !important;
        top: var(--mvc-header-height);
        height: 13.33333vw !important;
    }

    .mvc-home-page .mvc-section .content,
    .mvc-home-page .content__left,
    .mvc-home-page .content__right {
        height: auto !important;
        overflow: visible !important;
    }

    .mvc-section.home .home__circles {
        position: relative !important;
        inset: auto;
        height: 105vw;
        margin-top: 3vw;
    }

    .mvc-section.home .home__circle {
        min-width: 0;
        min-height: 0;
        width: 74.66667vw;
        height: 74.66667vw;
    }

    .mvc-section.home .home__circle--left,
    body.first-home-load .mvc-section.home .home__circle--left {
        left: 0 !important;
        transform: translateY(-50%) !important;
    }

    .mvc-section.home .home__circle--right,
    body.first-home-load .mvc-section.home .home__circle--right {
        right: 0 !important;
        transform: translateY(-50%) !important;
    }

    body.first-home-load .mvc-section.home .home__circle--left,
    body.first-home-load .mvc-section.home .home__circle--right {
        opacity: 0;
        transition: opacity .5s ease;
    }

    body.first-home-load.home-intro-running
    .mvc-section.home .home__circle--left,
    body.first-home-load.home-intro-running
    .mvc-section.home .home__circle--right {
        opacity: 1;
    }

    .mvc-socials a {
        font-size: 3.5vw;
    }

    .mvc-project-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8vw;
    }

    .mvc-project-grid .projects__block {
        margin-bottom: 0;
    }

    .mvc-project-grid .projects__block img {
        max-height: none;
    }

    .mvc-project-grid .projects__block h2 {
        font-size: 4vw;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   v7 - GS monogram + cleaned identity links area
   ============================================================ */

.header__brandmark {
    padding: 0;
    overflow: hidden;
}

.header__brandmark-img {
    display: block;
    width: 2.5vw;
    min-width: 26px;
    max-width: 42px;
    height: auto;
}

.header__identity-links {
    gap: 1.2vw;
    padding-left: 1.45vw;
    padding-right: 1.45vw;
}

.header__identity-links a {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    padding: .22rem 0;
    font-size: .72vw;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #E2DCC8;
    opacity: .86;
    text-decoration: none;
    position: relative;
}

.header__identity-links a:hover {
    opacity: 1;
}

.header__identity-links a + a {
    margin-left: 0 !important;
    padding-left: 1.2vw;
}

.header__identity-links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: .95vw;
    min-height: 10px;
    transform: translateY(-50%);
    background: rgba(230, 227, 217, 0.28);
}

@media screen and (max-width: 768px) {
    .header__brandmark-img {
        width: 9.8vw;
        min-width: 34px;
        max-width: none;
    }

    .header__identity-links {
        gap: 4vw;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .header__identity-links a {
        font-size: 2.8vw;
        letter-spacing: .08em;
    }

    .header__identity-links a + a {
        padding-left: 4vw;
    }

    .header__identity-links a + a::before {
        height: 3.8vw;
    }
}


/* ============================================================
   v8 - Home Editorial
   One abstract visual, no second circle, no vertical background grid.
   ============================================================ */

.home-editorial-page .content__right {
    overflow: hidden !important;
}

/* The old .home__circles element is no longer rendered.
   Keep the new area intentionally quiet: no vertical grid, no pattern. */
.home-editorial {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 15vw, 18rem);
    gap: clamp(1.4rem, 2.4vw, 3rem);
    align-items: center;
    padding: clamp(1.2rem, 2vw, 2.5rem) clamp(1.5rem, 2.4vw, 3rem) !important;
    background:
        radial-gradient(circle at 36% 45%, rgba(182, 100, 73, .065), transparent 34%),
        linear-gradient(90deg, rgba(255,255,255,.012), rgba(255,255,255,.025));
}

.home-editorial::before {
    content: "";
    position: absolute;
    width: 20vw;
    height: 20vw;
    min-width: 260px;
    min-height: 260px;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(226, 220, 200, .08);
    border-radius: 50%;
    pointer-events: none;
}

/* Main abstract visual */
.home-editorial__visual-wrap {
    position: relative;
    width: 100%;
    max-width: 760px;
    justify-self: center;
}

.home-editorial__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1.06 / 1;
    overflow: hidden;

    /*
       An editorial "soft architecture" shape rather than the old circle.
       It reads as intentional design, not as a photo mask.
    */
    border-radius: 26% 5% 24% 5% / 20% 5% 22% 5%;
    border: 1px solid rgba(226, 220, 200, .16);

    background: #171514;
    box-shadow:
        0 1.8rem 5rem rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.home-editorial__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(226,220,200,.035), transparent 35%),
        linear-gradient(0deg, rgba(18,16,16,.13), transparent 28%);
}

.home-editorial__visual img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

/* Tiny editorial legend, deliberately secondary. */
.home-editorial__caption {
    position: absolute;
    left: 1.4rem;
    bottom: 1.25rem;
    z-index: 2;

    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.home-editorial__caption span {
    padding: .38rem .58rem;
    border: 1px solid rgba(226,220,200,.18);
    background: rgba(24,21,20,.72);
    backdrop-filter: blur(5px);

    color: rgba(226,220,200,.78);
    font-size: .62rem;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Independent experience text: no second circle. */
.home-editorial__experience {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 1.1rem 0 1.1rem clamp(1rem, 1.3vw, 1.6rem);
    border-left: 1px solid rgba(226,220,200,.28);
}

.home-editorial__experience-number {
    display: block;
    color: #E2DCC8;
    font-size: clamp(2.7rem, 4.1vw, 5rem);
    line-height: .9;
    font-weight: 400;
    letter-spacing: -.055em;
}

.home-editorial__experience-label {
    display: block;
    margin-top: .55rem;
    color: #B66449;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-editorial__experience p {
    margin: 1.35rem 0 0;
    color: rgba(226,220,200,.78);
    font-size: clamp(.78rem, .9vw, 1rem);
    line-height: 1.55;
}

/* Slightly more editorial copy rhythm on the left. */
.home-editorial-page .home-editorial__copy .content__description {
    margin-top: 1.6vw;
}

.home-editorial-page .home-editorial__copy .content__description + .content__btn-block {
    margin-top: 2.65vw;
}

/* ------------------------------------------------------------
   First Home only: restrained entrance, no lines/circle choreography.
   ------------------------------------------------------------ */

body.first-home-load .home-editorial__visual-wrap {
    opacity: 0;
    transform: translateX(5vw) scale(.975);
    transition:
        opacity .72s ease,
        transform 1.05s cubic-bezier(.22,.61,.36,1);
}

body.first-home-load .home-editorial__experience {
    opacity: 0;
    transform: translateY(1.3rem);
    transition:
        opacity .62s ease .18s,
        transform .8s cubic-bezier(.22,.61,.36,1) .18s;
}

body.first-home-load .home-editorial__copy .content__title,
body.first-home-load .home-editorial__copy .content__description,
body.first-home-load .home-editorial__copy .content__btn-block {
    opacity: 0;
    transform: translateY(.75rem);
    transition:
        opacity .55s ease,
        transform .72s cubic-bezier(.22,.61,.36,1);
}

body.first-home-load .home-editorial__copy .content__description {
    transition-delay: .08s;
}

body.first-home-load .home-editorial__copy .content__btn-block {
    transition-delay: .14s;
}

body.first-home-load.home-intro-running .home-editorial__visual-wrap,
body.first-home-load.home-intro-running .home-editorial__experience,
body.first-home-load.home-intro-running .home-editorial__copy .content__title,
body.first-home-load.home-intro-running .home-editorial__copy .content__description,
body.first-home-load.home-intro-running .home-editorial__copy .content__btn-block {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   Short desktop screens
   ------------------------------------------------------------ */

@media screen and (min-width: 769px) and (max-height: 760px) {
    .home-editorial {
        grid-template-columns: minmax(0, 1fr) clamp(10rem, 13vw, 14rem);
        gap: 1.4rem;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .home-editorial__visual-wrap {
        max-width: 600px;
    }

    .home-editorial__experience-number {
        font-size: 3.2rem;
    }

    .home-editorial__experience p {
        font-size: .76rem;
        line-height: 1.45;
    }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
    .home-editorial {
        display: flex !important;
        flex-direction: column;
        gap: 7vw;
        padding: 6vw 5.33333vw 10vw !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 35%, rgba(182,100,73,.07), transparent 34%);
    }

    .home-editorial::before {
        display: none;
    }

    .home-editorial__visual-wrap {
        width: 100%;
        max-width: none;
    }

    .home-editorial__visual {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 22% 4% 20% 4% / 18% 4% 18% 4%;
    }

    .home-editorial__caption {
        left: 4vw;
        bottom: 4vw;
    }

    .home-editorial__caption span {
        font-size: 2.3vw;
    }

    .home-editorial__experience {
        width: 100%;
        box-sizing: border-box;
        padding: 5vw 0 1vw 5vw;
    }

    .home-editorial__experience-number {
        font-size: 14vw;
    }

    .home-editorial__experience-label {
        font-size: 2.7vw;
    }

    .home-editorial__experience p {
        max-width: 80vw;
        font-size: 3.55vw;
    }

    body.first-home-load .home-editorial__visual-wrap {
        transform: translateY(4vw) scale(.985);
    }
}
.sentrix-card,
.sentrix-card__body {
    width: 100%;
}

/* Pulsanti arancioni - hover leggibile */
.btn,
.sentrix-card__cta,
.contact-form__actions .btn {
    color: #eee8d5;
}

    .btn:hover,
    .sentrix-card__cta:hover,
    .contact-form__actions .btn:hover {
        color: #1d1918 !important;
        background-color: #eee8d5;
    }

.sentrix-card__actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    margin-top: 3rem;
}

    .sentrix-card__actions .sentrix-card__cta {
        grid-column: 1;
        margin: 0;
    }

.sentrix-card__whitepaper {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-height: 68px;
    margin: 0;
    color: #eee8d5;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

    .sentrix-card__whitepaper:hover {
        color: #c96f4d;
    }

@media (max-width: 768px) {
    .sentrix-card__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    .sentrix-card__whitepaper {
        min-height: auto;
        white-space: normal;
    }
}

.project-menu {
    width: 100%;
}

.project-menu__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 2rem;
    width: 100%;
}

.project-menu__title {
    display: inline-flex;
    align-items: center;
    color: #eee8d5;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.project-menu__whitepaper {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    color: rgba(238, 232, 213, 0.72);
    font-size: 0.95rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

    .project-menu__whitepaper:hover {
        color: #c96f4d;
    }
    .project-menu__whitepaper span {
        margin-left: 0.4rem;
        color: #c96f4d;
    }

/*
    messaggio cookie
*/

.cookie-notice {
    position: fixed;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
    max-width: 760px;
    margin: 0 auto;
    color: #eee8d5;
}

.cookie-notice__content {
    padding: 1.3rem 1.5rem;
    background: rgba(29, 25, 24, 0.96);
    border: 1px solid rgba(238, 232, 213, 0.22);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

    .cookie-notice__content strong {
        display: block;
        margin-bottom: 0.45rem;
        color: #eee8d5;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .cookie-notice__content p {
        margin: 0;
        color: rgba(238, 232, 213, 0.72);
        font-size: 0.92rem;
        line-height: 1.5;
    }

.cookie-notice__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.1rem;
}

.cookie-notice__link {
    color: rgba(238, 232, 213, 0.72);
    font-size: 0.9rem;
    text-decoration: none;
}

    .cookie-notice__link:hover {
        color: #c96f4d;
    }

.cookie-notice__button {
    min-width: 130px;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: #c96f4d;
    color: #eee8d5;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

    .cookie-notice__button:hover {
        background: #eee8d5;
        color: #1d1918;
    }

@media (max-width: 700px) {
    .cookie-notice {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .cookie-notice__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-notice__button {
        width: 100%;
    }
}

/*
    Footer
*/
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 2rem;
    color: rgba(238, 232, 213, 0.45);
    font-size: 0.78rem;
}

    .site-footer__inner a {
        color: rgba(238, 232, 213, 0.55);
        text-decoration: none;
        pointer-events: auto;
    }

        .site-footer__inner a:hover {
            color: #c96f4d;
        }


.contact-privacy-note {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: -0.6rem 0 0;
    color: rgba(238, 232, 213, 0.56);
    font-size: 0.82rem;
    line-height: 1.5;
}

    .contact-privacy-note a {
        color: rgba(238, 232, 213, 0.82);
        text-decoration: none;
        border-bottom: 1px solid rgba(201, 111, 77, 0.55);
        transition: color 0.2s ease, border-color 0.2s ease;
    }

        .contact-privacy-note a:hover {
            color: #c96f4d;
            border-bottom-color: #c96f4d;
        }

/* PRIVACY PAGE */

.privacy-page {
    background: #1d1918;
    color: #eee8d5;
}

.privacy-content {
    min-height: 100vh;
}

.privacy-content__right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(3rem, 5vw, 5rem);
    overflow: hidden;
}

.privacy-document {
    width: min(100%, 980px);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: 2rem;
}

    /* Scrollbar */
    .privacy-document::-webkit-scrollbar {
        width: 6px;
    }

    .privacy-document::-webkit-scrollbar-track {
        background: transparent;
    }

    .privacy-document::-webkit-scrollbar-thumb {
        background: rgba(238, 232, 213, 0.22);
        border-radius: 999px;
    }

        .privacy-document::-webkit-scrollbar-thumb:hover {
            background: rgba(201, 111, 77, 0.65);
        }

/* Header */
.privacy-document__header {
    margin-bottom: 2.4rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid rgba(238, 232, 213, 0.16);
}

.privacy-document__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: #c96f4d;
    font-size: 0.78rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.privacy-document__header h1 {
    max-width: 760px;
    margin: 0 0 1.2rem;
    color: #eee8d5;
    font-size: clamp(2.2rem, 3.8vw, 4.4rem);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.privacy-document__header p {
    max-width: 760px;
    margin: 0;
    color: rgba(238, 232, 213, 0.72);
    font-size: 1.02rem;
    line-height: 1.65;
}

.privacy-document__meta {
    display: inline-flex;
    margin-top: 1.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(238, 232, 213, 0.16);
    color: rgba(238, 232, 213, 0.58);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Cards */
.privacy-document__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.privacy-card {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
    padding: 1.55rem 1.6rem;
    border: 1px solid rgba(238, 232, 213, 0.14);
    background: rgba(255, 255, 255, 0.018);
}

.privacy-card--highlight {
    border-left: 3px solid #c96f4d;
    background: rgba(201, 111, 77, 0.08);
}

.privacy-card__number {
    color: rgba(238, 232, 213, 0.34);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
}

.privacy-card__content h2 {
    margin: 0 0 0.9rem;
    color: #eee8d5;
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.privacy-card__content p {
    max-width: 760px;
    margin: 0 0 0.9rem;
    color: rgba(238, 232, 213, 0.72);
    font-size: 0.96rem;
    line-height: 1.62;
}

    .privacy-card__content p:last-child {
        margin-bottom: 0;
    }

.privacy-card strong {
    color: #eee8d5;
    font-weight: 600;
}

/* Titolare */
.privacy-owner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 760px;
}

    .privacy-owner div {
        padding: 1rem;
        border: 1px solid rgba(238, 232, 213, 0.12);
        background: rgba(255, 255, 255, 0.018);
    }

    .privacy-owner span {
        display: block;
        margin-bottom: 0.45rem;
        color: rgba(238, 232, 213, 0.42);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    .privacy-owner strong,
    .privacy-owner a {
        color: #eee8d5;
        font-size: 0.95rem;
        font-weight: 500;
        text-decoration: none;
    }

        .privacy-owner a:hover {
            color: #c96f4d;
        }

@media (max-width: 900px) {
    .privacy-content {
        display: block;
        min-height: auto;
    }

    .privacy-content__right {
        padding: 2.5rem 1.25rem 4rem;
        overflow: visible;
    }

    .privacy-document {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .privacy-card {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .privacy-owner {
        grid-template-columns: 1fr;
    }

    .privacy-document__header h1 {
        font-size: 2.4rem;
    }
}


/*
    Rende scrollabile la parte destra delle pagine
*/

/* =========================================================
   FIX SCROLL COLONNA DESTRA - PAGINE FULLSCREEN
   ========================================================= */

.contact-page,
.privacy-page,
.consultation-page,
.project-showcase,
.experience-hero {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

    .contact-page .content,
    .privacy-page .content,
    .consultation-page .content,
    .project-showcase .content,
    .experience-hero .content {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .contact-page .content__left,
    .privacy-page .content__left,
    .consultation-page .content__left,
    .project-showcase .content__left,
    .experience-hero .content__left {
        min-height: 0;
    }

    .contact-page .content__right,
    .privacy-page .content__right,
    .consultation-page .content__right,
    .project-showcase .content__right,
    .experience-hero .content__right {
        height: 100vh;
        max-height: 100vh;
        min-height: 0;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

        /* spazio finale per non tagliare contenuti in basso */
        .contact-page .content__right::after,
        .privacy-page .content__right::after,
        .consultation-page .content__right::after,
        .project-showcase .content__right::after,
        .experience-hero .content__right::after {
            content: "";
            display: block;
            height: 6rem;
            flex: 0 0 auto;
        }


