/* ==========================================================================
   URVEON — cinematic editorial portfolio
   Palette: black, off-white, grey only. No accent colour, no gradients.
   Layout units favour clamp()/vw for fluid Swiss-editorial type scaling.
   ========================================================================== */

:root {
    --bg: #080806;
    --paper: #f5f5f3;
    --paper-2: #ececeb;
    --surface: #11110e;
    --surface-2: #191812;
    --ink: #f7f2e8;
    --dark-ink: #111113;
    --muted: #c8beb0;
    --grey: #8f887d;
    --accent: #f7f2e8;
    --accent-cool: #c8beb0;
    --line: rgba(247, 242, 232, .13);
    --line-strong: rgba(247, 242, 232, .32);
    --paper-line: rgba(17, 17, 19, .12);
    --shadow: 0 28px 80px rgba(0, 0, 0, .42);
    --shadow-soft: 0 18px 54px rgba(0, 0, 0, .26);
    --radius-ui: 8px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --page-x: clamp(1.2rem, 5vw, 5rem);
    --safe-page-x: calc(var(--page-x) + max(var(--safe-left), var(--safe-right)));
    --nav-h: 56px;
}

body.home-page {
    background: var(--bg);
    color: var(--ink);
}

body {
    font-family: 'Inter', Arial, sans-serif;
    background:
        linear-gradient(180deg, rgba(247, 242, 232, .035) 0%, rgba(8, 8, 6, 0) 36%),
        var(--bg);
    color: var(--ink);
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
}

/* Extremely low-opacity grain texture over the whole page. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 700;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: .05;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(247, 242, 232, .035), transparent 34%),
        linear-gradient(245deg, rgba(247, 242, 232, .02), transparent 36%),
        #080806;
}

h1, h2, h3 {
    font-family: 'Archivo', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* ---------- Loader ---------- */
.loader {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, var(--bg) 0%, var(--surface) 58%, var(--surface-2) 100%);
    z-index: 999;
    display: grid;
    place-items: center;
    transition: opacity .7s var(--ease), visibility .7s var(--ease);
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    display: grid;
    justify-items: center;
    gap: 1.2rem;
}

.loader-word {
    display: flex;
    gap: .06em;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 1;
}

.loader-word span {
    display: block;
    opacity: .16;
    filter: blur(4px);
    transition: opacity .5s var(--ease), filter .5s var(--ease);
}

.loader-word span.is-lit {
    opacity: 1;
    filter: none;
}

.loader-line {
    width: min(40vw, 320px);
    height: 1px;
    background: var(--line);
    overflow: hidden;
}

.loader-line span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ink);
}

.loader strong {
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grey);
}

