/* ==========================================================================
   Invitamu — landing page, "Noir" design
   --------------------------------------------------------------------------
   Source file:   less/landingwebsite.less
   Page loads:    css/landingwebsite.css  (compiled — do not edit by hand)

   After editing the .less file, recompile from the project folder with:

       npx lessc less/landingwebsite.less css/landingwebsite.css

   Mobile first: base styles are for phones, then min-width media queries
   layer on the larger layouts —
       600px  large phones        768px  tablets
       992px  laptops (desktop header, side-by-side sections)
       1200px desktops
   ========================================================================== */

// Colours
@black:         #000000;
@ink:           #0A0A0A;
@white:         #FFFFFF;
@tile:          #F2F2F2;
@line-light:    #E0E0E0;
@line-dark:     #2A2A2A;
@line-darker:   #1F1F1F;
@muted-light:   #5E5E5E;   // secondary text on white (6.4:1)
@muted-dark:    #9A9A9A;   // secondary text on black (7.4:1)
@soft-dark:     #C7C7C7;   // body text on black
@body-light:    #3A3A3A;   // body text on white

// Type
@font-sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;

// Layout & motion
@gutter: clamp(20px, 4.5vw, 64px);
@ease:   cubic-bezier(0.22, 1, 0.36, 1);

@topbar-h:    60px;
@topbar-h-lg: 76px;
@catnav-h:    44px;
@catnav-h-lg: 46px;


/* Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    // Anchored sections stop just below the sticky header.
    scroll-padding-top: @topbar-h;

    @media (min-width: 992px) {
        scroll-padding-top: (@topbar-h-lg + @catnav-h-lg);
    }

    &.is-menu-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: @white;
    color: @ink;
    font-family: @font-sans;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[hidden] {
    display: none !important;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

h1, h2, h3, p, ol, ul, figure {
    margin: 0;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 14px 20px;
    background: @white;
    color: @black;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateY(-160%);
    transition: transform 0.25s @ease;

    &:focus {
        transform: none;
    }
}

.nowrap {
    white-space: nowrap;
}

.br-md {
    display: none;

    @media (min-width: 768px) {
        display: inline;
    }
}


/* Shared pieces
   ========================================================================== */

.eyebrow {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.26em;
    text-transform: uppercase;

    @media (min-width: 768px) {
        font-size: 12px;
    }

    &--muted {
        color: @muted-light;
    }

    &--dim {
        color: @muted-dark;
    }
}

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 @gutter;
    text-align: center;
}

.section-title {
    font-size: clamp(1.375rem, calc(1.1rem + 0.8vw), 1.875rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 32px;
    border: 1px solid transparent;
    font-family: @font-sans;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.35s @ease, color 0.35s @ease, border-color 0.35s @ease;

    // Very narrow phones: let long labels wrap instead of overflowing.
    @media (max-width: 599.98px) {
        padding-top: 14px;
        padding-bottom: 14px;
        white-space: normal;
    }

    &--sm {
        min-height: 44px;
        padding: 0 22px;
    }

    // White button, used on black backgrounds.
    &--light {
        background: @white;
        border-color: @white;
        color: @black;
    }

    // Outlined white button, used on black backgrounds.
    &--outline-light {
        background: transparent;
        border-color: @white;
        color: @white;
    }

    // Black button, used on white backgrounds.
    &--dark {
        background: @black;
        border-color: @black;
        color: @white;
    }

    @media (hover: hover) and (pointer: fine) {
        &--light:hover {
            background: transparent;
            color: @white;
        }

        &--outline-light:hover {
            background: @white;
            color: @black;
        }

        &--dark:hover {
            background: @white;
            color: @black;
        }
    }
}

// Uppercase text link with an underline that wipes away on hover.
.link {
    display: inline-block;
    padding: 10px 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% ~"/" 100% 1px;
    transition: background-size 0.45s @ease;

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-position: 100% 100%;
            background-size: 0 1px;
        }
    }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;

    svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
    }
}


/* Header
   ========================================================================== */

