/* Merriweather self-hosted (variabile 300-900, subset latin). Preload in meta.php.
   Same-origin + preload = font pronto prima del paint: niente render-block, niente flash. */
@font-face {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 300 900;
    /* optional: usa Merriweather se pronto in tempo (preload → sì su reti buone),
       altrimenti resta il fallback per quella visita. Niente ri-disegno = niente flash
       e l'LCP non aspetta il font su reti lente. */
    font-display: optional;
    src: url("/assets/frontend/fonts/merriweather/merriweather-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-display: "Merriweather", "Baskerville", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --font-body: "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", "SF Mono", "IBM Plex Mono", "Menlo", monospace;
    --font-brand: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --color-paper: #ece9e4;
    --color-ink: #0a0a0a;
    --color-charcoal: #1a1a1a;
    --color-muted: #b8b4ae;
    --color-accent: #c41248;
    --color-accent-on-dark: color-mix(in srgb, var(--color-accent) 72%, var(--color-paper));
    --color-accent-line: rgba(196, 18, 72, 0.48);
    --color-accent-soft: rgba(196, 18, 72, 0.18);
    --color-line: rgba(10, 10, 10, 0.12);
    --color-line-inverse: rgba(236, 233, 228, 0.16);
    --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
    --section-space: clamp(3.75rem, 5.6vw, 6.4rem);
    --container-wide: 1360px;
    --container-copy: 760px;
    --shadow-soft: 0 24px 80px rgba(10, 10, 10, 0.08);
    --label-size: 0.75rem;
    --label-tracking: 0.115em;
}

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-paper);
    color: var(--color-ink);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 10, 0.032) 1px, transparent 1px);
    background-size: 100% 100%, 72px 72px;
    opacity: 0.55;
    z-index: -1;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    /* Sopra qualsiasi overlay (CookieHub & co. piazzano il banner a max int).
       pointer-events: none lascia comunque passare i click. */
    z-index: 2147483647;
    display: none;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(214, 47, 96, 0.35);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 42%),
        rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(214, 47, 96, 0.1);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    contain: layout style paint;
    backdrop-filter: blur(4px) saturate(1.25) contrast(1.05);
    -webkit-backdrop-filter: blur(4px) saturate(1.25) contrast(1.05);
    transition:
        width 150ms var(--ease-editorial),
        height 150ms var(--ease-editorial),
        opacity 130ms ease,
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        backdrop-filter 150ms ease,
        -webkit-backdrop-filter 150ms ease;
    will-change: transform;
}

.custom-cursor::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 46%);
    opacity: 0.56;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.has-custom-cursor .custom-cursor {
    display: block;
}

.has-custom-cursor,
.has-custom-cursor * {
    cursor: none !important;
}

.has-custom-cursor.custom-cursor-is-visible .custom-cursor {
    opacity: 0.9;
}

.has-custom-cursor.custom-cursor-is-focused .custom-cursor {
    width: 44px;
    height: 44px;
    border-color: rgba(214, 47, 96, 0.5);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.34),
        0 0 12px rgba(214, 47, 96, 0.1);
    backdrop-filter: blur(5px) saturate(1.35) contrast(1.08);
    -webkit-backdrop-filter: blur(5px) saturate(1.35) contrast(1.08);
}

.has-custom-cursor.custom-cursor-is-focused .custom-cursor::before {
    opacity: 0.64;
}

.has-custom-cursor.custom-cursor-is-pressed .custom-cursor {
    border-color: rgba(214, 47, 96, 0.58);
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.32),
        0 0 10px rgba(214, 47, 96, 0.12);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .custom-cursor {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 8px rgba(214, 47, 96, 0.06);
    }
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

h1 {
    font-size: clamp(4.9rem, 13.2vw, 9.8rem);
}

h2 {
    font-size: clamp(2.6rem, 4.8vw, 5.1rem);
}

h3 {
    font-size: clamp(1.45rem, 1.9vw, 2rem);
}

p,
li,
label {
    margin: 0;
    font-size: 1rem;
    line-height: 1.64;
    letter-spacing: 0.01em;
}

section {
    position: relative;
    padding: var(--section-space) 0;
}

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

.section-shell {
    position: relative;
}

.section-shell--dark {
    background: var(--color-ink);
    color: var(--color-paper);
}

