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

body {
    background-color: #FFFCE9;
    font-family: "Quicksand", sans-serif;
}

.reveal-paragraph {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .65s ease, transform .65s ease;
    will-change: opacity, transform;
}

.reveal-paragraph.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-paragraph {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.content-title{
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 3rem;
}
.content-subtitle{
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 2rem;
}
.layout-main {
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
}

.layout-main > div {
    flex: 1 1 auto;
}

.bottom-row {
    min-height: 0;
}

.logo-shell {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 0;
    line-height: 0;
}

.logo-col-debug {
    background: transparent;
}

#logo-face {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.brand-logo-desktop {
    width: 180px;
    max-width: 100%;
    height: auto;
    display: block;
}

.top-block-card .card-body {
    min-height: 58px;
}

.nav-block-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.nav-block-link:hover,
.nav-block-link:focus {
    color: inherit;
    text-decoration: none;
}

.block-25-label {
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 1.4rem;
    letter-spacing: .03em;
    line-height: 1;
}

.star-hover-card .card-body {
    position: relative;
    overflow: visible;
}

.block-25-content {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.star-hover-card .card-body .block-25-label {
    position: relative;
    z-index: 2;
}

.hover-star {
    position: absolute;
    left: -1.8rem;
    bottom: -1rem;
    width: 3rem;
    height: auto;
    opacity: 0;
    transform: translateY(4px) scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 1;
}

.star-hover-card:hover .hover-star {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card {
    border: 0;
}

.app-card {
    background-color: transparent !important;
    --bs-card-bg: transparent;
}

.block6-header {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
    background: transparent;
    border-bottom: 0;
    text-align: justify;
    
}

.block6-title {
    font-family:  "Bebas Neue", sans-serif !important;
    position: relative;
    z-index: 2;
    line-height: 1;
    margin-top: 2.6rem;
}

.block6-star {
    position: absolute;
    z-index: 0;
    top: .65rem;
    left: 0;
    width: 101px;
    height: auto;
    margin-left: -1.75rem;
    display: block;
}

.block6-text-body {
    position: relative;
    z-index: 2;
    text-align: justify;
}

.pupil {
    fill: #000;
}

.content-nav-wrap {
    background: #FFFCE9;
    transition: transform .25s ease;
}

.content-mobile-nav {
    background: #FFFCE9;
}

.content-nav-wrap.is-sticky {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.content-nav-wrap.is-hidden {
    transform: translateY(-110%);
}

.content-section {
    scroll-margin-top: 7rem;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#studio {
    padding-bottom: 0;
}

.section-shape {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.section-shape img {
    width: 100%;
    height: 100%;
    display: block;
}

:root {
    --studio-projets-fond-width: clamp(220px, 28vw, 520px);
}

#studio .section-shape-studio-bg,
#projets .section-shape-projets-bg {
    left: auto;
    right: 0;
    width: var(--studio-projets-fond-width);
    height: auto;
    z-index: 0;
    will-change: width;
}

#studio .section-shape-studio-bg { top: auto; bottom: 0; }
#projets .section-shape-projets-bg { top: 0; bottom: auto; }

#studio .section-shape-studio-bg img,
#projets .section-shape-projets-bg img {
    width: 100%;
    height: auto;
    display: block;
}

.content-section > :not(.section-shape) {
    position: relative;
    z-index: 1;
}

.section-projets {
    background: #DF6136;
    color: #FFFCE9;
}

.project-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 2rem;
}

.project-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #FFFCE9;
    padding: .2rem 0 .78rem;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: .03em;
    font-size: 1.4rem;
    line-height: 1.08;
    opacity: .35;
    transition: opacity .2s ease;
    cursor: pointer;
}

.project-filter-btn span {
    position: relative;
    z-index: 2;
}

.project-filter-btn::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    bottom: -.25rem;
    width: 2.3rem;
    height: 2.3rem;
    background: url("/assets/svg/etoile-noire.svg") no-repeat center / contain;
    opacity: 0;
    transform: translateY(4px) scale(.85);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 1;
}

.project-filter-btn:hover::before,
.project-filter-btn:focus-visible::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.project-filter-btn.is-active {
    opacity: 1;
}

.project-filter-btn.is-unused {
    opacity: .25 !important;
}

.project-grid {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.project-tile {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
}

.project-tile:focus-visible {
    outline: 2px solid #FFFCE9;
    outline-offset: 2px;
}

.project-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project-no-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(255, 252, 233, .35);
    border: 1px solid rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .55);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    color: #FFFCE9;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity .25s ease;
}

.project-tile:active .project-overlay {
    opacity: 1;
}

.project-tile:hover .project-overlay,
.project-tile:focus-within .project-overlay {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .project-tile {
        display: block;
    }

    .project-overlay {
        padding: 1.2rem;
    }

    .project-tile:active .project-overlay,
    .project-tile:focus .project-overlay,
    .project-tile:focus-within .project-overlay {
        opacity: 1;
    }
}

