/* ═══════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — Moonhall-Inspired
   Font: Rubik (Display + Body)
   ═══════════════════════════════════════════════ */

:root {
    /* ── Color Tokens ── */
    --bg-color: #0c1219;
    --text-color: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.55);
    --text-subtle: rgba(255, 255, 255, 0.35);
    --accent-color: #f72a45;

    /* ── Font Families ── */
    --font-display: 'Rubik', sans-serif;
    --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Fluid Type Scale (clamp: min, preferred, max) ── */
    --text-display-xl: clamp(4rem, 10vw, 10rem);
    /* Hero / massive titles  */
    --text-display-lg: clamp(3rem, 7vw, 7rem);
    /* Section headers        */
    --text-display-md: clamp(2rem, 5vw, 5rem);
    /* Sub-headers            */
    --text-display-sm: clamp(1.5rem, 3vw, 3rem);
    /* Smaller display        */

    --text-heading-1: clamp(1.75rem, 2.5vw, 2.5rem);
    /* H1                     */
    --text-heading-2: clamp(1.5rem, 2vw, 2rem);
    /* H2                     */
    --text-heading-3: clamp(1.25rem, 1.5vw, 1.5rem);
    /* H3                     */

    --text-body-lg: clamp(1.125rem, 1.3vw, 1.375rem);
    /* Lead paragraph         */
    --text-body: clamp(0.9375rem, 1vw, 1.0625rem);
    /* Body                   */
    --text-body-sm: clamp(0.8125rem, 0.9vw, 0.9375rem);
    /* Small body            */

    --text-caption: 0.8125rem;
    /* Captions / footnotes  */
    --text-label: 0.6875rem;
    /* Labels / overlines    */
    --text-micro: 0.625rem;
    /* Micro text            */
    --section-seam-fix: -1px;

    /* ── Letter Spacing ── */
    --tracking-tightest: -0.06em;
    /* Display titles        */
    --tracking-tighter: -0.04em;
    /* Large headings        */
    --tracking-tight: -0.02em;
    /* Standard headings     */
    --tracking-normal: 0em;
    /* Body text             */
    --tracking-wide: 0.08em;
    /* Uppercase labels      */
    --tracking-wider: 0.12em;
    /* Uppercase nav/buttons */
    --tracking-widest: 0.2em;
    /* Spaced‐out micro text */

    /* ── Line Heights ── */
    --leading-none: 0.85;
    /* Display text  */
    --leading-tight: 0.95;
    /* Headings      */
    --leading-snug: 1.15;
    /* Sub-headings  */
    --leading-normal: 1.6;
    /* Body text     */
    --leading-relaxed: 1.8;
    /* Long-form     */

    /* ── Font Weights ── */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* ── Services accordion controls (desktop) ── */
    --services-accordion-max-width: 980px;
    --services-accordion-offset-x: 0px;
    --layout-gutter: clamp(24px, 3.8vw, 50px);
    --layout-gutter-tablet: clamp(28px, 4.5vw, 56px);
    --zg-threat-level: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 100001;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(12, 18, 25, 0.96);
    color: #fff;
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-140%);
    transition: transform 0.2s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

body.light-mode .skip-link {
    background: rgba(255, 255, 255, 0.96);
    color: #111;
}

/* ══════════════════════
   PRELOADER
   ══════════════════════ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 130000;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.preloader-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preloader-count {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    color: var(--text-color);
    user-select: none;
    display: inline-block;
}

/* Curtain overlay — slides up with SVG kinetic curve * Rhye-style */
.preloader-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 130001;
    pointer-events: none;
    fill: var(--bg-color);
}

/* ══════════════════════
   RESET & BASE
   ══════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevenir selección en elementos de UI y navegación */
img,
svg,
video,
a,
button,
.logo,
.hamburger,
.lang-switcher,
.contact-fixed-btn,
.portfolio-btn,
.menu-nav,
.services-item-header,
.scroll-indicator,
.cinema-controls,
.services-plus-icon,
.magnetic-btn-wrap {
    user-select: none;
    -webkit-user-select: none;
}

/* Permitir selección y cursor de texto en textos legibles */
p,
h1,
h2,
h3,
h4,
h5,
h6,
.section-label,
.method-step-num,
li,
.overline,
.label,
.caption,
span {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}

/* Evitar problemas con botones y componentes que contengan textos */
a span,
button span,
a h1,
a h2,
a p,
.services-item-header h2,
.menu-nav a,
.hamburger span {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    cursor: default;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'kern' 1;
}

html,
body {
    overscroll-behavior-y: none;
}

html.cinema-touch-lock,
body.cinema-touch-lock {
    overflow: hidden;
}

body.cinema-touch-lock {
    touch-action: none;
}

body.touch-device {
    overscroll-behavior: none;
    background-color: #13171d;
    min-height: 100svh;
    touch-action: pan-y pinch-zoom;
}

