/*
 * Styles for index.html.
 *
 * The :root blocks below are this page's theme tokens (colors, gradients)
 * — every other rule in the page reads them via var(--name).
 *
 * Everything below the first blank line is generated: one .sc-xxxxxxxx
 * class per unique style that used to be a literal style="..." attribute
 * in index.html. The class name is a hash of the
 * declarations, so identical styles across elements share one class.
 * Don't hand-edit these — regenerate them if the page's inline styles
 * change, since the hash won't match otherwise.
 */
:root {
    --bg: #f7f3f1;
    --fg: #1d1418;
    --muted: #675a61;
    --line: rgba(29, 20, 24, .12);
    --card: #ffffff;
    --accent: #b01f5f;
    --onaccent: #ffffff;
    --soft: #f1e4ea;
    --cta: #4e56b4;
    --oncta: #ffffff;
    --hero-bg: radial-gradient(70% 90% at 82% 100%, #f4bcd4 0%, rgba(244, 188, 212, 0) 62%), radial-gradient(55% 60% at 62% 30%, rgba(255, 226, 238, .95) 0%, rgba(255, 226, 238, 0) 70%), linear-gradient(160deg, #fbf8f6 0%, #f8eef2 55%, #f1dde6 100%);
    --hero-fg: #1d1418;
    --hero-muted: #5f5158;
    --hero-line: rgba(120, 30, 70, .16);
    --hero-line2: rgba(29, 20, 24, .2);
    --tile-bg: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5));
    --tile-border: rgba(120, 30, 70, .14);
    --tile-shadow: 0 18px 40px -18px rgba(120, 30, 70, .35);
    --hero-glow: rgba(214, 70, 140, .35);
    --logo-tile: #ffffff;
    --logo-tile-border: rgba(29, 20, 24, .08)
}

:root[data-theme="dark"] {
    --bg: #140e11;
    --fg: #f5eef1;
    --muted: #ab9ca3;
    --line: rgba(255, 255, 255, .1);
    --card: #1e161a;
    --accent: #e4579a;
    --onaccent: #1a0a11;
    --soft: #2a1a22;
    --cta: #9b9cff;
    --oncta: #12143d;
    --hero-bg: radial-gradient(90% 80% at 85% 95%, #8e1a52 0%, rgba(142, 26, 82, 0) 60%), radial-gradient(60% 60% at 70% 40%, rgba(214, 60, 130, .28) 0%, rgba(214, 60, 130, 0) 70%), linear-gradient(160deg, #0d0709 0%, #1a0b12 45%, #3a0f24 100%);
    --hero-fg: #f5eef1;
    --hero-muted: rgba(245, 238, 241, .72);
    --hero-line: rgba(255, 255, 255, .14);
    --hero-line2: rgba(255, 255, 255, .24);
    --tile-bg: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
    --tile-border: rgba(255, 255, 255, .18);
    --tile-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
    --hero-glow: rgba(228, 87, 154, .55);
    --logo-tile: #ffffff;
    --logo-tile-border: rgba(255, 255, 255, .18)
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
    color: var(--fg)
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--fg);
    font-family: Lato, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background .4s, color .4s
}

* {
    box-sizing: border-box
}

a {
    color: var(--accent);
    text-decoration: none
}

a:hover {
    color: var(--fg)
}

::selection {
    background: var(--accent);
    color: var(--onaccent)
}

input,
textarea {
    font: inherit
}

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

    * {
        transition: none !important
    }
}

.sc-9d2ddfa8 {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none
}

.sc-0f6a31e1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .4s
}

.sc-42bd0810 {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1.5px solid var(--accent);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 80;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width .25s, height .25s, padding .25s, background .25s, opacity .3s, border-color .25s
}

.sc-ce54791a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--onaccent);
    opacity: 0;
    transition: opacity .2s;
    white-space: nowrap
}

.sc-6ba23fda {
    color: var(--fg);
    font-family: Lato, system-ui, sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 62%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--line)
}

.sc-8001ade1 {
    max-width: 1760px;
    margin: 0 auto;
    padding: 14px clamp(20px, 4.5vw, 80px);
    display: flex;
    align-items: center;
    gap: 24px
}

.sc-110f2cb8 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em
}