.project-meta {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

.project-title {
    margin: .2rem 0;
    font-size: 1.35rem;
}

.project-desc {
    margin: 0;
    opacity: .9;
}

.project-modal-content {
    background: #FFFCE9;
    color: #222;
}

.project-modal-meta {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.1rem;
    letter-spacing: .04em;
    color: #DF6136;
    text-transform: uppercase;
}

.project-modal-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0 !important;
}

.project-page .project-modal-image {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}

#projectModalDescription {
    text-align: justify;
}

.section-services {
    background: #DF6136;
}

.section-services {
    overflow: hidden;
    position: relative;
    padding-top: 0;
}

#services.content-section {
    padding-top: 0;
}

.section-services::before {
    display: none;
}

.services-list {
    padding-top: 0;
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.services-list::before {
    content: "";
    position: absolute;
    top: -40vh;
    bottom: -40vh;
    left: 50vw;
    width: 2px;
    transform: translateX(-50%);
    background: #004dff;
    z-index: 5;
    pointer-events: none;
}

.services-shapes-layer {
    display: none;
}

#services > .content-title {
    position: absolute;
    top: 0;
    left: 1rem;
    right: auto;
    z-index: 2;
    margin: 0;
    background: transparent;
    outline: 2px solid #00ff00;
    display: inline-block;
    width: auto;
    max-width: max-content;
}

#services .service-row:first-child {
    margin-top: 0;
}

.service-row + .service-row {
    margin-top: 1rem;
}

.service-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100vw;
    margin-left: 0;
    margin-right: 0;
}

.service-row.side-right {
    justify-content: flex-end;
}

.service-card {
    position: relative;
    flex: 0 0 50vw;
    width: 50vw;
    max-width: 50vw;
    min-height: min(62vw, 760px);
    background: transparent;
    overflow: visible;
    isolation: isolate;
}

@media (min-width: 992px) {
    .services-shapes-layer {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: min(62vw, 760px);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        z-index: 0;
        pointer-events: none;
    }

    .services-layer-shape {
        position: absolute;
        top: 0;
        width: 50vw;
        height: auto;
        max-height: 100%;
        display: block;
        opacity: 0;
        will-change: transform, opacity;
        transition: transform .9s ease, opacity .45s ease;
        transform: translateX(var(--shape-start-x, 0)) scale(var(--shape-scale, 1));
    }

    .services-layer-shape.shape-1 {
        right: 0;
        --shape-start-x: 12vw;
        --shape-scale: 1;
    }

    .services-layer-shape.shape-2 {
        left: auto;
        right: 50vw;
        --shape-start-x: -12vw;
        --shape-scale: 1.32;
        transform-origin: right top;
    }

    .services-shapes-layer.is-visible .services-layer-shape.shape-1 {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    .services-shapes-layer.is-visible .services-layer-shape.shape-2 {
        opacity: 1;
        transform: translateX(0) scale(1.32);
        transition-delay: .14s;
    }

    .service-card { margin: 0; }
    .service-shape-bg { display: none !important; }
}

.service-card-reveal {
    opacity: 0;
    transform: translateX(var(--service-reveal-offset, 0));
    transition: transform .9s ease, opacity .5s ease;
}

.service-card-reveal.from-right { --service-reveal-offset: 12vw; }
.service-card-reveal.from-left { --service-reveal-offset: -12vw; }

.service-card-reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.service-shape-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    pointer-events: none;
}

/* Manual align: top of first pink shape aligned with top of green "Nos services" band. */
#services .service-row:first-child .service-shape-bg {
    top: -5.6rem;
    height: calc(100% + 5.6rem);
}

/* Block 2: connect top-right corner to block 1 bottom-left corner. */
#services .service-row:nth-child(2) {
    margin-top: 0;
}

@media (min-width: 992px) {
    /* New SVG files include internal side margins; compensate so inner edge sits on viewport center. */
    .service-row.side-right .service-shape-bg {
        width: 122.75%;
        left: 0;
        right: auto;
    }

    .service-row.side-left .service-shape-bg {
        width: 122.75%;
        left: auto;
        right: 0;
    }

    /* 6Gauche already aligns correctly in source file. */
    .service-row.side-left .service-shape-bg.shape-6 {
        width: 100%;
    }

    #services .service-row:nth-child(2) .service-card {
        flex: 0 0 50vw !important;
        width: 50vw !important;
        max-width: 50vw !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    #services .service-row:nth-child(2) .service-card-reveal.from-left {
        --service-reveal-offset: -26vw;
    }

    #services .service-row:nth-child(2) .service-card-reveal.is-visible {
        transform: translate3d(0, 0, 0);
    }

    /* 1Droite: expand to compensate right transparent area while keeping left edge on center line. */
    .service-row.side-right .service-shape-bg.shape-1 {
        width: 100%;
    }
}