.section-shell--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(236, 233, 228, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 233, 228, 0.03) 1px, transparent 1px);
    background-size: 96px 96px;
    pointer-events: none;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(0.85rem, 1.7vw, 1.45rem);
    color: inherit;
}

.section-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.14;
}

.section-shell:not(.section-shell--dark) .section-divider::after {
    background: linear-gradient(90deg, var(--color-accent) 0 34px, currentColor 34px 100%);
    opacity: 0.18;
}

.section-shell--dark .section-divider::after {
    background: linear-gradient(90deg, var(--color-accent-on-dark) 0 30px, currentColor 30px 100%);
    opacity: 0.26;
}

.section-index,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: var(--label-tracking);
    color: var(--color-accent);
    transition: color 160ms var(--ease-editorial);
    margin-bottom: 15px;
}

.section-shell--dark .section-index,
.section-shell--dark .eyebrow {
    color: var(--color-accent-on-dark);
}

.section-index::before,
.eyebrow::before {
    content: "";
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, currentColor 0 10px, transparent 10px 100%);
    opacity: 0.86;
}

.lede {
    font-size: clamp(1.04rem, 1.45vw, 1.17rem);
    line-height: 1.62;
    max-width: 32rem;
    color: rgba(10, 10, 10, 0.82);
}

.section-shell--dark .lede {
    color: rgba(236, 233, 228, 0.86);
}

.section-title {
    max-width: 12ch;
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr);
    gap: clamp(1.25rem, 3.2vw, 3.2rem);
    align-items: end;
    margin-bottom: clamp(1.65rem, 3.2vw, 3.2rem);
}

.section-intro > * {
    min-width: 0;
}

.btn,
a.btn,
button.btn {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--color-ink);
    border-radius: 0;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: transform 180ms var(--ease-editorial), background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.btn::before {
    content: "";
    position: absolute;
    inset: auto 12px 8px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.85;
    transition: transform 180ms var(--ease-editorial);
}

.btn::after {
    content: "/";
    color: var(--color-accent);
    font-size: 1.1em;
    transition: transform 180ms var(--ease-editorial), color 180ms ease;
}

.btn:hover,
.btn:focus-visible,
a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-ink);
    box-shadow: inset 0 0 0 1px var(--color-accent-soft);
    transform: translateY(-2px);
}

.btn:hover::before,
.btn:focus-visible::before,
a.btn:hover::before,
a.btn:focus-visible::before,
button.btn:hover::before,
button.btn:focus-visible::before {
    transform: scaleX(1);
}

.btn:hover::after,
.btn:focus-visible::after,
a.btn:hover::after,
a.btn:focus-visible::after,
button.btn:hover::after,
button.btn:focus-visible::after {
    transform: translateX(3px);
}

.btn-ghost {
    background: transparent !important;
    color: var(--color-ink) !important;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--color-ink) !important;
    border-color: var(--color-accent);
    color: var(--color-paper) !important;
}

.section-shell--dark .btn {
    border-color: var(--color-paper);
    background: var(--color-paper);
    color: var(--color-ink);
}

.section-shell--dark .btn:hover,
.section-shell--dark .btn:focus-visible {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-paper);
}

.section-shell--dark .btn-ghost {
    border-color: rgba(236, 233, 228, 0.28);
    color: var(--color-paper) !important;
}

.section-shell--dark .btn:hover::before,
.section-shell--dark .btn:focus-visible::before {
    background: var(--color-accent-on-dark);
}

.section-shell--dark .btn:hover::after,
.section-shell--dark .btn:focus-visible::after,
.section-shell--dark .btn-ghost::after {
    color: var(--color-accent-on-dark);
}

.section-shell--dark .btn-ghost:hover,
.section-shell--dark .btn-ghost:focus-visible {
    background: var(--color-paper) !important;
    border-color: var(--color-accent);
    color: var(--color-ink) !important;
}

.section-shell--dark .btn-ghost:hover::before,
.section-shell--dark .btn-ghost:focus-visible::before {
    background: var(--color-accent);
}

.section-shell--dark .btn-ghost:hover::after,
.section-shell--dark .btn-ghost:focus-visible::after {
    color: var(--color-accent);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1050;
    width: 100%;
    padding: 0;
    color: var(--color-ink);
}