html:has(body.touch-device) {
    background-color: #13171d;
    min-height: 100svh;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .carousel-track {
        animation: none !important;
        transform: none !important;
    }

    .custom-cursor,
    .zero-gravity-layer {
        display: none !important;
    }
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(247, 42, 69, 0.88);
    outline-offset: 4px;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

body.zero-gravity-active {
    cursor: none;
}

body.zero-gravity-active .custom-cursor {
    opacity: 0;
    pointer-events: none;
}

body.touch-device .custom-cursor {
    display: none !important;
}

.zero-gravity-layer {
    position: fixed;
    inset: 0;
    z-index: 120000;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

body.zero-gravity-active .zero-gravity-layer {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.zero-gravity-backdrop,
.zero-gravity-field,
.zero-gravity-aura,
.zero-gravity-trail,
.zero-gravity-orbit,
.zero-gravity-game {
    position: absolute;
    inset: 0;
}

.zero-gravity-backdrop {
    background:
        radial-gradient(circle at 74% 16%, rgba(247, 42, 69, 0.024) 0, transparent 22%),
        radial-gradient(circle at 54% 78%, rgba(96, 132, 255, 0.035) 0, transparent 24%);
    opacity: calc(0.7 + var(--zg-threat-level) * 0.08);
    transition: opacity 0.28s ease;
}

body.light-mode.zero-gravity-active .zero-gravity-backdrop {
    background:
        radial-gradient(circle at 74% 16%, rgba(247, 42, 69, 0.034) 0, transparent 22%),
        radial-gradient(circle at 54% 78%, rgba(51, 83, 182, 0.05) 0, transparent 24%);
    opacity: 0.9;
}

.zero-gravity-field {
    inset: 0;
    opacity: calc(0.82 + var(--zg-threat-level) * 0.06);
    transition: opacity 0.28s ease;
}

.zero-gravity-star {
    position: absolute;
    width: var(--star-size, 3px);
    height: var(--star-size, 3px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.24);
    opacity: var(--star-opacity, 0.65);
    will-change: opacity, transform, filter;
}

body.light-mode.zero-gravity-active .zero-gravity-star {
    background: rgba(20, 26, 34, 0.92);
    box-shadow: 0 0 14px rgba(20, 26, 34, 0.14);
}

.zero-gravity-aura {
    inset: auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(120, 156, 255, 0.1) 28%, rgba(247, 42, 69, 0.08) 48%, rgba(255, 255, 255, 0) 72%);
    filter: blur(12px);
    transform: translate(-50%, -50%);
    opacity: calc(0.72 + var(--zg-threat-level) * 0.12);
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.24s ease, filter 0.24s ease;
}

body.light-mode.zero-gravity-active .zero-gravity-aura {
    background:
        radial-gradient(circle, rgba(17, 22, 30, 0.12) 0%, rgba(74, 105, 194, 0.08) 28%, rgba(247, 42, 69, 0.06) 48%, rgba(255, 255, 255, 0) 72%);
    opacity: 0.58;
}

.zero-gravity-trail {
    inset: 0;
    pointer-events: none;
}

.zero-gravity-trail-dot {
    position: absolute;
    width: var(--trail-size, 5px);
    height: var(--trail-size, 5px);
    border-radius: 50%;
    background: color-mix(in srgb, rgba(255, 255, 255, 0.96) calc(88% - min(28%, var(--trail-level, 0) * 4%)), rgba(255, 214, 92, 0.85) calc(12% + min(28%, var(--trail-level, 0) * 4%)));
    box-shadow: 0 0 calc(24px + min(12px, var(--trail-level, 0) * 2px) + var(--zg-threat-level) * 8px) rgba(255, 255, 255, calc(0.22 + var(--zg-threat-level) * 0.08));
    transform: translate(-50%, -50%);
    opacity: 0.78;
    will-change: transform, opacity, scale;
}

body.light-mode.zero-gravity-active .zero-gravity-trail-dot {
    background: color-mix(in srgb, rgba(20, 26, 34, 0.94) calc(86% - min(26%, var(--trail-level, 0) * 4%)), rgba(196, 142, 8, 0.72) calc(14% + min(26%, var(--trail-level, 0) * 4%)));
    box-shadow: 0 0 calc(24px + min(10px, var(--trail-level, 0) * 2px) + var(--zg-threat-level) * 6px) rgba(20, 26, 34, calc(0.16 + var(--zg-threat-level) * 0.05));
}

.zero-gravity-orbit {
    inset: 0;
    pointer-events: none;
}

.zero-gravity-game {
    pointer-events: none;
    z-index: 2;
}

.zero-gravity-hud {
    position: absolute;
    top: clamp(18px, 3vw, 32px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.zero-gravity-kicker {
    font-size: 0.72rem;
    line-height: 1;
    font-weight: var(--weight-medium);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.zero-gravity-scoreboard {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.zero-gravity-score-block {
    min-width: 82px;
    padding: 0.72rem 0.86rem 0.78rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    transition: border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

body.zero-gravity-game-live .zero-gravity-score-block {
    border-color: color-mix(in srgb, rgba(255, 255, 255, 0.14) calc(100% - var(--zg-threat-level) * 38%), rgba(247, 42, 69, 0.28) calc(var(--zg-threat-level) * 38%));
    box-shadow: 0 18px 38px rgba(0, 0, 0, calc(0.18 + var(--zg-threat-level) * 0.05));
}

.zero-gravity-score-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.56rem;
    line-height: 1;
    font-weight: var(--weight-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.54);
}

.zero-gravity-score-value {
    display: block;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.98);
}

.zero-gravity-status {
    position: relative;
    width: max-content;
    max-width: min(42rem, 62vw);
    min-width: min(20rem, calc(100vw - 2rem));
    min-height: 3.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.72rem;
    line-height: 1.45;
    font-weight: var(--weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    text-align: center;
    text-wrap: balance;
    transition: transform 0.28s ease, opacity 0.28s ease, border-color 0.24s ease, background 0.24s ease;
}

body.zero-gravity-game-live .zero-gravity-status {
    border-color: color-mix(in srgb, rgba(255, 255, 255, 0.14) calc(100% - var(--zg-threat-level) * 34%), rgba(247, 42, 69, 0.24) calc(var(--zg-threat-level) * 34%));
}

body.zero-gravity-danger .zero-gravity-status {
    border-color: rgba(247, 42, 69, 0.28);
    background: linear-gradient(180deg, rgba(247, 42, 69, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
}

body.zero-gravity-game-live .zero-gravity-hud,
body.zero-gravity-game-live .zero-gravity-status {
    opacity: 1;
}

body.zero-gravity-game-over .zero-gravity-status {
    color: rgba(255, 255, 255, 0.94);
    border-color: rgba(247, 42, 69, 0.28);
    background: linear-gradient(180deg, rgba(247, 42, 69, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
}

body.zero-gravity-game-over .zero-gravity-score-block {
    border-color: rgba(247, 42, 69, 0.2);
    background: linear-gradient(180deg, rgba(247, 42, 69, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 18px 38px rgba(247, 42, 69, 0.08);
}

body.zero-gravity-game-over .zero-gravity-kicker {
    color: rgba(255, 255, 255, 0.88);
}

body.zero-gravity-game-over .zero-gravity-hud {
    transform: translateX(-50%) translateY(4px) scale(1.02);
}

body.zero-gravity-danger .zero-gravity-backdrop {
    opacity: calc(0.78 + var(--zg-threat-level) * 0.1);
}

body.zero-gravity-phase-pressure .zero-gravity-backdrop {
    opacity: 0.72;
}

body.zero-gravity-phase-pressure .zero-gravity-status {
    border-color: rgba(255, 214, 92, 0.2);
}

body.zero-gravity-phase-danger .zero-gravity-score-block {
    box-shadow: 0 18px 42px rgba(247, 42, 69, 0.08);
}

body.zero-gravity-phase-maximum .zero-gravity-kicker,
body.zero-gravity-phase-maximum .zero-gravity-status {
    color: rgba(255, 255, 255, 0.9);
}

body.zero-gravity-phase-maximum .zero-gravity-status {
    border-color: rgba(247, 42, 69, 0.32);
    background: linear-gradient(180deg, rgba(247, 42, 69, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
}

body.zero-gravity-super-warning .zero-gravity-status,
body.zero-gravity-super-warning .zero-gravity-score-block {
    border-color: rgba(255, 214, 92, 0.34);
    background: linear-gradient(180deg, rgba(255, 214, 92, 0.11) 0%, rgba(247, 42, 69, 0.05) 100%);
}

body.zero-gravity-super-warning .zero-gravity-hud {
    animation: zg-warning-pulse 0.34s ease-in-out 3;
}

body.zero-gravity-super-edge-left .zero-gravity-orbit::before,
body.zero-gravity-super-edge-right .zero-gravity-orbit::before,
body.zero-gravity-super-edge-top .zero-gravity-orbit::before,
body.zero-gravity-super-edge-bottom .zero-gravity-orbit::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.78;
    animation: zg-super-edge-pulse 0.34s ease-in-out 3;
}

body.zero-gravity-super-edge-left .zero-gravity-orbit::before {
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 14px;
    background: linear-gradient(90deg, rgba(255, 214, 92, 0.52) 0%, rgba(247, 42, 69, 0.18) 58%, transparent 100%);
}

body.zero-gravity-super-edge-right .zero-gravity-orbit::before {
    right: 0;
    top: 12%;
    bottom: 12%;
    width: 14px;
    background: linear-gradient(270deg, rgba(255, 214, 92, 0.52) 0%, rgba(247, 42, 69, 0.18) 58%, transparent 100%);
}

body.zero-gravity-super-edge-top .zero-gravity-orbit::before {
    top: 0;
    left: 12%;
    right: 12%;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 214, 92, 0.52) 0%, rgba(247, 42, 69, 0.18) 58%, transparent 100%);
}

body.zero-gravity-super-edge-bottom .zero-gravity-orbit::before {
    bottom: 0;
    left: 12%;
    right: 12%;
    height: 14px;
    background: linear-gradient(0deg, rgba(255, 214, 92, 0.52) 0%, rgba(247, 42, 69, 0.18) 58%, transparent 100%);
}

@keyframes zg-warning-pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.035);
    }
}

@keyframes zg-super-edge-pulse {
    0%, 100% {
        opacity: 0.18;
    }

    50% {
        opacity: 0.82;
    }
}

body.zero-gravity-danger .zero-gravity-aura {
    filter: blur(14px);
}

body.zero-gravity-danger .zero-gravity-trail-dot {
    background: color-mix(in srgb, rgba(255, 255, 255, 0.9) calc(52% - min(12%, var(--trail-level, 0) * 2%)), rgba(247, 42, 69, 0.92) calc(48% + min(12%, var(--trail-level, 0) * 2%)));
    box-shadow: 0 0 calc(26px + min(14px, var(--trail-level, 0) * 2px) + var(--zg-threat-level) * 10px) rgba(247, 42, 69, calc(0.18 + var(--zg-threat-level) * 0.12));
}

body.light-mode.zero-gravity-danger .zero-gravity-trail-dot {
    background: color-mix(in srgb, rgba(20, 26, 34, 0.82) 44%, rgba(247, 42, 69, 0.88) 56%);
    box-shadow: 0 0 calc(22px + min(10px, var(--trail-level, 0) * 2px) + var(--zg-threat-level) * 8px) rgba(247, 42, 69, calc(0.12 + var(--zg-threat-level) * 0.08));
}

.zero-gravity-entity {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--entity-size, 68px);
    height: var(--entity-size, 68px);
    transform: translate(-50%, -50%);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.zero-gravity-entity svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.zero-gravity-entity.is-moon {
    opacity: 0.92;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
}

.zero-gravity-entity.is-moon svg {
    stroke: rgba(255, 255, 255, 0.92);
    fill: none;
    stroke-width: 1.26;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zero-gravity-entity.is-moon .moon-shell {
    opacity: 0.96;
}

.zero-gravity-entity.is-moon .moon-shell.moon-crescent {
    opacity: 0.92;
}

.zero-gravity-entity.is-moon .moon-dust {
    opacity: 0.36;
}

.zero-gravity-entity.is-moon .moon-crater {
    opacity: 0.46;
}

.zero-gravity-pickup-spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
}

.zero-gravity-pickup-spark::before,
.zero-gravity-pickup-spark::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
}

.zero-gravity-pickup-spark.is-cross::before {
    width: 14px;
    height: 1.4px;
}

.zero-gravity-pickup-spark.is-cross::after {
    width: 1.4px;
    height: 14px;
}

.zero-gravity-pickup-spark.is-dot::before {
    width: 4px;
    height: 4px;
}

.zero-gravity-pickup-spark.is-dot::after {
    display: none;
}

.zero-gravity-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    opacity: 0;
}

.zero-gravity-wave.is-power {
    border-color: rgba(255, 214, 92, 0.48);
    box-shadow: 0 0 0 1px rgba(255, 214, 92, 0.14) inset;
}

.zero-gravity-wave.is-power.is-secondary {
    border-color: rgba(255, 214, 92, 0.24);
    box-shadow: 0 0 0 1px rgba(255, 214, 92, 0.08) inset;
}

.zero-gravity-wave.is-danger {
    border-color: rgba(247, 42, 69, 0.34);
    box-shadow: 0 0 0 1px rgba(247, 42, 69, 0.12) inset;
}

.zero-gravity-wave.is-danger.is-secondary {
    border-color: rgba(247, 42, 69, 0.18);
    box-shadow: 0 0 0 1px rgba(247, 42, 69, 0.06) inset;
}

.zero-gravity-wave.is-near {
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.zero-gravity-wave.is-boss {
    width: 240px;
    height: 240px;
    border-color: rgba(255, 214, 92, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 214, 92, 0.05) inset;
}

.zero-gravity-entity.is-rocket-hunter {
    width: var(--entity-size, 92px);
    height: calc(var(--entity-size, 92px) * 0.62);
    opacity: 0.95;
    filter: drop-shadow(0 0 18px rgba(247, 42, 69, 0.08));
}

.zero-gravity-entity.is-rocket-runner {
    width: var(--entity-size, 86px);
    height: calc(var(--entity-size, 86px) * 0.58);
    opacity: 0.82;
    filter: drop-shadow(0 0 14px rgba(130, 166, 255, 0.07));
}

.zero-gravity-entity.is-rocket-hunter svg {
    stroke: rgba(255, 255, 255, 0.88);
    fill: none;
    stroke-width: 1.02;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zero-gravity-entity.is-rocket-runner svg {
    stroke: rgba(196, 216, 255, 0.8);
    fill: none;
    stroke-width: 0.92;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zero-gravity-entity.is-rocket-hunter .rocket-body,
.zero-gravity-entity.is-rocket-hunter .rocket-fin {
    opacity: 0.96;
}

.zero-gravity-entity.is-rocket-runner .rocket-body,
.zero-gravity-entity.is-rocket-runner .rocket-fin {
    opacity: 0.72;
}

.zero-gravity-entity.is-rocket-hunter .rocket-detail,
.zero-gravity-entity.is-rocket-hunter .rocket-window {
    opacity: 0.52;
}

.zero-gravity-entity.is-rocket-hunter .rocket-engine,
.zero-gravity-entity.is-rocket-runner .rocket-engine {
    opacity: 0.72;
}

.zero-gravity-entity.is-rocket-runner .rocket-detail,
.zero-gravity-entity.is-rocket-runner .rocket-window {
    opacity: 0.48;
}

.zero-gravity-entity.is-rocket-hunter .rocket-glow {
    stroke: rgba(247, 42, 69, 0.58);
    opacity: 0.56;
}

.zero-gravity-entity.is-rocket-runner .rocket-glow {
    stroke: rgba(130, 166, 255, 0.74);
    opacity: 0.62;
}

.zero-gravity-entity.is-rocket-hunter .rocket-flame,
.zero-gravity-entity.is-rocket-runner .rocket-flame {
    stroke: rgba(247, 42, 69, 0.76);
    opacity: 0.9;
}

.zero-gravity-entity.is-rocket-hunter.is-breakaway {
    filter: drop-shadow(0 0 22px rgba(247, 42, 69, 0.14));
}

.zero-gravity-entity.is-rocket-hunter.is-breakaway .rocket-glow {
    stroke: rgba(255, 214, 92, 0.78);
    opacity: 0.74;
}

.zero-gravity-entity.is-rocket-hunter.is-breakaway .rocket-flame {
    stroke: rgba(255, 214, 92, 0.82);
}

.zero-gravity-entity.is-orbital-hunter {
    width: var(--entity-size, 142px);
    height: calc(var(--entity-size, 142px) * 0.72);
    filter: drop-shadow(0 0 12px rgba(255, 214, 92, 0.07)) drop-shadow(0 0 8px rgba(247, 42, 69, 0.06));
}

.zero-gravity-entity.is-super-runner-boss {
    width: var(--entity-size, 304px);
    height: calc(var(--entity-size, 304px) * 0.62);
    opacity: 0.96;
    filter: drop-shadow(0 0 28px rgba(255, 214, 92, 0.18)) drop-shadow(0 0 22px rgba(247, 42, 69, 0.13));
    --boss-damage: 0;
}

.zero-gravity-entity.is-super-runner-boss svg {
    stroke-width: 1.14;
}

.zero-gravity-entity.is-super-runner-boss .rocket-body,
.zero-gravity-entity.is-super-runner-boss .rocket-fin,
.zero-gravity-entity.is-super-runner-boss .rocket-detail,
.zero-gravity-entity.is-super-runner-boss .rocket-window {
    opacity: calc(1 - (var(--boss-damage) * 0.18));
}

.zero-gravity-entity.is-super-runner-boss .rocket-glow {
    stroke: rgba(255, 214, 92, 0.82);
    opacity: calc(0.86 - (var(--boss-damage) * 0.28));
}

.zero-gravity-entity.is-super-runner-boss .rocket-flame {
    stroke: rgba(247, 42, 69, 0.88);
    opacity: calc(0.96 - (var(--boss-damage) * 0.22));
}

.zero-gravity-entity.is-super-escort-runner {
    filter: drop-shadow(0 0 16px rgba(255, 214, 92, 0.1)) drop-shadow(0 0 10px rgba(247, 42, 69, 0.08));
}

.zero-gravity-entity.is-super-escort-runner .rocket-glow {
    stroke: rgba(255, 214, 92, 0.7);
    opacity: 0.74;
}

.zero-gravity-entity.is-super-runner-boss.is-damaged {
    filter:
        drop-shadow(0 0 calc(28px - (var(--boss-damage) * 10px)) rgba(255, 214, 92, calc(0.18 - (var(--boss-damage) * 0.08))))
        drop-shadow(0 0 calc(22px + (var(--boss-damage) * 6px)) rgba(247, 42, 69, calc(0.13 + (var(--boss-damage) * 0.08))));
}

.zero-gravity-entity.is-super-runner-boss.is-final-phase {
    filter:
        drop-shadow(0 0 18px rgba(255, 214, 92, 0.08))
        drop-shadow(0 0 30px rgba(247, 42, 69, 0.28));
}

.zero-gravity-entity.is-super-runner-boss.is-final-phase .rocket-glow {
    stroke: rgba(247, 42, 69, 0.86);
    opacity: 0.34;
}

.zero-gravity-entity.is-super-runner-boss.is-final-phase .rocket-flame {
    stroke: rgba(255, 214, 92, 0.94);
    opacity: 1;
}

.zero-gravity-entity.is-orbital-hunter svg {
    stroke-width: 1.1;
}

.zero-gravity-entity.is-orbital-hunter .rocket-body,
.zero-gravity-entity.is-orbital-hunter .rocket-fin,
.zero-gravity-entity.is-orbital-hunter .rocket-detail,
.zero-gravity-entity.is-orbital-hunter .rocket-window {
    opacity: 1;
}

.zero-gravity-entity.is-orbital-hunter .rocket-glow {
    stroke: rgba(255, 214, 92, 0.62);
    opacity: 0.56;
}

.zero-gravity-entity.is-orbital-hunter .rocket-flame {
    stroke: rgba(255, 214, 92, 0.72);
    opacity: 0.78;
}

.orbital-hunter-halo,
.orbital-hunter-telegraph {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbital-hunter-halo {
    width: 154%;
    height: 154%;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 92, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 214, 92, 0.03) inset;
    opacity: 0.28;
}

.orbital-hunter-telegraph {
    width: 168%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 214, 92, 0) 0%, rgba(255, 214, 92, 0.06) 18%, rgba(255, 214, 92, 0.34) 50%, rgba(255, 214, 92, 0.06) 82%, rgba(255, 214, 92, 0) 100%);
    opacity: 0;
    transform-origin: center;
    filter: blur(0.2px);
}

.zero-gravity-entity.is-rocket-runner .rocket-detail {
    stroke-dasharray: 3.4 3.8;
}

.zero-gravity-entity.is-power-star {
    opacity: 0.98;
    filter: drop-shadow(0 0 18px rgba(255, 209, 77, 0.16));
}

.zero-gravity-entity.is-power-star svg {
    stroke: rgba(255, 214, 92, 0.96);
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zero-gravity-entity.is-power-star .power-core {
    opacity: 0.98;
    fill: rgba(255, 214, 92, 0.18);
}

.zero-gravity-entity.is-power-star .power-ring {
    opacity: 0.48;
}

body.light-mode.zero-gravity-active .zero-gravity-kicker,
body.light-mode.zero-gravity-active .zero-gravity-score-value,
body.light-mode.zero-gravity-active .zero-gravity-status,
body.light-mode.zero-gravity-active .zero-gravity-entity.is-moon svg,
body.light-mode.zero-gravity-active .zero-gravity-entity.is-rocket-hunter svg,
body.light-mode.zero-gravity-active .zero-gravity-entity.is-rocket-runner svg,
body.light-mode.zero-gravity-active .zero-gravity-entity.is-power-star svg {
    color: rgba(20, 26, 34, 0.92);
    stroke: rgba(20, 26, 34, 0.92);
}

body.light-mode.zero-gravity-active .zero-gravity-score-block,
body.light-mode.zero-gravity-active .zero-gravity-status {
    border-color: rgba(20, 26, 34, 0.14);
    background: linear-gradient(180deg, rgba(20, 26, 34, 0.06) 0%, rgba(20, 26, 34, 0.02) 100%);
    box-shadow: 0 18px 38px rgba(20, 26, 34, 0.08);
}

body.light-mode.zero-gravity-active .zero-gravity-score-label {
    color: rgba(20, 26, 34, 0.5);
}

body.light-mode.zero-gravity-active .zero-gravity-entity.is-rocket-hunter .rocket-glow {
    stroke: rgba(247, 42, 69, 0.5);
}

body.light-mode.zero-gravity-active .zero-gravity-entity.is-rocket-runner .rocket-glow {
    stroke: rgba(74, 105, 194, 0.46);
}

body.light-mode.zero-gravity-active .zero-gravity-entity.is-rocket-runner svg {
    stroke: rgba(52, 76, 122, 0.84);
}

body.light-mode.zero-gravity-active .zero-gravity-entity.is-power-star svg {
    stroke: rgba(196, 142, 8, 0.94);
}

body.light-mode.zero-gravity-active .zero-gravity-entity.is-power-star .power-core {
    fill: rgba(255, 214, 92, 0.22);
}

body.light-mode.zero-gravity-active .zero-gravity-wave {
    border-color: rgba(20, 26, 34, 0.18);
}

body.light-mode.zero-gravity-active .zero-gravity-wave.is-power {
    border-color: rgba(196, 142, 8, 0.38);
}

body.light-mode.zero-gravity-active .zero-gravity-wave.is-power.is-secondary {
    border-color: rgba(196, 142, 8, 0.22);
}

body.light-mode.zero-gravity-active .zero-gravity-wave.is-danger {
    border-color: rgba(219, 48, 74, 0.28);
}

.zero-gravity-satellite {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity;
}

.zero-gravity-satellite::before,
.zero-gravity-satellite::after {
    content: '';
    position: absolute;
}

.zero-gravity-satellite.is-star::before {
    width: 6px;
    height: 6px;
    top: -3px;
    left: -3px;
    background: rgba(255, 255, 255, 0.94);
    clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.22);
}

body.light-mode.zero-gravity-active .zero-gravity-satellite.is-star::before {
    background: rgba(20, 26, 34, 0.94);
    box-shadow: 0 0 16px rgba(20, 26, 34, 0.14);
}

.zero-gravity-satellite.is-rocket {
    width: 18px;
    height: 8px;
    border-radius: 999px 999px 999px 999px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.34) 100%);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

body.light-mode.zero-gravity-active .zero-gravity-satellite.is-rocket {
    border-color: rgba(20, 26, 34, 0.84);
    background: linear-gradient(90deg, rgba(20, 26, 34, 0.04) 0%, rgba(20, 26, 34, 0.24) 100%);
    box-shadow: 0 0 18px rgba(20, 26, 34, 0.1);
}

.zero-gravity-satellite.is-rocket::before {
    width: 10px;
    height: 1px;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(247, 42, 69, 0) 0%, rgba(247, 42, 69, 0.55) 100%);
    filter: blur(0.4px);
}

.zero-gravity-satellite.is-rocket::after {
    width: 2px;
    height: 2px;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
}

body.light-mode.zero-gravity-active .zero-gravity-satellite.is-rocket::after {
    background: rgba(20, 26, 34, 0.72);
}

.zero-gravity-satellite.is-ring {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(130, 166, 255, 0.8);
    box-shadow: 0 0 20px rgba(130, 166, 255, 0.12);
}

.zero-gravity-satellite.is-comet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

body.light-mode.zero-gravity-active .zero-gravity-satellite.is-comet {
    background: rgba(20, 26, 34, 0.92);
    box-shadow: 0 0 16px rgba(20, 26, 34, 0.12);
}

.zero-gravity-satellite.is-comet::before {
    width: 18px;
    height: 1px;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(96, 132, 255, 0.58) 100%);
    filter: blur(0.5px);
}

.zero-gravity-satellite.is-dust {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(247, 42, 69, 0.84);
    box-shadow: 0 0 12px rgba(247, 42, 69, 0.16);
}

@media (max-width: 991px) {
    .zero-gravity-layer {
        display: none;
    }
}

/* ══════════════════════
   TYPOGRAPHIC HIERARCHY
   ══════════════════════ */

/* Display titles — massive, cinematic */
.display-xl,
.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    font-weight: var(--weight-black);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
    text-transform: uppercase;
}

.display-lg {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    text-transform: uppercase;
}

.display-md {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

.display-sm {
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

/* Headings — structured content */
h1,
.h1 {
    font-family: var(--font-display);
    font-size: var(--text-heading-1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

h2,
.h2 {
    font-family: var(--font-display);
    font-size: var(--text-heading-2);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
}

h3,
.h3 {
    font-family: var(--font-display);
    font-size: var(--text-heading-3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

/* Body text */
p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}

.lead {
    font-size: var(--text-body-lg);
    line-height: var(--leading-relaxed);
    font-weight: var(--weight-light);
    color: var(--text-muted);
    max-width: 680px;
}

.body-sm {
    font-size: var(--text-body-sm);
    line-height: var(--leading-normal);
    color: var(--text-subtle);
}

/* Overlines & Labels — uppercase micro text */
.overline {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-subtle);
    line-height: 1;
}

.portfolio-desc strong {
    font-weight: var(--weight-light);
}

.label {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: 1;
}

.caption {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
    color: var(--text-subtle);
    line-height: var(--leading-normal);
}

/* ══════════════════════
   LAYOUT WRAPPER
   ══════════════════════ */
.main-wrapper {
    position: relative;
    width: 100%;
    z-index: 10;
    /* Bring reveal/portfolio content earlier so Selected Work peeks sooner */
    padding-top: 72vh;
    transition: background-color 0.32s ease;
}

/* ══════════════════════
   CUSTOM CURSOR
   ══════════════════════ */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    padding: 12px 18px 12px 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    z-index: 10000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    will-change: transform;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.custom-cursor::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    opacity: 1;
    transform: translate(5px, 5px);
    pointer-events: none;
}

.cursor-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.15s ease !important;
    /* Desaparece rápidamente al hover sobre botones */
}

.cursor-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.custom-cursor,
.custom-cursor * {
    cursor: default !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.lang-switcher,
.lang-switcher * {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.pill-pop {
    animation: pillPop 0.35s ease-out;
}

@keyframes pillPop {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

.cursor-play-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.cursor-pause-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ══════════════════════
   HEADER
   ══════════════════════ */
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 40px 50px;
    display: flex;
    justify-content: space-between;
    z-index: 10000;
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease;
    pointer-events: none;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    position: relative;
    display: inline-block;
    height: 50px;
    pointer-events: auto;
    cursor: pointer;
}

.logo-img {
    height: 100%;
    transition: opacity 0.38s ease;
}

.logo-black {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.logo-white {
    opacity: 1;
}

.hamburger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    pointer-events: auto;
    color: inherit;
}

.hamburger:focus-visible,
.menu-nav a:focus-visible,
.lang-btn:focus-visible,
.contact-fixed-btn:focus-visible,
.portfolio-btn:focus-visible,
.control-btn:focus-visible,
.contact-cta-link:focus-visible,
.footer-email-link:focus-visible,
.footer-social-link:focus-visible {
    outline-color: rgba(247, 42, 69, 0.92);
}

.hamburger .line {
    width: 30px;
    height: 2px;
    background-color: var(--text-color);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1),
        opacity 0.3s ease,
        background-color 0.38s ease;
}

/* X Animation */
.hamburger.is-active .line-1 {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .line-2 {
    opacity: 0;
}

.hamburger.is-active .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Cinema Mode Exit Class */
.exit-up {
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    transition-delay: 0s !important;
}

/* ══════════════════════
   LANGUAGE SWITCHER & FLOATING CONTACT
   ══════════════════════ */
.lang-switcher,
.floating-contact {
    position: fixed;
    bottom: 50px;
    z-index: 9998;
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    pointer-events: auto;
}

.lang-switcher {
    left: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    mix-blend-mode: difference;
    z-index: 9998;
}

.floating-contact {
    right: 60px;
    mix-blend-mode: difference;
    z-index: 9998;
}

.contact-fixed-btn {
    appearance: none;
    background: transparent;
    border: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding-bottom: 8px;
    /* Space for the line */
    transition: color 0.24s ease, opacity 0.24s ease;
}

.contact-fixed-btn:hover {
    opacity: 1;
}

.contact-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    /* Solid line like the reference */
    background: currentColor;
    transition: transform 0.24s ease;
}

.contact-fixed-btn:hover .contact-line {
    transform: scaleX(1.05);
}

.contact-arrow svg {
    display: block;
    transition: transform 0.24s ease;
}

.contact-fixed-btn:hover .contact-arrow svg {
    transform: translate(-3px, 3px);
}

.lang-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    padding: 6px 8px;
    opacity: 0.5;
    transition: opacity 0.24s ease, color 0.24s ease;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.lang-btn:hover {
    opacity: 0.8;
}

.lang-btn.is-active {
    opacity: 1;
}

.lang-divider {
    color: #fff;
    opacity: 0.3;
    font-weight: var(--weight-light);
}



/* ══════════════════════
   MENU OVERLAY
   ══════════════════════ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    z-index: 100099;
    display: flex;
    align-items: center;
    justify-content: center;
    --menu-origin-x: 95%;
    --menu-origin-y: 5%;
    clip-path: circle(0% at var(--menu-origin-x) var(--menu-origin-y));
    transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: clip-path;
    transform: translateZ(0);
    backface-visibility: hidden;
    isolation: isolate;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.menu-overlay.is-active {
    clip-path: circle(150% at var(--menu-origin-x) var(--menu-origin-y));
}

body.menu-open .main-header,
body.overlay-menu-open .main-header,
body.fp-overlay-open .main-header,
body.project-overlay-open .main-header {
    z-index: 100101;
}

.menu-nav ul {
    list-style: none;
}

.menu-nav li {
    margin: 1.5rem 0;
    text-align: center;
}

.menu-nav a {
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vh, 6rem);
    font-weight: var(--weight-black);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tighter);
    transition: opacity 0.24s ease, letter-spacing 0.32s cubic-bezier(0.7, 0, 0.3, 1);
    line-height: var(--leading-tight);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.menu-nav a:hover {
    opacity: 0.72;
    letter-spacing: 0.03em;
}

.menu-nav .char,
.menu-nav a::selection,
.menu-nav .char::selection {
    background: transparent;
    color: inherit;
}

.menu-nav .char,
.menu-nav a span,
.menu-nav a .word {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.menu-nav,
.menu-nav * {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ══════════════════════
   GRAIN OVERLAY
   ══════════════════════ */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

body.browser-safari .grain-overlay {
    display: none;
}

/* ══════════════════════
   SECTIONS
   ══════════════════════ */
section {
    position: relative;
    width: 100%;
}

/* ══════════════════════
   HERO SECTION
   ══════════════════════ */
.hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 1;
    overflow: hidden;
    will-change: transform;
}

.hero.cinema-mode-active {
    z-index: 10030;
}

/* Show pointer on interactive elements */
a,
button,
.hamburger,
.logo,
.control-btn,
.magnetic-btn-wrap {
    cursor: pointer;
}

body.touch-device a,
body.touch-device button,
body.touch-device .hamburger,
body.touch-device .logo,
body.touch-device .control-btn,
body.touch-device .mobile-cinema-toggle,
body.touch-device .portfolio-btn,
body.touch-device .portfolio-card,
body.touch-device .fp-card,
body.touch-device .lang-btn,
body.touch-device .contact-fixed-btn,
body.touch-device .services-item-header,
body.touch-device .menu-nav a,
body.touch-device .fp-close-btn,
body.touch-device .project-detail-close,
body.touch-device .contact-cta-link,
body.touch-device .footer-email-link,
body.touch-device .footer-social-link,
body.touch-device .magnetic-btn-wrap,
body.hero-mobile-layout a,
body.hero-mobile-layout button,
body.hero-mobile-layout .hamburger,
body.hero-mobile-layout .logo,
body.hero-mobile-layout .control-btn,
body.hero-mobile-layout .mobile-cinema-toggle,
body.hero-mobile-layout .portfolio-btn,
body.hero-mobile-layout .portfolio-card,
body.hero-mobile-layout .fp-card,
body.hero-mobile-layout .lang-btn,
body.hero-mobile-layout .contact-fixed-btn,
body.hero-mobile-layout .services-item-header,
body.hero-mobile-layout .menu-nav a,
body.hero-mobile-layout .fp-close-btn,
body.hero-mobile-layout .project-detail-close,
body.hero-mobile-layout .contact-cta-link,
body.hero-mobile-layout .footer-email-link,
body.hero-mobile-layout .footer-social-link,
body.hero-mobile-layout .magnetic-btn-wrap {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.hero-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #050505;
    overflow: hidden;
}

.hero-video-fallback {
    position: absolute;
    inset: 0;
    background-color: #050505;
    background-image: url('assets/hero/hero-reel-poster-v2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0.7);
    transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.hero-video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1), filter 1s cubic-bezier(0.7, 0, 0.3, 1), transform 1s cubic-bezier(0.7, 0, 0.3, 1);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

body.touch-device .hero-video-container.hero-video-fallback-active .hero-video {
    opacity: 0;
}

body.touch-device .hero-video-container.hero-video-fallback-active .hero-video-fallback {
    opacity: 1;
}

.video-active {
    filter: brightness(1) !important;
    transform: scale(1.05) !important;
}

/* Hero UI */
.hero-ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease;
    pointer-events: none;

    color: #fff;
}

.hero-copy-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.58rem;
    text-align: center;
}

.hero-pill-slot {
    width: auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

body.touch-device .hero-pill-slot,
body.hero-mobile-layout .hero-pill-slot {
    min-height: clamp(42px, 5.8vh, 56px);
}

html[lang="en"] body.touch-device .hero-pill-slot,
html[lang="en"] body.hero-mobile-layout .hero-pill-slot {
    margin-top: 0.32rem;
}

html[lang="en"] body.hero-mobile-layout:not(.touch-device) .hero-pill-slot {
    margin-top: 1rem;
}

/* Hero title */
.hero-title {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
    font-size: clamp(3.1rem, 8.3vw, 7.6rem);
    line-height: 0.84;
    letter-spacing: 0;
    width: fit-content;
    max-width: 100%;

    /* Uncommon Studio effect: Difference blend mode with pure white text */
    color: #ffffff;
    mix-blend-mode: difference;
    opacity: 1;
    will-change: transform, opacity;

    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease, color 0.32s ease;
}

.hero-line {
    display: block;
}

.hero-line-break {
    display: none;
}

html[lang="es"] .hero-title .hero-line:not(.hero-line-second) {
    font-size: 0.5em;
    line-height: 0.88;
    letter-spacing: 0.014em;
    margin-bottom: -0.11em;
}

html[lang="es"] .hero-title {
    line-height: 0.84;
    font-size: clamp(4.14rem, 11.17vw, 9.92rem);
}

html[lang="es"] .hero-line-second {
    line-height: 0.84;
    font-size: 1em;
}

html[lang="en"] .hero-title .hero-line:not(.hero-line-second) {
    line-height: 0.82;
    font-size: 0.98em;
    margin-bottom: -0.05em;
}

html[lang="en"] .hero-line-second {
    font-size: 0.355em;
    line-height: 0.9;
    letter-spacing: 0.026em;
    margin-top: 0;
}

html[lang="en"] .hero-title {
    line-height: 0.84;
    font-size: clamp(4.2rem, 11.3vw, 10.2rem);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 1);
    margin-top: 0.3rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Entrance/Exit handled by GSAP introTl and cinema mode TL */
    will-change: transform, opacity;
}

html[lang="en"] .hero-subtitle { margin-top: 0; }

html[lang="es"] .hero-subtitle {
    font-size: clamp(0.8rem, 1.04vw, 0.98rem);
    max-width: 35rem;
    margin-top: 0.04rem;
    line-height: 1.12;
    text-wrap: balance;
}

@media (max-width: 1100px) {
    body:not(.touch-device) .hero-copy-stack {
        width: min(86vw, 46rem);
        gap: 0.56rem;
    }

    body:not(.touch-device) .hero-title {
        font-size: clamp(2.8rem, 8.2vw, 6.4rem);
        line-height: 0.86;
    }

    html[lang="es"] body:not(.touch-device) .hero-title {
        font-size: clamp(3.2rem, 9vw, 7.2rem);
    }

    body:not(.touch-device) .hero-subtitle {
        font-size: clamp(0.84rem, 1.3vw, 1rem);
        max-width: 34rem;
        margin-top: 0;
        text-wrap: balance;
    }

    html[lang="es"] body:not(.touch-device) .hero-subtitle {
        font-size: clamp(0.78rem, 1.12vw, 0.92rem);
        max-width: 28rem;
    }
}

@media (max-width: 820px) {
    body:not(.touch-device) .hero-copy-stack {
        width: min(92vw, 32rem);
        gap: 0.5rem;
    }

    body:not(.touch-device) .hero-title {
        font-size: clamp(2.3rem, 9vw, 4.9rem);
        line-height: 0.88;
    }

    html[lang="es"] body:not(.touch-device) .hero-title {
        font-size: clamp(2.6rem, 10vw, 5.4rem);
    }

    body:not(.touch-device) .hero-subtitle {
        font-size: clamp(0.72rem, 1.7vw, 0.88rem);
        max-width: 22rem;
    }

    html[lang="es"] body:not(.touch-device) .hero-subtitle {
        font-size: clamp(0.68rem, 1.45vw, 0.8rem);
        max-width: 16rem;
        line-height: 1.18;
    }
}

/* Scroll Indicator */
.scroll-entrance-wrap {
    /* Entrance handled by GSAP introTl */
    will-change: transform, opacity;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 1;
    /* Handled by GSAP */
    will-change: transform, opacity;
}

.scroll-text-glitch {
    position: relative;
    display: inline-block;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    animation: scroll-glitch-jitter 4.2s infinite linear;
}

.scroll-text-glitch::before,
.scroll-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.scroll-text-glitch::before {
    color: rgba(255, 72, 163, 0.78);
    transform: translateX(0);
    animation: scroll-glitch-layer-a 4.2s infinite linear;
}

.scroll-text-glitch::after {
    color: rgba(88, 233, 255, 0.78);
    transform: translateX(0);
    animation: scroll-glitch-layer-b 4.2s infinite linear;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes scroll-glitch-jitter {

    0%,
    76%,
    100% {
        transform: translate3d(0, 0, 0);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    78% {
        transform: translate3d(-1px, 0, 0);
        text-shadow: -1px 0 rgba(255, 72, 163, 0.14), 1px 0 rgba(88, 233, 255, 0.14);
    }

    79% {
        transform: translate3d(1px, 0, 0);
        text-shadow: -1px 0 rgba(255, 72, 163, 0.2), 1px 0 rgba(88, 233, 255, 0.2);
    }

    80% {
        transform: translate3d(0, 0, 0);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

@keyframes scroll-glitch-layer-a {

    0%,
    76%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }

    77.5% {
        opacity: 0.55;
        transform: translate3d(-1.5px, -0.5px, 0);
        clip-path: inset(0 0 48% 0);
    }

    79% {
        opacity: 0.24;
        transform: translate3d(0.75px, 0, 0);
        clip-path: inset(62% 0 0 0);
    }

    80% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes scroll-glitch-layer-b {

    0%,
    76%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }

    78% {
        opacity: 0.5;
        transform: translate3d(1.5px, 0.5px, 0);
        clip-path: inset(50% 0 10% 0);
    }

    79.5% {
        opacity: 0.22;
        transform: translate3d(-0.75px, 0, 0);
        clip-path: inset(8% 0 62% 0);
    }

    80% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
}

/* ══════════════════════
   CINEMA CONTROLS
   ══════════════════════ */
.cinema-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
    will-change: opacity, transform;
}

.cinema-controls.visible {
    opacity: 1;
    pointer-events: auto;
}

body.touch-device .cinema-controls,
body.hero-mobile-layout .cinema-controls {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    transform: translateY(16px);
    padding: 0 18px;
    align-items: flex-end;
    z-index: 10020;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

body.touch-device .cinema-controls.visible,
body.hero-mobile-layout .cinema-controls.visible {
    transform: translateY(0);
}

.cinema-controls-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.control-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    padding: 12px 18px 12px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.control-btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    opacity: 0;
    transform: translate(4px, 4px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.control-btn svg {
    transition: transform 0.22s ease, color 0.22s ease, stroke 0.22s ease;
}

.control-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
    transform: translate(-2px, -2px);
}

.control-btn:hover::before {
    opacity: 1;
    transform: translate(6px, 6px);
}

.control-btn:hover svg {
    transform: translateX(2px);
    stroke: currentColor;
}

.control-btn.is-muted {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
}

.control-btn.is-muted::before {
    opacity: 1;
    transform: translate(6px, 6px);
}

body.touch-device .control-btn:hover,
body.hero-mobile-layout .control-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: none;
}

body.touch-device .control-btn:hover::before,
body.hero-mobile-layout .control-btn:hover::before {
    opacity: 0;
    transform: translate(4px, 4px);
}

body.touch-device .control-btn:hover svg,
body.hero-mobile-layout .control-btn:hover svg {
    transform: none;
    stroke: currentColor;
}

body.touch-device .control-btn.is-muted:hover,
body.hero-mobile-layout .control-btn.is-muted:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
}

body.touch-device .control-btn.is-muted:hover::before,
body.hero-mobile-layout .control-btn.is-muted:hover::before {
    opacity: 1;
    transform: translate(6px, 6px);
}

/* ══════════════════════
   PLAY / PAUSE BUTTON
   ══════════════════════ */
.magnetic-btn-wrap {
    display: inline-block;
    cursor: pointer;
}

.mobile-cinema-toggle {
    display: none;
}

.hero-control-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.touch-device .mobile-cinema-toggle,
body.hero-mobile-layout .mobile-cinema-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.1vw, 8px);
    min-width: clamp(118px, 22vw, 168px);
    padding: clamp(7px, 1.2vw, 11px) clamp(11px, 1.7vw, 18px) clamp(7px, 1.2vw, 11px) clamp(9px, 1.5vw, 15px);
    border-radius: clamp(10px, 1.6vw, 12px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(0.62rem, 1.35vw, 0.78rem);
    font-weight: var(--weight-bold);
    letter-spacing: clamp(0.05em, 0.12vw, 0.08em);
    text-transform: uppercase;
    z-index: 20;
    pointer-events: auto;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
    margin-top: clamp(0.5rem, 1.8vh, 1rem);
}

body.touch-device .mobile-cinema-icon,
body.hero-mobile-layout .mobile-cinema-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.touch-device .mobile-cinema-icon svg,
body.hero-mobile-layout .mobile-cinema-icon svg {
    width: clamp(12px, 1.5vw, 14px);
    height: clamp(12px, 1.5vw, 14px);
}

body.touch-device .mobile-cinema-label,
body.hero-mobile-layout .mobile-cinema-label {
    line-height: 1;
    text-align: center;
}

body.touch-device .hero.cinema-mode-active .hero-pill-slot,
body.hero-mobile-layout .hero.cinema-mode-active .hero-pill-slot {
    pointer-events: none;
}

body.touch-device .hero.cinema-mode-active .hero-copy-stack > .hero-pill-slot .mobile-cinema-toggle,
body.hero-mobile-layout .hero.cinema-mode-active .hero-copy-stack > .hero-pill-slot .mobile-cinema-toggle {
    opacity: 0;
    visibility: hidden;
}

.cinema-play-toggle {
    display: none;
}

body.touch-device .cinema-play-toggle,
body.hero-mobile-layout .cinema-play-toggle {
    display: inline-flex;
    min-width: clamp(84px, 17vw, 104px);
    padding: clamp(8px, 1.25vw, 12px) clamp(12px, 1.65vw, 18px);
}

.cinema-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.touch-device .main-header {
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    border-radius: 22px;
}

body.touch-device .header-inner {
    min-height: 62px;
    padding: 0 12px 0 16px;
    background: rgba(10, 15, 22, 0.2);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    position: relative;
}

body.touch-device .header-inner::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0.02) 100%);
    opacity: 0.7;
    pointer-events: none;
}

body.touch-device .logo {
    height: 34px;
    display: inline-flex;
    align-items: center;
}

body.touch-device .logo-img {
    height: 34px;
}

body.touch-device .hamburger {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

body.touch-device .hamburger .line {
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
}

body.touch-device .main-header.menu-open .header-inner {
    background: rgba(10, 15, 22, 0.14);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
    body.touch-device .hero-copy-stack {
        width: min(78vw, 22rem);
        gap: 0.56rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(2.15rem, 9vw, 3.65rem);
        max-width: 100%;
        text-wrap: pretty;
        letter-spacing: 0;
        line-height: 0.84;
    }

    body.touch-device .hero-subtitle {
        font-size: clamp(0.74rem, 2.3vw, 0.88rem);
        max-width: 18rem;
        text-wrap: balance;
        text-align: center;
        margin-top: 0;
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        font-size: clamp(0.68rem, 2.08vw, 0.8rem);
        max-width: 15rem;
    }

}

@media (orientation: landscape) and (max-height: 820px) and (max-width: 900px) {
    body.touch-device .mobile-cinema-toggle.is-pause {
        padding: clamp(6px, 1vw, 8px) clamp(9px, 1.3vw, 12px);
    }

    body.touch-device .portfolio-spacer-top {
        height: 18vh;
    }
}

body.touch-device .js-close-cinema {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.touch-device .js-close-cinema::before {
    border-color: rgba(255, 255, 255, 0.08);
}

body.touch-device .control-btn,
body.hero-mobile-layout .control-btn,
body.touch-device .mobile-cinema-toggle,
body.hero-mobile-layout .mobile-cinema-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .control-btn.is-pressed,
body.hero-mobile-layout .control-btn.is-pressed,
body.touch-device .mobile-cinema-toggle.is-pressed,
body.hero-mobile-layout .mobile-cinema-toggle.is-pressed {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
    transform: translate(-2px, -2px);
}

body.touch-device .control-btn.is-pressed::before,
body.hero-mobile-layout .control-btn.is-pressed::before,
body.touch-device .mobile-cinema-toggle.is-pressed::before,
body.hero-mobile-layout .mobile-cinema-toggle.is-pressed::before {
    opacity: 1;
    transform: translate(6px, 6px);
}

body.touch-device .control-btn.is-pressed svg,
body.hero-mobile-layout .control-btn.is-pressed svg,
body.touch-device .mobile-cinema-toggle.is-pressed svg,
body.hero-mobile-layout .mobile-cinema-toggle.is-pressed svg {
    stroke: currentColor;
}

body.touch-device .js-scroll-indicator-wrap,
body.touch-device .scroll-indicator {
    display: none !important;
}

body.touch-device .card-button-row .portfolio-btn,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn,
body.touch-device .portfolio-more-card .portfolio-btn,
body.hero-mobile-layout .card-button-row .portfolio-btn,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
    transform: translate(-2px, -2px);
}

body.touch-device .card-button-row .portfolio-btn::before,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.touch-device .portfolio-more-card .portfolio-btn::before,
body.hero-mobile-layout .card-button-row .portfolio-btn::before,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn::before {
    opacity: 1;
    transform: translate(6px, 6px);
    border-color: rgba(255, 255, 255, 0.08);
}

body.touch-device .card-button-row .portfolio-btn .btn-icon-wrap,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap,
body.touch-device .portfolio-more-card .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .card-button-row .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn .btn-icon-wrap {
    color: currentColor;
    transform: translateX(2px);
}

body.touch-device.light-mode .card-button-row .portfolio-btn,
body.touch-device.light-mode .full-portfolio-overlay .card-button-row .portfolio-btn,
body.touch-device.light-mode .portfolio-more-card .portfolio-btn,
body.hero-mobile-layout.light-mode .card-button-row .portfolio-btn,
body.hero-mobile-layout.light-mode .full-portfolio-overlay .card-button-row .portfolio-btn,
body.hero-mobile-layout.light-mode .portfolio-more-card .portfolio-btn {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
    transform: translate(-2px, -2px);
}

body.touch-device.light-mode .card-button-row .portfolio-btn::before,
body.touch-device.light-mode .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.touch-device.light-mode .portfolio-more-card .portfolio-btn::before,
body.hero-mobile-layout.light-mode .card-button-row .portfolio-btn::before,
body.hero-mobile-layout.light-mode .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.hero-mobile-layout.light-mode .portfolio-more-card .portfolio-btn::before {
    opacity: 1;
    transform: translate(6px, 6px);
    border-color: rgba(255, 255, 255, 0.08);
}

body.touch-device .card-button-row .portfolio-btn.is-pressed,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.12);
    transform: translate(0, 0);
}