.service-card-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 1.2rem 1.25rem;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1rem;
    align-items: start;
}

.service-visual {
    width: 170px;
    height: auto;
    display: block;
}

.service-content {
    min-width: 0;
}

.service-text {
    margin: 0;
    text-align: justify;
    max-width: 62ch;
    color: #000;
}

.service-heading {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    margin-bottom: .25rem;
}

.service-dropcap {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(4.5rem, 8vw, 8rem);
    line-height: .72;
    color: #000;
}

.service-title {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1;
    color: #000;
}

@media (max-width: 767.98px) {
    .services-list {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .service-row {
        width: 100%;
        justify-content: flex-start !important;
    }

    .service-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: min(92vw, 680px);
    }

    .service-card-inner {
        grid-template-columns: 120px 1fr;
        gap: .8rem;
        padding: 1rem;
    }

    .service-visual {
        width: 110px;
    }

    .service-dropcap {
        font-size: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-card-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.section-contact {
    background: transparent;
}

.contact-info-mini {
    max-width: 560px;
    font-size: .95rem;
    line-height: 1.45;
    position: relative;
    z-index: 25;
    pointer-events: auto;
}

.contact-info-mini a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}

.contact-info-mini a:hover,
.contact-info-mini a:focus-visible {
    text-decoration: underline;
}

.contact-info-mini i {
    color: #DF6136;
}

#contact.section-contact {
    min-height: 1250px;
    padding-top: 3rem;
    padding-bottom: 14rem;
}

.contact-scene {
    position: relative;
    width: min(50vw, 760px);
    margin: 0 auto;
    aspect-ratio: 1723 / 1395;
    overflow: visible;
    --contact-stack-offset: 44%;
    --contact-envelope-shift: 12%;
}

.contact-envelope-base,
.contact-letter-visual,
.contact-flap {
    position: absolute;
    left: 50%;
    width: 100%;
    height: auto;
    display: block;
    transform: translateX(-50%);
}

.contact-envelope-base {
    z-index: 5;
    top: calc(var(--contact-stack-offset) + var(--contact-envelope-shift));
}

.contact-flap {
    z-index: 6;
    top: calc(7.8% + var(--contact-stack-offset) + 6px);
    bottom: auto;
    width: 100%;
    transform-origin: 50% 0%;
    backface-visibility: hidden;
    object-fit: unset;
    object-position: unset;
}


.contact-letter-visual {
    z-index: 3;
    width: 62%;
    top: calc(16% + var(--contact-stack-offset) + var(--contact-envelope-shift));
    height: auto;
    transform: translateX(-50%) translateY(78%) scale(1.15);
    opacity: 0;
    transition: transform .9s ease .25s, opacity .2s ease .2s;
}

.contact-form-shell {
    position: absolute;
    z-index: 7;
    left: 18.8%;
    top: calc(-16% + var(--contact-stack-offset) + var(--contact-envelope-shift));
    width: 62.4%;
    container-type: inline-size;
    opacity: 0;
    transform: translateY(58%);
    transition: transform .9s ease .35s, opacity .35s ease .95s;
    pointer-events: none;
}

.contact-form {
    background: transparent;
    font-size: .95rem;
}

.contact-form-title {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2.3rem, 12.5cqw, 3.8rem);
    line-height: .9;
    color: #FFFCE9;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .22em;
    white-space: nowrap;
    width: 100%;
    letter-spacing: .01em;
}

.contact-form .form-control {
    border-radius: .25rem;
    border: 1px solid #FFFCE9;
    background: transparent;
    font-size: .9rem;
    padding: .35rem .5rem;
    line-height: 1.2;
    color: #FFFCE9;
}

.contact-form .form-control::placeholder {
    color: #FFFCE9;
    opacity: 1;
}

.contact-form .form-control:focus {
    color: #FFFCE9;
    background: transparent;
    border-color: #FFFCE9;
    box-shadow: 0 0 0 .12rem rgba(255, 252, 233, .28);
}

.contact-form textarea.form-control {
    min-height: 86px;
}

.contact-form .btn {
    --bs-btn-padding-y: .28rem;
    --bs-btn-padding-x: .7rem;
    --bs-btn-font-size: .92rem;
    --bs-btn-color: #FFFCE9;
    --bs-btn-border-color: #FFFCE9;
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: #DF6136;
    --bs-btn-hover-bg: #FFFCE9;
    --bs-btn-hover-border-color: #FFFCE9;
}

.contact-seal-btn {
    position: absolute;
    left: 49%;
    top: calc(53.1% + var(--contact-stack-offset) + var(--contact-envelope-shift));
    transform: translate(-50%, -50%);
    width: 33%;
    max-width: 235px;
    border: 0;
    background: transparent;
    padding: 0;
    z-index: 7;
    cursor: pointer;
}