.site-header__bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    min-height: clamp(66px, 5.2vw, 82px);
    border-bottom: 1px solid rgba(10, 10, 10, 0.18);
    background: color-mix(in srgb, var(--color-paper) 84%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.site-header__brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: 100%;
    padding: clamp(11px, 1.25vw, 17px) clamp(22px, 1vw, 56px);
    border-right: 1px solid rgba(10, 10, 10, 0.18);
    text-decoration: none;
}

.site-header__brand-logo {
    display: block;
    height: clamp(1.35rem, 2.1vw, 2.4rem);
    width: auto;
}

.site-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    height: 100%;
    gap: clamp(26px, 3vw, 54px);
    padding: clamp(11px, 1.25vw, 17px) clamp(22px, 3.2vw, 56px);
}

.site-header__nav a {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.76vw, 0.84rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: var(--label-tracking);
    text-decoration: none;
    transition: color 170ms ease;
}

.site-header__nav-index {
    display: block;
}

.site-header__nav-label,
.site-header__nav-meta,
.site-header__nav .site-header__nav-email {
    display: none;
}

.site-header__descriptor,
.site-header__menu {
    min-width: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.78vw, 0.86rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.site-header__descriptor {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: clamp(11px, 1.25vw, 17px) clamp(18px, 2.6vw, 40px);
    text-align: center;
    border-right: 1px solid rgba(10, 10, 10, 0.18);
}

.site-header__menu {
    display: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.site-header__nav a::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 0;
    color: var(--color-accent);
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 170ms ease, transform 170ms var(--ease-editorial);
}

.site-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-ink));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.section-coordinate {
    position: fixed;
    right: clamp(12px, 2vw, 26px);
    top: 50%;
    z-index: 1040;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.5);
    pointer-events: none;
    transition: color 180ms ease;
}

.section-coordinate.is-on-dark {
    color: rgba(236, 233, 228, 0.72);
}

.site-header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
    transform: scaleX(1);
}

.site-header__nav a:hover::before,
.site-header__nav a:focus-visible::before {
    opacity: 1;
    transform: translateX(0);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
    color: var(--color-accent);
}

/* Footer — regole consolidate (base + @991 + @640 nelle rispettive media query) */
footer {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 7vw, 7.75rem) 0 clamp(2.8rem, 5vw, 4.8rem);
    color: var(--color-paper);
    background: var(--color-ink);
}

footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(236, 233, 228, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 233, 228, 0.042) 1px, transparent 1px);
    background-size: clamp(52px, 7vw, 112px) clamp(52px, 7vw, 112px);
    pointer-events: none;
}

footer::after {
    content: "";
    position: absolute;
    top: clamp(2.4rem, 5vw, 5.2rem);
    left: 0;
    width: min(25vw, 420px);
    height: 1px;
    background: var(--color-accent-on-dark);
    opacity: 0.88;
    pointer-events: none;
}

.container--footer {
    width: min(100% - clamp(30px, 5vw, 88px), 1680px);
}

.site-footer {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: clamp(2.2rem, 5vw, 7rem);
    align-items: stretch;
    min-height: clamp(32rem, 52vw, 43rem);
    padding-top: clamp(1.5rem, 2.2vw, 2.25rem);
    border-top: 1px solid var(--color-line-inverse);
}

.site-footer__mark {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 31%;
    width: max-content;
    max-width: 6.8ch;
    margin: 0;
    transform: translate(-50%, -50%);
    font-family: var(--font-brand);
    font-size: clamp(9rem, 25vw, 29rem);
    line-height: 0.78;
    font-weight: 900;
    letter-spacing: -0.045em;
    color: rgba(236, 233, 228, 0.08);
    white-space: nowrap;
    overflow-wrap: normal;
    pointer-events: none;
    user-select: none;
}

.site-footer__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.site-footer__top .site-footer__sitemap {
    margin-top: 0;
}

.site-footer__payoff {
    width: min(100%, 34rem);
    max-width: 26rem;
    margin: 0;
    padding-top: clamp(0.9rem, 1.4vw, 1.2rem);
    border-top: 1px solid var(--color-accent-on-dark);
    font-family: var(--font-mono);
    font-size: clamp(0.88rem, 0.96vw, 1.06rem);
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(236, 233, 228, 0.78);
}