.sc-6016c095 {
    width: 34px;
    height: auto;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}

.sc-ef77d586 {
    display: flex;
    gap: 4px;
    margin-left: auto
}

.sc-d4825664 {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
    transition: color .2s, background .2s
}

.sc-08c7e30c {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto
}

.sc-f695ab30 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    transition: transform .3s
}

.sc-1c269914 {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-size: 14px;
    font-weight: 600
}

.sc-fa1deb8b {
    position: relative;
    z-index: 1;
    color: var(--fg);
    background: var(--bg);
    font-family: Lato, system-ui, sans-serif;
    transition: background .4s, color .4s
}

.sc-57ce1f1b {
    padding: 0
}

.sc-4caa70c1 {
    position: relative;
    overflow: hidden;
    color: var(--hero-fg);
    transition: color .4s;
    padding-top: 69px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--hero-bg)
}

.sc-357a945d {
    position: relative;
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    align-items: end;
    gap: 0 24px;
    padding: 0 clamp(22px, 4.5vw, 80px)
}

.sc-62783458 {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
    position: relative;
    z-index: 4
}

.sc-bbc0178b {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sc-6a3889c8 {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--hero-line2);
    background: var(--tile-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hero-fg);
    margin-bottom: 8px
}

.sc-cec5e00d {
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 28px);
    color: var(--hero-muted);
    letter-spacing: -.01em
}

.sc-bb2b0e55 {
    color: var(--accent)
}

.sc-0dea9cf5 {
    margin: 0;
    max-width: 500px;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--hero-muted);
    text-wrap: pretty
}

.sc-d5b0c338 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.sc-60743753 {
    padding: 16px 28px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 12px 30px -12px var(--cta)
}

.sc-b69cc502 {
    padding: 16px 26px;
    border-radius: 999px;
    border: 1px solid var(--hero-line2);
    color: var(--hero-fg);
    font-weight: 500;
    font-size: 15px
}

.sc-ab713f24 {
    position: relative;
    align-self: stretch;
    min-height: clamp(380px, 62vw, 660px);
    margin-top: 12px
}

.sc-d5bb9b36 {
    position: absolute;
    left: 50%;
    bottom: -38%;
    width: 118%;
    aspect-ratio: 1/1;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid var(--hero-line);
    pointer-events: none
}

.sc-258c18b7 {
    position: absolute;
    left: 50%;
    bottom: -24%;
    width: 88%;
    aspect-ratio: 1/1;
    margin-left: -44%;
    border-radius: 50%;
    border: 1px dashed var(--hero-line2);
    pointer-events: none
}

.sc-cc60cfe3 {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent)
}

.sc-a7803802 {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 60%;
    aspect-ratio: 1/1;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid var(--hero-line);
    pointer-events: none
}

.sc-c586ac4e {
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: 64%;
    aspect-ratio: 1/1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-glow) 0%, rgba(228, 87, 154, 0) 68%);
    filter: blur(10px);
    pointer-events: none
}

.sc-14740d7a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: 640px;
    margin: auto;
    object-fit: contain;
    object-position: 50% 100%;
    display: block;
    filter: drop-shadow(0 30px 50px rgba(40, 5, 20, .35));
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
    mask-image: linear-gradient(180deg, #000 82%, transparent)
}

.sc-fab921ab {
    position: absolute;
    top: 22%;
    left: 16%;
    z-index: 3;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 21px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    transition: border-color .3s, box-shadow .3s
}

.sc-27b001d7 {
    width: 46%;
    height: 62%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    border-radius: 0
}

.sc-e84a68bc {
    position: absolute;
    top: 56%;
    left: 6%;
    z-index: 3;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 19px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    transition: border-color .3s, box-shadow .3s
}

.sc-89e2cde0 {
    width: 62%;
    height: 62%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    border-radius: 10px
}

.sc-c9c847e8 {
    position: absolute;
    top: 14%;
    left: 82%;
    z-index: 3;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 19px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    transition: border-color .3s, box-shadow .3s
}

.sc-096bf3f2 {
    position: absolute;
    top: 48%;
    left: 92%;
    z-index: 3;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 19px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    transition: border-color .3s, box-shadow .3s
}

