/* ================================================================
   HERO — AI Design Agency
   Fundo: #000000 puro | Split Text Hover | Aurora Border
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

@font-face {
    font-family: 'Rono Black';
    src: url('assets/fonts/Rono-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --bg:     #000000;
    --text:   #f0ede6;
    --muted:  rgba(240,237,230,0.38);
    --cream:  #f0ede6; /* Agora mapeado para o branco mineral do site */
    --border: rgba(255,255,255,0.07);
    --brand-red: #f7194b;
    --accent: #f7194b;

    --sans:  'DM Sans', sans-serif;
    --display: 'Rono Black', 'Arial Black', sans-serif;
    --serif: 'Playfair Display', serif;
    --nav-h: 70px;
    --ease:  cubic-bezier(0.16, 1, 0.3, 1);
    --snap:  cubic-bezier(0.87, 0, 0.13, 1);

    /* Aurora */
    --a1: #7b61ff;
    --a2: #ff61d8;
    --a3: #ff9d3d;
    --a4: #3dffe0;
    --a5: #61aaff;

    --snake-transition-opacity: 0;
    --snake-x: 0px;
    --snake-y: 0px;
    --snake-rotate: -12deg;
    --snake-scale: 0.78;
    --snake-red: 0;
    --snake-solid: 0;
    --hero-inline-snake-opacity: 1;
    --hero-inline-snake-rotate: -12deg;
    --hero-inline-snake-scale: 1;
    --hero-connector-opacity: 0;
    --hero-connector-x: 0px;
    --hero-connector-y: 0px;
    --hero-connector-rotate: -12deg;
    --hero-connector-scale: 1;
    --hero-connector-red: 0;
    --hero-exit: 0;
}

html { -webkit-font-smoothing: antialiased; }

body {
    background: #000; /* Revertido para preto para o Dark Footer */
    color: var(--text);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
}

body.is-preloading {
    overflow: hidden;
}

.site-preloader {
    --loader-icon: 0;
    --loader-top-y: 0px;
    --loader-bottom-y: 0px;
    --loader-progress-pct: 0%;
    --loader-spin: 0deg;
    position: fixed;
    inset: 0;
    z-index: 30000;
    overflow: hidden;
    background: #000;
    color: #fbfbf4;
    pointer-events: all;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.7s var(--ease),
        transform 0.82s var(--ease),
        filter 0.82s var(--ease),
        visibility 0s linear 0.82s;
}

.site-preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(247,25,75,0.12), transparent 26%),
        radial-gradient(circle at 50% 64%, rgba(251,251,244,0.07), transparent 30%);
    opacity: 0.88;
}

.site-preloader.is-leaving {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -4vh, 0);
    filter: blur(10px);
}

.preloader-progress {
    position: absolute;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(74px, 7vw, 96px);
    margin-left: clamp(-48px, -3.5vw, -37px);
    font-family: 'Newsreader', var(--serif);
    font-size: clamp(36px, 3.35vw, 58px);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    color: #fbfbf4;
    opacity: 1;
    transition:
        opacity 0.45s var(--ease),
        transform 0.8s var(--ease);
}

.preloader-progress--top {
    top: 0;
    padding-top: 12px;
}

.preloader-progress--bottom {
    bottom: 0;
    padding-bottom: 12px;
}

.preloader-progress-inner {
    width: 100%;
    height: clamp(42px, 3.8vw, 66px);
    overflow: hidden;
}

.preloader-numbers {
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
    transition: transform 0.16s linear;
}

.preloader-numbers--top {
    transform: translate3d(0, var(--loader-top-y), 0);
}

.preloader-numbers--bottom {
    transform: translate3d(0, var(--loader-bottom-y), 0);
}

.preloader-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(42px, 3.8vw, 66px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.preloader-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: clamp(188px, 20vw, 300px);
    aspect-ratio: 1;
    border-radius: 999px;
    opacity: calc(0.22 + (var(--loader-icon) * 0.58));
    background:
        conic-gradient(from var(--loader-spin), var(--brand-red) var(--loader-progress-pct), rgba(251,251,244,0.13) 0),
        radial-gradient(circle, transparent 60%, rgba(251,251,244,0.08) 61%, transparent 64%);
    transform: translate3d(-50%, -50%, 0) rotate(var(--loader-spin));
    -webkit-mask: radial-gradient(circle, transparent 63%, #000 64% 67%, transparent 68%);
    mask: radial-gradient(circle, transparent 63%, #000 64% 67%, transparent 68%);
    filter: drop-shadow(0 0 34px rgba(247,25,75,0.20));
    will-change: opacity, transform;
    transition: opacity 0.42s var(--ease);
}

.preloader-snake-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: clamp(96px, 10vw, 150px);
    aspect-ratio: 1875.48 / 1329.12;
    opacity: var(--loader-icon);
    transform:
        translate3d(-50%, -50%, 0)
        scale(calc(0.82 + var(--loader-icon) * 0.18));
    filter:
        brightness(0) invert(1)
        drop-shadow(0 18px 44px rgba(247,25,75,0.18));
    will-change: opacity, transform;
    transition:
        opacity 0.34s var(--ease),
        transform 0.72s var(--ease);
}

.preloader-count-lockup {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(96px, 12vw, 158px));
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 240px;
    color: #fbfbf4;
    opacity: calc(0.16 + (var(--loader-icon) * 0.84));
    transform: translate3d(-50%, 0, 0);
    transition:
        opacity 0.42s var(--ease),
        transform 0.72s var(--ease);
    pointer-events: none;
}

.preloader-phase {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    line-height: 1;
    color: rgba(251,251,244,0.50);
    text-transform: uppercase;
}

.preloader-count-line {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
}

.preloader-count-major {
    font-family: var(--display);
    font-size: clamp(44px, 5.8vw, 90px);
    line-height: 0.76;
    letter-spacing: 0;
    color: #fbfbf4;
    text-shadow: 0 0 34px rgba(247,25,75,0.20);
}

.preloader-count-total {
    font-family: 'Newsreader', var(--serif);
    font-size: clamp(18px, 2vw, 30px);
    font-style: italic;
    color: var(--brand-red);
}

.preloader-snake {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.site-preloader.is-icon-visible .preloader-snake-mark {
    --loader-icon: 1;
}

.site-preloader.is-leaving .preloader-progress {
    opacity: 0;
}

.site-preloader.is-leaving .preloader-count-lockup {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0);
}

.site-preloader.is-leaving .preloader-orbit {
    opacity: 0;
}

.site-preloader.is-leaving .preloader-progress--top {
    transform: translate3d(0, -24px, 0);
}

.site-preloader.is-leaving .preloader-progress--bottom {
    transform: translate3d(0, 24px, 0);
}

.site-preloader.is-leaving .preloader-snake-mark {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.32);
}

@media (max-width: 820px) {
    .preloader-snake-mark {
        width: clamp(82px, 27vw, 124px);
    }

    .preloader-progress {
        width: 62px;
        margin-left: -31px;
        font-size: clamp(34px, 12vw, 48px);
    }

    .preloader-orbit {
        width: clamp(170px, 54vw, 230px);
    }

    .preloader-count-lockup {
        top: calc(50% + clamp(92px, 32vw, 136px));
        gap: 7px;
        min-width: 190px;
    }

    .preloader-phase {
        font-size: 9px;
        letter-spacing: 0.22em;
    }

    .preloader-count-major {
        font-size: clamp(44px, 16vw, 66px);
    }

    .preloader-count-total {
        font-size: clamp(17px, 6vw, 24px);
    }

    .preloader-progress-inner,
    .preloader-number {
        height: clamp(40px, 13vw, 58px);
    }
}

.snake-red-transition {
    position: fixed;
    inset: 0;
    z-index: 94;
    pointer-events: none;
    background: #f7194b;
    opacity: var(--snake-red);
    transform: translate3d(0, calc((1 - var(--snake-red)) * 24vh), 0);
    will-change: opacity, transform;
}