.contact-seal-star {
    width: 100%;
    height: auto;
    display: block;
}

.contact-click-gif {
    position: absolute;
    z-index: 8;
    width: 120vw;
    height: auto;
    max-width: none;
    left: 44%;
    top: 34%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.contact-eyes {
    position: absolute;
    left: 50%;
    top: calc(var(--contact-stack-offset) + var(--contact-envelope-shift) + 63%);
    width: 74%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 8;
    opacity: 0;
    transition: opacity .3s ease .25s;
    pointer-events: none;
}

.contact-eye {
    width: 30%;
    aspect-ratio: 1;
    background: #fffce9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-pupil {
    width: 24%;
    aspect-ratio: 1;
    background: #df6136;
    border-radius: 50%;
    transform: translateY(0);
    transition: transform .9s ease .25s;
}

.contact-scene.is-opening .contact-seal-btn,
.contact-scene.is-open .contact-seal-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.contact-scene.is-opening .contact-click-gif,
.contact-scene.is-open .contact-click-gif {
    opacity: 0;
    transition: opacity .2s ease;
}

.contact-scene.is-opening .contact-flap,
.contact-scene.is-open .contact-flap {
    animation: contact-flap-open 1s ease forwards;
    z-index: 0;
}

.contact-scene.is-opening .contact-letter-visual,
.contact-scene.is-open .contact-letter-visual {
    transform: translateX(-50%) translateY(-58%) scale(1.15);
    z-index: 3;
    opacity: 1;
}

.contact-scene.is-opening .contact-form-shell,
.contact-scene.is-open .contact-form-shell {
    transform: translateY(-16%);
    opacity: 1;
    pointer-events: auto;
}

.contact-scene.is-opening .contact-eyes,
.contact-scene.is-open .contact-eyes {
    opacity: 1;
}

.contact-scene.is-opening .contact-pupil,
.contact-scene.is-open .contact-pupil {
    transform: translateY(-160%);
}

@keyframes contact-flap-open {
    0% { transform: translateX(-50%) scaleY(1); }
    45% { transform: translateX(-50%) scaleY(.06); }
    100% { transform: translateX(-50%) scaleY(-1); }
}

@media (max-width: 991.98px) {
    #contact.section-contact {
        min-height: 980px;
        padding-bottom: 10rem;
    }

    .contact-scene {
        width: min(92vw, 760px);
    }

    .contact-click-gif {
        width: 120vw;
        height: auto;
    }

    .contact-form-shell {
        left: 21%;
        width: 58%;
    }
}

.section-shop .shop-carousel {
    width: 100%;
}

.section-shop .shop-carousel-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (min-width: 992px) {
    .content-section-tall {
        min-height: 800px;
    }

    .project-grid {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 2.5rem;
        padding-left: 3.25rem;
        padding-right: 3.25rem;
    }
}



.studio-block {
    padding: 1rem;
    border-radius: .5rem;
    text-align: justify;
}

#studio.studio-reveal-ready .studio-block p.studio-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .95s ease, transform .95s ease;
}

#studio .studio-block p.studio-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.studio-layout {
    align-items: stretch;
}

.studio-photo-wrap {
    display: flex;
    align-items: flex-end;
    min-height: 100%;
}

.studio-photo-img {
    width: 100%;
    height: auto;
    max-height: 1000px;
    object-fit: contain;
    object-position: left bottom;
    display: block;
}

.studio-mobile-split {
    min-height: 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.studio-mobile-photo {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
}

.studio-mobile-text {
    display: flex;
    align-items: stretch;
}

.studio-mobile-text .studio-block {
    width: 100%;
}

.studio-people-block {
    /* background: #dff4ff; */
}

.studio-text-block {
    /* background: #e7f8df; */
}

@media (max-width: 991.98px) {
    .project-grid {
        --bs-gutter-x: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .block1-card .block1-body {
        --bs-card-spacer-x: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #logo-face {
        width: 100%;
        max-width: 100%;
    }

    .top-block-card.star-hover-card .card-body {
        min-height: 110px;
        justify-content: center !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .block-25-label {
        font-size: 2.1rem;
        text-align: center;
        width: auto;
    }

    .hover-star {
        width: 4rem;
        left: -2rem;
        bottom: -1rem;
    }

    .bottom-row {
        row-gap: 2rem;
    }

    .studio-mobile-split {
        min-height: 260px;
    }
}

body.debug-grid {
    background-image:
        linear-gradient(to right, rgba(220, 53, 69, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(13, 110, 253, 0.08) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%, 100% 16px;
    background-position: 0 0, 0 0;
}

/* Animation sandbox page */
.anim-services-page {
    min-height: 430vh;
    padding-top: 0 !important;
}

/* Content page: keep the effect but reduce the long empty tail after the last pink shape. */
#services-animation.anim-services-page {
    min-height: 360vh;
}

/* Large 27" desktop tuning (Thunderbolt-like 2560x1440 and above) only. */
@media (min-width: 2500px) and (min-height: 1300px) {
    #services-animation.anim-services-page {
        min-height: 260vh;
    }

    #services-animation .anim-shape-rect-base {
        transform: scaleY(0.62);
    }
}

/* Slide-in decorative backgrounds for services-animation + contact */
.bg-slide-in-section {
    position: relative;
    overflow: hidden;
}

.bg-slide-in-section > * {
    position: relative;
    z-index: 1;
}

.bg-slide-in-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(22%);
    transition: transform .7s ease, opacity .7s ease;
    will-change: transform, opacity;
}

.bg-slide-in-section.bg-slide-in-visible::after {
    opacity: 1;
    transform: translateX(0);
}

#services-animation.bg-slide-services::after {
    background-image: url("/assets/svg/services/boom-service.svg");
    background-position: right bottom;
    background-size: min(29vw, 480px) auto;
    z-index: 2;
}