.sc-d4df376a {
    position: absolute;
    top: 80%;
    left: 88%;
    z-index: 3;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 17px;
    background: var(--tile-bg);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    transition: border-color .3s, box-shadow .3s
}

.sc-bd7afc27 {
    position: relative;
    z-index: 5;
    width: 100%;
    border-top: 1px solid var(--hero-line);
    background: color-mix(in oklab, var(--bg) 35%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 22px 0 26px
}

.sc-63515453 {
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 clamp(22px, 4.5vw, 80px)
}

.sc-812669b6 {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.sc-2b91114b {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 20px
}

.sc-469a6e3a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hero-muted)
}

.sc-8ab580c5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--hero-muted)
}

.sc-33191c1a {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.sc-295a77e2 {
    display: flex;
    gap: 14px;
    width: max-content;
    will-change: transform
}

.sc-f50c2ab9 {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sc-31772c09 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--hero-fg);
    white-space: nowrap
}

.sc-a39b4c73 {
    font-size: 12px;
    color: var(--hero-muted);
    white-space: nowrap
}

.sc-615dd499 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 4.5vw, 80px)
}

.sc-b0a727a3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(32px, 5vw, 72px)
}

.sc-b5a98edb {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.sc-1c4b887b {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent)
}

.sc-48781da3 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.8vw, 48px);
    letter-spacing: -.03em;
    line-height: 1.05;
    text-wrap: balance
}

.sc-8502c77c {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
    text-wrap: pretty
}

.sc-56e647d4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: center
}

.sc-466b09a8 {
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s
}

.sc-438e0a3e {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 4.4vw, 56px);
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--fg)
}

.sc-d28f53cf {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.4
}

.sc-dc5662e1 {
    padding: clamp(24px, 4vw, 48px) clamp(12px, 2vw, 24px)
}

.sc-ee8fbc0d {
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
    border-radius: clamp(24px, 3vw, 36px);
    overflow: hidden;
    color: #fff;
    min-height: clamp(300px, 40vh, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #140b10;
    box-shadow: 0 40px 90px -50px rgba(90, 20, 60, .8)
}

.sc-1d99a804 {
    position: absolute;
    inset: 0;
    filter: grayscale(1) contrast(1.1)
}

.sc-13a88bf4 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.sc-af4137a2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, #8e1a52 0%, #4e56b4 100%);
    mix-blend-mode: multiply;
    opacity: .95
}

.sc-11eb672c {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 90% at 50% 50%, rgba(18, 8, 14, .35) 0%, rgba(18, 8, 14, .85) 100%)
}

.sc-b5e70a19 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 143, 192, .28), transparent 65%);
    transition: background .1s
}

.sc-55a2d761 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 72px);
    max-width: 860px;
    pointer-events: none
}

.sc-89e15d62 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase
}

.sc-9e31bd56 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9b9cff;
    box-shadow: 0 0 12px #9b9cff
}

.sc-04bb85bf {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 64px);
    letter-spacing: -.035em;
    line-height: 1.02;
    text-wrap: balance
}

.sc-70574c1b {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    color: #ff8fc0
}

.sc-9e002967 {
    margin: 0;
    max-width: 520px;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty
}

.sc-8e672058 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6)
}

.sc-67967082 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 28px;
    border-radius: 999px;
    background: #fff;
    color: #1d1418;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 12px 30px -10px rgba(255, 255, 255, .5)
}

.sc-e1770309 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1d1418;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px
}

.sc-10707e5a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    transition: background .25s
}

.sc-a4005ca8 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4.5vw, 80px)
}

.sc-254784c8 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px
}

.sc-8b94b423 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4.6vw, 60px);
    letter-spacing: -.03em;
    line-height: 1
}

.sc-6b4bbac3 {
    display: flex;
    flex-direction: column
}

.sc-9d88d266 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px 48px;
    padding: 32px 0;
    border-top: 1px solid var(--line)
}

.sc-3503bab9 {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.sc-aa98366b {
    align-self: flex-start;
    width: 112px;
    height: 64px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px -18px rgba(40, 5, 20, .45);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 10px;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1)
}

.sc-51932738 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--muted)
}

.sc-b5ee8725 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.02em
}