.site-header {
    position: sticky;
    // On phones only the top bar stays pinned; the section bar scrolls away.
    top: -@catnav-h;
    z-index: 50;
    background: @black;
    color: @white;

    @media (min-width: 992px) {
        top: 0;
    }
}

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: @topbar-h;
    padding: 0 12px 0 8px;

    @media (min-width: 992px) {
        height: @topbar-h-lg;
        padding: 0 40px;
    }

    &__menu {
        justify-self: start;
    }

    &__brand {
        justify-self: center;
        padding: 8px 0;

        img {
            width: auto;
            height: 18px;

            @media (min-width: 992px) {
                height: 24px;
            }
        }
    }

    &__actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 28px;
    }

    &__link {
        display: none;
        padding: 12px 0;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;

        @media (min-width: 992px) {
            display: inline-block;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: @muted-dark;
            }
        }
    }

    // On phones the top bar is tight: gather the actions closer and show only
    // the language to switch to (both are listed in the menu).
    &__actions {
        @media (max-width: 991.98px) {
            gap: 6px;

            .lang__link[aria-current] {
                display: none;
            }

            .lang__link::before {
                display: none;
            }

            .lang__link {
                min-width: 30px;
                padding: 0 4px;
            }

            .topbar__more {
                display: none;
            }
        }
    }

    // On phones the Enquire button reads as a quiet text link.
    &__enquire {
        @media (max-width: 991.98px) {
            white-space: nowrap;
            min-height: 44px;
            padding: 0 4px;
            background: transparent;
            border-color: transparent;
            color: @white;
            font-size: 10px;
        }
    }
}

// EN / ID language switch (top bar and menu).
.lang {
    display: flex;
    align-items: center;
    gap: 2px;

    &__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 44px;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.18em;
        color: @muted-dark;
        transition: color 0.3s;

        &[aria-current] {
            color: @white;
            font-weight: 600;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: @white;
            }
        }
    }

    // Between the two languages on wide screens.
    &__link + &__link::before {
        content: '';
        width: 1px;
        height: 10px;
        margin-right: 10px;
        margin-left: -6px;
        background: @line-dark;
    }
}

.menu__lang {
    justify-self: end;
    padding-right: 4px;
}

.catnav {
    border-top: 1px solid @line-darker;

    &__list {
        display: flex;
        align-items: center;
        gap: 28px;
        height: @catnav-h;
        padding: 0 20px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
        mask-image: linear-gradient(to right, #000 82%, transparent);

        &::-webkit-scrollbar {
            display: none;
        }

        @media (min-width: 992px) {
            justify-content: center;
            gap: 48px;
            height: @catnav-h-lg;
            overflow: visible;
            -webkit-mask-image: none;
            mask-image: none;
        }

        li {
            flex-shrink: 0;
        }

        a {
            position: relative;
            display: block;
            padding: 12px 0;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            white-space: nowrap;

            @media (min-width: 992px) {
                font-size: 11px;
            }

            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 7px;
                height: 1px;
                background: currentColor;
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.45s @ease;
            }

            &[aria-current]::after {
                transform: scaleX(1);
                transform-origin: left;
            }

            @media (hover: hover) and (pointer: fine) {
                &:hover::after {
                    transform: scaleX(1);
                    transform-origin: left;
                }
            }
        }
    }
}


/* Menu overlay
   ========================================================================== */

.menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: @black;
    color: @white;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s @ease, visibility 0s linear 0.5s;

    &[hidden] {
        display: none;
    }

    &.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s @ease, visibility 0s;
    }

    &__top {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: @topbar-h;
        padding: 0 12px 0 8px;
        border-bottom: 1px solid @line-darker;

        @media (min-width: 992px) {
            height: @topbar-h-lg;
            padding: 0 40px;
        }
    }

    &__logo {
        width: auto;
        height: 18px;

        @media (min-width: 992px) {
            height: 24px;
        }
    }

    &__nav {
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        padding: 24px @gutter;
    }

    &__links {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;

        li {
            overflow: hidden;
            border-bottom: 1px solid @line-darker;
        }

        a {
            display: flex;
            align-items: baseline;
            gap: 18px;
            padding: 14px 0;
            font-size: clamp(1.5rem, calc(1rem + 2.4vw), 2.75rem);
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            opacity: 0;
            transform: translateY(105%);
            transition: transform 0.8s @ease, opacity 0.5s @ease, color 0.3s;
            transition-delay: calc(0.06s * var(--i, 0) + 0.12s);

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    color: @muted-dark;
                }
            }
        }
    }

    &.is-open &__links a {
        opacity: 1;
        transform: none;
    }

    &__num {
        min-width: 26px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.16em;
        color: @muted-dark;
    }

    &__contact {
        display: grid;
        gap: 18px;
        padding: 28px @gutter 40px;
        border-top: 1px solid @line-darker;
        font-size: 16px;

        @media (min-width: 768px) {
            grid-template-columns: repeat(3, auto);
            justify-content: space-between;
        }

        a {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
    }

    &__label {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: @muted-dark;
    }
}