#contact.bg-slide-contact::after {
    background-image: url("/assets/svg/contact/boom-contact2.svg");
    background-position: right -1.2rem;
    background-size: min(34vw, 530px) auto;
}

.anim-services-page > .content-title {
    position: sticky;
    top: 5.9rem;
    z-index: 3;
    margin-bottom: 0;
}

.anim-services-track {
    position: sticky;
    top: 7.8rem;
    height: calc(100vh - 8rem);
    overflow: visible;
    z-index: auto;
}

.anim-services-mobile-list {
    display: none;
}

.anim-services-mobile-v2 {
    display: none;
}

/* Hard split desktop/mobile for services section to prevent crossover regressions. */
@media (min-width: 992px) {
    #services-animation .anim-services-stage {
        display: block !important;
    }

    #services-animation .anim-services-mobile-v2 {
        display: none !important;
    }
}

.anim-shape-rect-base {
    position: absolute;
    left: calc(var(--serp-half) * 0.3979);
    top: 130.58%;
    width: calc(var(--serp-half) * 1.556);
    height: auto;
    display: block;
    z-index: 1;
    pointer-events: none;
    transform: scaleY(0.8);
    transform-origin: top center;
}

.anim-services-stage {
    --serp-half: min(50vw, 783px);
    position: relative;
    width: calc(var(--serp-half) * 2);
    height: calc(var(--serp-half) * (1942 / 783));
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.anim-shape {
    position: absolute;
    width: var(--serp-half);
    height: auto;
    display: block;
    --step-progress: 0;
    --shape-scale: 1;
    --shape-offset: 18vw;
    opacity: var(--step-progress);
    transform: translateX(calc((1 - var(--step-progress)) * var(--shape-offset))) scale(var(--shape-scale));
    transition: none;
    transform-origin: center top;
    z-index: 5;
}

.anim-shape.from-left {
    --shape-offset: -18vw;
}

.anim-shape.shape-1 { top: 0; left: var(--serp-half); }
.anim-shape.shape-2 { top: 0; right: var(--serp-half); }
.anim-shape.shape-3 { top: 30.7415%; left: var(--serp-half); }
.anim-shape.shape-4 { top: 61.4%; right: var(--serp-half); }
.anim-shape.shape-5 { top: 92.2245%; left: var(--serp-half); }
.anim-shape.shape-6 { top: 122.8836%; right: var(--serp-half); width: var(--serp-half); }
.anim-shape.shape-6.from-left { --shape-offset: -18vw; }
.anim-shape.shape-1 {
    --step-progress: 1;
    transform: none;
    opacity: 1;
}

.anim-service-copy {
    position: absolute;
    z-index: 35;
    width: min(42vw, 560px);
    max-width: calc(var(--serp-half) - 2.2rem);
    --copy-progress: 0;
    opacity: var(--copy-progress);
    pointer-events: auto;
    color: #000;
    transform: translateX(calc((1 - var(--copy-progress)) * var(--shape-offset)));
    display: block;
}

.anim-service-copy a {
    pointer-events: auto;
}

.anim-service-copy.from-left {
    --shape-offset: -10vw;
}

.anim-service-copy.from-right {
    --shape-offset: 10vw;
}

.anim-service-copy.copy-1 { top: 1%; left: var(--serp-half); width: var(--serp-half); max-width: var(--serp-half); }
.anim-service-copy.copy-2 { top: 18%; left: 0; width: var(--serp-half); max-width: var(--serp-half); }
.anim-service-copy.copy-3 { top: 48.7415%; left: var(--serp-half); width: var(--serp-half); max-width: var(--serp-half); }
.anim-service-copy.copy-4 { top: 79.4%; left: 0; width: var(--serp-half); max-width: var(--serp-half); }
.anim-service-copy.copy-5 { top: 102%; left: var(--serp-half); width: var(--serp-half); max-width: var(--serp-half); }
.anim-service-copy.copy-6 { top: 132%; left: 0; width: var(--serp-half); max-width: var(--serp-half); }

.anim-service-copy .service-text {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.anim-service-copy .service-content {
    width: min(72%, 500px);
    margin-left: auto;
    margin-right: auto;
}

/* 2, 5, 6 have different shape geometry: tune only inner content placement. */
#services-animation .anim-service-copy.copy-1 .service-content {
    margin-left: 6%;
    margin-right: auto;
}

#services-animation .anim-service-copy.copy-2 .service-content {
    width: min(62%, 430px);
    margin-left: auto;
    margin-right: 0;
    transform: translateX(-16%);
}