.sc-1ab58680 {
    font-size: 15px;
    color: var(--accent);
    font-weight: 500
}

.sc-f1300840 {
    font-size: 14px;
    color: var(--muted)
}

.sc-bc4a255c {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: span 2
}

.sc-44d21a3b {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted)
}

.sc-2d6c7681 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 9px
}

.sc-fc4ef777 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 4.5vw, 80px) 40px
}

.sc-3e4f8000 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px
}

.sc-f21b9371 {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.sc-26530834 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.sc-03445606 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(64px, 9vw, 120px) clamp(20px, 4.5vw, 80px) clamp(40px, 6vw, 80px)
}

.sc-abe38045 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: clamp(28px, 4vw, 48px)
}

.sc-53fec7ef {
    margin: 0;
    max-width: 420px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty
}

.sc-2413eb61 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid var(--line)
}

.sc-a58ee8c7 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    order: 0
}

.sc-8c6a3114 {
    display: flex;
    align-items: baseline;
    gap: 14px
}

.sc-843dbe61 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 28px;
    color: var(--accent)
}

.sc-bcdad683 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted)
}

.sc-7eb9e7e8 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 48px);
    letter-spacing: -.03em;
    line-height: 1.05
}

.sc-2e81d921 {
    margin: 0;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
    text-wrap: pretty
}

.sc-180d237c {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.sc-f5b4ad6a {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--fg)
}

.sc-52dcdee0 {
    align-self: flex-start;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-size: 14px;
    font-weight: 600
}

.sc-e601cf69 {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    background: var(--soft);
    border: 1px solid var(--line);
    box-shadow: 0 40px 80px -44px rgba(40, 5, 20, .45);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
    order: 1
}

.sc-131d0e68 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.sc-a52ba4a0 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    order: 2
}

.sc-f4c5230c {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: clamp(14px, 1.6vw, 20px)
}

.sc-ef0c9cd1 {
    border-radius: 30px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: clamp(22px, 3vw, 36px);
    display: flex;
    flex-direction: column
}

.sc-48638b7e {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 14px
}

.sc-7183496d {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: clamp(14px, 1.6vw, 20px) 0;
    border-top: 1px solid var(--line);
    transition: padding .4s cubic-bezier(.2, .7, .2, 1), color .3s
}

.sc-2a82145d {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--muted)
}

.sc-c15216d4 {
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 30px);
    letter-spacing: -.02em;
    line-height: 1.1
}

.sc-6f3cad1d {
    font-size: 13px;
    color: var(--muted);
    text-align: right
}

.sc-d85f9010 {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px)
}

.sc-aade8fd3 {
    border-radius: 30px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1
}

.sc-55cfd13a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px
}

.sc-4a522215 {
    font-size: 13px;
    color: var(--muted)
}

.sc-af80a1c5 {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 130px
}

.sc-a5dabf9e {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 26px;
    background: var(--soft);
    border: 1px solid var(--line)
}

.sc-fcdc3200 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--fg)
}

.sc-7039a670 {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    padding: clamp(22px, 3vw, 32px);
    color: #fff;
    background: radial-gradient(80% 120% at 100% 0%, #8e1a52 0%, transparent 60%), radial-gradient(70% 100% at 0% 100%, #4e56b4 0%, transparent 65%), #160c12;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.sc-c367548a {
    display: flex;
    align-items: center;
    gap: 10px
}

.sc-9f754947 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -.02em
}

.sc-6e4e132f {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
    max-width: 460px;
    text-wrap: pretty
}

.sc-8a862ab0 {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    font-size: 13px;
    color: #fff;
    transition: background .25s, transform .25s
}

.sc-f799cab0 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 4.5vw, 80px)
}

.sc-9a14ecc4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 32px
}

.sc-efe9e708 {
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-size: 14px
}

.sc-240c513c {
    position: relative;
    margin: 0
}

.sc-596fdf45 {
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 8px 2px 18px
}

.sc-36c0ecfb {
    position: relative;
    display: flex;
    gap: 16px;
    width: max-content;
    padding-top: 34px
}

.sc-0c9757f6 {
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 4%, var(--line) 96%, transparent)
}

.sc-53ca8b84 {
    position: relative;
    width: clamp(240px, 22vw, 290px);
    flex: none
}