/* Hero
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 560px;
    height: calc(100vh - @topbar-h - @catnav-h);
    height: calc(100svh - @topbar-h - @catnav-h);
    max-height: 900px;
    overflow: hidden;
    background: @black;
    color: @white;

    @media (min-width: 992px) {
        min-height: 640px;
        height: calc(100vh - @topbar-h-lg - @catnav-h-lg);
        height: calc(100svh - @topbar-h-lg - @catnav-h-lg);
    }

    &__media {
        position: absolute;
        inset: 0;
    }

    &__slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.4s @ease;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 40%;
            transform: scale(1.06);
            transition: transform 7s linear;
        }

        &.is-active {
            opacity: 1;

            img {
                transform: scale(1);
            }
        }
    }

    &__scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.25) 100%);

        @media (min-width: 992px) {
            background:
                linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%),
                linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.25) 100%);
        }
    }

    &__content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 1120px;
        padding: 0 @gutter 36px;

        @media (min-width: 992px) {
            gap: 22px;
            padding-bottom: 80px;
        }
    }

    &__title {
        font-size: clamp(2.125rem, calc(1.35rem + 3.2vw), 3.875rem);
        font-weight: 500;
        line-height: 1.04;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    &__lede {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.65;
        color: #E6E6E6;

        @media (min-width: 768px) {
            font-size: 16px;
        }
    }

    &__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 8px;

        @media (min-width: 600px) {
            flex-direction: row;
            gap: 12px;
        }
    }

    // Slide counter, progress bars and pause button.
    &__controls {
        position: relative;
        z-index: 1;
        order: -1;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 @gutter 18px;

        @media (min-width: 992px) {
            position: absolute;
            right: 0;
            bottom: 80px;
            order: 0;
            gap: 20px;
            padding: 0 @gutter 0 0;
        }
    }

    &__counter {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        font-variant-numeric: tabular-nums;

        @media (min-width: 992px) {
            font-size: 12px;
        }
    }

    &__bars {
        display: flex;
        gap: 6px;
    }

    &__bar {
        position: relative;
        width: 36px;
        height: 24px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;

        @media (min-width: 992px) {
            width: 56px;
        }

        &::before,
        span {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            margin-top: -1px;
        }

        &::before {
            background: rgba(255, 255, 255, 0.35);
        }

        span {
            background: @white;
            transform: scaleX(0);
            transform-origin: left;
        }

        &.is-active span {
            animation: hero-progress 6.5s linear forwards;
        }
    }

    &.is-paused &__bar.is-active span {
        animation-play-state: paused;
    }

    // No autoplay (reduced motion): the current bar simply shows as filled.
    &.is-static &__bar.is-active span {
        animation: none;
        transform: scaleX(1);
    }

    &__pause {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        color: @white;
        cursor: pointer;
        transition: border-color 0.3s;

        .icon-pause {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
        }

        .icon-play {
            display: none;
            fill: currentColor;
        }

        &[aria-pressed="true"] {
            .icon-pause {
                display: none;
            }

            .icon-play {
                display: block;
            }
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                border-color: @white;
            }
        }
    }
}

@keyframes hero-progress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


/* Services
   ========================================================================== */

.services {
    padding: 64px 0 24px;

    @media (min-width: 768px) {
        padding: 104px 0 120px;
    }

    .section-head {
        margin-bottom: 32px;

        @media (min-width: 768px) {
            margin-bottom: 56px;
        }
    }

    &__grid {
        display: grid;

        @media (min-width: 768px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2px;
        }
    }
}