#services-animation .anim-service-copy.copy-5 .service-content {
    width: min(64%, 450px);
    margin-left: auto;
    margin-right: 8%;
    transform: translateX(-12%);
}

#services-animation .anim-service-copy.copy-6 .service-content {
    width: min(60%, 420px);
    margin-left: 12%;
    margin-right: auto;
}

#services-animation .anim-service-copy.copy-6 .service-content {
    text-align: left;
    margin-left: auto;
    margin-right: 8%;
    transform: translateX(10%);
}

#services-animation .anim-service-copy.copy-6 .service-heading {
    justify-content: flex-start;
}

#services-animation .anim-service-copy.copy-6 .service-title {
    font-size: clamp(2.05rem, 2.9vw, 2.95rem);
    line-height: .95;
}

#services-animation .anim-service-copy.copy-6 .service-text {
    text-align: justify;
    max-width: 74%;
    margin-left: 8%;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    #services-animation.anim-services-page {
        min-height: auto;
    }

    .anim-services-page {
        min-height: max(235vw, 1500px);
        background-color: #DF6136;
        background-image: url("/assets/svg/services/fond-service-phone.svg");
        background-repeat: no-repeat;
        background-position: center 12vh;
        background-size: 100% auto;
    }

    .anim-services-page > .content-title {
        top: 5.2rem;
    }

    .anim-services-track {
        position: relative;
        top: 0;
        height: auto;
    }

    .anim-services-stage {
        display: none;
    }

    .anim-shape {
        width: 50%;
        --shape-offset: 16vw;
    }

    .anim-shape,
    .anim-service-copy {
        display: none !important;
    }

    .anim-services-mobile-list {
        display: block;
        position: relative;
        min-height: 165vh;
        padding: 0;
        margin-top: 8vh;
    }

    .anim-shape-rect-base {
        display: none;
    }

    .anim-services-mobile-item {
        position: absolute;
        display: block;
        width: min(60%, 620px);
        margin: 0;
    }

    .anim-services-mobile-item:nth-child(1) { top: 0.8%; left: 50%; transform: translateX(-50%); }
    .anim-services-mobile-item:nth-child(2) { top: 17.8%; left: 50%; transform: translateX(-50%); }
    .anim-services-mobile-item:nth-child(3) { top: 32.8%; left: 50%; transform: translateX(-50%); }
    .anim-services-mobile-item:nth-child(4) { top: 47.8%; left: 50%; transform: translateX(-50%); }
    .anim-services-mobile-item:nth-child(5) { top: 65.3%; left: 50%; transform: translateX(-50%); }
    .anim-services-mobile-item:nth-child(6) { top: 83.8%; left: 50%; transform: translateX(-50%); }

    .anim-services-mobile-item .service-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .anim-services-mobile-item .service-heading {
        justify-content: center;
        width: 100%;
    }

    .anim-services-mobile-item .service-title {
        text-align: center;
    }

    .anim-services-mobile-item .service-dropcap {
        font-size: clamp(2.2rem, 6.4vw, 3.1rem);
    }

    .anim-services-mobile-item .service-title {
        font-size: clamp(1.12rem, 2.9vw, 1.45rem);
    }

    .anim-services-mobile-item .service-text {
        font-size: clamp(.74rem, 1.8vw, .88rem);
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

    .anim-services-mobile-item .service-text {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        text-align: justify;
    }

    .anim-service-copy {
        width: 46%;
        max-width: 46%;
    }

    .anim-service-copy.copy-1,
    .anim-service-copy.copy-3,
    .anim-service-copy.copy-5 {
        left: calc(50% + .7rem);
    }

    .anim-service-copy.copy-2,
    .anim-service-copy.copy-4,
    .anim-service-copy.copy-6 {
        right: calc(50% + .7rem);
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    .anim-services-page {
        background-position: center 16vh !important;
    }

    .anim-services-mobile-list {
        min-height: 205vh;
        margin-top: 9vh !important;
    }

    .anim-services-mobile-item {
        width: min(74%, 760px);
    }

    #services-animation .anim-services-mobile-item .service-heading .service-visual {
        width: 170px;
    }

    #services-animation .anim-services-mobile-item .service-dropcap {
        font-size: clamp(3.6rem, 7.2vw, 4.9rem) !important;
    }

    #services-animation .anim-services-mobile-item .service-title {
        font-size: clamp(2.5rem, 5vw, 3.6rem) !important;
        white-space: nowrap;
    }

    #services-animation .anim-services-mobile-item .service-text {
        max-width: 100%;
        font-size: clamp(1.08rem, 1.85vw, 1.3rem);
        line-height: 1.38;
    }

    /* Tablet: more space between blocks */
    .anim-services-mobile-item:nth-child(1) { top: 2%; }
    .anim-services-mobile-item:nth-child(2) { top: 23%; }
    .anim-services-mobile-item:nth-child(3) { top: 42.8%; }
    .anim-services-mobile-item:nth-child(4) { top: 62.8%; }
    .anim-services-mobile-item:nth-child(5) { top: 82.8%; }
    .anim-services-mobile-item:nth-child(6) { top: 96.8%; }
}