body.touch-device .card-button-row .portfolio-btn.is-pressed::before,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed::before,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed::before {
    opacity: 0;
    transform: translate(0, 0);
}

body.touch-device .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed .btn-icon-wrap {
    color: currentColor;
    transform: translateX(0);
}

body.touch-device .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.touch-device .portfolio-more-card .portfolio-btn .btn-icon-wrap svg {
    stroke: currentColor;
}

body.touch-device .portfolio-card,
body.touch-device .fp-card,
body.hero-mobile-layout .portfolio-card,
body.hero-mobile-layout .fp-card {
    pointer-events: none;
}

body.touch-device .portfolio-card .portfolio-btn,
body.touch-device .fp-card .portfolio-btn,
body.hero-mobile-layout .portfolio-card .portfolio-btn,
body.hero-mobile-layout .fp-card .portfolio-btn {
    pointer-events: auto;
}

body.touch-device,
body.hero-mobile-layout,
body.touch-device.light-mode,
body.hero-mobile-layout.light-mode,
body.touch-device .portfolio-section,
body.hero-mobile-layout .portfolio-section,
body.touch-device .method-section,
body.hero-mobile-layout .method-section,
body.touch-device .services-section,
body.hero-mobile-layout .services-section,
body.touch-device .contact-footer-section,
body.hero-mobile-layout .contact-footer-section,
body.touch-device .main-wrapper,
body.hero-mobile-layout .main-wrapper,
body.touch-device .portfolio-scroll-wrapper::before,
body.hero-mobile-layout .portfolio-scroll-wrapper::before {
    transition: none !important;
}

.magnetic-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: border-color 0.3s ease;
}

.magnetic-btn:hover {
    border-color: var(--accent-color);
}

.btn-icon {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid var(--text-color);
    margin-left: 5px;
}

/* ══════════════════════
   SECTION REVEAL (IRIS OUT)
   ══════════════════════ */
.section-reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 50;
    clip-path: inset(50% 0% 50% 0%);
    -webkit-clip-path: inset(50% 0% 50% 0%);
    background-color: #13171d;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    overflow: hidden;
    pointer-events: none;
}

.reveal-inner-container {
    display: flex;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    gap: 14rem;
    align-items: flex-start;
}

.reveal-label-wrap {
    flex: 0 0 auto;
    width: 200px;
    /* Gives enough space for label and line */
    margin-top: -3rem;
    /* Adjusted slightly lower from -4rem */
}

.reveal-content {
    flex: 1;
    position: relative;
    max-width: 900px;
    text-align: left;
}

.reveal-content h2.fill-text-stagger {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.8vw, 3.2rem);
    font-weight: var(--weight-bold);
    text-transform: none;
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    max-width: 100%;
}

