:root {
            --tomato: #D9301F;
            --tomato-deep: #B22417;
            --saffron: #FFB81C;
            --basil: #1F7A4D;
            --leaf: #3FB27A;
            --plum: #2B0A24;
            --plum-2: #431539;
            --napkin: #FFF8EE;
            --line: rgba(43, 10, 36, .16);
            --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
            --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
            --mono: "Space Mono", ui-monospace, Menlo, monospace;
            --wrap: 1180px;
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 84px
        }

        body {
            margin: 0;
            font-family: var(--body);
            font-size: 17px;
            line-height: 1.6;
            color: var(--plum);
            background: var(--napkin);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden
        }

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

        a {
            color: inherit
        }

        p {
            margin: 0
        }

        :focus-visible {
            outline: 3px solid var(--saffron);
            outline-offset: 3px;
            border-radius: 6px
        }

        .wrap {
            max-width: var(--wrap);
            margin: 0 auto;
            padding: 0 24px
        }

        h1,
        h2,
        h3 {
            font-family: var(--display);
            line-height: 1.02;
            margin: 0;
            letter-spacing: -.025em
        }

        h1 {
            font-weight: 800;
            font-size: clamp(2.9rem, 7vw, 5.8rem)
        }

        h2 {
            font-weight: 800;
            font-size: clamp(2.1rem, 4.4vw, 3.4rem)
        }

        h3 {
            font-weight: 600;
            font-size: 1.6rem;
            letter-spacing: -.015em
        }

        /* scroll reveal */
        .js .reveal {
            opacity: 0
        }

        .js .reveal.in {
            opacity: 1;
            animation: rise .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(34px)
            }
        }

        /* buttons */
        .btn {
            display: inline-block;
            font: 600 1rem/1 var(--body);
            padding: 17px 28px;
            border-radius: 999px;
            text-decoration: none;
            border: 2px solid transparent;
            cursor: pointer;
            transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .15s ease, border-color .15s
        }

        .btn:hover {
            transform: translateY(-3px) rotate(-1.2deg)
        }

        .btn:active {
            transform: translateY(0)
        }

        .btn-saffron {
            background: var(--saffron);
            color: var(--plum)
        }

        .btn-saffron:hover {
            background: #FFC94D
        }

        .btn-ghost {
            border-color: rgba(255, 248, 238, .6);
            color: var(--napkin)
        }

        .btn-ghost:hover {
            border-color: var(--napkin)
        }

        .btn-tomato {
            background: var(--tomato);
            color: #fff
        }

        .btn-tomato:hover {
            background: var(--tomato-deep)
        }

        /* nav */
        .nav {
            position: sticky;
            top: 0;
            z-index: 30;
            background: var(--plum);
            color: var(--napkin)
        }

        .nav .wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none
        }

        .logo svg {
            width: 42px;
            height: 42px
        }

        .logo .ring {
            transform-origin: 32px 32px;
            transition: transform .8s cubic-bezier(.6, .05, .25, 1)
        }

        .logo:hover .ring {
            transform: rotate(360deg)
        }

        .logo-word {
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.3rem;
            letter-spacing: -.02em;
            line-height: 1
        }

        .logo-word span {
            font-weight: 600;
            color: var(--saffron)
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 30px;
            font-size: .95rem;
            font-weight: 500
        }

        .nav-links a {
            text-decoration: none;
            opacity: .85
        }

        .nav-links a:hover {
            opacity: 1
        }

        .nav-links .btn {
            padding: 12px 22px;
            font-size: .92rem;
            opacity: 1
        }

        /* hero */
        .hero {
            position: relative;
            background: var(--tomato);
            color: #fff;
            padding: 84px 0 110px;
            overflow: hidden
        }

        .hero .wrap {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 48px;
            align-items: center
        }

        .hero h1 span {
            display: block;
            overflow: hidden;
            padding-bottom: .06em
        }

        .hero h1 span i {
            display: block;
            font-style: normal;
            animation: line .9s cubic-bezier(.2, .8, .2, 1) both
        }

        .hero h1 span:nth-child(2) i {
            animation-delay: .14s
        }

        @keyframes line {
            from {
                transform: translateY(105%)
            }
        }

        .hero .lede {
            font-size: 1.25rem;
            max-width: 36ch;
            margin-top: 28px;
            animation: fade .8s .5s both
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 38px;
            animation: fade .8s .7s both
        }

        @keyframes fade {
            from {
                opacity: 0;
                transform: translateY(14px)
            }
        }

        .scene {
            justify-self: center;
            width: min(100%, 470px);
            margin: 0
        }

        .scene svg {
            width: 100%;
            height: auto;
            overflow: visible
        }

        .table-spin {
            transform-origin: 220px 220px;
            animation: tspin 2.2s cubic-bezier(.6, .05, .25, 1) .2s both
        }

        @keyframes tspin {
            from {
                transform: rotate(-200deg) scale(.6);
                opacity: 0
            }
        }

        .plate {
            animation: plate 9s cubic-bezier(.3, 1.4, .5, 1) infinite;
            animation-delay: calc(var(--i)*.28s + 1.2s)
        }

        @keyframes plate {
            0% {
                transform: scale(0) translateY(-30px);
                opacity: 0
            }

            6% {
                transform: scale(1.14) translateY(0);
                opacity: 1
            }

            9%,
            76% {
                transform: scale(1);
                opacity: 1
            }

            86% {
                transform: translate(var(--dx), var(--dy)) scale(.5) rotate(40deg);
                opacity: 0
            }

            100% {
                transform: scale(0);
                opacity: 0
            }
        }

        .steam {
            fill: none;
            stroke: rgba(43, 10, 36, .32);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 22 46;
            animation: steam 2.2s linear infinite
        }

        .steam.b {
            animation-delay: -1.1s
        }

        @keyframes steam {
            to {
                stroke-dashoffset: -68
            }
        }

        .chair {
            animation: chair 3.4s ease-in-out infinite;
            transform-box: fill-box;
            transform-origin: center
        }

        .chair:nth-of-type(2) {
            animation-delay: -.8s
        }

        .chair:nth-of-type(3) {
            animation-delay: -1.6s
        }

        .chair:nth-of-type(4) {
            animation-delay: -2.4s
        }

        @keyframes chair {
            50% {
                transform: scale(1.1)
            }
        }

        .status {
            position: relative;
            height: 46px;
            margin-top: 22px;
            text-align: center
        }

        .status span {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            opacity: 0
        }

        .status b {
            display: inline-block;
            background: var(--plum);
            color: var(--saffron);
            font-weight: 600;
            font-size: 1rem;
            padding: 10px 22px;
            border-radius: 999px
        }

        .status span {
            animation: stat 9s infinite backwards
        }

        .status span:nth-child(1) {
            animation-delay: 1.2s
        }

        .status span:nth-child(2) {
            animation-delay: 3s
        }

        .status span:nth-child(3) {
            animation-delay: 4.8s
        }

        .status span:nth-child(4) {
            animation-delay: 6.6s
        }

        .status span:nth-child(5) {
            animation-delay: 8.4s
        }

        @keyframes stat {
            0% {
                opacity: 0;
                transform: translateY(10px)
            }

            3%,
            17% {
                opacity: 1;
                transform: none
            }

            20%,
            100% {
                opacity: 0
            }
        }

        .float {
            position: absolute;
            z-index: 1;
            pointer-events: none;
            animation: drift var(--t, 9s) ease-in-out infinite
        }

        @keyframes drift {
            50% {
                transform: translate(var(--x, 14px), var(--y, -26px)) rotate(var(--r, 18deg))
            }
        }

        /* marquee */
        .marquee {
            background: var(--plum);
            color: var(--saffron);
            overflow: hidden;
            white-space: nowrap;
            padding: 20px 0;
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.7rem;
            letter-spacing: -.01em
        }

        .marquee-track {
            display: inline-flex;
            animation: marq 34s linear infinite
        }

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

        .marquee span {
            display: inline-flex;
            align-items: center;
            gap: 28px;
            padding-right: 28px
        }

        .marquee span::after {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--tomato)
        }

        @keyframes marq {
            to {
                transform: translateX(-50%)
            }
        }

        /* sections */
        section {
            padding: 112px 0
        }

        .head {
            max-width: 660px;
            margin-bottom: 56px
        }

        .head p {
            margin-top: 18px;
            font-size: 1.18rem;
            color: #5A3A54
        }

        /* service tiles */
        .tiles {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px
        }

        .tile {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            padding: 38px 36px 40px;
            min-height: 340px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            transition: transform .3s cubic-bezier(.3, 1.5, .5, 1)
        }

        .tile:hover {
            transform: translateY(-8px) rotate(-.6deg)
        }

        .tile p {
            margin-top: 12px;
            max-width: 40ch;
            font-size: 1.05rem
        }

        .tile .ico {
            position: absolute;
            top: 30px;
            right: 32px;
            width: 110px;
            height: 110px
        }

        .t-tomato {
            background: var(--tomato);
            color: #fff
        }

        .t-saffron {
            background: var(--saffron);
            color: var(--plum)
        }

        .t-basil {
            background: var(--basil);
            color: #fff
        }

        .t-plum {
            background: var(--plum);
            color: #fff
        }

        /* icon animations */
        .pulse {
            transform-box: fill-box;
            transform-origin: center;
            animation: pulse 2.4s ease-out infinite
        }

        .pulse.p2 {
            animation-delay: .8s
        }

        .pulse.p3 {
            animation-delay: 1.6s
        }

        @keyframes pulse {
            from {
                transform: scale(.3);
                opacity: .9
            }

            to {
                transform: scale(1.5);
                opacity: 0
            }
        }

        .pin {
            animation: hop 1.6s cubic-bezier(.3, 0, .4, 1) infinite;
            transform-box: fill-box;
            transform-origin: 50% 100%
        }

        @keyframes hop {

            0%,
            100% {
                transform: translateY(0)
            }

            35% {
                transform: translateY(-14px)
            }

            60% {
                transform: translateY(0) scaleY(.92)
            }
        }

        .shadow {
            animation: sh 1.6s cubic-bezier(.3, 0, .4, 1) infinite;
            transform-box: fill-box;
            transform-origin: center
        }

        @keyframes sh {
            35% {
                transform: scale(.6);
                opacity: .4
            }
        }

        .playbtn {
            transform-box: fill-box;
            transform-origin: center;
            animation: beat 1.8s ease-in-out infinite
        }

        @keyframes beat {
            50% {
                transform: scale(1.12)
            }
        }

        .tick {
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            animation: tick 3s ease-in-out infinite
        }

        @keyframes tick {
            0% {
                stroke-dashoffset: 40
            }

            25%,
            80% {
                stroke-dashoffset: 0
            }

            100% {
                stroke-dashoffset: 40
            }
        }

        /* ticket section */
        .guest {
            background: var(--basil);
            color: #fff
        }

        .guest .wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center
        }

        .guest .head {
            margin: 0
        }

        .guest .head p {
            color: #DDF4E7
        }

        .ticket-wrap {
            justify-self: center;
            width: min(100%, 400px)
        }

        .paper {
            position: relative;
            background: #fff;
            color: var(--plum);
            font-family: var(--mono);
            font-size: .98rem;
            padding: 34px 30px 40px;
            transform: rotate(1.6deg);
            box-shadow: 0 26px 50px rgba(0, 0, 0, .25)
        }

        .paper::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -11px;
            height: 12px;
            background: linear-gradient(-135deg, #fff 6px, transparent 0), linear-gradient(135deg, #fff 6px, transparent 0);
            background-size: 16px 12px
        }

        .js .paper {
            clip-path: inset(0 0 100% 0)
        }

        .js .in .paper {
            animation: print 3.4s steps(22, end) .2s forwards
        }

        @keyframes print {
            to {
                clip-path: inset(0 0 -14px 0)
            }
        }

        .paper h4 {
            margin: 0;
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: -.02em
        }

        .paper .meta {
            color: #7A5A74;
            font-size: .86rem;
            margin-top: 4px
        }

        .paper hr {
            border: 0;
            border-top: 2px dashed #C9B4C4;
            margin: 18px 0
        }

        .paper ol {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 12px
        }

        .paper li {
            display: flex;
            gap: 14px
        }

        .paper li b {
            font-weight: 700;
            min-width: 1.2em
        }

        .paper .total {
            display: flex;
            justify-content: space-between;
            font-weight: 700
        }

        .stamp {
            position: absolute;
            right: 22px;
            bottom: 58px;
            border: 4px solid var(--tomato);
            color: var(--tomato);
            font-family: var(--display);
            font-weight: 800;
            font-size: 2rem;
            padding: 2px 14px;
            border-radius: 8px;
            letter-spacing: .02em;
            opacity: 0;
            transform: rotate(-11deg)
        }

        .js .in .stamp {
            animation: slam .5s cubic-bezier(.3, 1.6, .5, 1) 3.6s forwards
        }

        @keyframes slam {
            from {
                opacity: 0;
                transform: rotate(-11deg) scale(2.6)
            }

            to {
                opacity: .92;
                transform: rotate(-11deg) scale(1)
            }
        }

        /* operator */
        .operator {
            background: var(--saffron)
        }

        .operator .wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: start
        }

        .operator .txt p {
            font-size: 1.15rem;
            max-width: 44ch;
            margin-top: 20px
        }

        .measure {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 3px solid var(--plum)
        }

        .measure li {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid rgba(43, 10, 36, .3);
            font-family: var(--display);
            font-weight: 800;
            font-size: 1.6rem;
            letter-spacing: -.02em;
            transition: padding .25s ease
        }

        .measure li:hover {
            padding-left: 14px
        }

        .measure li span {
            font-family: var(--body);
            font-weight: 400;
            font-size: .98rem;
            letter-spacing: 0;
            text-align: right;
            max-width: 24ch;
            color: #4A3210
        }

        /* process */
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 34px
        }

        .step::before {
            content: attr(data-n);
            display: grid;
            place-items: center;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            font: 800 1.8rem var(--display);
            margin-bottom: 24px;
            color: #fff
        }

        .step:nth-child(1)::before {
            background: var(--tomato)
        }

        .step:nth-child(2)::before {
            background: var(--basil)
        }

        .step:nth-child(3)::before {
            background: var(--plum);
            color: var(--saffron)
        }

        .step h3 {
            margin-bottom: 10px
        }

        .step p {
            color: #5A3A54
        }

        .step .when {
            display: inline-block;
            margin-top: 16px;
            font-weight: 600;
            font-size: .92rem;
            background: #F6E7D2;
            padding: 6px 14px;
            border-radius: 999px
        }

        /* calculator */
        .calc {
            background: var(--plum);
            color: var(--napkin)
        }

        .calc .wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center
        }

        .calc .head {
            margin: 0
        }

        .calc .head p {
            color: #E7C9DC
        }

        .calc-box {
            background: var(--plum-2);
            border: 1px solid rgba(255, 248, 238, .14);
            border-radius: 28px;
            padding: 36px
        }

        .field {
            margin-bottom: 24px
        }

        .field label {
            display: flex;
            justify-content: space-between;
            font-weight: 500;
            margin-bottom: 10px
        }

        .field output {
            font-weight: 600;
            color: var(--saffron)
        }

        input[type=range] {
            width: 100%;
            accent-color: var(--saffron);
            height: 28px
        }

        .result {
            padding-top: 26px;
            border-top: 1px solid rgba(255, 248, 238, .2)
        }

        .result .small {
            color: #E7C9DC;
            font-size: .95rem
        }

        .result .big {
            font-family: var(--display);
            font-weight: 800;
            font-size: clamp(2.8rem, 5.5vw, 4rem);
            color: var(--saffron);
            line-height: 1.05;
            margin: 6px 0;
            display: inline-block
        }

        .result .big.bump {
            animation: bump .35s cubic-bezier(.3, 1.8, .5, 1)
        }

        @keyframes bump {
            50% {
                transform: scale(1.07)
            }
        }

        .result .fine {
            font-size: .85rem;
            color: #E7C9DC;
            margin-top: 8px
        }

        /* contact */
        .contact .wrap {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 64px;
            align-items: start
        }

        .contact .head {
            margin: 0
        }

        .contact-form {
            display: grid;
            gap: 18px
        }

        .contact-form .two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
        }

        .contact-form label {
            display: block;
            font-weight: 500;
            font-size: .95rem;
            margin-bottom: 7px
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            font: inherit;
            color: var(--plum);
            background: #fff;
            border: 2px solid rgba(43, 10, 36, .25);
            border-radius: 14px;
            padding: 14px 16px;
            transition: border-color .15s, transform .15s
        }

        .contact-form textarea {
            min-height: 130px;
            resize: vertical
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: 3px solid var(--saffron);
            outline-offset: 1px;
            border-color: var(--plum);
            transform: translateY(-2px)
        }

        .contact-form .btn {
            justify-self: start
        }

        .note {
            font-size: .9rem;
            color: #5A3A54
        }

        footer {
            background: var(--plum);
            color: #E7C9DC;
            padding: 46px 0;
            font-size: .93rem
        }

        footer .wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
            align-items: center
        }

        footer .logo-word {
            color: var(--napkin)
        }

        @media (max-width:920px) {
            .nav-links a:not(.btn) {
                display: none
            }

            .hero {
                padding: 56px 0 72px
            }

            .hero .wrap,
            .guest .wrap,
            .operator .wrap,
            .calc .wrap,
            .contact .wrap {
                grid-template-columns: 1fr;
                gap: 48px
            }

            .tiles {
                grid-template-columns: 1fr
            }

            .tile {
                min-height: 300px
            }

            .steps {
                grid-template-columns: 1fr
            }

            section {
                padding: 76px 0
            }

            .contact-form .two {
                grid-template-columns: 1fr
            }

            .marquee {
                font-size: 1.35rem
            }

            .float {
                display: none
            }
        }

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

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important
            }

            .js .reveal {
                opacity: 1
            }

            .js .paper {
                clip-path: none
            }

            .stamp {
                opacity: .92 !important
            }

            .status span:first-child {
                opacity: 1
            }

            .marquee {
                overflow-x: auto
            }
        }