.snake-scroll-transition {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 95;
    width: clamp(184px, 17vw, 318px);
    aspect-ratio: 448 / 228;
    pointer-events: none;
    opacity: var(--snake-transition-opacity);
    transform:
        translate3d(calc(-50% + var(--snake-x)), calc(-50% + var(--snake-y)), 0)
        rotate(var(--snake-rotate))
        scale(var(--snake-scale));
    transform-origin: 52% 56%;
    filter: drop-shadow(0 12px 20px rgba(247,25,75,0.10));
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.snake-scroll-img,
.snake-scroll-solid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.snake-scroll-img {
    display: block;
    object-fit: contain;
    image-rendering: auto;
    opacity: calc((1 - var(--snake-solid)) * var(--snake-transition-opacity));
    transform: translateZ(0);
}

.snake-scroll-solid {
    background: #f7194b;
    opacity: calc(var(--snake-solid) * var(--snake-transition-opacity));
    -webkit-mask: url("assets/brand/cobrasvg-clean.svg") center / contain no-repeat;
    mask: url("assets/brand/cobrasvg-clean.svg") center / contain no-repeat;
}

.hero-connector-snake {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 93;
    width: clamp(58px, 5vw, 92px);
    aspect-ratio: 256.76 / 130.4;
    pointer-events: none;
    opacity: var(--hero-connector-opacity);
    transform:
        translate3d(calc(-50% + var(--hero-connector-x)), calc(-50% + var(--hero-connector-y)), 0)
        rotate(var(--hero-connector-rotate))
        scale(var(--hero-connector-scale));
    transform-origin: 52% 56%;
    filter: drop-shadow(0 16px 32px rgba(247,25,75,0.24));
    will-change: opacity, transform;
}

.hero-connector-snake::before,
.hero-connector-snake::after {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.hero-connector-snake::before {
    background-image: url("assets/brand/cobrasvg-white.svg");
    opacity: calc(1 - var(--hero-connector-red));
}

.hero-connector-snake::after {
    background-image: url("assets/brand/cobrasvg.svg");
    opacity: var(--hero-connector-red);
}

.mobile-showreel-section {
    display: none;
}

.desktop-manifesto-video-section {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 8;
    margin-top: -1px;
    min-height: calc(100svh + clamp(92px, 10vw, 156px));
    padding: calc(var(--nav-h) + clamp(36px, 5vw, 78px)) clamp(24px, 4vw, 72px) clamp(72px, 8vw, 132px);
    background: #050505;
    overflow: hidden;
}

.desktop-manifesto-video {
    display: block;
    width: min(100%, 1680px);
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: min(82svh, 820px);
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    background: #050505;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }

/* ========================
   SPLIT TEXT HOVER
======================== */
.split-link,
.menu-text {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.1;
    vertical-align: top;
    cursor: pointer;
}
.split-top {
    display: block;
    transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1),
                opacity  0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
.split-bot {
    display: block;
    color: var(--cream);
    transform: translateY(100%);
    margin-top: -1.1em;
    transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1),
                opacity  0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
.split-link:hover .split-top,
.menu-big-link:hover .split-top  { transform: translateY(-105%); }
.split-link:hover .split-bot,
.menu-big-link:hover .split-bot  { transform: translateY(0); }

/* ========================
   BOTÃO PADRÃO DO SITE — Spotlight Border
   Mesmo efeito do hover do menu nav-pill.
   Use .spotlight-btn em qualquer botão/link.
======================== */
.spotlight-btn {
    --size:     100;
    --spot-size: calc(var(--size) * 1px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 13px 28px;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    touch-action: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.spotlight-btn:hover { color: #fff; }

/* Luz vermelha na borda — segue o cursor */
.spotlight-btn::before {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 9999px;
    padding: 1px; /* Substituto inteligente do border transparent */
    background-image: radial-gradient(
        var(--spot-size) var(--spot-size) at
        calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
        rgba(242, 34, 72, 0.70) 0%,
        transparent 100%
    );
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Ponto branco sutil */
.spotlight-btn::after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 9999px;
    padding: 1px;
    background-image: radial-gradient(
        calc(var(--spot-size) * 0.45) calc(var(--spot-size) * 0.45) at
        calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
        rgba(255,255,255,0.30) 0%,
        transparent 100%
    );
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Variante maior para CTAs principais */
.spotlight-btn--lg {
    padding: 16px 36px;
    font-size: 15px; font-weight: 600;
}

/* Variante quadrada / icon-only */
.spotlight-btn--square {
    border-radius: 14px;
    padding: 12px 16px;
}
.spotlight-btn--square::before,
.spotlight-btn--square::after {
    border-radius: 14px;
}


/* ========================
   NAVBAR — Spotlight Card Effect
   (traduzido do GlowCard para vanilla CSS)
======================== */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px 24px;
    pointer-events: none;
    transition: padding 0.4s var(--ease);
}

.nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    pointer-events: all;
    --nav-fluid-ease: cubic-bezier(0.19, 1, 0.22, 1);
    transition:
        width 0.72s var(--nav-fluid-ease),
        justify-content 0.72s var(--nav-fluid-ease),
        gap 0.72s var(--nav-fluid-ease);
}

.nav-pill {
    --size:  100;
    --spot-size: calc(var(--size) * 1px);

    display: flex;
    align-items: center;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    padding: 16px 32px;
    position: relative;
    touch-action: none;
    transition:
        background 0.56s var(--ease),
        border-color 0.56s ease,
        box-shadow 0.56s ease,
        transform 0.72s var(--ease),
        padding 0.72s var(--ease);
}

/* Luz colorida na borda — clipada só à borda (1px) */
.nav-pill::before {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid transparent;
    background-image: radial-gradient(
        var(--spot-size) var(--spot-size) at
        calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
        rgba(242, 34, 72, 0.70) 0%,
        transparent 100%
    );
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: border-box;
    /* Subtrai o interior — exibe só a borda de 1px */
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.92;
    transition: opacity 0.42s ease;
}

/* Ponto branco de destaque — ainda menor e mais sutil */
.nav-pill::after {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background-image: radial-gradient(
        calc(var(--spot-size) * 0.45) calc(var(--spot-size) * 0.45) at
        calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
        rgba(255,255,255,0.35) 0%,
        transparent 100%
    );
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.78;
    transition: opacity 0.42s ease;
}

/* === Bloco 1: Logo === */
.nav-pill--logo { 
    --size: 148;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
}
.logo-link {
    font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: flex; align-items: center; gap: 9px;
}
.brand-snake-mark,
.brand-v-mark {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 12px rgba(247, 25, 75, 0.34));
}
.brand-wordmark {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0;
}
.logo-link sup { font-size: 8px; opacity: 0.45; vertical-align: super; }
.logo-link:hover { color: #fff; }

/* === Bloco 2: Links === */
.nav-pill--links {
    min-height: 44px;
    padding: 4px 6px;
    gap: 0;
    overflow: hidden;
    max-width: 600px;
    clip-path: inset(0 0 0 0 round 6px);
    will-change: max-width, opacity, transform, padding, clip-path;
    transition:
        max-width 1.16s var(--nav-fluid-ease),
        opacity 0.58s ease,
        padding 1.16s var(--nav-fluid-ease),
        transform 1.16s var(--nav-fluid-ease),
        clip-path 1.16s var(--nav-fluid-ease),
        border-color 0.34s ease,
        box-shadow 0.34s ease;
}

.nav-pill--links,
.nav-pill--menu {
    --size: 148;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
}

.nav-link {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px; font-weight: 500;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.02em;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    position: relative; z-index: 2;
    overflow: hidden;        /* Clipping garantido */
    transition:
        color 0.15s ease,
        opacity 0.42s ease,
        transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: inherit; }

/* Split-text vertical — texto duplicado via JS */
.nav-link .nl-top,
.nav-link .nl-bot {
    display: block;
    padding: 9px 22px;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav-link .nl-top {
    transform: translateY(0);
}
.nav-link .nl-bot {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
}
/* No hover: top sobe, bot entra */
.nav-link:hover .nl-top { transform: translateY(-100%); }
.nav-link:hover .nl-bot  { transform: translateY(0); }

/* Glow pill deslizante — desativado */
.nav-glow { display: none; }
.nav-pill--links.glow-active .nav-glow { display: none; }

.nav-pill--links:hover {
    border-color: rgba(242, 34, 72, 0.42);
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.02),
        0 0 0 1px rgba(242, 34, 72, 0.08);
}

.nav-pill--links:hover::before {
    opacity: 1;
}

.nav-pill--links:hover::after {
    opacity: 0.24;
}

/* === Bloco 3: ··· === */
.nav-pill--menu {
    min-height: 44px;
    padding: 10px 18px;
    cursor: pointer;
}
.menu-hamburger {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.5);
    pointer-events: none;
    transition: transform 0.5s ease-in-out, color 0.2s;
}
.nav-pill--menu:hover .menu-hamburger,
.nav-pill--menu.is-active .menu-hamburger {
    color: #fff;
}
.nav-pill--menu.is-active .menu-hamburger {
    transform: rotate(-45deg);
}

.menu-path-1 {
    stroke-dasharray: 12 63;
    transition: all 0.5s ease-in-out;
}
.nav-pill--menu.is-active .menu-path-1 {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42px;
}

@media (min-width: 861px) {
    .navbar.is-scrolled {
        padding-top: 14px;
    }

    .navbar.is-scrolled .nav-wrapper {
        width: max-content;
        max-width: calc(100vw - 48px);
        gap: 4px;
    }

    .navbar.is-scrolled .nav-pill--logo {
        position: relative;
        left: auto;
        top: auto;
        min-height: 48px;
        padding: 10px 18px;
        transform: none;
        transition:
            padding 0.45s var(--ease),
            border-color 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
    }

    .navbar.is-scrolled .brand-v-mark {
        width: 26px;
        height: 26px;
    }

    .navbar.is-scrolled .nav-pill--menu {
        width: 56px;
        min-height: 44px;
        justify-content: center;
        padding: 10px 17px;
        transition:
            width 0.45s var(--ease),
            padding 0.45s var(--ease),
            border-color 0.3s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;
    }

    .navbar.is-scrolled .nav-pill--links {
        max-width: 0.01px;
        padding-left: 0;
        padding-right: 0;
        opacity: 0;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.012);
        clip-path: inset(0 48% 0 48% round 6px);
        transform: translate3d(0, -1px, 0) scaleX(0.985);
        transition:
            max-width 1.18s var(--nav-fluid-ease),
            opacity 0.52s ease,
            padding 1.18s var(--nav-fluid-ease),
            transform 1.18s var(--nav-fluid-ease),
            clip-path 1.18s var(--nav-fluid-ease),
            border-color 0.44s ease,
            box-shadow 0.44s ease;
    }

    .navbar.is-scrolled .nav-pill--links::before,
    .navbar.is-scrolled .nav-pill--links::after {
        opacity: 0;
    }

    .navbar.is-scrolled .nav-pill--links .nav-link {
        opacity: 0;
        transform: translate3d(0, -2px, 0);
    }

    .navbar.is-scrolled .nav-wrapper.is-nav-hovered .nav-pill--links,
    .navbar.is-scrolled .nav-wrapper:hover .nav-pill--links,
    .navbar.is-scrolled .nav-wrapper:focus-within .nav-pill--links {
        max-width: 520px;
        padding-left: 6px;
        padding-right: 6px;
        opacity: 1;
        pointer-events: auto;
        border-color: rgba(242, 34, 72, 0.34);
        box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
        clip-path: inset(0 0 0 0 round 6px);
        transform: translate3d(0, 0, 0) scale(1);
    }

    .navbar.is-scrolled .nav-wrapper.is-nav-hovered .nav-pill--links::before,
    .navbar.is-scrolled .nav-wrapper:hover .nav-pill--links::before,
    .navbar.is-scrolled .nav-wrapper:focus-within .nav-pill--links::before {
        opacity: 1;
    }

    .navbar.is-scrolled .nav-wrapper.is-nav-hovered .nav-pill--links::after,
    .navbar.is-scrolled .nav-wrapper:hover .nav-pill--links::after,
    .navbar.is-scrolled .nav-wrapper:focus-within .nav-pill--links::after {
        opacity: 0.24;
    }

    .navbar.is-scrolled .nav-wrapper.is-nav-hovered .nav-pill--links .nav-link,
    .navbar.is-scrolled .nav-wrapper:hover .nav-pill--links .nav-link,
    .navbar.is-scrolled .nav-wrapper:focus-within .nav-pill--links .nav-link {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition-delay: 0.08s;
    }
}

/* === Toggle de Idioma — fixo canto superior direito === */
.lang-toggle {
    --size: 100;
    --spot-size: calc(var(--size) * 1px);

    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 101;

    display: flex;
    align-items: center;
    gap: 0;
    min-height: 42px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(10,10,10,0.52);
    backdrop-filter: blur(24px) saturate(160%) brightness(1.05);
    -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 30px rgba(0,0,0,0.16);
    cursor: pointer;
    position: fixed;
    touch-action: none;
}

/* Slider animado que desliza entre as bandeiras */
.lang-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    bottom: 4px;
    border-radius: 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 0;
}
/* Estado UK — slider vai para a direita */
.lang-toggle.lang-uk .lang-slider,
.lang-toggle.lang-en .lang-slider {
    left: calc(50%);
}

/* Cada botão de bandeira */
.lang-flag {
    position: relative;
    z-index: 1;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.68);
    padding: 8px 9px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.25s ease, transform 0.2s ease;
    flex: 1;
}
.lang-flag.active {
    opacity: 1;
    transform: scale(1.05);
    color: #fff;
}

.flag-icon {
    font-size: 18px;
    line-height: 1;
}

/* Spotlight border no toggle (igual ao nav-pill) */
.lang-toggle::before {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background-image: radial-gradient(
        var(--spot-size) var(--spot-size) at
        calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
        rgba(242, 34, 72, 0.70) 0%,
        transparent 100%
    );
    background-attachment: fixed;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* ========================
   MENU OVERLAY (STUDIO NAMMA STYLE)
======================== */
/* ========================
   MENU OVERLAY (STUDIO NAMMA STYLE)
======================== */
.menu-overlay {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none; visibility: hidden;
    background: transparent;
    display: flex; flex-direction: column;
}
.menu-overlay.is-open { pointer-events: all; visibility: visible; }

.menu-overlay-bg {
    position: absolute; inset: 0;
    background: rgba(8, 8, 8, 0.45);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}
.menu-overlay.is-open .menu-overlay-bg { transform: translateY(0); }

/* Header & Footer do Menu */
.menu-header, .menu-overlay-footer {
    position: relative; z-index: 10;
    padding: 30px 40px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0; transform: translateY(-20px);
    transition: all 0.6s 0.4s var(--ease);
}
.menu-overlay-footer { transform: translateY(20px); }
.menu-overlay.is-open .menu-header,
.menu-overlay.is-open .menu-overlay-footer { opacity: 1; transform: translateY(0); }

.menu-close-btn {
    color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 24px; border-radius: 40px; background: transparent;
    font-size: 10px; letter-spacing: 0.1em;
    transition: all 0.3s;
}
.menu-close-btn:hover { background: #fff; color: #000; }

.menu-cta-link { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* Corpo do Menu: Grid de 2 colunas */
.menu-overlay-inner {
    position: relative; flex: 1;
    display: flex; align-items: center;
    padding: 0 40px;
    opacity: 0; transition: opacity 0.5s 0.3s;
}
.menu-overlay.is-open .menu-overlay-inner { opacity: 1; }

.menu-grid {
    display: grid; grid-template-columns: 1.2fr 1fr;
    width: 100%; gap: 60px;
}
.menu-col { display: flex; flex-direction: column; gap: 15px; }

.menu-item-namma { 
    display: flex; align-items: center; position: relative; 
    cursor: pointer;
}

/* GIF Reveal System (Reference Style) */
.menu-gif-reveal {
    width: 0; height: clamp(50px, 7vw, 110px);
    overflow: hidden; opacity: 0;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.5s ease, 
                margin 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    border-radius: 12px;
}
.menu-gif-reveal img {
    height: 100%; width: 160px; /* Largura fixa interna para manter proporção no reveal */
    object-fit: cover;
}

.menu-link-big {
    font-family: var(--display);
    font-size: clamp(50px, 8vw, 130px);
    font-weight: 900; line-height: 0.85;
    letter-spacing: 0;
    color: #fff; text-transform: uppercase;
    display: block; opacity: 0.35;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover Desktop */
.menu-item-namma:hover .menu-gif-reveal {
    width: 160px; opacity: 1; margin-right: 35px;
}
.menu-item-namma:hover .menu-link-big {
    opacity: 1; transform: translateX(20px);
}

.menu-contact-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.menu-contact-card {
    width: min(100%, 420px);
    min-height: clamp(104px, 12vw, 158px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    color: #fff;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    transition:
        transform 0.55s var(--ease),
        background 0.55s var(--ease),
        border-color 0.55s var(--ease),
        box-shadow 0.55s var(--ease);
}

.menu-contact-card::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 25, 75, 0.7), transparent);
    opacity: 0;
    transform: translateX(-22%);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.menu-contact-card:hover {
    transform: translateY(-3px);
    background: rgba(18, 18, 18, 0.92);
    border-color: rgba(247, 25, 75, 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 60px rgba(0,0,0,0.28);
}

.menu-contact-card:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.menu-contact-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    transform: rotate(45deg);
    background: var(--brand-red);
    box-shadow: 0 0 16px rgba(247, 25, 75, 0.58);
}

/* Rodapé Estendido */
.menu-overlay-footer {
    justify-content: space-between; align-items: flex-end;
    padding-bottom: 40px;
}
.menu-footer-left { max-width: 300px; line-height: 1.4; }
.footer-time-large { color: #fff; font-variant-numeric: tabular-nums; }

/* Responsividade Mobile */
@media (max-width: 900px) {
    .menu-header {
        justify-content: center;
        padding: max(18px, calc(env(safe-area-inset-top) + 14px)) 20px 0;
    }

    .menu-close-btn {
        padding: 10px 28px;
        font-size: 11px;
    }

    .menu-overlay-inner {
        justify-content: center;
        align-items: center;
        padding: calc(var(--nav-h) + 8px) 18px 42px;
        text-align: left;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        place-items: center;
        width: min(calc(100vw - 36px), 720px);
        gap: clamp(20px, 4vh, 34px);
    }

    .menu-col {
        justify-self: center;
        width: max-content;
        max-width: 100%;
        align-items: stretch;
        gap: clamp(16px, 2.5vh, 24px);
    }

    .menu-item-namma {
        justify-content: flex-start;
    }

    .menu-contact-col {
        width: 100%;
        justify-content: center;
    }

    .menu-contact-card {
        width: min(100%, 340px);
        min-height: 92px;
    }

    .menu-header-left, .menu-overlay-footer { display: none; }
    .menu-link-big {
        font-size: clamp(46px, 12.8vw, 74px) !important;
        line-height: 0.82;
        opacity: 1;
    }
    
    /* Sempre visível no Mobile */
    .menu-gif-reveal {
        width: clamp(72px, 17vw, 86px);
        height: clamp(54px, 12vw, 66px);
        opacity: 1;
        margin-right: clamp(16px, 4vw, 24px);
        flex: 0 0 auto;
    }
    .menu-gif-reveal img { width: clamp(72px, 17vw, 86px); }
}

/* ========================
   HERO — Layout editorial
======================== */
.hero {
    min-height: 100svh;
    background: transparent;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "top"
        "center"
        "bottom";
    padding: calc(var(--nav-h) + 10px) 44px 40px;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    left: -5vw;
    right: -5vw;
    bottom: -1px;
    height: clamp(42px, 6vh, 82px);
    z-index: 1;
    pointer-events: none;
    background: #f2efe7;
    border-radius: 50% 50% 0 0 / 64% 64% 0 0;
    box-shadow: inset 0 1px 0 rgba(247,25,75,0.18);
    transform: translate3d(0, calc((1 - var(--hero-exit)) * 108%), 0);
    will-change: transform;
}

/* Malha Arquitetônica sutil */
.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
    opacity: calc(1 - var(--hero-exit));
}

/* ====== GLOBAL FIXED BACKGROUND VIDEO ====== */
.global-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh; /* svh para mobile */
    z-index: -10;
    overflow: hidden;
    background: #000;
    pointer-events: none; /* Não captura toques */
}
.global-vid {
    width: 110%; height: 110%; /* Aumentado para dar margem ao parallax */
    top: -5%; left: -5%;
    position: absolute;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    filter: brightness(0.8) contrast(1.1); /* Mais dramático */
}
.global-vid-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0.85) 100%
    );
    pointer-events: none;
}

/* Garante que o conteúdo da hero fica acima do vídeo */
.hero-top-row,
.hero-center,
.hero-bottom-row,
.scroll-hint { position: relative; z-index: 2; }

.hero .hero-center.anim-in {
    opacity: calc(1 - var(--hero-exit));
    transform: translateY(calc(var(--hero-exit) * -18px));
}

.hero .hero-bottom-row.anim-in {
    opacity: clamp(0, calc(1 - (var(--hero-exit) * 1.25)), 1);
    transform: translateY(calc(var(--hero-exit) * -18px));
}

/* ---- Entrance animation base ---- */
.anim-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.anim-item.anim-in { opacity: 1; transform: translateY(0); }

/* ---- TOP ROW ---- */
.hero-top-row {
    grid-area: top;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hero-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted);
}
.meta-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cream); flex-shrink: 0;
}

/* ---- CENTER — headline block ---- */
.hero-center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
}

.hero-eyebrow {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 28px;
    border-left: 2px solid var(--cream);
    padding-left: 12px;
}

/* Headline: posicionamento assimétrico editorial */
.hero-headline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-headline--split {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 4vw, 96px);
}

.hero-split-text {
    font-family: 'Playfair Display', var(--serif);
    font-size: clamp(38px, 3.8vw, 78px);
    font-weight: 800;
    font-style: italic;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    max-width: min(42vw, 640px);
    text-wrap: balance;
    white-space: normal;
}

.hero-split-text--left {
    justify-self: start;
}

.hero-split-text--right {
    justify-self: end;
}

.hero-split-mark {
    display: block;
    width: clamp(44px, 4.6vw, 86px);
    aspect-ratio: 256.76 / 130.4;
    background: url("assets/brand/cobrasvg-white.svg") center / contain no-repeat;
    justify-self: center;
    transform:
        rotate(var(--hero-inline-snake-rotate))
        scale(var(--hero-inline-snake-scale));
    opacity: var(--hero-inline-snake-opacity);
    filter: drop-shadow(0 0 24px rgba(255,255,255,0.18));
    will-change: opacity, transform;
}