.site-footer__closing {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.3rem, 2.2vw, 2rem);
    margin-top: auto;
    padding-top: clamp(2.2rem, 4vw, 3.6rem);
    border-top: 1px solid rgba(236, 233, 228, 0.2);
    text-align: center;
}

.site-footer__manifesto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: clamp(5rem, 8vw, 8rem);
    margin: 0;
    padding-top: clamp(1.2rem, 2.1vw, 1.7rem);
    border-top: 1px solid var(--color-line-inverse);
    text-align: center;
    font-family: var(--font-mono);
    font-size: clamp(1.65rem, 3.45vw, 4.55rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-on-dark);
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem clamp(1.1rem, 2.6vw, 2.1rem);
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(236, 233, 228, 0.58);
}

.site-footer__sitemap {
    margin-top: clamp(1rem, 2vw, 1.6rem);
}

footer a {
    display: inline-flex;
    width: fit-content;
    font-size: clamp(0.92rem, 1vw, 1.05rem);
    line-height: 1.32;
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.34em;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

footer a:hover,
footer a:focus-visible {
    color: var(--color-accent-on-dark);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

.site-footer__meta a {
    padding: 0.4rem 0.2rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__nap {
    margin-top: 0.9rem;
    opacity: 0.72;
}

.site-footer__meta a:hover,
.site-footer__meta a:focus-visible {
    color: var(--color-paper);
}

.not-found {
    min-height: 72vh;
    padding-top: clamp(8rem, 12vw, 11rem);
    display: flex;
    align-items: center;
}

.not-found__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.54fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}

.not-found__copy {
    display: grid;
    gap: 22px;
    justify-items: start;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 820ms ease, transform 820ms var(--ease-editorial);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
    /* Fallback LCP: se il JS tarda (CDN lenti) il contenuto si mostra comunque da solo */
    animation: reveal-fallback 0.7s ease 1.8s forwards;
}

@keyframes reveal-fallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
    animation: none;
}

.motion-enhanced [data-reveal] {
    transition: none;
    animation: none;
}

.motion-enhanced .site-footer__manifesto {
    background: linear-gradient(90deg, rgba(236, 233, 228, 0.72), var(--color-accent-on-dark), rgba(236, 233, 228, 0.58));
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

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

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    .btn::before,
    .btn::after,
    .site-header__nav a,
    .site-header__nav a::before,
    .site-header__nav a::after,
    .custom-cursor,
    .custom-cursor::before,
    .service-card,
    .project-card__link,
    .project-card__link::before,
    .project-card__media img,
    .project-card__marker,
    .project-card__cta {
        transition: none;
    }

    .service-card:hover,
    .project-card__link:hover .project-card__media img {
        transform: none;
    }
}

@media (any-pointer: coarse) {
    .has-custom-cursor,
    .has-custom-cursor * {
        cursor: auto !important;
    }

    .has-custom-cursor .custom-cursor {
        display: none;
    }
}

@media (max-width: 991px) {
    .section-intro,
    .not-found__layout {
        grid-template-columns: 1fr;
    }

    .site-footer {
        gap: clamp(1.8rem, 6vw, 3rem);
        min-height: clamp(28rem, 66vw, 36rem);
    }

    .site-footer__mark {
        top: 28%;
        font-size: clamp(7rem, 32vw, 18rem);
    }

    .site-footer__top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(1.5rem, 4vw, 2.25rem);
    }

    .site-footer__payoff {
        width: 100%;
    }

    .site-footer__sitemap {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    :root {
        --section-space: 3.45rem;
    }

    body::before {
        background-size: 100% 100%, 48px 48px;
    }

    .container {
        width: min(100% - 28px, var(--container-wide));
    }

    h2 {
        font-size: clamp(2.35rem, 10.6vw, 3.2rem);
        line-height: 0.98;
    }

    h3 {
        font-size: clamp(1.38rem, 6vw, 1.7rem);
    }

    p,
    li,
    label {
        line-height: 1.6;
    }

    .section-intro {
        gap: 1.1rem;
        margin-bottom: 1.65rem;
    }

    .lede {
        font-size: 1rem;
        line-height: 1.58;
    }

    .site-header {
        padding: 0;
    }

    .site-header__bar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 58px;
    }

    .site-header__brand {
        align-items: center;
        padding: 13px 14px 12px;
        border-right: 0;
    }

    .site-header__descriptor,
    .site-header__nav {
        display: none;
    }

    .site-header__brand-logo {
        height: clamp(1.55rem, 8vw, 2.18rem);
    }

    .site-header__menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        height: 100%;
        min-height: 58px;
        padding: 13px 14px 12px;
        border-left: 1px solid rgba(10, 10, 10, 0.18);
        font-family: var(--font-display);
        font-size: clamp(1.18rem, 5.6vw, 1.62rem);
        font-weight: 900;
        line-height: 0.95;
        letter-spacing: 0;
        text-transform: none;
    }

    .site-header__menu:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: -5px;
    }

    .site-header__bar .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        align-content: start;
        align-items: stretch;
        justify-content: stretch;
        justify-items: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        min-width: 0;
        gap: 0;
        padding: clamp(22px, 5.8vw, 32px) 14px clamp(18px, 5.8vw, 28px);
        border-bottom: 1px solid rgba(10, 10, 10, 0.18);
        background-color: var(--color-paper);
        background-image:
            linear-gradient(rgba(10, 10, 10, 0.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
        background-size: 58px 58px;
        backdrop-filter: blur(12px) saturate(1.1);
        -webkit-backdrop-filter: blur(12px) saturate(1.1);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        visibility: hidden;
        box-shadow: 0 24px 54px rgba(10, 10, 10, 0.08);
        transition: opacity 220ms ease, transform 240ms var(--ease-editorial), visibility 220ms ease;
    }

    .site-header.is-menu-open .site-header__nav {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .site-header__nav-label {
        display: block;
        width: 100%;
        margin: 0 0 clamp(16px, 4.8vw, 24px);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: var(--label-tracking);
        color: var(--color-accent);
    }

    .site-header__bar .site-header__nav a {
        display: grid;
        grid-template-columns: clamp(2.65rem, 11vw, 3.35rem) minmax(0, 1fr);
        align-items: center;
        width: 100%;
        min-height: clamp(58px, 15vw, 78px);
        padding: 0;
        border-top: 1px solid rgba(10, 10, 10, 0.16);
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 10.6vw, 3.4rem);
        font-weight: 900;
        line-height: 0.96;
        letter-spacing: 0;
        text-transform: none;
    }

    .site-header__bar .site-header__nav a:nth-of-type(3) {
        border-bottom: 1px solid rgba(10, 10, 10, 0.16);
    }

    .site-header__nav-index {
        align-self: start;
        padding-top: clamp(15px, 4.2vw, 21px);
        font-family: var(--font-mono);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: var(--label-tracking);
        color: color-mix(in srgb, var(--color-accent) 82%, var(--color-ink));
    }

    .site-header__nav-text {
        min-width: 0;
    }

    .site-header__nav-meta,
    .site-header__bar .site-header__nav .site-header__nav-email {
        display: block;
        font-family: var(--font-mono);
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: var(--label-tracking);
        text-transform: uppercase;
    }

    .site-header__nav-meta {
        width: 100%;
        margin: clamp(16px, 4.8vw, 24px) 0 0;
        max-width: none;
        font-size: 0.72rem;
        color: rgba(10, 10, 10, 0.68);
    }

    .site-header__bar .site-header__nav .site-header__nav-email {
        width: fit-content;
        min-height: 0;
        margin-top: 14px;
        padding: 0;
        border: 0;
        font-size: 0.72rem;
        color: var(--color-accent);
        text-transform: none;
        letter-spacing: 0.04em;
    }

    .site-header__bar .site-header__nav a::before,
    .site-header__bar .site-header__nav a::after {
        display: none;
    }

    .button-row {
        width: 100%;
    }

    .section-coordinate {
        display: none;
    }

    .btn,
    a.btn,
    button.btn {
        flex: 1 1 100%;
        min-height: 46px;
    }

    footer {
        padding: 3.5rem 0 2.65rem;
    }

    .site-footer {
        min-height: 25rem;
        padding-top: 1.25rem;
    }

    .site-footer__mark {
        top: 25%;
        left: 46%;
        font-size: clamp(5.8rem, 36vw, 10rem);
        color: rgba(236, 233, 228, 0.075);
    }

    .site-footer__payoff {
        max-width: 19rem;
        font-size: 0.78rem;
    }

    .site-footer__closing {
        gap: 1rem;
        padding-top: 1.6rem;
    }

    .site-footer__manifesto {
        min-height: auto;
        font-size: clamp(1.25rem, 7vw, 2.05rem);
        letter-spacing: 0.055em;
    }

    .site-footer__meta {
        flex-direction: column;
        gap: 0.85rem;
        font-size: 0.75rem;
    }
}