.service {
    display: flex;
    flex-direction: column;

    // Large phones / small tablets: image beside the text instead of stacked.
    @media (min-width: 480px) and (max-width: 767.98px) {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
        padding: 0 @gutter;

        & + & {
            margin-top: 2px;
        }
    }

    &__media {
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: @black;

        @media (min-width: 768px) {
            aspect-ratio: 3 / 4;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.4s @ease;
        }
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover &__media img {
            transform: scale(1.04);
        }
    }

    &__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 24px @gutter 48px;
        text-align: center;

        @media (min-width: 480px) and (max-width: 767.98px) {
            align-items: flex-start;
            padding: 24px 0 24px 28px;
            text-align: left;
        }

        @media (min-width: 768px) {
            padding: 32px 20px 0;
        }

        @media (min-width: 992px) {
            gap: 12px;
            padding: 36px 40px 0;
        }

        p {
            max-width: 360px;
            font-size: 15px;
            line-height: 1.6;
            color: @muted-light;
        }
    }

    &__title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        @media (min-width: 992px) {
            font-size: 15px;
        }
    }
}


/* About
   ========================================================================== */

.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 56px @gutter 64px;
    border-top: 1px solid @line-light;
    text-align: center;

    @media (min-width: 768px) {
        gap: 30px;
        padding: 112px @gutter 120px;
    }

    &__text {
        max-width: 980px;
        font-size: clamp(1.25rem, calc(0.95rem + 1.2vw), 1.875rem);
        font-weight: 400;
        line-height: 1.5;
    }
}


/* Invitations carousel
   ========================================================================== */

.works {
    padding-bottom: 72px;

    @media (min-width: 768px) {
        padding-bottom: 128px;
    }

    &__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px 24px;
        padding: 0 @gutter 22px;

        @media (min-width: 768px) {
            padding-bottom: 32px;
        }
    }

    &__intro {
        display: flex;
        flex-direction: column;
        gap: 6px;

        p {
            font-size: 14px;
            color: @muted-light;

            @media (min-width: 768px) {
                font-size: 15px;
            }
        }
    }

    &__title {
        font-size: clamp(1.0625rem, calc(0.9rem + 0.5vw), 1.375rem);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    &__nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    &__track {
        display: flex;
        gap: 10px;
        margin: 0;
        padding: 0 @gutter 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: @gutter;
        overscroll-behavior-x: contain;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        // Keyboard users can focus the row and scroll it with the arrow keys.
        &:focus-visible {
            outline-offset: -2px;
        }

        @media (min-width: 768px) {
            gap: 12px;
        }
    }
}

.arrows {
    display: none;
    gap: 8px;

    @media (min-width: 768px) {
        display: flex;
    }

    .is-static & {
        display: none;
    }
}

.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: @white;
    border: 1px solid @black;
    color: @black;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, opacity 0.3s;

    svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
    }

    &--solid {
        background: @black;
        color: @white;
    }

    &[aria-disabled="true"] {
        opacity: 0.3;
        cursor: default;
    }

    @media (hover: hover) and (pointer: fine) {
        &:not([aria-disabled="true"]):hover {
            background: @black;
            color: @white;
        }

        &--solid:not([aria-disabled="true"]):hover {
            background: @white;
            color: @black;
        }
    }
}

.design {
    flex: 0 0 min(74vw, 300px);
    scroll-snap-align: start;

    @media (min-width: 600px) {
        flex-basis: calc((100% - 20px) / 2.4);
    }

    @media (min-width: 768px) {
        flex-basis: calc((100% - 36px) / 3.2);
    }

    @media (min-width: 992px) {
        flex-basis: calc((100% - 36px) / 4);
    }

    figure {
        display: flex;
        flex-direction: column;
        gap: 14px;

        @media (min-width: 768px) {
            gap: 18px;
        }
    }

    figcaption {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    &__stage {
        --phone-scale: 0.76;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 380px;
        overflow: hidden;
        background: @tile;
        color: inherit;

        @media (min-width: 768px) {
            --phone-scale: 0.84;
            height: 440px;
        }

        @media (min-width: 1200px) {
            --phone-scale: 0.9;
            height: 480px;
        }

        // The cover is a tall screenshot of the whole page: hovering scrolls through it.
        @media (hover: hover) and (pointer: fine) {
            &:hover .phone__screen {
                object-position: 50% 100%;
                transition-duration: 9s;
            }
        }
    }

    &__tag {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 1;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;

        @media (min-width: 768px) {
            top: 18px;
            left: 18px;
            font-size: 10px;
        }
    }

    &__name {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;

        @media (min-width: 768px) {
            font-size: 13px;
        }
    }

    &__type {
        font-size: 13px;
        color: @muted-light;

        @media (min-width: 768px) {
            font-size: 14px;
        }
    }
}

// Phone frame around each invitation cover (a phone-size screenshot).
.phone {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 212px;
    height: 436px;
    padding: 9px;
    border-radius: 38px;
    background: @black;
    box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.45);
    transform: scale(var(--phone-scale, 1));

    &__screen {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        object-fit: cover;
        object-position: 50% 0;
        background: @line-dark; // shown while the cover loads
        transition: object-position 0.8s @ease;
    }

    &__island {
        position: absolute;
        top: 18px;
        left: 50%;
        width: 62px;
        height: 18px;
        margin-left: -31px;
        border-radius: 10px;
        background: @black;
    }
}