@media (min-width: 861px) and (max-width: 1240px) {
    .hero-headline--split {
        grid-template-columns: minmax(0, 1fr) clamp(42px, 4.8vw, 60px) minmax(0, 1fr);
        gap: clamp(10px, 2vw, 28px);
    }

    .hero-split-text {
        max-width: min(41vw, 480px);
        font-size: clamp(34px, 3.7vw, 48px);
        line-height: 0.94;
    }

    .hero-split-mark {
        width: clamp(38px, 4.8vw, 60px);
    }
}

.headline-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.hl-word {
    font-family: var(--display);
    font-size: clamp(48px, 10vw, 160px); 
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Linha 1 — alinhada à esquerda normal */
.row-1 { padding-left: 0; }

/* Linha 2 — Cor de destaque Vysceral */
.row-2 { padding-left: clamp(20px, 5vw, 100px); color: var(--accent); }

.hl-italic { font-style: normal; }

/* Linha 3 — tag pequena + palavra em outline */
.row-3 {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-top: 10px;
}

.hl-tag {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--text);
    text-transform: uppercase;
    background: rgba(242, 34, 72, 0.15);
    border: 1px solid var(--accent);
    padding: 6px 14px;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: center;
}

/* "In days." em outline (só contorno) */
.hl-outlined {
    font-family: var(--display);
    font-size: clamp(48px, 10vw, 160px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: 0;
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(240,237,230,0.4);
    color: transparent;
    white-space: nowrap;
    transition: -webkit-text-stroke 0.3s, color 0.3s;
}
.hl-outlined:hover {
    -webkit-text-stroke: 1px rgba(240,237,230,0.8);
    color: rgba(240,237,230,0.08);
}

/* ---- BOTTOM ROW ---- */
.hero-bottom-row {
    grid-area: bottom;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 22px;
    border-top: 0;
}

.hero-scroll-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 10px 9px 16px;
    border: 1px solid rgba(240,237,230,0.28);
    border-radius: 999px;
    background: rgba(12,12,12,0.24);
    color: rgba(240,237,230,0.92);
    box-shadow: 0 18px 46px rgba(0,0,0,0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform 0.32s var(--ease), border-color 0.32s ease, background 0.32s ease;
}

.hero-scroll-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(240,237,230,0.48);
    background: rgba(12,12,12,0.34);
}

.hero-scroll-copy {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1;
    color: rgba(240,237,230,0.9);
    text-align: center;
}

.hero-scroll-arrow {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f2efe7;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.18);
}

.hero-scroll-arrow::before,
.hero-scroll-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
}

.hero-scroll-arrow::before {
    top: 8px;
    width: 1.5px;
    height: 13px;
    background: #151515;
    transform: translateX(-50%);
}

.hero-scroll-arrow::after {
    top: 18px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #151515;
    border-bottom: 1.5px solid #151515;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Descriptor */
.hero-descriptor p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 260px;
}
.hero-descriptor em { color: var(--cream); font-style: normal; }

/* CTA */
.hero-cta {
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
}
.cta-sub {
    font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
}

/* Stats */
.hero-stats {
    display: flex; align-items: center; gap: 24px;
    flex-shrink: 0;
}
.stat { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.stat-num {
    font-family: var(--serif);
    font-size: 32px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1;
    color: var(--text);
}
.stat-label { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.stat-divider { width: 1px; height: 48px; background: var(--border); }

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-line-v {
    width: 1px; height: 44px;
    background: linear-gradient(to bottom, transparent, var(--muted));
    animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity: 0.25; transform: scaleY(1); }
    50%      { opacity: 1;    transform: scaleY(0.55); }
}
.scroll-hint span {
    font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--muted);
    writing-mode: vertical-rl;
}

/* ========================
   RESPONSIVE
======================== */
@media (max-width: 860px) {
    .nav-pill--links { display: none; }
    /* Esconde o Logo no mobile */
    .nav-pill--logo { display: none; }
    
    .navbar { padding: 16px 20px; justify-content: flex-start; }
    /* Com o logo escondido, jogamos o menu para a direita */
    .nav-wrapper { width: 100%; justify-content: flex-end; }
    
    /* Move o toggle de idioma fixo para a ponta ESQUERDA da tela */
    .lang-toggle { left: 20px; right: auto; top: 16px; transform: scale(0.95); transform-origin: top left; }
    
    .hero { padding: calc(var(--nav-h) + 20px) 20px 40px; }

    .hero::after {
        left: -12vw;
        right: -12vw;
        height: clamp(30px, 4.8vh, 48px);
    }
    
    .hero-center { justify-content: center; align-items: stretch; text-align: initial; padding-bottom: 0; }
    .hero-eyebrow { margin-bottom: 20px; }

    .hero-headline--split {
        gap: clamp(14px, 2vw, 24px);
    }

    .hero-split-text {
        font-size: clamp(30px, 4.8vw, 40px);
    }

    .hero-split-mark {
        width: clamp(42px, 7vw, 60px);
    }

    .hero-connector-snake {
        width: clamp(46px, 9vw, 68px);
    }

    .row-2 { padding-left: clamp(24px, 5vw, 80px); }
    .row-3 { flex-wrap: wrap; }

    .hero-bottom-row {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 12px;
        padding-bottom: 20px;
    }

    .hero-scroll-cta {
        gap: 9px;
        padding: 8px 9px 8px 14px;
    }

    .hero-scroll-copy {
        font-size: 12px;
        line-height: 1.1;
    }

    .hero-scroll-arrow {
        width: 28px;
        height: 28px;
    }
    
    /* Centraliza exclusivamente o botão e a pequena frase dele no mobile */
    .hero-cta { align-self: center; text-align: center; }
    
    .hero-stats { align-self: flex-start; }
    .scroll-hint { display: none; }

    .menu-overlay-inner { padding: calc(var(--nav-h) + 16px) 20px 32px; }
    .menu-footer { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 32px; 
    }
    .menu-socials { 
        margin-left: 0; 
        justify-content: center; 
        flex-wrap: wrap; 
        row-gap: 12px;
    }
}

@media (max-width: 560px) {
    .menu-overlay-inner {
        padding: calc(var(--nav-h) + 4px) 14px 34px;
    }

    .menu-grid {
        width: 100%;
        gap: clamp(16px, 3vh, 24px);
    }

    .menu-col {
        gap: clamp(12px, 2vh, 18px);
    }

    .menu-link-big {
        font-size: clamp(44px, 12vw, 60px) !important;
    }

    .menu-col:nth-child(2) .menu-link-big {
        font-size: clamp(38px, 10vw, 52px) !important;
    }

    .menu-gif-reveal {
        width: clamp(52px, 14vw, 68px);
        height: clamp(42px, 10.5vw, 54px);
        margin-right: clamp(10px, 3vw, 14px);
        border-radius: 9px;
    }

    .menu-gif-reveal img {
        width: clamp(52px, 14vw, 68px);
    }

    .hero-headline--split {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
    }

    .hero-split-text,
    .hero-split-text--left,
    .hero-split-text--right {
        justify-self: center;
        text-align: center;
    }
}

@media (max-width: 820px) {
    .desktop-manifesto-video-section {
        display: none;
    }

    .mobile-showreel-section {
        display: block;
        position: relative;
        z-index: 9;
        min-height: 100svh;
        margin-top: -1px;
        padding: calc(var(--nav-h) + 30px) 18px 42px;
        background: #050505;
        color: #f2efe7;
        overflow: hidden;
    }

    .mobile-showreel-section::before {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: calc(var(--nav-h) + 18px);
        height: 1px;
        background: rgba(247,25,75,0.68);
        pointer-events: none;
    }

    .mobile-showreel-shell {
        position: relative;
        z-index: 1;
        display: grid;
        width: min(100%, 390px);
        margin: 0 auto;
        align-items: center;
        min-height: calc(100svh - var(--nav-h) - 72px);
    }

    .mobile-showreel-frame {
        position: relative;
        width: min(100%, 360px);
        margin: 0 auto;
        aspect-ratio: 9 / 16;
        border: 1px solid rgba(242,239,231,0.14);
        border-radius: 8px;
        overflow: hidden;
        background: #111;
        box-shadow: 0 34px 80px rgba(0,0,0,0.42);
    }

    .mobile-showreel-frame::before {
        content: '';
        position: absolute;
        inset: 12px;
        z-index: 2;
        border: 1px solid rgba(242,239,231,0.10);
        border-radius: 5px;
        pointer-events: none;
    }

    .mobile-showreel-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #050505;
    }
}

/* ========================
   MIDDLE SECTIONS (MANIFESTO & SERVICES)
======================== */

/* =========================================================
   CRAFTING SECTION (EXACT REFERENCE)
========================================================= */
.crafting-section {
    --crafting-progress: 0;
    --crafting-preblur: 1;
    --crafting-word-blur: 12px;
    --crafting-word-blur-deep: 24px;
    --crafting-word-y: 16px;
    --crafting-word-y-deep: 34px;
    --crafting-word-opacity: 0.62;
    --crafting-word-opacity-deep: 0.32;
    position: relative;
    background: #f2efe7;
    margin-top: -1px;
    height: 160vh;
    overflow: visible;
    z-index: 10;
    color: #1a1a1a;
}

.crafting-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 32px;
    z-index: 6;
    pointer-events: none;
    background: #f2efe7;
    border-radius: 50% 50% 0 0 / 88% 88% 0 0;
    box-shadow: inset 0 1px 0 rgba(247,25,75,0.16);
}

.crafting-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 28px;
}

.crafting-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 35;
    width: 112vw;
    height: clamp(210px, 42vh, 430px);
    pointer-events: none;
    opacity: calc(var(--crafting-preblur) * 0.62);
    background:
        linear-gradient(90deg, rgba(242,239,231,0.06), rgba(242,239,231,0.46) 44%, rgba(247,25,75,0.07) 76%, rgba(242,239,231,0.04)),
        radial-gradient(circle at 58% 50%, rgba(255,255,255,0.30), transparent 42%);
    backdrop-filter: blur(22px) saturate(138%);
    -webkit-backdrop-filter: blur(22px) saturate(138%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
    transform:
        translate3d(-50%, calc(-50% - ((1 - var(--crafting-preblur)) * 28vh)), 0)
        scaleY(calc(0.92 + (var(--crafting-preblur) * 0.08)));
    box-shadow: 0 36px 110px rgba(23,23,23,0.10);
    will-change: opacity, transform;
}

@media (min-width: 901px) {
    .crafting-container::before {
        top: 45%;
        height: clamp(560px, 80vh, 900px);
        opacity: calc(var(--crafting-preblur) * 0.70);
        background:
            linear-gradient(90deg, rgba(242,239,231,0.04), rgba(242,239,231,0.52) 38%, rgba(247,25,75,0.08) 78%, rgba(242,239,231,0.04)),
            radial-gradient(circle at 58% 54%, rgba(255,255,255,0.34), transparent 48%);
        backdrop-filter: blur(26px) saturate(142%);
        -webkit-backdrop-filter: blur(26px) saturate(142%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
    }
}

.crafting-headline {
    position: relative;
    font-family: var(--display);
    font-size: 118px;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
    cursor: default;
    display: inline-block;
    width: min(1240px, calc(100vw - 56px));
    padding: 52px 0 126px;
    text-align: left;
    opacity: clamp(0, calc((0.73 - var(--crafting-progress)) * 16), 1);
    transform: translate3d(0, calc(var(--crafting-progress) * -18px), 0);
    z-index: 50;
    will-change: opacity, transform, filter;
}

.animate-in {
    animation: none;
}

.ch-word {
    display: inline-block;
    margin-right: 0.07em;
    color: #171717;
    -webkit-text-fill-color: #171717;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    opacity: var(--crafting-word-opacity);
    filter: blur(var(--crafting-word-blur));
    transform: translate3d(0, var(--crafting-word-y), 0);
    will-change: opacity, transform, filter;
}

.ch-word:nth-of-type(3),
.ch-word:nth-of-type(4) {
    opacity: var(--crafting-word-opacity-deep);
    filter: blur(var(--crafting-word-blur-deep));
    transform: translate3d(0, var(--crafting-word-y-deep), 0);
}

.ch-italic { font-style: normal; }

.ch-gradient {
    background: none;
    color: var(--brand-red);
    -webkit-text-fill-color: var(--brand-red);
    -webkit-text-stroke: 0;
    text-stroke: 0;
    background-clip: border-box;
}

.crafting-trail-trigger {
    position: relative;
    z-index: 60;
    cursor: crosshair;
}

.crafting-trail-trigger:hover {
    filter: blur(var(--crafting-word-blur-deep)) drop-shadow(0 18px 34px rgba(242,34,72,0.24));
}

/* =========================================================
   BARRA DE VIDRO (SCROLL SCANNING EFFECT)
========================================================= */
.crafting-hover-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    min-height: 232px;
    
    transform: translateX(-50%) translateY(-50%);
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    pointer-events: none;
    opacity: clamp(0, calc((0.72 - var(--crafting-progress)) * 10), 1);
    will-change: opacity, transform;
}

/* =========================================================
   HOVER TRAIL (PORTFOLIO CARDS)
========================================================= */
.hover-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 90;
}

.trail-card {
    position: absolute;
    z-index: 1;
    width: clamp(170px, 14vw, 250px);
    height: clamp(220px, 18vw, 320px);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: 0 18px 55px rgba(0,0,0,0.16);
    transform: translate(-50%, -50%) rotate(var(--trail-rotate, 0deg));
    will-change: transform, opacity;
    overflow: hidden;
}

.trail-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(0,0,0,0.12));
}

.trail-card.active {
    animation: trailFade 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes trailFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.76) rotate(calc(var(--trail-rotate, 0deg) - 7deg));
    }
    15% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1.04) rotate(calc(var(--trail-rotate, 0deg) + 2deg));
    }
    30% {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1) rotate(var(--trail-rotate, 0deg));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08) rotate(calc(var(--trail-rotate, 0deg) + 10deg));
    }
}

.chb-content {
    width: 100%;
    max-width: 1220px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: clamp(14px, 2.2vw, 28px) clamp(26px, 5vw, 76px);
    justify-content: space-between;
    align-items: center;
    padding: 26px 44px;
    text-align: left;
}

.chb-card {
    --manifesto-rise: 0;
    position: relative;
    border-radius: 8px;
    background: rgba(242,239,231,0.58);
    backdrop-filter: blur(24px) saturate(156%);
    -webkit-backdrop-filter: blur(24px) saturate(156%);
    border: 1px solid rgba(255,255,255,0.60);
    box-shadow: 0 22px 70px rgba(26,26,26,0.09), inset 0 1px 0 rgba(255,255,255,0.62);
    opacity: var(--manifesto-rise);
    transform:
        translate3d(0, calc((1 - var(--manifesto-rise)) * 58px), 0)
        scale(calc(0.96 + (var(--manifesto-rise) * 0.04)));
    will-change: opacity, transform;
}

.chb-card--kicker {
    grid-column: 1 / span 5;
    justify-self: start;
    min-width: min(450px, 38vw);
    padding: 18px 24px 18px 28px;
}

.chb-card--copy {
    grid-column: 7 / span 6;
    justify-self: end;
    max-width: 560px;
    padding: 24px 30px;
}