/* ---------- Navigation (minimal — no persistent link bar) ---------- */
.site-nav {
    position: fixed;
    left: 50%;
    right: auto;
    top: calc(.7rem + var(--safe-top));
    width: min(calc(100% - 1.5rem - var(--safe-left) - var(--safe-right)), 1120px);
    transform: translateX(-50%);
    height: var(--nav-h);
    z-index: 800;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    height: 46px;
    padding: 0 .38rem 0 .5rem;
    border: 1px solid rgba(247, 242, 232, .13);
    border-radius: 999px;
    background: rgba(8, 8, 6, .72);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-page .site-nav {
    border-color: rgba(247, 242, 232, .13);
    background: rgba(8, 8, 6, .72);
    color: var(--ink);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-page .site-nav__mark,
.home-page .site-nav__links a,
.home-page .site-nav__toggle {
    color: var(--ink);
}

.home-page .site-nav__links .site-nav__cta {
    color: var(--bg);
    background: var(--ink);
}

.home-page .site-nav__links a {
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
}

.site-nav__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 .64rem;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.site-nav__mark img {
    width: auto;
    height: 24px;
    max-width: 116px;
    object-fit: contain;
}

.site-nav__mark:hover,
.site-nav__mark:focus-visible {
    border-color: rgba(247, 242, 232, .38);
}

.site-nav__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .12rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .68rem;
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
    color: var(--ink);
    background: rgba(247, 242, 232, .08);
    transform: translateY(-1px);
}

.site-nav__links .site-nav__cta {
    color: var(--bg);
    background: var(--ink);
    padding-inline: .95rem;
    margin-left: .2rem;
}

.site-nav__links .site-nav__cta:hover,
.site-nav__links .site-nav__cta:focus-visible {
    background: var(--accent);
    color: var(--bg);
}

.site-nav__toggle {
    position: relative;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 .85rem 0 .7rem;
    border: 0;
    border-left: 1px solid rgba(247, 242, 232, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.site-nav__toggle:hover,
.site-nav__toggle:focus-visible {
    border-color: rgba(247, 242, 232, .38);
}

.site-nav__toggle-text {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transition: max-width .35s var(--ease), opacity .2s var(--ease);
}

.menu-open .site-nav__toggle-text {
    max-width: 4rem;
    opacity: 1;
    transition: max-width .35s var(--ease), opacity .35s var(--ease) .1s;
}

.site-nav__toggle-icon {
    position: relative;
    display: block;
    width: 26px;
    height: 1px;
    background: currentColor;
    transition: background .25s var(--ease);
}

.site-nav__toggle-icon::before,
.site-nav__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 1px;
    background: currentColor;
    transition: transform .3s var(--ease);
}

.site-nav__toggle-icon::before { top: -8px; }
.site-nav__toggle-icon::after { top: 8px; }

.menu-open .site-nav__toggle-icon { background: transparent; }
.menu-open .site-nav__toggle-icon::before { transform: translateY(8px) rotate(45deg); }
.menu-open .site-nav__toggle-icon::after { transform: translateY(-8px) rotate(-45deg); }

.site-menu {
    position: fixed;
    inset: 0;
    z-index: 790;
    background:
        linear-gradient(100deg, rgba(247, 242, 232, .05), transparent 42%),
        var(--bg);
    display: grid;
    grid-template-rows: 1fr auto;
    padding:
        calc(var(--nav-h) + 2rem)
        calc(clamp(1.2rem, 6vw, 6rem) + var(--safe-right))
        calc(3rem + var(--safe-bottom))
        calc(clamp(1.2rem, 6vw, 6rem) + var(--safe-left));
    transform: translateY(-100%);
    transition: transform .55s var(--ease);
}

.site-menu.is-open {
    transform: translateY(0);
}

.site-menu__list li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.site-menu.is-open .site-menu__list li {
    opacity: 1;
    transform: translateY(0);
}

.site-menu__list li:nth-child(1) { transition-delay: .06s; }
.site-menu__list li:nth-child(2) { transition-delay: .1s; }
.site-menu__list li:nth-child(3) { transition-delay: .14s; }
.site-menu__list li:nth-child(4) { transition-delay: .18s; }
.site-menu__list li:nth-child(5) { transition-delay: .22s; }
.site-menu__list li:nth-child(6) { transition-delay: .26s; }
.site-menu__list li:nth-child(7) { transition-delay: .3s; }

.site-menu__list a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: clamp(.8rem, 2vw, 1.2rem);
    font-family: 'Archivo', Arial, sans-serif;
    font-size: clamp(2.6rem, 8vw, 6rem);
    line-height: 1.15;
    border-top: 1px solid var(--line);
    padding: .45rem 0;
    transition: color .3s var(--ease), padding-left .45s var(--ease), border-color .3s var(--ease);
}

.site-menu__list li:last-child a {
    border-bottom: 1px solid var(--line);
}

.site-menu__list span {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--grey);
    letter-spacing: .1em;
    transition: color .3s var(--ease);
}

.site-menu__list a:hover,
.site-menu__list a:focus-visible,
.site-menu__list a:active {
    color: var(--accent);
    border-color: var(--line-strong);
    padding-left: clamp(.4rem, 1.2vw, 1rem);
}

.site-menu__list a:hover span,
.site-menu__list a:focus-visible span,
.site-menu__list a:active span {
    color: var(--ink);
}

.site-menu__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    color: var(--grey);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-menu__meta a {
    position: relative;
    transition: color .3s var(--ease);
}

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