/* WhatsApp RSVP demonstration
   ========================================================================== */

// WhatsApp's own colours, used only inside the phone.
@wa-bar:      #075E54;
@wa-chat:     #EFE7DE;
@wa-in:       #FFFFFF;
@wa-out:      #D9FDD3;
@wa-action:   #027EB5;
@wa-meta:     #667781;
@wa-text:     #111B21;

.rsvp {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 56px @gutter 64px;
    background: @tile;

    @media (min-width: 768px) {
        gap: 48px;
        padding: 88px @gutter 96px;
    }

    @media (min-width: 992px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "intro stage"
            "panel stage";
        grid-template-rows: auto 1fr;
        column-gap: clamp(48px, 6vw, 96px);
        row-gap: 44px;
        max-width: 1320px;
        margin: 0 auto;
        padding: 112px clamp(48px, 7vw, 112px);
        // The grey band runs the full width even though the content is capped.
        box-shadow: 0 0 0 100vmax @tile;
        clip-path: inset(0 -100vmax);
    }

    &__intro {
        display: flex;
        flex-direction: column;
        gap: 20px;

        @media (min-width: 992px) {
            grid-area: intro;
            gap: 24px;
        }
    }

    &__text {
        max-width: 560px;
        font-size: 15px;
        line-height: 1.7;
        color: @body-light;

        @media (min-width: 768px) {
            font-size: 16px;
        }
    }

    &__try {
        font-size: 13px;
        color: @muted-light;
    }

    &__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        @media (min-width: 992px) {
            grid-area: stage;
            align-self: start;
            position: sticky;
            top: (@topbar-h-lg + @catnav-h-lg + 24px);
        }
    }

    &__hint {
        max-width: 360px;
        min-height: 2.9em;
        font-size: 13px;
        line-height: 1.45;
        text-align: center;
        color: @muted-light;
    }

    &__panel {
        display: flex;
        flex-direction: column;
        gap: 32px;

        @media (min-width: 992px) {
            grid-area: panel;
        }
    }

    &__options {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    &__option {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    &__label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: @muted-light;
    }

    &__flow-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 24px;
        padding-bottom: 10px;

        .link {
            padding-top: 4px;
            border: 0;
            cursor: pointer;
        }
    }
}

// Row of outlined choice buttons; the pressed one turns black.
.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    &__btn {
        min-height: 44px;
        padding: 0 18px;
        background: transparent;
        border: 1px solid @ink;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.35s @ease, color 0.35s @ease;

        &[aria-pressed="true"] {
            background: @black;
            color: @white;
        }

        @media (hover: hover) and (pointer: fine) {
            &[aria-pressed="false"]:hover {
                background: @white;
            }
        }
    }
}

// The steps of the flow, with what each one recorded.
.flow {
    border-top: 1px solid @ink;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    @media (min-width: 768px) {
        font-size: 12px;
    }

    &__row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid @line-light;
        color: @muted-light;
        transition: color 0.35s @ease, border-color 0.35s @ease;

        &.is-done,
        &.is-current {
            color: @ink;
        }

        &.is-current {
            border-bottom-color: @ink;
        }

        &.is-skipped {
            color: #8A8A8A;
        }
    }

    &__num {
        font-variant-numeric: tabular-nums;
    }

    &__row.is-current &__label::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 10px;
        border-radius: 50%;
        background: currentColor;
        vertical-align: 0.1em;
        animation: flow-pulse 1.4s ease-in-out infinite;
    }

    &__value {
        font-weight: 600;
        letter-spacing: 0.1em;
        text-align: right;
    }
}

@keyframes flow-pulse {
    50% {
        opacity: 0.25;
    }
}