.chb-card--copy::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 4px;
    height: calc(100% - 28px);
    border-radius: 999px;
    background: var(--brand-red);
    box-shadow: 0 0 28px rgba(242,34,72,0.36);
}

.chb-kicker {
    display: block;
    font-family: 'Newsreader', var(--serif);
    font-size: clamp(20px, 1.8vw, 30px);
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: #171717;
}

.chb-card--copy p {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.45;
    color: rgba(26,26,26,0.70);
    font-weight: 500;
    text-transform: none;
}

.chb-bubbles {
    grid-column: 1 / -1;
    justify-self: end;
    position: relative;
    min-height: 158px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    isolation: isolate;
    max-width: min(760px, 72vw);
}

.chb-bubbles::before {
    content: '';
    position: absolute;
    inset: 10px 6px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle at 72% 34%, rgba(242,34,72,0.18), transparent 48%);
    filter: blur(18px);
}

.chb-bubble {
    --manifesto-rise: 0;
    --bubble-rotate: -2deg;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 11px 18px 10px;
    border-radius: 999px;
    border: 1px solid rgba(26,26,26,0.13);
    background: rgba(255,255,255,0.34);
    box-shadow: 0 16px 34px rgba(26,26,26,0.10), inset 0 1px 0 rgba(255,255,255,0.72);
    color: rgba(23,23,23,0.88);
    font-family: var(--display);
    font-size: clamp(13px, 1.08vw, 18px);
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: uppercase;
    opacity: var(--manifesto-rise);
    transform:
        translate3d(0, calc((1 - var(--manifesto-rise)) * 74px), 0)
        rotate(var(--bubble-rotate))
        scale(calc(0.82 + (var(--manifesto-rise) * 0.18)));
    animation: none;
    animation-delay: var(--bubble-delay, 0s);
    white-space: nowrap;
    will-change: opacity, transform;
}

.chb-bubble:nth-child(2) {
    --bubble-rotate: 2deg;
    --bubble-delay: -1.3s;
    margin-top: 28px;
}

.chb-bubble:nth-child(3) {
    --bubble-rotate: -4deg;
    --bubble-delay: -2.1s;
}

.chb-bubble:nth-child(4) {
    --bubble-rotate: 3deg;
    --bubble-delay: -3.2s;
    margin-top: -24px;
}

.chb-bubble:nth-child(5) {
    --bubble-rotate: -1deg;
    --bubble-delay: -4.2s;
}

.chb-bubble--red {
    background: var(--brand-red);
    border-color: rgba(242,34,72,0.48);
    color: #f2efe7;
    box-shadow: 0 20px 44px rgba(242,34,72,0.24), inset 0 1px 0 rgba(255,255,255,0.26);
}

.chb-bubble--dark {
    background: #171717;
    border-color: rgba(23,23,23,0.35);
    color: #f2efe7;
}

@keyframes manifestoBubbleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--bubble-rotate));
    }
    50% {
        transform: translate3d(0, -7px, 0) rotate(var(--bubble-rotate));
    }
}

@media (max-width: 900px) {
    .crafting-headline {
        width: calc(100vw - 40px);
        font-size: 64px;
        line-height: 0.85;
        padding: 30px 0 146px;
        text-align: left;
    }

    .crafting-hover-bar {
        min-height: 244px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .chb-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
        padding: 26px 28px;
        max-width: min(620px, 100vw);
    }

    .chb-card--kicker,
    .chb-card--copy,
    .chb-bubbles {
        grid-column: 1;
    }

    .chb-card--kicker {
        justify-self: start;
        min-width: 0;
        max-width: calc(100vw - 72px);
        padding: 14px 18px 13px;
    }

    .chb-card--copy {
        justify-self: end;
        max-width: min(520px, calc(100vw - 92px));
        padding: 16px 18px 16px 22px;
    }

    .chb-kicker {
        font-size: clamp(18px, 5vw, 25px);
    }

    .chb-card--copy p {
        font-size: 12px;
        line-height: 1.42;
    }

    .chb-bubbles {
        justify-self: start;
        max-width: calc(100vw - 72px);
        min-height: 86px;
        justify-content: flex-start;
        gap: 9px;
    }

    .chb-bubble {
        min-height: 34px;
        padding: 9px 13px 8px;
        font-size: 12px;
    }

    .chb-bubble:nth-child(2),
    .chb-bubble:nth-child(4) {
        margin-top: 0;
    }

    .trail-card {
        width: 132px;
        height: 172px;
    }

    .snake-scroll-transition {
        width: clamp(132px, 30vw, 220px);
    }
}

@media (max-width: 520px) {
    .crafting-headline {
        font-size: 46px;
    }
}

/* =========================================================
   KOBY-INSPIRED PORTFOLIO BRIDGE
========================================================= */
.ko-bridge-section {
    --ko-progress: 0;
    --ko-line-1: 0;
    --ko-line-2: 0;
    --ko-line-3: 0;
    --ko-copy-out: 0;
    --ko-preview: 0;
    --ko-wipe: 0;
    --ko-dark: 0;
    --ko-gallery: 0;
    position: relative;
    z-index: 11;
    height: 360vh;
    background: #f4f2eb;
    color: #161616;
}

.ko-bridge-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #f4f2eb;
}

.ko-light-scene,
.ko-dark-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ko-light-scene {
    z-index: 1;
    background: #f4f2eb;
    opacity: calc(1 - (var(--ko-wipe) * 0.18));
}

.ko-reference-forms {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: min(58vw, 860px);
    overflow: hidden;
    pointer-events: none;
    opacity: calc(0.72 + (var(--ko-line-1) * 0.28) - (var(--ko-wipe) * 0.52));
    transform:
        translate3d(calc((1 - var(--ko-line-1)) * -42px), 0, 0)
        scale(calc(1.02 + (var(--ko-preview) * 0.07)));
}

.ko-reference-forms::after {
    content: '';
    position: absolute;
    inset: 0;
    display: none;
    background: none;
}

.ko-side-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 44% center;
    filter: saturate(1.12) contrast(1.08) brightness(0.96);
}

.ko-light-scene::before,
.ko-light-scene::after {
    content: '';
    position: absolute;
    z-index: 3;
    display: none;
    background: #171717;
    pointer-events: none;
    transform-origin: center;
}

.ko-light-scene::before {
    width: min(230px, 16vw);
    height: min(52px, 3.8vw);
    left: 40vw;
    top: 64vh;
    transform:
        translate3d(calc(var(--ko-progress) * -4vw), calc(var(--ko-progress) * -7vh), 0)
        rotate(calc(-14deg + (var(--ko-progress) * 18deg)));
}

.ko-light-scene::after {
    width: min(210px, 15vw);
    height: min(56px, 4vw);
    left: 24vw;
    top: 66vh;
    transform:
        translate3d(calc(var(--ko-progress) * 3vw), calc(var(--ko-progress) * -5vh), 0)
        rotate(calc(-42deg + (var(--ko-progress) * -18deg)));
}

.ko-snake-symbol {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(190px, 16vw, 270px);
    height: auto;
    margin: 0 0 10px;
    pointer-events: none;
    opacity: calc(1 - (var(--ko-wipe) * 0.72));
    transform:
        translate3d(0, calc(-42px + ((1 - var(--ko-line-1)) * 20px)), 0)
        rotate(calc(-12deg + (var(--ko-progress) * 360deg)))
        scale(calc(0.72 + (var(--ko-line-1) * 0.24) + (var(--ko-preview) * 0.24)));
    transform-origin: 52% 56%;
    filter: drop-shadow(0 10px 24px rgba(247, 25, 75, 0.30));
    mix-blend-mode: normal;
}

.ko-bridge-copy {
    position: absolute;
    z-index: 4;
    top: 21vh;
    right: clamp(42px, 8vw, 150px);
    width: min(720px, 47vw);
    transform: translateY(calc((var(--ko-progress) * -40px) - (var(--ko-copy-out) * 24px)));
    opacity: calc(1 - var(--ko-copy-out));
}

.ko-bridge-kicker {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(20,20,20,0.44);
}

.ko-bridge-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(34px, 3.4vw, 58px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ko-word {
    display: inline-block;
    opacity: 0.14;
    color: rgba(18,18,18,0.16);
    transform: translateY(12px);
    transition:
        opacity 0.22s ease,
        color 0.22s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.ko-title-line {
    display: block;
    color: rgba(18,18,18,0.12);
    transform: translateY(12px);
    transition: color 0.12s linear;
}

.ko-title-line--1 {
    color: rgba(18,18,18, calc(0.12 + (var(--ko-line-1) * 0.88)));
    transform: translateY(calc((1 - var(--ko-line-1)) * 12px));
}

.ko-title-line--2 {
    color: rgba(18,18,18, calc(0.12 + (var(--ko-line-2) * 0.88)));
    transform: translateY(calc((1 - var(--ko-line-2)) * 12px));
}

.ko-title-line--3 {
    color: rgba(18,18,18, calc(0.12 + (var(--ko-line-3) * 0.88)));
    transform: translateY(calc((1 - var(--ko-line-3)) * 12px));
}

.ko-preview-stack {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 52vw;
    height: 52vh;
    overflow: hidden;
    opacity: var(--ko-preview);
    transform: translateY(calc((1 - var(--ko-preview)) * 46vh));
    box-shadow: -24px -24px 80px rgba(20,20,20,0.08);
}

.ko-preview-panel {
    position: absolute;
    overflow: hidden;
    background: #ddd8cc;
}

.ko-preview-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.03);
}

.ko-preview-panel--main {
    inset: 0;
}

.ko-preview-panel--side {
    right: -14%;
    top: 10%;
    width: 44%;
    height: 78%;
    transform: rotate(2deg);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 28px 70px rgba(0,0,0,0.18);
}

.ko-dark-wipe {
    position: absolute;
    z-index: 4;
    left: -18vw;
    top: -18vh;
    width: 136vw;
    height: 136vh;
    background: #f7194b;
    opacity: clamp(0, calc(var(--ko-wipe) * 3), 1);
    pointer-events: none;
    transform-origin: center;
    transform:
        translate3d(
            calc((1 - var(--ko-wipe)) * 116vw),
            calc((1 - var(--ko-wipe)) * 42vh),
            0
        )
        rotate(-8deg)
        scale(1.08);
}

.ko-dark-scene {
    z-index: 5;
    color: #f4f2eb;
    opacity: var(--ko-dark);
    pointer-events: none;
}

.ko-dark-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #171717;
    opacity: var(--ko-dark);
}

.ko-dark-copy {
    position: absolute;
    z-index: 3;
    left: clamp(24px, 5vw, 78px);
    top: 15vh;
    width: min(560px, 42vw);
    transform: translateY(calc((1 - var(--ko-dark)) * 48px));
    opacity: calc(1 - (var(--ko-gallery) * 0.42));
}

.ko-dark-copy p {
    margin: 0 0 18px;
    color: #f7194b;
    font-size: 13px;
    font-weight: 800;
}

.ko-dark-copy h3 {
    margin: 0;
    font-size: clamp(32px, 4.1vw, 66px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.ko-dark-wordmark {
    position: absolute;
    z-index: 1;
    right: -6vw;
    top: 4vh;
    color: rgba(244,242,235,0.05);
    font-size: clamp(120px, 18vw, 300px);
    line-height: 0.8;
    font-weight: 900;
    letter-spacing: -0.08em;
    writing-mode: vertical-rl;
}

.ko-portfolio-stage {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: var(--ko-gallery);
    transform: translateY(calc((1 - var(--ko-gallery)) * 150px));
}

.ko-project-card {
    position: absolute;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(242,239,231,0.18);
    background: #080808;
    box-shadow: 0 36px 90px rgba(0,0,0,0.38);
    transform:
        translate3d(
            calc(var(--card-x, 0px) + ((1 - var(--ko-gallery)) * var(--from-x, 0px))),
            calc(var(--card-y, 0px) + ((1 - var(--ko-gallery)) * var(--from-y, 0px))),
            0
        )
        rotate(calc(var(--card-rotate, 0deg) + ((1 - var(--ko-gallery)) * var(--from-rotate, 0deg))))
        scale(calc(0.82 + (var(--ko-gallery) * 0.18)));
    transition: box-shadow 0.3s ease;
}

.ko-project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.02);
}

.ko-project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.56));
}

.ko-card-meta {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
}

.ko-card-meta span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 5px;
    background: rgba(242,239,231,0.18);
    color: rgba(255,255,255,0.82);
    font-size: 12px;
}

.ko-card-meta strong {
    display: block;
    max-width: 340px;
    color: #fff;
    font-size: 22px;
    line-height: 1.08;
    font-weight: 700;
}

.ko-project-card--wide {
    --card-x: 7vw;
    --card-y: 48vh;
    --from-x: -34vw;
    --from-y: 26vh;
    --card-rotate: -2deg;
    --from-rotate: -8deg;
    width: min(620px, 47vw);
    height: 330px;
}

.ko-project-card--tall {
    --card-x: 60vw;
    --card-y: 14vh;
    --from-x: 36vw;
    --from-y: 24vh;
    --card-rotate: 3deg;
    --from-rotate: 10deg;
    width: min(340px, 27vw);
    height: 520px;
}

.ko-project-card:not(.ko-project-card--wide):not(.ko-project-card--tall) {
    --card-x: 36vw;
    --card-y: 39vh;
    --from-x: 0vw;
    --from-y: 45vh;
    --card-rotate: -4deg;
    --from-rotate: 12deg;
    width: min(470px, 36vw);
    height: 285px;
}

.ko-work-intro {
    top: clamp(52px, 8vh, 92px);
    left: clamp(20px, 4vw, 64px);
    width: min(440px, 38vw);
    transform: translateY(calc((1 - var(--ko-dark)) * 42px));
    opacity: calc(var(--ko-dark) * (1 - (var(--ko-gallery) * 0.10)));
    pointer-events: auto;
}

.ko-work-intro p {
    margin: 0 0 20px;
    color: var(--brand-red);
    font-family: 'Newsreader', var(--serif);
    font-size: clamp(38px, 4vw, 68px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: none;
}

.ko-work-intro h3 {
    margin: 0;
    max-width: 380px;
    color: rgba(244,242,235,0.58);
    font-family: var(--sans);
    font-size: clamp(17px, 1.28vw, 22px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
}

.ko-work-intro-row {
    display: grid;
    gap: 22px;
    margin-top: 2px;
    color: rgba(244,242,235,0.54);
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.48;
}

.ko-work-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(244,242,235,0.24);
    color: #f4f2eb;
    background: rgba(244,242,235,0.06);
    overflow: hidden;
    pointer-events: auto;
    transition: color 0.28s ease, border-color 0.28s ease, transform 0.28s var(--ease);
}

.ko-work-all::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-red);
    transform: translateY(104%);
    transition: transform 0.35s var(--ease);
}

.ko-work-all span {
    position: relative;
    z-index: 1;
}

.ko-work-all:hover {
    color: #fff;
    border-color: rgba(242,34,72,0.78);
    transform: translateY(-2px);
}

.ko-work-all:hover::before {
    transform: translateY(0);
}

.ko-work-stage {
    inset: clamp(168px, 20vh, 220px) clamp(20px, 4vw, 64px) 48px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 0.85fr;
    grid-auto-rows: minmax(230px, 30vh);
    gap: clamp(14px, 1.4vw, 22px);
    pointer-events: none;
    transform: translateY(calc((1 - var(--ko-gallery)) * 120px));
}

