:root {
                --bg: #0b0a09;
                --bg-2: #14110f;
                --ink: #f3ece1;
                --ink-2: #c9c0b1;
                --ink-3: #8a8378;
                --rule: rgba(243, 236, 225, 0.13);
                --accent: #e8542a;

                --serif: "Fraunces", "Times New Roman", serif;
                --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;

                --container: 1280px;
                --pad: 40px;
            }
            * {
                box-sizing: border-box;
            }
            html,
            body {
                margin: 0;
                padding: 0;
                overflow-x: hidden;
            }
            html {
                scroll-behavior: smooth;
            }
            body {
                background: var(--bg);
                color: var(--ink);
                font-family: var(--sans);
                font-size: 16px;
                line-height: 1.55;
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
                overflow-x: hidden;
            }
            ::selection {
                background: var(--accent);
                color: #fff;
            }
            a {
                color: inherit;
                text-decoration: none;
            }
            img {
                display: block;
                max-width: 100%;
            }
            button {
                font: inherit;
                cursor: pointer;
            }
            .wrap {
                max-width: var(--container);
                margin: 0 auto;
                padding: 0 var(--pad);
            }
            @media (max-width: 760px) {
                :root {
                    --pad: 22px;
                }
            }

            .tag {
                font-family: var(--sans);
                font-size: 12.5px;
                font-weight: 500;
                letter-spacing: 0.04em;
                color: var(--ink-3);
                display: inline-flex;
                align-items: center;
                gap: 12px;
            }
            .tag b {
                color: var(--accent);
                font-weight: 500;
            }
            .tag::before {
                content: "";
                width: 6px;
                height: 6px;
                background: var(--accent);
                border-radius: 50%;
            }

            /* nav */
            .nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 50;
                background: rgba(11, 10, 9, 0.78);
                backdrop-filter: blur(14px) saturate(140%);
                -webkit-backdrop-filter: blur(14px) saturate(140%);
                border-bottom: 1px solid var(--rule);
            }
            .nav-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 64px;
            }
            .brand-logo {
                height: 26px;
                width: auto;
            }
            .nav-links {
                display: flex;
                gap: 32px;
            }
            .nav-links a {
                font-size: 14px;
                color: var(--ink-2);
            }
            .nav-links a:hover {
                color: var(--ink);
            }
            .nav-cta {
                font-size: 14px;
                color: var(--ink);
            }
            .nav-cta:hover {
                color: var(--accent);
            }
            .nav-toggle {
                display: none;
                width: 42px;
                height: 42px;
                border: 1px solid var(--rule);
                background: transparent;
                color: var(--ink);
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
            }
            .nav-toggle span,
            .nav-toggle::before,
            .nav-toggle::after {
                content: "";
                display: block;
                width: 16px;
                height: 1px;
                background: currentColor;
                transition:
                    transform 0.25s ease,
                    opacity 0.2s ease;
            }
            .nav-toggle span {
                margin: 5px 0;
            }
            .nav-toggle[aria-expanded="true"]::before {
                transform: translateY(6px) rotate(45deg);
            }
            .nav-toggle[aria-expanded="true"] span {
                opacity: 0;
            }
            .nav-toggle[aria-expanded="true"]::after {
                transform: translateY(-6px) rotate(-45deg);
            }
            .mobile-menu {
                display: none;
            }
            @media (max-width: 760px) {
                .nav-links {
                    display: none;
                }
                .nav-inner {
                    gap: 18px;
                }
                .nav-inner > a:first-child {
                    min-width: 0;
                }
                .brand-logo {
                    height: auto;
                    max-height: 26px;
                    max-width: min(190px, calc(100vw - 150px));
                }
                .nav-cta {
                    display: none;
                }
                .nav-toggle {
                    display: inline-flex;
                    flex-direction: column;
                }
                .mobile-menu {
                    display: grid;
                    grid-template-rows: 0fr;
                    border-top: 1px solid transparent;
                    opacity: 0;
                    pointer-events: none;
                    visibility: hidden;
                    transition:
                        grid-template-rows 0.28s ease,
                        border-color 0.28s ease,
                        opacity 0.2s ease,
                        visibility 0.2s ease;
                }
                .mobile-menu.is-open {
                    grid-template-rows: 1fr;
                    border-top-color: var(--rule);
                    opacity: 1;
                    pointer-events: auto;
                    visibility: visible;
                }
                .mobile-menu-inner {
                    overflow: hidden;
                }
                .mobile-menu a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    min-height: 48px;
                    border-bottom: 1px solid var(--rule);
                    color: var(--ink-2);
                    font-size: 15px;
                }
                .mobile-menu a:last-child {
                    color: var(--ink);
                }
                .mobile-menu a::after {
                    content: "→";
                    color: var(--ink-3);
                }
                .mobile-menu a:hover {
                    color: var(--ink);
                }
            }

            /* hero */
            .hero {
                padding: 120px 0 70px;
                position: relative;
                overflow: hidden;
                min-height: 640px;
                display: flex;
                align-items: center;
            }
            .hero-figure {
                position: absolute;
                left: 50%;
                right: auto;
                top: 0;
                bottom: 0;
                width: 100vw;
                transform: translateX(-50%);
                pointer-events: none;
                z-index: 1;
            }
            .hero-figure img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right center;
                filter: saturate(1.05) contrast(1.02);
            }
            .hero-figure::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 2;
                background:
                    linear-gradient(
                        90deg,
                        var(--bg) 0%,
                        rgba(11, 10, 9, 0.78) 22%,
                        rgba(11, 10, 9, 0.42) 40%,
                        rgba(11, 10, 9, 0.12) 58%,
                        rgba(11, 10, 9, 0) 75%
                    ),
                    linear-gradient(
                        180deg,
                        var(--bg) 0%,
                        rgba(11, 10, 9, 0.4) 12%,
                        rgba(11, 10, 9, 0) 28%,
                        rgba(11, 10, 9, 0) 70%,
                        rgba(11, 10, 9, 0.55) 92%,
                        var(--bg) 100%
                    );
            }
            .hero-figure::after {
                content: none;
            }
            .hero .tag {
                margin-bottom: 28px;
            }
            .hero .wrap {
                width: 100%;
                position: relative;
                z-index: 2;
            }
            .hero-text {
                max-width: min(580px, 56%);
                position: relative;
                z-index: 2;
            }
            @media (max-width: 980px) {
                .hero {
                    min-height: 0;
                    padding: 100px 0 56px;
                }
                .hero-figure::before {
                    background: linear-gradient(
                        180deg,
                        rgba(11, 10, 9, 0.92) 0%,
                        rgba(11, 10, 9, 0.55) 40%,
                        rgba(11, 10, 9, 0.45) 100%
                    );
                }
                .hero-text {
                    max-width: 100%;
                }
            }
            h1 {
                font-family: var(--serif);
                font-weight: 300;
                font-size: clamp(40px, 6vw, 96px);
                line-height: 0.96;
                letter-spacing: -0.02em;
                margin: 0;
                text-wrap: balance;
                position: relative;
                z-index: 2;
            }
            h1 em {
                font-style: italic;
                color: var(--ink-2);
                font-weight: 400;
            }
            h1 .accent {
                color: var(--accent);
            }
            .hero-sub {
                margin: 28px 0 0;
                font-family: var(--serif);
                font-style: italic;
                font-weight: 300;
                font-size: clamp(17px, 1.5vw, 22px);
                line-height: 1.4;
                color: var(--ink-2);
                max-width: 38ch;
                position: relative;
                z-index: 2;
            }
            .hero-cta {
                margin-top: 36px;
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
                position: relative;
                z-index: 2;
            }

            .meta {
                margin-top: 52px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                border-top: 1px solid var(--rule);
                position: relative;
                z-index: 2;
                max-width: 480px;
            }
            @media (max-width: 760px) {
                .meta {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            .meta div {
                padding: 14px 0;
                border-bottom: 1px solid var(--rule);
            }
            .meta dt {
                font-size: 11px;
                color: var(--ink-3);
                margin-bottom: 4px;
                letter-spacing: 0.04em;
            }
            .meta dd {
                margin: 0;
                font-size: 13.5px;
                color: var(--ink);
            }

            /* sections */
            section {
                padding: 110px 0;
                border-top: 1px solid var(--rule);
            }
            .sec-head {
                display: grid;
                grid-template-columns: 1fr 2fr;
                gap: 60px;
                margin-bottom: 56px;
                align-items: start;
            }
            @media (max-width: 880px) {
                .sec-head {
                    grid-template-columns: 1fr;
                    gap: 24px;
                    margin-bottom: 40px;
                }
            }
            .sec-num {
                font-family: var(--serif);
                font-style: italic;
                font-weight: 300;
                font-size: 32px;
                color: var(--accent);
                line-height: 1;
            }
            .sec-head h2 {
                margin: 18px 0 0;
                font-family: var(--serif);
                font-weight: 300;
                font-size: clamp(36px, 4.8vw, 68px);
                line-height: 1;
                letter-spacing: -0.02em;
                text-wrap: balance;
            }
            .sec-head h2 em {
                font-style: italic;
                color: var(--ink-2);
                font-weight: 400;
            }
            .sec-head p {
                margin: 0;
                color: var(--ink-2);
                font-size: 17px;
                max-width: 50ch;
                line-height: 1.6;
            }

            /* cubi */
            .grid {
                display: grid;
                border-top: 1px solid var(--rule);
                border-left: 1px solid var(--rule);
            }
            .grid-4 {
                grid-template-columns: repeat(4, 1fr);
            }
            .grid-3 {
                grid-template-columns: repeat(3, 1fr);
            }
            .grid-2 {
                grid-template-columns: repeat(2, 1fr);
            }
            @media (max-width: 980px) {
                .grid-4 {
                    grid-template-columns: repeat(2, 1fr);
                }
                .grid-3 {
                    grid-template-columns: 1fr;
                }
            }
            @media (max-width: 560px) {
                .grid-4,
                .grid-2 {
                    grid-template-columns: 1fr;
                }
            }
            .cube {
                border-right: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
                padding: 32px 28px 28px;
                aspect-ratio: 1/1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                transition: background 0.35s ease;
                overflow: hidden;
            }
            .cube.has-img {
                aspect-ratio: auto;
                min-height: 420px;
            }
            .cube:hover {
                background: var(--bg-2);
            }
            .cube-n {
                font-family: var(--serif);
                font-style: italic;
                font-weight: 300;
                font-size: 22px;
                color: var(--ink-3);
                line-height: 1;
            }
            .cube h3 {
                font-family: var(--serif);
                font-weight: 400;
                font-size: 26px;
                letter-spacing: -0.005em;
                line-height: 1.1;
                margin: 0 0 10px;
            }
            .cube h3 em {
                font-style: italic;
                color: var(--ink-2);
            }
            .cube p {
                margin: 0;
                color: var(--ink-2);
                font-size: 14px;
                line-height: 1.55;
            }
            .cube-bot {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .cube.is-mark .cube-n {
                color: var(--ink-3);
            }
            .cube-img {
                width: calc(100% + 56px);
                margin: 0 -28px 0;
                height: 160px;
                flex: 0 0 160px;
                background: var(--bg-2);
                overflow: hidden;
                position: relative;
                border-bottom: 1px solid var(--rule);
            }
            .cube.has-img {
                padding-top: 0;
                justify-content: flex-start;
                gap: 24px;
            }
            .cube.has-img .cube-bot {
                margin-top: auto;
            }
            .cube-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                filter: saturate(0.92) contrast(1.02);
                transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
            }
            .cube:hover .cube-img img {
                transform: scale(1.04);
            }
            .cube-head {
                display: flex;
                justify-content: flex-end;
                padding: 20px 0 0;
            }
            .cube.has-img .cube-n {
                position: absolute;
                top: 14px;
                right: 18px;
                background: rgba(246, 244, 239, 0.92);
                padding: 4px 10px;
                border-radius: 2px;
                backdrop-filter: blur(4px);
                z-index: 2;
            }
            .cube.has-img {
                position: relative;
            }

            /* method manifesto image */
            .method-figure {
                position: relative;
                margin: 0 0 80px;
                aspect-ratio: 16/9;
                max-height: 560px;
                overflow: hidden;
                border-top: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
            }
            .method-figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .method-figure::after {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    radial-gradient(
                        120% 80% at 50% 100%,
                        rgba(11, 10, 9, 0) 55%,
                        rgba(11, 10, 9, 0.45) 100%
                    ),
                    linear-gradient(
                        180deg,
                        rgba(246, 244, 239, 0) 60%,
                        rgba(246, 244, 239, 0.18) 100%
                    );
            }
            .method-figure figcaption {
                position: absolute;
                left: 32px;
                bottom: 28px;
                right: 32px;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                gap: 24px;
                color: rgba(246, 244, 239, 0.92);
                font-size: 12px;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                z-index: 2;
            }
            .method-figure figcaption em {
                font-family: var(--serif);
                font-style: italic;
                font-size: 22px;
                text-transform: none;
                letter-spacing: -0.01em;
                font-weight: 300;
                color: #fff;
                max-width: 36ch;
                line-height: 1.25;
            }
            @media (max-width: 760px) {
                .method-figure {
                    margin-bottom: 44px;
                    aspect-ratio: 4/3;
                }
                .method-figure figcaption {
                    left: 18px;
                    right: 18px;
                    bottom: 18px;
                    display: block;
                }
                .method-figure figcaption em {
                    font-size: 18px;
                }
                .method-figure figcaption span {
                    display: none;
                }
                .phase-head {
                    display: none !important;
                }
                .phase-row {
                    grid-template-columns: minmax(0, 1fr) auto !important;
                    gap: 8px 18px !important;
                    padding: 20px 0 !important;
                    align-items: baseline !important;
                }
                .phase-row > span:first-child {
                    font-size: 21px !important;
                }
                .phase-row > span:nth-child(2) {
                    grid-column: 1 / -1;
                    order: 3;
                    font-size: 14px !important;
                    line-height: 1.55 !important;
                }
                .phase-row > span:nth-child(3) {
                    order: 2;
                    justify-self: end;
                    white-space: nowrap;
                    font-size: 12.5px !important;
                }
            }

            /* stats */
            /* work list */
            .work-list {
                display: flex;
                flex-direction: column;
                border-top: 1px solid var(--rule);
            }
            .case {
                display: grid;
                grid-template-columns: 80px 1fr 1.4fr 1fr 28px;
                align-items: center;
                gap: 32px;
                padding: 30px 8px;
                border-bottom: 1px solid var(--rule);
                position: relative;
                transition: padding 0.3s ease;
            }
            .case:hover {
                padding-left: 24px;
            }
            .case::before {
                content: "";
                position: absolute;
                left: -100vw;
                right: -100vw;
                top: 0;
                bottom: 0;
                background: linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(232, 84, 42, 0.05) 30%,
                    rgba(232, 84, 42, 0.05) 70%,
                    transparent 100%
                );
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
            }
            .case:hover::before {
                opacity: 1;
            }
            .case > * {
                position: relative;
                z-index: 1;
            }
            @media (max-width: 880px) {
                .case {
                    grid-template-columns: 1fr;
                    gap: 8px;
                    padding: 24px 0;
                }
                .case .c-meta {
                    display: none;
                }
            }
            .c-num {
                font-family: var(--serif);
                font-style: italic;
                font-weight: 300;
                font-size: 22px;
                color: var(--ink-3);
            }
            .c-name {
                font-family: var(--serif);
                font-size: 30px;
                font-weight: 400;
                letter-spacing: -0.01em;
                line-height: 1.1;
            }
            .c-name em {
                font-style: italic;
                color: var(--ink-2);
            }
            .c-desc {
                color: var(--ink-2);
                font-size: 14.5px;
                max-width: 42ch;
                line-height: 1.55;
            }
            .c-meta {
                font-size: 12px;
                color: var(--ink-3);
                text-align: right;
                line-height: 1.5;
            }
            .c-arr {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: 1px solid var(--rule);
                display: grid;
                place-items: center;
                color: var(--ink-3);
                transition: all 0.3s ease;
            }
            .case:hover .c-arr {
                background: var(--accent);
                border-color: var(--accent);
                color: #fff;
                transform: rotate(-45deg);
            }

            /* tech stack */
            .stack {
                border-top: 1px solid var(--rule);
            }
            .stack-row {
                display: grid;
                grid-template-columns: 220px 1fr;
                gap: 32px;
                padding: 26px 8px;
                border-bottom: 1px solid var(--rule);
                align-items: baseline;
                transition: background 0.25s ease;
            }
            .stack-row:hover {
                background: var(--bg-2);
            }
            .stack-cat {
                font-family: var(--serif);
                font-style: italic;
                font-weight: 300;
                font-size: 22px;
                color: var(--accent);
                letter-spacing: -0.005em;
                line-height: 1;
            }
            .stack-tech {
                font-family: var(--serif);
                font-size: 26px;
                font-weight: 400;
                letter-spacing: -0.005em;
                line-height: 1.3;
                color: var(--ink);
            }
            .stack-tech em {
                color: var(--ink-3);
                font-style: normal;
                margin: 0 8px;
                font-weight: 300;
            }
            @media (max-width: 760px) {
                .stack-row {
                    grid-template-columns: 1fr;
                    gap: 6px;
                    padding: 22px 0;
                }
                .stack-cat {
                    font-size: 18px;
                }
                .stack-tech {
                    font-size: 20px;
                }
            }

            /* quote */
            .quote-wrap {
                padding: 120px 0;
                border-top: 1px solid var(--rule);
                border-bottom: 1px solid var(--rule);
            }
            .quote {
                font-family: var(--serif);
                font-weight: 300;
                font-size: clamp(28px, 3.4vw, 48px);
                line-height: 1.18;
                letter-spacing: -0.01em;
                max-width: 24ch;
                margin: 0;
                text-wrap: balance;
            }
            .quote em {
                font-style: italic;
                color: var(--ink-2);
            }
            .quote::before {
                content: "\201C";
                color: var(--accent);
                font-size: 1em;
                margin-right: 0.04em;
            }
            .quote-by {
                margin-top: 36px;
                font-size: 13px;
                color: var(--ink-3);
            }

            /* contact / cta */
            .contact-inner {
                border: 1px solid var(--rule);
                padding: 80px 56px 64px;
                background: #0a0907;
                position: relative;
                overflow: hidden;
                min-height: 520px;
            }
            .contact-inner::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 0;
                background-image: url("/media/contact-studio.webp");
                background-size: cover;
                background-position: right center;
                opacity: 0.95;
            }
            .contact-inner::after {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background:
                    linear-gradient(
                        90deg,
                        var(--bg-2) 0%,
                        rgba(20, 17, 15, 0.88) 18%,
                        rgba(20, 17, 15, 0.55) 38%,
                        rgba(20, 17, 15, 0.18) 56%,
                        rgba(20, 17, 15, 0) 70%
                    ),
                    radial-gradient(
                        700px 360px at 18% 22%,
                        rgba(232, 84, 42, 0.12),
                        transparent 60%
                    );
            }
            .contact-inner > * {
                position: relative;
                z-index: 2;
            }
            @media (max-width: 760px) {
                .contact-inner {
                    padding: 48px 28px;
                    min-height: 0;
                }
                .contact-inner::after {
                    background: linear-gradient(
                        180deg,
                        rgba(20, 17, 15, 0.92) 0%,
                        rgba(20, 17, 15, 0.78) 60%,
                        rgba(20, 17, 15, 0.92) 100%
                    );
                }
            }
            .contact-inner h2 {
                font-family: var(--serif);
                font-weight: 300;
                font-size: clamp(40px, 6vw, 80px);
                line-height: 1;
                letter-spacing: -0.02em;
                margin: 18px 0 0;
                text-wrap: balance;
                max-width: 18ch;
            }
            .contact-inner h2 em {
                font-style: italic;
                color: var(--ink-2);
            }
            .contact-inner p {
                margin: 24px 0 0;
                color: var(--ink-2);
                font-size: 17px;
                max-width: 50ch;
                line-height: 1.6;
            }
            .contact-row {
                margin-top: 40px;
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
            }
            .contact-meta {
                margin-top: 56px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 32px;
                border-top: 1px solid var(--rule);
                padding-top: 28px;
            }
            @media (max-width: 760px) {
                .contact-meta {
                    grid-template-columns: 1fr;
                    gap: 18px;
                }
                .contact-row .btn {
                    width: 100%;
                    justify-content: space-between;
                    min-width: 0;
                    white-space: normal;
                    overflow-wrap: anywhere;
                }
            }
            .cm-label {
                font-size: 12px;
                color: var(--ink-3);
                margin-bottom: 6px;
            }
            .cm-value {
                font-family: var(--serif);
                font-size: 19px;
                font-weight: 400;
            }
            .cm-value a:hover {
                color: var(--accent);
            }

            /* buttons */
            .btn {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 15px 22px;
                border: 1px solid var(--rule);
                font-size: 14px;
                font-weight: 500;
                transition: all 0.25s ease;
            }
            .btn-primary {
                background: var(--ink);
                color: var(--bg);
                border-color: var(--ink);
            }
            .btn-primary:hover {
                background: var(--accent);
                border-color: var(--accent);
                color: #fff;
            }
            .btn-ghost:hover {
                border-color: var(--ink-2);
            }
            .btn .arr {
                transition: transform 0.25s ease;
            }
            .btn:hover .arr {
                transform: translateX(3px);
            }

            /* footer */
            footer {
                border-top: 1px solid var(--rule);
                padding: 48px 0 56px;
            }
            .foot-top {
                display: grid;
                grid-template-columns: 1.4fr 1fr 1fr 1fr;
                gap: 40px;
                margin-bottom: 56px;
            }
            @media (max-width: 880px) {
                .foot-top {
                    grid-template-columns: 1fr 1fr;
                    gap: 32px;
                }
            }
            .foot-logo {
                height: 32px;
                width: auto;
                margin-bottom: 16px;
            }
            .foot-brand p {
                margin: 12px 0 0;
                color: var(--ink-3);
                font-size: 13.5px;
                max-width: 32ch;
                line-height: 1.55;
            }
            .foot-col h5 {
                font-size: 12px;
                color: var(--ink-3);
                margin: 0 0 16px;
                font-weight: 500;
            }
            .foot-col ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .foot-col a {
                font-size: 14px;
                color: var(--ink-2);
            }
            .foot-col a:hover {
                color: var(--accent);
            }
            .foot-bot {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid var(--rule);
                padding-top: 24px;
                font-size: 12px;
                color: var(--ink-3);
                flex-wrap: wrap;
                gap: 18px;
            }

            /* reveal */
            .reveal {
                opacity: 0;
                transform: translateY(18px);
                transition:
                    opacity 0.7s ease,
                    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .reveal.in {
                opacity: 1;
                transform: none;
            }
            .reveal-d2 {
                transition-delay: 0.08s;
            }
            .reveal-d3 {
                transition-delay: 0.16s;
            }
            .reveal-d4 {
                transition-delay: 0.24s;
            }