/* ---------- Hero ---------- */
.hero {
    position: relative;
    height: auto;
    min-height: 100dvh;
    display: grid;
    align-items: end;
    background:
        linear-gradient(180deg, rgba(8, 8, 6, .18) 0%, rgba(8, 8, 6, .72) 62%, #080806 100%),
        var(--bg);
    overflow: clip;
    isolation: isolate;
    padding:
        calc(var(--nav-h) + 1.35rem)
        calc(var(--page-x) + var(--safe-right))
        calc(5.6rem + var(--safe-bottom))
        calc(var(--page-x) + var(--safe-left));
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    background:
        linear-gradient(90deg, rgba(247, 242, 232, .055) 1px, transparent 1px),
        linear-gradient(rgba(247, 242, 232, .045) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 76%, transparent 100%);
    opacity: .42;
}

.hero::after {
    background:
        linear-gradient(90deg, rgba(8, 8, 6, .82) 0%, rgba(8, 8, 6, .36) 48%, rgba(8, 8, 6, .62) 100%),
        linear-gradient(180deg, rgba(8, 8, 6, .18) 0%, rgba(8, 8, 6, .18) 46%, #080806 100%);
    opacity: 1;
}

.hero-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    justify-items: start;
    gap: clamp(1.6rem, 3vw, 2.6rem);
    text-align: left;
    inline-size: min(100%, 1180px);
    min-block-size: calc(100dvh - var(--nav-h) - 6.8rem - var(--safe-bottom));
    align-content: end;
    padding: clamp(1rem, 2.8vw, 2.4rem) 0 clamp(7.5rem, 10vw, 9rem);
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.hero-copy {
    display: grid;
    gap: clamp(.75rem, 1.35vw, 1.05rem);
    align-content: end;
    justify-items: start;
    max-width: 900px;
    min-width: 0;
}

.hero-stage::before,
.hero-stage::after {
    display: none;
}

.hero-stage::before {
    inset: 1rem;
    border: 1px solid rgba(247, 242, 232, .055);
    border-radius: 12px;
}

.hero-stage::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: linear-gradient(transparent, rgba(247, 242, 232, .14), transparent);
    opacity: .55;
}

.hero-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .38rem .7rem;
    border: 1px solid rgba(247, 242, 232, .16);
    border-radius: 999px;
    background: rgba(8, 8, 6, .42);
    box-shadow: none;
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hero-word {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 8.4vw, 9rem);
    line-height: .86;
    letter-spacing: 0;
    max-inline-size: min(100%, 13ch);
    overflow-wrap: anywhere;
    will-change: transform, opacity;
    text-shadow: 0 18px 64px rgba(0, 0, 0, .62);
    color: var(--ink);
    text-transform: uppercase;
}

.hero-subtitle {
    position: relative;
    z-index: 1;
    font-size: clamp(.98rem, 1.35vw, 1.18rem);
    color: var(--muted);
    letter-spacing: .01em;
    max-width: 58ch;
    line-height: 1.55;
    text-wrap: pretty;
}

.hero-statement {
    position: relative;
    z-index: 1;
    font-family: 'Archivo', Arial, sans-serif;
    font-size: clamp(1.1rem, 1.75vw, 1.55rem);
    font-weight: 600;
    line-height: 1.2;
    max-width: 48ch;
    text-wrap: balance;
    color: rgba(247, 242, 232, .82);
    text-transform: none;
}

.hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .7rem;
    margin-top: .6rem;
}

.hero-copy .hero-actions {
    justify-content: flex-start;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .82rem 1.05rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.home-page .hero-action {
    color: var(--ink);
    border-color: rgba(247, 242, 232, .32);
    background: rgba(8, 8, 6, .32);
    box-shadow: none;
}

.home-page .hero-action--primary {
    color: var(--bg);
    border-color: var(--ink);
    background: var(--ink);
}

.home-page .hero-action:hover,
.home-page .hero-action:focus-visible {
    color: var(--bg);
    border-color: var(--ink);
    background: var(--ink);
    transform: translateY(-1px);
}

.home-page .hero-action--primary:hover,
.home-page .hero-action--primary:focus-visible {
    color: var(--ink);
    border-color: rgba(247, 242, 232, .38);
    background: rgba(8, 8, 6, .42);
}

.hero-action:active {
    transform: scale(.975);
}

.hero-action--primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}