.sc-266abf81 {
    cursor: pointer;
    height: 100%;
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .45s
}

.sc-525a99b3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.sc-19802327 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 44px;
    line-height: .9;
    color: var(--accent)
}

.sc-6ec30458 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted)
}

.sc-2ea5c6c5 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-wrap: balance
}

.sc-84453990 {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.sc-0f624f74 {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 12px;
    color: var(--fg)
}

.sc-afe726e5 {
    font-size: 12px;
    font-weight: 700;
    color: var(--cta)
}

.sc-5e0d8eb4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted)
}

.sc-d571254b {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 12px
}

.sc-5bf09937 {
    cursor: pointer;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--card);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s
}

.sc-1ec0252a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.sc-aeeed834 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fg)
}

.sc-9a2d5152 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.sc-425f1be0 {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap
}

.sc-7b6c9708 {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .25s
}

.sc-6b1f1244 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px
}

.sc-043016aa {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 24px;
    background: var(--card);
    border: 1px solid var(--line);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), border-color .3s
}

.sc-e827bb95 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: var(--accent)
}

.sc-b8a63d53 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(19px, 1.8vw, 24px);
    letter-spacing: -.015em;
    line-height: 1.25
}

.sc-923e9003 {
    font-size: 15px;
    color: var(--muted)
}

.sc-9d236159 {
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4.5vw, 80px) clamp(64px, 8vw, 100px)
}

.sc-ca1b666f {
    border-top: 1px solid var(--line);
    padding: clamp(40px, 5vw, 64px) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(32px, 5vw, 64px)
}

.sc-ac0225b3 {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.sc-f045fb4f {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 5.6vw, 76px);
    letter-spacing: -.03em;
    line-height: 1.02;
    text-wrap: balance
}

.sc-6d4caff3 {
    align-self: flex-start;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 2.2vw, 26px);
    color: var(--fg);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
    word-break: break-all
}

.sc-9dd1e1ae {
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-size: 14px;
    font-weight: 500
}

.sc-d9796354 {
    padding: 13px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--fg);
    font-size: 14px;
    font-weight: 500
}

.sc-12e445dd {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--muted)
}

.sc-d74645ee {
    padding: 12px 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1.5px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s
}

.sc-0238b3d4 {
    padding: 12px 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1.5px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-size: 15px;
    outline: none;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s
}

.sc-3da43a15 {
    align-self: flex-start;
    padding: 14px 24px;
    border-radius: 999px;
    border: 0;
    background: var(--cta);
    color: var(--oncta);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer
}

.sc-0047b3eb {
    max-width: 1760px;
    margin: 0 auto;
    padding: 28px clamp(20px, 4.5vw, 80px) 40px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    color: var(--muted)
}

.sc-954776ef {
    display: flex;
    gap: 18px
}

.sc-337e0148 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: #fff
}

.sc-e6c996c7 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.sc-13f346da {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7)
}

.sc-43874c34 {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 2.2vw, 26px);
    letter-spacing: -.015em
}

.sc-e73fb0a3 {
    flex: none;
    margin-left: auto;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap
}

.sc-fd57f465 {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 20px;
    cursor: pointer
}

.sc-0a70096e {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 72vh;
    border-radius: 20px;
    overflow: hidden;
    background: #1e161a;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7)
}

.sc-8276c1a0 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.sc-d0e274f6 {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: color-mix(in oklab, var(--bg) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    z-index: 2
}

.sc-b228f971 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    font-size: 18px;
    transition: transform .3s
}

.sc-7d3b2481 {
    padding: 28px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.sc-a7472e73 {
    aspect-ratio: 16/10;
    border-radius: 20px;
    background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, var(--card)) 0 12px, color-mix(in oklab, var(--accent) 10%, var(--card)) 12px 24px);
    display: grid;
    place-items: center
}

.sc-f2a917cd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--fg);
    opacity: .7
}

.sc-459fe4b3 {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sc-5bb2f015 {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -.025em;
    line-height: 1.05
}

.sc-d6751d15 {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 13px;
    color: var(--fg)
}

.sc-c68f2a89 {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty
}

.sc-3bfe4cf3 {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg)
}