/* GSAP SplitType Wrappers */
.fill-text-stagger .line,
.portfolio-title .line,
.js-method-title-fill .line {
    /* Gradient sweep with soft edge */
    background: linear-gradient(to right,
            currentColor 0%,
            currentColor 40%,
            rgba(150, 150, 150, 0.15) 60%,
            rgba(150, 150, 150, 0.15) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    padding-bottom: 0.1em;
    /* prevent descenders from being clipped */
    margin-bottom: -0.1em;
}

body.light-mode .js-method-title-fill .line {
    background: linear-gradient(to right,
            #1a1a1a 0%,
            #1a1a1a 40%,
            rgba(26, 26, 26, 0.15) 60%,
            rgba(26, 26, 26, 0.15) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.js-method-title-fill,
.js-method-title-fill .line,
.method-word-dynamic {
    user-select: none;
    -webkit-user-select: none;
}

.reveal-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: var(--weight-light);
    color: rgba(255, 255, 255, 0.4);
    margin: 2.4rem 0 0 auto;
    max-width: 400px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-align: left;
}

/* ══════════════════════
   SPLIT TEXT UTILITIES
   ══════════════════════ */
.char {
    display: inline-block;
    will-change: transform, opacity;
}

.js-stagger-text {
    font-size: var(--text-body-lg);
    max-width: 600px;
    color: var(--text-muted);
    margin-top: 1rem;
}

/* ══════════════════════
   TEXT UTILITY CLASSES
   ══════════════════════ */
.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-accent-gradient {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ff6b7d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-balance {
    text-wrap: balance;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.text-white {
    color: var(--text-color);
}

.text-accent {
    color: var(--accent-color);
}

.mobile-only-break {
    display: none;
}

/* ══════════════════════
   PORTFOLIO SECTION
   ══════════════════════ */
.portfolio-scroll-wrapper {
    position: relative;
    width: 100%;
    z-index: 55;
    background-color: transparent;
}

.portfolio-spacer-top {
    /* Small offset so the section peeks from below without forcing excessive scroll */
    height: 36vh;
    width: 100%;
    background: transparent;
    pointer-events: none;
}

.portfolio-section {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(var(--section-seam-fix));
    background-color: #0f1013;
    /* Dark background matching the screenshot */
    padding: 11rem var(--layout-gutter) 8rem;
    z-index: 60;
    color: #fff;
    overflow: visible;
    border-radius: 40px 40px 0 0;
    /* Premium rounded top corners */
    margin-top: 0;
    transition: background-color 0.32s ease, color 0.32s ease;
    isolation: isolate;
}

.portfolio-section::before,
.method-section::before,
.services-section::before,
.clients-section::before,
.contact-footer-section::before {
    content: '';
    position: absolute;
    top: calc(var(--section-seam-fix) * -1);
    left: 0;
    width: 100%;
    height: calc(var(--section-seam-fix) * -1);
    background-color: inherit;
    pointer-events: none;
    z-index: 2;
}

.portfolio-section::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0f1013;
    pointer-events: none;
    z-index: 3;
}

.portfolio-scroll-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
    background: #0f1013;
    border-bottom-left-radius: 40px;
    pointer-events: none;
    z-index: 56;
}

body.light-mode .portfolio-scroll-wrapper::before {
    background: #f6f6f6;
}

.services-section::after,
.clients-section::after,
.contact-footer-section::after {
    content: '';
    position: absolute;
    bottom: calc(var(--section-seam-fix) * -1);
    left: 0;
    width: 100%;
    height: calc(var(--section-seam-fix) * -1);
    background-color: inherit;
    pointer-events: none;
    z-index: 2;
}

.portfolio-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 6.25rem;
    align-items: flex-start;
}

/* Left Column - Sticky */
.portfolio-left {
    flex: 1;
    position: sticky;
    top: 23vh;
    max-width: 470px;
    min-width: 0;
}

.section-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2.5rem;
    max-width: 100%;
    row-gap: 0.4rem;
}

.section-label .asterisk {
    font-size: 1.2rem;
    line-height: 1;
}

.section-label::after {
    content: '';
    width: 92px;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
    margin-left: 12px;
    flex: 0 0 auto;
    max-width: 100%;
}

.portfolio-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.8vw, 3.2rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.portfolio-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 2.8rem;
}

.portfolio-desc {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.35vw, 1.16rem);
    font-weight: var(--weight-light);
    color: rgba(255, 255, 255, 0.46);
    line-height: 1.72;
    margin-bottom: 0;
    max-width: 460px;
}

.portfolio-desc strong {
    color: #fff;
    font-weight: var(--weight-semibold);
    display: block;
    margin-bottom: 0.55rem;
}

.portfolio-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px 12px 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    overflow: visible;
    isolation: isolate;
    -webkit-text-fill-color: currentColor;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    opacity: 0;
    transform: translate(3px, 3px);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: -1;
}

.btn-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), color 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Right Column - Scrolling Cards */
.portfolio-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    min-width: 0;
}

.portfolio-card {
    background: #171717;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.45s ease, border-color 0.45s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.portfolio-more-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: transparent;
    border: none;
    min-height: auto;
    padding: 1rem 0 0.85rem;
    overflow: visible;
}

.portfolio-more-card .portfolio-btn .btn-icon-wrap,
.portfolio-more-card .portfolio-btn .btn-icon-wrap svg {
    color: inherit;
    stroke: currentColor;
}

.card-image-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.portfolio-section .card-image-wrap {
    height: auto;
    aspect-ratio: 1.72 / 1;
}

.card-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(9, 11, 14, 0.02) 0%, rgba(9, 11, 14, 0.18) 100%);
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.card-image-wrap img,
.card-image-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Transition for image scales */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-image-wrap video {
    position: absolute;
    inset: 0;
}

.card-image-poster {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.28s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portfolio-card.is-preview-playing .card-image-poster,
.fp-card.is-preview-playing .card-image-poster {
    opacity: 0;
}

.js-protected-media {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.media-interaction-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    cursor: inherit;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ══════════════════════
   CARD CONTENT REFINEMENT
   ══════════════════════ */
.card-content {
    padding: 1.35rem 2.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 3.1rem;
    row-gap: 1rem;
    transition: padding 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portfolio-card .card-content {
    background: linear-gradient(180deg, #161616 0%, #101010 100%);
    position: relative;
}

.portfolio-section .card-content {
    min-height: clamp(7.6rem, 7.2vw, 8.2rem);
}

.portfolio-card .card-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.5rem;
    right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.26) 22%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.26) 78%, transparent 100%);
    opacity: 0;
    transform: scaleX(0.78);
    transform-origin: center;
    transition: opacity 0.36s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-button-row {
    width: auto;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-metadata-row {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2.1rem;
    row-gap: 0.55rem;
    min-width: 0;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), min-height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), row-gap 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-meta-client {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    text-align: right;
}

.card-meta-project {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
}

.card-meta-year {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
    width: auto;
}

.card-meta.card-meta-year span {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.card-meta {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
    transition: color 0.3s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), font-size 0.3s ease;
}

.card-meta-client,
.card-meta-project {
    white-space: nowrap;
}

.card-meta span {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
    font-weight: var(--weight-semibold);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: font-size 0.3s ease, letter-spacing 0.35s ease, opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .portfolio-btn:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.1);
        transform: translate(-1px, -1px);
    }

    .portfolio-btn:hover::before {
        opacity: 1;
        transform: translate(4px, 4px);
    }

    .portfolio-btn:hover .btn-icon-wrap {
        color: inherit;
        transform: translateX(1px);
    }

    .portfolio-btn:hover .btn-icon-wrap svg {
        stroke: currentColor;
    }

    .portfolio-card:hover {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .portfolio-card:hover .card-image-wrap img,
    .portfolio-card:hover .card-image-wrap video {
        transform: scale(1.08) translateY(-1.5%);
    }

    .portfolio-card:hover .card-image-wrap::before {
        opacity: 1;
        transform: scale(1);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-content {
        padding-top: 1.65rem;
        padding-bottom: 1.6rem;
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-content::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-button-row {
        transform: translateY(-5px);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-metadata-row {
        min-height: 66px;
        row-gap: 0.75rem;
        transform: translateY(-2px);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-meta {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.7rem;
        transform: translateY(-1px);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-meta span {
        font-size: 0.91rem;
        letter-spacing: 0.045em;
    }
}

.portfolio-btn:active {
    transform: translate(-1px, -1px);
}

/* ══════════════════════
   CLIENTS CAROUSEL
   ══════════════════════ */
.clients-section {
    position: relative;
    width: 100%;
    background-color: #f6f6f6;
    transform: translateY(var(--section-seam-fix));
    padding: 10rem 0 3rem 0;
    z-index: 60;
    overflow: hidden;
    display: block;
    height: auto;
    isolation: isolate;
}

.clients-section .section-label {
    color: #1a1a1a;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.45rem;
    max-width: min(100%, 34rem);
    text-align: center;
}

.clients-section .section-label-copy {
    display: inline-block;
}

.clients-section .section-label::after {
    background: rgba(26, 26, 26, 0.2);
    width: clamp(56px, 8vw, 92px);
    flex: 0 0 clamp(56px, 8vw, 92px);
}

.clients-section .logo-base {
    filter: brightness(0) opacity(0.4);
}

.clients-section .logo-wrapper:hover .logo-bright {
    opacity: 1;
}

.clients-header {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 var(--layout-gutter);
}

.clients-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: #1a1a1a;
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Edge gradients for smooth fade in/out */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    transform: translateZ(0);
    backface-visibility: hidden;
}

body.touch-device .carousel-container {
    mask-image: none;
    -webkit-mask-image: none;
    transform: translateZ(0);
}

.carousel-track {
    display: flex;
    width: max-content;
    animation: scrollCarousel 60s linear infinite;
    padding: 20px 0;
    /* Extra space to prevent clipping during scale transition */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.carousel-track.is-js-driven {
    animation: none;
}

.carousel-slide {
    display: flex;
    align-items: center;
    gap: 6rem;
    /* Increased gap for better spacing */
    padding: 0 3rem;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.logo-wrapper {
    position: relative;
    height: 32px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.logo-base,
.logo-bright {
    height: 100%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.4s ease, filter 0.4s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.logo-base {
    filter: brightness(0) invert(1) opacity(0.5);
}

.logo-bright {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.logo-wrapper.is-bright .logo-base {
    opacity: 0;
}

.logo-wrapper.is-bright .logo-bright,
body.light-mode .logo-wrapper.is-bright .logo-bright {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .carousel-track:hover:not(.is-js-driven) {
        animation-play-state: paused;
    }

    .logo-wrapper:hover {
        transform: scale(1.1);
    }

    .logo-wrapper:hover .logo-base {
        opacity: 0;
    }

    .logo-wrapper:hover .logo-bright,
    body.light-mode .logo-wrapper:hover .logo-bright {
        opacity: 1;
    }
}

/* Fallback for logos without a bright version or when using single img */
.carousel-slide img:not(.logo-base):not(.logo-bright) {
    height: 40px;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    filter: brightness(0) invert(1) opacity(0.5);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.carousel-slide img:not(.logo-base):not(.logo-bright):hover {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

@keyframes scrollCarousel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.card-pill {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-heading-3);
    margin-bottom: 12px;
    color: #fff;
}

.card-content p {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    color: var(--text-subtle);
    margin-bottom: 24px;
    line-height: 1.6;
}

.read-more-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    transition: background 0.3s ease, color 0.3s ease;
}

.portfolio-card:hover .read-more-btn {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 992px) {
    .main-wrapper {
        padding-top: 68vh;
    }

    .portfolio-spacer-top {
        height: 32vh;
    }

    .portfolio-container {
        flex-direction: column;
        gap: 5.75rem;
    }

    .portfolio-left {
        position: relative;
        top: 0;
        max-width: 100%;
    }

    .card-content {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .card-metadata-row {
        min-height: auto;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 0.8rem 2.5rem;
    }

    .card-meta-client,
    .card-meta-project {
        text-align: left;
    }

    .card-meta-year {
        justify-self: auto;
        text-align: left;
        width: 100%;
    }
}

/* ══════════════════════
   SELECTION STYLE
   ══════════════════════ */
::selection {
    background: var(--accent-color);
    color: white;
}

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

/* ═══════════════════════════════════════════════
   8. METHOD / HOW WE WORK SECTION (LIGHT THEME SUPPORT)
   ═══════════════════════════════════════════════ */

/* Light Theme Variables */
body.light-mode {
    background-color: #f6f6f6 !important;
    transition: background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

body.light-mode .main-wrapper {
    background-color: #f6f6f6;
}

body.light-mode .main-header .logo-white,
body.fp-overlay-header-light .main-header .logo-white {
    opacity: 0;
}

body.light-mode .main-header .logo-black,
body.fp-overlay-header-light .main-header .logo-black {
    opacity: 1;
}

body.light-mode .hamburger .line,
body.fp-overlay-header-light .hamburger .line {
    background: #1a1a1a;
}


body.light-mode .section-label,
body.light-mode .method-step-num,
body.light-mode .method-step-title,
body.light-mode .method-step-icon {
    color: #1a1a1a;
}

body.light-mode .section-label::after {
    background: rgba(26, 26, 26, 0.2);
}

body.theme-transitioning .method-step-card,
body.theme-transitioning .method-step-card:last-child {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.light-mode .logo-base {
    filter: brightness(0) opacity(0.4);
}

body.light-mode .method-desc,
body.light-mode .method-step-text {
    color: rgba(26, 26, 26, 0.7);
}

body.light-mode .method-step-card {
    border-left: 1px solid rgba(26, 26, 26, 0.1);
}

body.light-mode .method-step-card:last-child {
    border-right: 1px solid rgba(26, 26, 26, 0.1);
}

body.light-mode .portfolio-btn {
    border-color: rgba(26, 26, 26, 0.18);
    color: #1a1a1a;
}

body.light-mode .portfolio-btn::before {
    border-color: rgba(26, 26, 26, 0.08);
}

body.light-mode .portfolio-btn .btn-icon-wrap {
    color: #1a1a1a;
}

body.light-mode .portfolio-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
    box-shadow: 6px 6px 0 0 rgba(26, 26, 26, 0.12);
}

.method-section {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: translateY(var(--section-seam-fix));
    padding: 7rem 0 5.5rem;
    transition: background-color 0.32s ease, color 0.32s ease;
    z-index: 50;
    background-color: #0f1013;
}

body.light-mode .method-section,
body.light-mode .portfolio-section {
    background-color: #f6f6f6;
}

body.light-mode .portfolio-section {
    color: #1a1a1a;
}

body.light-mode .portfolio-title,
body.light-mode .portfolio-subtitle {
    color: #1a1a1a;
}

body.light-mode .portfolio-desc {
    color: rgba(26, 26, 26, 0.62);
}

body.light-mode .portfolio-desc strong {
    color: #1a1a1a;
}

body.light-mode .portfolio-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .portfolio-card .card-content {
    background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
}

body.light-mode .portfolio-more-card {
    background: transparent;
    border: none;
}

body.light-mode .portfolio-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
}


body.light-mode .card-meta {
    color: rgba(26, 26, 26, 0.42);
}

body.light-mode .card-meta span {
    color: #1a1a1a;
}

body.light-mode .card-meta.card-meta-year span {
    color: inherit;
}

body.light-mode .card-content h3 {
    color: #1a1a1a;
}

body.light-mode .card-content p {
    color: rgba(26, 26, 26, 0.6);
}

.method-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
}

.method-header {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) minmax(300px, 28%);
    grid-template-areas:
        "label title title"
        ". copy copy";
    align-items: start;
    padding-top: 4rem;
    margin-bottom: 6rem;
    column-gap: 4rem;
    row-gap: 1.2rem;
}

.method-header-label {
    grid-area: label;
    margin-top: 0.2rem;
    align-self: start;
    grid-row: 1;
    min-width: max-content;
    z-index: 2;
}

.method-header-label .section-label {
    position: static;
    top: auto;
    opacity: 1;
    visibility: visible;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    max-width: none;
    margin-bottom: 0;
}

.js-reveal-section .section-label {
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    max-width: none;
}

.method-header-main {
    grid-area: title;
    justify-self: end;
    width: 100%;
    max-width: 1100px;
    padding-left: 2.25rem;
    padding-top: 2.2rem;
    position: relative;
    min-width: 0;
}

.method-header-right {
    grid-area: copy;
    justify-self: end;
    width: 100%;
    max-width: 480px;
    padding-left: 2.25rem;
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.2rem;
    min-width: 0;
}

.method-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.8vw, 3.2rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.045em;
    margin-top: 0;
    color: #fff;
    transition: color 0.32s ease;
}

body.light-mode .method-title {
    color: #1a1a1a;
}

.method-word-shell {
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
    margin-left: 0.08em;
}

.method-word-dynamic {
    display: inline-block;
    color: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
    white-space: nowrap;
    opacity: 1;
}

.method-word-dynamic::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.82em;
    margin-left: 0.08em;
    background: currentColor;
    vertical-align: -0.08em;
    animation: method-caret-blink 1s steps(1, end) infinite;
}

body.light-mode .method-word-dynamic {
    color: #1a1a1a;
}

@keyframes method-caret-blink {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

.method-desc {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: var(--weight-light);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 3rem;
    margin-left: 1rem;
    max-width: 400px;
}

.method-desc .line {
    overflow: hidden;
    vertical-align: bottom;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.method-step-card {
    padding: 3rem 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    min-height: 480px;
    transition: border-color 1.1s ease;
}

.method-step-card:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.method-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 8rem;
    padding: 0;
}

.method-step-num {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 3rem;
    color: #fff;
    opacity: 0.5;
}

.method-step-icon {
    width: 140px;
    height: 140px;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.method-step-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Base icon Kinetic Group */
.method-step-icon {
    perspective: 1000px;
}

/* Individual Icon Kinetic Behaviors */
/* 001: Discovery - Slow Rotate + Pulse */
.method-step-card:nth-child(1) .method-step-icon svg {
    animation: iconKineticRotate 12s linear infinite;
}

.method-step-card:nth-child(1) .method-step-icon circle:last-child {
    animation: iconPulse 2s ease-in-out infinite;
}

/* 002: Exploration - Orbit effect */
.method-step-card:nth-child(2) .method-step-icon svg {
    animation: iconKineticFloat 4s ease-in-out infinite;
}

.method-step-card:nth-child(2) .method-step-icon circle {
    animation: iconOrbit 4s ease-in-out infinite;
}

.method-step-card:nth-child(2) .method-step-icon circle:last-of-type {
    animation-delay: -2s;
}

/* 003: Design - Morph/Scale and Internal Rotation */
.method-step-card:nth-child(3) .method-step-icon svg {
    animation: iconKineticScale 5s ease-in-out infinite;
}

.method-step-card:nth-child(3) .method-step-icon rect {
    transform-origin: center;
    animation: iconMiniRotate 8s linear infinite;
}

/* 004: Execution - Arrow Pulse & Path Flow */
.method-step-card:nth-child(4) .method-step-icon svg {
    animation: iconKineticDrift 3s ease-in-out infinite;
}

.method-step-card:nth-child(4) .method-step-icon path:first-child {
    animation: arrowPush 1.5s ease-in-out infinite;
}

/* Animations Definitions */
@keyframes iconKineticRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes iconKineticFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(-5deg);
    }

    50% {
        transform: translate(8px, -12px) rotate(5deg);
    }
}

@keyframes iconKineticScale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1) rotate(2deg);
    }
}

@keyframes iconKineticDrift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, -10px);
    }
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@keyframes iconOrbit {

    0%,
    100% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }
}

/* ═══════════════════════════════════════════════
   10. SERVICES SECTION (ACCORDION STYLE)
   ═══════════════════════════════════════════════ */
.services-section {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    transform: translateY(var(--section-seam-fix));
    margin-top: 0;
    padding: 1rem 0 9rem;
    background-color: #0c1219;
    /* Default dark */
    transition: background-color 0.32s ease;
    z-index: 60;
    contain: paint;
}

/* Force light mode style as requested */
body.light-mode .services-section {
    background-color: #f6f6f6;
}

.services-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
    display: flex;
    justify-content: flex-start;
}

.services-list {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--services-accordion-max-width));
    margin: 0;
    transform: translateX(var(--services-accordion-offset-x));
}

