:root {
    --color-bg: #080706;
    --color-bg-soft: #100d0c;
    --color-surface: #151110;
    --color-surface-raised: #1d1715;
    --color-line: rgba(232, 218, 206, 0.12);
    --color-line-strong: rgba(232, 218, 206, 0.22);
    --color-text: #f3eee7;
    --color-muted: #aea29a;
    --color-soft: #ded3c8;
    --color-accent: #c45543;
    --color-accent-strong: #9f7d71;
    --color-cool: #8d817b;
    --color-danger: #b76554;
    --color-danger-rgb: 183, 101, 84;
    --color-accent-rgb: 196, 85, 67;
    --color-accent-strong-rgb: 159, 125, 113;
    --color-ash-rgb: 232, 218, 206;
    --color-smoke-rgb: 141, 129, 123;
    --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.38);
    --shadow-tight: 0 10px 30px rgba(0, 0, 0, 0.28);
    --radius: 8px;
    --container: 1400px;
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --page-progress: 0;
}

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

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

body {
    min-width: 320px;
    margin: 0;
    color: var(--color-text);
    background:
        radial-gradient(circle at 18% 10%, rgba(var(--color-accent-rgb), 0.075), transparent 28rem),
        radial-gradient(circle at 86% 18%, rgba(var(--color-accent-strong-rgb), 0.04), transparent 24rem),
        linear-gradient(180deg, #080706 0%, #100d0c 48%, #080706 100%),
        var(--color-bg);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}

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

::selection {
    color: #160b09;
    background: rgba(var(--color-accent-rgb), 0.82);
}

.site-wrapper {
    min-height: 100vh;
    overflow: clip;
}

.site-main {
    position: relative;
}

.site-main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--color-ash-rgb), 0.03), transparent 24rem),
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.018), transparent 16rem);
    opacity: 0.78;
}

.container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
}

section {
    position: relative;
    padding: 72px 0;
    border-top: 1px solid rgba(var(--color-ash-rgb), 0.08);
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

h1,
h2,
h3 {
    line-height: 1.06;
    text-wrap: balance;
}

p,
a,
span,
strong,
label,
input,
textarea,
h1,
h2,
h3 {
    overflow-wrap: break-word;
}

.eyebrow,
.services-eyebrow,
.game-eyebrow,
.projects-eyebrow,
.studio-eyebrow,
.contact-eyebrow,
.footer-kicker,
.service-label,
.service-number,
.project-type,
.project-label,
.projects-footer-label,
.studio-aside-label {
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.section-header {
    display: grid;
    gap: 20px;
    margin-bottom: 34px;
}

.section-header h2 {
    max-width: 760px;
    font-size: 2.1rem;
}

.section-header .services-intro,
.section-header .projects-intro,
.section-header .studio-aside p:not(.studio-aside-label) {
    color: var(--color-muted);
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    transition:
        transform 220ms var(--ease-premium),
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius) - 1px);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--color-ash-rgb), 0.14), transparent 58%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.btn > * {
    position: relative;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:hover::before {
    opacity: 1;
}

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

.btn-primary {
    border-color: rgba(var(--color-accent-rgb), 0.62);
    color: #170c0a;
    background: linear-gradient(135deg, #d1624e, var(--color-accent-strong));
    box-shadow: 0 12px 34px rgba(var(--color-accent-rgb), 0.14);
}

.btn-primary:hover {
    border-color: rgba(var(--color-accent-rgb), 0.78);
    background: linear-gradient(135deg, #dc715f, #aa8477);
    box-shadow:
        0 14px 34px rgba(var(--color-accent-rgb), 0.2),
        inset 0 1px 0 rgba(var(--color-ash-rgb), 0.28);
}

.btn-secondary {
    border-color: rgba(var(--color-ash-rgb), 0.18);
    background: rgba(var(--color-ash-rgb), 0.034);
    box-shadow: inset 0 1px 0 rgba(var(--color-ash-rgb), 0.04);
}

.btn-secondary:hover {
    border-color: rgba(var(--color-accent-rgb), 0.34);
    color: var(--color-text);
    background: rgba(var(--color-ash-rgb), 0.062);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(var(--color-ash-rgb), 0.08);
}

.inline-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--color-accent);
    font-weight: 700;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.42);
    transition: color 200ms ease, border-color 200ms ease;
}

.inline-link:hover {
    color: var(--color-accent-strong);
    border-color: rgba(var(--color-accent-strong-rgb), 0.62);
}

.brand:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible,
.inline-link:focus-visible,
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.footer-link:focus-visible,
.site-footer a:focus-visible {
    outline: 2px solid rgba(var(--color-accent-rgb), 0.82);
    outline-offset: 3px;
}

.site-footer {
    padding: 52px 0 28px;
    color: var(--color-muted);
    background: #080706;
    border-top: 1px solid rgba(var(--color-ash-rgb), 0.1);
}

.footer-grid {
    display: grid;
    gap: 30px;
}

.footer-brand h3 {
    max-width: 560px;
    margin-top: 10px;
    color: var(--color-text);
    font-size: 1.35rem;
}

.footer-brand p:not(.footer-kicker) {
    max-width: 620px;
    margin-top: 14px;
}

.footer-signals,
.contact-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.footer-signals span,
.contact-points span {
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    color: var(--color-soft);
    background: rgba(var(--color-ash-rgb), 0.028);
    font-size: 0.86rem;
}

.footer-block h4 {
    margin-bottom: 12px;
    color: var(--color-text);
    font-size: 0.95rem;
}

.footer-block ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-block a,
.footer-link {
    color: var(--color-muted);
    transition: color 180ms ease;
}

.footer-block a:hover,
.footer-link:hover {
    color: var(--color-soft);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 38px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--color-ash-rgb), 0.08);
    font-size: 0.88rem;
}

.reveal-ready .reveal-target {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    clip-path: inset(0);
    transition:
        opacity 420ms var(--ease-premium),
        transform 420ms var(--ease-premium),
        filter 420ms var(--ease-premium),
        clip-path 460ms var(--ease-premium);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready .reveal-target[data-reveal="heading"] {
    transform: translateY(16px);
    filter: blur(3px);
}

.reveal-ready .reveal-target[data-reveal="card"] {
    transform: translateY(24px) scale(0.985);
    filter: blur(4px);
}

.reveal-ready .reveal-target[data-reveal="panel"] {
    transform: translateY(18px) scale(0.992);
    clip-path: inset(10px 0 0);
}

.reveal-ready .reveal-target.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    clip-path: inset(0);
}

@media (min-width: 760px) {
    section {
        padding: 90px 0;
    }

    .section-header {
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.7fr);
        align-items: end;
        gap: 40px;
        margin-bottom: 42px;
    }

    .section-header h2 {
        font-size: 2.4rem;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1.25fr) 0.55fr 0.8fr;
        align-items: start;
    }

    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1120px) {
    section {
        padding: 108px 0;
    }

    .section-header h2 {
        font-size: 2.75rem;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal-ready .reveal-target {
        opacity: 1;
        transform: none;
        filter: none;
    }
}