.hero-action:hover,
.hero-action:focus-visible {
    border-color: var(--accent);
    color: var(--ink);
}

.hero-action--primary:hover,
.hero-action--primary:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.hero-meta {
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(.95rem, 2vw, 1.4rem);
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(247, 242, 232, .14);
    border-radius: var(--radius-ui);
    background: rgba(8, 8, 6, .42);
    backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: none;
}

.hero-meta span {
    min-width: 0;
    border-top: 0;
    padding: .85rem .95rem;
    background: rgba(8, 8, 6, .28);
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    font-weight: 700;
}

.home-page .hero-meta span {
    color: var(--muted);
}

.hero-meta strong {
    display: block;
    margin-bottom: .18rem;
    color: var(--ink);
    font-size: .64rem;
}

.home-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.8rem, 1.6vw, 1rem);
    padding:
        clamp(1.2rem, 3vw, 2rem)
        calc(var(--page-x) + var(--safe-right))
        clamp(4rem, 8vw, 7rem)
        calc(var(--page-x) + var(--safe-left));
    background:
        linear-gradient(180deg, #080806 0%, #10100e 100%);
}

.home-proof article {
    min-height: 190px;
    display: grid;
    align-content: space-between;
    gap: 1.4rem;
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(247, 242, 232, .055), rgba(247, 242, 232, .018)),
        var(--surface);
    border-radius: var(--radius-ui);
    box-shadow: none;
}

.home-proof span {
    color: var(--grey);
    font-size: .72rem;
    letter-spacing: .16em;
}

.home-proof strong {
    font-family: 'Archivo', Arial, sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 2.35rem);
    line-height: 1.02;
}

.home-proof p {
    color: var(--muted);
    line-height: 1.5;
    max-width: 30ch;
}

/* ---------- Home editorial sections ---------- */
.section-kicker {
    color: var(--accent);
    font-size: .74rem;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.home-positioning,
.home-showreel,
.home-capabilities,
.home-impact,
.home-process,
.home-about-preview,
.home-insights-preview {
    position: relative;
    padding:
        clamp(5rem, 12vw, 9rem)
        calc(var(--page-x) + var(--safe-right))
        clamp(5rem, 12vw, 9rem)
        calc(var(--page-x) + var(--safe-left));
    overflow: hidden;
}

.home-positioning,
.home-about-preview {
    background: var(--bg);
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.home-positioning .section-kicker,
.home-about-preview .section-kicker {
    color: var(--accent);
}

.home-positioning__copy,
.home-about-preview div {
    color: var(--muted);
}

.home-positioning__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(260px, .62fr) minmax(280px, .68fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
}

.home-about-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
}

.home-positioning__grid {
    margin-top: 1.4rem;
}

.home-positioning h2,
.home-capabilities h2,
.home-impact h2,
.home-process h2,
.home-about-preview h2,
.home-insights-preview h2 {
    font-size: clamp(2rem, 4.8vw, 5rem);
    line-height: .98;
    max-width: 16ch;
    text-wrap: balance;
}

.home-positioning__copy,
.home-about-preview div {
    display: grid;
    gap: 1rem;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.home-about-preview .section-kicker {
    grid-column: 1 / -1;
}

.home-about-preview strong {
    color: var(--ink);
}

.home-live-media {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr) minmax(220px, .75fr);
    gap: clamp(.85rem, 1.8vw, 1.4rem);
    margin-top: clamp(2rem, 5vw, 4rem);
}

.home-live-media__item {
    position: relative;
    min-height: clamp(220px, 26vw, 380px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-ui);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.home-live-media__item--wide {
    min-height: clamp(280px, 34vw, 520px);
}

.home-live-media__item img,
.home-live-media__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.05) brightness(.72);
}