.ko-work-card {
    --hover-y: 0px;
    position: relative;
    min-height: 230px;
    border-radius: 8px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(244,242,235,0.12);
    box-shadow: 0 34px 90px rgba(0,0,0,0.38);
    opacity: var(--ko-gallery);
    transform:
        translate3d(0, calc(((1 - var(--ko-gallery)) * var(--reveal-y, 90px)) + var(--hover-y)), 0)
        rotate(var(--work-rotate, 0deg));
    transition:
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        transform 0.32s var(--ease);
    pointer-events: auto;
}

.ko-work-card:nth-child(2) {
    --reveal-y: 124px;
    --work-rotate: 1.2deg;
}

.ko-work-card:nth-child(3) {
    --reveal-y: 156px;
    --work-rotate: -1deg;
}

.ko-work-card:nth-child(4) {
    --reveal-y: 188px;
}

.ko-work-card--large {
    grid-row: span 2;
}

.ko-work-card--wide {
    grid-column: span 2;
}

.ko-work-card-link,
.ko-work-media,
.ko-work-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.ko-work-card-link {
    position: relative;
    color: inherit;
    text-decoration: none;
}

.ko-work-card-link:focus {
    outline: none;
}

.ko-work-card-link:focus-visible {
    outline: 1px solid rgba(242,239,231,0.58);
    outline-offset: 3px;
}

.ko-work-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #111;
}

.ko-work-media img {
    object-fit: cover;
    filter: saturate(1.02) contrast(1.06) brightness(0.84);
    transform: scale(1.02);
    transition: transform 0.75s var(--ease), filter 0.5s ease;
}

.ko-work-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.02) 18%, rgba(0,0,0,0.74) 100%),
        radial-gradient(circle at 28% 28%, rgba(242,34,72,0.20), transparent 42%);
    opacity: 0.90;
    transition: opacity 0.35s ease;
}

.ko-work-index {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    color: rgba(244,242,235,0.72);
    font-family: var(--display);
    font-size: 20px;
    line-height: 1;
    transition: color 0.28s ease, transform 0.28s var(--ease);
}

.ko-work-meta {
    position: absolute;
    z-index: 3;
    left: 18px;
    right: 18px;
    bottom: 18px;
}

.ko-work-meta p {
    margin: 0 0 8px;
    color: rgba(244,242,235,0.62);
    font-size: 12px;
    line-height: 1;
}

.ko-work-meta h4 {
    margin: 0;
    max-width: 420px;
    color: #fff;
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.ko-work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.ko-work-tags span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(244,242,235,0.10);
    border: 1px solid rgba(244,242,235,0.12);
    color: rgba(244,242,235,0.74);
    font-size: 11px;
    line-height: 1;
    transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

.ko-work-hover {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.94);
    transition: opacity 0.28s ease, transform 0.28s var(--ease);
}

.ko-work-card:hover,
.ko-work-card.is-hovered {
    --hover-y: -12px;
    border-color: rgba(242,34,72,0.50);
    box-shadow: 0 44px 110px rgba(0,0,0,0.50);
}

.ko-work-card:hover .ko-work-media img,
.ko-work-card.is-hovered .ko-work-media img {
    transform: scale(1.10);
    filter: saturate(1.14) contrast(1.08) brightness(0.70);
}

.ko-work-card:hover .ko-work-card-link::after,
.ko-work-card.is-hovered .ko-work-card-link::after {
    opacity: 0.76;
}

.ko-work-card:hover .ko-work-index,
.ko-work-card.is-hovered .ko-work-index {
    color: var(--brand-red);
    transform: translateX(4px);
}

.ko-work-card:hover .ko-work-tags span,
.ko-work-card.is-hovered .ko-work-tags span {
    background: rgba(242,34,72,0.18);
    border-color: rgba(242,34,72,0.30);
    color: #fff;
}

.ko-work-card:hover .ko-work-hover,
.ko-work-card.is-hovered .ko-work-hover {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.snake-signature-section {
    --snake-signature-progress: 0;
    --snake-signature-reveal: 0;
    --snake-signature-photos: 0;
    --snake-signature-copy: 0;
    position: relative;
    z-index: 8;
    min-height: 186svh;
    margin-top: -1px;
    background: #050505;
    color: #f4f2eb;
    overflow: clip;
    isolation: isolate;
}

.snake-signature-section::before {
    content: '';
    position: absolute;
    left: clamp(18px, 4vw, 68px);
    right: clamp(18px, 4vw, 68px);
    top: 0;
    height: 1px;
    z-index: 0;
    background: rgba(244,242,235,0.18);
    clip-path: none;
    pointer-events: none;
}

.snake-signature-sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    overflow: hidden;
    display: grid;
    align-items: end;
    padding: clamp(92px, 10vw, 150px) clamp(18px, 4vw, 68px) clamp(28px, 4vw, 52px);
    background: #050505;
    isolation: isolate;
}

.snake-signature-sticky::before {
    content: '';
    position: absolute;
    left: clamp(18px, 4vw, 68px);
    right: clamp(18px, 4vw, 68px);
    top: clamp(76px, 10svh, 124px);
    z-index: 0;
    height: 1px;
    background: #f7194b;
    opacity: 0.76;
    clip-path: none;
    pointer-events: none;
}

.snake-signature-sticky::after {
    content: 'VYSCERAL SIGNATURE';
    position: absolute;
    left: clamp(18px, 4vw, 68px);
    top: clamp(42px, 6svh, 74px);
    z-index: 0;
    color: rgba(244,242,235,0.48);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.34em;
    white-space: nowrap;
    text-transform: uppercase;
    transform: none;
    pointer-events: none;
}

.snake-signature-figure {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 1;
    width: min(1460px, 96vw);
    aspect-ratio: 1875.48 / 1329.12;
    transform:
        translate3d(-50%, -50%, 0)
        rotate(calc((1 - var(--snake-signature-reveal)) * -4deg))
        scale(calc(0.70 + (var(--snake-signature-reveal) * 0.30)));
    opacity: calc(0.12 + (var(--snake-signature-reveal) * 0.88));
    filter: drop-shadow(0 48px 110px rgba(247,25,75,0.24));
    will-change: transform, opacity;
}

.snake-signature-mask,
.snake-signature-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.snake-signature-mask {
    display: grid;
    grid-template-columns: 0.95fr 0.9fr 1.05fr 0.95fr;
    background: #f7194b;
    -webkit-mask: url("assets/brand/cobrainteira.svg") center / contain no-repeat;
    mask: url("assets/brand/cobrainteira.svg") center / contain no-repeat;
}

.snake-signature-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(247,25,75,0.38), transparent 28%, rgba(247,25,75,0.28) 70%, rgba(0,0,0,0.34)),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.20));
    mix-blend-mode: screen;
    opacity: calc(0.72 - (var(--snake-signature-photos) * 0.28));
    pointer-events: none;
}

.snake-signature-tile {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    opacity: calc(0.16 + (var(--snake-signature-photos) * 0.88));
    filter:
        grayscale(calc(0.96 - (var(--snake-signature-photos) * 0.42)))
        saturate(calc(0.72 + (var(--snake-signature-photos) * 0.58)))
        contrast(1.12)
        brightness(calc(0.56 + (var(--snake-signature-photos) * 0.28)));
    transform:
        translate3d(0, calc((1 - var(--snake-signature-photos)) * 36px), 0)
        scale(calc(1.18 - (var(--snake-signature-photos) * 0.08)));
    transition: filter 0.5s ease;
    will-change: transform, opacity, filter;
}

.snake-signature-tile:nth-child(2),
.snake-signature-tile:nth-child(4) {
    transform:
        translate3d(0, calc((1 - var(--snake-signature-photos)) * -32px), 0)
        scale(calc(1.18 - (var(--snake-signature-photos) * 0.08)));
}

.snake-signature-line {
    z-index: 2;
    object-fit: contain;
    opacity: calc(0.46 - (var(--snake-signature-photos) * 0.30));
    mix-blend-mode: screen;
    filter: saturate(1.4) brightness(1.05);
    pointer-events: none;
}

.snake-signature-copy {
    position: relative;
    z-index: 3;
    width: min(940px, 92vw);
    opacity: var(--snake-signature-copy);
    transform: translate3d(0, calc((1 - var(--snake-signature-copy)) * 34px), 0);
    will-change: opacity, transform;
}

.snake-signature-copy p {
    margin: 0 0 18px;
    color: rgba(244,242,235,0.58);
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.snake-signature-copy h2 {
    margin: 0;
    max-width: 920px;
    color: #f4f2eb;
    font-family: var(--serif);
    font-size: clamp(42px, 7.6vw, 118px);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: 0;
}

.snake-signature-footer {
    position: absolute;
    z-index: 4;
    left: clamp(18px, 4vw, 68px);
    right: clamp(18px, 4vw, 68px);
    bottom: clamp(18px, 2.6vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: rgba(244,242,235,0.58);
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: calc(0.28 + (var(--snake-signature-copy) * 0.72));
}

.snake-signature-footer span:first-child {
    color: #f4f2eb;
    font-weight: 700;
}

.snake-signature-footer sup {
    font-size: 0.58em;
}

.vys-studio-section {
    position: relative;
    z-index: 12;
    background: #050505;
    color: #f4f2eb;
    padding: clamp(96px, 12vw, 180px) clamp(18px, 4vw, 64px);
    border-top: 1px solid rgba(244, 242, 235, 0.08);
}

.vys-studio-shell {
    width: min(100%, 1480px);
    margin: 0 auto;
}

.vys-studio-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.5fr);
    gap: clamp(28px, 6vw, 120px);
    align-items: end;
    margin-bottom: clamp(54px, 8vw, 110px);
}

.vys-studio-heading p {
    max-width: 280px;
    color: rgba(244, 242, 235, 0.52);
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.55;
}

.vys-studio-heading h2 {
    font-family: 'Playfair Display', var(--serif);
    font-size: clamp(52px, 8.8vw, 154px);
    font-style: italic;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0;
    color: #f4f2eb;
    text-wrap: balance;
}

.vys-studio-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(244, 242, 235, 0.09);
    border: 1px solid rgba(244, 242, 235, 0.09);
}

.vys-studio-panel {
    min-height: clamp(300px, 30vw, 460px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 58px);
    background: #0d0d0d;
}

.vys-studio-index {
    color: var(--brand-red);
    font-family: 'Playfair Display', var(--serif);
    font-size: clamp(22px, 2vw, 34px);
    font-style: italic;
}

.vys-studio-panel h3 {
    margin-top: auto;
    font-family: var(--display);
    font-size: clamp(34px, 5.4vw, 92px);
    line-height: 0.84;
    color: #f4f2eb;
    text-transform: uppercase;
}

.vys-studio-panel p {
    max-width: 520px;
    margin-top: clamp(24px, 3vw, 42px);
    color: rgba(244, 242, 235, 0.62);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.58;
}

.vys-footer {
    position: relative;
    z-index: 12;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #000;
    color: #f4f2eb;
    padding: clamp(6px, 1vw, 12px);
    overflow: hidden;
}

.vys-footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(4px, 0.6vw, 8px);
}

.vys-footer-card {
    min-height: clamp(96px, 10vw, 142px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #101010;
    color: #f4f2eb;
    overflow: hidden;
}

.vys-footer-card--manifesto {
    background: #efeee8;
    color: #0b0b0b;
    padding: 24px;
    text-align: center;
}

.vys-footer-card--manifesto p {
    max-width: 420px;
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.35;
}

.vys-footer-card--mark img {
    width: clamp(28px, 4vw, 54px);
    height: auto;
    filter: drop-shadow(0 0 22px rgba(247, 25, 75, 0.28));
}

.vys-footer-card--cta {
    gap: 10px;
    font-size: clamp(13px, 1vw, 16px);
    transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}

.vys-footer-card--cta:hover {
    background: #151515;
}

.vys-footer-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    transform: rotate(45deg);
    background: var(--brand-red);
    box-shadow: 0 0 16px rgba(247, 25, 75, 0.68);
}

.vys-footer-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.46fr);
    gap: clamp(40px, 8vw, 140px);
    align-items: end;
    padding: clamp(120px, 22vh, 260px) clamp(18px, 2.8vw, 44px) clamp(44px, 7vw, 90px);
}

.vys-footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vys-footer-nav a {
    font-family: 'Playfair Display', var(--serif);
    font-size: clamp(64px, 8vw, 142px);
    font-style: normal;
    font-weight: 400;
    line-height: 0.9;
    color: #f4f2eb;
    transition: color 0.35s ease, transform 0.35s var(--ease);
}

.vys-footer-nav a:hover {
    color: var(--brand-red);
    transform: translateX(10px);
}

.vys-footer-contact {
    display: grid;
    gap: clamp(44px, 6vw, 78px);
    color: rgba(244, 242, 235, 0.72);
    font-size: clamp(14px, 1vw, 16px);
}

.vys-footer-contact-group,
.vys-footer-socials {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vys-footer-contact a,
.vys-footer-socials p {
    color: inherit;
}

.vys-footer-contact a::before {
    content: '';
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-right: 12px;
    transform: translateY(-1px) rotate(45deg);
    background: var(--brand-red);
}

.vys-footer-contact a:hover {
    color: #fff;
}

.vys-footer-socials p {
    margin-bottom: 10px;
    color: #f4f2eb;
}

.vys-footer-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 clamp(18px, 2.8vw, 44px) clamp(18px, 2vw, 28px);
}

.vys-footer-bottom h2 {
    font-family: var(--display);
    font-size: clamp(62px, 16vw, 320px);
    line-height: 0.72;
    color: #f4f2eb;
    text-transform: uppercase;
    letter-spacing: 0;
}

.vys-footer-bottom sup {
    font-size: 0.12em;
    vertical-align: super;
}