.services-item {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.8rem 0;
    /* Reduced from 2.5rem */
    cursor: pointer;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.services-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .services-item,
body.light-mode .services-item:last-child {
    border-color: rgba(26, 26, 26, 0.1);
}

body.touch-device.light-mode .services-item:last-child,
body.hero-mobile-layout.light-mode .services-item:last-child {
    border-bottom-color: transparent;
}

body.touch-device.light-mode .services-item:first-child,
body.hero-mobile-layout.light-mode .services-item:first-child {
    border-top-color: transparent;
    box-shadow: none;
}

body.touch-device.light-mode .services-item.is-active:first-child,
body.hero-mobile-layout.light-mode .services-item.is-active:first-child,
body.touch-device.light-mode .services-item:hover:first-child,
body.hero-mobile-layout.light-mode .services-item:hover:first-child {
    border-top-color: transparent;
    box-shadow: none;
}

body.touch-device.light-mode .services-item.is-active:last-child,
body.hero-mobile-layout.light-mode .services-item.is-active:last-child,
body.touch-device.light-mode .services-item:hover:last-child,
body.hero-mobile-layout.light-mode .services-item:hover:last-child {
    border-bottom-color: transparent;
}

.services-item:hover,
.services-item.is-active {
    border-top-color: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1.4px 0 rgba(255, 255, 255, 0.32);
}

body.light-mode .services-item:hover,
body.light-mode .services-item.is-active {
    border-top-color: rgba(26, 26, 26, 0.28);
    box-shadow: inset 0 1.4px 0 rgba(26, 26, 26, 0.28);
}

.services-item-header {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    cursor: pointer;
}

.services-item-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: #fff;
    opacity: 0.15;
    margin: 0;
    min-width: 0;
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.32s ease;
}

body.light-mode .services-item-title {
    color: #1a1a1a;
    opacity: 0.1;
}

.services-item:hover .services-item-title,
.services-item.is-active .services-item-title {
    opacity: 1;
    transform: translateX(15px);
    /* Reduced movement */
}

.services-plus-icon {
    position: relative;
    width: 24px;
    /* Reduced from 40px */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus-line {
    position: absolute;
    background-color: #fff;
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1), background-color 0.32s ease;
}

body.light-mode .plus-line {
    background-color: #1a1a1a;
}

.plus-line:first-child {
    width: 100%;
    height: 1px;
}

.plus-line:last-child {
    width: 1px;
    height: 100%;
}

.services-item.is-active .plus-line:last-child {
    transform: rotate(90deg);
}

.services-item.is-active .plus-line:first-child {
    transform: rotate(180deg);
}

.services-item-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-item.is-active .services-item-content {
    grid-template-rows: 1fr;
}

.services-item-content-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.44s ease, transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-item.is-active .services-item-content-inner {
    opacity: 1;
    transform: translateY(0);
}

.services-item-text {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: var(--weight-light);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.5);
    max-width: 800px;
    padding-top: 1.5rem;
    padding-left: 15px;
    margin: 0;
    transition: color 0.32s ease;
}

.services-item-context {
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 1vw, 0.94rem);
    font-weight: var(--weight-semibold);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.48);
    max-width: 760px;
    padding-left: 15px;
    margin: 0.65rem 0 0;
    letter-spacing: 0.01em;
    transition: color 0.32s ease;
}


body.light-mode .services-item-text {
    color: rgba(26, 26, 26, 0.62);
}

body.light-mode .services-item-context {
    color: rgba(26, 26, 26, 0.52);
}

/* ═══════════════════════════════════════════════
   CONTACT + FOOTER SECTION
   ═══════════════════════════════════════════════ */
.contact-footer-section {
    position: relative;
    width: 100%;
    transform: translateY(var(--section-seam-fix));
    background-color: #0c1219;
    color: #ffffff;
    z-index: 70;
    padding: 5.75rem 0 3.25rem;
    overflow: hidden;
    contain: paint;
}

.contact-footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
}

/* ── Tagline (centered) ── */
.contact-tagline {
    margin-bottom: 2rem;
    overflow: hidden;
    padding-bottom: 0.18em;
}

.contact-tagline-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2.4rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: #ffffff;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

/* Glitch Effect on 'Creativity' (Modern & Aggressive) */
.glitch-text {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: var(--weight-black);
    animation: glitch-jitter 4s infinite linear alternate-reverse;
}

/* Background on pseudo-elements hides the original text where clipped,
   giving the illusion of the real text being physically sliced and shifted */
.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c1219;
    /* Uses the footer's background color to slice the word */
    color: white;
}

/* Magenta / Red offset */
.glitch-text::before {
    left: 7px;
    text-shadow: -4px 0 #ff00c1;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

/* Cyan / Blue offset */
.glitch-text::after {
    left: -7px;
    text-shadow: 4px 0 #00fff9;
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Jitter the entire word occasionally */
@keyframes glitch-jitter {

    0%,
    18%,
    25%,
    48%,
    55%,
    100% {
        transform: skewX(0deg) translateX(0);
    }

    20% {
        transform: skewX(-15deg) translateX(-3px);
    }

    22% {
        transform: skewX(15deg) translateX(3px);
    }

    50% {
        transform: skewX(8deg) translateX(-2px);
    }

    52% {
        transform: skewX(-8deg) translateX(2px);
    }
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        transform: translate(-4px, 2px);
    }

    10% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        transform: translate(4px, -2px);
    }

    20% {
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        transform: translate(-4px, 2px);
    }

    30% {
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        transform: translate(4px, -1px);
    }

    40% {
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        transform: translate(-4px, 2px);
    }

    50% {
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        transform: translate(4px, -2px);
        opacity: 0.5;
    }

    60% {
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        transform: translate(-4px, 2px);
        opacity: 1;
    }

    70% {
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        transform: translate(4px, -1px);
    }

    80% {
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        transform: translate(-4px, 3px);
    }

    90% {
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        transform: translate(4px, -2px);
    }

    100% {
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        transform: translate(-4px, 2px);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        transform: translate(4px, -2px);
    }

    15% {
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        transform: translate(-4px, 2px);
    }

    22% {
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        transform: translate(4px, -2px);
    }

    31% {
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        transform: translate(-4px, 2px);
        opacity: 0.6;
    }

    45% {
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        transform: translate(4px, -2px);
        opacity: 1;
    }

    51% {
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        transform: translate(-4px, 2px);
    }

    63% {
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        transform: translate(4px, -2px);
    }

    76% {
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        transform: translate(-4px, 2px);
    }

    81% {
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        transform: translate(4px, -2px);
    }

    94% {
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        transform: translate(-4px, 2px);
    }

    100% {
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        transform: translate(4px, -2px);
    }
}

/* ── CTA (centered, big) ── */
.contact-cta {
    text-align: center;
    margin-bottom: 0;
    padding: 1.5rem 0;
    border-top: none;
    border-bottom: none;
}

.contact-cta-link {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tighter);
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: opacity 0.24s ease, letter-spacing 0.32s cubic-bezier(0.7, 0, 0.3, 1);
    line-height: var(--leading-none);
}

.contact-cta-link::after {
    content: '';
    position: absolute;
    bottom: -0.1em;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.contact-cta-link:hover {
    opacity: 0.92;
    letter-spacing: 0.01em;
}

.contact-cta-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Footer ── */
.site-footer {
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.footer-links-wrapper {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-self: end;
    gap: 1.4rem;
    text-align: right;
    margin-top: 1.5rem;
    max-width: min(100%, 28rem);
    justify-content: flex-end;
}

.footer-copyright-wrapper {
    grid-column: 1 / -1;
}

.footer-email-link {
    appearance: none;
    background: transparent;
    border: none;
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.24s ease, opacity 0.24s ease;
    position: relative;
    padding-bottom: 4px;
}

.footer-email-link::after,
.footer-social-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.24s cubic-bezier(0.7, 0, 0.3, 1);
}

.footer-email-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-email-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.footer-copyright-wrapper {
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: var(--tracking-wide);
    text-transform: none;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.footer-clock-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-clock-city {
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.82);
}

.footer-clock-brand {
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.52);
}

.footer-clock-time {
    font-weight: var(--weight-regular);
    color: rgba(255, 255, 255, 0.52);
}

.footer-clock-separator {
    color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
    .footer-copyright {
        gap: 0.45rem 0.55rem;
    }

    .footer-copyright .footer-clock-group + .footer-clock-separator {
        display: none;
    }

    .footer-clock-brand {
        display: block;
        flex-basis: 100%;
        margin-top: 0.15rem;
        text-align: center;
    }
}

.footer-social-link {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.24s ease, opacity 0.24s ease;
    position: relative;
    padding-bottom: 4px;
}

.footer-social-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-social-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Responsiveness */
@media (max-width: 768px) {
    :root {
        --mobile-gutter: 6.5vw;
        --mobile-section-gap: 1.6rem;
        --mobile-stack-gap: 2.4rem;
        --mobile-section-label-gap: 1.25rem;
        --mobile-heading-size: clamp(1.5rem, 7vw, 2.2rem);
        --mobile-heading-copy-gap: 1.2rem;
    }

    .main-header {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        padding: 0;
        position: fixed;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        border-radius: 22px;
        transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1),
            opacity 0.8s ease;
    }

    .header-inner {
        min-height: 62px;
        padding: 0 12px 0 16px;
        background: rgba(10, 15, 22, 0.2);
        border: 0.5px solid rgba(255, 255, 255, 0.1);
        border-radius: 22px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(10px) saturate(125%);
        -webkit-backdrop-filter: blur(10px) saturate(125%);
        position: relative;
        transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1),
            opacity 0.8s ease,
            background-color 0.45s ease,
            border-color 0.45s ease,
            box-shadow 0.45s ease;
    }

    .header-inner::before {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0.02) 100%);
        opacity: 0.7;
        pointer-events: none;
    }

    .logo {
        height: 34px;
        display: inline-flex;
        align-items: center;
    }

    .logo-img {
        height: 34px;
    }

    .hamburger {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 5px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.035);
        border: 0.5px solid rgba(255, 255, 255, 0.08);
    }

    .hamburger .line {
        width: 18px;
        height: 1.5px;
        border-radius: 999px;
    }

    .main-header.menu-open .header-inner {
        background: rgba(10, 15, 22, 0.14);
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    }

    body.menu-open .custom-cursor {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-header::after {
        display: none;
    }

    body.light-mode .header-inner,
    body.fp-overlay-header-light .header-inner {
        background: rgba(255, 255, 255, 0.62);
        border-color: rgba(26, 26, 26, 0.08);
        box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
    }

    body.light-mode .hamburger,
    body.fp-overlay-header-light .hamburger {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(26, 26, 26, 0.08);
    }

    body.light-mode .main-header,
    body.fp-overlay-header-light .main-header {
        background: transparent;
        border-bottom-color: transparent;
    }

    body.light-mode .header-inner::before,
    body.fp-overlay-header-light .header-inner::before {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.32) 18%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.24) 68%, rgba(255, 255, 255, 0.04) 100%);
    }

    .js-close-cinema {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.26);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .js-close-cinema::before {
        border-color: rgba(255, 255, 255, 0.08);
    }

    .js-close-cinema:hover,
    .js-close-cinema.is-muted {
        background: rgba(255, 255, 255, 0.08);
        color: inherit;
        border-color: rgba(255, 255, 255, 0.26);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .js-close-cinema:hover::before,
    .js-close-cinema.is-muted::before {
        opacity: 0;
        transform: translate(4px, 4px);
    }

    .js-close-cinema:hover svg {
        transform: translateX(2px);
    }

    .custom-cursor {
        display: none !important;
    }

    .cursor-play-icon,
    .cursor-pause-icon {
        width: 13px;
        height: 13px;
    }

    .js-scroll-indicator-wrap,
    .scroll-indicator {
        display: none !important;
    }

    .menu-nav li {
        margin: 0.8rem 0;
    }

    .menu-nav a {
        font-size: clamp(2.2rem, 9vw, 3.8rem);
        letter-spacing: -0.015em;
        line-height: 0.92;
    }

    .method-section {
        padding-bottom: 3rem;
    }

    .services-section {
        margin-top: 0;
        padding-top: 0;
    }

    .services-list {
        width: 100%;
        transform: none;
    }

    .services-item {
        padding: 1.6rem 0;
    }

    .services-item-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .services-plus-icon {
        width: 22px;
        height: 22px;
    }

    .section-reveal {
        padding: 0 var(--mobile-gutter);
        align-items: flex-start;
        padding-top: 18vh;
    }

    .section-reveal .reveal-inner-container {
        flex-direction: column;
        gap: var(--mobile-section-gap);
        align-items: flex-start;
        width: 100%;
    }

    .section-reveal .reveal-label-wrap {
        flex: none;
        width: auto;
        margin-top: 0;
    }

    .section-reveal .reveal-content {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .section-reveal .section-label {
        margin-bottom: var(--mobile-section-label-gap);
    }

    .section-reveal .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    .reveal-content h2.fill-text-stagger {
        font-size: var(--mobile-heading-size);
        line-height: 1.1;
    }

    .reveal-subheadline {
        margin: var(--mobile-heading-copy-gap) 0 0 0;
        max-width: 100%;
        line-height: 1.55;
    }

    .portfolio-section {
        padding: 16vh var(--mobile-gutter) 5.25rem;
    }

    .portfolio-container {
        gap: 3.35rem;
    }

    .portfolio-title {
        font-size: var(--mobile-heading-size);
        margin-bottom: 1.15rem;
    }

    .portfolio-subtitle {
        margin-bottom: 1.75rem;
        max-width: 100%;
    }

    .mobile-only-break {
        display: block;
    }

    .portfolio-left .section-label {
        margin-bottom: 1.95rem;
    }

    .portfolio-left .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    .portfolio-desc {
        font-size: 0.96rem;
        line-height: 1.58;
        max-width: 100%;
    }

    .portfolio-desc strong {
        margin-bottom: 0.72rem;
    }

    .card-image-wrap {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .card-content {
        position: relative;
        padding: 1.05rem 1rem 1.1rem;
    }

    .card-button-row {
        position: absolute;
        left: 1rem;
        top: -2.85rem;
        width: auto;
        z-index: 3;
    }

    .card-button-row .portfolio-btn {
        padding: 9px 16px;
        font-size: 0.72rem;
    }

    .card-button-row .portfolio-btn,
    .full-portfolio-overlay .card-button-row .portfolio-btn,
    .portfolio-more-card .portfolio-btn {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
        transform: translate(-2px, -2px);
    }

    .card-button-row .portfolio-btn::before,
    .full-portfolio-overlay .card-button-row .portfolio-btn::before,
    .portfolio-more-card .portfolio-btn::before {
        opacity: 1;
        transform: translate(6px, 6px);
    }

    .card-button-row .portfolio-btn .btn-icon-wrap,
    .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap,
    .portfolio-more-card .portfolio-btn .btn-icon-wrap {
        color: #000000;
        transform: translateX(2px);
    }

    .card-button-row .portfolio-btn .btn-icon-wrap svg,
    .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap svg,
    .portfolio-more-card .portfolio-btn .btn-icon-wrap svg {
        stroke: currentColor;
    }

    .card-meta {
        font-size: 0.58rem;
        letter-spacing: 0.03em;
    }

    .card-meta span {
        font-size: 0.64rem;
        letter-spacing: 0;
    }

    .card-metadata-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 0.42rem;
        min-height: 0;
    }

    .card-meta-client,
    .card-meta-project,
    .card-meta-year {
        grid-column: 1;
        justify-self: start;
        text-align: left;
    }

    .portfolio-card:hover {
        border-color: rgba(255, 255, 255, 0.03);
    }

    body.light-mode .portfolio-card:hover {
        border-color: rgba(0, 0, 0, 0.05);
    }

    .portfolio-card:hover .card-image-wrap img,
    .portfolio-card:hover .card-image-wrap video {
        transform: none;
    }

    .portfolio-card:hover .card-image-wrap::before,
    .portfolio-card:not(.portfolio-more-card):hover .card-content::before {
        opacity: 0;
    }

    .portfolio-card:hover .card-image-wrap::before {
        transform: scale(1.04);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-content {
        padding-top: 1.05rem;
        padding-bottom: 1.1rem;
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-content::before {
        transform: scaleX(0.78);
    }

    .portfolio-card:not(.portfolio-more-card):hover .card-button-row,
    .portfolio-card:not(.portfolio-more-card):hover .card-metadata-row,
    .portfolio-card:not(.portfolio-more-card):hover .card-meta,
    .portfolio-card:not(.portfolio-more-card):hover .card-meta span {
        transform: none;
    }

    .logo-wrapper:hover {
        transform: none;
    }

    .logo-wrapper:hover .logo-base {
        opacity: 1;
        filter: brightness(0) invert(1) opacity(0.5);
    }

    body.light-mode .logo-wrapper:hover .logo-base {
        filter: brightness(0) opacity(0.4);
    }

    .logo-wrapper:hover .logo-bright {
        opacity: 0;
    }

    body.light-mode .logo-wrapper:hover .logo-bright {
        opacity: 1;
    }

    .portfolio-right .card-content {
        min-height: auto;
        padding-top: 0.95rem;
        padding-bottom: 0.9rem;
    }

    .portfolio-desc br {
        display: none;
    }

    .clients-section .portfolio-container {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }

    .clients-header {
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 2.4rem;
        padding: 0;
    }

    .clients-section .section-label {
        justify-content: flex-start;
        text-align: left;
        max-width: 100%;
    }

    .method-container {
        padding: 0 var(--mobile-gutter);
    }

    .method-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "copy";
        padding-top: 0;
        gap: 1.2rem;
        margin-bottom: 2.4rem;
    }

    .method-header-label,
    .method-header-main,
    .method-header-right {
        justify-self: start;
        max-width: 100%;
        padding-left: 0;
    }

    .method-header-main,
    .method-header-right {
        padding-top: 0;
    }

    .method-header-label {
        position: static;
        top: auto;
        grid-row: auto;
    }

    .method-header-label .section-label {
        position: static;
        top: auto;
        margin-bottom: 1.55rem;
    }

    .method-header-label .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    .method-title,
    .method-typing-overlay {
        font-size: var(--mobile-heading-size);
        line-height: 1.1;
    }

    .method-title-break-mobile {
        display: inline;
    }

    .method-header-main {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .method-title {
        max-width: 100%;
    }

    html[lang="es"] .method-word-shell {
        display: block;
        margin-left: 0;
        margin-top: 0.08em;
    }

    .method-word-static,
    .method-typing-overlay {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .method-word-static {
        margin-left: 0;
    }

    .method-desc {
        font-size: 0.96rem;
        margin: 0;
        max-width: 100%;
        line-height: 1.52;
    }

    .method-header {
        gap: 1.45rem;
    }

    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .method-step-card {
        padding: 1.55rem 1rem 1.7rem 0;
        min-height: 0;
        border-left: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.light-mode .method-step-card {
        border-left: none;
        border-right: 1px solid rgba(26, 26, 26, 0.1);
        border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    }

    .method-step-card:nth-child(2n) {
        padding-right: 0;
        padding-left: 1rem;
        border-right: none;
    }

    body.light-mode .method-step-card:nth-child(2n) {
        border-right: none;
    }

    .method-step-card:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    body.light-mode .method-step-card:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    body.light-mode .method-step-card:last-child {
        border-right: none;
    }

    .method-step-num {
        font-size: 0.62rem;
        margin-bottom: 0.65rem;
    }

    .method-step-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    .method-step-title {
        font-size: 1.02rem;
        margin-bottom: 0.55rem;
    }

    .method-step-text {
        font-size: 0.84rem;
        line-height: 1.5;
        max-width: 100%;
    }

    .fp-card:hover {
        border-color: rgba(255, 255, 255, 0.03);
    }

    .fp-card:hover .fp-card-img {
        transform: none;
    }

    .fp-card:hover .fp-card-inner::before,
    .fp-card:hover .card-content::before {
        opacity: 0;
    }

    .fp-card:hover .fp-card-inner::before {
        transform: scale(1.04);
    }

    .fp-card:hover .card-content {
        padding-top: 1.35rem;
        padding-bottom: 1.35rem;
    }

    .fp-card:hover .card-content::before {
        transform: scaleX(0.78);
    }

    .fp-card:hover .card-button-row,
    .fp-card:hover .card-metadata-row,
    .fp-card:hover .card-meta,
    .fp-card:hover .card-meta span {
        transform: none;
    }

    .method-footer .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    .services-container {
        padding: 0 var(--mobile-gutter);
    }

    .services-section {
        padding-top: 0.5rem;
        padding-bottom: 7.5rem;
    }

    .services-item {
        padding: 1.35rem 0;
    }

    .contact-footer-container {
        padding: 0 var(--mobile-gutter);
    }

    .contact-footer-section {
        padding: 4.75rem 0 2.75rem;
    }

    .contact-tagline {
        margin-bottom: 1.2rem;
    }

    .contact-cta {
        margin-bottom: 1.4rem;
        padding: 0.9rem 0;
    }

    .footer-links-wrapper {
        text-align: center;
        justify-self: center;
        margin-top: 0.5rem;
    }

    .footer-copyright-wrapper {
        margin-top: 0.9rem;
        padding-bottom: 0;
    }

    .site-footer {
        padding-bottom: 4.5rem;
    }

    .fp-close-btn:hover {
        transform: none;
    }

    .floating-contact {
        right: 20px;
    }

    .lang-switcher {
        left: 20px;
    }

    .fp-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .fp-card-meta-right {
        align-items: flex-start;
        gap: 0.5rem;
    }

}



@keyframes iconMiniRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

@keyframes arrowPush {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, -5px);
    }
}

.method-step-icon path[stroke-dasharray] {
    stroke-dashoffset: 0;
    animation: dashFlowKinetic 2s linear infinite;
}

@keyframes dashFlowKinetic {
    to {
        stroke-dashoffset: -40;
    }
}

.method-step-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--weight-semibold);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.method-step-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-subtle);
    max-width: 260px;
}