.sc-65825a84 {
    align-self: flex-start;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--cta);
    color: var(--oncta);
    font-weight: 500;
    font-size: 15px
}

.form-error {
    margin: 0;
    color: #e11b22;
    font-size: 13px;
    line-height: 1.4
}

.thanks-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 4, 8, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.thanks-card {
    width: 100%;
    max-width: 360px;
    text-align: center;
    padding: 32px 28px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45)
}

.thanks-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cta);
    color: var(--oncta)
}

.thanks-title {
    margin: 0 0 8px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--fg)
}

.thanks-text {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5
}

.thanks-ok {
    padding: 10px 32px;
    border-radius: 999px;
    border: 0;
    background: var(--cta);
    color: var(--oncta);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer
}
/* ---- Hero title (hand-written, not generated) ----
 * Syne display face; "&" picks up the accent colour and "Visual" is outlined,
 * filling in with the accent when the hero is hovered. */
.hero-title {
    margin: 0;
    font-family: Syne, Poppins, sans-serif;
    font-weight: 800;
    font-size: clamp(44px, 5.6vw, 88px);
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance;
    color: var(--hero-fg)
}

.hero-title__amp {
    font-weight: 600;
    color: var(--accent)
}

.hero-title__outline {
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--hero-fg)
}

.hero-title__outline::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--accent);
    -webkit-text-stroke: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s cubic-bezier(.7, 0, .2, 1)
}

.hero-title:hover .hero-title__outline::after {
    clip-path: inset(0 0 0 0)
}

/* ---- Work: stacked project cards (hand-written, not generated) ----
 * Each .work-card is position:sticky with a per-card `top` (set inline from JS)
 * so the next card slides over the previous one. js/index.js stackScroll()
 * scales/dims the covered card's .work-card__inner. */
.work-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px)
}

.work-card {
    position: sticky;
    cursor: pointer;
    outline: none
}

.work-card__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: min(640px, calc(100vh - 150px));
    border-radius: 28px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 -18px 50px -30px rgba(40, 5, 20, .35);
    transform-origin: 50% 0;
    transition: border-color .4s
}

.work-card:hover .work-card__inner,
.work-card:focus-visible .work-card__inner {
    border-color: color-mix(in oklab, var(--cta) 55%, var(--line))
}

.work-card__meta {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2vw, 26px);
    padding: clamp(24px, 3vw, 44px)
}

.work-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase
}

.work-card__num {
    color: var(--accent)
}

.work-card__total {
    color: var(--muted)
}

.work-card__kind {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted)
}

.work-card__title {
    margin: 0;
    margin-top: auto;
    font-family: Syne, Poppins, sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--fg)
}

/* Rolling title: two stacked copies; hover slides the second (accent) one up. */
.work-card__roll {
    display: inline-grid;
    overflow: hidden;
    vertical-align: bottom
}

.work-card__roll>span {
    grid-area: 1 / 1;
    transition: transform .6s cubic-bezier(.7, 0, .2, 1)
}

.work-card__roll>span+span {
    color: var(--cta);
    transform: translateY(105%)
}

.work-card:hover .work-card__roll>span:first-child {
    transform: translateY(-105%)
}

.work-card:hover .work-card__roll>span+span {
    transform: translateY(0)
}

.work-card__summary {
    margin: 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.6
}

.work-card__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line)
}

.work-card__facts>div {
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.work-card__facts>div:nth-child(odd) {
    padding-right: 16px
}

.work-card__facts dt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px
}

.work-card__facts dd {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--fg)
}

.work-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--cta)
}

.work-card__arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cta);
    color: var(--oncta);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1)
}

.work-card:hover .work-card__arrow {
    transform: translateX(6px) rotate(-45deg)
}

/* Covers have text baked in and vary in aspect ratio, so the full image is shown
 * (never cropped) on top of a blurred, zoomed copy of itself that fills the box. */
.work-card__media {
    position: relative;
    overflow: hidden;
    background: var(--soft);
    margin: 12px 12px 12px 0;
    border-radius: 20px
}

.work-card__backdrop {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    filter: blur(40px) saturate(1.3);
    opacity: .7
}

/* The cover sits in an absolutely positioned frame so its own aspect ratio never
 * stretches the card: every card keeps the same height and the cover scales
 * down to fit inside it. */
