:root {
                --bg: #eceef0;
                --ink: #0f1114;
                --mut: #4b5159;
                --line: #c3c8cd;
                --card: #ffffff;
                --chip: #8a9199;
                --acc: #e8401c;
                --acc: #8b5cf6;
                box-sizing: border-box;
                padding-top: env(safe-area-inset-top, 0px);
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            :root {
                color-scheme: light;
            }
            html {
                scroll-padding-top: env(safe-area-inset-top, 0px);
                scroll-behavior: smooth;
            }
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                background: var(--bg);
                color: var(--ink);
                font:
                    400 18px/1.6 "Schibsted Grotesk",
                    system-ui,
                    -apple-system,
                    "Segoe UI",
                    sans-serif;
                overflow-x: hidden;
            }
            a {
                color: inherit;
            }
            h1,
            h2,
            h3,
            p {
                margin: 0;
            }
            img {
                max-width: 100%;
            }
            .wrap {
                max-width: 1180px;
                margin: 0 auto;
                padding: 0 24px;
            }
            .mono {
                font-family: "DM Mono", ui-monospace, Menlo, monospace;
                font-size: 18px;
                letter-spacing: 0.01em;
                color: var(--mut);
            }
            h1,
            h2 {
                font-weight: 800;
                letter-spacing: -0.045em;
                line-height: 1;
            }
            h1 {
                font-size: clamp(42px, 8vw, 88px);
            }
            h2 {
                font-size: clamp(36px, 5.4vw, 64px);
            }
            .ul {
                text-decoration: none;
                background: linear-gradient(currentColor, currentColor) 0 100%/0% 1px no-repeat;
                transition: background-size 0.4s;
                padding-bottom: 2px;
            }
            .ul:hover {
                background-size: 100% 1px;
            }
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                min-height: 56px;
                padding: 0 28px;
                border-radius: 999px;
                font:
                    600 19px "Schibsted Grotesk",
                    sans-serif;
                text-decoration: none;
                cursor: pointer;
                border: 1px solid var(--ink);
                transition:
                    gap 0.3s,
                    background 0.3s,
                    color 0.3s;
            }
            .btn:hover {
                gap: 20px;
            }
            .solid {
                background: var(--ink);
                color: var(--bg);
            }
            .solid:hover {
                background: var(--acc);
                border-color: var(--acc);
                color: #0f1114;
            }
            .line {
                background: transparent;
                color: var(--ink);
            }
            .line:hover {
                background: var(--ink);
                color: var(--bg);
            }
            .btns {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
            }
            .live {
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background: var(--acc);
                display: inline-block;
                animation: ping 2s infinite;
            }
            @keyframes ping {
                0% {
                    box-shadow: 0 0 0 0 rgba(232, 64, 28, 0.55);
                }
                100% {
                    box-shadow: 0 0 0 12px rgba(232, 64, 28, 0);
                }
            }
            .in {
                opacity: 0;
                transform: translateY(28px);
                animation: in 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            }
            .a1 {
                animation-delay: 0.1s;
            }
            .a2 {
                animation-delay: 0.3s;
            }
            .a3 {
                animation-delay: 0.5s;
            }
            @keyframes in {
                to {
                    opacity: 1;
                    transform: none;
                }
            }
            .rule {
                height: 1px;
                background: var(--ink);
                transform-origin: left;
                transform: scaleX(0);
                animation: draw 1.6s 0.2s cubic-bezier(0.7, 0, 0.2, 1) forwards;
            }
            @keyframes draw {
                to {
                    transform: scaleX(1);
                }
            }
            /* header */
            .nav {
                display: flex;
                flex-wrap: wrap;
                gap: 8px 24px;
                align-items: center;
                justify-content: space-between;
                padding: 20px 0;
            }
            .nav b {
                font-weight: 800;
                font-size: 22px;
                letter-spacing: -0.03em;
            }
            .nav div {
                display: flex;
                gap: 24px;
                font-weight: 600;
            }
            .nav a {
                min-height: 44px;
                display: flex;
                align-items: center;
            }
            /* hero */
            .hero {
                padding: 56px 24px 88px;
            }
            .meta {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 28px;
                align-items: center;
                margin-bottom: 32px;
            }
            .meta span:first-child {
                color: var(--ink);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .hero h1 {
                margin-bottom: 48px;
                max-width: 980px;
            }
            .hr {
                display: flex;
                flex-wrap: wrap;
                gap: 40px 64px;
                align-items: flex-end;
                justify-content: space-between;
                border-top: 1px solid var(--line);
                padding-top: 32px;
            }
            .num {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-end;
                gap: 12px 20px;
            }
            @property --n {
                syntax: "<integer>";
                initial-value: 2;
                inherits: false;
            }
            .cnt {
                --n: 2;
                counter-reset: n var(--n);
                font-size: clamp(130px, 24vw, 280px);
                font-weight: 800;
                line-height: 0.8;
                letter-spacing: -0.07em;
                animation: cnt 2.4s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
            }
            .cnt::after {
                content: counter(n);
            }
            @keyframes cnt {
                to {
                    --n: 15;
                }
            }
            .cap {
                max-width: 230px;
                padding-bottom: 6px;
            }
            .cap strong {
                display: block;
                font-size: 22px;
                line-height: 1.25;
                margin-top: 6px;
            }
            .side {
                flex: 1 1 360px;
                max-width: 480px;
            }
            .side p {
                font-size: 21px;
                margin-bottom: 28px;
                color: var(--mut);
            }
            /* carousel */
            .dark {
                background: #0f1114;
                color: #eceef0;
                padding: 88px 0;
                border-top: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
            }
            .dark .mono {
                color: #a3aab2;
            }
            .dh {
                display: flex;
                flex-wrap: wrap;
                gap: 16px 24px;
                justify-content: space-between;
                align-items: flex-end;
                margin-bottom: 44px;
            }
            .dh h2 {
                max-width: 760px;
                margin-top: 14px;
            }
         .mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg, transparent, #000 6%, #000 94%, transparent
    );
    mask-image: linear-gradient(
        90deg, transparent, #000 6%, #000 94%, transparent
    );
}
          .track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 20px 0 28px;
    animation: slide 70s linear infinite;
    will-change: transform;
}
@media (max-width: 768px) {
    .mask {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .mask::-webkit-scrollbar {
        display: none;
    }

    .track {
        animation: none !important;
        transform: none !important;
        width: max-content;
        will-change: auto;
    }

    .rev {
        animation: none !important;
    }

    .pc {
        width: 84vw;
        max-width: 360px;
        flex: 0 0 84vw;
    }
}
            .track:hover {
                animation-play-state: paused;
            }
            @keyframes slide {
                to {
                    transform: translateX(-50%);
                }
            }
            
            @media (hover: hover) and (pointer: fine) {
    .mask:hover .track {
        animation-play-state: paused;
    }
}
            .pc {
                width: 360px;
                flex: none;
                background: #181b20;
                border: 1px solid #2a2e35;
                border-radius: 20px;
                overflow: hidden;
                text-decoration: none;
                color: #eceef0;
                transition:
                    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                    opacity 0.4s,
                    filter 0.4s,
                    border-color 0.4s;
            }
            .track:hover .pc {
                opacity: 0.4;
                filter: saturate(0.5);
            }
            .track .pc:hover {
                opacity: 1;
                filter: none;
                transform: translateY(-14px) rotate(-1deg);
                border-color: var(--acc);
            }
           .th{height:250px;overflow:hidden;display:flex;align-items:flex-end;padding:14px;background-size:cover;background-position:top center;background-repeat:no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.th span{background:#0F1114;color:#ECEEF0;padding:2px 14px;border-radius:999px;font:500 18px 'DM Mono',monospace}
            .pc:hover .th {
                transform: scale(1.06);
            }
            .pw {
                overflow: hidden;
            }
            .pb {
                padding: 22px;
                display: flex;
                gap: 16px;
                justify-content: space-between;
                align-items: flex-start;
            }
            .pb h3 {
                font-size: 26px;
                letter-spacing: -0.03em;
                margin-bottom: 6px;
            }
            .pb p {
                color: #b4bac1;
            }
            .ar {
                width: 48px;
                height: 48px;
                flex: none;
                border-radius: 24px;
                border: 1px solid #4a5058;
                display: flex;
                align-items: center;
                justify-content: center;
                transition:
                    transform 0.5s,
                    background 0.3s,
                    color 0.3s;
            }
            .pc:hover .ar {
                transform: rotate(45deg);
                background: var(--acc);
                color: #0f1114;
            }
            .ol {
                font-weight: 800;
                font-size: 64px;
                letter-spacing: -0.04em;
                white-space: nowrap;
                padding-right: 56px;
                color: transparent;
                -webkit-text-stroke: 1px #5c636c;
            }
            .rev {
                animation-direction: reverse;
                animation-duration: 90s;
                padding: 0;
            }
            /* outcomes + quotes */
            .sec {
                padding: 104px 0;
            }
            .sec h2 {
                margin: 14px 0 56px;
                max-width: 820px;
            }
            .g3 {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 0 40px;
            }
            .oc {
                border-top: 1px solid var(--ink);
                padding: 28px 0 40px;
            }
            .oc .mono {
                display: block;
                margin-bottom: 40px;
            }
            .oc h3 {
                font-size: 32px;
                line-height: 1.05;
                letter-spacing: -0.035em;
                margin-bottom: 14px;
            }
            .oc p {
                margin-bottom: 20px;
            }
            .oc strong {
                font-family: "DM Mono", monospace;
                font-weight: 500;
            }
            .quotes {
                border-top: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
            }
            .quotes .g3 {
                gap: 48px 40px;
                padding: 88px 0;
            }
            .q p {
                font-size: 22px;
                line-height: 1.4;
                margin-bottom: 24px;
            }
            .q b {
                display: block;
            }
            /* contact */
            .contact {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 56px 72px;
                align-items: start;
                padding: 104px 24px;
            }
            .contact h2 {
                font-size: clamp(42px, 7.4vw, 104px);
                line-height: 0.95;
                margin: 20px 0 28px;
            }
            .contact .lead {
                font-size: 21px;
                color: var(--mut);
                max-width: 520px;
                margin-bottom: 36px;
            }
            .mk {
                display: flex;
                gap: 20px;
                padding: 16px 0;
                border-top: 1px solid var(--ink);
                font-weight: 600;
            }
            .mk .mono {
                flex: 0 0 32px;
            }
            .card {
                background: var(--card);
                border: 1px solid var(--line);
                border-radius: 24px;
                padding: 28px;
            }
            .chips {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 16px 0 22px;
            }
            .chip {
                min-height: 48px;
                padding: 0 18px;
                border-radius: 999px;
                font:
                    600 18px "Schibsted Grotesk",
                    sans-serif;
                cursor: pointer;
                background: transparent;
                color: var(--ink);
                border: 1px solid var(--chip);
                transition:
                    background 0.25s,
                    color 0.25s;
            }
            .chip[aria-pressed="true"] {
                background: var(--ink);
                color: var(--bg);
                border-color: var(--ink);
            }
            label {
                display: block;
                margin-bottom: 8px;
            }
            #biz {
                font: inherit;
                width: 100%;
                min-height: 54px;
                padding: 0 16px;
                border: 1px solid var(--chip);
                border-radius: 12px;
                background: var(--card);
                color: var(--ink);
                margin-bottom: 20px;
            }
            .draft {
                background: #f3f4f6;
                border-radius: 14px;
                padding: 18px;
                margin-bottom: 20px;
                font:
                    400 18px/1.6 "DM Mono",
                    monospace;
            }
            .draft div:nth-child(2) {
                margin-bottom: 12px;
            }
            #body {
                white-space: pre-wrap;
            }
            #body::after {
                content: "";
                display: inline-block;
                width: 8px;
                height: 1em;
                background: var(--acc);
                margin-left: 3px;
                vertical-align: -2px;
                animation: blink 1s steps(1) infinite;
            }
            @keyframes blink {
                50% {
                    opacity: 0;
                }
            }
            .note {
                color: var(--mut);
                margin-top: 16px;
                font-size: 18px;
            }
            /* footer */
            footer {
                background: #0f1114;
                color: #eceef0;
                border-top: 1px solid var(--line);
                padding: 96px 0 28px;
            }
            footer .mono {
                color: #a3aab2;
            }
            .ft {
                display: flex;
                flex-wrap: wrap;
                gap: 32px;
                justify-content: space-between;
                align-items: flex-end;
                margin-bottom: 72px;
            }
            .ft h2 {
                max-width: 720px;
                margin-top: 18px;
            }
            .clock {
                font:
                    500 clamp(48px, 6vw, 72px) / 1 "DM Mono",
                    monospace;
                letter-spacing: -0.04em;
                text-align: right;
            }
            .fg {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 48px 56px;
            }
            .fg .mono {
                display: block;
                margin-bottom: 20px;
            }
            .fl {
                display: flex;
                justify-content: space-between;
                gap: 16px;
                align-items: center;
                width: 100%;
                min-height: 58px;
                padding: 14px 0;
                border: 0;
                border-top: 1px solid #2a2e35;
                background: none;
                font: inherit;
                color: #eceef0;
                text-align: left;
                text-decoration: none;
                cursor: pointer;
                transition: padding 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .fl:hover {
                padding-left: 16px;
            }
            .fl i {
                font-style: normal;
                color: #a3aab2;
                transition:
                    transform 0.4s,
                    color 0.3s;
            }
            .fl:hover i {
                transform: translateX(6px);
                color: var(--acc);
            }
            .end {
                border-top: 1px solid #2a2e35;
            }
            .st {
                display: flex;
                gap: 20px;
                padding: 18px 0;
                border-top: 1px solid #2a2e35;
                color: #c9ced4;
            }
            .st .mono {
                color: var(--acc);
                flex: 0 0 32px;
            }
            .wm {
                font-weight: 800;
                font-size: clamp(44px, 11vw, 168px);
                letter-spacing: -0.06em;
                line-height: 0.85;
                white-space: nowrap;
                color: transparent;
                -webkit-text-stroke: 1px #4a5058;
                margin-top: 88px;
                transition:
                    color 0.7s,
                    -webkit-text-stroke-color 0.7s;
                overflow: hidden;
            }
            .wm:hover {
                color: #eceef0;
                -webkit-text-stroke-color: #eceef0;
            }
            .bar {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid #2a2e35;
                margin-top: 28px;
                padding-top: 24px;
                color: #a3aab2;
            }
            /* tablet and phone: everything stacks, except the slide */
            @media (max-width: 900px) {
                .contact {
                    grid-template-columns: 1fr;
                }
                .g3,
                .fg {
                    grid-template-columns: 1fr;
                }
                .g3 {
                    gap: 0;
                }
                .clock {
                    text-align: left;
                }
                .sec,
                .contact {
                    padding-top: 72px;
                    padding-bottom: 72px;
                }
                .dark {
                    padding: 72px 0;
                }
                .quotes .g3 {
                    padding: 64px 0;
                    gap: 40px;
                }
                .oc .mono {
                    margin-bottom: 24px;
                }
            }
            @media (max-width: 600px) {
                .wrap,
                .hero,
                .contact {
                    padding-left: 20px;
                    padding-right: 20px;
                }
                .hero {
                    padding-top: 40px;
                }
                .nav div {
                    gap: 20px;
                }
                .btn {
                    width: 100%;
                }
                .hr {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .side {
                    max-width: none;
                    flex-basis: auto;
                }
                .pc {
                    width: 84vw;
                    max-width: 360px;
                }
                .ol {
                    font-size: 52px;
                }
                .card {
                    padding: 22px;
                }
                footer {
                    padding-top: 72px;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                * {
                    animation: none !important;
                    transition: none !important;
                }
                .in {
                    opacity: 1;
                    transform: none;
                }
                .rule {
                    transform: none;
                }
                .cnt::after {
                    content: "15";
                }
            }