/* Responsive polish pass */
@media (max-width: 991px) {
    .site-header__bar .site-header__nav a:last-of-type {
        border-bottom: 1px solid rgba(10, 10, 10, 0.16);
    }
}

@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }

    section {
        padding-block: var(--section-space);
    }

    .section-divider {
        gap: 10px;
    }

    .site-header__bar .site-header__nav {
        max-height: calc(100svh - 58px);
        overflow-y: auto;
    }

    .site-header__bar .site-header__nav a {
        grid-template-columns: clamp(2.3rem, 10vw, 3rem) minmax(0, 1fr);
        min-height: clamp(52px, 13vw, 68px);
        font-size: clamp(1.95rem, 9vw, 3rem);
    }

    .site-header__nav-index {
        padding-top: clamp(13px, 3.8vw, 18px);
        font-size: 0.72rem;
    }

}


/* ============================================================
   CASE STUDY — unified project detail template
   Filo conduttore across all /project/* pages.
   Crimson (--color-accent) = brand thread (indices, dividers).
   --case-accent = per-project signature hue (set in page css).
   ============================================================ */

:root {
    --case-accent: #c41248;
    --case-accent-strong: #8c0d33;
    --case-accent-soft: rgba(196, 18, 72, 0.1);
    --case-watermark: "UN_TITLED";
}

