/* ------------------------------------------------------------ *\
 Fonts
\* ------------------------------------------------------------ */

@font-face {
    font-family: 'Nimbus Sans D OT';
    src:
        url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/NimbusSansDOT-BoldCond.woff2') format('woff2'),
        url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/NimbusSansDOT-BoldCond.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------ *\
 Base
\* ------------------------------------------------------------ */

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

*:before,
*:after {
    box-sizing: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
main {
    display: block;
}

template {
    display: none;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-size-adjust: none;
}

img,
iframe,
video,
audio,
object {
    max-width: 100%;
}

img,
iframe {
    border: 0 none;
}

img {
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

img,
[style*='background-image'] {
    image-rendering: -webkit-optimize-contrast;
}

b,
strong {
    font-weight: bold;
}

address {
    font-style: normal;
}

svg:not(:root) {
    overflow: hidden;
}

a,
button,
input[type='submit'],
input[type='button'],
input[type='reset'],
input[type='file'],
input[type='image'],
label[for] {
    cursor: pointer;
}

a[href^='tel'],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input[type='button'],
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='color'],
textarea,
a[href^='tel'] {
    appearance: none;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
    appearance: none;
}

textarea {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

button,
select {
    text-transform: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

nav ul,
nav ol {
    list-style: none outside none;
}

input::placeholder {
    color: inherit;
    opacity: 1;
}
textarea::placeholder {
    color: inherit;
    opacity: 1;
}

input:-webkit-autofill {
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
    --ff-base: 'Work Sans', sans-serif;
    --ff-secondary: 'Nimbus Sans D OT', sans-serif;
    --c-base: #092d4d;
    --c-beige: #f3f4f6;
    --c-orange: #fa4616;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-size-adjust: none;
    min-width: 320px;
    font-family: var(--ff-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-base);
    letter-spacing: 0.013em;
}

.scroll-lock {
    overflow: hidden;
}

.level-1,
h1,
.level-2,
h2,
.level-3,
h3,
.level-4,
h4,
.level-5,
h5,
.level-6,
h6 {
    font-weight: 700;
    font-family: var(--ff-secondary);
    margin-block: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

.level-1,
h1 {
    font-size: 64px;
    line-height: 0.8;
}

.level-2,
h2 {
    font-size: 48px;
    line-height: 0.8;
}

.level-3,
h3 {
    font-size: 32px;
}

.level-4,
h4 {
    font-size: 26px;
}

.level-5,
h5 {
    font-size: 22px;
}

.level-6,
h6 {
    font-size: 18px;
}

@media (max-width: 1023px) {
    .level-1,
    h1 {
        font-size: 54px;
    }

    .level-2,
    h2 {
        font-size: 40px;
    }

    .level-3,
    h3 {
        font-size: 26px;
    }

    .level-4,
    h4 {
        font-size: 24px;
    }

    .level-5,
    h5 {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .level-1,
    h1 {
        font-size: 44px;
    }

    .level-2,
    h2 {
        font-size: 34px;
    }

    .level-3,
    h3 {
        font-size: 22px;
    }

    .level-4,
    h4 {
        font-size: 20px;
    }

    .level-5,
    h5 {
        font-size: 18px;
    }

    .level-6,
    h6 {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------ *\
 Shell
\* ------------------------------------------------------------ */

.shell {
    --shell-max-width: 1280px;
    --shell-gutter: 20px;

    max-width: calc(var(--shell-max-width) + (var(--shell-gutter) * 2));
    padding-inline: var(--shell-gutter);
    margin-inline: auto;
    width: 100%;
}

/* ------------------------------------------------------------ *\
 Header
\* ------------------------------------------------------------ */

.header {
    padding-block: 14px;
}

.header .header__inner {
    display: flex;
    justify-content: flex-end;
}

.header .shell {
    --shell-max-width: 100%;
    --shell-gutter: 32px;
}

/* ------------------------------------------------------------ *\
 Dropdown lang
\* ------------------------------------------------------------ */

.dropdown-lang {
    position: relative;
    font-size: 14px;
    z-index: 100;
    font-weight: 500;
}

.dropdown-lang .dropdown__trigger {
    display: flex;
    align-items: center;
    position: relative;
    gap: 2px;
    z-index: 1;
    text-decoration: none;
    border: none;
    border-radius: 999rem;
    background-color: var(--c-beige);
    padding: 8px 12px;
    font-weight: 500;
}

.dropdown-lang ul {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: var(--c-white);
    border-radius: 2rem;
    transition: opacity var(--t-duration);
    opacity: 0;
    pointer-events: none;
    list-style: none;
    width: max-content;
    min-width: 120px;
    text-align: center;
    background-color: var(--c-beige);
    border-radius: 10px;
    padding-block: 6px;
    box-shadow: 0px 1px 8px -3px #000000ab;
}

.dropdown-lang ul a {
    display: inline-block;
    padding-block: 6px;
    padding-inline: 10px;
    transition:
        background-color 0.3s,
        color 0.3s;
    text-decoration: none;
    color: inherit;
    width: 100%;
    border-radius: 4px;
}

.dropdown-lang ul a:hover {
    background-color: var(--c-base);
    color: var(--c-beige);
}

.dropdown-lang.is-open ul {
    opacity: 1;
    pointer-events: auto;
}

/* ------------------------------------------------------------ *\
 Hero
 * IFRAME FIX: min-height uses px not dvh
\* ------------------------------------------------------------ */

.hero {
    display: flex;
    align-items: flex-end;
    position: relative;
    min-height: 600px;
    padding-block: 80px 162px;
}

.hero .hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero .hero__image:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(10deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
}

.hero .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .hero__content {
    position: relative;
    z-index: 1;
    color: #fff;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 span {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .hero {
        min-height: 500px;
        padding-block: 60px 100px;
    }
}

/* ------------------------------------------------------------ *\
 Section intro
\* ------------------------------------------------------------ */

.section-intro {
    display: flex;
    background-color: #fff;
    margin-top: -30px;
    position: relative;
    border-radius: 30px 30px 0 0;
    padding-block: 120px;
}

.section-intro .section__media {
    aspect-ratio: 16/9;
    max-width: 840px;
    margin-inline: auto;
    margin-block: -90px 56px;
}

.section-intro .section__media iframe {
    width: 100%;
    height: 100%;
}

.section-intro .section__content {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.section-intro h2 {
    color: var(--c-orange);
    margin-bottom: 22px;
}

.section-intro h3 {
    margin-bottom: 22px;
}

@media (max-width: 1023px) {
    .section-intro {
        padding-block: 100px;
    }
}

@media (max-width: 767px) {
    .section-intro {
        padding-block: 60px;
    }

    .section-intro .section__media {
        aspect-ratio: 4/3;
    }
}

/* ------------------------------------------------------------ *\
 Section 
\* ------------------------------------------------------------ */

.section {
    background-color: var(--c-beige);
    padding-block: 120px 150px;
}

.section .section__head {
    text-align: center;
    margin-bottom: 66px;
}

.section .section__head h2 {
    color: var(--c-orange);
}

.section .section__head p {
    margin-bottom: 6px;
}

.section .section__body {
    max-width: 840px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .section {
        padding-block: 100px;
    }
}

@media (max-width: 767px) {
    .section {
        padding-block: 60px 100px;
    }

    .section .section__head {
        margin-bottom: 40px;
    }
}

/* ------------------------------------------------------------ *\
 Pretitle
\* ------------------------------------------------------------ */

.pretitle {
    text-transform: uppercase;
}

/* ------------------------------------------------------------ *\
 Timeline
\* ------------------------------------------------------------ */

.timeline .timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
}

.timeline .timeline__item + .timeline__item {
    margin-top: 45px;
}

.timeline .timeline__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    opacity: 0.5;
    border: 2px solid var(--c-base);
    font-size: 32px;
    font-family: var(--ff-secondary);
    flex-shrink: 0;
    font-weight: 700;
}

.timeline .timeline__aside {
    display: flex;
    gap: 8px;
}

.timeline .timeline__content {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    flex: 1;
    position: relative;
}

.timeline .timeline__content:before {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--c-base);
    opacity: 0.2;
}

.timeline .timeline__info {
    font-size: 12px;
}

.timeline .timeline__date {
    font-family: var(--ff-secondary);
    text-transform: uppercase;
    font-size: 24px;
    margin-left: auto;
    letter-spacing: 0;
    font-weight: 700;
}

.timeline .timeline__date span {
    opacity: 0.5;
}

@media (max-width: 767px) {
    .timeline .timeline__item + .timeline__item {
        margin-top: 36px;
    }

    .timeline .timeline__item {
        gap: 0;
        align-items: center;
        flex-direction: column;
    }

    .timeline .timeline__aside {
        width: 100%;
        gap: 0;
        align-items: center;
    }

    .timeline .timeline__title {
        width: 100%;
        text-align: center;
        margin-left: -38px;
        padding-inline: 46px;
    }

    .timeline .timeline__index {
        font-size: 24px;
        width: 38px;
        height: 38px;
    }

    .timeline .timeline__date {
        font-size: 22px;
        margin-left: 0;
    }

    .timeline .timeline__content {
        width: 100%;
        flex-direction: column;
        gap: 6px;
    }

    .timeline .timeline__content:before {
        bottom: 0;
    }
}

/* ------------------------------------------------------------ *\
 Section cards
\* ------------------------------------------------------------ */

.section-cards {
    display: flex;
}

.section-cards .section__wrapper {
    border-radius: 30px;
    background-color: var(--c-orange);
    padding-block: 120px 150px;
    padding-inline: 30px;
    margin-top: -34px;
}

.section-cards .section__inner {
    max-width: 840px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

.section-cards .section__head {
    margin-bottom: 90px;
}

.section-cards .section__head p {
    margin-bottom: 6px;
}

.section-cards .section__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 1023px) {
    .section-cards .section__wrapper {
        padding-block: 100px;
    }
}

@media (max-width: 767px) {
    .section-cards .section__wrapper {
        padding-block: 60px;
        padding-inline: 20px;
    }

    .section-cards .section__head {
        margin-bottom: 60px;
    }

    .section-cards .section__body {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------ *\
 Card
\* ------------------------------------------------------------ */

.card {
    background-color: var(--c-base);
    color: #fff;
    border-radius: 30px;
}

.card .card__title {
    text-shadow:
        0px 1px var(--c-base),
        0px 2px var(--c-base),
        0px 3px var(--c-base),
        0px 4px var(--c-base);
    transform: rotate(340deg) skew(353deg, 8deg) translateY(-12px);
    font-style: italic;
    margin-bottom: 10px;
}

.card .card__separator {
    display: inline-block;
    width: 16px;
    height: 2px;
    background-color: var(--c-orange);
}

.card .card__content {
    padding-block: 18px 48px;
    padding-inline: 48px;
}

@media (max-width: 1023px) {
    .card .card__content {
        padding-inline: 30px;
    }
}

@media (max-width: 767px) {
    .card .card__title {
        transform: rotate(340deg) skew(353deg, 8deg) translateY(0px);
    }

    .card .card__content {
        padding-inline: 20px;
        padding-block: 20px 30px;
    }
}

/* ------------------------------------------------------------ *\
 Section steps
\* ------------------------------------------------------------ */

.section-steps {
    padding-block: 176px 160px;
}

.section-steps .section__head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 76px;
}

.section-steps .section__head h2 {
    transform: rotate(340deg) skew(338deg, 9deg);
    color: var(--c-orange);
    font-size: 80px;
    text-shadow:
        0px 1px var(--c-base),
        0px 2px var(--c-base),
        0px 3px var(--c-base),
        0px 4px var(--c-base);
}

.section-steps .section__steps {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 70px;
}

.section-steps .section__content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.section-steps .section__content h2 {
    margin-bottom: 22px;
}

.section-steps .section__content p {
    margin-bottom: 26px;
}

@media (max-width: 1023px) {
    .section-steps {
        padding-block: 134px;
    }

    .section-steps .section__head h2 {
        font-size: 60px;
    }
}

@media (max-width: 767px) {
    .section-steps {
        padding-block: 100px 60px;
    }

    .section-steps .section__head h2 {
        font-size: 48px;
    }

    .section-steps .section__steps {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-inline: auto;
        margin-bottom: 50px;
    }
}

/* ------------------------------------------------------------ *\
 Card step
\* ------------------------------------------------------------ */

.card-step {
    aspect-ratio: 1/1;
    border-radius: 30px;
    padding: 14px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.card-step .card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.card-step .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-step h2 {
    position: relative;
    text-align: center;
    transform: rotate(340deg) skew(338deg, 9deg);
}

/* ------------------------------------------------------------ *\
 Btn
\* ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    background-color: var(--c-orange);
    color: #fff;
    border-radius: 999rem;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--ff-secondary);
    padding-inline: 24px;
    padding-block: 9px;
    transition: background-color 0.3s;
    line-height: 1;
    text-transform: uppercase;
}

.btn:hover {
    background-color: var(--c-base);
}

@media(max-width: 767px) {
    .btn {
        font-size: 26px;
    }
}

/* ------------------------------------------------------------ *\
 Footer
\* ------------------------------------------------------------ */

.footer {
    min-height: 60px;
    background-color: var(--c-base);
}

/* ------------------------------------------------------------ *\
    Modal — now a simple inline block
    The JS external file still uses .js-modal / .is-open classes,
    so we keep them but make modal just a block element
\* ------------------------------------------------------------ */

.modal {
    display: none;
    width: 100%;
}

.modal.is-open {
    display: block;
}

.modal .modal__inner {
    position: relative;
    width: 100%;
}

.modal .modal__body {
    width: 100%;
}

.modal .modal__btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    top: 12px;
    right: 12px;
    border: none;
    appearance: none;
    background: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    transition: background-color 0.3s;
    background-color: #fff;
}

.modal .modal__btn-close svg {
    display: block;
}

.modal .modal__btn-close:hover {
    background-color: var(--c-base);
}

.modal .modal__btn-close:hover svg path {
    fill: var(--c-beige);
}

@media(max-width: 767px) {
    .modal .modal__btn-close {
        width: 30px;
        height: 30px;
        top: 6px;
        right: 6px;
    }
}

/* ------------------------------------------------------------ *\
    Form
    No vh units — all content-driven heights
\* ------------------------------------------------------------ */

.form,
form,
.form__body,
.form__steps {
    width: 100%;
}

.form .form__step {
    display: none;
    position: relative;
    isolation: isolate;
}

.form .form__step.is-active {
    display: block;
}

.form .form__error {
    font-size: 12px;
    color: #ec3131;
    margin-top: 4px;
}

.form .form__step--alt {
    padding-block: 80px;
}

/* Two-column grid — left col drives height, right col clips image to match */
.form .form__grid {
    display: flex;
    align-items: stretch;
}

.form .form__grid-col:first-child {
    flex: 0 0 51%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

.form .form__grid-col:nth-child(2) {
    flex: 0 0 49%;
    position: relative;
    overflow: hidden;
}

.form .form__image {
    position: absolute;
    top: 0;
    left: -30px;
    width: calc(100% + 30px);
    height: 100%;
}

.form .form__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.form .form__section {
    border-radius: 0 32px 32px 0;
    background-color: #fff;
    padding: 40px 40px 0 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form .form__section-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 46px;
    padding-bottom: 40px;
    margin-inline: -40px;
    padding-inline: 40px;
    overflow-y: auto;
}

.form .form__section--alt {
    max-width: 560px;
    margin-inline: auto;
    border-radius: 32px;
    padding-block: 54px;
    padding-inline: 60px;
    display: block;
}

.form .form__section--alt .form__section-main {
    padding-block: 0;
    overflow-y: visible;
}

.form .form__section--alt .form__group-head {
    text-align: center;
}

.form .form__section--alt .form__section-actions {
    justify-content: space-between;
}

.form .form__section-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 486px;
    margin: 0 auto;
    width: 100%;
}

.form .form__section-head {
    padding-bottom: 32px;
    border-bottom: 1px solid #e5e5e5;
}

.form .form__section-foot {
    margin-top: auto;
    font-size: 12px;
    padding-top: 16px;
}

.form .form__section-foot a {
    font-weight: 700;
    color: inherit;
    transition: color .3s;
}

.form .form__section-foot a:hover {
    color: var(--c-orange);
}

.form .form__section-entry {
    border-top: 1px solid #e5e5e5;
    padding-top: 16px;
}

.form .form__group-head {
    font-family: var(--ff-base);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.form .form__group-head h2 {
    margin-bottom: 12px;
}

.form .form__group-body {
    margin-bottom: 35px;
}

.form .form__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 10px;
    display: inline-block;
    margin-left: 8px;
}

.form .form__required {
    color: var(--c-orange);
}

.form .form__cols {
    display: flex;
    gap: 8px;
}

.form .form__col {
    flex: 1;
}

.form .form__control.is-invalid .field {
    border-color: #ec3131;
}

.form .form__section-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 22px;
}

.form .form__section-actions:last-child {
    margin-bottom: 0;
}

.form .form__row + .form__row {
    margin-top: 10px;
}

.form .form__row + .form__row--alt {
    margin-top: 28px;
}

.form .form__checkboxes {
    padding-left: 10px;
}

.form .form__checkboxes > * + * {
    margin-top: 10px;
}

.form .form__btn {
    border: none;
    display: flex;
    gap: 12px;
    padding-inline: 22px 14px;
    padding-block: 7px;
    border: 2px solid var(--c-orange);
    transition: color, background-color, border-color;
    transition-duration: 0.3s;
}

.form .form__btn:hover {
    border-color: var(--c-base);
}

.form .form__btn svg path {
    transition: stroke 0.3s;
}

.form .form__btn--prev {
    background-color: #fff;
    color: var(--c-orange);
    padding-inline: 12px 24px;
}

.form .form__btn--prev svg path {
    stroke: var(--c-orange);
}

.form .form__btn--prev:hover {
    background-color: var(--c-base);
    color: #fff;
}

.form .form__btn--prev:hover svg path {
    stroke: #fff;
}

.form .form__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.form .form__background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-base);
    opacity: 0.2;
}

.form .form__background--alt:before {
    content: none;
}

.form .form__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form .form__summary-group {
    border-top: 1px solid #e5e5e5;
    padding-block: 20px;
}

.form .form__summary-title {
    font-size: 28px;
    line-height: 0.8;
    margin-bottom: 4px;
}

.form .form__summary-list {
    list-style: none;
    letter-spacing: 0;
}

.form .form__summary-list a {
    color: inherit;
    transition: color .3s;
}

.form .form__summary-list a:hover {
    color: var(--c-orange);
}

.form .form__summary-label {
    opacity: 0.5;
    font-size: 12px;
}

.form .form__summary-value {
    font-size: 14px;
    font-weight: 600;
    margin-left: 3px;
}

.form .form__summary-text {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
}

.form .form__summary-text p {
    margin-bottom: 6px;
}

.form .form__summary-text ul {
    padding-left: 13px;
    list-style: none;
    margin-bottom: 10px;
}

.form .form__summary-text li {
    position: relative;
    padding-left: 10px;
}

.form .form__summary-text li:before {
    content: '';
    width: 4px;
    height: 4px;
    position: absolute;
    top: 8px;
    left: 0;
    border-radius: 50%;
    background-color: currentColor;
}

.form .form__message {
    max-width: 700px;
    margin: auto;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 20px;
    padding: 80px 20px;
}

.form .form__message h2 {
    font-size: 66px;
}

@media (max-width: 1023px) {
    .form .form__section-inner {
        max-width: 380px;
    }

    .form .form__btn {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .form .form__grid {
        min-height: 0;
        display: block;
    }

    .form .form__grid-col:first-child {
        width: 100%;
        flex: unset;
    }

    .form .form__grid-col:nth-child(2) {
        display: none;
    }

    .form .form__section {
        border-radius: 0;
        padding-top: 20px;
        padding-inline: 20px;
    }

    .form .form__section--alt {
        padding-block: 40px;
        padding-inline: 20px;
        border-radius: 20px;
    }

    .form .form__section-inner {
        max-width: 500px;
    }

    .form .form__btn {
        font-size: 22px;
        gap: 8px;
    }

    .form .form__section-head {
        padding-bottom: 20px;
    }

    .form .form__section-main {
        padding-block: 20px;
        padding-inline: 20px;
        margin-inline: -20px;
        overflow-y: visible;
    }

    .form .form__cols {
        flex-wrap: wrap;
        gap: 12px;
    }

    .form .form__col {
        flex: 0 0 100%;
    }
}

/* ------------------------------------------------------------ *\
    Field
\* ------------------------------------------------------------ */

.field,
.select select {
    width: 100%;
    border-radius: 999rem;
    border: 1px solid #b5c0ca;
    font-size: 16px;
    color: rgba(9, 45, 77, 0.6);
    height: 38px;
    background-color: #f3f4f6;
    padding: 12px;
    letter-spacing: 0.01em;
}

.field:focus-within {
    border-color: var(--c-base);
}

/* ------------------------------------------------------------ *\
    Select
\* ------------------------------------------------------------ */

.select {
    position: relative;
}

.select:before {
    content: '';
    background: url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/images/icon-arrow-down.svg') no-repeat center;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    background-size: contain;
}

.select select {
    appearance: none;
    padding-block: 0;
}

/* ------------------------------------------------------------ *\
    Progress
\* ------------------------------------------------------------ */

.progress {
    display: flex;
    gap: 8px;
}

.progress .progress__item {
    flex: 0 0 26.8%;
    position: relative;
}

.progress .progress__item + .progress__item:before {
    content: '';
    position: absolute;
    top: 16px;
    right: calc(100% + 8px);
    width: calc(100% - 44px);
    height: 2px;
    border-top: 2px dashed var(--c-base);
    opacity: 0.5;
}

.progress .progress__item:last-child .progress__title {
    padding-right: 50px;
    opacity: 0.5;
}

.progress .progress__index {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-secondary);
    font-size: 20px;
    width: 36px;
    height: 36px;
    border: 2px solid var(--c-base);
    border-radius: 50%;
    margin-bottom: 10px;
    opacity: 0.5;
    position: relative;
    font-weight: 700;
}

.progress .progress__title {
    font-size: 20px;
    padding-inline: 4px 20px;
    line-height: 0.8;
    opacity: 0.5;
}

.progress .progress__item.is-active {
    opacity: 1;
}

.progress .progress__item.is-active .progress__title {
    color: var(--c-orange);
    opacity: 1;
}

.progress .progress__item.is-active .progress__index {
    background-color: var(--c-orange);
    border-color: var(--c-orange);
    color: #fff;
    opacity: 1;
}

.progress .progress__item.is-active:before {
    opacity: 1;
    border-style: solid;
    border-width: 1px;
}

.progress .progress__item.is-active + .progress__item:before {
    border-width: 1px;
    border-color: var(--c-orange);
    border-style: solid;
    opacity: 1;
}

.progress .progress__item.is-complete .progress__title,
.progress .progress__item.is-complete .progress__index {
    opacity: 1;
}

.progress .progress__item.is-complete:before {
    opacity: 1;
    border-style: solid;
    border-width: 1px;
}

.progress .progress__item.is-complete .progress__index {
    background-color: var(--c-base);
    color: #fff;
}

.progress .progress__item.is-active:last-child:before {
    width: 21%;
    border-style: dashed;
    border-color: var(--c-orange);
    right: calc(100% + 5px);
}

.progress .progress__item.is-active:last-child:after {
    content: '';
    position: absolute;
    top: 11px;
    right: calc(100% + 37px);
    width: 12px;
    height: 12px;
    background-color: var(--c-orange);
    border-radius: 50%;
}

.progress:has(.progress__item.is-active:last-child) .progress__item:nth-child(3):after {
    content: '';
    position: absolute;
    top: 16px;
    left: 44px;
    width: 31%;
    height: 2px;
    border-top: 2px solid var(--c-base);
}

@media (max-width: 1023px) {
    .progress .progress__index {
        width: 30px;
        height: 30px;
    }

    .progress .progress__item + .progress__item:before {
        top: 13px;
        right: calc(100% + 13px);
    }

    .progress .progress__item:last-child:before {
        right: calc(100% + 8px);
    }

    .progress .progress__title {
        font-size: 18px;
    }

    .progress:has(.progress__item.is-active:last-child) .progress__item:nth-child(3):after {
        top: 13px;
        left: 36px;
    }

    .progress .progress__item.is-active:last-child:before {
        right: calc(100% + 2px);
    }

    .progress .progress__item.is-active:last-child:after {
        top: 8px;
        right: 126%;
    }
}

@media(max-width: 767px) {
    .progress .progress__item.is-active:last-child:before {
        width: 25%;
        right: calc(100% + 4px);
    }

    .progress .progress__item.is-active:last-child:after {
        right: 133%;
    }
}

@media(max-width: 474px) {
    .progress {
        gap: 4px;
    }

    .progress .progress__title {
        font-size: 13px;
        line-height: 1;
    }

    .progress .progress__index {
        font-size: 16px;
        width: 24px;
        height: 24px;
        padding-top: 2px;
    }

    .progress .progress__item + .progress__item:before {
        top: 10px;
    }

    .progress .progress__item.is-active:last-child:after {
        right: 130%;
        top: 5px;
    }

    .progress:has(.progress__item.is-active:last-child) .progress__item:nth-child(3):after {
        top: 10px;
        left: 30px;
    }
}

@media(max-width:374px) {
    .progress .progress__item.is-active:last-child:after {
        right: 124%;
    }

    .progress .progress__item:last-child:before {
        right: calc(100% + 3px);
    }
}

/* ------------------------------------------------------------ *\
    Checkbox 
\* ------------------------------------------------------------ */

.checkbox {
    position: relative;
}

.checkbox a {
    color: inherit;
}

.checkbox a:hover {
    text-decoration: none;
}

.checkbox .checkbox__input {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    z-index: 100;
    opacity: 0;
    cursor: pointer;
}

.checkbox .checkbox__input:checked + .checkbox__label:before {
    background-color: var(--c-base);
}

.checkbox .checkbox__input:checked + .checkbox__label:after {
    opacity: 1;
}

.checkbox .checkbox__label {
    position: relative;
    padding-left: 30px;
    letter-spacing: 0;
}

.checkbox .checkbox__label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--c-base);
}

.checkbox .checkbox__label:after {
    content: '';
    position: absolute;
    top: 6px;
    left: 5px;
    width: 10px;
    height: 6px;
    border-radius: 2px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(128deg);
    opacity: 0;
}

/* ------------------------------------------------------------ *\
    Module ingredient
\* ------------------------------------------------------------ */

.module-ingredient {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding-block: 26px 22px;
}

.module-ingredient .module__label {
    margin-bottom: 34px;
}

.module-ingredient .module__head {
    transform: rotate(338deg) skew(338deg, 10deg);
    max-width: 387px;
    margin-inline: auto;
    margin-bottom: -5px;
}

.module-ingredient .module__title {
    font-size: 64px;
    margin-bottom: 12px;
    animation: skew-y-shaking 1.4s forwards infinite;
    text-shadow: 0px 1px var(--c-base),
        0px 2px var(--c-base),
        0px 3px var(--c-base),
        0px 4px var(--c-base);
}

.module-ingredient .module__head h3 {
    font-size: 48px;
    line-height: 0.75;
}

.module-ingredient .module__main {
    position: relative;
    margin-bottom: 20px;
}

.module-ingredient .module__image {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.module-ingredient .module__image:before {
    content: '';
    background: url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/images/shaker-shadow.svg') 0 0 no-repeat;
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 100%;
    height: 60px;
    background-size: 100% 100%;
    transform: translate(-50%, 0px);
    animation: float-shadow 6s ease-in-out infinite forwards;
}

.module-ingredient .module__note {
    position: absolute;
    top: 37%;
    right: 79%;
    width: 222px;
    line-height: 1;
    text-align: right;
    font-size: 28px;
}

.module-ingredient .module__arrow {
    position: absolute;
    top: 6px;
    right: 80%;
    width: 70px;
}

.module-ingredient .module__note span {
    position: relative;
}

.module-ingredient .module__note span:before {
    content: '';
    position: absolute;
    top: 87%;
    left: 0;
    width: 100%;
    height: 12px;
    background: url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/images/line-decoration.svg') 0 0 no-repeat;
}

.module-ingredient .module__image img:first-child {
    position: relative;
    margin-bottom: -38px;
    transition: transform 0.3s;
}

.module-ingredient .module__image-wrapper {
    position: relative;
    cursor: pointer;
}

.module-ingredient .module__image-label {
    font-size: 32px;
    transition: opacity 0.3s;
    color: #fff;
    background-color: var(--c-base);
    border-radius: 999rem;
    padding: 9px 24px;
    text-transform: uppercase;
    font-family: var(--ff-secondary);
    font-weight: 700;
    display: inline-block;
    position: absolute;
    top: 54%;
    left: 50%;
    line-height: 1;
    z-index: 2;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.module-ingredient .module__image-ingredient {
    position: absolute;
    top: 4%;
    left: 50%;
    z-index: 1;
    width: 47%;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
    transform: translate(-50%, 20%) scale(0.2);
}

.module-ingredient .module__image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s;
    opacity: 0;
}

.module-ingredient .module__actions {
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.module-ingredient .module__btn {
    border: 1px solid var(--c-base);
    background-color: var(--c-base);
    border-radius: 32px;
    font-size: 32px;
    padding-block: 18px;
    padding-inline: 24px 12px;
    font-family: var(--ff-secondary);
    line-height: 1;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.module-ingredient .module__btn-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.module-ingredient .module__btn-info {
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    text-align: left;
}

.module-ingredient .module__btn[disabled] {
    opacity: 0.5;
    background-color: transparent;
    border-color: #fff;
}

.module-ingredient .module__description {
    font-size: 18px;
    letter-spacing: 0;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.12;
}

.module-ingredient .module__description strong {
    position: relative;
    font-weight: 700;
    color: var(--c-base);
    background: url('https://html-deployments-2c.s3.eu-central-1.amazonaws.com/cointreau-2026-03-11-1773225839/PlquLkt3xaHhLgDE/assets/images/highlight-decoration.svg') 0 0 no-repeat;
    background-size: 100% 120%;
    background-position: 50% 50%;
}

.module-ingredient .module__image-wrapper.is-shaking .module__image {
    animation: shaker 0.8s linear forwards;
}

.module-ingredient .module__image-wrapper.is-revealed .module__image {
    animation: none;
    transform: translateY(60px) rotate(-7deg);
}

.module-ingredient .module__image-ingredient.is-visible {
    opacity: 1;
    transform: translateX(-70%) scale(1);
}

.module-ingredient .module__image-wrapper.is-revealed .module__image-label {
    opacity: 1;
}

.module-ingredient .module__image-wrapper.is-revealed .module__image img:first-child {
    transform: translate(152px, -56px) rotate(71deg) scale(0.75);
}

.module-ingredient .module__image-wrapper.is-revealed .module__image img:nth-child(2) {
    position: relative;
    transition: transform 0.3s;
    transform: translate(0px, 0px) rotate(-2deg) scale(0.75);
}

.module-ingredient .module__image-wrapper.is-revealed .module__image-background {
    opacity: 1;
}

@media (max-width: 1023px) {
    .module-ingredient .module__head { margin-bottom: 30px; }
    .module-ingredient .module__title { font-size: 46px; }
    .module-ingredient .module__head h3 { font-size: 34px; }
    .module-ingredient .module__note {
        font-size: clamp(20px, 2.5vw, 26px);
        width: 24vw;
        right: 69%;
        top: auto;
        bottom: 20px;
    }
    .module-ingredient .module__btn { font-size: 28px; }
    .module-ingredient .module__arrow { right: 84%; }
}

@media (max-width: 767px) {
    .module-ingredient { padding-inline: 20px; }
    .module-ingredient .module__image-wrapper {
        width: 500px;
        left: 50%;
        transform: translateX(-50%);
    }
    .module-ingredient .module__arrow { width: 16vw; max-width: 70px; right: 84%; }
    .module-ingredient .module__note { width: 28vw; font-size: clamp(13px, 2.5vw, 20px); bottom: 10px; }
    .module-ingredient .module__image-label { font-size: 22px; }
    .module-ingredient .module__description { font-size: 16px; }
    .module-ingredient .module__btn { font-size: 18px; padding-block: 12px; padding-inline: 18px; border-radius: 24px; }
    .module-ingredient .module__btn-info { font-size: 16px; }
}

/* ------------------------------------------------------------ *\
 Processing spinner
\* ------------------------------------------------------------ */

.processing-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.processing-spinner__svg {
    width: 56px;
    height: 56px;
    animation: spinner-rotate 1.4s linear infinite;
}
.processing-spinner__circle {
    stroke: #092D4D;
    stroke-linecap: round;
    stroke-dasharray: 80;
    stroke-dashoffset: 60;
    animation: spinner-dash 1.4s ease-in-out infinite;
}

@keyframes spinner-rotate {
    100% { transform: rotate(360deg); }
}
@keyframes spinner-dash {
    0%   { stroke-dashoffset: 80; }
    50%  { stroke-dashoffset: 20; }
    100% { stroke-dashoffset: 80; }
}

@keyframes skew-y-shaking {
    0% { transform: skewY(-6deg) rotate(-3deg); }
    5% { transform: skewY(6deg) rotate(3deg); }
    10% { transform: skewY(-4deg) rotate(-3deg); }
    15% { transform: skewY(4deg) rotate(3deg); }
    20% { transform: skewY(0deg) rotate(0deg); }
    100% { transform: skewY(0deg) rotate(0deg); }
}

@keyframes float {
    0% { transform: translatey(0px); }
    50% { transform: translatey(-20px); }
    100% { transform: translatey(0px); }
}

@keyframes shaker {
    0% { transform: translateY(0px) rotate(0deg); }
    5% { transform: translateY(-60px) rotate(7deg); }
    10% { transform: translateY(60px) rotate(-7deg); }
    20% { transform: translateY(-60px) rotate(7deg); }
    30% { transform: translateY(60px) rotate(-7deg); }
    40% { transform: translateY(-60px) rotate(7deg); }
    50% { transform: translateY(60px) rotate(-7deg); }
    60% { transform: translateY(-60px) rotate(7deg); }
    70% { transform: translateY(60px) rotate(-7deg); }
    80% { transform: translateY(-60px) rotate(7deg); }
    90% { transform: translateY(60px) rotate(-7deg); }
    100% { transform: translateY(60px) rotate(-7deg); }
}

@keyframes float-shadow {
    0% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, 26px); }
    100% { transform: translate(-50%, 0px); }
}