.vys-footer-meta {
    display: flex;
    gap: 16px;
    color: rgba(244, 242, 235, 0.58);
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .vys-studio-section {
        padding: 92px 18px;
    }

    .vys-studio-heading {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 44px;
    }

    .vys-studio-heading p {
        max-width: 340px;
    }

    .vys-studio-heading h2 {
        font-size: clamp(48px, 14vw, 82px);
    }

    .vys-studio-panels {
        grid-template-columns: 1fr;
    }

    .vys-studio-panel {
        min-height: 320px;
        padding: 28px;
    }

    .vys-footer {
        min-height: auto;
    }

    .vys-footer-top {
        grid-template-columns: 1fr;
    }

    .vys-footer-card {
        min-height: 116px;
    }

    .vys-footer-main {
        grid-template-columns: 1fr;
        gap: 58px;
        padding: 96px 18px 64px;
    }

    .vys-footer-nav a {
        font-size: clamp(58px, 18vw, 96px);
    }

    .vys-footer-contact {
        gap: 38px;
    }

    .vys-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 18px 24px;
    }

    .vys-footer-bottom h2 {
        font-size: clamp(56px, 18vw, 92px);
        line-height: 0.82;
    }

    .vys-footer-meta {
        width: 100%;
        justify-content: space-between;
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .ko-bridge-section {
        height: 340vh;
    }

    .ko-light-scene::before {
        width: 118px;
        height: 34px;
        left: 50vw;
        top: 63vh;
    }

    .ko-light-scene::after {
        width: 128px;
        height: 38px;
        left: 25vw;
        top: 68vh;
    }

    .ko-reference-forms {
        width: 100vw;
        opacity: calc(0.74 + (var(--ko-line-1) * 0.26) - (var(--ko-wipe) * 0.42));
        transform:
            translate3d(0, 0, 0)
            scale(calc(1.04 + (var(--ko-preview) * 0.05)));
    }

    .ko-side-video {
        object-position: 50% center;
        filter: saturate(1.16) contrast(1.08) brightness(1);
    }

    .ko-reference-forms::after {
        display: none;
        background: none;
    }

    .ko-snake-symbol {
        width: 172px;
        margin-bottom: 8px;
        opacity: calc(1 - (var(--ko-wipe) * 0.72));
        transform:
            translate3d(0, calc(-34px + ((1 - var(--ko-line-1)) * 18px)), 0)
            rotate(calc(-12deg + (var(--ko-progress) * 360deg)))
            scale(calc(0.76 + (var(--ko-line-1) * 0.22) + (var(--ko-preview) * 0.18)));
    }

    .ko-bridge-copy {
        top: 13vh;
        right: 20px;
        width: min(410px, 66vw);
    }

    .ko-bridge-title {
        font-size: clamp(30px, 7vw, 44px);
        line-height: 1.16;
    }

    .ko-preview-stack {
        width: 70vw;
        height: 34vh;
        right: 0;
    }

    .ko-dark-wipe {
        left: -44vw;
        top: -16vh;
        width: 168vw;
        height: 134vh;
        transform:
            translate3d(
                calc((1 - var(--ko-wipe)) * 128vw),
                calc((1 - var(--ko-wipe)) * 44vh),
                0
            )
            rotate(-8deg)
            scale(1.12);
    }

    .ko-dark-copy {
        left: 20px;
        top: 12vh;
        width: calc(100vw - 40px);
    }

    .ko-dark-copy h3 {
        max-width: 460px;
        font-size: 36px;
    }

    .ko-dark-wordmark {
        right: -12vw;
        top: 20vh;
        font-size: 128px;
    }

    .ko-project-card--wide {
        --card-x: 8vw;
        --card-y: 48vh;
        --from-x: -40vw;
        --from-y: 30vh;
        width: 78vw;
        height: 230px;
    }

    .ko-project-card--tall {
        --card-x: 47vw;
        --card-y: 27vh;
        --from-x: 46vw;
        --from-y: 26vh;
        width: 42vw;
        height: 290px;
    }

    .ko-project-card:not(.ko-project-card--wide):not(.ko-project-card--tall) {
        --card-x: 10vw;
        --card-y: 67vh;
        --from-y: 42vh;
        width: 68vw;
        height: 190px;
    }

    .ko-card-meta {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .ko-card-meta strong {
        font-size: 17px;
    }

    .ko-card-meta span {
        font-size: 10px;
    }

    .ko-work-intro {
        top: 10vh;
        left: 20px;
        width: calc(100vw - 40px);
    }

    .ko-work-intro p {
        font-size: 40px;
    }

    .ko-work-intro h3 {
        max-width: 420px;
        font-size: 18px;
    }

    .ko-work-intro-row {
        max-width: 520px;
        gap: 16px;
    }

    .ko-work-stage {
        inset: 42vh 20px 34px;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(180px, 22vh);
        gap: 12px;
        overflow: visible;
    }

    .ko-work-card--large {
        grid-row: span 1;
    }

    .ko-work-card--wide {
        grid-column: span 1;
    }

    .ko-work-card {
        min-height: 178px;
    }

    .ko-work-index {
        top: 12px;
        left: 12px;
        font-size: 16px;
    }

    .ko-work-meta {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .ko-work-meta h4 {
        font-size: 20px;
    }

    .ko-work-tags {
        gap: 5px;
        margin-top: 10px;
    }

    .ko-work-tags span {
        min-height: 22px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .ko-work-hover {
        top: 12px;
        right: 12px;
        min-height: 30px;
        padding: 7px 10px;
        font-size: 10px;
    }
}

@media (max-width: 520px) {
    .ko-work-intro {
        top: 9vh;
        left: 16px;
        width: calc(100vw - 32px);
    }

    .ko-work-intro p {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .ko-work-intro h3,
    .ko-work-intro-row {
        font-size: 15px;
        line-height: 1.38;
    }

    .ko-work-stage {
        inset: 45vh 14px 24px;
        grid-auto-rows: 145px;
        gap: 10px;
    }

    .ko-work-card {
        min-height: 145px;
    }

    .ko-work-meta h4 {
        font-size: 16px;
        letter-spacing: -0.02em;
    }

    .ko-work-meta p {
        font-size: 10px;
    }

    .ko-work-tags {
        margin-top: 8px;
    }

    .ko-work-tags span {
        min-height: 19px;
        padding: 4px 6px;
        font-size: 8px;
    }
}

/* Estrela-inspired Featured Work rail */
.ko-dark-scene {
    color: #171717;
}

.ko-dark-scene::before {
    background: #f2efe7;
    opacity: var(--ko-dark);
}

.ko-dark-wordmark {
    display: none;
}

.ko-work-stage {
    --work-smooth: cubic-bezier(0.19, 1, 0.22, 1);
    inset: clamp(124px, 16vh, 154px) 0 auto 0;
    width: 100vw;
    height: min(62vh, 520px);
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    align-items: flex-start;
    gap: 12px;
    padding: 0 14px;
    overflow: visible;
    opacity: var(--ko-gallery);
    pointer-events: auto;
    transform: translateY(calc((1 - var(--ko-gallery)) * 54px));
    transition: gap 1.55s var(--work-smooth);
}

.ko-work-intro {
    --work-cursor-x: 50%;
    --work-cursor-y: 50%;
    --work-spot-x: 50%;
    --work-spot-y: 82%;
    position: relative;
    inset: auto;
    flex: 0 0 clamp(420px, 32vw, 515px);
    width: auto;
    height: 100%;
    padding: clamp(30px, 3vw, 42px);
    display: flex;
    flex-direction: column;
    background: #000;
    color: #f2efe7;
    overflow: hidden;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
        flex-basis 1.62s var(--work-smooth),
        padding 1.46s var(--work-smooth),
        transform 1.08s var(--work-smooth),
        opacity 0.3s ease;
}

.ko-work-intro::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: var(--work-spot-x);
    top: var(--work-spot-y);
    width: clamp(120px, 15vw, 230px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(242,34,72,0.44) 0 18%, rgba(242,34,72,0.23) 38%, transparent 70%);
    filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition:
        opacity 0.72s ease,
        transform 1.05s var(--work-smooth);
}

.ko-work-intro.is-cta-tracking::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ko-work-intro > * {
    position: relative;
    z-index: 1;
}

.ko-work-intro p {
    margin: 0 0 24px;
    color: #f2efe7;
    font-family: 'Newsreader', var(--serif);
    font-size: clamp(40px, 3.4vw, 58px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: none;
    transition:
        margin 1.12s var(--work-smooth),
        font-size 1.16s var(--work-smooth),
        opacity 0.5s ease,
        transform 1s var(--work-smooth);
}

.ko-work-intro h3,
.ko-work-description {
    display: block;
    max-height: 140px;
    max-width: 320px;
    overflow: hidden;
    color: rgba(242,239,231,0.52);
    font-family: var(--sans);
    font-size: clamp(16px, 1.12vw, 20px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    transition:
        max-height 1.04s var(--work-smooth),
        margin 1.04s var(--work-smooth),
        opacity 0.58s ease,
        transform 1s var(--work-smooth);
}

.ko-work-intro h3 {
    margin: 0;
}

.ko-work-description {
    margin-top: 2px;
}

.ko-work-intro-row {
    position: relative;
    margin-top: auto;
    min-height: min(230px, 28vh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1a1a1a;
    color: #f2efe7;
    transition:
        min-height 1.2s var(--work-smooth),
        margin 1.08s var(--work-smooth),
        background 0.74s ease;
}

.ko-work-intro-row::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at var(--work-cursor-x) var(--work-cursor-y), rgba(247,25,75,0.34), transparent 30%),
        radial-gradient(circle at calc(var(--work-cursor-x) + 34px) calc(var(--work-cursor-y) - 24px), rgba(247,25,75,0.22), transparent 28%),
        linear-gradient(135deg, #f7194b 0%, #f7194b 58%, #d91243 100%);
    -webkit-clip-path: circle(0 at var(--work-cursor-x) var(--work-cursor-y));
    clip-path: circle(0 at var(--work-cursor-x) var(--work-cursor-y));
    filter: saturate(0.92);
    opacity: 0;
    transform: scale(1.02);
    transform-origin: var(--work-cursor-x) var(--work-cursor-y);
    transition:
        background 1.05s var(--work-smooth),
        -webkit-clip-path 1.08s var(--work-smooth),
        clip-path 1.08s var(--work-smooth),
        filter 1.05s var(--work-smooth),
        opacity 0.82s ease,
        transform 1.2s var(--work-smooth);
    will-change: clip-path, opacity, transform, filter;
}

.ko-work-intro-row::after {
    content: none;
    position: absolute;
    z-index: 1;
    left: var(--work-cursor-x);
    top: var(--work-cursor-y);
    width: min(390px, 118%);
    aspect-ratio: 1.45;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.30), transparent 35%),
        linear-gradient(112deg, transparent 12%, rgba(255,255,255,0.20) 38%, rgba(255,255,255,0.05) 50%, transparent 68%);
    border-radius: 48% 52% 46% 54% / 54% 42% 58% 46%;
    filter: blur(9px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-7deg) scale(0.62);
    transition:
        opacity 0.72s ease,
        transform 1.15s var(--work-smooth),
        filter 1.05s var(--work-smooth);
    will-change: opacity, transform, filter;
}

.ko-work-intro.is-cta-tracking .ko-work-intro-row::before {
    opacity: 0.94;
    -webkit-clip-path: circle(150% at var(--work-cursor-x) var(--work-cursor-y));
    clip-path: circle(150% at var(--work-cursor-x) var(--work-cursor-y));
    filter: saturate(1.1);
    transform: scale(1);
}

.ko-work-intro.is-cta-tracking .ko-work-intro-row::after {
    opacity: 0;
    filter: blur(13px);
    transform: translate(-50%, -50%) rotate(4deg) scale(1.28);
}

.ko-work-all {
    position: absolute;
    left: var(--work-cursor-x);
    top: var(--work-cursor-y);
    z-index: 3;
    min-height: auto;
    min-width: max-content;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f2efe7;
    gap: 14px;
    font-size: 16px;
    font-weight: 400;
    box-shadow: none;
    transform: translate(-50%, -50%);
    transition:
        color 0.25s ease,
        transform 0.86s var(--work-smooth),
        padding 0.82s var(--work-smooth),
        width 0.82s var(--work-smooth),
        background-color 0.82s ease,
        border-radius 0.82s var(--work-smooth),
        box-shadow 0.82s ease;
}

.ko-work-intro.is-cta-tracking .ko-work-all {
    padding: 13px 20px;
    border-radius: 5px;
    background: #070707;
    box-shadow: 0 18px 45px rgba(0,0,0,0.24);
}

.ko-work-all::before {
    display: none;
}

.ko-work-all span:last-child {
    color: var(--accent);
    font-size: 9px;
    transform: translateY(1px);
}

.ko-work-all span:first-child {
    max-width: 190px;
    overflow: hidden;
    white-space: nowrap;
    transition:
        opacity 0.24s ease,
        max-width 0.38s var(--ease);
}

.ko-work-all:hover {
    border-color: transparent;
    color: #fff;
    transform: translate(-50%, -50%) scale(1.04);
}

.ko-work-card {
    --project-cursor-x: 50%;
    --project-cursor-y: 50%;
    --hover-y: 0px;
    --reveal-y: 70px;
    --work-rotate: 0deg;
    flex: 0 0 clamp(230px, 16.2vw, 260px);
    width: auto;
    min-height: 0;
    height: min(53vh, 436px);
    border: 0;
    border-radius: 2px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: translate3d(0, calc((1 - var(--ko-gallery)) * var(--reveal-y)), 0);
    transition:
        flex-basis 1.72s var(--work-smooth),
        height 1.72s var(--work-smooth),
        transform 1.12s var(--work-smooth),
        opacity 0.82s ease;
}

.ko-work-card:nth-child(n) {
    --work-rotate: 0deg;
}

.ko-work-card:nth-child(3) {
    --reveal-y: 94px;
}

.ko-work-card:nth-child(4) {
    --reveal-y: 118px;
}

.ko-work-card:nth-child(5) {
    --reveal-y: 142px;
}

.ko-work-card--large,
.ko-work-card--wide {
    grid-row: auto;
    grid-column: auto;
}

.ko-work-card-link {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: #111;
}

.ko-work-media img {
    filter: none;
    transform: scale(1.01);
    transition: transform 1.88s var(--work-smooth), filter 1.12s ease;
}

.ko-work-card-link::after {
    background: rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.96s ease;
}

.ko-work-index {
    top: -30px;
    left: 6px;
    color: #171717;
    font-family: 'Newsreader', var(--serif);
    font-size: 21px;
    font-style: italic;
    font-weight: 400;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.68s ease, transform 1.05s var(--work-smooth);
}

.ko-work-meta {
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.72s ease, transform 1.08s var(--work-smooth);
}

.ko-work-meta p,
.ko-work-meta h4,
.ko-work-tags span {
    width: max-content;
    max-width: min(420px, calc(100% - 10px));
    padding: 5px 10px 6px;
    border-radius: 3px;
    border: 0;
    background: rgba(242,239,231,0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.92);
}

.ko-work-meta p {
    margin: 0 0 7px;
    font-size: 17px;
    line-height: 1;
}

.ko-work-meta h4 {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
}

.ko-work-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-top: 0;
}

.ko-work-tags span {
    min-height: 0;
    font-size: 16px;
    font-style: italic;
    line-height: 1;
}

.ko-work-hover {
    left: var(--project-cursor-x);
    top: var(--project-cursor-y);
    right: auto;
    bottom: auto;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.82);
    transition:
        opacity 0.62s ease,
        transform 0.9s var(--work-smooth);
    will-change: left, top, opacity, transform;
}

.ko-work-hover::before {
    content: '•';
    margin-right: 14px;
    color: #111;
}

.ko-work-stage.has-hover,
.ko-work-stage:has(.ko-work-card:hover) {
    overflow: hidden;
}

.ko-work-stage.has-hover .ko-work-intro,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
    flex-basis: clamp(340px, 25vw, 430px);
    padding: clamp(22px, 2vw, 30px);
}

.ko-work-stage.has-hover .ko-work-intro p,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
    margin-bottom: 20px;
    font-size: clamp(30px, 2.4vw, 44px);
    transform: translateY(-2px);
}

.ko-work-stage.has-hover .ko-work-intro h3,
.ko-work-stage.has-hover .ko-work-description,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-intro h3,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-description {
    max-height: 140px;
    opacity: 1;
    transform: none;
}

.ko-work-stage.has-hover .ko-work-intro h3,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-intro h3 {
    margin: 0;
}

.ko-work-stage.has-hover .ko-work-description,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-description {
    margin-top: 2px;
}

.ko-work-stage.has-hover .ko-work-intro-row,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
    min-height: min(230px, 30vh);
}