.home-live-media__item figcaption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.home-showreel {
    min-height: 260svh;
    background:
        radial-gradient(circle at 78% 24%, rgba(247, 242, 232, .08), transparent 28%),
        linear-gradient(180deg, #080806 0%, #11110e 44%, #080806 100%);
    color: var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: 0;
    padding-bottom: 0;
}

.home-showreel__stage {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(320px, .72fr) minmax(520px, 1fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
    padding:
        calc(var(--nav-h) + clamp(2rem, 5vw, 4rem))
        calc(var(--page-x) + var(--safe-right))
        clamp(2rem, 5vw, 4rem)
        calc(var(--page-x) + var(--safe-left));
    overflow: hidden;
}

.home-showreel__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(247, 242, 232, .055) 1px, transparent 1px),
        linear-gradient(rgba(247, 242, 232, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .18;
    mask-image: linear-gradient(90deg, #000 0%, transparent 74%);
}

.home-showreel__copy,
.home-showreel__frames {
    position: relative;
    z-index: 1;
}

.home-showreel__copy {
    display: grid;
    gap: clamp(1rem, 2vw, 1.45rem);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.home-showreel__copy h2 {
    font-size: clamp(3rem, 6.2vw, 6.8rem);
    line-height: .9;
    max-width: min(100%, 7.9ch);
    overflow-wrap: normal;
    text-wrap: balance;
}

.home-showreel__copy p:not(.section-kicker) {
    color: var(--muted);
    font-size: clamp(1rem, 1.55vw, 1.32rem);
    line-height: 1.55;
    max-width: 36ch;
}

.home-showreel__chapters {
    display: grid;
    gap: .7rem;
    margin-top: clamp(1rem, 3vw, 2.5rem);
    max-width: min(100%, 500px);
}

.home-showreel__chapters li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .82rem 0;
    border-bottom: 1px solid var(--line);
    color: rgba(247, 242, 232, .4);
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: color 220ms var(--ease), transform 220ms var(--ease);
}

.home-showreel__chapters li.is-active {
    color: var(--ink);
    transform: translateX(.45rem);
}

.home-showreel__chapters span {
    color: var(--accent);
}

.home-showreel__frames {
    min-width: 0;
    min-height: clamp(460px, 66svh, 760px);
    perspective: 1200px;
}

.home-showreel__frame {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: end;
    overflow: hidden;
    border: 1px solid rgba(247, 242, 232, .16);
    border-radius: var(--radius-ui);
    background: #050504;
    box-shadow: 0 42px 120px rgba(0, 0, 0, .5);
    transform-origin: center;
    opacity: 0;
    transform: translate3d(8%, 8%, 0) rotateX(5deg) rotateY(-8deg) scale(.88);
    will-change: transform, opacity, clip-path;
    clip-path: inset(8% 8% 8% 8%);
}

.home-showreel__frame:first-child {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    clip-path: inset(0 0 0 0);
}

.home-showreel__frame img,
.home-showreel__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88) contrast(1.08) brightness(.66);
    transform: scale(1.08);
}

.home-showreel__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(8, 8, 6, .2) 42%, rgba(8, 8, 6, .86) 100%),
        linear-gradient(90deg, rgba(8, 8, 6, .3), transparent 58%);
}

.home-showreel__frame figcaption {
    position: relative;
    z-index: 1;
    padding: clamp(1rem, 2vw, 1.5rem);
    color: var(--ink);
    font-size: .72rem;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.home-capabilities,
.home-insights-preview {
    background: linear-gradient(180deg, #10100e 0%, #080806 100%);
    color: var(--ink);
}

.home-capabilities__intro,
.home-process__header,
.home-insights-preview__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 7vw, 5.5rem);
}

.home-capabilities__intro .section-kicker,
.home-process__header .section-kicker,
.home-insights-preview__header .section-kicker {
    grid-column: 1 / -1;
}

.home-capabilities__list {
    border-top: 1px solid var(--line);
}

.capability-row {
    display: grid;
    grid-template-columns: 4rem minmax(0, .9fr) minmax(280px, .8fr);
    gap: clamp(1rem, 4vw, 4rem);
    align-items: baseline;
    padding: clamp(1.8rem, 4vw, 3.2rem) 0;
    border-bottom: 1px solid var(--line);
}