.container--poster {
    width: min(100% - clamp(28px, 4vw, 72px), 1680px);
}

/* ---------- HERO ---------- */
.case-hero {
    position: relative;
    padding: clamp(6.6rem, 9vw, 9.6rem) 0 clamp(3.4rem, 5vw, 5.6rem);
    overflow: clip;
    border-bottom: 1px solid var(--color-ink);
    background:
        linear-gradient(90deg, var(--case-accent-soft) 1px, transparent 1px) 0 0 / clamp(4.5rem, 10vw, 10rem) 100%,
        var(--color-paper);
    isolation: isolate;
}

@supports not (overflow: clip) {
    .case-hero { overflow: hidden; }
}

.case-hero::before {
    content: var(--case-watermark);
    position: absolute;
    right: clamp(0.7rem, 4vw, 4rem);
    bottom: -0.06em;
    z-index: -1;
    font-family: var(--font-display);
    font-size: clamp(4rem, 14vw, 16rem);
    font-weight: 900;
    line-height: 0.75;
    letter-spacing: -0.04em;
    color: var(--case-accent);
    opacity: 0.07;
    pointer-events: none;
    white-space: nowrap;
}

.case-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
}

.case-hero__copy {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.7rem);
    align-content: center;
    min-width: 0;
}

.case-hero__title {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2.6rem, 5.2vw, 6.4rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.case-hero__title,
.case-section__head h2,
.case-split__head h2,
.case-result__copy h2,
.case-move h3 {
    text-transform: uppercase;
}

.case-hero__lede {
    max-width: 36rem;
    padding-top: clamp(0.85rem, 1.4vw, 1.15rem);
    border-top: 1px solid var(--color-ink);
    font-size: clamp(1.06rem, 1.5vw, 1.34rem);
    line-height: 1.5;
    color: rgba(10, 10, 10, 0.74);
}

.case-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.2rem;
}

/* ---------- MEDIA FRAMES (image + mock) ---------- */
.case-hero__media,
.case-result__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-ink);
    background: color-mix(in srgb, var(--case-accent) 16%, var(--color-paper));
    box-shadow: clamp(0.55rem, 1.4vw, 1rem) clamp(0.55rem, 1.4vw, 1rem) 0 var(--color-ink);
}

.case-hero__media {
    justify-self: end;
    width: min(100%, 48rem);
    aspect-ratio: 16 / 11;
    transform: rotate(1deg);
}

.case-hero__media[data-tag]::after,
.case-result__media[data-tag]::after {
    content: attr(data-tag);
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    z-index: 3;
    padding: 0.4rem 0.5rem;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--label-tracking);
}

.case-hero__media > img,
.case-result__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.02);
}