.ko-work-stage.has-hover .ko-work-all,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-all {
    width: auto;
    min-width: max-content;
    padding: 12px 14px;
    justify-content: center;
    gap: 14px;
}

.ko-work-stage .ko-work-intro.is-cta-tracking .ko-work-all {
    padding: 13px 20px;
    border-radius: 5px;
    background: #070707;
    box-shadow: 0 18px 45px rgba(0,0,0,0.24);
}

.ko-work-stage.has-hover .ko-work-all span:first-child,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-all span:first-child {
    max-width: 190px;
    opacity: 1;
}

.ko-work-stage.has-hover .ko-work-card,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-card {
    flex-basis: clamp(112px, 8vw, 150px);
    height: min(49vh, 390px);
    opacity: 0.74;
}

.ko-work-card:hover,
.ko-work-card.is-hovered {
    --hover-y: 0px;
    flex-basis: clamp(500px, 33vw, 560px);
    height: 100%;
    border-color: transparent;
    box-shadow: none;
    transform: translate3d(0, calc((1 - var(--ko-gallery)) * var(--reveal-y)), 0);
}

.ko-work-stage.has-hover .ko-work-card.is-hovered,
.ko-work-stage:has(.ko-work-card:hover) .ko-work-card:hover {
    flex-basis: clamp(520px, 40vw, 660px);
    height: 100%;
    opacity: 1;
    z-index: 2;
}

.ko-work-card:hover .ko-work-media img,
.ko-work-card.is-hovered .ko-work-media img {
    transform: scale(1.06);
    filter: brightness(0.86) saturate(1.02);
}

.ko-work-card:hover .ko-work-card-link::after,
.ko-work-card.is-hovered .ko-work-card-link::after {
    opacity: 0.18;
}

.ko-work-card:hover .ko-work-index,
.ko-work-card.is-hovered .ko-work-index,
.ko-work-card:hover .ko-work-meta,
.ko-work-card.is-hovered .ko-work-meta,
.ko-work-card:hover .ko-work-hover,
.ko-work-card.is-hovered .ko-work-hover {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.ko-work-card:hover .ko-work-hover,
.ko-work-card.is-hovered .ko-work-hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ko-work-card:hover .ko-work-tags span,
.ko-work-card.is-hovered .ko-work-tags span {
    background: rgba(242,239,231,0.20);
    border-color: transparent;
    color: rgba(255,255,255,0.94);
}

@media (max-width: 900px) {
    .ko-work-stage {
        inset: 28px 0 auto 0;
        height: min(76vh, 620px);
        display: flex;
        grid-template-columns: none;
        grid-auto-rows: auto;
        gap: 10px;
        padding: 0 12px;
        overflow: visible;
    }

    .ko-work-intro {
        position: relative;
        inset: auto;
        flex: 0 0 330px;
        width: auto;
        height: 100%;
        padding: 28px;
    }

    .ko-work-intro p {
        font-size: 38px;
    }

    .ko-work-intro h3,
    .ko-work-description {
        max-width: 260px;
        font-size: 16px;
    }

    .ko-work-card {
        flex: 0 0 222px;
        min-height: 0;
        height: min(50vh, 380px);
    }

    .ko-work-card:hover,
    .ko-work-card.is-hovered {
        flex-basis: min(500px, 68vw);
        height: 100%;
    }

    .ko-work-stage.has-hover,
    .ko-work-stage:has(.ko-work-card:hover) {
        gap: 8px;
    }

    .ko-work-stage.has-hover .ko-work-intro,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
        flex-basis: clamp(140px, 19vw, 180px);
        padding: 20px 16px;
    }

    .ko-work-stage.has-hover .ko-work-intro p,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        font-size: clamp(23px, 4vw, 31px);
        line-height: 0.98;
    }

    .ko-work-stage.has-hover .ko-work-intro-row,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
        min-height: 96px;
    }

    .ko-work-stage.has-hover .ko-work-all,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all {
        padding: 10px 12px;
        gap: 9px;
        font-size: 12px;
    }

    .ko-work-stage.has-hover .ko-work-all span:first-child,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all span:first-child {
        max-width: 116px;
    }

    .ko-work-stage.has-hover .ko-work-intro h3,
    .ko-work-stage.has-hover .ko-work-description,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro h3,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-description {
        max-height: 0;
        margin: 0;
        opacity: 0;
        transform: translateY(-8px);
    }

    .ko-work-stage.has-hover .ko-work-card,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card {
        flex-basis: clamp(34px, 7vw, 58px);
        height: min(45vh, 340px);
    }

    .ko-work-stage.has-hover .ko-work-card.is-hovered,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card:hover {
        flex-basis: min(410px, 47vw);
        height: 100%;
        opacity: 1;
    }

    .ko-work-meta {
        left: 16px;
        right: 16px;
        top: 16px;
        bottom: auto;
    }

    .ko-work-meta p,
    .ko-work-meta h4,
    .ko-work-tags span {
        font-size: 14px;
    }

    .ko-work-hover {
        left: var(--project-cursor-x);
        top: var(--project-cursor-y);
        right: auto;
        bottom: auto;
        font-size: 15px;
    }
}

@media (max-width: 520px) {
    .ko-work-stage {
        height: min(74vh, 560px);
        padding: 0 10px;
    }

    .ko-work-intro {
        flex-basis: 292px;
        padding: 24px;
    }

    .ko-work-intro p {
        font-size: 33px;
    }

    .ko-work-intro h3,
    .ko-work-description {
        font-size: 14px;
    }

    .ko-work-intro-row {
        min-height: 160px;
    }

    .ko-work-card {
        flex-basis: 180px;
        height: 330px;
    }

    .ko-work-card:hover,
    .ko-work-card.is-hovered {
        flex-basis: 310px;
    }

    .ko-work-stage {
        gap: 6px;
    }

    .ko-work-stage.has-hover .ko-work-intro,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
        flex-basis: clamp(54px, 15vw, 74px);
        padding: 18px 10px;
    }

    .ko-work-stage.has-hover .ko-work-intro p,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        font-size: clamp(17px, 5vw, 22px);
        line-height: 1;
    }

    .ko-work-stage.has-hover .ko-work-intro-row,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
        min-height: 70px;
    }

    .ko-work-stage.has-hover .ko-work-all,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all {
        width: 32px;
        min-width: 32px;
        padding: 9px;
        gap: 0;
    }

    .ko-work-stage.has-hover .ko-work-all span:first-child,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all span:first-child {
        max-width: 0;
        opacity: 0;
    }

    .ko-work-stage.has-hover .ko-work-card,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card {
        flex-basis: clamp(18px, 6vw, 32px);
        height: 300px;
    }

    .ko-work-stage.has-hover .ko-work-card.is-hovered,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card:hover {
        flex-basis: min(250px, 54vw);
        height: 100%;
    }

    .snake-signature-section {
        min-height: 172svh;
    }

    .snake-signature-sticky {
        padding: 96px 20px 28px;
    }

    .snake-signature-figure {
        top: 43%;
        width: min(900px, 142vw);
        transform:
            translate3d(-50%, -50%, 0)
            rotate(calc((1 - var(--snake-signature-reveal)) * -4deg))
            scale(calc(0.60 + (var(--snake-signature-reveal) * 0.26)));
    }

    .snake-signature-copy {
        width: 100%;
        margin-bottom: 48px;
    }

    .snake-signature-copy h2 {
        font-size: clamp(38px, 13vw, 74px);
        line-height: 0.98;
    }

    .snake-signature-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* Mobile polish for the sections that carry the main scroll narrative. */
@media (max-width: 820px) {
    .hero {
        min-height: 100svh;
        padding: calc(var(--nav-h) + 24px) 18px 34px;
    }

    .hero-headline--split {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(10px, 2.8vw, 16px);
    }

    .hero-split-text,
    .hero-split-text--left,
    .hero-split-text--right {
        justify-self: center;
        max-width: min(330px, 86vw);
        font-size: clamp(28px, 8.8vw, 40px);
        line-height: 0.95;
        text-align: center;
        text-wrap: balance;
        white-space: normal;
    }

    .hero-split-mark {
        width: clamp(42px, 13vw, 58px);
        justify-self: center;
        transform:
            translateX(clamp(-18px, -3vw, -8px))
            rotate(var(--hero-inline-snake-rotate))
            scale(var(--hero-inline-snake-scale));
        transform-origin: center;
    }

    .hero-split-text--right {
        max-width: min(340px, 88vw);
    }

    .hero-scroll-copy {
        max-width: 260px;
        font-size: 13px;
        line-height: 1.25;
    }

    .crafting-section {
        height: 150vh;
    }

    .crafting-section::before {
        top: -22px;
        height: 24px;
        border-radius: 50% 50% 0 0 / 88% 88% 0 0;
    }

    .crafting-container::before {
        height: clamp(180px, 36vh, 320px);
        backdrop-filter: blur(18px) saturate(132%);
        -webkit-backdrop-filter: blur(18px) saturate(132%);
    }

    .crafting-container {
        padding: 0 14px;
    }

    .crafting-headline {
        width: calc(100vw - 28px);
        padding: 18px 0 178px;
        font-size: clamp(34px, 11.2vw, 48px);
        line-height: 0.9;
    }

    .ch-word {
        margin-right: 0.04em;
    }

    .crafting-hover-bar {
        top: 58%;
        min-height: auto;
    }

    .chb-content {
        gap: 14px;
        padding: 18px 16px;
        max-width: 100vw;
    }

    .chb-card--kicker {
        max-width: calc(100vw - 44px);
        padding: 12px 15px 11px;
    }

    .chb-card--copy {
        max-width: calc(100vw - 58px);
        padding: 14px 15px 14px 20px;
    }

    .chb-kicker {
        font-size: clamp(17px, 6vw, 22px);
    }

    .chb-card--copy p {
        font-size: 12px;
        line-height: 1.42;
    }

    .chb-bubbles {
        max-width: calc(100vw - 44px);
        min-height: auto;
        gap: 7px;
    }

    .chb-bubble {
        min-height: 30px;
        padding: 8px 10px;
        font-size: 10px;
    }

    .trail-card {
        width: 108px;
        height: 140px;
    }

    .ko-bridge-section {
        height: 380vh;
    }

    .ko-bridge-copy {
        top: 11vh;
        left: 16px;
        right: 16px;
        width: auto;
    }

    .ko-bridge-kicker {
        color: rgba(247,25,75,0.74);
        text-shadow: 0 8px 24px rgba(0,0,0,0.20);
    }

    .ko-bridge-title {
        color: #f2efe7;
        font-size: clamp(26px, 9vw, 38px);
        line-height: 1.02;
        text-shadow: 0 14px 44px rgba(0,0,0,0.26);
    }

    .ko-word {
        color: rgba(242,239,231,0.22);
    }

    .ko-preview-stack {
        width: 82vw;
        height: 34svh;
    }

    .ko-work-stage {
        inset: 18px 12px 18px;
        width: auto;
        height: calc(100svh - 36px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto minmax(128px, 1fr) minmax(128px, 1fr);
        align-items: stretch;
        gap: 8px;
        padding: 0;
        overflow: hidden;
    }

    .ko-work-intro,
    .ko-work-stage.has-hover .ko-work-intro,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 170px;
        height: auto;
        flex: none;
        padding: 20px;
    }

    .ko-work-intro p,
    .ko-work-stage.has-hover .ko-work-intro p,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        margin-bottom: 12px;
        font-size: clamp(30px, 9.2vw, 38px);
        line-height: 0.98;
    }

    .ko-work-intro h3,
    .ko-work-description,
    .ko-work-stage.has-hover .ko-work-intro h3,
    .ko-work-stage.has-hover .ko-work-description,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro h3,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-description {
        max-width: 100%;
        max-height: 90px;
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
        opacity: 1;
        transform: none;
    }

    .ko-work-intro-row,
    .ko-work-stage.has-hover .ko-work-intro-row,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
        min-height: 62px;
        margin-top: 14px;
    }

    .ko-work-all,
    .ko-work-all:hover,
    .ko-work-stage.has-hover .ko-work-all,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all,
    .ko-work-stage .ko-work-intro.is-cta-tracking .ko-work-all {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-width: max-content;
        padding: 10px 13px;
        border-radius: 4px;
        background: #1a1a1a;
        gap: 8px;
        font-size: 12px;
        box-shadow: none;
        transform: none;
    }

    .ko-work-stage.has-hover .ko-work-all span:first-child,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all span:first-child {
        max-width: 150px;
        opacity: 1;
    }

    .ko-work-card,
    .ko-work-card:hover,
    .ko-work-card.is-hovered,
    .ko-work-stage.has-hover .ko-work-card,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card,
    .ko-work-stage.has-hover .ko-work-card.is-hovered,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card:hover {
        flex: none;
        width: 100%;
        height: 100%;
        min-height: 0;
        opacity: 1;
        transform: translate3d(0, calc((1 - var(--ko-gallery)) * 34px), 0);
    }

    .ko-work-card-link {
        min-height: 0;
    }

    .ko-work-card-link::after,
    .ko-work-card:hover .ko-work-card-link::after,
    .ko-work-card.is-hovered .ko-work-card-link::after {
        opacity: 0.30;
    }

    .ko-work-media img,
    .ko-work-card:hover .ko-work-media img,
    .ko-work-card.is-hovered .ko-work-media img {
        transform: scale(1.03);
        filter: brightness(0.84) saturate(1.04);
    }

    .ko-work-index,
    .ko-work-meta,
    .ko-work-card:hover .ko-work-index,
    .ko-work-card.is-hovered .ko-work-index,
    .ko-work-card:hover .ko-work-meta,
    .ko-work-card.is-hovered .ko-work-meta {
        opacity: 1;
        transform: none;
    }

    .ko-work-index {
        top: 10px;
        left: 10px;
        color: rgba(244,242,235,0.82);
        font-size: 16px;
    }

    .ko-work-meta {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 10px;
    }

    .ko-work-meta p,
    .ko-work-meta h4,
    .ko-work-tags span {
        max-width: 100%;
        padding: 4px 7px;
        font-size: 11px;
        line-height: 1;
    }

    .ko-work-meta h4 {
        margin-bottom: 0;
        font-size: 13px;
    }

    .ko-work-tags,
    .ko-work-hover {
        display: none;
    }

    .snake-signature-section {
        min-height: 172svh;
    }

    .snake-signature-sticky {
        padding: 96px 20px 28px;
    }

    .snake-signature-figure {
        top: 42%;
        width: min(900px, 136vw);
        transform:
            translate3d(-50%, -50%, 0)
            rotate(calc((1 - var(--snake-signature-reveal)) * -4deg))
            scale(calc(0.62 + (var(--snake-signature-reveal) * 0.24)));
    }

    .snake-signature-copy {
        width: 100%;
        margin-bottom: 48px;
    }

    .snake-signature-copy h2 {
        font-size: clamp(36px, 12vw, 68px);
        line-height: 0.98;
    }

    .snake-signature-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 430px) {
    .crafting-headline {
        font-size: clamp(31px, 10.4vw, 40px);
        padding-bottom: 186px;
    }

    .ko-work-intro,
    .ko-work-stage.has-hover .ko-work-intro,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
        min-height: 154px;
        padding: 18px;
    }

    .ko-work-description {
        display: none;
    }

    .ko-work-stage {
        grid-template-rows: auto minmax(112px, 1fr) minmax(112px, 1fr);
        gap: 7px;
    }

    .ko-work-meta p {
        display: none;
    }

    .ko-work-meta h4 {
        font-size: 12px;
    }

    .snake-signature-figure {
        width: min(760px, 132vw);
    }
}