.capability-row span {
    color: var(--accent);
    font-size: .78rem;
    letter-spacing: .14em;
}

.capability-row h3 {
    font-size: clamp(1.75rem, 4.8vw, 4.6rem);
    line-height: .95;
}

.capability-row p {
    color: var(--muted);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
}

.home-impact {
    background: var(--surface);
    color: var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.home-impact h2 {
    max-width: 14ch;
    margin-top: 1.4rem;
}

.home-impact ul,
.home-insights-preview__list {
    display: grid;
    gap: 1px;
    margin-top: clamp(2.5rem, 7vw, 5rem);
    background: var(--line);
    border: 1px solid var(--line);
}

.home-impact ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-impact li {
    min-height: 150px;
    display: flex;
    align-items: end;
    background: var(--bg);
    padding: 1.4rem;
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.35;
    border-radius: var(--radius-ui);
    box-shadow: none;
}

.home-process {
    background: var(--bg);
    color: var(--ink);
}

.home-process__steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(240px, 1fr));
    border: 1px solid var(--line);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.home-process__steps li {
    min-height: 360px;
    display: grid;
    align-content: space-between;
    gap: 1.4rem;
    padding: clamp(1rem, 1.5vw, 1.3rem);
    border-right: 1px solid var(--line);
    scroll-snap-align: start;
}

.home-process__steps li:last-child {
    border-right: 0;
}

.home-process__steps span,
.home-insights-preview article span {
    color: var(--accent);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.home-process__steps strong {
    font-family: 'Archivo', Arial, sans-serif;
    font-size: clamp(1.45rem, 2.3vw, 2.05rem);
    line-height: 1.04;
    max-width: 10ch;
    overflow-wrap: anywhere;
}

.home-process__steps p,
.home-insights-preview article p {
    color: var(--muted);
    line-height: 1.6;
}

.home-insights-preview__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-insights-preview article {
    min-height: 360px;
    display: grid;
    align-content: start;
    gap: 1rem;
    background: var(--bg);
    padding: clamp(1.4rem, 3vw, 2rem);
}

.home-insights-preview article h3 {
    font-size: clamp(1.35rem, 2.3vw, 2.1rem);
    line-height: 1.08;
    text-transform: none;
}

.hero-reel {
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: none;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
}

.hero-reel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.92) contrast(1.08) brightness(.62);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hero-scroll-cue {
    position: absolute;
    bottom: calc(clamp(1.5rem, 4vh, 3rem) + var(--safe-bottom));
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: .6rem;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey);
}

.hero-scroll-cue i {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--ink), transparent);
}

/* ---------- Project sequence ---------- */
.work {
    position: relative;
    background: var(--bg);
}

.project-panel {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--bg);
    display: grid;
}

.project-panel__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #050504;
    will-change: transform, filter;
}

.project-panel__media picture {
    position: absolute;
    inset: 0;
    opacity: .34;
    filter: blur(18px) saturate(.82) brightness(.78);
    transform: scale(1.08);
}

.project-panel__media picture,
.project-panel__media img,
.project-panel__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-panel__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 8, 6, .88) 0%, rgba(8, 8, 6, .66) 31%, rgba(8, 8, 6, .2) 58%, rgba(8, 8, 6, .42) 100%),
        linear-gradient(180deg, rgba(8, 8, 6, .28) 0%, rgba(8, 8, 6, .1) 44%, rgba(8, 8, 6, .88) 100%);
}

.project-panel__media video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    border: 0;
    border-radius: 0;
    background: #050504;
    box-shadow: none;
}

.project-panel__copy {
    position: relative;
    z-index: 4;
    align-self: end;
    display: grid;
    gap: .72rem;
    padding:
        clamp(2rem, 6vw, 5rem)
        calc(clamp(2rem, 6vw, 5rem) + var(--safe-right))
        calc(clamp(2rem, 6vw, 5rem) + var(--safe-bottom))
        calc(clamp(2rem, 6vw, 5rem) + var(--safe-left));
    max-width: min(520px, 36vw);
    will-change: transform, opacity;
    min-width: 0;
    overflow: hidden;
}