.work-card__frame {
    position: absolute;
    inset: 0;
    padding: clamp(18px, 2.4vw, 36px);
    display: flex;
    align-items: center;
    justify-content: center
}

.work-card__cover {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1)
}

.work-card:hover .work-card__cover {
    transform: scale(1.03)
}

/* Phone-only pieces of the card (see the media query below). */
.work-card__sub,
.work-card__chip {
    display: none
}

/* Below 900px the cards stop sticking and stack as a plain list, image on top. */
@media (max-width: 899px) {
    .work-card {
        position: relative
    }

    .work-card__inner {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 22px
    }

    .work-card__media {
        order: -1;
        aspect-ratio: 16 / 10;
        margin: 10px 10px 0
    }

    .work-card__title {
        margin-top: 0
    }

    /* Compact card: cover, name, client · industry and an arrow; the summary,
     * facts grid and counter stay desktop-only. */
    .work-card__meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 4px;
        padding: 16px 16px 18px 20px
    }

    .work-card__head,
    .work-card__summary,
    .work-card__facts,
    .work-card__cta-label {
        display: none
    }

    .work-card__title {
        grid-column: 1;
        font-size: 22px;
        line-height: 1.1
    }

    .work-card__sub {
        display: block;
        grid-column: 1;
        font-size: 14px;
        color: var(--muted)
    }

    .work-card__cta {
        grid-column: 2;
        grid-row: 1 / span 2
    }

    .work-card__arrow {
        width: 44px;
        height: 44px
    }

    .work-card__chip {
        display: block;
        position: absolute;
        z-index: 1;
        top: 12px;
        left: 12px;
        padding: 6px 11px;
        border-radius: 999px;
        background: color-mix(in oklab, var(--bg) 78%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--fg)
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-card__roll>span+span {
        display: none
    }

    .work-card:hover .work-card__roll>span:first-child {
        transform: none
    }
}

/* "View all N projects" link under the featured stack → work.html */
.work-all {
    margin-top: clamp(24px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 44px);
    border-radius: 28px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--fg);
    transition: border-color .4s, background .4s
}

.work-all:hover {
    color: var(--fg);
    border-color: color-mix(in oklab, var(--cta) 55%, var(--line))
}

.work-all__label {
    font-family: Syne, Poppins, sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 44px);
    letter-spacing: -.03em;
    line-height: 1.05
}

.work-all__arrow {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: clamp(48px, 4.5vw, 64px);
    height: clamp(48px, 4.5vw, 64px);
    border-radius: 50%;
    background: var(--cta);
    color: var(--oncta);
    font-size: 22px;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1)
}

.work-all:hover .work-all__arrow {
    transform: translateX(6px)
}

/* "Let's build something" banner, phones: the frosted pill around the two
 * buttons wraps into a lumpy shape, so drop it and stack the buttons. */
@media (max-width: 599px) {
    .sc-8e672058 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none
    }

    .sc-67967082,
    .sc-10707e5a {
        justify-content: center
    }

    .sc-67967082 {
        padding: 14px 14px 14px 24px
    }

    .sc-10707e5a {
        border: 1px solid rgba(255, 255, 255, .35)
    }
}

/* Header nav links: desktop only. The template also hides them from JS once it
 * knows the width, but this keeps them from ever flashing in (and pushing the
 * page sideways) on phones and tablets while the page first loads. Shared by
 * work.html, which loads this file too. */
@media (max-width: 900px) {
    .sc-ef77d586 {
        display: none
    }
}

/* Button-style links keep their own text colour on hover. The global
 * `a:hover { color: var(--fg) }` above is meant for plain text links; on these
 * filled or fixed-colour buttons it made the label vanish (e.g. "Download
 * resume" turned white on its white pill in dark mode) or lose contrast. */
.sc-67967082:hover {
    color: #1d1418
}

.sc-10707e5a:hover,
.sc-e73fb0a3:hover {
    color: #fff
}

.sc-1c269914:hover,
.sc-52dcdee0:hover,
.sc-60743753:hover,
.sc-65825a84:hover,
.sc-7b6c9708:hover,
.sc-9dd1e1ae:hover {
    color: var(--oncta)
}