/* ---------- META STRIP ---------- */
.case-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(3.2rem, 5vw, 5.4rem) 0 0;
    border-top: 1px solid var(--color-ink);
    border-left: 1px solid var(--color-line);
}

.case-meta__item {
    display: grid;
    gap: 0.5rem;
    min-height: clamp(5.6rem, 7vw, 7.6rem);
    align-content: space-between;
    padding: clamp(0.85rem, 1.4vw, 1.15rem);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.case-meta__item dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--color-accent);
}

.case-meta__item dd {
    margin: 0;
    max-width: 16rem;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}

/* ---------- SECTIONS ---------- */
.case-section {
    padding-block: clamp(4rem, 6.5vw, 7rem);
}

.case-section:not(.section-shell--dark) {
    border-bottom: 1px solid var(--color-line);
}

.case-section__head {
    max-width: 52rem;
    margin-bottom: clamp(2rem, 3.6vw, 3.4rem);
}

.case-section__head h2 {
    font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.case-section__head .lede {
    margin-top: 1.1rem;
    max-width: 44rem;
}

/* split: overview */
.case-split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.75fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: start;
}

.case-split__head h2 {
    max-width: 13ch;
    font-size: clamp(2.4rem, 5.2vw, 5rem);
}

.case-split__body {
    display: grid;
    gap: clamp(1.2rem, 2vw, 1.8rem);
    padding-top: 1rem;
    border-top: 1px solid var(--color-ink);
}

.case-split__body p {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.62;
    color: rgba(10, 10, 10, 0.76);
}

/* tags (pillars) */
.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-tags li {
    padding: 0.5rem 0.72rem;
    border: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--case-accent) 9%, transparent);
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

/* ---------- WORK MOVES (numbered cards) ---------- */
.case-moves {
    display: grid;
    grid-template-columns: repeat(var(--case-cols, 3), minmax(0, 1fr));
    border-top: 1px solid var(--color-line-inverse);
    border-left: 1px solid var(--color-line-inverse);
}

.case-moves--4 { --case-cols: 4; }

.case-move {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: clamp(0.9rem, 1.6vw, 1.25rem);
    min-height: clamp(16rem, 21vw, 22rem);
    padding: clamp(1rem, 1.7vw, 1.4rem);
    border-right: 1px solid var(--color-line-inverse);
    border-bottom: 1px solid var(--color-line-inverse);
}

.case-move span {
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    color: var(--case-accent-on-dark, var(--case-accent));
}

.section-shell--dark .case-move span {
    color: color-mix(in srgb, var(--case-accent) 64%, var(--color-paper));
}

.case-move h3 {
    max-width: 12ch;
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
}

.case-move p {
    align-self: end;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-line-inverse);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(236, 233, 228, 0.74);
}

/* ---------- RESULT + CTA ---------- */
.case-result {
    display: grid;
    grid-template-columns: minmax(280px, 0.46fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 6vw, 6.5rem);
    align-items: center;
}

.case-result__media {
    width: min(100%, 30rem);
    aspect-ratio: 4 / 5;
    transform: rotate(-1.2deg);
}

.case-result__copy {
    display: grid;
    gap: clamp(1.1rem, 1.9vw, 1.7rem);
}

.case-result__copy h2 {
    max-width: 13ch;
    font-size: clamp(2.3rem, 4.6vw, 4.4rem);
}

.case-result__copy p {
    max-width: 40rem;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.62;
    color: rgba(10, 10, 10, 0.76);
}

/* result — numeri chiave (metriche per case study) */
.case-result__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 1.4rem;
    border-top: 1px solid var(--color-ink);
    border-left: 1px solid var(--color-line);
}

.case-result__stats > div {
    display: grid;
    gap: 0.3rem;
    padding: 0.85rem 0.9rem;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.case-result__stats dt {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--case-accent-strong, var(--case-accent));
}

.case-result__stats dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.6);
}

.case-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
}

.case-list li::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border: 1px solid var(--color-ink);
    background: var(--case-accent);
}

.case-result__copy .btn {
    justify-self: start;
    margin-top: 0.4rem;
}

/* ============================================================
   CSS MOCKUPS — browser + iOS device (poster style)
   ============================================================ */
.case-mock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* browser */
.case-mock--browser { background: #f3f1ec; }

.case-mock__bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-paper);
}