.project-panel__number {
    font-size: .8rem;
    letter-spacing: .18em;
    color: var(--accent);
}

.project-panel__title {
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    line-height: .9;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.project-panel__description {
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.22rem);
    line-height: 1.5;
    max-width: 44ch;
}

.project-panel__meta {
    display: flex;
    gap: 1rem;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.project-panel__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    width: fit-content;
    margin-top: .8rem;
    padding-bottom: .35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-ui);
    padding: .85rem 1rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}

.project-panel__link::after {
    content: "->";
    letter-spacing: 0;
}

.project-panel:hover .project-panel__link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
}

.project-panel:hover .project-panel__media {
    filter: brightness(1.04);
}

/* ---------- Services ---------- */
.services {
    padding: clamp(4rem, 10vw, 8rem) 0;
    background: var(--surface);
    display: grid;
    gap: clamp(.5rem, 2vw, 1.5rem);
}

.services__intro {
    padding: 0 calc(var(--page-x) + var(--safe-right)) 0 calc(var(--page-x) + var(--safe-left));
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: clamp(2rem, 6vw, 4rem);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    color: var(--muted);
}

.services__row {
    display: flex;
    gap: clamp(1.5rem, 4vw, 4rem);
    white-space: nowrap;
    will-change: transform;
}

.services__word {
    font-size: clamp(3.5rem, 12vw, 10rem);
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
}

.services__row:nth-child(odd) .services__word:first-child,
.services__row .services__word:nth-child(4n+1) {
    color: var(--ink);
    -webkit-text-stroke: 0;
}

/* ---------- About ---------- */
.about {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding:
        clamp(3rem, 10vw, 8rem)
        calc(clamp(1.2rem, 6vw, 6rem) + var(--safe-right))
        clamp(3rem, 10vw, 8rem)
        calc(clamp(1.2rem, 6vw, 6rem) + var(--safe-left));
    text-align: center;
    background: var(--ink);
    color: var(--bg);
}

.about__headline {
    font-size: clamp(2.2rem, 6.5vw, 5.5rem);
    line-height: 1.05;
    max-width: 20ch;
    text-wrap: balance;
}

/* ---------- Final CTA ---------- */
.final-cta {
    position: relative;
    min-height: 100dvh;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(247, 242, 232, .055), transparent 34%),
        var(--bg);
    overflow: hidden;
}

.final-cta__media {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
}

.final-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 6, .72), rgba(8, 8, 6, .9));
}

.final-cta__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.1);
}

.final-cta__stage {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    text-align: center;
    padding:
        calc(clamp(2rem, 6vw, 4rem) + var(--safe-top))
        calc(clamp(2rem, 6vw, 4rem) + var(--safe-right))
        calc(clamp(2rem, 6vw, 4rem) + var(--safe-bottom))
        calc(clamp(2rem, 6vw, 4rem) + var(--safe-left));
    position: relative;
    z-index: 1;
}

.final-cta__mark {
    grid-area: 1/1;
}

.final-cta__mark {
    display: grid;
    justify-items: center;
    pointer-events: auto;
    opacity: 1;
}

.final-cta__mark img {
    width: clamp(120px, 22vw, 240px);
    height: auto;
    object-fit: contain;
}

.site-footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding:
        1.5rem
        calc(var(--page-x) + var(--safe-right))
        calc(2rem + var(--safe-bottom))
        calc(var(--page-x) + var(--safe-left));
    color: var(--muted);
    font-size: .82rem;
    background: rgba(8, 8, 6, .55);
    backdrop-filter: blur(18px);
}

.global-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr) minmax(220px, .7fr);
    gap: clamp(2rem, 6vw, 5rem);
    padding:
        clamp(3rem, 8vw, 5rem)
        calc(var(--page-x) + var(--safe-right))
        calc(clamp(3rem, 8vw, 5rem) + var(--safe-bottom))
        calc(var(--page-x) + var(--safe-left));
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--muted);
}