@media (min-width: 769px) and (max-width: 1366px) {
    .portfolio-section .card-button-row .portfolio-btn,
    .full-portfolio-overlay .card-button-row .portfolio-btn {
        padding: 10px 17px 10px 15px;
        font-size: 0.7rem;
        letter-spacing: 0.095em;
    }

    .portfolio-section {
        padding: 10rem var(--layout-gutter-tablet) 8.5rem;
    }

    .portfolio-container {
        gap: 3.75rem;
    }

    .portfolio-left {
        top: 19vh;
        max-width: 42rem;
    }

    .portfolio-subtitle {
        margin-bottom: 2rem;
    }

    .portfolio-desc {
        max-width: 40ch;
    }

    .portfolio-section .card-meta {
        font-size: 0.62rem;
        letter-spacing: 0.05em;
    }

    .portfolio-section .card-meta span {
        font-size: 0.72rem;
    }

    .portfolio-section .card-meta-client span {
        max-width: 13rem;
    }

    .portfolio-section .card-meta-project span {
        max-width: 5.5rem;
    }

    .method-header {
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-areas:
            "label title"
            ". copy";
        column-gap: 2.75rem;
        row-gap: 1rem;
        padding-top: 1.5rem;
        margin-bottom: 3.5rem;
    }

    .method-header-main {
        justify-self: start;
        max-width: 46rem;
        padding-left: 0;
        padding-top: 1.1rem;
    }

    .method-header-right {
        justify-self: start;
        max-width: 31rem;
        padding-left: 0;
        padding-top: 0.35rem;
        gap: 1.4rem;
    }

    .method-desc {
        margin-left: 0;
        margin-bottom: 0;
        max-width: 28ch;
    }

    .method-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .method-step-card {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.light-mode .method-step-card {
        border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .method-header {
        grid-template-columns: 236px minmax(0, 1fr) minmax(240px, 22rem);
        grid-template-areas:
            "label title title"
            ". . copy";
    }

    .method-header-label .section-label {
        flex-wrap: nowrap;
        white-space: nowrap;
        transform: none;
    }

    .method-header-main {
        grid-column: 2 / 4;
        max-width: none;
        padding-top: 2rem;
    }

    .method-header-right {
        grid-column: 2 / 4;
        justify-self: end;
        width: 100%;
        max-width: 29ch;
        padding-top: 1rem;
    }

    .method-desc {
        margin-left: -9rem;
        max-width: 29ch;
    }

    body.touch-device .method-header-main {
        max-width: 46rem;
        padding-top: 0.35rem;
    }

    body.touch-device .method-title,
    body.touch-device .method-typing-overlay {
        font-size: clamp(1.95rem, 4.9vw, 3rem);
        line-height: 1.1;
    }

    body.touch-device .method-title-break-mobile {
        display: none;
    }

    body.touch-device .method-word-static,
    body.touch-device .method-typing-overlay {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    html[lang="en"] body.touch-device .method-word-shell {
        display: block;
        margin-left: 0;
        margin-top: 0.08em;
    }
}

@media (min-width: 993px) and (max-width: 1180px) {
    .method-header {
        grid-template-columns: 236px minmax(2rem, 5vw) minmax(0, 1fr) minmax(220px, 20rem);
        grid-template-areas:
            "label . title title"
            ". . copy copy";
        column-gap: 0;
    }

    .method-header-label {
        margin-top: 0;
    }

    .method-header-label .section-label {
        flex-wrap: nowrap;
        white-space: nowrap;
        transform: none;
    }

    .method-header-main {
        grid-column: 3 / 5;
        max-width: 40rem;
        padding-top: 2rem;
    }

    .method-header-right {
        grid-column: 3 / 5;
        justify-self: end;
        max-width: 27ch;
        padding-top: 1rem;
    }

    .method-title-break-mobile {
        display: inline;
    }

    .method-word-static {
        margin-left: 0;
    }

    .method-desc {
        margin-left: -7.5rem;
        max-width: 27ch;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .portfolio-section .card-button-row .portfolio-btn,
    .full-portfolio-overlay .card-button-row .portfolio-btn {
        padding: 9px 15px 9px 13px;
        font-size: 0.66rem;
        letter-spacing: 0.085em;
    }

    .portfolio-container {
        gap: 2.75rem;
    }

    .portfolio-left {
        max-width: 44rem;
    }

    .portfolio-subtitle {
        margin-bottom: 1.5rem;
    }

    .portfolio-desc {
        max-width: 38ch;
    }

    .method-section {
        padding: 5.5rem 0 4.5rem;
    }

    .method-header {
        grid-template-columns: 236px minmax(0, 1fr);
        margin-bottom: 2.75rem;
    }

    .method-header-label .section-label {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .method-header-main {
        max-width: 680px;
        padding-top: 0.6rem;
    }

    .method-header-right {
        grid-column: 2;
        justify-self: end;
        max-width: 26ch;
        padding-top: 0.35rem;
    }

    .method-desc {
        margin-left: -4.5rem;
        max-width: 26ch;
    }
}

@media (min-width: 769px) and (max-width: 899px) {
    .portfolio-container {
        display: block;
    }

    .portfolio-left {
        position: static;
        top: auto;
        max-width: 100%;
        width: 100%;
        margin-bottom: clamp(2.75rem, 5vw, 4rem);
    }

    .portfolio-left-inner,
    .portfolio-subtitle,
    .portfolio-desc {
        max-width: 100%;
    }

    .portfolio-right {
        width: 100%;
        max-width: 100%;
        gap: clamp(2.75rem, 4vw, 3.75rem);
    }

    .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    .portfolio-right .card-image-wrap {
        aspect-ratio: 1.72 / 1;
    }

    .portfolio-right .card-content {
        min-height: clamp(7.45rem, 7vw, 7.9rem);
    }

    .footer-links-wrapper {
        justify-self: end;
        margin-right: clamp(1.5rem, 3.8vw, 3.5rem);
    }
}

@media (min-width: 900px) and (max-width: 1180px) {
    .main-wrapper {
        padding-top: 78vh;
    }

    .portfolio-spacer-top {
        height: 36vh;
    }

    .portfolio-section {
        padding: 10rem var(--layout-gutter-tablet) 8.5rem;
    }

    .portfolio-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(2.5rem, 4vw, 3.75rem);
    }

    .portfolio-left {
        flex: 0 0 clamp(18rem, 31vw, 24rem);
        position: sticky;
        top: 19vh;
        max-width: clamp(18rem, 31vw, 24rem);
        width: auto;
        margin-bottom: 0;
    }

    .portfolio-right {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        gap: clamp(2.25rem, 3vw, 3.25rem);
    }

    .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    .portfolio-right .card-image-wrap {
        aspect-ratio: 1.58 / 1;
    }

    .portfolio-right .card-content {
        min-height: clamp(6.9rem, 7vw, 7.45rem);
    }

    .mobile-only-break {
        display: none;
    }

    .card-content {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    .card-metadata-row {
        min-height: 58px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.55rem 2.1rem;
    }

    .card-meta-client {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    .card-meta-project {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    .card-meta-year {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
        width: auto;
    }
}

@media (max-width: 1024px) {
    body.touch-device {
        --touch-gutter: 6.5vw;
        --touch-section-gap: 1.6rem;
        --touch-section-label-gap: 1.25rem;
        --touch-heading-size: clamp(1.5rem, 5.8vw, 2.6rem);
        --touch-heading-copy-gap: 1.2rem;
        --section-seam-fix: 0px;
    }

    body.touch-device .main-wrapper {
        padding-top: 60svh;
        background-color: #13171d;
        min-height: 100svh;
    }

    body.touch-device .portfolio-spacer-top {
        height: 12svh;
    }

    body.touch-device .section-reveal {
        padding: 0 var(--touch-gutter);
        align-items: flex-start;
        padding-top: 18svh;
    }

    body.touch-device .section-reveal .reveal-inner-container {
        flex-direction: column;
        gap: var(--touch-section-gap);
        align-items: flex-start;
        width: 100%;
    }

    body.touch-device .section-reveal .reveal-label-wrap {
        flex: none;
        width: auto;
        margin-top: 0;
    }

    body.touch-device .section-reveal .reveal-content {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    body.touch-device .section-reveal .section-label {
        margin-bottom: var(--touch-section-label-gap);
    }

    body.touch-device .section-reveal .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    body.touch-device .reveal-content h2.fill-text-stagger {
        font-size: var(--touch-heading-size);
        line-height: 1.1;
    }

    body.touch-device .reveal-subheadline {
        margin: var(--touch-heading-copy-gap) 0 0 0;
        max-width: 100%;
        line-height: 1.55;
    }

    body.touch-device .portfolio-section {
        padding: 16vh var(--touch-gutter) 5.25rem;
    }

    body.touch-device .portfolio-container {
        display: block;
    }

    body.touch-device .portfolio-left {
        position: static !important;
        top: auto;
        max-width: 100%;
        margin-bottom: clamp(3rem, 6vw, 4.5rem);
    }

    body.touch-device .portfolio-right {
        width: 100%;
        padding-top: 0;
        gap: clamp(2.75rem, 4.5vw, 4rem);
    }

    body.touch-device .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.72 / 1;
    }

    body.touch-device .portfolio-right .card-content {
        min-height: clamp(7.35rem, 9vw, 7.95rem);
    }

    body.touch-device .portfolio-title {
        font-size: var(--touch-heading-size);
        margin-bottom: 1.15rem;
    }

    body.touch-device .portfolio-subtitle {
        margin-bottom: 1.75rem;
        max-width: 100%;
    }

    body.touch-device .mobile-only-break {
        display: block;
    }

    body.touch-device .portfolio-left .section-label {
        margin-bottom: 1.95rem;
    }

    body.touch-device .portfolio-left .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    body.touch-device .portfolio-desc {
        font-size: 0.96rem;
        line-height: 1.58;
        max-width: 100%;
    }

    body.touch-device .portfolio-desc strong {
        margin-bottom: 0.72rem;
    }

    body.touch-device .portfolio-desc br {
        display: none;
    }

    body.touch-device .clients-section .portfolio-container {
        padding-left: var(--touch-gutter);
        padding-right: var(--touch-gutter);
    }

    body.touch-device .clients-header {
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 2.4rem;
        padding: 0;
    }

    body.touch-device .clients-section .section-label {
        justify-content: flex-start;
        text-align: left;
        max-width: 100%;
    }

    body.touch-device .method-container {
        padding: 0 var(--touch-gutter);
    }

    body.touch-device .method-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "copy";
        padding-top: 0;
        gap: 1.45rem;
        margin-bottom: 2.4rem;
    }

    body.touch-device .method-header-label,
    body.touch-device .method-header-main,
    body.touch-device .method-header-right {
        justify-self: start;
        max-width: 100%;
        padding-left: 0;
    }

    body.touch-device .method-header-main,
    body.touch-device .method-header-right {
        padding-top: 0;
    }

    body.touch-device .method-header-label {
        position: static;
        top: auto;
        grid-row: auto;
    }

    body.touch-device .method-header-label .section-label {
        position: static;
        top: auto;
        margin-bottom: 1.55rem;
    }

    body.touch-device .method-header-label .section-label::after,
    body.touch-device .method-footer .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    body.touch-device .method-title,
    body.touch-device .method-typing-overlay {
        font-size: var(--touch-heading-size);
        line-height: 1.1;
    }

    body.touch-device .method-title-break-mobile {
        display: inline;
    }

    body.touch-device .method-header-main,
    body.touch-device .method-header-right,
    body.touch-device .method-title {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    body.touch-device .method-word-static,
    body.touch-device .method-typing-overlay {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.touch-device .method-word-static {
        margin-left: 0;
    }

    body.touch-device .method-desc {
        font-size: 0.96rem;
        margin: 0;
        max-width: 100%;
        line-height: 1.52;
    }

    body.touch-device .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    body.touch-device .services-container,
    body.touch-device .contact-footer-container {
        padding: 0 var(--touch-gutter);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.touch-device .method-header {
        grid-template-columns: 236px minmax(0, 1fr);
        grid-template-areas:
            "label title"
            ". copy";
        column-gap: 2.75rem;
        row-gap: 1rem;
        padding-top: 1.5rem;
        margin-bottom: 2.75rem;
    }

    body.touch-device .method-header-label {
        grid-row: 1;
        margin-top: 0;
    }

    body.touch-device .method-header-label .section-label {
        margin-bottom: 0;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    body.touch-device .method-header-main {
        justify-self: start;
        width: 100%;
        max-width: 42rem;
        padding-left: 0;
        padding-top: 0.15rem;
        overflow: visible;
    }

    body.touch-device .method-header-right {
        grid-column: 2;
        justify-self: end;
        width: 100%;
        max-width: 38ch;
        padding-left: 0;
        padding-top: 0.35rem;
        align-items: flex-start;
        overflow: visible;
    }

    body.touch-device .method-title,
    body.touch-device .method-typing-overlay {
        font-size: clamp(1.95rem, 4.9vw, 3rem);
        line-height: 1.1;
    }

    body.touch-device .method-title-break-mobile {
        display: none;
    }

    body.touch-device .method-word-static,
    body.touch-device .method-typing-overlay {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    body.touch-device .method-word-static {
        margin-left: 0.18em;
    }

    body.touch-device .method-desc {
        margin-left: 0;
        max-width: 38ch;
    }
}

@media (min-width: 993px) and (max-width: 1024px) and (orientation: landscape) {
    body.touch-device .method-header-right {
        grid-column: 3 / 5;
        justify-self: end;
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body.touch-device .method-word-shell {
        display: block;
        margin-left: 0;
        margin-top: 0.12em;
    }
}

@media (min-width: 820px) and (max-width: 900px) and (max-height: 340px) and (orientation: landscape) {
    html[lang="en"] body.touch-device .method-word-shell {
        display: inline-block;
        width: auto;
        margin-left: 0.08em;
        margin-top: 0;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    body.touch-device .method-word-shell {
        display: block;
        margin-left: 0;
        margin-top: 0.12em;
    }
}

@media (min-width: 900px) and (max-width: 1180px) {
    body.touch-device .main-wrapper {
        padding-top: 68svh;
    }

    body.touch-device .portfolio-spacer-top {
        height: 14svh;
    }

    body.touch-device .portfolio-section {
        padding: 10rem var(--layout-gutter-tablet) 8.5rem;
    }

    body.touch-device .portfolio-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(2.5rem, 4vw, 3.5rem);
    }

    body.touch-device .portfolio-left {
        flex: 0 0 clamp(18rem, 31vw, 24rem);
        position: sticky !important;
        top: 19vh;
        max-width: clamp(18rem, 31vw, 24rem);
        width: auto;
        margin-bottom: 0;
    }

    body.touch-device .portfolio-left-inner,
    body.touch-device .portfolio-subtitle,
    body.touch-device .portfolio-desc {
        max-width: 100%;
    }

    body.touch-device .portfolio-right {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        padding-top: 0;
        gap: clamp(2.25rem, 3vw, 3.25rem);
    }

    body.touch-device .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.58 / 1;
    }

    body.touch-device .portfolio-right .card-content {
        min-height: clamp(6.9rem, 7vw, 7.45rem);
    }

    body.touch-device .portfolio-title {
        font-size: clamp(1.8rem, 3.8vw, 3.2rem);
        margin-bottom: 1rem;
    }

    body.touch-device .portfolio-subtitle {
        font-size: clamp(1.4rem, 2.5vw, 1.8rem);
        line-height: 1.02;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    body.touch-device .portfolio-desc {
        font-size: clamp(0.98rem, 1.35vw, 1.16rem);
        line-height: 1.72;
        max-width: 40ch;
    }

    body.touch-device .portfolio-desc br {
        display: inline;
    }

    body.touch-device .portfolio-left .section-label {
        margin-bottom: 2.5rem;
    }

    body.touch-device .portfolio-left .section-label::after {
        width: 92px;
        margin-left: 12px;
    }

    body.touch-device .mobile-only-break {
        display: none;
    }

    body.touch-device .card-content {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    body.touch-device .card-metadata-row {
        min-height: 58px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.55rem 2.1rem;
    }

    body.touch-device .card-meta-client {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    body.touch-device .card-meta-project {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    body.touch-device .card-meta-year {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
        width: auto;
    }
}

@media (max-width: 768px) {
    body.touch-device .portfolio-right .card-content {
        min-height: auto;
        padding-top: 0.95rem;
        padding-bottom: 0.9rem;
    }
}

@media (max-width: 480px) {
    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .method-step-card {
        padding: 1.35rem 0.65rem 1.5rem 0;
    }

    .method-step-card:nth-child(2n) {
        padding-left: 0.65rem;
        padding-right: 0;
    }

    .method-step-title {
        font-size: clamp(0.9rem, 5.9vw, 1.28rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
    }

    .method-step-text {
        font-size: 0.8rem;
        line-height: 1.45;
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════
   FULL PORTFOLIO OVERLAY
   ═══════════════════════════════════════════════ */
.full-portfolio-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    /* Light mode background */
    z-index: 100050;
    overflow: hidden;
    overflow-x: hidden;
    display: none;
    /* Toggled by JS */
    padding-bottom: 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.fp-scroll-layer {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f5f5f5;
    padding-bottom: 10vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.ios-chrome .full-portfolio-overlay {
    isolation: isolate;
    contain: paint;
}

body.ios-chrome .fp-scroll-layer {
    box-shadow:
        0 40px 0 0 #f5f5f5,
        0 -40px 0 0 #f5f5f5;
}

.fp-container {
    max-width: 1460px;
    margin: 0 auto;
    padding: 15vh 50px 5vh;
}

.fp-header-wrap {
    position: relative;
    margin-bottom: 5vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: clamp(72px, 8vw, 112px);
}

.fp-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
}

.fp-main-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: var(--weight-black);
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.fp-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.32vw, 1.14rem);
    font-weight: var(--weight-regular);
    line-height: 1.7;
    color: rgba(26, 26, 26, 0.62);
    margin: 0;
    max-width: 680px;
}

.fp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.fp-card {
    background-color: #171717;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.45s ease;
}

.fp-card.is-hidden {
    display: none;
}

.fp-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fp-card-img {
    width: 100%;
    aspect-ratio: 16 / 7.5;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-card-inner .card-image-wrap,
.fp-card-inner {
    position: relative;
}

.fp-card-inner::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: calc(100% - 96px);
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(9, 11, 14, 0.02) 0%, rgba(9, 11, 14, 0.18) 100%);
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.full-portfolio-overlay .card-content {
    padding: 1.5rem 1.95rem;
    column-gap: 2.3rem;
    background: linear-gradient(180deg, #161616 0%, #101010 100%);
    transition: padding 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

.full-portfolio-overlay .card-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.95rem;
    right: 1.95rem;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.26) 22%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.26) 78%, transparent 100%);
    opacity: 0;
    transform: scaleX(0.78);
    transform-origin: center;
    transition: opacity 0.36s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.full-portfolio-overlay .card-metadata-row {
    min-height: 58px;
    column-gap: 1.45rem;
    row-gap: 0.62rem;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), min-height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), row-gap 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.full-portfolio-overlay .card-meta {
    font-size: 0.6rem;
    transition: color 0.3s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), font-size 0.3s ease;
}

.full-portfolio-overlay .card-meta span {
    font-size: 0.76rem;
    transition: font-size 0.3s ease, letter-spacing 0.35s ease, opacity 0.35s ease;
}

.full-portfolio-overlay .card-meta.card-meta-year span {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

body.light-mode .full-portfolio-overlay .card-meta,
.full-portfolio-overlay .card-meta {
    color: rgba(255, 255, 255, 0.42);
}

body.light-mode .full-portfolio-overlay .card-meta span,
.full-portfolio-overlay .card-meta span {
    color: #ffffff;
}

body.light-mode .full-portfolio-overlay .portfolio-btn,
.full-portfolio-overlay .portfolio-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

body.light-mode .full-portfolio-overlay .portfolio-btn .btn-icon-wrap,
.full-portfolio-overlay .portfolio-btn .btn-icon-wrap {
    color: #ffffff;
}

.fp-card-content {
    padding: 1.5rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.fp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.fp-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fp-card-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.fp-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: var(--weight-bold);
    margin: 0;
    letter-spacing: 0.02em;
}

.fp-card-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 0.25rem;
}

.fp-card-bottom {
    margin-top: auto;
}

.fp-card-tags {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (hover: hover) and (pointer: fine) {
    body.light-mode .full-portfolio-overlay .portfolio-btn:hover,
    .full-portfolio-overlay .portfolio-btn:hover {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
        box-shadow: 4px 4px 0 0 rgba(255, 255, 255, 0.1);
        transform: translate(-1px, -1px);
    }

    body.light-mode .full-portfolio-overlay .portfolio-btn:hover::before,
    .full-portfolio-overlay .portfolio-btn:hover::before {
        opacity: 1;
        transform: translate(4px, 4px);
    }

    body.light-mode .full-portfolio-overlay .portfolio-btn:hover .btn-icon-wrap,
    .full-portfolio-overlay .portfolio-btn:hover .btn-icon-wrap {
        color: inherit;
        transform: translateX(1px);
    }

    body.light-mode .full-portfolio-overlay .portfolio-btn:hover .btn-icon-wrap svg,
    .full-portfolio-overlay .portfolio-btn:hover .btn-icon-wrap svg {
        stroke: currentColor;
    }

    .fp-card:hover {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .fp-card:hover .fp-card-img {
        transform: scale(1.08) translateY(-1.5%);
    }

    .fp-card:hover .fp-card-inner::before {
        opacity: 1;
        transform: scale(1);
    }

    .fp-card:hover .card-content {
        padding-top: 1.65rem;
        padding-bottom: 1.6rem;
    }

    .fp-card:hover .card-content::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .fp-card:hover .card-button-row {
        transform: translateY(-5px);
    }

    .fp-card:hover .card-metadata-row {
        min-height: 66px;
        row-gap: 0.72rem;
        transform: translateY(-2px);
    }

    .fp-card:hover .card-meta {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.7rem;
        transform: translateY(-1px);
    }

    .fp-card:hover .card-meta span {
        font-size: 0.86rem;
        letter-spacing: 0.045em;
    }
}

.full-portfolio-overlay .portfolio-btn:active {
    transform: translate(-1px, -1px);
}

.fp-close-btn {
    position: absolute;
    top: clamp(4px, 0.8vw, 14px);
    right: 0;
    width: 60px;
    height: 60px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.24s ease;
}

.fp-close-btn.is-active {
    pointer-events: auto;
}

.fp-close-btn:hover {
    transform: scale(1.08) rotate(45deg);
}

.fp-close-icon {
    width: 40px;
    height: 40px;
}

/* Scrollbar styling for overlay */
.full-portfolio-overlay::-webkit-scrollbar {
    width: 8px;
}

.full-portfolio-overlay::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.full-portfolio-overlay::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
}

.project-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 100051;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f5f5f1;
    color: #151515;
    padding-bottom: 10vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.touch-device .full-portfolio-overlay,
body.touch-device .project-detail-overlay,
body.touch-device .menu-overlay,
body.hero-mobile-layout .full-portfolio-overlay,
body.hero-mobile-layout .project-detail-overlay,
body.hero-mobile-layout .menu-overlay {
    top: var(--vv-offset-top, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: calc(var(--vv-height, 100dvh) + env(safe-area-inset-bottom, 0px) + 48px);
    min-height: calc(var(--vv-height, 100dvh) + env(safe-area-inset-bottom, 0px) + 48px);
    padding-bottom: 0;
}

body.touch-device .fp-scroll-layer,
body.hero-mobile-layout .fp-scroll-layer {
    padding-bottom: calc(8vh + env(safe-area-inset-bottom, 0px) + 24px);
}

.project-detail-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14vh 50px 7vh;
    font-family: var(--font-body);
}

.project-detail-header {
    --project-detail-rail-width: clamp(76px, 8vw, 112px);
    --project-detail-close-size: 60px;
    --project-detail-close-icon-size: 36px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: clamp(2.8rem, 5vw, 4.5rem);
    padding-right: var(--project-detail-rail-width);
    min-height: calc(var(--project-detail-close-size) + 1.8rem);
}

.project-detail-header-copy {
    max-width: min(100%, calc(70rem - var(--project-detail-rail-width)));
}

.project-detail-kicker {
    margin: 0 0 1rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.44);
}

.project-detail-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.15rem, 7vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    max-width: 13ch;
}

.project-detail-subtitle {
    margin: 1.2rem 0 0;
    max-width: 44rem;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.65vw, 1.28rem);
    line-height: 1.62;
    color: rgba(21, 21, 21, 0.66);
}

.project-detail-service-tag {
    position: absolute;
    right: calc((var(--project-detail-close-size) - var(--project-detail-close-icon-size)) / 2);
    bottom: -2.2rem;
    margin: 0;
    width: var(--project-detail-rail-width);
    display: flex;
    justify-content: flex-end;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.8);
    white-space: nowrap;
    text-align: right;
}

.project-detail-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border: none;
    background: transparent;
    color: #151515;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.project-detail-close svg {
    width: 36px;
    height: 36px;
}

.project-detail-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin-bottom: clamp(2.6rem, 4vw, 3.6rem);
}

.project-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(21, 21, 21, 0.12);
}

.project-detail-meta-label {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.42);
}

.project-detail-meta-value {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    color: #151515;
}

.project-detail-hero-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.2rem, 2vw, 2rem);
    align-items: stretch;
    margin-bottom: clamp(4rem, 7vw, 6rem);
}

.project-detail-hero-media.is-split.has-portrait-primary {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
}

.project-detail-hero-media.is-split.has-landscape-primary {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.project-detail-hero-media.is-single {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: clamp(4rem, 7vw, 6rem);
}

.project-detail-media-panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #ecebe6;
    min-width: 0;
    width: 100%;
}

.project-detail-media-panel-portrait {
    aspect-ratio: 9 / 16;
}

.project-detail-media-panel-landscape {
    aspect-ratio: 16 / 9;
}

.project-detail-media-panel-image {
    aspect-ratio: 4 / 5;
}

.project-detail-media-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.2rem);
    background: transparent;
    overflow: visible;
}

.project-detail-media-panel-grid-item {
    aspect-ratio: 4 / 5;
}

.project-detail-media-panel video,
.project-detail-media-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-detail-body {
    display: grid;
    gap: clamp(2.4rem, 4vw, 3.6rem);
}

.project-detail-section {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(1.6rem, 3vw, 3rem);
    align-items: start;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(21, 21, 21, 0.1);
}

.project-detail-section-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.4);
}