// The phone and the chat inside it.
.wa {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 372px;
    height: clamp(540px, 80vh, 680px);
    height: clamp(540px, 80svh, 680px);
    border: 9px solid @black;
    border-radius: 40px;
    background: @wa-chat;
    box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.45);
    color: @wa-text;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;

    &__bar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px 10px;
        background: @wa-bar;
        color: @white;
    }

    // Profile picture: the Invitamu monogram on a white disc.
    &__avatar {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        padding: 5px;
        border-radius: 50%;
        background: @white;
        object-fit: contain;
    }

    &__who {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    &__name {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 15px;
        font-weight: 500;
    }

    &__status {
        font-size: 12px;
        opacity: 0.8;
    }

    &__chat {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 0;
        padding: 12px 10px 14px;
        overflow-y: auto;
        scrollbar-width: thin;

        &:focus-visible {
            outline-offset: -3px;
        }
    }

    &__day,
    &__note {
        align-self: center;
        max-width: 90%;
        margin: 4px 0;
        padding: 5px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        font-size: 11.5px;
        line-height: 1.35;
        text-align: center;
        color: @wa-meta;
    }

    &__note {
        background: #FFF3C4;
        color: #54440B;
    }

    &__msg {
        position: relative;
        max-width: 88%;
        padding: 7px 9px 6px;
        border-radius: 9px;
        box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
        overflow-wrap: anywhere;
        animation: wa-pop 0.3s @ease both;

        &--in {
            align-self: flex-start;
            border-top-left-radius: 2px;
            background: @wa-in;
        }

        &--out {
            align-self: flex-end;
            border-top-right-radius: 2px;
            background: @wa-out;
        }

        strong {
            font-weight: 600;
        }
    }

    &__meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        margin-top: 2px;
        font-size: 10.5px;
        line-height: 1;
        color: @wa-meta;

        svg {
            fill: none;
            stroke: #53BDEB;
            stroke-width: 1.4;
        }
    }

    &__link {
        color: @wa-action;
        text-decoration: underline;
    }

    &__media {
        margin: -3px -5px 7px;
        border-radius: 7px;
        overflow: hidden;

        &--cover img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            object-position: 50% 30%;
        }

        &--qr {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: #F0F2F5;

            svg {
                flex-shrink: 0;
                width: 92px;
                height: 92px;
            }

            span {
                display: flex;
                flex-direction: column;
                gap: 3px;
                font-size: 11px;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: @wa-meta;
            }

            b {
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0;
                text-transform: none;
                color: @wa-text;
            }
        }
    }

    // Quick-reply buttons under a message.
    &__buttons {
        display: flex;
        flex-direction: column;
        margin: 7px -9px -6px;
        border-top: 1px solid #E9EDEF;
    }

    &__button {
        min-height: 44px;
        padding: 8px 12px;
        background: none;
        border: 0;
        border-bottom: 1px solid #E9EDEF;
        color: @wa-action;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;

        &:last-child {
            border-bottom: 0;
            border-radius: 0 0 9px 9px;
        }

        &:focus-visible {
            outline-offset: -3px;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                background: #F5F6F6;
            }
        }
    }

    &__typing {
        display: flex;
        gap: 4px;
        padding: 12px 12px;

        i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #9AA5AB;
            animation: wa-typing 1s ease-in-out infinite;

            &:nth-child(2) {
                animation-delay: 0.15s;
            }

            &:nth-child(3) {
                animation-delay: 0.3s;
            }
        }
    }

    // Suggested replies above the message box.
    &__chips {
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px 0;
    }

    &__chip {
        min-width: 44px;
        min-height: 40px;
        padding: 0 16px;
        border: 1px solid @wa-bar;
        border-radius: 20px;
        background: @white;
        color: @wa-bar;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                background: @wa-bar;
                color: @white;
            }
        }
    }

    &__composer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 8px 12px;
    }

    &__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 22px;
        background: @white;
        color: @wa-text;
        font-family: @font-sans;
        // 16px stops iOS zooming the page when the field is focused.
        font-size: 16px;

        &::placeholder {
            color: @wa-meta;
            opacity: 1;
        }

        &:disabled {
            background: rgba(255, 255, 255, 0.6);
        }

        &:focus-visible {
            outline: 2px solid @wa-bar;
            outline-offset: 1px;
        }
    }

    &__send {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 0 0 2px;
        border: 0;
        border-radius: 50%;
        background: @wa-bar;
        cursor: pointer;

        svg {
            fill: @white;
        }

        &:disabled {
            background: #9AA5AB;
            cursor: default;
        }
    }
}