.global-footer__mark {
    display: block;
    font-family: 'Archivo', Arial, sans-serif;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.global-footer p {
    max-width: 36ch;
    line-height: 1.6;
}

.global-footer nav,
.global-footer div:last-child {
    display: grid;
    align-content: start;
    gap: .75rem;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.global-footer a:hover,
.global-footer a:focus-visible {
    color: var(--ink);
}

.legal-main {
    max-width: 860px;
    min-height: 100dvh;
    padding:
        calc(var(--nav-h) + 4rem)
        calc(var(--page-x) + var(--safe-right))
        calc(6rem + var(--safe-bottom))
        calc(var(--page-x) + var(--safe-left));
}

.legal-main h1 {
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: .95;
    margin: 1rem 0 2rem;
}

.legal-main h2 {
    margin-top: 2rem;
    margin-bottom: .7rem;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    text-transform: none;
}

.legal-main p {
    color: var(--muted);
    line-height: 1.7;
}

/* ---------- Shared button ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-ui);
    padding: .95rem 1.4rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .76rem;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.button:hover {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

/* ---------- Custom cursor ---------- */
.cursor-dot {
    position: fixed;
    z-index: 850;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.cursor-ring {
    position: fixed;
    z-index: 849;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(244, 242, 236, .5);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .18s var(--ease), height .18s var(--ease), border-color .18s var(--ease);
}

.cursor-ring.is-expanded {
    width: 52px;
    height: 52px;
    border-color: var(--ink);
}

/* ==========================================================================
   Case study (project.php) — see assets/css/pages/project.css for the
   full page-specific art direction (hero, story beats, before/after).
   ========================================================================== */
.case-study { background: var(--bg); }

/* ==========================================================================
   Contact page — see assets/css/pages/contact.css for the full layout.
   ========================================================================== */
.wide { grid-column: 1/-1; }
.hp { position: absolute; left: -9999px; }

/* ---------- 404 ---------- */
.not-found {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    padding:
        calc(2rem + var(--safe-top))
        calc(2rem + var(--safe-right))
        calc(2rem + var(--safe-bottom))
        calc(2rem + var(--safe-left));
    text-align: center;
    gap: 1rem;
}

.not-found p {
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--grey);
    font-size: .78rem;
}

.not-found h1 {
    font-size: clamp(2.4rem, 8vw, 8rem);
    line-height: .9;
}

/* ---------- Generic scroll reveal (opt-in via [data-reveal]) ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
}

[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- Cross-page transitions (native View Transitions API) ---------- */
@media not (prefers-reduced-motion: reduce) {
    ::view-transition-old(root) {
        animation: urveon-page-out .45s var(--ease) forwards;
    }
    ::view-transition-new(root) {
        animation: urveon-page-in .5s var(--ease) backwards;
    }
}

@keyframes urveon-page-out {
    to { opacity: 0; filter: blur(6px); }
}

@keyframes urveon-page-in {
    from { opacity: 0; filter: blur(6px); }
}

/* ---------- Magnetic buttons + animated underline (shared premium detail) ---------- */
.magnetic {
    display: inline-flex;
    will-change: transform;
    transition: transform .35s var(--ease);
}

.underline-link {
    position: relative;
    display: inline-block;
}

.underline-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.15em;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--ease);
}

.underline-link:hover::after,
.underline-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- Reduced motion & fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .loader,
    .cursor-dot,
    .cursor-ring { display: none !important; }

    .hero { height: auto; min-height: 100svh; }
    .hero-reel { clip-path: none !important; position: absolute; height: auto; }
    .hero-word { transform: none !important; opacity: 1 !important; }

    .project-panel { position: relative; height: auto; min-height: 100svh; }
    .project-panel__media,
    .project-panel__copy { transform: none !important; filter: none !important; opacity: 1 !important; }

    .services__row { transform: none !important; overflow-x: auto; }

    .final-cta__stage { display: grid; place-items: center; }
    .final-cta__mark { opacity: 1 !important; filter: none !important; transform: none !important; }

    .about__headline { opacity: 1 !important; filter: none !important; transform: none !important; }
}