@media (max-width: 767.98px) {
    #services-animation.anim-services-page {
        min-height: auto;
    }

    .anim-services-page {
        background-position: center 16vh !important;
    }

    .anim-services-mobile-list {
        min-height: 175vh;
        margin-top: 9vh !important;
    }

    .anim-services-mobile-item {
        width: min(70%, 500px);
    }

    .anim-services-mobile-item .service-dropcap {
        font-size: clamp(2rem, 8.8vw, 2.85rem);
    }

    .anim-services-mobile-item .service-title {
        font-size: clamp(1.08rem, 5.4vw, 1.35rem);
    }

    .anim-services-mobile-item .service-text {
        font-size: clamp(.76rem, 3.6vw, .9rem);
        line-height: 1.28;
    }
}

@media (max-width: 575.98px) {
    #services-animation.anim-services-page {
        min-height: auto;
    }

    .anim-services-page {
        min-height: max(300vw, 1750px);
        background-position: center 18vh !important;
    }

    .anim-services-mobile-item {
        width: min(80%, 420px);
    }

    .anim-services-mobile-item .service-dropcap {
        font-size: clamp(1.75rem, 8.2vw, 2.35rem);
    }

    .anim-services-mobile-item .service-title {
        font-size: clamp(1rem, 5.1vw, 1.25rem);
    }

    .anim-services-mobile-item .service-text {
        font-size: clamp(.72rem, 3.9vw, .86rem);
        line-height: 1.24;
    }

    .anim-services-mobile-list {
        min-height: 185vh;
        margin-top: 10vh !important;
    }
}

.anim-service-copy .service-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

.anim-services-mobile-item .service-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
}

.anim-service-copy .service-title {
    text-align: center;
}

#services-animation .anim-service-copy .service-title {
    text-align: left;
    display: inline-block;
}

#services-animation .anim-service-copy .service-heading {
    justify-content: center;
}

.anim-service-copy .service-heading .service-visual {
    width: 156px;
    flex: 0 0 auto;
}

.anim-services-mobile-item .service-heading .service-visual {
    width: 135px;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .anim-services-mobile-item .service-heading .service-visual {
        width: 122px;
    }
}

@media (max-width: 575.98px) {
    .anim-services-mobile-item .service-heading .service-visual {
        width: 105px;
    }
}

/* Final mobile overrides for services-animation (kept at file end to win cascade). */
@media (max-width: 991.98px) {
    #services-animation .anim-services-mobile-item .service-heading {
        justify-content: center !important;
        width: 100%;
    }

    #services-animation .anim-services-mobile-item .service-heading .service-dropcap {
        transform: translateY(40%);
    }

    #services-animation .anim-services-mobile-item .service-heading .service-title {
        transform: translateY(50%);
    }

    #services-animation .anim-services-mobile-item .service-title {
        text-align: left !important;
        display: inline-block;
        font-size: clamp(2.88rem, 7.36vw, 4.16rem) !important;
        line-height: 1 !important;
    }

    #services-animation .anim-services-mobile-item .service-dropcap {
        font-size: clamp(3.52rem, 8.32vw, 4.48rem) !important;
        line-height: 1 !important;
    }
}