.case-mock__bar span {
    width: 0.62rem;
    height: 0.62rem;
    border: 1px solid var(--color-ink);
    border-radius: 999px;
}

.case-mock__screen {
    display: grid;
    gap: clamp(0.7rem, 1.6vw, 1.1rem);
    align-content: start;
    padding: clamp(1rem, 2.4vw, 1.7rem);
}

.case-mock__nav {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.55);
}

.case-mock__nav strong {
    margin-right: auto;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: -0.03em;
    color: var(--color-ink);
}

.case-mock__hero {
    display: grid;
    gap: 0.5rem;
    padding: clamp(0.9rem, 2vw, 1.4rem);
    border: 1px solid var(--color-ink);
    background: color-mix(in srgb, var(--case-accent) 14%, var(--color-paper));
}

.case-mock__hero span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--case-accent-strong, var(--case-accent));
}

.case-mock__hero strong {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.6vw, 1.75rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.case-mock__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.case-mock__row span {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-line);
    background: var(--color-paper);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* iOS device */
.case-mock--device {
    align-items: center;
    justify-content: center;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--case-accent) 22%, var(--color-paper)), var(--color-paper));
}

.case-device {
    width: min(78%, 16rem);
    padding: 0.7rem;
    border: 1px solid var(--color-ink);
    border-radius: 1.9rem;
    background: var(--color-paper);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.18);
}

.case-device__notch {
    width: 34%;
    height: 0.4rem;
    margin: 0.1rem auto 0.7rem;
    border-radius: 999px;
    background: var(--color-ink);
}

.case-device__screen {
    display: grid;
    gap: 0.8rem;
    padding: clamp(0.9rem, 2.4vw, 1.3rem);
    border: 1px solid var(--color-ink);
    border-radius: 1.2rem;
    background: var(--color-ink);
    color: var(--color-paper);
}

.case-device__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: rgba(236, 233, 228, 0.6);
}

.case-device__price strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--color-paper);
}

.case-device__arrow {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    text-align: center;
    color: color-mix(in srgb, var(--case-accent) 64%, var(--color-paper));
}

.case-device__time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-line-inverse);
    text-align: center;
}

.case-device__time strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-paper);
}

.case-device__time span {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 233, 228, 0.6);
}

/* ---------- closing ---------- */
.case-closing {
    padding-block: clamp(3.4rem, 5vw, 5.4rem);
}

.case-closing__layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.case-closing__line {
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.9rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.03em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
    .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-hero__layout { grid-template-columns: 1fr; }
    .case-hero__media { justify-self: stretch; width: 100%; }
    .case-moves--4 { --case-cols: 2; }
}

@media (max-width: 980px) {
    .case-split,
    .case-result { grid-template-columns: 1fr; }
    .case-moves { --case-cols: 1; }
    .case-moves--4 { --case-cols: 1; }
    .case-move { min-height: auto; }
    .case-result__media { width: min(100%, 34rem); aspect-ratio: 16 / 10; transform: none; }
}

@media (max-width: 640px) {
    .case-hero { padding: 5.4rem 0 3.4rem; }
    .case-hero::before { display: none; }
    .case-hero__media { transform: none; box-shadow: 0.45rem 0.45rem 0 var(--color-ink); }
    .case-meta { grid-template-columns: 1fr; }
    .case-hero__title { max-width: 100%; }
    .case-section__head h2,
    .case-split__head h2,
    .case-result__copy h2 { max-width: 100%; }
}

/* ===========================================================
   Project pages — breadcrumb, related projects, real screenshot
   =========================================================== */
/* Breadcrumb inherits the .section-index eyebrow style; we only tune the links. */
.project-breadcrumb {
    flex-wrap: wrap;
}
.project-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: opacity 160ms var(--ease-editorial);
}
.project-breadcrumb a:hover {
    opacity: 0.6;
}
.project-breadcrumb [aria-current="page"] {
    opacity: 0.55;
}
.project-breadcrumb span[aria-hidden] {
    opacity: 0.4;
}

.project-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}
.project-related__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.4rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.project-related__card:hover {
    border-color: currentColor;
    transform: translateY(-2px);
}
.project-related__category {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}
.project-related__title {
    font-size: 1.15rem;
    font-weight: 600;
}
.project-related__cta {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}

.project-shot {
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
}
.project-shot img {
    display: block;
    width: 100%;
    height: auto;
}