/* ─── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

    /* ─── DESIGN TOKENS ─────────────────────────────────── */
    :root {
        /* Palette "Terra in Movimento" — warm black + amber gold + vivid yellow + cream */
        --bg:       #F5F0E8;
        --ink:      #0F0E0D;
        --fire:     #C8920A;
        --gold:     #E8B500;
        --surface:  #EDE7DB;
        --text:     #1A1714;
        --muted:    #8A7E74;
        --white:    #F0EBE3;
        --border:   rgba(26,23,20,0.1);

        --font-display: 'Syne', sans-serif;
        --font-body:    'DM Sans', sans-serif;

        --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);

        --nav-h: 72px;
        --max-w: 1280px;
    }

    /* ─── BASE ───────────────────────────────────────────── */
    body {
        font-family: var(--font-body);
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
        line-height: 1.5;
        cursor: none;
    }

    @media (hover: none) {
        body { cursor: auto; }
        .cursor { display: none !important; }
    }

    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; font-family: inherit; }
    ::selection { background: var(--fire); color: var(--white); }

    :focus-visible {
        outline: 2.5px solid var(--fire);
        outline-offset: 3px;
        border-radius: 4px;
    }

    /* ─── CUSTOM CURSOR ─────────────────────────────────── */
    .cursor {
        position: fixed;
        top: 0; left: 0;
        pointer-events: none;
        z-index: 99999;
    }
    .cursor__dot {
        position: absolute;
        width: 8px; height: 8px;
        background: var(--fire);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        will-change: transform;
        transition: width .3s var(--ease), height .3s var(--ease), background .3s;
    }
    .cursor__ring {
        position: absolute;
        width: 44px; height: 44px;
        border: 1.5px solid var(--fire);
        border-radius: 50%;
        opacity: 0.5;
        transform: translate(-50%, -50%);
        will-change: transform;
        transition: opacity .3s, width .3s var(--ease), height .3s var(--ease);
    }
    .cursor.is-hovering .cursor__dot { width: 52px; height: 52px; background: var(--fire); opacity: .12; }
    .cursor.is-hovering .cursor__ring { opacity: 0; }
    .cursor.is-text .cursor__dot { width: 2px; height: 36px; border-radius: 2px; background: var(--fire); }
    .cursor.is-text .cursor__ring { opacity: 0; }

    /* ─── NAV ────────────────────────────────────────────── */
    .nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--nav-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2.5rem;
        z-index: 1000;
        transition: background .5s var(--ease), box-shadow .5s;
    }
    .nav.scrolled {
        background: rgba(245,240,232,.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 1px 0 var(--border);
    }

    .nav__logo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.5rem;
        letter-spacing: -0.03em;
        color: var(--white);
        transition: color .5s;
        display: flex;
        align-items: center;
    }
    .nav.scrolled .nav__logo { color: var(--ink); }
    .nav__logo-accent { color: var(--fire); }

    .nav__links {
        display: flex;
        list-style: none;
        gap: 2.75rem;
        align-items: center;
    }
    .nav__links a {
        font-size: .8125rem;
        font-weight: 500;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(255,255,255,.65);
        transition: color .3s;
        position: relative;
    }
    .nav__links a::after {
        content: '';
        position: absolute;
        bottom: -2px; left: 0; right: 0;
        height: 1.5px;
        background: var(--fire);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s var(--ease);
    }
    .nav__links a:hover { color: var(--white); }
    .nav__links a:hover::after { transform: scaleX(1); }
    .nav.scrolled .nav__links a { color: var(--muted); }
    .nav.scrolled .nav__links a:hover { color: var(--fire); }

    .nav__actions {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }
    .nav__ig, .nav__fb {
        color: rgba(255,255,255,.65);
        transition: color .3s;
        display: flex;
        align-items: center;
    }
    .nav__ig:hover, .nav__fb:hover { color: var(--fire); }
    .nav.scrolled .nav__ig, .nav.scrolled .nav__fb { color: var(--muted); }

    .nav__toggle {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 44px;
        min-height: 44px;
        background: none;
        border: none;
        padding: 6px;
    }
    .nav__toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--white);
        border-radius: 2px;
        transition: transform .35s var(--ease), opacity .25s, background .5s;
    }
    .nav.scrolled .nav__toggle span { background: var(--ink); }
    .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav overlay */
    @media (max-width: 860px) {
        .nav__links, .nav__ig, .nav__fb { display: none; }
        .nav__toggle { display: flex; }

        .nav.is-open .nav__links {
            display: flex;
            flex-direction: column;
            position: fixed;
            inset: 0;
            background: var(--ink);
            align-items: center;
            justify-content: center;
            gap: 2.5rem;
            z-index: 999;
        }
        .nav.is-open .nav__links a {
            font-size: 2rem;
            color: rgba(255,255,255,.85);
            letter-spacing: -.01em;
        }
        .nav.is-open .nav__links a::after { display: none; }
        .nav.is-open .nav__links a:hover { color: var(--fire); }
    }

    /* ─── HERO — Magazine Cover ─────────────────────────── */
    .hero {
        min-height: 100dvh;
        background: var(--ink);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Subtle grid lines */
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
        background-size: 80px 80px;
        pointer-events: none;
        z-index: 0;
    }

    /* Background showreel video */
    .hero__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
    }
    .hero__video-overlay {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(15,14,13,.80) 0%,
            rgba(15,14,13,.58) 40%,
            rgba(15,14,13,.88) 100%);
    }

    /* Giant "MoVA" barely-visible texture behind photo */
    .hero__bg-brand {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(10rem, 26vw, 26rem);
        letter-spacing: -.06em;
        white-space: nowrap;
        color: rgba(255,255,255,.055);
        line-height: 1;
        user-select: none;
        pointer-events: none;
        z-index: 1;
    }

    /* Photo — magazine cover cutout */
    .hero__photo-wrap {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: clamp(320px, 52vw, 700px);
        height: 92%;
        overflow: visible;
        pointer-events: none;
    }

    /* Cutout PNG */
    .hero__photo {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 108%;
        object-fit: contain;
        object-position: bottom center;
        display: block;
        filter: drop-shadow(-12px 0 48px rgba(0,0,0,.6))
                drop-shadow( 12px 0 48px rgba(0,0,0,.6));
        will-change: opacity, transform;
    }
    .hero__photo.photo-hidden {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
    }
    .hero__photo.photo-reveal {
        transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Ground shadow to anchor subjects */
    .hero__photo-wrap::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 80px;
        background: radial-gradient(ellipse at center bottom,
            rgba(0,0,0,.65) 0%, transparent 70%);
        z-index: -1;
    }

    /* Not needed with transparent cutout */
    .hero__photo-grad { display: none; }

    /* Side labels (Janice-style) */
    .hero__side {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        opacity: 0;
        animation: fadeUp .7s var(--ease) 1.2s forwards;
    }
    .hero__side--left  { left: 2.5rem; }
    .hero__side--right { right: 2.5rem; align-items: flex-end; }

    .hero__side-divider {
        width: 22px; height: 1.5px;
        background: var(--fire);
        margin-bottom: .5rem;
    }
    .hero__side--right .hero__side-divider { align-self: flex-end; }

    .hero__side-item {
        font-size: .5875rem;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgba(255,255,255,.35);
        line-height: 1;
    }

    /* Top strip */
    .hero__top-strip {
        position: relative;
        z-index: 5;
        padding: calc(var(--nav-h) + 1.75rem) 2.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-shrink: 0;
        opacity: 0;
        animation: fadeUp .6s var(--ease) .5s forwards;
    }
    .hero__top-tag {
        font-size: .5875rem;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--fire);
        display: flex;
        align-items: center;
        gap: .6rem;
    }
    .hero__top-tag::before {
        content: '';
        display: block;
        width: 20px; height: 1.5px;
        background: var(--fire);
    }
    .hero__year {
        font-family: var(--font-display);
        font-size: .5875rem;
        font-weight: 700;
        letter-spacing: .18em;
        color: rgba(255,255,255,.22);
    }

    /* Bottom bar: headline + CTAs */
    .hero__bottom-bar {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        z-index: 5;
        padding: 0 2.5rem 2.75rem;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
        /* split layout: tagline left, CTAs right — subjects own the center */
        pointer-events: none;
        opacity: 0;
        animation: fadeUp .8s var(--ease) 1.4s forwards;
    }
    .hero__bottom-bar > * { pointer-events: auto; }
    .hero__tagline {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(1.625rem, 3.2vw, 2.75rem);
        line-height: 1.05;
        letter-spacing: -.03em;
        color: var(--white);
    }
    .hero__tagline .fire { color: var(--fire); }

    .hero__cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: .875rem;
        flex-shrink: 0;
    }

    /* Fire accent line at very bottom */
    .hero__fire-line {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 3px;
        background: linear-gradient(to right, var(--fire), var(--gold) 50%, transparent);
        z-index: 6;
        opacity: 0;
        animation: fadeIn .8s var(--ease) 1.8s forwards;
    }
    @keyframes fadeIn { to { opacity: 1; } }

    /* Mobile hero */
    @media (max-width: 860px) {
        .hero__photo-wrap {
            width: clamp(220px, 68vw, 400px);
            height: 80%;
        }
        .hero__side { display: none; }
        .hero__bg-brand { font-size: clamp(6rem, 22vw, 11rem); }
        .hero__bottom-bar { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 480px) {
        .hero__photo-wrap { width: 85vw; height: 75%; }
        .hero__tagline { font-size: clamp(1.5rem, 5.5vw, 2rem); }
    }

    /* ─── BUTTONS ────────────────────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: .75rem;
        font-family: var(--font-body);
        font-size: .9375rem;
        font-weight: 600;
        padding: .9375rem 1.875rem;
        border-radius: 100px;
        border: none;
        transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }
    .btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,.18);
        transform: translateX(-101%);
        transition: transform .4s var(--ease);
    }
    .btn:hover::before { transform: translateX(0); }
    .btn:hover { transform: translateY(-3px); }

    .btn--fire {
        background: var(--fire);
        color: var(--ink);
        box-shadow: 0 4px 20px rgba(200,146,10,.30);
    }
    .btn--fire:hover { box-shadow: 0 12px 32px rgba(200,146,10,.55); }

    .btn--outline-white {
        background: transparent;
        color: rgba(255,255,255,.75);
        border: 1.5px solid rgba(255,255,255,.2);
    }
    .btn--outline-white:hover {
        border-color: var(--fire);
        color: var(--fire);
        box-shadow: 0 8px 24px rgba(200,146,10,.15);
    }

    .btn--outline-ink {
        background: transparent;
        color: var(--ink);
        border: 1.5px solid var(--border);
    }
    .btn--outline-ink:hover {
        border-color: var(--fire);
        color: var(--fire);
        box-shadow: 0 8px 24px rgba(200,146,10,.12);
    }

    .btn__arrow {
        display: flex;
        align-items: center;
        transition: transform .3s var(--ease);
    }
    .btn:hover .btn__arrow { transform: translateX(5px); }

    /* ─── MARQUEE ────────────────────────────────────────── */
    .marquee-wrap {
        background: var(--fire);
        padding: .875rem 0;
        overflow: hidden;
        display: flex;
    }
    .marquee-track {
        display: flex;
        white-space: nowrap;
        animation: marquee 22s linear infinite;
    }
    .marquee-item {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding-right: 1.5rem;
        flex-shrink: 0;
    }
    .marquee-text {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: .8125rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--white);
    }
    .marquee-text.outline {
        -webkit-text-stroke: 1px var(--white);
        color: transparent;
    }
    .marquee-dot {
        width: 5px; height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,.5);
        flex-shrink: 0;
    }

    /* ─── SECTION BASE ───────────────────────────────────── */
    .section {
        padding: 7rem 2.5rem;
    }
    @media (min-width: 900px) { .section { padding: 9rem 4rem; } }
    @media (min-width: 1200px) { .section { padding: 10rem 6rem; } }

    .section__inner { max-width: var(--max-w); margin: 0 auto; }

    .eyebrow {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--fire);
        display: flex;
        align-items: center;
        gap: .75rem;
        margin-bottom: 1.5rem;
    }
    .eyebrow::before {
        content: '';
        display: block;
        width: 28px; height: 1.5px;
        background: var(--fire);
        flex-shrink: 0;
    }
    .eyebrow--white { color: rgba(255,255,255,.7); }
    .eyebrow--white::before { background: var(--fire); }

    .section-title {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(2.25rem, 5vw, 4rem);
        line-height: 1.04;
        letter-spacing: -.03em;
        color: var(--ink);
    }
    .section-title--white { color: var(--white); }

    /* Reveal animation */
    [data-reveal] {
        opacity: 0;
        transform: translateY(48px);
        transition: opacity .9s var(--ease), transform .9s var(--ease);
    }
    [data-reveal].visible {
        opacity: 1;
        transform: translateY(0);
    }
    [data-reveal][data-delay="1"] { transition-delay: .1s; }
    [data-reveal][data-delay="2"] { transition-delay: .2s; }
    [data-reveal][data-delay="3"] { transition-delay: .3s; }
    [data-reveal][data-delay="4"] { transition-delay: .4s; }
    [data-reveal][data-delay="5"] { transition-delay: .5s; }

    /* ─── ABOUT ──────────────────────────────────────────── */
    .about { background: var(--bg); }

    .about__grid {
        display: grid;
        gap: 4rem;
        align-items: start;
    }
    @media (min-width: 900px) {
        .about__grid { grid-template-columns: 5fr 6fr; gap: 6rem; }
    }

    .about__img-wrap {
        position: relative;
    }
    .about__img {
        width: 100%;
        aspect-ratio: 4/5;
        border-radius: 24px;
        overflow: hidden;
        background: linear-gradient(145deg, #1a1410 0%, #0f0e0d 100%);
    }
    .about__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform .7s var(--ease);
    }
    .about__img:hover img { transform: scale(1.04); }
    .about__img-badge {
        position: absolute;
        right: -1.5rem;
        bottom: 3rem;
        background: var(--fire);
        color: var(--white);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: .75rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: .875rem 1.25rem;
        border-radius: 14px;
        line-height: 1.4;
        box-shadow: 0 16px 40px rgba(200,146,10,.40);
    }
    .about__img-badge span { display: block; font-weight: 300; opacity: .75; margin-top: .1rem; }

    .about__text {}
    .about__body {
        font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
        font-weight: 300;
        line-height: 1.72;
        color: var(--text);
        margin: 1.75rem 0 2.5rem;
    }
    .about__statement {
        font-family: var(--font-display);
        font-size: clamp(1.375rem, 2.5vw, 1.875rem);
        font-weight: 700;
        letter-spacing: -.025em;
        line-height: 1.25;
        color: var(--ink);
        margin-bottom: 3rem;
        border-left: 3px solid var(--fire);
        padding-left: 1.25rem;
    }
    .about__statement em {
        font-style: italic;
        color: var(--fire);
    }

    /* Team */
    .team { background: var(--surface); position: relative; overflow: hidden; }

    .team__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(rgba(237,231,219,.72), rgba(237,231,219,.72)),
            url('giungla-web.jpg') center / cover no-repeat fixed;
    }
    /* Fixed-attachment parallax is janky / unsupported on touch — fall back to normal scroll */
    @media (hover: none), (max-width: 768px) {
        .team__bg { background-attachment: scroll, scroll; }
    }
    .team .section__inner { position: relative; z-index: 1; }

    .team__grid {
        display: grid;
        gap: 2rem;
        margin-top: 3.5rem;
    }
    @media (min-width: 700px) { .team__grid { grid-template-columns: 1fr 1fr; } }

    .team__card {
        background: var(--bg);
        border-radius: 20px;
        overflow: hidden;
        transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease);
    }
    .team__card:hover {
        transform: translateY(-10px);
        box-shadow: 0 28px 56px rgba(13,27,42,.1);
    }
    .team__card-img {
        aspect-ratio: 3/2;
        overflow: hidden;
        position: relative;
        background: linear-gradient(145deg, #1a1410, #0f0e0d);
    }
    .team__card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        display: block;
        transition: transform .7s var(--ease);
    }
    .team__card:hover .team__card-img img { transform: scale(1.06); }
    .team__card-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(15,14,13,.55) 0%, transparent 60%);
    }
    .team__card-body { padding: 1.75rem 2rem 2rem; }
    .team__name {
        font-family: var(--font-display);
        font-size: 1.625rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: .375rem;
        letter-spacing: -.02em;
    }
    .team__role {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--fire);
        margin-bottom: 1rem;
    }
    .team__bio {
        font-size: .9375rem;
        line-height: 1.68;
        color: var(--muted);
    }
    .team__bio-extra { display: none; }
    .team__bio-extra.is-open { display: inline; }
    .team__bio-toggle {
        display: inline-block;
        margin-top: .5rem;
        background: none; border: none; padding: 0;
        font-size: .875rem; font-family: inherit;
        color: var(--fire); cursor: pointer;
        text-decoration: underline; text-underline-offset: 3px;
        transition: opacity .2s;
    }
    .team__bio-toggle:hover { opacity: .75; }

    /* ─── SERVICES ───────────────────────────────────────── */
    .services { background: var(--ink); }

    .services__grid {
        display: grid;
        gap: 1.5px;
        margin-top: 4rem;
        background: rgba(255,255,255,.07);
        border: 1.5px solid rgba(255,255,255,.07);
        border-radius: 24px;
        overflow: hidden;
        grid-template-columns: 1fr;
    }
    @media (min-width: 700px) { .services__grid { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1100px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

    .svc {
        padding: 2.75rem 2.5rem;
        background: var(--ink);
        position: relative;
        overflow: hidden;
        transition: background .4s;
    }
    .svc::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(140deg, rgba(200,146,10,.10), transparent 60%);
        opacity: 0;
        transition: opacity .4s;
    }
    .svc:hover::before { opacity: 1; }

    .svc__num {
        position: absolute;
        top: 1.5rem; right: 2rem;
        font-family: var(--font-display);
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .1em;
        color: rgba(255,255,255,.1);
    }
    .svc__icon {
        width: 52px; height: 52px;
        border-radius: 14px;
        background: rgba(200,146,10,.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fire);
        margin-bottom: 2rem;
        transition: background .4s, color .4s, transform .45s var(--ease-spring);
    }
    .svc:hover .svc__icon {
        background: var(--fire);
        color: var(--white);
        transform: scale(1.1) rotate(-5deg);
    }
    .svc__title {
        font-family: var(--font-display);
        font-size: 1.3125rem;
        font-weight: 700;
        color: var(--white);
        margin-bottom: .875rem;
        letter-spacing: -.015em;
    }
    .svc__desc {
        font-size: .9375rem;
        line-height: 1.68;
        color: rgba(255,255,255,.48);
    }

    /* ─── METHOD ─────────────────────────────────────────── */
    .method { background: var(--bg); position: relative; overflow: hidden; }

    .method__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(rgba(245,240,232,.70), rgba(245,240,232,.70)),
            url('motociclista-web.jpg') center / cover no-repeat fixed;
    }
    /* Fixed-attachment parallax is janky / unsupported on touch — fall back to normal scroll */
    @media (hover: none), (max-width: 768px) {
        .method__bg { background-attachment: scroll, scroll; }
    }

    /* Soft readability scrim — lifts copy off the photo, stronger on the left where text sits */
    .method__scrim {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(100deg,
            rgba(245,240,232,.78) 0%,
            rgba(245,240,232,.42) 48%,
            rgba(245,240,232,0) 78%);
    }

    .method .section__inner { position: relative; z-index: 1; }

    /* Giant "METODO" marquee — scrolls left → right, infinite loop */
    .method__marquee {
        position: absolute;
        top: 50%; left: 0; right: 0;
        transform: translateY(-50%);
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        user-select: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
    .method__marquee-track {
        display: flex;
        width: max-content;
        animation: method-marquee 38s linear infinite;
        will-change: transform;
    }
    .method__marquee-track span {
        font-family: var(--font-display);
        font-size: clamp(8rem, 20vw, 18rem);
        font-weight: 800;
        letter-spacing: -.05em;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 2px rgba(26,23,20,.10);
        padding-right: .32em;
        white-space: nowrap;
    }
    @keyframes method-marquee {
        from { transform: translateX(-50%); }
        to   { transform: translateX(0); }
    }

    .method__steps {
        display: grid;
        gap: 3.5rem;
        margin-top: 5rem;
        position: relative;
        z-index: 1;
    }
    @media (min-width: 900px) { .method__steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

    .method__step {}
    .method__step-num {
        font-family: var(--font-display);
        font-size: 5.5rem;
        font-weight: 800;
        letter-spacing: -.05em;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 2px rgba(26,23,20,.30);
        margin-bottom: 1.5rem;
        transition: color .4s var(--ease), -webkit-text-stroke-color .4s var(--ease),
                    transform .4s var(--ease-spring);
    }
    .method__step:hover .method__step-num {
        color: var(--fire);
        -webkit-text-stroke-color: var(--fire);
        transform: translateY(-4px);
    }

    .method__step-bar {
        width: 36px; height: 3px;
        background: var(--fire);
        border-radius: 2px;
        margin-bottom: 1.375rem;
        transition: width .5s var(--ease);
    }
    .method__step:hover .method__step-bar { width: 72px; }

    .method__step-title {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--ink);
        margin-bottom: .875rem;
    }
    .method__step-desc {
        font-size: .9375rem;
        line-height: 1.72;
        color: rgba(26,23,20,.74);
    }

    /* Callout */
    .method__callout {
        margin-top: 4rem;
        padding: 2.25rem 2.5rem;
        background: var(--ink);
        border-radius: 20px;
        color: rgba(255,255,255,.65);
        font-size: .9375rem;
        line-height: 1.65;
        position: relative;
        z-index: 1;
        border-left: 3px solid var(--fire);
    }
    .method__callout strong {
        color: var(--white);
        font-weight: 600;
    }


    /* ─── CONTACT ────────────────────────────────────────── */
    .contact { background: var(--ink); }

    .contact__grid {
        display: grid;
        gap: 4rem;
    }
    @media (min-width: 960px) { .contact__grid { grid-template-columns: 5fr 6fr; align-items: start; } }

    .contact__headline {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4.5vw, 3.25rem);
        font-weight: 800;
        letter-spacing: -.035em;
        line-height: 1.1;
        color: var(--white);
        margin: 1.5rem 0 2.5rem;
    }
    .contact__headline em { font-style: normal; color: var(--fire); }

    .contact__info { display: flex; flex-direction: column; gap: 1rem; }
    .contact__info-row a {
        color: rgba(255,255,255,.75);
        transition: color .3s;
    }
    .contact__info-row a:hover { color: var(--fire); }
    .contact__info-row {
        display: flex;
        align-items: center;
        gap: .875rem;
        font-size: .9375rem;
        color: rgba(255,255,255,.55);
    }
    .contact__info-icon {
        width: 38px; height: 38px;
        border-radius: 10px;
        background: rgba(200,146,10,.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--fire);
        flex-shrink: 0;
    }

    /* Form */
    .form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    @media (max-width: 480px) { .form { grid-template-columns: 1fr; } }

    .form__field { display: flex; flex-direction: column; gap: .5rem; }
    .form__field--full { grid-column: 1 / -1; }

    label {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255,255,255,.38);
    }
    input, textarea {
        background: rgba(255,255,255,.06);
        border: 1.5px solid rgba(255,255,255,.1);
        border-radius: 12px;
        padding: .875rem 1.125rem;
        font-family: var(--font-body);
        font-size: .9375rem;
        color: var(--white);
        outline: none;
        width: 100%;
        transition: border-color .3s, background .3s;
        -webkit-appearance: none;
    }
    input::placeholder, textarea::placeholder { color: rgba(255,255,255,.2); }
    input:focus, textarea:focus {
        border-color: var(--fire);
        background: rgba(200,146,10,.06);
    }
    textarea { min-height: 140px; resize: vertical; }
    .form__btn { grid-column: 1 / -1; margin-top: .5rem; }

    /* ─── FOOTER ─────────────────────────────────────────── */
    .footer {
        background: #090807;
        padding: 2.75rem 2.5rem;
        border-top: 1px solid rgba(255,255,255,.06);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
    .footer__logo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.375rem;
        letter-spacing: -.03em;
        color: var(--white);
    }
    .footer__logo-accent { color: var(--fire); }
    .footer__links {
        display: flex;
        list-style: none;
        gap: 2rem;
        flex-wrap: wrap;
    }
    .footer__links a {
        font-size: .8125rem;
        color: rgba(255,255,255,.35);
        transition: color .3s;
    }
    .footer__links a:hover { color: var(--fire); }
    .footer__copy {
        font-size: .8125rem;
        color: rgba(255,255,255,.25);
    }
    .footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
        margin-top: 1rem;
        font-size: .78rem;
    }
    .footer__legal a, .footer__legal button {
        background: none;
        border: none;
        padding: .35rem 0;
        font-family: inherit;
        font-size: inherit;
        color: rgba(255,255,255,.4);
        cursor: pointer;
        transition: color .3s;
    }
    .footer__legal a:hover, .footer__legal button:hover { color: var(--fire); }

    /* ─── KEYFRAMES ──────────────────────────────────────── */
    @keyframes fadeUp {
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
    /* ─── REDUCED MOTION ─────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
        [data-reveal] { opacity: 1; transform: none; transition: none; }
        .hero__bottom-bar, .hero__top-strip, .hero__side { opacity: 1; animation: none; }
    }

    /* ─── RESPONSIVE HELPERS ─────────────────────────────── */
    @media (max-height: 600px) and (orientation: landscape) {
        .hero__photo-wrap { height: 72vh; }
        .hero__bottom-bar { padding-bottom: 1.25rem; }
    }

    @media (max-width: 600px) {
        .section { padding: 5rem 1.5rem; }
        .footer { padding: 2rem 1.5rem; }
        .nav { padding: 0 1.5rem; }
        .about__img-badge { right: .5rem; }
        .footer__links { display: none; }
    }

    /* ═══════════════════════════════════════════════════════
       CASE STUDY PAGES  —  reuses existing tokens & components
       ═══════════════════════════════════════════════════════ */
    .cs-prose { max-width: 680px; }

    .cs-back {
        display: inline-flex; align-items: center; gap: .5rem;
        padding: .875rem 0;
        font-size: .8125rem; font-weight: 500; letter-spacing: .05em;
        text-transform: uppercase; color: var(--muted);
        transition: color .3s var(--ease), gap .3s var(--ease);
        margin-bottom: 1.75rem;
    }
    .cs-back:hover { color: var(--fire); gap: .85rem; }
    .cs-back svg { width: 16px; height: 16px; }

    /* Hero */
    .cs-hero { background: var(--bg); padding-top: calc(var(--nav-h) + 4rem); }
    .cs-hero__title {
        font-family: var(--font-display); font-weight: 800;
        font-size: clamp(2rem, 6.5vw, 5rem); line-height: 1.03;
        letter-spacing: -.03em; color: var(--ink); margin-bottom: 1.5rem;
        overflow-wrap: break-word; hyphens: auto;
    }
    .cs-hero__subtitle {
        font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 300;
        line-height: 1.5; color: var(--text); max-width: 640px;
    }
    .cs-tags { display: flex; flex-wrap: wrap; gap: .5rem .625rem; margin-top: 2.25rem; }
    .cs-tag {
        font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
        color: var(--muted); background: var(--surface);
        border: 1px solid var(--border); border-radius: 999px;
        padding: .5rem 1rem; white-space: nowrap;
    }

    /* Section headings / body */
    .cs-h2 {
        font-family: var(--font-display); font-weight: 700;
        font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.08;
        letter-spacing: -.02em; color: var(--ink); margin-bottom: 1.5rem;
    }
    .cs-body { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); font-weight: 300;
        line-height: 1.75; color: var(--text); }
    .cs-body p + p { margin-top: 1.25rem; }
    .cs-body strong { font-weight: 600; }

    /* Dark section variant (matches services/contact rhythm) */
    .cs-section--dark { background: var(--ink); }
    .cs-section--dark .cs-h2 { color: var(--white); }
    .cs-section--dark .cs-body { color: rgba(240,235,227,.74); }

    /* "Tre parole" keyword line */
    .cs-keywords { margin-top: 2.25rem; }
    .cs-keywords__label {
        display: block; font-size: .75rem; font-weight: 600; letter-spacing: .12em;
        text-transform: uppercase; color: var(--muted); margin-bottom: .625rem;
    }
    .cs-keywords__words {
        font-family: var(--font-display); font-weight: 700;
        font-size: clamp(1.125rem, 2.2vw, 1.625rem); letter-spacing: -.01em;
        color: var(--ink); overflow-wrap: break-word;
    }
    .cs-keywords__words .dot { color: var(--fire); margin: 0 .5rem;
        display: inline-block; }
    .cs-section--dark .cs-keywords__words { color: var(--white); }

    /* Stat highlight */
    .cs-stat { border-left: 3px solid var(--fire); padding-left: 1.375rem;
        margin: 2.25rem 0 .5rem; }
    .cs-stat__num { font-family: var(--font-display); font-weight: 800;
        font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 1;
        letter-spacing: -.02em; color: var(--fire); }
    .cs-stat__label { font-size: .9375rem; color: var(--muted); margin-top: .375rem; }
    .cs-section--dark .cs-stat__label { color: rgba(240,235,227,.6); }

    /* Media grid — vertical 9:16 slots */
    .cs-media-grid {
        display: grid; gap: 1.25rem; margin-top: 2.75rem;
        grid-template-columns: repeat(2, 1fr);
        max-width: 620px;
    }
    .cs-media-grid--3 { max-width: 860px; }
    @media (max-width: 520px) {
        .cs-media-grid { grid-template-columns: 1fr; max-width: 360px;
            margin-left: auto; margin-right: auto; }
    }
    @media (min-width: 900px) {
        .cs-media-grid--3 { grid-template-columns: repeat(3, 1fr); }
    }
    .cs-media {
        position: relative; aspect-ratio: 9 / 16; border-radius: 16px;
        overflow: hidden; background: linear-gradient(160deg, var(--surface), #e4dece);
        border: 1px dashed var(--border);
        display: flex; align-items: center; justify-content: center;
    }
    .cs-media video, .cs-media img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block;
    }
    .cs-media__ph { display: flex; flex-direction: column; align-items: center;
        gap: .625rem; color: var(--muted); padding: 1rem; text-align: center; }
    .cs-media__ph svg { width: 34px; height: 34px; opacity: .55; }
    .cs-media__ph span { font-size: .75rem; letter-spacing: .08em;
        text-transform: uppercase; }
    .cs-section--dark .cs-media {
        background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
    .cs-section--dark .cs-media__ph { color: rgba(240,235,227,.55); }

    /* Testimonial */
    .cs-quote { max-width: 780px; margin: 0 auto; text-align: center; }
    .cs-quote__mark { font-family: var(--font-display); font-weight: 800;
        font-size: 3.5rem; line-height: .8; color: var(--fire); }
    .cs-quote__text { font-family: var(--font-display); font-weight: 700;
        font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.2;
        letter-spacing: -.02em; color: var(--white); margin-top: .5rem; }
    .cs-quote__author { margin-top: 1.5rem; font-size: .875rem; letter-spacing: .06em;
        text-transform: uppercase; color: rgba(240,235,227,.6); }
    .cs-quote--placeholder .cs-quote__text {
        color: rgba(240,235,227,.4); font-style: normal; }

    /* CTA band */
    .cs-cta { background: var(--ink); text-align: center; }
    .cs-cta__title { font-family: var(--font-display); font-weight: 800;
        font-size: clamp(1.875rem, 4.5vw, 3rem); letter-spacing: -.02em;
        color: var(--white); margin-bottom: 1rem; }
    .cs-cta__text { color: rgba(240,235,227,.7); font-weight: 300; line-height: 1.6;
        max-width: 560px; margin: 0 auto 2.25rem; }

    /* Solid nav for interior (light) pages — always readable */
    .nav--solid {
        background: rgba(245,240,232,.92);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 1px 0 var(--border);
    }
    .nav--solid .nav__logo { color: var(--ink); }
    .nav--solid .nav__links a { color: var(--muted); }
    .nav--solid .nav__links a:hover { color: var(--fire); }
    .nav--solid .nav__ig, .nav--solid .nav__fb { color: var(--muted); }
    .nav--solid .nav__ig:hover, .nav--solid .nav__fb:hover { color: var(--fire); }
    .nav--solid .nav__toggle span { background: var(--ink); }
    .nav--solid.is-open .nav__toggle span { background: var(--white); }

    /* ─── Animated smoke background (dark sections) ──────── */
    [data-smoke] { position: relative; overflow: hidden; }
    .smoke-canvas {
        position: absolute; inset: 0;
        width: 100%; height: 100%; display: block;
        z-index: 0; pointer-events: none;
        mix-blend-mode: screen; opacity: .6;
    }
    .cs-section--dark .section__inner,
    .cs-cta .section__inner { position: relative; z-index: 1; }

    /* ═══════════════ CASE STUDY — MEDIA INTEGRATION ═══════════════ */

    /* Full-bleed media hero (dark image + scrim + white text) */
    .cs-hero--media {
        min-height: 88vh;
        display: flex; align-items: flex-end;
        padding: calc(var(--nav-h) + 3rem) 0 4rem;
        position: relative; overflow: hidden;
        background: var(--ink);
    }
    /* Fixed-attachment parallax background (same treatment as home Motociclista/Giungla) */
    .cs-hero__bg { position: absolute; inset: 0; z-index: 0;
        background-position: center; background-size: cover; background-repeat: no-repeat;
        background-attachment: fixed; }
    .cs-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Parallax is janky / unsupported on touch — fall back to normal scroll */
    @media (hover: none), (max-width: 768px) {
        .cs-hero__bg { background-attachment: scroll; }
    }

    /* Compact hero variant — shorter box, surfaces the upper portion of the photo */
    .cs-hero--compact { min-height: 55vh; }
    .cs-hero--compact .cs-hero__bg { background-position: center 40%; }
    .cs-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, rgba(15,14,13,.55) 0%, rgba(15,14,13,.22) 42%, rgba(15,14,13,.9) 100%); }
    .cs-hero--media .section__inner { position: relative; z-index: 2; }
    .cs-hero--media .cs-hero__title { color: var(--white); }
    .cs-hero--media .cs-hero__subtitle { color: rgba(240,235,227,.9); }
    .cs-hero--media .cs-back { color: rgba(240,235,227,.8); }
    .cs-hero--media .cs-back:hover { color: var(--fire); }
    .cs-hero--media .cs-tag { background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.22); color: rgba(240,235,227,.92); }

    /* Text + media split (inline next to a paragraph) */
    .cs-split { display: grid; gap: 2.5rem; align-items: center; }
    @media (min-width: 860px) {
        .cs-split { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
        .cs-split--media-left .cs-split__media { order: -1; }
    }
    .cs-split__media { border-radius: 18px; overflow: hidden;
        box-shadow: 0 22px 50px rgba(15,14,13,.16); }
    .cs-split__media img { width: 100%; height: auto; display: block; }
    .cs-section--dark .cs-split__media { box-shadow: 0 22px 50px rgba(0,0,0,.4); }

    /* Compact variant — shorter photo, text top-aligned to match */
    .cs-split--compact { align-items: flex-start; }
    @media (min-width: 860px) {
        .cs-split--compact .cs-split__media { max-width: 72%; }
    }

    /* Horizontal-scroll gallery — film-strip. Fixed height keeps videos compact
       (≈35% smaller than the old grid) so the downscale is far less visible. */
    .cs-gallery-scroller { position: relative; margin-top: 2.75rem; }
    .cs-gallery {
        display: flex; gap: 1rem;
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x proximity;
        padding: .25rem .25rem 1.35rem;
        --gh: 340px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    @media (min-width: 700px) { .cs-gallery { --gh: 420px; gap: 1.25rem; } }
    .cs-gallery::-webkit-scrollbar { height: 6px; }
    .cs-gallery::-webkit-scrollbar-track { background: transparent; }
    .cs-gallery::-webkit-scrollbar-thumb { background: rgba(200,146,10,.5); border-radius: 999px; }
    .cs-gallery.is-dragging { scroll-snap-type: none; cursor: grabbing; }
    .cs-gallery.is-dragging * { pointer-events: none; }
    .cs-gallery__item {
        flex: 0 0 auto; height: var(--gh); scroll-snap-align: start;
        border-radius: 16px; overflow: hidden; position: relative;
        background: var(--ink);
    }
    .cs-gallery__item > picture { height: 100%; display: block; }
    .cs-gallery__item img { height: 100%; width: auto; display: block; }

    /* Scroll arrows (desktop) */
    .cs-gallery-arrow {
        position: absolute; top: calc(50% - .7rem); transform: translateY(-50%);
        width: 3rem; height: 3rem; border-radius: 50%; border: none; z-index: 4;
        cursor: pointer; background: var(--ink); color: var(--white);
        display: none; align-items: center; justify-content: center;
        box-shadow: 0 10px 28px rgba(15,14,13,.3);
        transition: background .3s var(--ease), opacity .3s; }
    .cs-gallery-arrow:hover { background: var(--fire); }
    .cs-gallery-arrow[disabled] { opacity: .28; pointer-events: none; }
    .cs-gallery-arrow svg { width: 22px; height: 22px; }
    .cs-gallery-arrow--prev { left: -.75rem; }
    .cs-gallery-arrow--next { right: -.75rem; }
    @media (hover: hover) and (min-width: 800px) { .cs-gallery-arrow { display: flex; } }

    /* Gallery video player — poster + play, click loads video WITH audio + controls */
    .cs-video { position: relative; aspect-ratio: 9 / 16; height: 100%; width: auto;
        background: #000; cursor: pointer; display: block; border: none; padding: 0; }
    .cs-video__poster { position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; display: block; }
    .cs-video__play { position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%;
        background: rgba(200,146,10,.94); border: none; z-index: 2; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: transform .3s var(--ease-spring), background .3s; }
    .cs-video__play svg { width: 24px; height: 24px; fill: var(--white); margin-left: 3px; }
    .cs-video:hover .cs-video__play { transform: translate(-50%, -50%) scale(1.09); background: var(--fire); }
    .cs-video__badge { position: absolute; bottom: .7rem; left: .7rem; z-index: 2;
        display: inline-flex; align-items: center; gap: .35rem;
        background: rgba(15,14,13,.72); color: var(--white); font-size: .68rem;
        font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
        padding: .32rem .6rem; border-radius: 999px;
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
    .cs-video__badge svg { width: 13px; height: 13px; }
    .cs-video video { position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; background: #000; z-index: 3; }

    /* Testimonial — warm gold glow (static), distinct from the smoke CTA */
    .cs-testimonial { background: var(--ink); position: relative; overflow: hidden; }
    .cs-testimonial::before { content: ''; position: absolute; inset: 0; z-index: 0;
        pointer-events: none;
        background: radial-gradient(130% 95% at 50% 0%, rgba(200,146,10,.18), transparent 58%); }
    .cs-testimonial .section__inner { position: relative; z-index: 1; }