@keyframes wa-pop {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes wa-typing {
    0%, 60%, 100% {
        transform: none;
        opacity: 0.5;
    }

    30% {
        transform: translateY(-3px);
        opacity: 1;
    }
}


/* Feature splits (Check-In, Guest Management)
   ========================================================================== */

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    @media (min-width: 992px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: clamp(680px, 58vw, 860px);
    }

    &--dark {
        background: @black;
        color: @white;
    }

    &--light {
        background: @white;
        color: @ink;
    }

    &__media {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;

        @media (min-width: 600px) {
            aspect-ratio: 16 / 11;
        }

        @media (min-width: 992px) {
            aspect-ratio: auto;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 40%;

            @media (min-width: 992px) {
                position: absolute;
                inset: 0;
            }
        }
    }

    &--reverse &__media {
        @media (min-width: 992px) {
            order: 2;
        }
    }

    &__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: 44px @gutter 64px;

        @media (min-width: 768px) {
            gap: 24px;
            padding: 64px @gutter 80px;
        }

        @media (min-width: 992px) {
            gap: 28px;
            padding: 80px clamp(48px, 7vw, 112px);
        }

        .btn {
            align-self: stretch;
            margin-top: 8px;

            @media (min-width: 600px) {
                align-self: flex-start;
            }
        }
    }

    &__title {
        font-size: clamp(1.875rem, calc(1.3rem + 1.9vw), 2.75rem);
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    &__text {
        max-width: 560px;
        font-size: 15px;
        line-height: 1.7;

        @media (min-width: 768px) {
            font-size: 16px;
        }
    }

    &__list {
        max-width: 560px;
        border-top: 1px solid;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;

        @media (min-width: 768px) {
            font-size: 12px;
            letter-spacing: 0.16em;
        }

        li {
            display: flex;
            gap: 24px;
            padding: 16px 0;
            border-bottom: 1px solid;

            @media (min-width: 992px) {
                gap: 28px;
                padding: 18px 0;
            }
        }

        span {
            font-variant-numeric: tabular-nums;
        }
    }

    &--dark &__text {
        color: @soft-dark;
    }

    &--dark &__list,
    &--dark &__list li {
        border-color: @line-dark;
    }

    &--dark &__list span {
        color: @muted-dark;
    }

    &--light &__text {
        color: @body-light;
    }

    &--light &__list,
    &--light &__list li {
        border-color: @line-light;
    }

    &--light &__list span {
        color: @muted-light;
    }
}


/* Our goal
   ========================================================================== */

.goal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 80px @gutter;
    overflow: hidden;
    background: @black;
    color: @white;
    text-align: center;

    @media (min-width: 768px) {
        min-height: 640px;
    }

    &__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 45%;
        opacity: 0.4;
    }

    &__content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        max-width: 1000px;

        @media (min-width: 768px) {
            gap: 28px;
        }
    }

    &__title {
        font-size: clamp(1.875rem, calc(1.1rem + 2.8vw), 3.125rem);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    &__text {
        max-width: 620px;
        font-size: 15px;
        line-height: 1.7;
        color: #E3E3E3;

        @media (min-width: 768px) {
            font-size: 16px;
        }
    }
}


/* Process
   ========================================================================== */

.process {
    padding: 64px @gutter 72px;

    @media (min-width: 768px) {
        padding: 120px @gutter 128px;
    }

    .section-head {
        margin-bottom: 36px;
        padding: 0;

        @media (min-width: 768px) {
            margin-bottom: 72px;
        }
    }

    &__grid {
        display: grid;
        gap: 8px;
        max-width: 1344px;
        margin: 0 auto;

        @media (min-width: 600px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (min-width: 992px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }
    }
}

.step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 26px 24px 28px;
    background: @tile;

    @media (min-width: 600px) {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 36px 28px 40px;
    }

    @media (min-width: 992px) {
        padding: 40px 32px 44px;
    }

    &__num {
        font-size: 40px;
        font-weight: 300;
        line-height: 1;
        font-variant-numeric: tabular-nums;

        @media (min-width: 600px) {
            font-size: 56px;
        }

        @media (min-width: 992px) {
            font-size: 64px;
        }
    }

    &__body {
        display: flex;
        flex-direction: column;
        gap: 8px;

        @media (min-width: 600px) {
            gap: 14px;
        }

        p {
            font-size: 14px;
            line-height: 1.65;
            color: #4A4A4A;

            @media (min-width: 768px) {
                font-size: 15px;
            }
        }
    }

    &__title {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        @media (min-width: 768px) {
            font-size: 14px;
        }
    }

    &--dark {
        background: @black;
        color: @white;

        p {
            color: @soft-dark;
        }
    }
}