/* Mobile Featured Work: closer to Estrela reference, without the red grid. */
@media (max-width: 820px) {
    .ko-dark-scene::before {
        background: #f2efe7;
        opacity: var(--ko-dark);
    }

    .ko-work-stage,
    .ko-work-stage.has-hover,
    .ko-work-stage:has(.ko-work-card:hover) {
        inset: 0;
        width: 100%;
        height: 100svh;
        display: grid;
        --mobile-menu-safe-top: calc(var(--nav-h) + 64px);
        --mobile-card-offset: 0px;
        --mobile-project-lift: -18px;
        grid-template-columns: repeat(4, clamp(300px, 62vw, 360px));
        grid-template-rows: minmax(176px, auto) minmax(282px, 1fr) minmax(126px, auto);
        grid-auto-flow: column;
        align-items: stretch;
        column-gap: 10px;
        row-gap: 42px;
        padding: var(--mobile-menu-safe-top) 20px 28px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        touch-action: pan-x pan-y;
        background: #050505;
        transform: translateY(calc((1 - var(--ko-gallery)) * 34px));
    }

    .ko-work-stage.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .ko-work-stage::-webkit-scrollbar {
        display: none;
    }

    .ko-work-intro,
    .ko-work-stage.has-hover .ko-work-intro,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro {
        grid-column: 1 / span 2;
        grid-row: 1 / 4;
        position: sticky;
        left: 0;
        z-index: 4;
        width: auto;
        height: auto;
        min-height: 0;
        flex: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        background: transparent;
        color: #f2efe7;
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    .ko-work-intro::before {
        display: none;
    }

    .ko-work-intro p,
    .ko-work-stage.has-hover .ko-work-intro p,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        max-width: min(330px, calc(100vw - 40px));
        margin: 0 0 18px;
        color: #f2efe7;
        font-size: clamp(36px, 9vw, 50px);
        line-height: 0.95;
        opacity: 1;
        transform: none;
    }

    .ko-work-intro h3,
    .ko-work-description,
    .ko-work-stage.has-hover .ko-work-intro h3,
    .ko-work-stage.has-hover .ko-work-description,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro h3,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-description {
        max-width: min(340px, 82vw);
        max-height: none;
        margin: 0;
        color: rgba(242,239,231,0.56);
        font-size: 14px;
        line-height: 1.45;
        opacity: 1;
        transform: none;
    }

    .ko-work-intro-row,
    .ko-work-stage.has-hover .ko-work-intro-row,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
        width: min(324px, calc(100vw - 40px));
        min-height: 96px;
        margin-top: auto;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
        background: #1a1a1a;
        pointer-events: auto;
    }

    .ko-work-all,
    .ko-work-all:hover,
    .ko-work-stage.has-hover .ko-work-all,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all,
    .ko-work-stage .ko-work-intro.is-cta-tracking .ko-work-all {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-width: max-content;
        padding: 10px 14px;
        border-radius: 4px;
        background: transparent;
        color: #f2efe7;
        gap: 9px;
        font-size: 13px;
        box-shadow: none;
        transform: none;
    }

    .ko-work-stage.has-hover .ko-work-all span:first-child,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-all span:first-child {
        max-width: 160px;
        opacity: 1;
    }

    .ko-work-card,
    .ko-work-card:hover,
    .ko-work-card.is-hovered,
    .ko-work-stage.has-hover .ko-work-card,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card,
    .ko-work-stage.has-hover .ko-work-card.is-hovered,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-card:hover {
        grid-row: 2;
        flex: none;
        width: 100%;
        height: 100%;
        min-height: 0;
        opacity: 1;
        z-index: 1;
        scroll-snap-align: start;
        transform: translate3d(var(--mobile-card-offset), calc(((1 - var(--ko-gallery)) * 34px) + var(--mobile-project-lift)), 0);
    }

    .ko-work-card:nth-of-type(1) { grid-column: 1; }
    .ko-work-card:nth-of-type(2) { grid-column: 2; }
    .ko-work-card:nth-of-type(3) { grid-column: 3; }
    .ko-work-card:nth-of-type(4) { grid-column: 4; }

    .ko-work-card-link {
        height: 100%;
        min-height: 0;
        border-radius: 3px;
    }

    .ko-work-card-link::after,
    .ko-work-card:hover .ko-work-card-link::after,
    .ko-work-card.is-hovered .ko-work-card-link::after {
        opacity: 0.18;
    }

    .ko-work-media img,
    .ko-work-card:hover .ko-work-media img,
    .ko-work-card.is-hovered .ko-work-media img {
        transform: scale(1.02);
        filter: brightness(0.9) saturate(1.04);
    }

    .ko-work-index,
    .ko-work-meta,
    .ko-work-card:hover .ko-work-index,
    .ko-work-card.is-hovered .ko-work-index,
    .ko-work-card:hover .ko-work-meta,
    .ko-work-card.is-hovered .ko-work-meta {
        opacity: 1;
        transform: none;
    }

    .ko-work-index {
        top: -31px;
        left: 0;
        color: #f2efe7;
        font-size: 20px;
    }

    .ko-work-meta {
        left: 14px;
        right: 14px;
        top: 14px;
        bottom: auto;
    }

    .ko-work-meta p,
    .ko-work-meta h4,
    .ko-work-tags span {
        max-width: calc(100% - 10px);
        padding: 5px 9px;
        font-size: 11px;
        line-height: 1.08;
        color: rgba(255,255,255,0.92);
        background: rgba(28,28,28,0.34);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .ko-work-meta h4 {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .ko-work-tags {
        display: flex;
        gap: 6px;
    }

    .ko-work-tags span:nth-child(n+3) {
        display: none;
    }

    .ko-work-tags span {
        font-size: 11px;
    }

    .ko-work-hover {
        display: none;
    }
}

@media (max-width: 430px) {
    .ko-work-stage,
    .ko-work-stage.has-hover,
    .ko-work-stage:has(.ko-work-card:hover) {
        --mobile-menu-safe-top: calc(var(--nav-h) + 62px);
        --mobile-card-offset: 0px;
        --mobile-project-lift: -14px;
        grid-template-columns: repeat(4, clamp(286px, 78vw, 322px));
        grid-template-rows: minmax(148px, auto) minmax(260px, 1fr) minmax(116px, auto);
        row-gap: 34px;
        padding: var(--mobile-menu-safe-top) 14px 24px;
    }

    .ko-work-description {
        display: block;
    }

    .ko-work-intro p,
    .ko-work-stage.has-hover .ko-work-intro p,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        font-size: clamp(32px, 9vw, 42px);
    }

    html[lang="pt-BR"] .ko-work-intro p,
    html[lang="pt-BR"] .ko-work-stage.has-hover .ko-work-intro p,
    html[lang="pt-BR"] .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro p {
        max-width: calc(100vw - 28px);
        font-size: clamp(28px, 7.6vw, 34px);
    }

    .ko-work-intro-row,
    .ko-work-stage.has-hover .ko-work-intro-row,
    .ko-work-stage:has(.ko-work-card:hover) .ko-work-intro-row {
        width: calc(100vw - 36px);
        min-height: 86px;
        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    }

    .ko-work-meta {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .ko-work-meta p,
    .ko-work-meta h4,
    .ko-work-tags span {
        font-size: 10px;
    }

    .ko-work-meta h4 {
        font-size: 11px;
    }
}


.manifesto-section {
    position: relative;
    background: transparent;
    padding: 180px 44px 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.manifesto-container {
    max-width: 1200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
}

/* --- Orb Parallax Decorativo --- */
.scroll-orb {
    position: absolute;
    width: clamp(600px, 60vw, 900px);
    height: clamp(600px, 60vw, 900px);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, 
        rgba(242, 34, 72, 0.2) 0%, 
        rgba(242, 34, 72, 0.05) 40%, 
        transparent 70%);
    filter: blur(80px);
    pointer-events: none; /* Já estava assim, mas reforçamos */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Baixamos o z-index da orb para não sobrepor texto em alguns navegadores mobile */
    will-change: transform, opacity; /* Vital para performance de filtros */
}

.manifesto-eyebrow {

    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.manifesto-text {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
}

.manifesto-text em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--muted);
}

/* --- Services Grid --- */
.services-grid-section {
    position: relative;
    background: transparent;
    padding: 0 44px 180px;
    z-index: 10;
}

.grid-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.service-card {
    background: rgba(255, 255, 255, 0.05); /* Mais opaco, sem blur para performance */
    padding: 60px 40px;
    border-radius: 12px;
    transition: background 0.4s ease, transform 0.4s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: default;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}
.service-card {
    will-change: transform, opacity;
}

.svc-title {
    font-family: var(--sans);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.svc-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}

@media (max-width: 768px) {
    .manifesto-section { padding: 120px 20px 80px; }
    .services-grid-section { padding: 0 20px 120px; }
    .service-card { padding: 40px 24px; }
}

/* --- Methodology --- */
.methodology-section {
    position: relative;
    background: transparent;
    padding: 100px 44px;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.methodology-container {
    max-width: 1000px;
    text-align: center;
}
.method-eyebrow {
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
}
.method-text {
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
}

/* --- Clients --- */
.clients-section {
    position: relative;
    background: transparent;
    padding: 120px 44px;
    z-index: 10;
}
.clients-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}
.clients-eyebrow {
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 60px;
}
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px 80px;
}
.client-brand {
    font-family: var(--sans);
    font-size: clamp(24px, 3.5vw, 48px);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    letter-spacing: -0.02em;
    transition: color 0.4s ease, transform 0.4s var(--ease);
    cursor: default;
}
.client-brand:hover {
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

/* --- Final CTA --- */
.final-cta-section {
    position: relative;
    background: transparent;
    padding: 180px 44px;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.cta-container {
    text-align: center;
}
.cta-title {
    font-size: clamp(42px, 8vw, 110px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 60px;
    color: var(--text);
}
.cta-button-wrap {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .methodology-section { padding: 80px 20px; }
    .clients-section { padding: 80px 20px; }
    .clients-grid { gap: 40px; }
    .final-cta-section { padding: 120px 20px; }
}

/* ========================
   REVEAL FOOTER (NAMMA STYLE — STRETCH SCROLL)
======================== */
.site-wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
}

.namma-footer {
    background: url('assets/vgemini.png') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 60px 0px;
    min-height: 100svh;
    color: #fff;
    overflow: hidden; 
}

.namma-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
    position: relative;
    z-index: 2; /* Garante que os links fiquem POR CIMA do texto se houver sobreposição */
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-col--right {
    align-items: flex-end;
    text-align: right;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-nav a {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.15s;
}
.footer-nav a:hover { opacity: 0.4; }

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-link {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}
.footer-link:hover { color: #fff; }

.footer-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

.footer-email {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    transition: opacity 0.15s;
}
.footer-email:hover { opacity: 0.5; }

.footer-copy {
    font-size: 11px;
    color: rgba(0,0,0,0.4);
    letter-spacing: 0.1em;
}

/* A base do footer — OVERFLOW VISIBLE para permitir o texto crescer sem ser cortado */
.namma-footer-base {
    width: 100%;
    overflow: visible;
    line-height: 1;
}

.namma-huge-text {
    font-family: var(--display) !important;
    font-size: clamp(80px, 15vw, 400px); /* Fonte levemente menor para o 'L' caber na largura total */
    font-weight: 900;
    line-height: 0.7; /* Mais apertado para colar na base */
    letter-spacing: -0.02em;
    color: #e8e8e8; /* Letras claras no fundo escuro */
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: -0.15em; /* Puxa o texto para baixo para "colar" no rodapé */
    display: block;
    width: 100%;
    text-align: center;
    transform-origin: bottom center;
    -webkit-font-smoothing: antialiased;
    position: relative;
    z-index: 1; 
}

/* Media Queries do Footer */
@media (max-width: 860px) {
    .namma-footer {
        padding: 40px 20px 20px;
    }
    .namma-footer-top {
        flex-direction: column;
        gap: 40px;
    }
    .footer-meta p {
        text-align: left;
    }
    .namma-huge-text {
        font-size: clamp(48px, 19vw, 120px);
    }
}

/* ========================
   NEW SECTIONS: PROCESS & METRICS
======================== */
.process-section {
    padding: 100px 44px;
    background: transparent;
    border-top: 1px solid var(--border);
}

.process-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-num {
    font-size: 14px;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.8;
    letter-spacing: 0.1em;
}

.step-content h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.step-content p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

.metrics-section {
    padding: 120px 44px;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
    margin: 60px 0;
}

.metrics-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-val {
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
}

.metric-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
}

.namma-footer {
    position: relative;
    background: transparent; /* Transparente para mostrar o wallpaper fixo */
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 40px;
}

.namma-footer-top {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .process-container {
        grid-template-columns: 1fr;
    }
    .metrics-grid {
        flex-direction: column;
        gap: 60px;
    }
}

/* ========================
   FOOTER BRAND IMAGE
======================== */
.namma-footer-base {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.footer-brand-img {
    max-width: 60%;
    height: auto;
    opacity: 0.85;
    transition: opacity 0.4s ease, transform 0.4s ease;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.05));
}

.footer-brand-img:hover {
    opacity: 1;
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .footer-brand-img {
        max-width: 85%;
    }
}

/* ========================

.koby-text {
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    max-width: 1400px;
    letter-spacing: -0.02em;
    color: #fff;
    word-break: break-word;
}

.koby-word {
    display: inline-block;
    margin-right: 0.25em;
    opacity: 0.1; /* Estado inicial 'fantasma' */
    will-change: opacity;
}

.koby-text-wrapper {
    will-change: transform;
}

@media (max-width: 768px) {
    .koby-text {
        font-size: clamp(24px, 8vw, 42px);
    }
}

/* ========================
   KOBYKOOBA STYLE MANIFESTO V2 (SPLIT)
======================== */
.manifesto-section {
    background: #f0efed !important; /* Bege Editorial */
    color: #000 !important;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh;
}

.koby-visuals {
    position: relative;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.koby-content {
    display: flex;
    align-items: center;
    padding-right: 80px;
    padding-left: 20px;
}

.koby-text {
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.15;
    text-align: left;
    color: #000;
    letter-spacing: -0.01em;
}

.koby-word {
    display: inline-block;
    margin-right: 0.25em;
    opacity: 0.15;
}

/* Formas Geométricas */
.koby-shape {
    position: absolute;
    background: #000;
    will-change: transform;
}

.koby-arc {
    width: 300px;
    height: 300px;
    background: transparent;
    top: 15%;
    left: 10%;
}
.koby-arc svg { width: 100%; height: 100%; }

.koby-bar-1 {
    width: 250px;
    height: 40px;
    top: 50%;
    left: 20%;
    transform: rotate(45deg);
}

.koby-bar-2 {
    width: 180px;
    height: 60px;
    bottom: 20%;
    right: 15%;
}

.koby-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 25%;
    right: 25%;
}

@media (max-width: 900px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .koby-visuals {
        height: 300px;
    }
    .koby-content {
        padding: 60px 40px;
    }
}