.project-detail-section-body {
    max-width: 48rem;
}

.project-detail-section-body p {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.34vw, 1.15rem);
    line-height: 1.84;
    color: #1d1d1d;
}

.project-detail-section-body p + p {
    margin-top: 1.25rem;
}

.project-detail-section-media {
    display: grid;
    gap: clamp(1rem, 2vw, 1.6rem);
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.project-detail-inline-media,
.project-detail-inline-figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #e9e7e0;
}

.project-detail-inline-media-landscape {
    aspect-ratio: 16 / 9;
}

.project-detail-inline-media-portrait {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 28rem);
}

.project-detail-inline-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.project-detail-inline-figure-grid {
    aspect-ratio: 4 / 5;
}

.project-detail-inline-media img,
.project-detail-inline-media video,
.project-detail-inline-figure img,
.project-detail-embed-wrap iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.project-detail-video:fullscreen,
.project-detail-inline-video:fullscreen,
.project-detail-video:-webkit-full-screen,
.project-detail-inline-video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    background: #000;
}

.project-detail-embed-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow: hidden;
    border-radius: inherit;
    background: #000;
    display: block;
}

.project-detail-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    display: block;
}

.project-detail-closing {
    margin-top: clamp(4rem, 7vw, 6.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(21, 21, 21, 0.12);
}

.project-detail-closing p {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #111;
}

.project-detail-pagination {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid rgba(21, 21, 21, 0.1);
}

.project-detail-nav {
    appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.2rem 0;
    text-align: left;
    display: grid;
    gap: 0.35rem;
    cursor: pointer;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.project-detail-nav:hover {
    opacity: 0.74;
}

.project-detail-nav-kicker {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.44);
}

.project-detail-nav-client {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(21, 21, 21, 0.56);
}

.project-detail-nav-title {
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.45vw, 1.3rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #111;
    max-width: 18ch;
}

.project-detail-nav-prev:hover {
    transform: translateX(-4px);
}

.project-detail-nav-next {
    justify-items: end;
    text-align: right;
}

.project-detail-nav-next:hover {
    transform: translateX(4px);
}

@media (min-width: 900px) and (max-width: 1180px) {
    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.58 / 1;
    }

    body.touch-device .portfolio-right .card-content {
        min-height: clamp(6.9rem, 7vw, 7.45rem);
    }
}

@media (max-width: 899px) {
    .portfolio-container {
        display: block;
        gap: 5.75rem;
    }

    .portfolio-left {
        position: static;
        top: auto;
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(2.75rem, 5vw, 4rem);
    }

    .portfolio-left-inner,
    .portfolio-subtitle,
    .portfolio-desc {
        max-width: 100%;
    }

    .portfolio-right {
        width: 100%;
        max-width: 100%;
        gap: clamp(2.75rem, 4vw, 3.75rem);
    }

    .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    .portfolio-right .card-image-wrap {
        aspect-ratio: 1.72 / 1;
    }

    .portfolio-right .card-content {
        min-height: clamp(7.45rem, 7vw, 7.9rem);
    }

    .mobile-only-break {
        display: block;
    }
}

@media (max-width: 899px) {
    body.touch-device .portfolio-container {
        display: block;
    }

    body.touch-device .portfolio-left {
        position: static !important;
        top: auto;
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(3rem, 6vw, 4.5rem);
    }

    body.touch-device .portfolio-left-inner,
    body.touch-device .portfolio-subtitle,
    body.touch-device .portfolio-desc {
        max-width: 100%;
    }

    body.touch-device .portfolio-right {
        width: 100%;
        max-width: 100%;
        padding-top: 0;
        gap: clamp(2.75rem, 4.5vw, 4rem);
    }

    body.touch-device .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.72 / 1;
    }

    body.touch-device .portfolio-right .card-content {
        min-height: clamp(7.35rem, 9vw, 7.95rem);
    }

    body.touch-device .portfolio-title {
        font-size: var(--touch-heading-size);
        margin-bottom: 1.15rem;
    }

    body.touch-device .portfolio-subtitle {
        margin-bottom: 1.75rem;
        max-width: 100%;
    }

    body.touch-device .portfolio-desc {
        font-size: 0.96rem;
        line-height: 1.58;
        max-width: 100%;
    }

    body.touch-device .portfolio-left .section-label {
        margin-bottom: 1.95rem;
    }

    body.touch-device .portfolio-left .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    body.touch-device .mobile-only-break {
        display: block;
    }
}

/* Final portfolio consolidation: keep only two responsive states below desktop
   900–1180 = horizontal compressed layout
   <900 = stacked layout */