/* Contact
   ========================================================================== */

.contact {
    display: grid;
    gap: 28px;
    padding: 64px @gutter 56px;
    background: @black;
    color: @white;

    @media (min-width: 768px) {
        padding: 96px @gutter;
    }

    @media (min-width: 992px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 64px;
        padding: 128px @gutter;
    }

    &__intro {
        display: flex;
        flex-direction: column;
        gap: 22px;

        @media (min-width: 992px) {
            gap: 28px;
        }
    }

    &__title {
        font-size: clamp(2.25rem, calc(1.3rem + 3.4vw), 3.75rem);
        font-weight: 500;
        line-height: 1.04;
        letter-spacing: 0.02em;
        text-transform: uppercase;

        span {
            display: block;
            color: #8A8A8A;
        }
    }

    &__list {
        display: flex;
        flex-direction: column;

        @media (min-width: 992px) {
            padding-top: 44px;
        }
    }

    &__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 6px;
        padding: 20px 0;
        border-top: 1px solid @line-dark;

        @media (min-width: 992px) {
            padding: 26px 0;
        }

        &:last-of-type {
            border-bottom: 1px solid @line-dark;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover .contact__arrow {
                transform: translateX(6px);
            }
        }
    }

    &__label {
        grid-column: 1;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: @muted-dark;

        @media (min-width: 768px) {
            font-size: 11px;
        }
    }

    &__value {
        grid-column: 1;
        font-size: 19px;
        line-height: 1.3;
        overflow-wrap: anywhere;

        @media (min-width: 768px) {
            font-size: 24px;
        }
    }

    &__arrow {
        grid-column: 2;
        grid-row: 1 ~"/" span 2;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.3;
        transition: transform 0.4s @ease;
    }

    &__note {
        margin-top: 24px;
        font-size: 14px;
        color: @muted-dark;

        @media (min-width: 768px) {
            font-size: 15px;
        }
    }
}


/* Footer
   ========================================================================== */

.site-footer {
    padding: 8px @gutter 32px;
    background: @black;
    border-top: 1px solid @line-darker;
    color: @white;

    @media (min-width: 768px) {
        padding: 80px @gutter 36px;
    }
}

.footer {
    &__grid {
        display: flex;
        flex-direction: column;

        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 32px;
        }
    }

    &__brand {
        order: 2;
        display: flex;
        justify-content: center;
        margin-top: 40px;

        @media (min-width: 768px) {
            order: 0;
            justify-content: flex-start;
            margin-top: 0;
        }

        img {
            width: auto;
            height: 56px;

            @media (min-width: 768px) {
                height: 70px;
            }
        }
    }

    &__group {
        border-bottom: 1px solid @line-darker;

        @media (min-width: 768px) {
            border-bottom: 0;
        }

        summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 56px;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            list-style: none;
            cursor: pointer;

            &::-webkit-details-marker {
                display: none;
            }

            &::after {
                content: '+';
                font-size: 20px;
                font-weight: 300;
                line-height: 1;
            }

            @media (min-width: 768px) {
                min-height: 0;
                margin-bottom: 18px;
                color: @muted-dark;
                cursor: default;

                &::after {
                    display: none;
                }
            }
        }

        &[open] summary::after {
            content: '\2212';
        }

        ul {
            display: flex;
            flex-direction: column;
            padding-bottom: 18px;

            @media (min-width: 768px) {
                gap: 10px;
                padding-bottom: 0;
            }
        }

        a {
            display: inline-block;
            padding: 8px 0;
            font-size: 14px;

            @media (min-width: 768px) {
                padding: 2px 0;
            }

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    color: @muted-dark;
                }
            }
        }
    }

    &__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid @line-darker;
        color: @muted-dark;
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;

        @media (min-width: 768px) {
            flex-direction: row;
            justify-content: space-between;
            margin-top: 72px;
            padding-top: 24px;
            font-size: 11px;
        }
    }
}


/* Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .hero__slide img {
        transform: none !important;
    }
}