/* Mobile services replacement (from services-mobile test page) */
@media (max-width: 991.98px) {
    #services-animation .anim-services-mobile-v2 {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        padding: 8vh 0 0 !important;
        min-height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
    }

    #services-animation .anim-services-mobile-bubble {
        width: 100%;
        --join-overlap: clamp(12px, 2.8vw, 18px);
        --content-shift: -6%;
        --h1: 47.89vw;
        --h2: 47.89vw;
        min-height: calc(var(--h1) + var(--h2) - var(--join-overlap));
        display: flex;
        position: relative;
        overflow: hidden;
    }

    #services-animation .anim-services-mobile-bubble + .anim-services-mobile-bubble {
        margin-top: calc(-1 * var(--join-overlap) - 3px);
    }

    #services-animation .anim-services-mobile-bubble .bubble-shapes {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    #services-animation .anim-services-mobile-bubble .bubble-shape {
        position: absolute;
        left: 0;
        width: 100%;
        display: block;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    #services-animation .anim-services-mobile-bubble .bubble-shape.shape-top {
        top: 0;
        height: calc(var(--h1) + 3px);
    }

    #services-animation .anim-services-mobile-bubble .bubble-shape.shape-bottom {
        top: calc(var(--h1) - var(--join-overlap) - 3px);
        height: calc(var(--h2) + 6px);
    }

    #services-animation .anim-services-mobile-bubble.bubble-top {
        --h1: 61.86vw;
        --h2: 47.89vw;
        --content-shift: -10%;
    }

    #services-animation .anim-services-mobile-bubble.bubble-middle {
        --h1: 47.89vw;
        --h2: 47.89vw;
        --content-shift: -7%;
    }

    #services-animation .anim-services-mobile-bubble.bubble-bottom {
        --h1: 0;
        --h2: 61.96vw;
        min-height: 61.96vw;
        --content-shift: -28%;
    }

    #services-animation .anim-services-mobile-bubble .bubble-content {
        width: min(90vw, 860px);
        margin: 0 auto;
        padding: clamp(1.4rem, 6vw, 3.1rem) clamp(1.1rem, 3.4vw, 2rem) clamp(.55rem, 2.8vw, 1.25rem) clamp(1.1rem, 3.4vw, 2rem);
        min-height: calc(var(--h1) + var(--h2) - var(--join-overlap));
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform: translateY(var(--content-shift));
        position: relative;
        z-index: 1;
    }

    #services-animation .anim-services-mobile-bubble .service-heading {
        display: flex;
        align-items: flex-end;
        gap: .75rem;
        justify-content: center !important;
        transform: scale(0.85);
        transform-origin: center bottom;
        width: 100%;
    }

    #services-animation .anim-services-mobile-bubble .service-visual {
        width: 4.8rem;
        height: auto;
        flex: 0 0 auto;
    }

    #services-animation .anim-services-mobile-bubble .service-dropcap {
        font-size: clamp(3.2rem, 11.8vw, 4.8rem) !important;
        line-height: 1 !important;
    }

    #services-animation .anim-services-mobile-bubble .service-title {
        margin: 0;
        text-align: left !important;
        display: inline-block;
        font-size: clamp(3.6rem, 12.7vw, 5.55rem) !important;
        line-height: .9 !important;
    }

    #services-animation .anim-services-mobile-bubble .service-title.no-wrap {
        white-space: nowrap;
    }

    #services-animation .anim-services-mobile-bubble .service-text {
        margin: .9rem auto 0;
        width: min(73vw, 620px);
        text-align: justify;
        font-size: clamp(.92rem, 3.55vw, 1.16rem);
    }

    #services-animation .anim-services-mobile-bubble.bubble-bottom .service-heading {
        transform: scale(0.85);
    }

    #services-animation .anim-services-mobile-bubble.bubble-bottom .service-title {
        font-size: clamp(2.7rem, 9.6vw, 4.2rem) !important;
        white-space: nowrap;
        transform: translateY(-0.32rem);
    }

    #services-animation .anim-services-mobile-bubble.bubble-bottom .service-text {
        width: min(66vw, 520px);
        font-size: clamp(.84rem, 3.05vw, 1rem);
        margin-top: .6rem;
    }
}

@media (max-width: 390px) {
    #services-animation .anim-services-mobile-bubble .bubble-content {
        padding-bottom: clamp(.35rem, 2vw, .75rem);
    }

    #services-animation .anim-services-mobile-bubble .service-heading {
        gap: .45rem;
    }

    #services-animation .anim-services-mobile-bubble .service-visual {
        width: 4rem;
    }

    #services-animation .anim-services-mobile-bubble .service-dropcap {
        font-size: clamp(2.6rem, 10.2vw, 3.9rem) !important;
    }

    #services-animation .anim-services-mobile-bubble .service-title {
        font-size: clamp(3rem, 12.6vw, 3.96rem) !important;
        line-height: .95 !important;
    }

    #services-animation .anim-services-mobile-bubble .service-text {
        width: min(74vw, 440px);
        font-size: clamp(.86rem, 3.05vw, .98rem);
    }

    #services-animation .anim-services-mobile-bubble.bubble-bottom .service-text {
        width: min(65vw, 360px);
        font-size: clamp(.8rem, 2.85vw, .92rem);
    }
}