@media (min-width: 900px) and (max-width: 1180px) {
    .main-wrapper,
    body.touch-device .main-wrapper {
        padding-top: 78vh;
    }

    .portfolio-spacer-top,
    body.touch-device .portfolio-spacer-top {
        height: 36vh;
    }

    .portfolio-section,
    body.touch-device .portfolio-section {
        padding: 10rem var(--layout-gutter-tablet) 8.5rem;
    }

    .portfolio-container,
    body.touch-device .portfolio-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(2.5rem, 4vw, 3.5rem);
    }

    .portfolio-left,
    body.touch-device .portfolio-left {
        flex: 0 0 clamp(18rem, 31vw, 24rem);
        position: sticky !important;
        top: 19svh;
        width: auto;
        max-width: clamp(18rem, 31vw, 24rem);
        margin-bottom: 0;
    }

    .portfolio-left-inner,
    .portfolio-subtitle,
    .portfolio-desc,
    body.touch-device .portfolio-left-inner,
    body.touch-device .portfolio-subtitle,
    body.touch-device .portfolio-desc {
        max-width: 100%;
    }

    .portfolio-right,
    body.touch-device .portfolio-right {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        padding-top: 0;
        gap: clamp(2.25rem, 3vw, 3.25rem);
    }

    .portfolio-right .portfolio-card:first-child,
    body.touch-device .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    .portfolio-right .card-image-wrap,
    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.58 / 1;
    }

    .portfolio-right .card-content,
    body.touch-device .portfolio-right .card-content {
        min-height: clamp(6.9rem, 7vw, 7.45rem);
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    .card-metadata-row,
    body.touch-device .card-metadata-row {
        min-height: 58px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.55rem 2.1rem;
    }

    .card-meta-client,
    body.touch-device .card-meta-client {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    .card-meta-project,
    body.touch-device .card-meta-project {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
    }

    .card-meta-year,
    body.touch-device .card-meta-year {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
        width: auto;
    }

    .portfolio-title,
    body.touch-device .portfolio-title {
        font-size: clamp(1.8rem, 3.8vw, 3.2rem);
        margin-bottom: 1rem;
    }

    .portfolio-subtitle,
    body.touch-device .portfolio-subtitle {
        font-size: clamp(1.4rem, 2.5vw, 1.8rem);
        line-height: 1.02;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    .portfolio-desc,
    body.touch-device .portfolio-desc {
        font-size: clamp(0.98rem, 1.35vw, 1.16rem);
        line-height: 1.72;
        max-width: 40ch;
    }

    .portfolio-desc br,
    body.touch-device .portfolio-desc br {
        display: inline;
    }

    .portfolio-left .section-label,
    body.touch-device .portfolio-left .section-label {
        margin-bottom: 2.5rem;
    }

    .portfolio-left .section-label::after,
    body.touch-device .portfolio-left .section-label::after {
        width: 92px;
        margin-left: 12px;
    }

    .mobile-only-break,
    body.touch-device .mobile-only-break {
        display: none;
    }
}

@media (max-width: 899px) {
    .portfolio-scroll-wrapper::before,
    body.touch-device .portfolio-scroll-wrapper::before {
        display: none;
    }

    .portfolio-section::after,
    body.touch-device .portfolio-section::after {
        display: none;
    }

    .main-wrapper,
    body.touch-device .main-wrapper {
        padding-top: 68svh;
    }

    .portfolio-spacer-top,
    body.touch-device .portfolio-spacer-top {
        height: 32svh;
    }

    .portfolio-container,
    body.touch-device .portfolio-container {
        display: block;
        gap: 5.75rem;
    }

    .portfolio-left,
    body.touch-device .portfolio-left {
        position: static !important;
        top: auto;
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(3rem, 6vw, 4.5rem);
    }

    .portfolio-left-inner,
    .portfolio-subtitle,
    .portfolio-desc,
    body.touch-device .portfolio-left-inner,
    body.touch-device .portfolio-subtitle,
    body.touch-device .portfolio-desc {
        max-width: 100%;
    }

    .portfolio-right,
    body.touch-device .portfolio-right {
        width: 100%;
        max-width: 100%;
        padding-top: 0;
        gap: clamp(2.75rem, 4.5vw, 4rem);
    }

    .portfolio-right .portfolio-card:first-child,
    body.touch-device .portfolio-right .portfolio-card:first-child {
        margin-top: 0;
    }

    .portfolio-right .card-image-wrap,
    body.touch-device .portfolio-right .card-image-wrap {
        aspect-ratio: 1.72 / 1;
    }

    .portfolio-right .card-content,
    body.touch-device .portfolio-right .card-content {
        min-height: auto;
        padding-top: 0.95rem;
        padding-bottom: 0.9rem;
    }

    .portfolio-title,
    body.touch-device .portfolio-title {
        margin-bottom: 1.15rem;
    }

    .portfolio-subtitle,
    body.touch-device .portfolio-subtitle {
        margin-bottom: 1.75rem;
    }

    .portfolio-desc,
    body.touch-device .portfolio-desc {
        line-height: 1.58;
        max-width: 100%;
    }

    .portfolio-left .section-label,
    body.touch-device .portfolio-left .section-label {
        margin-bottom: 1.95rem;
    }

    .card-metadata-row,
    body.touch-device .card-metadata-row {
        min-height: 0;
    }

    .portfolio-left .section-label::after,
    body.touch-device .portfolio-left .section-label::after {
        width: 64px;
        margin-left: 10px;
    }

    .portfolio-desc br,
    body.touch-device .portfolio-desc br {
        display: none;
    }

    .mobile-only-break,
    body.touch-device .mobile-only-break {
        display: block;
    }
}

@media (max-width: 767px) {
    .portfolio-section .card-content,
    body.touch-device .portfolio-section .card-content,
    .full-portfolio-overlay .card-content,
    body.touch-device .full-portfolio-overlay .card-content {
        grid-template-columns: 1fr;
        align-items: flex-start;
        row-gap: 0.8rem;
    }

    .portfolio-section .card-button-row,
    body.touch-device .portfolio-section .card-button-row,
    .full-portfolio-overlay .card-button-row,
    body.touch-device .full-portfolio-overlay .card-button-row {
        width: 100%;
    }

    .portfolio-section .card-metadata-row,
    body.touch-device .portfolio-section .card-metadata-row,
    .full-portfolio-overlay .card-metadata-row,
    body.touch-device .full-portfolio-overlay .card-metadata-row {
        width: 100%;
        justify-self: start;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: 0;
        row-gap: 0.34rem;
        column-gap: 0;
    }

    .portfolio-section .card-meta,
    body.touch-device .portfolio-section .card-meta,
    .full-portfolio-overlay .card-meta,
    body.touch-device .full-portfolio-overlay .card-meta {
        width: 100%;
        justify-content: flex-start;
        justify-self: start;
        text-align: left;
    }

    .portfolio-section .card-meta-client,
    .portfolio-section .card-meta-project,
    .portfolio-section .card-meta-year,
    body.touch-device .portfolio-section .card-meta-client,
    body.touch-device .portfolio-section .card-meta-project,
    body.touch-device .portfolio-section .card-meta-year,
    .full-portfolio-overlay .card-meta-client,
    .full-portfolio-overlay .card-meta-project,
    .full-portfolio-overlay .card-meta-year,
    body.touch-device .full-portfolio-overlay .card-meta-client,
    body.touch-device .full-portfolio-overlay .card-meta-project,
    body.touch-device .full-portfolio-overlay .card-meta-year {
        grid-column: 1;
        width: 100%;
        justify-self: start;
        text-align: left;
    }

    .portfolio-section .card-meta-client,
    body.touch-device .portfolio-section .card-meta-client,
    .full-portfolio-overlay .card-meta-client,
    body.touch-device .full-portfolio-overlay .card-meta-client {
        grid-row: 1;
    }

    .portfolio-section .card-meta-project,
    body.touch-device .portfolio-section .card-meta-project,
    .full-portfolio-overlay .card-meta-project,
    body.touch-device .full-portfolio-overlay .card-meta-project {
        grid-row: 2;
    }

    .portfolio-section .card-meta-year,
    body.touch-device .portfolio-section .card-meta-year,
    .full-portfolio-overlay .card-meta-year,
    body.touch-device .full-portfolio-overlay .card-meta-year {
        grid-row: 3;
    }

    .full-portfolio-overlay {
        padding-bottom: 8vh;
    }

    .fp-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .fp-container {
        padding: 13vh clamp(20px, 5vw, 40px) 4.5vh;
    }

    .fp-header-wrap {
        margin-bottom: 3.2vh;
        padding-right: 64px;
    }

    .fp-header-text {
        padding-right: 0;
    }

    .fp-main-title {
        font-size: clamp(2.45rem, 5.9vw, 4.2rem);
        line-height: 0.98;
    }

    .fp-close-btn {
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
    }

    .fp-close-icon {
        width: 32px;
        height: 32px;
    }

    .fp-card-img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

body.fp-overlay-open .lang-switcher,
body.fp-overlay-open .floating-contact,
body.fp-overlay-open .scroll-entrance-wrap,
body.fp-overlay-open .cinema-controls,
body.fp-overlay-open .mobile-cinema-toggle,
body.project-overlay-open .lang-switcher,
body.project-overlay-open .floating-contact,
body.project-overlay-open .scroll-entrance-wrap,
body.project-overlay-open .cinema-controls,
body.project-overlay-open .mobile-cinema-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}

body.fp-overlay-open .lang-switcher,
body.project-overlay-open .lang-switcher {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 100100;
}

body.fp-overlay-open .main-header,
body.overlay-menu-open .main-header,
body.project-overlay-open .main-header {
    z-index: 100101;
}

body.fp-overlay-open .floating-contact,
body.project-overlay-open .floating-contact {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 100100;
}

body.ios-chrome.fp-overlay-open .lang-switcher,
body.ios-chrome.project-overlay-open .lang-switcher,
body.ios-chrome.fp-overlay-open .floating-contact,
body.ios-chrome.project-overlay-open .floating-contact {
    mix-blend-mode: difference;
}

body.ios-chrome.fp-overlay-open .contact-line,
body.ios-chrome.project-overlay-open .contact-line {
    display: none;
}

    .project-detail-overlay {
        padding-bottom: calc(10vh + env(safe-area-inset-bottom, 0px) + 84px);
    }

    .project-detail-shell {
        padding: 12.5vh clamp(20px, 5vw, 40px) calc(8vh + env(safe-area-inset-bottom, 0px) + 92px);
    }

    .project-detail-header {
        --project-detail-rail-width: 72px;
        --project-detail-close-size: 48px;
        --project-detail-close-icon-size: 30px;
        gap: 1rem;
        margin-bottom: 2.4rem;
        padding-right: var(--project-detail-rail-width);
    }

    .project-detail-title {
        max-width: 100%;
        font-size: clamp(2.2rem, 10vw, 3.4rem);
    }

    .project-detail-subtitle {
        max-width: 100%;
    }

    .project-detail-service-tag {
        right: calc((var(--project-detail-close-size) - var(--project-detail-close-icon-size)) / 2);
        bottom: -1.25rem;
        margin: 0;
        width: var(--project-detail-rail-width);
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    .project-detail-close {
        top: -0.2rem;
        right: 0;
        width: 48px;
        height: 48px;
    }

    .project-detail-close svg {
        width: 30px;
        height: 30px;
    }

    .project-detail-meta {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 2.4rem;
    }

    .project-detail-hero-media,
    .project-detail-hero-media.is-split.has-portrait-primary,
    .project-detail-hero-media.is-split.has-landscape-primary,
    .project-detail-hero-media.is-single {
        grid-template-columns: 1fr;
        margin-bottom: 3rem;
        gap: 1rem;
    }

    .project-detail-media-panel-image {
        aspect-ratio: 16 / 10;
    }

    .project-detail-media-panel-portrait {
        max-width: min(100%, 26rem);
        justify-self: center;
    }

    .project-detail-section {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding-top: 1rem;
    }

    .project-detail-inline-media-grid {
        grid-template-columns: 1fr;
    }

    .project-detail-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 2.5rem;
        padding-top: 1.1rem;
    }

    .project-detail-nav {
        gap: 0.28rem;
        padding: 0;
        text-align: left;
    }

    .project-detail-nav-kicker {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .project-detail-nav-client {
        font-size: 0.84rem;
    }

    .project-detail-nav-title {
        max-width: 11ch;
        font-size: clamp(0.98rem, 4.8vw, 1.18rem);
        line-height: 1.08;
    }

    .project-detail-nav-next {
        justify-items: end;
        text-align: right;
    }

    .project-detail-nav + .project-detail-nav {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 360px) {
    .project-detail-pagination {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .project-detail-nav {
        min-width: 0;
    }

    .project-detail-nav-next {
        justify-items: end;
        text-align: right;
    }

    .project-detail-nav-title {
        max-width: 8.5ch;
        font-size: 0.96rem;
    }

    .project-detail-closing p {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1366px) {
    .portfolio-section .card-metadata-row,
    body.touch-device .portfolio-section .card-metadata-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 6.4rem);
    }

    .portfolio-section .card-meta-project,
    body.touch-device .portfolio-section .card-meta-project {
        width: 100%;
    }

    .portfolio-section .card-meta-client span,
    body.touch-device .portfolio-section .card-meta-client span {
        max-width: 100%;
    }

    .portfolio-section .card-meta-project span,
    body.touch-device .portfolio-section .card-meta-project span {
        max-width: 100%;
    }

    .full-portfolio-overlay .card-content {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 1.35rem;
        row-gap: 0;
    }

    .full-portfolio-overlay .card-button-row {
        align-self: center;
    }

    .full-portfolio-overlay .card-metadata-row {
        width: min(100%, 17.2rem);
        justify-self: end;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        min-height: 0;
        row-gap: 0.36rem;
        column-gap: 0;
    }

    .full-portfolio-overlay .card-meta {
        font-size: 0.54rem;
        letter-spacing: 0.03em;
        width: 100%;
        justify-self: end;
    }

    .full-portfolio-overlay .card-meta span {
        max-width: 7rem;
        font-size: 0.64rem;
        letter-spacing: 0;
    }

    .full-portfolio-overlay .card-meta-client span {
        max-width: 12.25rem;
    }

    .full-portfolio-overlay .card-meta-project span {
        max-width: 4.9rem;
    }

    .full-portfolio-overlay .card-meta-client,
    .full-portfolio-overlay .card-meta-project,
    .full-portfolio-overlay .card-meta-year {
        grid-column: 1;
        width: 100%;
        justify-self: end;
        text-align: right;
    }

    .full-portfolio-overlay .card-meta {
        justify-content: end;
    }

    .full-portfolio-overlay .card-meta-client { grid-row: 1; }
    .full-portfolio-overlay .card-meta-project { grid-row: 2; }
    .full-portfolio-overlay .card-meta-year { grid-row: 3; }

    .project-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-detail-hero-media {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: clamp(1.2rem, 2.4vw, 1.8rem);
    }

    .project-detail-hero-media.is-split.has-portrait-primary {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    }

    .project-detail-hero-media.is-split.has-landscape-primary {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .project-detail-hero-media,
    .project-detail-hero-media.is-split.has-portrait-primary,
    .project-detail-hero-media.is-split.has-landscape-primary,
    .project-detail-hero-media.is-single {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .project-detail-media-panel-portrait {
        max-width: min(100%, 30rem);
        justify-self: center;
    }

    .project-detail-media-panel-image {
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body.touch-device .hero-ui {
        transform: translateY(-6vh);
    }

    body.touch-device .hero-copy-stack {
        width: min(102vw, 54rem);
        gap: 0.48rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(2.55rem, 4.95vw, 3.5rem);
        letter-spacing: 0;
    }

    body.touch-device .hero-line-second {
        white-space: normal;
    }

    body.touch-device .hero-subtitle {
        max-width: 30rem;
        margin-top: 0;
        font-size: clamp(0.92rem, 1.8vw, 1.05rem);
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        max-width: 27rem;
        font-size: clamp(0.82rem, 1.55vw, 0.96rem);
    }

    body.touch-device .mobile-cinema-toggle {
        display: inline-flex;
    }
}

@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) {
    body.touch-device .hero-ui {
        transform: translateY(-8vh);
        padding-inline: 3vw;
    }

    body.touch-device .hero-copy-stack {
        width: min(54vw, 28rem);
        gap: 0.52rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(3.12rem, 4.9vw, 4.5rem);
        max-width: 100%;
        line-height: 0.88;
        text-wrap: pretty;
        letter-spacing: 0;
    }

    body.touch-device .hero-subtitle {
        font-size: clamp(0.72rem, 0.95vw, 0.84rem);
        max-width: 20rem;
        margin-top: 0;
        text-wrap: balance;
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        font-size: clamp(0.68rem, 0.88vw, 0.78rem);
        max-width: 18rem;
    }

    html[lang="en"] body.touch-device .hero-line-second {
        font-size: 0.52em;
        line-height: 0.9;
        letter-spacing: 0.016em;
    }

    body.touch-device .mobile-cinema-toggle {
        display: inline-flex;
        min-width: 124px;
        padding: 7px 11px 7px 9px;
        font-size: 0.61rem;
        letter-spacing: 0.05em;
        margin-top: 0.72rem;
    }

    body.touch-device .mobile-cinema-toggle.is-pause {
        padding: 7px 9px;
    }

}

@media (orientation: landscape) and (max-height: 820px) and (max-width: 900px) {
    body.touch-device .hero-copy-stack {
        width: min(56vw, 22rem);
        gap: 0.46rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(1.34rem, 4vw, 1.82rem);
        line-height: 0.84;
        max-width: 100%;
        letter-spacing: 0;
    }

    body.touch-device .hero-subtitle {
        font-size: clamp(0.56rem, 0.98vw, 0.64rem);
        max-width: min(46vw, 14rem);
        line-height: 1.14;
    }

    html[lang="en"] body.touch-device .hero-subtitle {
        max-width: none;
        white-space: nowrap;
    }

    html[lang="en"] body.touch-device .hero-title .hero-line:not(.hero-line-second) {
        font-size: 0.98em;
        line-height: 0.84;
        margin-bottom: -0.03em;
        letter-spacing: 0;
    }

    html[lang="en"] body.touch-device .hero-line-second {
        font-size: 0.5em;
        line-height: 0.9;
        letter-spacing: 0.016em;
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        font-size: clamp(0.56rem, 0.98vw, 0.64rem);
        max-width: min(48vw, 14.5rem);
        line-height: 1.14;
    }

    .mobile-cinema-toggle,
    body.touch-device .mobile-cinema-toggle {
        min-width: 118px;
        padding: 7px 11px 7px 9px;
        font-size: 0.62rem;
        letter-spacing: 0.05em;
        gap: 5px;
        margin-top: 0.72rem;
    }

    .mobile-cinema-toggle.is-pause,
    body.touch-device .mobile-cinema-toggle.is-pause {
        padding: 7px 10px;
    }

    .mobile-cinema-icon svg,
    body.touch-device .mobile-cinema-icon svg {
        width: 12px;
        height: 12px;
    }

}

@media (orientation: portrait) and (max-width: 767px) {
    body.touch-device .hero-copy-stack {
        width: min(78vw, 18rem);
        gap: 0.5rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(1.98rem, 8.15vw, 3.12rem);
        line-height: 0.84;
        letter-spacing: 0;
    }

    body.touch-device .hero-line-second {
        white-space: normal;
    }

    body.touch-device .hero-subtitle {
        max-width: 13.4rem;
        font-size: clamp(0.64rem, 2.1vw, 0.76rem);
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        max-width: 12.8rem;
        font-size: clamp(0.62rem, 1.95vw, 0.72rem);
        line-height: 1.18;
        text-wrap: balance;
    }

}

@media (min-width: 768px) {
    html[lang="es"] body.touch-device .hero-title .hero-line:not(.hero-line-second) {
        font-size: 0.52em;
    }
}

@media (orientation: portrait) and (max-width: 767px) {
    html[lang="es"] body.touch-device .hero-title {
        line-height: 0.82;
    }

    html[lang="es"] body.touch-device .hero-title .hero-line:not(.hero-line-second) {
        font-size: 0.54em;
        margin-bottom: -0.08em;
    }

}

@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
    body.touch-device .hero-copy-stack {
        width: min(68vw, 26rem);
        gap: 0.62rem;
    }

    body.touch-device .hero-title {
        font-size: clamp(2.78rem, 5.35vw, 3.95rem);
        line-height: 0.84;
    }

    body.touch-device .hero-subtitle {
        max-width: 19rem;
        font-size: clamp(0.76rem, 1.02vw, 0.86rem);
        line-height: 1.18;
        text-wrap: balance;
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        max-width: 19.5rem;
        font-size: clamp(0.76rem, 1.02vw, 0.86rem);
        line-height: 1.18;
    }

    html[lang="en"] body.touch-device .hero-line-second {
        font-size: 0.52em;
        line-height: 0.9;
        letter-spacing: 0.016em;
    }

    html[lang="en"] body.touch-device .hero-pill-slot {
        margin-top: 0.08rem;
    }

}

@media (orientation: portrait) and (min-width: 540px) and (max-width: 767px) {
    html[lang="en"] body.touch-device .method-word-shell {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0.12em;
    }
}

@media (orientation: portrait) and (max-width: 430px) {
    html[lang="en"] body.touch-device .method-word-shell {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0.12em;
    }

    html[lang="en"] body.touch-device .hero-copy-stack {
        gap: 0.48rem;
    }

    html[lang="en"] body.touch-device .hero-title {
        line-height: 0.84;
    }

    html[lang="en"] body.touch-device .hero-title .hero-line:not(.hero-line-second) {
        font-size: 0.98em;
        line-height: 0.84;
        margin-bottom: -0.03em;
        letter-spacing: 0;
    }

    html[lang="en"] body.touch-device .hero-line-second {
        font-size: 0.5em;
        line-height: 0.9;
        letter-spacing: 0.016em;
    }

    html[lang="en"] body.touch-device .hero-subtitle {
        max-width: none;
        font-size: clamp(0.55rem, 1.7vw, 0.64rem);
        line-height: 1.18;
        white-space: nowrap;
    }

    html[lang="en"] body.touch-device .hero-pill-slot {
        margin-top: 0.08rem;
    }

    html[lang="es"] body.touch-device .hero-copy-stack {
        gap: 0.48rem;
    }

    html[lang="es"] body.touch-device .hero-subtitle {
        max-width: 12rem;
        font-size: clamp(0.6rem, 1.9vw, 0.7rem);
        line-height: 1.18;
        text-wrap: balance;
    }

}

@media (max-width: 767px) {
    .project-detail-header {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.8rem;
    }

    .project-detail-header-copy {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .project-detail-service-tag {
        bottom: -1.4rem;
        width: var(--project-detail-rail-width);
    }
}

/* ══════════════════════
   TOUCH PORTFOLIO BUTTONS
   Final source of truth for mobile/tablet button states.
   ══════════════════════ */
body.touch-device .card-button-row .portfolio-btn,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn,
body.touch-device .portfolio-more-card .portfolio-btn,
body.hero-mobile-layout .card-button-row .portfolio-btn,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 6px 6px 0 0 rgba(255, 255, 255, 0.14);
    transform: translate(-2px, -2px);
    pointer-events: auto;
}

body.touch-device .card-button-row .portfolio-btn::before,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.touch-device .portfolio-more-card .portfolio-btn::before,
body.hero-mobile-layout .card-button-row .portfolio-btn::before,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn::before,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn::before {
    opacity: 1;
    transform: translate(6px, 6px);
    border-color: rgba(255, 255, 255, 0.08);
}

body.touch-device .card-button-row .portfolio-btn .btn-icon-wrap,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap,
body.touch-device .portfolio-more-card .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .card-button-row .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn .btn-icon-wrap {
    color: currentColor;
    transform: translateX(2px);
}

body.touch-device .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.touch-device .portfolio-more-card .portfolio-btn .btn-icon-wrap svg,
body.hero-mobile-layout .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn .btn-icon-wrap svg,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn .btn-icon-wrap svg {
    stroke: currentColor;
}

body.touch-device .card-button-row .portfolio-btn.is-pressed,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 2px 2px 0 0 rgba(255, 255, 255, 0.12);
    transform: translate(0, 0);
}

body.touch-device .card-button-row .portfolio-btn.is-pressed::before,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed::before,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed::before,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed::before {
    opacity: 0;
    transform: translate(0, 0);
}

body.touch-device .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.touch-device .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.touch-device .portfolio-more-card .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .full-portfolio-overlay .card-button-row .portfolio-btn.is-pressed .btn-icon-wrap,
body.hero-mobile-layout .portfolio-more-card .portfolio-btn.is-pressed .btn-icon-wrap {
    transform: translateX(0);
}

body.touch-device .portfolio-card,
body.touch-device .fp-card,
body.hero-mobile-layout .portfolio-card,
body.hero-mobile-layout .fp-card {
    pointer-events: none;
}
    .lang-switcher,
    .floating-contact {
        mix-blend-mode: difference;
        z-index: 100004;
    }

    .lang-switcher {
        bottom: 18px;
        left: 20px;
    }

    .floating-contact {
        right: 20px;
        bottom: 18px;
    }

.lang-btn,
.contact-fixed-btn {
    color: #fff;
}

@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .project-detail-service-tag {
        bottom: -2.7rem;
    }

    .full-portfolio-overlay .card-meta-client {
        justify-self: start;
        text-align: left;
    }
}

@media (min-width: 993px) and (max-width: 1366px) {
    html[lang="en"] body.touch-device .method-word-shell {
        display: block !important;
        width: 100%;
        margin-left: 0 !important;
        margin-top: 0.12em !important;
    }
}