@charset "utf-8";

:root, [data-theme="dark"] { color-scheme: light; --bg: #FBF9EF; --bg-d: #FBF9EF; --bg-darker: #FBF9EF; --card: #FFFFFF; --base: #171412; --grey: #8E827C; --line: rgba(23, 20, 18, .12); --line-2: rgba(23, 20, 18, .07); --dark: #171412; --on-dark: #FBF9EF; --card-step: #F2F0E7; --invert: #12100E; --on-invert: #FBF9EF; --ink: #101010; --ink-2: #17161A; --on-ink: #FBF9EF; }

html, body { background: var(--bg); }

body { overflow-x: clip; }

[data-theme="dark"] body { background: var(--bg); }

.panel, .panel-alt { background: transparent; }

.studio-scene.panel-alt { background: rgb(20, 17, 15); }

.studio-scene { margin-block: clamp(3rem, 7vw, 112px); grid-template-rows: minmax(0px, 1fr); padding-top: clamp(3rem, 6vw, 5rem); }

.anchor-top { display: block; height: 0px; }

.ag-wrap, .ag-about, .ag-trust-sec, .ag-works, .ag-services, .ag-contact { width: 100%; max-width: 1425px; margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 4rem); }

.ag-about, .ag-trust-sec, .ag-works, .ag-services, .ag-contact { padding-block: clamp(4.5rem, 8vw, 128px); }

.ag-label { font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--grey); margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }

.ag-label-fx { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: clamp(0.7rem, 1.1vw, 0.82rem); letter-spacing: 0.28em; text-transform: uppercase; color: var(--base); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ag-label-fx { background-image: linear-gradient(100deg,
      var(--base) 0%, var(--base) 18%,
      var(--red) 34%, #3A849E 48%, var(--red) 62%,
      var(--base) 80%, var(--base) 100%); background-size: 320% 100%; background-clip: text; color: transparent; animation: 9s linear 0s infinite normal none running labelflow; }
}

@keyframes labelflow { 
  0% { background-position: 320% 0px; }
  100% { background-position: 0px 0px; }
}

.ag-mega { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 13.6vw, 204px); line-height: 0.96; letter-spacing: -0.045em; color: color-mix(in srgb, var(--base) 26%, transparent); margin: 0px 0px clamp(-5rem, -5vw, -1.5rem); padding-bottom: 0.06em; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0) 96%); }

.ag-lede { font-family: var(--sans); font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--grey); max-width: 56ch; }

.ag-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; padding: 0.95rem 1.6rem; border-radius: var(--radius-pill); width: fit-content; position: relative; overflow: hidden; isolation: isolate; transition: transform .4s var(--ease-out), color .3s var(--ease-out); }

.ag-btn::after { content: "→"; font-size: 1.05em; transition: transform .4s var(--ease-out); }

.ag-btn:hover::after { transform: translateX(4px); }

.ag-btn:hover { transform: translateY(-2px); }

.ag-btn-dark { background: var(--dark); color: var(--on-dark); }

.ag-btn-light { background: rgb(251, 249, 239); color: rgb(23, 20, 18); }

.ag-btn-ghost { border: 1px solid var(--line); color: var(--base); }

.btn-glow { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-pill); border: 1.5px solid transparent; background: linear-gradient(var(--glow-core, var(--dark)), var(--glow-core, var(--dark))) padding-box,
    conic-gradient(from var(--nova, 0deg),
      color-mix(in srgb, var(--glow-ring, var(--red)) 12%, transparent) 0deg 190deg,
      color-mix(in srgb, var(--glow-ring, var(--red)) 70%, transparent) 262deg,
      #FFFFFF 318deg,
      color-mix(in srgb, var(--glow-ring, var(--red)) 12%, transparent) 360deg) border-box; animation: 4.2s linear 0s infinite normal none running novaspin; transition: transform .35s var(--ease-out), box-shadow .45s var(--ease-out); }

.btn-glow::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: radial-gradient(32% 42% at 26% 38%, var(--red) 0%, transparent 62%),
    radial-gradient(30% 40% at 72% 62%, #3A849E 0%, transparent 64%),
    radial-gradient(34% 44% at 52% 86%, #FF7722 0%, transparent 62%); filter: blur(16px) saturate(1.15); opacity: 0.8; animation: shaderdrift 11s var(--ease-soft) infinite; }

.btn-glow:hover { transform: translateY(-2px); animation-duration: 1.5s; box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--red) 70%, transparent),
    0 0 28px -8px color-mix(in srgb, var(--red) 55%, transparent); }

.btn-glow:hover::before { animation-duration: 4.2s; opacity: 1; filter: blur(13px) saturate(1.35); }

.btn-glow > *, .btn-glow svg { position: relative; z-index: 1; }

.btn-dark.btn-glow, .ag-btn-dark.btn-glow { --glow-core: var(--dark); color: var(--on-dark); }

.btn-red.btn-glow { --glow-core: var(--red); --glow-ring: #FFFFFF; color: var(--on-red); }

.pill-btn.btn-glow { --glow-core: #FBF9EF; color: rgb(23, 20, 18); }

.pill-btn.btn-glow:hover { color: rgb(23, 20, 18); }

@keyframes shaderdrift { 
  0% { transform: translate3d(-6%, -4%, 0px) rotate(0deg) scale(1); }
  33% { transform: translate3d(7%, 5%, 0px) rotate(42deg) scale(1.14); }
  66% { transform: translate3d(-4%, 7%, 0px) rotate(-38deg) scale(1.06); }
  100% { transform: translate3d(-6%, -4%, 0px) rotate(0deg) scale(1); }
}

@property --nova { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes novaspin { 
  100% { --nova: 360deg; }
}

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .btn-glow { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
}

.ag-tags li, .block-tags li { position: relative; isolation: isolate; border: 1px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      color-mix(in srgb, var(--base) 12%, transparent) 0deg 232deg,
      color-mix(in srgb, var(--red) 72%, transparent) 296deg,
      #FF7722 328deg,
      color-mix(in srgb, var(--base) 12%, transparent) 360deg) border-box; animation: novaspin var(--sp, 4.6s) linear infinite; animation-delay: calc(var(--t, 0) * -.83s); }

.ag-tags li:hover, .block-tags li:hover { color: var(--base); animation-duration: 1.5s; }

.ag-tags li::after, .block-tags li::after { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: radial-gradient(70% 120% at 50% 120%, color-mix(in srgb, var(--red) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .4s var(--ease-out); }

.ag-tags li:hover::after, .block-tags li:hover::after { opacity: 1; }

.bg-nova { position: relative; overflow: hidden; background: radial-gradient(90% 60% at 12% 0%,  color-mix(in srgb, var(--tint, #FF1F4E) 42%, transparent), transparent 62%),
    radial-gradient(70% 55% at 92% 22%, rgba(58, 132, 158, .32), transparent 62%),
    radial-gradient(80% 60% at 50% 108%, color-mix(in srgb, var(--red) 24%, transparent), transparent 62%),
    linear-gradient(180deg, #17130F 0%, #100E0D 46%, #0A0908 100%); }

.bg-nova::after { content: ""; position: absolute; inset: 0px; pointer-events: none; opacity: 0.32; background-image: linear-gradient(rgba(251, 249, 239, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 249, 239, 0.07) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; mask-image: radial-gradient(80% 70% at 50% 20%, rgb(0, 0, 0), transparent 78%); }

.ag-hero { position: relative; background: transparent; border-radius: 0px; margin-top: 0px; padding-top: clamp(7rem, 15vh, 11.5rem); padding-bottom: 0px; min-height: 0px; display: block; overflow: visible; }

.ag-hero .ag-wrap { text-align: center; }

.ag-trust { display: flex; align-items: center; justify-content: center; gap: 0.8rem; font-family: var(--sans); font-size: 14px; line-height: 20px; color: var(--grey); margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

.ag-trust-faces { display: inline-flex; }

.ag-trust-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }

.ag-h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.2vw, 88px); line-height: 1.06; letter-spacing: -0.04em; color: var(--base); max-width: 17ch; margin: 0px auto clamp(1.4rem, 2.6vw, 2rem); text-wrap: balance; }

.ag-h1 em { font-style: normal; color: var(--red); }

.ag-hero .ag-lede { margin: 0px auto; text-align: center; max-width: 62ch; }

.cw { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: clamp(2rem, 4vw, 3.5rem); height: clamp(400px, 52vw, 700px); overflow: hidden; perspective: 1000px; perspective-origin: 50% 50%; }

.cw-track { position: absolute; inset: 0px; transform-style: preserve-3d; }

.cw-item { position: absolute; left: 50%; top: 50%; width: clamp(200px, 20vw, 260px); aspect-ratio: 3 / 4; border-radius: 7px; overflow: hidden; background: var(--bg-darker); box-shadow: rgba(23, 20, 18, 0.45) 0px 24px 48px -26px; transform: translate(-50%, -50%) scale(0.26); transform-style: preserve-3d; }

.cw-item img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .cw { height: clamp(220px, 30vw, 360px); }
}

.ag-logos { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; padding: 0px; margin-top: 8px; }

.ag-logos-box { background: var(--card); border-radius: 0px; padding-block: clamp(2.4rem, 4.5vw, 64px); padding-inline: 0px; overflow: hidden; }

.strip { position: relative; width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent 100%); }

.strip-in { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.4rem); width: max-content; animation: 96s linear 0s infinite normal none running slide; will-change: transform; }

.strip:hover .strip-in { animation-play-state: paused; }

.strip-in > span { flex: 0 0 auto; display: grid; place-items: center; }

.strip-in img { height: clamp(28px, 3.2vw, 46px); width: auto; filter: grayscale(1); opacity: 0.5; transition: filter .4s var(--ease-out), opacity .4s var(--ease-out), transform .4s var(--ease-out); }

.strip-in span:hover img { filter: none; opacity: 1; transform: scale(1.06); }

.xtape { position: relative; margin-block: clamp(2.5rem, 6vw, 5.5rem); height: clamp(200px, 24vw, 320px); display: grid; place-items: center; overflow: hidden; pointer-events: none; }

.xtape-band { grid-area: 1 / 1; width: 160%; overflow: hidden; transform: translateY(-30px); box-shadow: rgba(0, 0, 0, 0.45) 0px 18px 40px -24px; }

.xtape-red { background: color-mix(in srgb, var(--red) 88%, #FBF9EF); color: rgb(255, 255, 255); rotate: -6deg; }

.xtape-ink { background: rgb(32, 28, 26); color: rgba(244, 244, 244, 0.92); rotate: 6deg; }

.js .xtape-band { opacity: 0; transform: translateY(-30px) scale(0.96); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), rotate 1.1s var(--ease-out); rotate: 0deg; }

.js .xtape-band.is-in { opacity: 1; transform: translateY(-30px) scale(1); }

.js .xtape-red.is-in { rotate: -6deg; }

.js .xtape-ink.is-in { rotate: 6deg; }

.xtape-track { display: flex; align-items: center; gap: clamp(1.4rem, 2.8vw, 2.6rem); width: max-content; padding-block: clamp(0.9rem, 1.7vw, 1.5rem); font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.6rem); letter-spacing: -0.03em; white-space: nowrap; animation: 46s linear 0s infinite normal none running slide; }

.xtape-back { animation-duration: 59s; animation-direction: reverse; animation-delay: -13s; }

.xtape-track i { font-style: normal; font-size: 0.38em; opacity: 0.55; transform: translateY(-0.22em); }

.ag-about { padding-inline: clamp(1.15rem, 14vw, 220px); text-align: center; }

.ag-statement { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.8vw, 3.6rem); line-height: 1.14; letter-spacing: -0.035em; color: var(--base); margin: 0px auto clamp(2rem, 4vw, 3rem); max-width: 22ch; text-wrap: balance; }

.ag-tags { list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }

.ag-tags li { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.5rem 1rem; transition: color .3s var(--ease-out), border-color .3s var(--ease-out); }

.ag-tags li:hover { color: var(--base); border-color: var(--base); }

.ag-trust-sec { padding-inline: clamp(1.15rem, 6vw, 96px); text-align: center; }

.fc-stack, .em-grid, .acc, .ag-contact-card { position: relative; z-index: 1; }

.ag-trust-sec .ag-mega { text-align: center; }

.fc-stack { display: grid; gap: clamp(1rem, 2vw, 1.6rem); perspective: 1400px; margin-bottom: clamp(3rem, 6vw, 5rem); }

@media (min-width: 900px) {
  .fc-stack { grid-template-columns: repeat(3, 1fr); }
}

.fc-card { position: relative; text-align: left; border-radius: 28px; padding: clamp(1.5rem, 2.4vw, 2.2rem); min-height: clamp(300px, 34vw, 380px); background: var(--ink); color: var(--on-ink); display: grid; align-content: space-between; gap: 1.6rem; box-shadow: rgba(0, 0, 0, 0.6) 0px 40px 70px -46px; transform-origin: 50% 100%; opacity: 0; transform: translateY(40px) scale(0.9); transition: opacity .8s var(--ease-out) calc(var(--i, 0) * .12s),
    transform .9s var(--ease-out) calc(var(--i, 0) * .12s),
    box-shadow .5s var(--ease-out); }

.fc-card.is-float { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }

.fc-in { display: grid; gap: 1.4rem; height: 100%; align-content: space-between; }

.fc-card.is-float { animation: fcfloat calc(6s + var(--i, 0) * .7s) ease-in-out infinite; animation-delay: calc(1s + var(--i, 0) * .9s); }

@keyframes fcfloat { 
  0%, 100% { transform: translateY(0)     rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + .5deg)); }
}

.fc-stack:hover .fc-card.is-float:not(:hover) { opacity: 0.68; scale: 0.96; }

.fc-card.is-float:hover { opacity: 1; scale: 1.06; z-index: 2; animation-play-state: paused; box-shadow: rgba(0, 0, 0, 0.72) 0px 70px 100px -44px; }

.fc-card { transition: opacity .5s var(--ease-out), scale .55s var(--ease-out),
                       box-shadow .5s var(--ease-out),
                       transform .9s var(--ease-out) calc(var(--i, 0) * .12s); }

.fc-n { font-family: var(--sans); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.5); }

.fc-n i { font-style: normal; color: rgb(255, 255, 255); }

.fc-quote { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; letter-spacing: -0.03em; color: rgb(255, 255, 255); margin: 0px; }

.fc-foot { display: grid; gap: 0.2rem; }

.fc-name { font-family: var(--sans); font-weight: 500; font-size: 15px; color: rgb(255, 255, 255); }

.fc-role { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

.ag-stats { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); grid-template-columns: repeat(3, 1fr); margin: 0px; border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 3vw, 2.4rem); text-align: left; }

.ag-stats dt { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -0.05em; color: var(--base); }

.ag-stats dd { margin: 0.5rem 0px 0px; font-family: var(--sans); font-size: 14px; line-height: 20px; color: var(--grey); }

.ag-works { padding-inline: clamp(0.6rem, 1.4vw, 1.1rem); }

.ag-works-head { text-align: center; padding-inline: clamp(1rem, 4vw, 4rem); }

.ag-works-head .ag-mega { text-align: center; }

.em-grid { display: grid; gap: clamp(0.7rem, 1.2vw, 1.1rem); }

@media (min-width: 860px) {
  .em-grid { grid-template-columns: repeat(2, 1fr); }
}

.em-card { position: relative; display: block; overflow: hidden; border-radius: 28px; height: clamp(360px, 42vw, 560px); background: var(--ink); color: var(--on-ink); isolation: isolate; box-shadow: rgba(0, 0, 0, 0.55) 0px 40px 80px -55px; transition: box-shadow .6s var(--ease-out); }

.em-card:hover { box-shadow: rgba(0, 0, 0, 0.68) 0px 55px 95px -50px; }

.em-bg { position: absolute; inset: 0px; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }

.em-card:hover .em-bg { transform: scale(1.05); }

.em-bg-nova { display: block; background: radial-gradient(90% 60% at 14% 4%,  color-mix(in srgb, var(--tint) 62%, transparent), transparent 62%),
    radial-gradient(70% 55% at 90% 24%, rgba(58, 132, 158, .3), transparent 62%),
    radial-gradient(80% 60% at 50% 106%, color-mix(in srgb, var(--red) 26%, transparent), transparent 62%),
    linear-gradient(180deg, #17130F 0%, #100E0D 46%, #0A0908 100%); }

.em-mark { position: absolute; top: 50%; left: 50%; width: clamp(120px, 22%, 200px); height: auto; transform: translate(-50%, -60%); opacity: 0.3; filter: grayscale(1) brightness(2.6); }

.em-veil { position: absolute; inset: 0px; z-index: 1; background: linear-gradient(rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0.12) 34%, rgba(10, 10, 10, 0.55) 100%); pointer-events: none; }

.em-n { position: absolute; z-index: 3; top: clamp(1.1rem, 2vw, 1.7rem); left: clamp(1.1rem, 2vw, 1.7rem); font-family: var(--sans); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.62); }

.em-n i { font-style: normal; color: rgb(255, 255, 255); }

.em-panel { position: absolute; z-index: 3; width: min(80%, 26rem); border-radius: 20px; padding: clamp(1.1rem, 1.8vw, 1.6rem); display: grid; gap: 0.55rem; background: color-mix(in srgb, var(--tint) 58%, rgba(10, 10, 10, .9)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: rgba(0, 0, 0, 0.7) 0px 30px 60px -30px; backdrop-filter: blur(10px); opacity: 0; transform: translate(var(--tx, 0), var(--ty, 40%)) scale(.94); transition: transform .8s cubic-bezier(.22, 1, .28, 1),
    opacity .45s var(--ease-out); }

.em-card:hover .em-panel, .em-card.em-open .em-panel, .em-card:focus-visible .em-panel { opacity: 1; transform: translate(0px, 0px) scale(1); }

.em-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.02; letter-spacing: -0.04em; color: rgb(255, 255, 255); margin: 0px; }

.em-desc { font-family: var(--sans); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.78); margin: 0px; }

.em-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0px 0px; padding: 0px; list-style: none; }

.em-tags li { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-pill); padding: 0.35rem 0.7rem; }

.em-card[data-from="bottom-left"] .em-panel { left: 4%; bottom: 4%; --tx: -18%; --ty: 45%; }

.em-card[data-from="bottom-right"] .em-panel { right: 4%; bottom: 4%; --tx: 18%; --ty: 45%; }

.em-card[data-from="top-left"] .em-panel { left: 4%; top: 16%; --tx: -18%; --ty: -45%; }

.em-card[data-from="top-right"] .em-panel { right: 4%; top: 16%; --tx: 18%; --ty: -45%; }

.em-card[data-from="bottom"] .em-panel { left: 50%; bottom: 4%; --tx: 0; --ty: 50%; margin-left: min(-40%, -13rem); }

.em-card[data-from="top"] .em-panel { left: 50%; top: 16%; --tx: 0; --ty: -50%; margin-left: min(-40%, -13rem); }

.ag-works-more { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

.ag-services { padding-inline: clamp(0.6rem, 1.4vw, 1.1rem); }

.ag-services-head { text-align: center; padding-inline: clamp(1rem, 4vw, 4rem); }

.ag-services-head .ag-mega { text-align: center; }

.acc { display: flex; gap: 10px; height: clamp(420px, 58vw, 620px); }

.acc-item { position: relative; flex: var(--g, 1) 1 0%; min-width: 62px; border-radius: 24px; overflow: hidden; background: var(--ink); color: rgb(255, 255, 255); text-align: left; isolation: isolate; transition: flex-grow 1.15s cubic-bezier(0.22, 1, 0.28, 1) !important; }

.acc-item.is-open { --g: 6; }

.acc-shot { position: absolute; inset: 0px; z-index: 0; overflow: hidden; }

.acc-shot img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; min-width: clamp(320px, 34vw, 460px); max-width: none; transform: translate(-50%, -50%) scale(1.02); object-fit: cover; transition: transform 1.4s cubic-bezier(0.22, 1, 0.28, 1); }

.acc-item.is-open .acc-shot img { transform: translate(-50%, -50%) scale(1); }

.acc-shot-nova { background: radial-gradient(90% 60% at 14% 4%,  color-mix(in srgb, var(--red) 34%, transparent), transparent 62%),
    radial-gradient(70% 55% at 90% 24%, rgba(58, 132, 158, .32), transparent 62%),
    radial-gradient(80% 60% at 50% 106%, color-mix(in srgb, var(--red) 22%, transparent), transparent 62%),
    linear-gradient(180deg, #17130F 0%, #100E0D 46%, #0A0908 100%); }

.acc-shot-nova::before { content: ""; position: absolute; inset: 0px; opacity: 0.32; background-image: linear-gradient(rgba(251, 249, 239, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 249, 239, 0.07) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; mask-image: radial-gradient(80% 70% at 50% 20%, rgb(0, 0, 0), transparent 78%); }

.acc-shot-nova::after { background: none; }

.acc-shot::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 40%, rgba(10,10,10,.92) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--tint) 45%, transparent), transparent 60%); }

.acc-in { position: relative; z-index: 1; height: 100%; padding: clamp(1rem, 1.6vw, 1.5rem); display: grid; grid-template-rows: auto 1fr; gap: 1rem; }

.acc-n { font-family: var(--sans); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.9); }

.acc-body { align-self: end; display: grid; gap: 0.7rem; width: clamp(220px, 22vw, 330px); opacity: 0; transform: translateY(10px); transition: opacity .75s var(--ease-out), transform .9s cubic-bezier(.22, 1, .28, 1); }

.acc-item.is-open .acc-body { opacity: 1; transform: none; transition-delay: 0.28s; }

.acc-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin: 0px; }

.acc-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.05; letter-spacing: -0.035em; color: rgb(255, 255, 255); margin: 0px; }

.acc-text { font-family: var(--sans); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.74); margin: 0px; }




.ag-contact { position: relative; padding-inline: 0px; padding-bottom: 0px; }

.ag-contact-head { padding-inline: clamp(1.15rem, 4vw, 4rem); }

.ag-contact-head { text-align: center; position: relative; z-index: 0; }

.ag-contact-card { position: relative; z-index: 1; width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 0px; border-radius: 32px 32px 0px 0px; overflow: hidden; background: rgb(23, 19, 15); color: var(--on-ink); padding: clamp(1.5rem, 4.4vw, 3.8rem); }

.ag-contact-mosaic { position: absolute; inset: -8%; z-index: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; opacity: 0.3; filter: blur(20px) saturate(0.5) brightness(0.5); pointer-events: none; }

.ag-contact-mosaic img { width: 100%; height: 100%; object-fit: cover; }

.ag-contact-card::after { content: ""; position: absolute; inset: 0px; z-index: 0; background: radial-gradient(70% 50% at 8% 0%, color-mix(in srgb, var(--red) 26%, transparent), transparent 62%),
    radial-gradient(60% 45% at 96% 88%, rgba(58, 132, 158, .28), transparent 64%),
    linear-gradient(180deg, rgba(23,19,15,.78) 0%, rgba(23,19,15,.94) 48%, #17130F 78%, #17130F 100%); pointer-events: none; }

.ag-contact-in { position: relative; z-index: 1; }

.ag-contact-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -0.04em; color: rgb(251, 249, 239); margin: 0px 0px 1rem; max-width: 18ch; }

.ag-contact-lede { font-family: var(--sans); font-size: 16px; line-height: 24px; color: rgba(251, 249, 239, 0.72); max-width: 52ch; margin: 0px 0px clamp(1.8rem, 3vw, 2.6rem); }

.ag-form { background: rgba(251, 249, 239, 0.043); border: 1px solid rgba(251, 249, 239, 0.14); border-radius: 24px; padding: clamp(1.1rem, 2.4vw, 2rem); backdrop-filter: blur(6px); }

.ag-form .form { margin-top: 0px; background: transparent; border: 0px; padding: 0px; border-radius: 0px; }

.ag-form .field label { color: rgba(251, 249, 239, 0.62); }

.ag-form .wiz-legend, .ag-form .wiz-label, .ag-form label { color: rgb(251, 249, 239); }

.ag-form .wiz-hint, .ag-form .wiz-foot, .ag-form .wiz-count { color: rgba(251, 249, 239, 0.55); }

.ag-form .opt { border-color: rgba(251, 249, 239, 0.18); background: rgba(251, 249, 239, 0.05); color: rgb(251, 249, 239); }

.ag-form .opt:hover { border-color: rgba(251, 249, 239, 0.45); background: rgba(251, 249, 239, 0.09); }

.ag-form .opt-mark { border-color: rgba(251, 249, 239, 0.4); }

.ag-form .opt:has(:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }

.ag-form input[type="text"], .ag-form input[type="email"], .ag-form input[type="tel"], .ag-form textarea { background: rgba(251, 249, 239, 0.06); border-color: rgba(251, 249, 239, 0.2); color: rgb(251, 249, 239); }

.ag-form input::placeholder, .ag-form textarea::placeholder { color: rgba(251, 249, 239, 0.34); }

.ag-form input:focus, .ag-form textarea:focus { border-color: var(--red); background: rgba(251, 249, 239, 0.1); }

.ag-form .wiz-bar { background: rgba(251, 249, 239, 0.16); }

.ag-form .wiz-back { color: rgba(251, 249, 239, 0.68); }

.ag-form .form-status { color: rgba(251, 249, 239, 0.8); }

.ag-footer { position: relative; isolation: isolate; border-radius: 0px; margin-top: 0px; padding-bottom: 0px; overflow: hidden; background: rgb(12, 11, 10); }

.ag-footer::before { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(80% 46% at 12% 38%, color-mix(in srgb, var(--red) 30%, transparent), transparent 62%),
    radial-gradient(64% 44% at 92% 52%, rgba(58, 132, 158, .3), transparent 64%),
    radial-gradient(80% 60% at 50% 108%, color-mix(in srgb, var(--red) 20%, transparent), transparent 62%),
    linear-gradient(180deg, #17130F 0%, #100E0D 46%, #0A0908 100%); }

.ag-footer::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; opacity: 0.35; background-image: linear-gradient(rgba(251, 249, 239, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 249, 239, 0.06) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; mask-image: radial-gradient(80% 70% at 50% 20%, rgb(0, 0, 0), transparent 78%); }

.ag-footer .footer-top, .ag-footer .footer-bottom, .ag-footer .footer-mega { position: relative; z-index: 1; }

.footer-bottom { flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; }

.footer .footer-bottom, .ag-footer .footer-bottom { border-top: 0px; }

.footer, .ag-footer { border-top: 0px; }

.ag-foot-place { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0.7; }

.footer-mega { margin-top: clamp(2rem, 4vw, 3.5rem); margin-bottom: 0px; margin-inline: calc(var(--gutter) * -1); overflow: hidden; line-height: 1; user-select: none; }

.footer-mega span { display: block; font-family: var(--display); font-weight: 700; font-size: 17vw; letter-spacing: -0.045em; text-align: center; white-space: nowrap; color: color-mix(in srgb, var(--footer-fg) 17%, transparent); margin: 0px; padding-bottom: 0px; }

.pill { background: var(--ink); border-color: rgba(251, 249, 239, 0.14); box-shadow: rgba(0, 0, 0, 0.34) 0px 16px 44px; }

.pill-text { color: var(--on-ink); }

.pill-face { border-color: rgba(251, 249, 239, 0.3); }

.pill-btn.btn-glow { background: color-mix(in srgb, rgb(251, 249, 239) 92%, transparent); color: rgb(23, 20, 18); }

.pill-btn.btn-glow:hover { color: rgb(23, 20, 18); }

.dock { gap: 0.45rem; }

.dock a { width: 34px; height: 34px; display: grid; place-items: center; padding: 0px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--base) 8%, transparent); background: color-mix(in srgb, var(--bg-darker) 55%, transparent); backdrop-filter: blur(7px); color: color-mix(in srgb, var(--base) 45%, transparent); opacity: 0.5; transition: width .45s var(--ease-out), height .45s var(--ease-out),
              opacity .4s var(--ease-out), background-color .35s var(--ease-out),
              color .35s var(--ease-out), transform .35s var(--ease-out); }

.dock a::before { content: none; }

.dock a svg { width: 17px; height: 17px; transition: width .45s var(--ease-out), height .45s var(--ease-out); }

.dock:hover a, .dock:focus-within a { width: 46px; height: 46px; opacity: 1; background: color-mix(in srgb, var(--bg-darker) 92%, transparent); color: var(--base); }

.dock:hover a svg, .dock:focus-within a svg { width: 19px; height: 19px; }

.dock a:hover, .dock a.is-current { background: var(--dark); color: var(--on-dark); transform: translateX(3px); }

.dock.on-invert a { background: rgba(251, 249, 239, 0.12); border-color: rgba(251, 249, 239, 0.16); color: rgba(251, 249, 239, 0.6); }

.dock.on-invert:hover a, .dock.on-invert:focus-within a { background: rgba(251, 249, 239, 0.2); color: rgba(251, 249, 239, 0.96); }

.dock.on-invert a:hover, .dock.on-invert a.is-current { background: rgb(251, 249, 239); color: rgb(23, 20, 18); }

.dock a::after { display: block; }

@media (max-width: 899px) {
  .acc { flex-direction: column; height: auto; }
  .acc-item { min-height: 76px; height: auto; flex: 0 0 auto; }
  .acc-item .acc-in { grid-template-rows: auto auto; }
  .acc-body { width: auto; height: 0px; overflow: hidden; }
  .acc-item.is-open { min-height: clamp(320px, 62vw, 420px); }
  .acc-item.is-open .acc-body { height: auto; }
}

@media (max-width: 640px) {
  .strip { perspective: none; }
  .strip-in { gap: 1.4rem; }
  .strip-in img { height: 24px; }
  .ag-banner { height: clamp(200px, 52vw, 300px); border-radius: 24px; margin-inline: 1rem; }
  .em-card, .fc-card, .ag-contact-card { border-radius: 22px; }
  .ag-contact-card { margin-top: -1.4rem; }
  .em-shot { width: 58%; }
  .ag-stats { grid-template-columns: 1fr; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .strip-in { animation: auto ease 0s 1 normal none running none; }
  .strip-in > span { transform: none !important; filter: none !important; opacity: 1 !important; }
  .xtape-track { animation: auto ease 0s 1 normal none running none; }
  .ag-label-fx { animation: auto ease 0s 1 normal none running none; }
  .fc-card { transition: none; opacity: 1 !important; transform: none !important; }
  .fc-card.is-float .fc-in { animation: auto ease 0s 1 normal none running none; }
  .em-shot { opacity: 1; transform: none; transition: none; }
  .acc-item { transition: none; }
}

.sec { padding-left: var(--edge, var(--gutter)); }

.stack > .sec, .stack > .shell { padding-block: clamp(3.5rem, 7vw, 104px); }

.works-hero { padding-top: clamp(7rem, 14vh, 10rem); }

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

.head-center .lede { margin-inline: auto; }

h1.mega { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 78px); line-height: 1.04; letter-spacing: -0.04em; color: var(--base); text-wrap: balance; }

.case-next h2.mega, .sec > h2.mega { font-size: clamp(3rem, 12vw, 190px); line-height: 0.96; letter-spacing: -0.045em; color: color-mix(in srgb, var(--on-ink) 22%, transparent); margin: 0px 0px clamp(1.5rem, 3vw, 2.5rem); mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0.42) 68%, rgba(0, 0, 0, 0) 96%); }

.shell > .em-grid, .shell > .acc { width: auto; margin-inline: calc(var(--edge, 0px) * -1 + clamp(.6rem, 1.4vw, 1.1rem)); margin-top: clamp(2rem, 4vw, 3.5rem); transform: none; padding-inline: 0px; }

.shell > .acc { height: clamp(420px, 58vw, 620px); }

@media (max-width: 899px) {
  .shell > .acc { height: auto; }
}

.case-next { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-bottom: 0px; padding: clamp(5.5rem, 10vw, 9rem) clamp(1.15rem, 4vw, 4rem) 0px; border-radius: 32px 32px 0px 0px; background: rgb(23, 19, 15); color: var(--on-ink); overflow: hidden; text-align: center; }

.case-next::before { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(70% 46% at 8% 14%, color-mix(in srgb, var(--red) 28%, transparent), transparent 62%),
    radial-gradient(60% 42% at 96% 62%, rgba(58, 132, 158, .28), transparent 64%); }

.case-next::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; opacity: 0.3; background-image: linear-gradient(rgba(251, 249, 239, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 249, 239, 0.07) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; mask-image: radial-gradient(80% 70% at 50% 30%, rgb(0, 0, 0), transparent 78%); }

.case-next > * { position: relative; z-index: 1; }

.case-next .lede { color: rgba(251, 249, 239, 0.72); margin-inline: auto; }

.case-next .kicker { color: rgba(251, 249, 239, 0.5); }

.case-next h2.mega { cursor: pointer; user-select: none; transition: color .4s var(--ease-out); }

.case-next h2.mega:hover { color: color-mix(in srgb, var(--on-ink) 34%, transparent); }

.case-next .case-hint { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: fit-content; margin: 0px auto clamp(1.2rem, 2.4vw, 2rem); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(251, 249, 239, 0.68); }

.case-next .case-hint i { position: relative; font-size: 0px; display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(251, 249, 239, 0.34); transition: border-color .4s var(--ease-out), transform .5s var(--ease-out); }

.case-next .case-hint i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0px 0px -3.5px; border-radius: 50%; background: rgba(251, 249, 239, 0.55); transition: background-color .4s var(--ease-out), width .4s var(--ease-out),
              height .4s var(--ease-out), margin .4s var(--ease-out); }

.case-next.is-open .case-hint i { border-color: color-mix(in srgb, var(--red) 60%, transparent); }

.case-next.is-open .case-hint i::after { background: var(--red); width: 13px; height: 13px; margin: -6.5px 0px 0px -6.5px; }

.case-form { position: relative; z-index: 1; width: min(100%, 1040px); margin-inline: auto; text-align: left; margin-top: clamp(-5rem, -5vw, -1.5rem); background: rgba(251, 249, 239, 0.05); border-width: 1px 1px 0px; border-style: solid solid none; border-color: rgba(251, 249, 239, 0.14) rgba(251, 249, 239, 0.14) currentcolor; border-image: none; border-radius: 28px 28px 0px 0px; padding: clamp(1.1rem, 2.4vw, 2.2rem) clamp(1.1rem, 2.4vw, 2.2rem) 0px; backdrop-filter: blur(8px); transition: padding .6s var(--ease-out); }

.case-form.is-open { padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.case-form > .lede { margin: 0px 0px clamp(0.8rem, 1.6vw, 1.2rem); font-size: 0.95rem; color: rgba(251, 249, 239, 0.66); }

.case-form .form { background: transparent; border: 0px; padding: 0px; margin-top: 0px; border-radius: 0px; }

.case-form .wiz-legend, .case-form .wiz-label, .case-form label { color: rgb(251, 249, 239); }

.case-form .field label { color: rgba(251, 249, 239, 0.62); }

.case-form .wiz-hint, .case-form .wiz-foot, .case-form .wiz-count { color: rgba(251, 249, 239, 0.55); }

.case-form .opt { border-color: rgba(251, 249, 239, 0.18); background: rgba(251, 249, 239, 0.05); color: rgb(251, 249, 239); }

.case-form .opt:hover { border-color: rgba(251, 249, 239, 0.45); background: rgba(251, 249, 239, 0.09); }

.case-form .opt-mark { border-color: rgba(251, 249, 239, 0.4); }

.case-form .opt:has(:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent); }

.case-form input[type="text"], .case-form input[type="email"], .case-form input[type="tel"], .case-form textarea { background: rgba(251, 249, 239, 0.06); border-color: rgba(251, 249, 239, 0.2); color: rgb(251, 249, 239); }

.case-form input::placeholder, .case-form textarea::placeholder { color: rgba(251, 249, 239, 0.34); }

.case-form input:focus, .case-form textarea:focus { border-color: var(--red); background: rgba(251, 249, 239, 0.1); }

.case-form .wiz-bar { background: rgba(251, 249, 239, 0.16); }

.case-form .wiz-back { color: rgba(251, 249, 239, 0.68); }

.case-form .form-tab { border-color: rgba(251, 249, 239, 0.2); color: rgb(251, 249, 239); }

.case-form .form-tab:hover { background: rgb(251, 249, 239); color: rgb(23, 20, 18); border-color: transparent; }

.case-form .form-status { color: rgba(251, 249, 239, 0.8); }

.case-cover, .case-gallery figure, .chapter-shot, .case-shot { border-radius: 24px; overflow: hidden; }

.next-project { margin-bottom: 0px; border-radius: 0px; }

.case-form .form-tab { display: none; }

.js .case-form .form-fold-inner { overflow: hidden; }

.js .case-form.is-open .form-fold-inner { overflow: visible; }

.case-next .case-form .form-fold-inner > .form { margin-top: 0px; }

.js [data-rt] .rt-w { display: inline-block; opacity: 0.2; will-change: opacity; }

.js [data-rt].rt-off .rt-w { opacity: 1; }

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

.stack > .case-hero, .stack > .works-hero { padding-top: clamp(7rem, 14vh, 10rem); }

.case-hero .case-back { display: inline-flex; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.case-hero h1.mega { max-width: none; margin-inline: 0px; font-size: clamp(2.6rem, 6.4vw, 92px); text-wrap: balance; }

.case-hero .lede { margin-inline: auto; max-width: 58ch; margin-top: clamp(1rem, 2vw, 1.6rem); }

.case-facts { max-width: 940px; margin: clamp(2rem, 4vw, 3rem) auto 0px; grid-template-columns: repeat(2, 1fr); text-align: center; border-top: 0px; padding-top: 0px; }

@media (min-width: 760px) {
  .case-facts { grid-template-columns: repeat(4, 1fr); }
}

.case-facts dt { color: var(--grey); }

.case-cover { width: auto; margin-inline: calc(var(--edge, 0px) * -1 + 8px); transform: none; margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: 32px; background: none; overflow: visible; }

.case-cover > * { border-radius: 32px; overflow: hidden; display: block; }

.case-cover img, .case-cover .ph { width: 100%; height: min(72svh, 720px); object-fit: cover; }

.case-cover .ph-cover img { object-fit: contain; padding: clamp(2rem, 6vw, 5rem); }

.case-block { border-top: 0px; max-width: 780px; margin-inline: auto; text-align: center; justify-items: center; padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }

.case-block > div { display: grid; justify-items: center; }

.case-block p { max-width: 62ch; margin-inline: auto; color: var(--grey); }

.case-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: -0.04em; }

.block-num { color: var(--grey); margin-bottom: 0.4rem; }

.block-tags { justify-content: center; }

.block-tags li { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); border-radius: var(--radius-pill); padding: 0.5rem 1rem; }

.case-chapters .case-block { border-top: 1px solid var(--line-2); }

.case-gallery { gap: clamp(0.8rem, 1.6vw, 1.2rem); }

.case-gallery figure { border-radius: 24px; }

.next-project { width: 100vw; margin-left: 50%; transform: translateX(-50%); min-height: min(62svh, 620px); display: grid; place-content: center; place-items: center; text-align: center; padding: clamp(3rem, 7vw, 6rem) clamp(1.15rem, 4vw, 4rem); border-radius: 0px; background-color: color-mix(in srgb, var(--np, #171412) 26%, #0B0A09); background-image: radial-gradient(80% 55% at 16% 8%, color-mix(in srgb, var(--np, var(--red)) 55%, transparent), transparent 62%),
    radial-gradient(64% 46% at 88% 84%, rgba(58, 132, 158, .3), transparent 64%); color: rgb(251, 249, 239); isolation: isolate; transition: background-color .6s var(--ease-out); }

.next-project::after { content: ""; position: absolute; inset: 0px; z-index: 0; pointer-events: none; opacity: 0.3; background-image: linear-gradient(rgba(251, 249, 239, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 249, 239, 0.07) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; mask-image: radial-gradient(80% 70% at 50% 30%, rgb(0, 0, 0), transparent 78%); }

.next-project > :not(.next-thumb) { position: relative; z-index: 1; }

.next-project .next-thumb { position: absolute; }

.next-kicker { opacity: 0.7; }

.next-name { font-size: clamp(2.6rem, 9vw, 8rem); line-height: 0.92; max-width: 14ch; }

.next-project:hover { background-color: color-mix(in srgb, var(--np, #171412) 40%, #0B0A09); }

.next-arrow { margin-top: clamp(1.4rem, 3vw, 2.2rem); }

.case-block p { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.72; color: color-mix(in srgb, var(--base) 62%, transparent); }

.case-block { gap: 1.1rem; }

.case-chapters .case-block { padding-block: clamp(2.6rem, 5vw, 4rem); }

.case-facts dd { font-size: 1rem; }

.case-cover { position: relative; }

.case-live { position: absolute; z-index: 2; color: var(--on-dark); left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.92); display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.7rem; border-radius: var(--radius-pill); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease-out), transform .55s var(--ease-out); }

.case-cover:hover .case-live { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.case-live svg { width: 15px; height: 15px; }

.panel:not(.case-next) { box-shadow: none; border-radius: 0px; background: transparent; }

.case-next.panel, .case-next.panel-alt { background: rgb(23, 19, 15); box-shadow: none; }

.stack > .panel[style] { padding-top: 0px !important; }

.stack > .shell { padding-block: clamp(2.5rem, 5vw, 72px); }

.stack > .shell + .shell { padding-top: 0px; }

.case-hero + .shell { padding-top: clamp(3rem, 6vw, 88px); }

.case-block { grid-template-columns: 1fr; padding-block: clamp(1.8rem, 3.4vw, 2.6rem); }

.case-chapters .case-block { padding-block: clamp(2.2rem, 4vw, 3.2rem); }

.case-chapters .case-block:first-child { border-top: 0px; }

.block-tags li:hover { background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      color-mix(in srgb, var(--base) 12%, transparent) 0deg 232deg,
      color-mix(in srgb, var(--red) 72%, transparent) 296deg,
      #FF7722 328deg,
      color-mix(in srgb, var(--base) 12%, transparent) 360deg) border-box; color: var(--base); }

.case-next { padding-bottom: clamp(3rem, 6vw, 5rem); }

.case-form { border-radius: 28px; border: 1px solid rgba(251, 249, 239, 0.16); padding: clamp(1.2rem, 2.6vw, 2.2rem); background: rgba(251, 249, 239, 0.06); box-shadow: rgba(0, 0, 0, 0.6) 0px 40px 80px -50px; }

.case-form.is-open { padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.case-form > .lede { text-align: center; margin-inline: auto; max-width: 46ch; }

.case-next .case-hint { padding: 0.5rem 1rem 0.5rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid rgba(251, 249, 239, 0.16); background: rgba(251, 249, 239, 0.05); transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out); }

.case-next h2.mega:hover ~ .case-hint, .case-next .case-hint:hover { background: rgba(251, 249, 239, 0.1); }

.case-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(1.4rem, 3vw, 2.8rem); max-width: 1040px; margin: clamp(2rem, 4vw, 3rem) auto 0px; }

.case-facts > div { display: grid; justify-items: center; gap: 0.6rem; }

.case-facts dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin: 0px; }

.case-facts dd { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: 0px; font-family: inherit; font-size: inherit; letter-spacing: normal; }

.fact-tag { position: relative; isolation: isolate; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--base); padding: 0.55rem 1.05rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      color-mix(in srgb, var(--base) 12%, transparent) 0deg 232deg,
      color-mix(in srgb, var(--red) 72%, transparent) 296deg,
      #FF7722 328deg,
      color-mix(in srgb, var(--base) 12%, transparent) 360deg) border-box; animation: novaspin var(--sp, 4.6s) linear infinite; animation-delay: calc(var(--t, 0) * -.83s); transition: color .3s var(--ease-out); }

.fact-tag::after { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; background: radial-gradient(70% 120% at 50% 120%, color-mix(in srgb, var(--red) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .4s var(--ease-out); }

.fact-tag:hover { animation-duration: 1.5s; }

.fact-tag:hover::after { opacity: 1; }

.case-hero a.case-back.link-u, .works-hero a.case-back.link-u, .case-back.link-u { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--base); background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      color-mix(in srgb, var(--base) 12%, transparent) 0deg 232deg,
      color-mix(in srgb, var(--red) 72%, transparent) 296deg,
      #FF7722 328deg,
      color-mix(in srgb, var(--base) 12%, transparent) 360deg) border-box; animation: 5.6s linear 0s infinite normal none running novaspin; text-decoration: none; transition: transform .35s var(--ease-out), box-shadow .4s var(--ease-out); }

.case-back.link-u::after, .case-back.link-u::before { content: none; }

.case-back.link-u:hover { transform: translateX(-3px); animation-duration: 1.5s; box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--red) 60%, transparent); }

.stack > .sec.case-hero, .stack > .sec.works-hero { padding-top: clamp(7rem, 14vh, 10rem); }

.case-hero, .works-hero { justify-items: center; text-align: center; }

.em-panel, .acc-item, .tl-item, .em-card { text-align: left; }

.case-hero > .case-cover, .case-hero > .em-grid, .case-hero > .acc, .works-hero > .em-grid, .works-hero > .acc, .works-hero > .projects, .works-hero > .svc-stack, .case-hero > .case-facts, .works-hero > .case-facts { justify-self: stretch; width: auto; }

.case-hero .case-back.link-u, .works-hero .case-back.link-u { place-self: center; margin-inline: auto; width: auto; }

.tl-wrap { padding-block: clamp(2.5rem, 5vw, 72px); }

.tl { position: relative; max-width: 1200px; margin-inline: auto; display: grid; gap: clamp(1.2rem, 2.4vw, 2.2rem); }

.tl-line { position: absolute; left: 50%; top: 0px; bottom: 0px; width: 2px; transform: translateX(-50%); background: var(--line-2); overflow: hidden; }

.tl-line i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 30%, transparent)); transform: scaleY(0); transform-origin: 50% 0%; }

.tl-item { position: relative; border-top: 0px; padding: 0px; margin: 0px; display: block; width: calc(50% - clamp(1.6rem, 3vw, 2.8rem)); text-align: left; }

.tl-item.tl-right { margin-left: auto; }

.tl-item.tl-left { margin-right: auto; }

.tl-dot { position: absolute; top: clamp(1.6rem, 3vw, 2.2rem); width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--red); z-index: 2; transition: transform .5s var(--ease-out), background-color .4s var(--ease-out); }

.tl-right .tl-dot { left: calc(-5.5px + (-1 * clamp(1.6rem, 3vw, 2.8rem))); }

.tl-left .tl-dot { right: calc(-5.5px + (-1 * clamp(1.6rem, 3vw, 2.8rem))); }

.tl-item.is-in .tl-dot { background: var(--red); transform: scale(1.15); }

.tl-item > div { background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; padding: clamp(1.3rem, 2.4vw, 2rem); box-shadow: rgba(23, 20, 18, 0.5) 0px 30px 60px -46px; display: grid; justify-items: start; gap: 0.7rem; text-align: left; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }

.tl-item > div:hover { transform: translateY(-4px); box-shadow: rgba(23, 20, 18, 0.6) 0px 40px 70px -44px; }

.tl-item .block-num { color: var(--grey); margin: 0px 0px 0.1rem; }

.tl-item .case-h2 { font-size: clamp(1.25rem, 2vw, 1.8rem); margin: 0px; text-align: left; }

.tl-item p { max-width: none; margin: 0px; text-align: left; font-size: 1rem; line-height: 1.65; }

.tl-item .block-tags { justify-content: flex-start; margin-top: 0.5rem; }

.js .tl-item[data-anim="tl"] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); }

.js .tl-item.tl-right[data-anim="tl"] { transform: translate(40px, 26px); }

.js .tl-item.tl-left[data-anim="tl"] { transform: translate(-40px, 26px); }

.js .tl-item[data-anim="tl"].is-in { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .tl-line { left: 9px; }
  .tl-item, .tl-item.tl-right, .tl-item.tl-left { width: auto; margin: 0px 0px 0px clamp(1.8rem, 7vw, 2.6rem); }
  .tl-right .tl-dot, .tl-left .tl-dot { left: calc(3.5px + (-1 * clamp(1.8rem, 7vw, 2.6rem))); right: auto; }
}

.wtext { padding-block: clamp(3rem, 6vw, 88px); }

.wtext__inner { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 40px); max-width: 1364px; margin-inline: auto; text-align: left; }

.wtext__services { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); width: 100%; padding: clamp(18px, 2vw, 30px) clamp(20px, 2.4vw, 44px); border-radius: clamp(14px, 1.4vw, 24px); background: var(--ink); color: var(--on-ink); }

.wtext__services-head { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); margin: 0px; }

.wtext__services-label { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.7vw, 30px); line-height: 1.2; white-space: nowrap; letter-spacing: -0.02em; }

.wtext__services-count { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 2em; padding: 0px 0.4em; border-radius: 999px; background: var(--red); color: var(--on-red); font-family: var(--sans); font-weight: 600; font-size: clamp(11px, 0.8vw, 14px); line-height: 1; }

.wtext__services-list { display: flex; flex-wrap: nowrap; gap: clamp(8px, 0.8vw, 12px); list-style: none; margin: 0px; padding: 0px; min-width: 0px; }

@media (hover: hover) and (pointer: fine) {
  .wtext__services-list { overflow: hidden; }
  .js .wtext__services-item { opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
  .js .wtext__services:hover .wtext__services-item, .js .wtext__services:focus-within .wtext__services-item { opacity: 1; transform: none; }
}

.wtext__services-item { display: inline-flex; align-items: center; padding: 0.55em 1.25em; border: 1.5px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: clamp(13px, 1.05vw, 19px); line-height: 1.2; white-space: nowrap; transition: border-color .35s var(--ease-out), background-color .35s var(--ease-out); }

.wtext__services-item:hover { border-color: transparent; background: color-mix(in srgb, var(--red) 26%, transparent); }

.wtext__services-meta { margin: 0px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251, 249, 239, 0.58); }

@media (min-width: 768px) {
  .wtext__services { flex-direction: row; align-items: center; gap: clamp(16px, 2vw, 32px); }
  .wtext__services-meta { margin-left: auto; white-space: nowrap; }
}

.wtext__heading { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5.2vw, 112px); line-height: 1.06; letter-spacing: -0.03em; color: var(--base); margin: 0px; max-width: 22em; }

@media (min-width: 992px) {
  .wtext__heading { max-width: 80%; }
}

.wtext__body { font-family: var(--sans); font-weight: 500; font-size: clamp(17px, 2.1vw, 40px); line-height: 1.34; color: color-mix(in srgb, var(--base) 68%, transparent); margin: clamp(20px, 3vw, 56px) 0px 0px; max-width: 46em; }

.rt-w.is-accent { color: var(--red); }

.wblock { padding-block: clamp(2.5rem, 5vw, 72px); }

.wblock__inner { max-width: 1364px; margin-inline: auto; display: grid; gap: clamp(0.8rem, 1.6vw, 1.3rem); justify-items: start; text-align: left; }

.wblock__num { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; color: var(--grey); margin: 0px; }

.wblock__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--base); margin: 0px; max-width: 20ch; }

.wblock__text { font-family: var(--sans); font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.5; color: color-mix(in srgb, var(--base) 62%, transparent); margin: 0px; max-width: 46em; }

.wblock .block-tags { justify-content: flex-start; margin-top: 0.4rem; }

.wblock__go { margin-top: 0.6rem; }

.wzoom { --wzoom-pad: clamp(16px, 4vw, 80px); --wzoom-gap: clamp(12px, 2vw, 40px); --wzoom-h: clamp(280px, 46svh, 560px); --wzoom-col: calc(33.3333vw - var(--wzoom-pad) * 2 / 3 - var(--wzoom-gap) * 2 / 3); --wzoom-radius: clamp(12px, 1.2vw, 22px); position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.wzoom--animated { height: 200svh; }

.wzoom__sticky { height: 100svh; overflow: hidden; position: relative; }

.wzoom--animated .wzoom__sticky { position: sticky; top: 0px; }

.wzoom__stage { position: relative; display: flex; align-items: center; width: 100%; height: 100%; will-change: transform; }

.wzoom__row { display: flex; gap: var(--wzoom-gap); padding-inline: var(--wzoom-pad); width: 100%; }

.wzoom__col { flex: 0 0 var(--wzoom-col); }

.wzoom__col, .wzoom__center { height: var(--wzoom-h); border-radius: var(--wzoom-radius); overflow: hidden; background: var(--bg-darker); }

.wzoom__center { position: absolute; left: 50%; top: 50%; width: var(--wzoom-col); transform: translate(-50%, -50%); z-index: 2; will-change: transform, width, height, border-radius; }

.wzoom__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767.98px) {
  .wzoom { --wzoom-h: clamp(180px, 30svh, 300px); --wzoom-pad: clamp(12px, 3vw, 24px); --wzoom-gap: 10px; }
  .wtext__heading { font-size: clamp(28px, 7.6vw, 46px); line-height: 1.1; }
  .wtext__body { font-size: clamp(16px, 4.2vw, 22px); }
}

.mockwrap { padding-block: clamp(2rem, 4.5vw, 64px); }

.mock { --mock-w: min(100%, 980px); position: relative; width: var(--mock-w); margin-inline: auto; perspective: 1400px; }

.mock-screen { position: relative; display: block; overflow: hidden; background: radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--tint, var(--red)) 55%, transparent), transparent 62%),
    linear-gradient(160deg, #17130F, #0A0908); }

.mock-screen img, .mock-ph { display: block; width: 100%; height: 100%; object-fit: cover; }

.mock-ph { aspect-ratio: 16 / 10; background: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--tint, var(--red)) 42%, transparent), transparent 64%),
    linear-gradient(180deg, #17130F, #0A0908); }

.mock--laptop .mock-screen { border-radius: 14px 14px 4px 4px; border-width: 12px 12px 16px; border-style: solid; border-color: rgb(27, 27, 29); border-image: none; box-shadow: rgba(23, 20, 18, 0.55) 0px 40px 80px -40px; }

.mock--laptop .mock-screen::before { content: ""; position: absolute; left: 50%; top: 4px; width: 46px; height: 4px; margin-left: -23px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); z-index: 2; }

.mock--laptop::after { content: ""; display: block; width: 116%; height: 13px; margin: 0px auto; transform: translateX(-6.9%); border-radius: 0px 0px 12px 12px; background: linear-gradient(rgb(35, 35, 38), rgb(19, 19, 21)); box-shadow: rgba(23, 20, 18, 0.5) 0px 18px 30px -18px; }

.mock--phone { --mock-w: min(100%, 340px); }

.mock--phone .mock-screen { aspect-ratio: 9 / 19.5; border-radius: 42px; border: 11px solid rgb(27, 27, 29); box-shadow: rgba(23, 20, 18, 0.55) 0px 40px 80px -40px; }

.mock--phone .mock-screen::before { content: ""; position: absolute; left: 50%; top: 10px; width: 96px; height: 26px; margin-left: -48px; border-radius: 999px; background: rgb(27, 27, 29); z-index: 2; }

.mock--phone .mock-ph { aspect-ratio: 9 / 19.5; }

.mock--flat { --mock-w: min(100%, 820px); }

.mock--flat .mock-screen { border-radius: 18px; box-shadow: rgba(23, 20, 18, 0.5) 0px 40px 80px -44px; }

.mock--flat .mock-ph { aspect-ratio: 4 / 3; }

.js .mock[data-anim="mock"] { opacity: 0; transform: perspective(1400px) rotateX(9deg) translateY(40px) scale(0.97); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }

.js .mock[data-anim="mock"].is-in { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0px) scale(1); }

.wblock__label { display: flex; align-items: baseline; gap: 0.7rem; margin: 0px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }

.wblock__label .wblock__num { color: color-mix(in srgb, var(--red) 80%, transparent); }

.wblock__inner { max-width: 46em; }

.wblock__text { font-family: var(--sans); font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.5; color: color-mix(in srgb, var(--base) 66%, transparent); margin: 0px; }

.wtext__heading em { font-style: normal; color: var(--red); }

.stack > .sec.case-next { padding-top: clamp(5.5rem, 10vw, 9rem); padding-bottom: clamp(3rem, 6vw, 5rem); }


/* =============================================================
   REPARACIONES Y MOVIMIENTO NUEVO (17 sept.)
   ============================================================= */

/* Las cintas en aspa: se recortaban por arriba y por abajo. Ahora solo
   se recortan a los lados, que es donde tienen que desaparecer. */
.xtape { overflow: visible; overflow-x: clip; }

/* El muro del hero: las piezas grandes de los lados se cortaban arriba
   y abajo. En escritorio el corredor gana aire y deja salir las piezas
   por encima de lo que tiene alrededor. */
@media (min-width: 900px) {
  .cw {
    overflow: visible; overflow-x: clip;
    height: clamp(460px, 58vw, 800px);
    z-index: 2;
  }
  .ag-logos { z-index: 1; }
}

/* La luz que sigue al puntero sobre las tarjetas de trabajo */
.em-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .16), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.em-card:hover::after { opacity: 1; }
.em-bg { translate: var(--bx, 0px) var(--by, 0px); transition: transform 1.1s var(--ease-out), translate .9s var(--ease-out); }

/* Botones con imán: se acercan un poco al puntero */
/* El JS suaviza el movimiento cuadro a cuadro: no hace falta transición */
.btn-glow, .ag-btn { translate: var(--mgx, 0px) var(--mgy, 0px); }

/* La palabra INNOVA del pie sube letra a letra */
.footer-mega .mg-l { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .fc-card.is-float { animation: none; }
  .ag-tags li, .block-tags li, .fact-tag { animation: none; }
  .em-bg, .btn-glow, .ag-btn { translate: none; }
}


/* =============================================================
   CASO JAPS — dos momentos propios
   JAPS vende reconocimientos: la portada es una placa grabada y el
   resultado se cuenta con las dos temporadas en las que subieron
   las ventas.
   ============================================================= */

/* ---------- La placa ---------- */
.japs-plaque { perspective: 1600px; }
.case-cover.japs-plaque > .japs-plaque__frame {
  display: grid; place-items: center;
  height: min(72svh, 720px);
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 18% 8%, color-mix(in srgb, #0B3D91 55%, transparent), transparent 64%),
    radial-gradient(60% 50% at 92% 90%, color-mix(in srgb, var(--red) 22%, transparent), transparent 62%),
    linear-gradient(180deg, #17130F 0%, #0A0908 100%);
}
.japs-plaque__in {
  position: relative; overflow: hidden;
  width: min(86%, 760px);
  aspect-ratio: 16 / 10;
  display: grid; place-content: center; justify-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: clamp(1.4rem, 4vw, 3.4rem);
  text-align: center;
  border-radius: 18px;
  /* Metal cepillado: vetas finas encima de un degradado de latón */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #8C6A2F 0%, #E8C77A 24%, #B38A3E 46%, #F3DC9C 62%, #9A7433 82%, #6E5222 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .5),
    inset 0 0 0 10px rgba(60, 40, 12, .18),
    0 50px 90px -40px rgba(0, 0, 0, .8);
  color: #2A1D08;
  transform-style: preserve-3d;
  will-change: transform;
}
.japs-plaque__screw {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF3CF, #8C6A2F 70%);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 12, .45);
}
.japs-plaque__screw:nth-child(1) { top: 16px; left: 16px; }
.japs-plaque__screw:nth-child(2) { top: 16px; right: 16px; }
.japs-plaque__screw:nth-child(3) { bottom: 16px; left: 16px; }
.japs-plaque__screw:nth-child(4) { bottom: 16px; right: 16px; }

/* Grabado: letra hundida, con luz abajo y sombra arriba */
.japs-plaque__kicker, .japs-plaque__meta {
  margin: 0;
  font-family: var(--mono); font-size: clamp(.58rem, 1vw, .76rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(42, 29, 8, .78);
  text-shadow: 0 1px 0 rgba(255, 244, 210, .55);
}
.japs-plaque__meta { max-width: 44ch; line-height: 1.7; letter-spacing: .14em; }
.japs-plaque__name {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 9.5rem); line-height: .9; letter-spacing: -.04em;
  color: #3A2808;
  text-shadow: 0 -1px 0 rgba(30, 18, 2, .55), 0 2px 0 rgba(255, 244, 210, .6);
}
.japs-plaque__rule {
  width: min(60%, 320px); height: 2px; margin: .2rem 0;
  background: linear-gradient(90deg, transparent, rgba(42, 29, 8, .55), transparent);
  box-shadow: 0 1px 0 rgba(255, 244, 210, .5);
}

/* La luz que recorre el metal: una vez al llegar y otra al pasar el ratón */
.japs-plaque__shine {
  position: absolute; inset: -20% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 235, .75) 50%, transparent 62%);
  mix-blend-mode: soft-light;
  transform: translateX(-70%);
}
.japs-plaque.is-lit .japs-plaque__shine { animation: japsshine 1.8s cubic-bezier(.22, 1, .28, 1) .25s 1 both; }
.japs-plaque:hover .japs-plaque__shine { animation: japsshine 1.4s cubic-bezier(.22, 1, .28, 1) 0s 1 both; }
@keyframes japsshine { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* ---------- La línea de tiempo ---------- */
.japs-tl-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.js [data-tl] .tl-line i { transform: scaleY(var(--tl, 0)); }
.tl-line i { transform: scaleY(1); }

/* ---------- Las dos temporadas ---------- */
.japs-season { position: relative; padding-inline: clamp(1.15rem, 4vw, 4rem); }
.japs-season__sticky {
  display: grid; align-content: center; justify-items: center; gap: clamp(1.2rem, 2.4vw, 2rem);
  min-height: 70svh; padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.japs-season__word {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 8.2vw, 8.6rem); line-height: .98; letter-spacing: -.045em;
  color: var(--base);
}
.japs-season__lead { display: block; color: color-mix(in srgb, var(--base) 34%, transparent); }
.japs-season__swap { display: grid; justify-items: center; }
.japs-season__opt { display: block; }
.japs-season__high { color: var(--red); }
.japs-season__bar {
  display: block; width: min(420px, 70%); height: 3px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.japs-season__bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 40%, transparent), var(--red));
  transform-origin: 0 50%;
}
.japs-season__text {
  margin: 0; max-width: 58ch;
  font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.6;
  color: color-mix(in srgb, var(--base) 62%, transparent);
}

/* Con JS la escena se alarga y se queda fija mientras la palabra
   cambia; sin JS las dos temporadas se leen una debajo de otra. */
.js .japs-season.is-live { height: 220svh; }
.js .japs-season.is-live .japs-season__sticky { position: sticky; top: 0; min-height: 100svh; }
.js .japs-season.is-live .japs-season__swap { grid-template-areas: "w"; }
.js .japs-season.is-live .japs-season__opt { grid-area: w; }
/* Una sola palabra a la vez: "baja" se va en la primera mitad del
   recorrido y "alta" llega en la segunda. Nunca se encima una con otra. */
.js .japs-season.is-live .japs-season__low  { --o: clamp(0, 1 - var(--s, 0) * 2.2, 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 40%)); filter: blur(calc((1 - var(--o)) * 10px)); }
.js .japs-season.is-live .japs-season__high { --o: clamp(0, var(--s, 0) * 2.2 - 1.2, 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 40%)); filter: blur(calc((1 - var(--o)) * 10px)); }
.js .japs-season.is-live .japs-season__bar i { transform: scaleX(calc(.35 + var(--s, 0) * .65)); }

@media (prefers-reduced-motion: reduce) {
  .japs-plaque__shine { display: none; }
  .japs-plaque__in { transform: none !important; }
}

/* ScrollTrigger mide la página llevándola arriba un instante. Con el
   scroll suave del CSS ese salto no era instantáneo y, al recargar a
   media página, todas las animaciones de scroll quedaban descolocadas.
   Con JS el suavizado ya lo hacen main.js (enlaces) y el amortiguador
   de la rueda, así que aquí no hace falta. */
html.js { scroll-behavior: auto; }

@media (max-width: 767.98px) {
  /* En móvil los servicios no caben en una línea: se reparten */
  .wtext__services-list { flex-wrap: wrap; }
  /* La placa crece hacia abajo lo que necesite su texto */
  .japs-plaque__in { aspect-ratio: auto; width: 88%; padding: 2.4rem 1.4rem; }
  .case-cover.japs-plaque > .japs-plaque__frame { height: auto; padding-block: 2.4rem; }
}


/* =============================================================
   CINTILLO DE LOGOS — carrusel 3D
   Como subpixelate.framer.website/logo-3d-carousel: una tira recta
   en perspectiva, logos pegados, desvanecido y desenfoque en los dos
   extremos (allí el degradado empieza al 15% de cada lado) y se
   puede arrastrar. La posición la lleva el JS, así que cada logo
   sabe cuánto girar y cuánto desenfocarse.
   ============================================================= */
.ag-logos { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-block: clamp(2rem, 3.4vw, 46px); }
.ag-logos-box { padding-block: clamp(2.2rem, 4vw, 58px); }
/* Aire entre el cintillo de logos y las cintas en aspa */
.xtape { margin-top: clamp(4rem, 8vw, 8rem); }

.strip {
  perspective: 620px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  /* El recorte de los extremos, igual que la referencia */
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  padding-block: clamp(.4rem, 1vw, .8rem);
}
.strip.is-drag { cursor: grabbing; }
.strip-in {
  gap: clamp(1.1rem, 2.1vw, 1.9rem);   /* más pegados que antes */
  transform-style: preserve-3d;
  will-change: transform;
}
.strip-in[data-live] { animation: none; }
.strip-in > span {
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}
.strip-in img {
  height: clamp(30px, 3.4vw, 46px);
  filter: none;
  opacity: 1;
  pointer-events: none;           /* el arrastre manda sobre el logo */
}
.strip-in span:hover img { transform: none; }


/* =============================================================
   LA CORTINA DE LA NN
   Sale en cada recarga. El cambio de color ya no es un salto: la
   NN pasa del rojo a la crema por un tono intermedio y la lámina
   de relevo entra con la misma curva, no de golpe.
   ============================================================= */
@keyframes nnTint {
  0%   { fill: var(--red); }
  45%  { fill: color-mix(in srgb, var(--red) 52%, var(--bg)); }
  100% { fill: var(--bg); }
}
@keyframes floodIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.splash-nn { animation: nnGrow .92s cubic-bezier(.62, 0, .3, 1) 1.2s forwards; }
.nn-fill {
  animation:
    nnFill .34s var(--ease-out) .76s forwards,
    nnTint .92s cubic-bezier(.62, 0, .3, 1) 1.2s forwards;
}
.nn-line { animation: nnDraw .78s cubic-bezier(.6, 0, .25, 1) .12s forwards, nnLineOut .26s linear 1s forwards; }
/* main.js retira la cortina a los 2,45 s: todo tiene que haber
   terminado antes de ese momento. */
.splash-flood { animation: floodIn .46s cubic-bezier(.4, 0, .2, 1) 1.56s forwards; }
.splash { animation: splashOut .42s var(--ease-out) 1.98s forwards; }


/* =============================================================
   CASO JAPS — ORDEN GENERAL
   Todo centrado, un solo ancho, los mismos rótulos y las mismas
   tipografías que la portada. Antes cada bloque iba por su lado.
   ============================================================= */
.case-page .shell,
.case-page .wtext,
.case-page .wblock { width: 100%; max-width: 1425px; margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 4rem); }

.case-page .wtext__inner,
.case-page .wblock__inner,
.case-page .japs-head {
  max-width: 1100px; margin-inline: auto;
  justify-items: center; text-align: center;
  display: grid; gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.case-page .wtext__inner { gap: clamp(1.6rem, 3vw, 3rem); max-width: 1240px; }
.case-page .wtext__heading { max-width: 26ch; margin-inline: auto; text-align: center; }
.case-page .wtext__body { max-width: 46ch; margin-inline: auto; text-align: center; font-size: clamp(1.05rem, 1.7vw, 1.6rem); }
.case-page .wblock__label { justify-content: center; }
.case-page .wblock__title { max-width: 26ch; margin-inline: auto; text-align: center; }
.case-page .japs-head { margin-bottom: clamp(2.4rem, 5vw, 4rem); }

/* Aire igual entre todas las secciones, como en la portada */
.case-page .wtext,
.case-page .japs-shelf,
.case-page .japs-tools { padding-block: clamp(3.5rem, 7vw, 104px); }
.case-page .japs-tools { padding-bottom: clamp(5rem, 10vw, 140px); }


/* =============================================================
   LA TARJETA DE SERVICIOS
   Al pasar el ratón se pone del rojo de la marca y salen las
   etiquetas, una detrás de otra. Las etiquetas llevan el mismo
   tratamiento que los botones: borde de luz que gira.
   ============================================================= */
.wtext__services {
  justify-content: center;
  isolation: isolate;
  transition: background-color .55s var(--ease-out), box-shadow .55s var(--ease-out), transform .55s var(--ease-out);
}
.wtext__services::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 120% at 12% 0%, color-mix(in srgb, #FF7722 60%, transparent), transparent 62%),
    radial-gradient(50% 120% at 88% 100%, color-mix(in srgb, #3A849E 45%, transparent), transparent 64%);
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.wtext__services:hover,
.wtext__services:focus-within {
  background-color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--red) 75%, transparent);
}
.wtext__services:hover::before,
.wtext__services:focus-within::before { opacity: .85; }
.wtext__services-count {
  transition: background-color .45s var(--ease-out), color .45s var(--ease-out);
}
.wtext__services:hover .wtext__services-count,
.wtext__services:focus-within .wtext__services-count { background: #FBF9EF; color: var(--red); }
.wtext__services:hover .wtext__services-meta,
.wtext__services:focus-within .wtext__services-meta { color: rgba(251, 249, 239, .8); }

@media (hover: hover) and (pointer: fine) {
  /* Las etiquetas entran escalonadas, no todas de golpe. Solo con JS:
     sin JS no puede haber nada escondido esperando un hover. */
  .js .wtext__services .wtext__services-item {
    opacity: 0; transform: translateY(14px) scale(.96);
    transition: opacity .5s var(--ease-out) calc(var(--i, 0) * 70ms),
                transform .6s cubic-bezier(.22, 1, .28, 1) calc(var(--i, 0) * 70ms),
                border-color .35s var(--ease-out), background-color .35s var(--ease-out);
  }
  .js .wtext__services:hover .wtext__services-item,
  .js .wtext__services:focus-within .wtext__services-item { opacity: 1; transform: none; }
}
.wtext__services-item {
  position: relative; isolation: isolate;
  border-color: transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      rgba(251, 249, 239, .14) 0deg 200deg,
      rgba(251, 249, 239, .85) 268deg,
      #FFFFFF 316deg,
      rgba(251, 249, 239, .14) 360deg) border-box;
  animation: novaspin var(--sp, 5.2s) linear infinite;
}
.wtext__services:hover .wtext__services-item,
.wtext__services:focus-within .wtext__services-item {
  background: linear-gradient(color-mix(in srgb, #7A0C22 60%, transparent), color-mix(in srgb, #7A0C22 60%, transparent)) padding-box,
    conic-gradient(from var(--nova, 0deg),
      rgba(255, 255, 255, .22) 0deg 200deg,
      #FFFFFF 280deg,
      rgba(255, 255, 255, .22) 360deg) border-box;
}
.wtext__services-item:hover { animation-duration: 1.5s; transform: translateY(-2px); }


/* =============================================================
   LA VITRINA DE PLACAS
   Cada servicio es una placa colgada: entra subiendo, y al pasar el
   ratón se levanta, se enciende y le cruza la luz.
   ============================================================= */
.japs-shelf__grid {
  display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1240px; margin-inline: auto;
}
@media (min-width: 1100px) {
  /* 3 arriba, 2 abajo y centradas: sin huecos raros */
  .japs-shelf__grid { grid-template-columns: repeat(6, 1fr); }
  .japs-plate { grid-column: span 2; }
  .japs-plate:nth-child(4) { grid-column: 2 / span 2; }
  .japs-plate:nth-child(5) { grid-column: 4 / span 2; }
}

.japs-plate {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: center; justify-items: center; gap: .75rem;
  min-height: clamp(220px, 24vw, 280px);
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem);
  text-align: center;
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 64%),
    linear-gradient(180deg, #17130F 0%, #0C0B0A 100%);
  color: #FBF9EF;
  box-shadow: inset 0 0 0 1px rgba(251, 249, 239, .1), 0 30px 60px -44px rgba(0, 0, 0, .9);
  transform-origin: 50% 0%;
  transition: transform .6s cubic-bezier(.22, 1, .28, 1), box-shadow .6s var(--ease-out);
}
.japs-plate__hook {
  position: absolute; top: 12px; left: 50%; width: 26px; height: 8px; margin-left: -13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(251, 249, 239, .5), rgba(251, 249, 239, .12));
  opacity: .7;
}
.japs-plate__sheen {
  position: absolute; inset: -30% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 252, 235, .22) 50%, transparent 60%);
  transform: translateX(-80%);
  transition: transform .9s cubic-bezier(.22, 1, .28, 1);
}
.japs-plate:hover, .japs-plate:focus-visible {
  transform: translateY(-8px) rotate(-.6deg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 55%, transparent),
              0 50px 90px -46px color-mix(in srgb, var(--tint) 70%, transparent);
}
.japs-plate:hover .japs-plate__sheen, .japs-plate:focus-visible .japs-plate__sheen { transform: translateX(80%); }

.japs-plate__n { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; color: rgba(251, 249, 239, .55); }
.japs-plate__title {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.08; letter-spacing: -.035em;
  color: #fff; max-width: 16ch;
}
.japs-plate__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251, 249, 239, .82);
  border: 1px solid rgba(251, 249, 239, .26);
  border-radius: var(--radius-pill);
  padding: .45rem .9rem;
  transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}
.japs-plate:hover .japs-plate__tag { border-color: transparent; background: color-mix(in srgb, var(--tint) 40%, transparent); }
.japs-plate__go {
  margin-top: .3rem;
  font-family: var(--sans); font-size: 14px; color: #fff;
  border-bottom: 1px solid rgba(251, 249, 239, .35); padding-bottom: .2rem;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.japs-plate:hover .japs-plate__go { border-color: #fff; transform: translateX(3px); }
.japs-plate__go--off { color: rgba(251, 249, 239, .6); border-color: transparent; }

.js .japs-plate[data-anim="plate"] {
  opacity: 0; transform: translateY(30px) rotate(-1.2deg);
  transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 90ms),
              transform .95s cubic-bezier(.22, 1, .28, 1) calc(var(--i, 0) * 90ms),
              box-shadow .6s var(--ease-out);
}
.js .japs-plate[data-anim="plate"].is-in { opacity: 1; transform: none; }


/* =============================================================
   EL DOCK DE HERRAMIENTAS — cristal
   Bandeja translúcida con desenfoque y saturación (el cristal de
   iOS), filo de luz arriba, sombra propia y reflejo de los iconos
   por debajo. El tamaño lo lleva el JS cuadro a cuadro con una
   escala, no con ancho y alto: así el crecimiento es continuo y no
   da saltos.
   ============================================================= */
.macdock {
  position: relative;
  width: fit-content; max-width: 100%;
  transition: padding .25s var(--ease-out);
  margin: clamp(2.4rem, 5vw, 4rem) auto 0;
  padding: 12px 14px 16px;
  border-radius: 30px;
  /* La bandeja va sobre el fondo crema de la página, así que el
     cristal es claro, como el dock del Mac sobre un fondo claro. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .34) 100%),
    color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--base) 9%, rgba(255, 255, 255, .8));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 -1px 0 rgba(23, 20, 18, .07) inset,
    0 26px 60px -30px rgba(23, 20, 18, .45),
    0 2px 10px -6px rgba(23, 20, 18, .3);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
/* El brillo especular que recorre el filo de arriba */
.macdock::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, .85) 42%, transparent 70%);
  opacity: .55;
  mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
}
.macdock__row {
  position: relative;
  display: flex; align-items: flex-end; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.macdock__dot {
  position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: color-mix(in srgb, var(--base) 28%, transparent);
}
.dockapp { position: relative; display: grid; place-items: end center; }

.dockapp__icon {
  --s0: 72px;                        /* el tamaño en reposo */
  display: grid; place-items: center;
  border-radius: 23%;
  background: var(--app-bg); color: var(--app-fg);
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.03em;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 10px 20px -10px rgba(0, 0, 0, .75);
  /* El tamaño es real, no una escala: así los vecinos se separan y la
     bandeja se abre alrededor, como el dock del Mac. */
  width: calc(var(--s0) * var(--k, 1));
  height: calc(var(--s0) * var(--k, 1));
  font-size: calc(var(--s0) * var(--k, 1) * .42);
  will-change: width, height;
}
/* El vidrio del icono: un brillo suave en la mitad de arriba */
.dockapp__icon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%);
}
.dockapp__icon svg { width: 100%; height: 100%; display: block; }
.dockapp__icon--canva { background: none; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .75); }
.dockapp__icon--canva::after { border-radius: 50%; }
.dockapp__icon--meta  { background: linear-gradient(135deg, #0064E0, #8A3FFC); }
.dockapp__icon--premiere    { background: linear-gradient(160deg, #2A0C56, #150430); }
.dockapp__icon--lightroom   { background: linear-gradient(160deg, #001E36, #00101F); }
.dockapp__icon--illustrator { background: linear-gradient(160deg, #330000, #1A0000); }

/* El reflejo bajo el icono, como en el dock de verdad */
.dockapp::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: calc(var(--s0, 72px) * .7); height: 8px; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 20, 18, .38), transparent);
  opacity: calc(.25 + (var(--k, 1) - 1) * .6);
  pointer-events: none;
}

.dockapp__tip {
  position: absolute; bottom: calc(100% + 16px); left: 50%;
  translate: -50% 4px;
  white-space: nowrap;
  font-family: var(--sans); font-size: 13px;
  color: #FBF9EF;
  padding: .45rem .85rem;
  border-radius: 12px;
  background: rgba(28, 26, 24, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 34px -20px rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease-out), translate .3s var(--ease-out);
}
.dockapp:hover .dockapp__tip { opacity: 1; translate: -50% 0; }

@media (max-width: 640px) {
  .macdock { padding: 10px 11px 13px; border-radius: 24px; }
  .macdock__row { gap: 6px; }
  .dockapp__icon { --s0: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .dockapp__icon { transition: none; }
  .japs-plate, .japs-plate__sheen { transition: none; }
  .js .japs-plate[data-anim="plate"] { opacity: 1; transform: none; }
}


/* =============================================================
   PANTALLA DE CARGA — LAS DOS NN
   Tomado de studiors.be: la marca se dibuja a trazo y se rellena,
   una tira de palabras corre abajo, un contador sube a la derecha y
   al final una cortina sube y descubre la página.
   Todo vive en CSS: sin JavaScript la secuencia corre igual y el
   contador se queda en 100. Nada tapa la página al terminar.
   ============================================================= */
.nnload {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  overflow: hidden;
  background: #0C0B0A;
  animation: nnlOut .01s linear 2.62s forwards;
}
.nnload::after {                      /* el tono de la marca, muy sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% 46%, color-mix(in srgb, var(--red) 16%, transparent), transparent 66%),
    radial-gradient(60% 45% at 88% 88%, rgba(58, 132, 158, .16), transparent 64%);
}
.nnload__mark {
  position: relative; z-index: 2;
  width: clamp(104px, 15vw, 190px); height: auto;
  aspect-ratio: 512 / 260;
  max-width: none; overflow: visible;
}
.nnl-line {
  fill: none; stroke: var(--red); stroke-width: 5; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: nnlDraw .86s cubic-bezier(.6, 0, .25, 1) .1s forwards,
             nnlLineOut .24s linear .96s forwards;
}
.nnl-fill {
  fill: var(--red); opacity: 0;
  animation: nnlFill .32s var(--ease-out) .76s forwards;
}
@keyframes nnlDraw    { to { stroke-dashoffset: 0; } }
@keyframes nnlLineOut { to { opacity: 0; } }
@keyframes nnlFill    { to { opacity: 1; } }

/* La tira de palabras de abajo */
.nnload__marquee {
  position: absolute; left: 0; right: 0; bottom: clamp(3.5rem, 11vh, 7rem);
  z-index: 2; overflow: hidden; white-space: nowrap; opacity: .3;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nnload__track {
  display: inline-flex; gap: clamp(1.4rem, 3vw, 2.6rem);
  font-family: var(--mono); font-size: clamp(.68rem, 1.1vw, .82rem);
  letter-spacing: .22em; text-transform: uppercase; color: #FBF9EF;
  animation: nnlSlide 9s linear infinite;
}

/* El contador */
.nnload__counter {
  position: absolute; right: clamp(1.15rem, 4vw, 3.4rem); bottom: clamp(1.15rem, 4vw, 2.6rem);
  z-index: 2; margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -.04em;
  color: #FBF9EF;
}
.nnload__counter em {
  font-family: var(--mono); font-style: normal; font-size: .34em;
  letter-spacing: .12em; color: rgba(251, 249, 239, .55); margin-left: .25em;
}

/* La cortina: sube y descubre la página, como la de la referencia */
.nnload__curtain {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg);
  transform: scaleY(0); transform-origin: 50% 100%;
  animation: nnlCurtain .68s cubic-bezier(.76, 0, .24, 1) 1.94s forwards;
}
@keyframes nnlCurtain { to { transform: scaleY(1); } }
@keyframes nnlSlide   { to { transform: translateX(-50%); } }
@keyframes nnlOut     { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .nnl-line { animation: none; opacity: 0; }
  .nnl-fill { animation: nnlFill .3s linear forwards; }
  .nnload__track { animation: none; }
  .nnload__curtain { animation: nnlCurtain .4s linear .7s forwards; }
  .nnload { animation: nnlOut .01s linear 1.2s forwards; }
}


/* =============================================================
   HERO DE PROYECTO — a pantalla completa
   Medido en vdbcreation.eu/works/mine-madeh: la pieza ocupa la
   pantalla entera, un degradado la oscurece por abajo y ahí se
   apoyan el título y las etiquetas a la izquierda y el texto a la
   derecha. Aquí con las esquinas, los rótulos y la tipografía de
   Innova, y la ficha del proyecto justo debajo.
   ============================================================= */
.chero {
  position: relative;
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  min-height: min(100svh, 980px);
  display: grid; align-items: end;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  background: #0C0B0A;
  color: #FBF9EF;
  isolation: isolate;
}
.chero__media { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; }
.chero__media > img { width: 100%; height: 100%; object-fit: cover; }
.chero__grad {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,11,10,.45) 0%, rgba(12,11,10,0) 26%, rgba(12,11,10,.72) 68%, rgba(12,11,10,.94) 100%);
}
.chero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1425px; margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.15rem, 4vw, 4rem) clamp(2.2rem, 5vw, 3.6rem);
  display: grid; gap: clamp(1.6rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) { .chero__content { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.chero__back { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.chero__title {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 8.5rem); line-height: .94; letter-spacing: -.045em;
  color: #fff;
}
.chero__tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0; padding: 0;
}
.chero__tags li {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251, 249, 239, .82);
  border: 1px solid rgba(251, 249, 239, .26);
  border-radius: var(--radius-pill);
  padding: .5rem .95rem;
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.chero__tags li:hover { border-color: #fff; color: #fff; }
.chero__desc {
  margin: 0;
  font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.6;
  color: rgba(251, 249, 239, .9);
  max-width: 44ch;
}
.chero__meta {
  display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 2.4vw, 2.4rem);
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
}
.chero__meta div { display: grid; gap: .25rem; }
.chero__meta dt {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251, 249, 239, .5); margin: 0;
}
.chero__meta dd { margin: 0; font-family: var(--sans); font-size: 15px; color: #fff; }

/* La flecha de "sigue bajando", en la esquina */
.chero__scroll {
  position: absolute; z-index: 2; right: clamp(1.15rem, 4vw, 4rem); top: clamp(6rem, 14vh, 9rem);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(251, 249, 239, .3);
  color: rgba(251, 249, 239, .8);
}
.chero__scroll svg { width: 16px; height: 16px; animation: nudge 2.4s var(--ease-soft) infinite; }


/* =============================================================
   BLOQUES DE PROYECTO — el sistema
   Medido en studiors.be/projet/azzato: rótulo a la izquierda y
   contenido a la derecha (336 / 887 con 86px de separación),
   párrafo grande de 41/52, panel oscuro para la cifra, galería a
   dos columnas escalonadas (626 + 626, 58 de aire, la segunda
   bajada 80px) y bloque de texto a dos columnas.
   Aquí con el ancho, los rótulos entre paréntesis, las esquinas y
   los colores de Innova. Cada bloque entra al llegar.
   ============================================================= */
.cmod {
  width: 100%; max-width: 1425px; margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 4rem);
  padding-block: clamp(3rem, 6vw, 92px);
}
.cmod__label {
  margin: 0;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey);
}
/* Los rótulos van sin numeración: solo el nombre del bloque */
.cmod__label i { font-style: normal; color: color-mix(in srgb, var(--red) 80%, transparent); }

/* ---------- Bloque de información: rótulo + texto grande ---------- */
/* Centrado, como todo lo demás de la página. La referencia lo pone a
   dos columnas, pero aquí el resto va centrado y a dos columnas se
   veía descolgado. */
.cmod--intro { display: grid; gap: clamp(1rem, 2vw, 1.6rem); justify-items: center; text-align: center; }
.cmod--intro > div { display: grid; justify-items: center; }
.cmod__big {
  margin: 0; margin-inline: auto;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.9rem); line-height: 1.22; letter-spacing: -.035em;
  color: var(--base);
  max-width: 24ch;
}
.cmod__big em { font-style: normal; color: var(--red); }
.cmod__note {
  margin: clamp(1.2rem, 2.4vw, 2rem) auto 0;
  font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7;
  color: color-mix(in srgb, var(--base) 64%, transparent);
  max-width: 54ch;
}
.cmod__list {
  list-style: none; margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}

/* ---------- Panel oscuro: una cifra y su explicación ---------- */
.cmod--panel {
  background: var(--ink); color: var(--on-ink);
  border-radius: 28px;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  max-width: 1310px;
  display: grid; gap: clamp(1.4rem, 3vw, 72px);
}
@media (min-width: 900px) { .cmod--panel { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }
.cmod--panel .cmod__label { color: rgba(251, 249, 239, .6); }
.cmod__figure {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: .95; letter-spacing: -.05em; color: #fff;
}
.cmod__panel-title {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.04em; color: #fff;
  max-width: 20ch;
}
.cmod__panel-text {
  margin: .8rem 0 0; font-family: var(--sans); font-size: 1rem; line-height: 1.65;
  color: rgba(251, 249, 239, .76); max-width: 52ch;
}

/* ---------- Texto a dos columnas: titular y explicación ---------- */
.cmod--split { display: grid; gap: clamp(1.4rem, 3vw, 72px); }
@media (min-width: 900px) { .cmod--split { grid-template-columns: 1fr 1fr; align-items: start; } }
.cmod__title {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -.04em; color: var(--base);
  max-width: 18ch;
}

/* ---------- Galería: una, dos o tres columnas, escalonada ---------- */
.cmod--gallery { display: grid; gap: clamp(.9rem, 3vw, 58px); }
@media (min-width: 760px) {
  .cmod--gallery { grid-template-columns: 1fr 1fr; }
  .cmod--gallery > *:nth-child(even) { margin-top: clamp(1.5rem, 5vw, 80px); }
  .cmod--gallery.cmod--g3 { grid-template-columns: repeat(3, 1fr); }
  .cmod--gallery.cmod--g3 > *:nth-child(even) { margin-top: clamp(1rem, 3vw, 48px); }
}
.cmod--gallery figure, .cmod__shot {
  margin: 0; border-radius: 24px; overflow: hidden;
  background: var(--bg-darker);
  position: relative;
}
.cmod--gallery img, .cmod__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmod--gallery figcaption {
  margin-top: .7rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey);
}
.cmod--gallery figure.is-tall { grid-row: span 2; }
.cmod--gallery figure.is-wide { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Imagen a sangre ---------- */
.cmod--full {
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  max-width: none; padding-inline: 0;
}
.cmod--full img { display: block; width: 100%; height: min(86svh, 900px); object-fit: cover; }

/* ---------- Paleta y tipografía de la marca ---------- */
.cmod--brand { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 900px) { .cmod--brand { grid-template-columns: 1fr 1fr; } }
.cmod__swatches { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.cmod__swatch {
  display: grid; gap: .5rem; min-width: 112px;
}
.cmod__swatch i {
  display: block; height: 96px; border-radius: 18px;
  background: var(--c, var(--base));
  box-shadow: inset 0 0 0 1px rgba(23, 20, 18, .12);
}
.cmod__swatch span {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey);
}
.cmod__type {
  border: 1px solid var(--line-2); border-radius: 24px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid; gap: .6rem; align-content: start;
  background: var(--card);
}
.cmod__type-big { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.045em; color: var(--base); }
.cmod__type-row { font-family: var(--sans); font-size: 1rem; color: color-mix(in srgb, var(--base) 66%, transparent); }

/* ---------- Entrada de cada bloque ---------- */
.js [data-cmod] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .85s var(--ease-out), transform 1s cubic-bezier(.22, 1, .28, 1);
}
.js [data-cmod].is-in { opacity: 1; transform: none; }
/* ---------- Las seis formas de entrar ---------- */
.js [data-in] {
  --dur: 1s;
  opacity: 0;
  transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 110ms),
              transform var(--dur) cubic-bezier(.22, 1, .28, 1) calc(var(--i, 0) * 110ms),
              clip-path var(--dur) cubic-bezier(.22, 1, .28, 1) calc(var(--i, 0) * 110ms),
              filter .9s var(--ease-out) calc(var(--i, 0) * 110ms);
  will-change: transform, opacity;
}
.js [data-in].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); filter: none; }

.js [data-in="sube"]     { transform: translateY(46px); }
.js [data-in="acerca"]   { transform: scale(.9); }
.js [data-in="lado"]     { clip-path: inset(0 100% 0 0 round 24px); transform: translateX(-24px); }
.js [data-in="abajo"]    { clip-path: inset(100% 0 0 0 round 24px); transform: scale(1.04); }
.js [data-in="enfoca"]   { filter: blur(14px); transform: scale(1.03); }
.js [data-in="endereza"] { transform: rotate(-2.2deg) translateY(30px) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .js [data-cmod], .js [data-in] { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
}


/* =============================================================
   JAPS SOBRE EL HERO NUEVO
   La placa pasa a ser la pieza del hero: ocupa el ancho de la
   escena y se lee desde lejos.
   ============================================================= */
.chero__media .japs-plaque { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(4.5rem, 12vh, 9rem) clamp(1.15rem, 5vw, 5rem) clamp(14rem, 30vh, 22rem); }
.chero__media .japs-plaque__in { width: min(70%, 780px); }
@media (max-width: 767.98px) {
  .chero__media .japs-plaque { padding-bottom: clamp(16rem, 42vh, 24rem); }
  .chero__media .japs-plaque__in { width: min(92%, 520px); }
}

/* Los encabezados de bloque de JAPS comparten el centrado del home */
.japs-head { display: grid; justify-items: center; text-align: center; gap: clamp(.7rem, 1.4vw, 1.1rem); margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.japs-head .cmod__title { text-align: center; max-width: 24ch; }
.japs-shelf, .japs-tools { max-width: 1425px; margin-inline: auto; }
.japs-tools { padding-bottom: clamp(5rem, 10vw, 140px); }

/* El bloque de contacto, igual que en la portada, pero con su aire */
.case-page .ag-contact { padding-top: clamp(3rem, 6vw, 92px); }


/* =============================================================
   ENTRAR A UNA PÁGINA POR DENTRO DE LA NN
   La segunda animación de studiors.be: al pulsar un enlace interno,
   un velo oscuro con la marca crece hasta que entras "por dentro"
   del símbolo, y la página que llega levanta el velo.
   Sin JavaScript no pasa nada de esto: el enlace es un enlace.
   ============================================================= */
.ptnn {
  position: fixed; inset: 0; z-index: 9999;
  background: #0C0B0A;
  pointer-events: none;
  animation: ptfade .2s var(--ease-out) forwards;
}
/* Ni escalados de CSS ni filtros encima: el SVG se dibuja a tamaño
   real en cada cuadro y la marca se ve con el filo de un vector. */
.ptnn__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; }
/* Primero el contorno se traza solo, igual que en la cortina de la
   portada; después se rellena y ahí arranca el zoom. */
.ptnn__line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ptDraw .52s cubic-bezier(.6, 0, .25, 1) .04s forwards,
             ptLineOut .18s linear .54s forwards;
}
.ptnn__fill { opacity: 0; animation: ptFill .26s var(--ease-out) .42s forwards; }
@keyframes ptDraw    { to { stroke-dashoffset: 0; } }
@keyframes ptLineOut { to { opacity: 0; } }
@keyframes ptFill    { to { opacity: 1; } }
@keyframes ptfade { from { opacity: 0; } to { opacity: 1; } }

/* La página que llega: aparece cubierta del mismo tono y se descubre */
html.pt-in::after {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  background: var(--bg); pointer-events: none;
}
html.pt-in.pt-lift::after { opacity: 0; transition: opacity .55s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .ptnn { display: none; }
  html.pt-in::after { display: none; }
}

/* Si llegas por la transición, la cortina de carga no se repite */
html.pt-in .nnload { display: none; }


/* =============================================================
   LAS FOTOS, MÁS PULIDAS
   Marco fino, esquinas de la casa, la imagen se acerca despacio al
   pasar el ratón y el pie de foto se separa con una línea corta.
   Los formatos altos y anchos se mezclan para que la página tenga
   ritmo y no parezca una hoja de contacto.
   ============================================================= */
.cmod--gallery figure, .cmod__shot {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base) 8%, transparent),
              0 40px 80px -60px rgba(23, 20, 18, .75);
}
.cmod--gallery figure > img, .cmod__shot > img {
  transition: transform 1.2s cubic-bezier(.22, 1, .28, 1);
}
.cmod--gallery figure:hover > img, .cmod__shot:hover > img { transform: scale(1.035); }
.cmod--gallery figure > img { aspect-ratio: 4 / 5; }
.cmod--gallery figure.is-wide > img { aspect-ratio: 16 / 9; }
.cmod--gallery figure.is-tall > img { aspect-ratio: 3 / 4; }
.cmod--gallery.cmod--g3 figure > img { aspect-ratio: 1 / 1; }
.cmod--gallery figcaption {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .9rem;
}
.cmod--gallery figcaption::before {
  content: ""; width: 18px; height: 1px; flex: none;
  background: color-mix(in srgb, var(--red) 70%, transparent);
}
.cmod--full { position: relative; }
.cmod--full img { border-radius: 0; }


/* =============================================================
   COLORES Y TIPOGRAFÍA
   Antes eran cuadros sueltos. Ahora cada color es una ficha con su
   nombre y su código, que se levanta y enseña una luz al pasar por
   encima, y la muestra tipográfica es una pieza con su abecedario
   y una línea de ejemplo.
   ============================================================= */
.cmod--brand {
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cmod--brand > div { display: grid; gap: clamp(1rem, 2vw, 1.4rem); align-content: start; }

.cmod__swatches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.cmod__swatch {
  position: relative; overflow: hidden;
  display: grid; align-content: end; gap: .1rem;
  min-height: clamp(150px, 17vw, 210px);
  padding: clamp(.8rem, 1.4vw, 1.1rem);
  border-radius: 20px;
  background: var(--c, var(--base));
  color: var(--sw-fg, #FBF9EF);
  box-shadow: inset 0 0 0 1px rgba(23, 20, 18, .1), 0 30px 60px -48px rgba(23, 20, 18, .8);
  transition: transform .55s cubic-bezier(.22, 1, .28, 1), box-shadow .55s var(--ease-out);
}
.cmod__swatch i {                       /* la luz que cruza al pasar el ratón */
  position: absolute; inset: -30% -60%; display: block; height: auto;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%);
  transform: translateX(-80%);
  transition: transform .9s cubic-bezier(.22, 1, .28, 1);
  border-radius: 0; box-shadow: none;
}
.cmod__swatch:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(23, 20, 18, .12), 0 44px 70px -46px rgba(23, 20, 18, .9); }
.cmod__swatch:hover i { transform: translateX(80%); }
.cmod__swatch span {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; opacity: .9;
}
.cmod__swatch b {
  position: relative; z-index: 1;
  font-family: var(--sans); font-weight: 500; font-size: .95rem; letter-spacing: -.01em;
  color: inherit;
}
.cmod__swatch--claro { --sw-fg: #171412; }

.cmod__type {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 24px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid; gap: .9rem; align-content: start;
  background:
    radial-gradient(90% 70% at 88% 4%, color-mix(in srgb, var(--red) 8%, transparent), transparent 62%),
    var(--card);
}
.cmod__type-big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 7rem); line-height: .9; letter-spacing: -.05em; color: var(--base);
}
.cmod__type-abc {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.9rem, 1.5vw, 1.15rem); letter-spacing: .06em;
  color: color-mix(in srgb, var(--base) 42%, transparent);
  word-break: break-word;
}
.cmod__type-row {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--sans); font-size: .95rem;
  color: color-mix(in srgb, var(--base) 64%, transparent);
  padding-top: .7rem; border-top: 1px solid var(--line-2);
}
.cmod__type-row b { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 400; }

/* Respaldo del dock: aunque el JS no llegue a correr, el icono bajo
   el puntero crece. Con JS manda la escala continua de --k. */
.macdock:not(:has(.dockapp__icon[style*="--k"])) .dockapp:hover .dockapp__icon {
  width: calc(var(--s0) * 1.5); height: calc(var(--s0) * 1.5);
  transition: width .28s cubic-bezier(.22, 1, .28, 1), height .28s cubic-bezier(.22, 1, .28, 1);
}


/* Los iconos del dock: manda el PNG de la app; mientras no esté el
   archivo en assets/img/apps/, se ve la ficha con la letra. */
.dockapp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dockapp__icon:not(.sin-img) { background: none; }
.dockapp__icon:not(.sin-img) .dockapp__letra,
.dockapp__icon:not(.sin-img) svg { display: none; }
.dockapp__icon.sin-img { background: var(--app-bg); }
.dockapp__icon.sin-img.dockapp__icon--canva { background: none; }
.dockapp__icon.sin-img.dockapp__icon--canva svg { display: block; }
.dockapp__icon.sin-img.dockapp__icon--canva .dockapp__letra { display: none; }


/* =============================================================
   EL DOCK NO EMPUJA LA PÁGINA
   La bandeja crece de verdad (por eso los iconos se separan), así
   que vive dentro de un hueco de alto y ancho reservados. Lo de
   abajo (contacto) se queda quieto mientras el dock se abre.
   ============================================================= */
.macdock-slot {
  --dock-max: calc(72px * 1.57 + 30px);      /* icono grande + relleno */
  position: relative;
  width: 100%;                                /* si no, la bandeja se aplasta */
  height: var(--dock-max);
  margin: clamp(2.4rem, 5vw, 4rem) 0 0;
}
.macdock-slot .macdock {
  position: absolute; left: 50%; bottom: 0;
  translate: -50% 0;
  margin: 0;
}
@media (max-width: 640px) {
  .macdock-slot { --dock-max: calc(54px * 1.57 + 26px); }
}

/* Cuando el icono es el PNG de la app, el dibujo ya trae su forma y
   su sombra: aquí no se le pone ni marco ni brillo encima. */
.dockapp__icon:not(.sin-img) {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .38));
}
.dockapp__icon:not(.sin-img)::after { content: none; }
.dockapp__img { object-fit: contain; }


/* =============================================================
   LA BARAJA DE TARJETAS
   Valores medidos en creative-griffin-639931.framer.app:
   · escena fija de una pantalla, perspectiva 1600px
   · tarjeta 520 x 360, esquinas 28px, fondo casi negro
   · las de detrás: escala .93 / .82 / .77, subidas 119 / 255 / 391,
     corridas 25 / 51 / 78, desenfoque 1.8 / 4 / 6.3, opacidad
     .95 / .75 / .55
   · la de delante sale inclinándose hacia atrás hasta 65 grados,
     subiendo, con 9px de desenfoque y apagándose
   Aquí con los colores, las esquinas y la tipografía de Innova.
   ============================================================= */
.deck { position: relative; }
.js .deck { height: calc(var(--pasos, 5) * 100svh); }
.deck__stage {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  gap: clamp(1.2rem, 3vh, 2.4rem);
  padding: clamp(5rem, 12vh, 8rem) clamp(1.15rem, 4vw, 4rem) clamp(2rem, 5vh, 3.5rem);
  perspective: 1600px;
  overflow: hidden;
  isolation: isolate;
  /* Sin placa oscura: el fondo es el de la página y lo único que se ve
     es el resplandor del color de la tarjeta que manda. */
}
/* El resplandor de fondo: un círculo enorme y muy desenfocado del
   color de la tarjeta que manda, como en la referencia (blur 40px y
   el degradado se apaga al 55% del radio). */
.deck__glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deck__glow {
  position: absolute; left: 50%; top: 50%;
  /* Más pequeño que la escena: así el color termina de apagarse dentro
     y no se ve el canto del rectángulo al recortarlo. */
  width: min(120vw, 1500px); height: min(96svh, 1000px); translate: -50% -50%;
  background: radial-gradient(closest-side circle at 50% 50%,
              var(--tint) 0%,
              color-mix(in srgb, var(--tint) 55%, transparent) 38%,
              transparent 72%);
  filter: blur(40px);
  opacity: 0;
  /* Sobre el crema de la página el color va en multiplicado: tiñe el
     fondo como una luz cálida, sin ensuciarlo ni tapar el texto. */
  mix-blend-mode: multiply;
  transition: opacity .6s var(--ease-out);
}
.deck__cards, .deck__card { position: relative; z-index: 1; }

.js .deck__stage { position: sticky; top: 0; height: 100svh; }
.deck__head { display: grid; justify-items: center; text-align: center; gap: .6rem; align-self: start; }
.deck__head .cmod__title { font-size: clamp(1.5rem, 3.4vw, 2.8rem); max-width: 22ch; }

.deck__cards {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  transform-style: preserve-3d;
  align-self: center;
  /* Las de atrás asoman por abajo: se deja ese hueco para que no se
     salgan de la escena. */
  margin-bottom: 40px;
}
.js .deck__cards { height: 360px; }

.deck__card {
  width: 100%;
  border-radius: 28px;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  /* Cada tarjeta lleva su color, oscurecido, y un filo de luz de 2px
     arriba: los dos valores son los de la referencia. */
  background-color: color-mix(in srgb, var(--tint) 20%, #0A0A0A);
  background-image: linear-gradient(rgba(255, 255, 255, .14) 0%, rgba(0, 0, 0, 0) 2px);
  color: #FBF9EF;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .9);
  will-change: transform, opacity, filter;
}
.js .deck__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 360px;
  transform-origin: 50% 100%;   /* se alinean por abajo, como la referencia */
  backface-visibility: hidden;
}
/* Sin JavaScript se apilan una debajo de otra, legibles */
.deck__card + .deck__card { margin-top: 1rem; }
.js .deck__card + .deck__card { margin-top: 0; }

.deck__in { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; height: 100%; }
.deck__title { margin-top: auto; }
.deck__kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  width: fit-content;
}
.deck__kicker i {
  width: 5px; height: 5px; border-radius: 99px; flex: none;
  background: color-mix(in srgb, var(--tint) 70%, #FFFFFF);
}
/* La rayita de acento, debajo de la etiqueta */
.deck__in::after {
  content: ""; width: 40px; height: 2px; border-radius: 99px;
  background: color-mix(in srgb, var(--tint) 70%, #FFFFFF);
  order: -1;
}
.deck__title {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.02; letter-spacing: -.04em;
  color: #fff; max-width: 14ch;
}
.deck__text {
  margin: 0;
  font-family: var(--sans); font-size: 14px; line-height: 20px;
  color: rgba(251, 249, 239, .6); max-width: 40ch;
}
.deck__paso {                       /* el contador de la baraja */
  position: absolute; left: 50%; bottom: clamp(1.4rem, 4vh, 3rem); translate: -50% 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  color: color-mix(in srgb, var(--base) 45%, transparent);
}
.deck__paso b { font-weight: 400; color: var(--base); }

@media (max-width: 640px) {
  .deck__card { border-radius: 22px; }
  .js .deck__cards, .js .deck__card { height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .deck { height: auto; }
  .js .deck__stage { position: static; height: auto; }
  .js .deck__cards { height: auto; }
  .js .deck__card { position: relative; inset: auto; height: auto; }
  .js .deck__card + .deck__card { margin-top: 1rem; }
}


/* =============================================================
   CADA SECCIÓN, UNA PANTALLA
   Como la portada: las secciones de las páginas de proyecto ocupan
   el alto completo y su contenido va centrado. Las que traen muchas
   fotos crecen lo que necesiten.
   ============================================================= */
.case-page .cmod--intro,
.case-page .japs-tools,
.case-page .cmod--split,
.case-page .cmod--brand {
  min-height: 100svh;
  display: grid; align-content: center; justify-items: center;
}
.case-page .cmod--gallery,
.case-page .cmod--full { min-height: 60svh; }
/* En las páginas de proyecto el bloque de contacto respira: el
   titular no queda pisado por la tarjeta. */
.case-page .ag-contact { min-height: auto; padding-top: clamp(3.5rem, 8vw, 100px); }
.case-page .ag-contact-head { margin-bottom: clamp(1.6rem, 4vw, 3rem); }
.case-page .ag-contact-head .ag-mega { margin-bottom: 0; }


/* =============================================================
   EL PUNTERO SOBRE FONDO OSCURO
   El anillo se pinta en claro y el punto se aviva, para que no se
   pierda sobre el hero, las tarjetas o el pie.
   ============================================================= */
.cursor.on-invert .cursor-ring { border-color: rgba(251, 249, 239, .62); }
.cursor.on-invert .cursor-dot  { background: #FBF9EF; }
.cursor.on-invert.is-active .cursor-ring {
  border-color: #FBF9EF;
  background: rgba(251, 249, 239, .14);
}
.cursor.on-invert.is-active .cursor-dot { background: var(--red); }


/* =============================================================
   CARGA DE LAS PÁGINAS DE DENTRO
   Se dibuja la marca, se rellena y se entra por dentro de ella, igual
   que al saltar desde otra página. Si el JavaScript no llega, la capa
   se retira sola y no tapa nada.
   ============================================================= */
.ptload {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #0C0B0A;
  pointer-events: none;
  animation: ptloadOut .4s var(--ease-out) 2.6s forwards;
}
.ptload__svg {
  width: clamp(88px, 12vw, 150px); height: auto; overflow: visible;
  shape-rendering: geometricPrecision;
}
/* Cuando el JS toma el mando, el SVG pasa a ocupar la pantalla entera
   para que el zoom se dibuje vectorial. */
.ptload.is-zoom .ptload__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes ptloadOut { to { opacity: 0; visibility: hidden; } }
/* Si vienes por la transición, esta no sale: ya viste el zoom. */
html.pt-in .ptload { display: none; }


/* =============================================================
   TODO EL TRABAJO — EL ARCHIVO
   Misma rama que las páginas de caso: hero de placa, bloque de
   apertura y la rejilla de la portada. Como aquí hay veintiocho
   tarjetas, cada una lleva su nombre a la vista.
   ============================================================= */
.wk-work { width: 100%; max-width: 1425px; margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 4rem); padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem); }
.wk-head { display: grid; gap: clamp(0.8rem, 1.6vw, 1.2rem); justify-items: center; text-align: center; margin-bottom: clamp(2.2rem, 5vw, 4rem); }

/* --- el rótulo fijo de cada tarjeta --- */
.em-flag { position: absolute; z-index: 3; top: clamp(1rem, 1.8vw, 1.5rem); left: clamp(1rem, 1.8vw, 1.5rem); right: clamp(1rem, 1.8vw, 1.5rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.em-flag b { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.04; letter-spacing: -0.04em; color: rgb(255, 255, 255); }
.em-flag i { font-style: normal; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.66); }
.em-card:hover .em-flag,
.em-card:focus-visible .em-flag,
.em-card.em-open .em-flag { opacity: 0; transform: translateY(-10px); }

@media (max-width: 860px) {
  .em-flag b { font-size: 1.15rem; }
}

/* =============================================================
   EL ESCENARIO DEL ARCHIVO
   Una sola luz en una sala oscura, y la mueve el visitante. Las
   capas de dentro de la marca (colores anodizados, fresado y
   especular) sólo se ven donde llega el haz; el resto es el mismo
   bloque que el fondo.
   ============================================================= */
.stage { background: radial-gradient(120% 86% at 50% 0%, #1E1A16 0%, #131110 44%, #0A0908 100%); }
.js .stage__aura { opacity: 0; }
.stage__aura { position: absolute; z-index: 0; top: 40%; left: 50%; width: min(150vw, 1500px); height: min(120svh, 1200px); translate: calc(-50% + var(--ax, 0px)) calc(-50% + var(--ay, 0px)); background: radial-gradient(closest-side circle at 50% 50%, color-mix(in srgb, var(--red) 46%, transparent) 0%, color-mix(in srgb, var(--red) 16%, transparent) 42%, transparent 72%); filter: blur(70px); opacity: 0.5; transition: opacity 1.8s var(--ease-out), translate 1.6s var(--ease-out); pointer-events: none; }
.stage.is-lit .stage__aura { opacity: 0.5; }

.stage__art { position: relative; z-index: 1; width: min(62vw, 720px); height: auto; margin-bottom: clamp(6rem, 18vh, 13rem); }
.js .stage__nn { opacity: 0; transform: translateY(26px) scale(0.985); }
.stage__nn { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 1.4s var(--ease-out), transform 1.6s cubic-bezier(.22, 1, .28, 1); }
.stage.is-lit .stage__nn { opacity: 1; transform: none; }

/* Lo que la luz saca del metal */
.stage__anod  { opacity: 0.52; mix-blend-mode: screen; }
.stage__fresa { opacity: 0.16; mix-blend-mode: overlay; }
.stage__spec  { opacity: 0.09; mix-blend-mode: screen; }

/* Grano finísimo: quita las bandas del degradado y da cuerpo */
.stage__grano { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.24; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>"); background-size: 160px 160px; }

/* Se nota que la pieza responde: el puntero cambia sobre el hero */
.work-page .chero { cursor: crosshair; }
.work-page .chero a, .work-page .chero button { cursor: pointer; }

@media (max-width: 860px) {
  .stage__art { width: 74vw; margin-bottom: clamp(9rem, 26vh, 15rem); }
  .work-page .chero { cursor: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .stage__nn { opacity: 1; transform: none; transition: none; }
  .js .stage__aura { opacity: .42; transition: none; }
  .stage__fresa { display: none; }
}

/* =============================================================
   LA FIRMA DEL PIE
   La página es la carta de presentación del estudio, así que la
   frase pesa como un titular y se enciende palabra a palabra al
   subir, igual que la declaración de la portada. El cierre va en
   rojo, como el acento de las páginas de caso. Nada de degradados
   de colores: aquí manda la tipografía y el ritmo de la línea.
   ============================================================= */
.ag-footer .fsign + .footer-bottom { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); padding-top: 1.1rem; }
.fsign { position: relative; z-index: 1; min-width: 0; max-width: var(--maxw); margin-inline: auto; margin-top: clamp(2.6rem, 5vw, 4.5rem); padding-top: clamp(1.8rem, 3.6vw, 2.8rem); display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
/* El pelo de luz se traza de izquierda a derecha al llegar */
.fsign__rule { position: absolute; top: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg, rgba(251, 249, 239, .34), rgba(251, 249, 239, .1) 62%, transparent); transform-origin: 0% 50%; }
.js .fsign__rule[data-anim="rule"] { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.22, 1, .28, 1); }
.js .fsign__rule[data-anim="rule"].is-in { transform: scaleX(1); }


/* Sin medida corta: la frase usa el ancho entero del pie */
/* Dos líneas, cada una ajustada al ancho exacto de la columna: la
   frase llega de borde a borde, sin huecos ni palabras sueltas
   colgando. El tamaño lo calcula el guion midiendo la línea; el
   clamp de aquí es lo que se ve si el guion no corre. */
/* min-width:0 para que la línea sin cortes no ensanche la columna:
   el tamaño lo pone el guion, y mide sobre el ancho de verdad. */
.fsign__line { margin: 0px; display: grid; gap: 0.06em; min-width: 0; }
.fsign__l { display: block; min-width: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4.2vw, 3.2rem); line-height: 1.0; letter-spacing: -0.045em; color: rgba(251, 249, 239, 0.62); font-style: normal; }
/* El cierre no grita: va en vidrio esmerilado. El cuerpo es un
   relleno translúcido —nada de contorno fijo, que en la 'e' y en la
   't' dibujaba también el hueco de dentro y parecía una línea dentro
   de otra— y el canto se ve cuando la luz pasa por encima. */
.fsign__l--acento { position: relative; font-size: clamp(2rem, 7vw, 5.4rem); color: rgba(251, 249, 239, 0.15); text-shadow: 0 1px 0 rgba(251, 249, 239, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.45); }

/* La luz que recorre el canto: la punta va en blanco y detrás deja
   una estela del rojo de la marca que se apaga. Son dos copias de la
   misma frase, dibujadas sólo a contorno, y de cada una se ve nada
   más la rebanada por donde pasa la luz. */
.fsign__brillo { position: absolute; left: 0px; top: 0px; white-space: nowrap; pointer-events: none; color: transparent; text-shadow: none; -webkit-text-stroke-width: 1.1px; }
.fsign__brillo--punta { -webkit-text-stroke-color: #FFFFFF; -webkit-text-stroke-width: 1.4px;
  -webkit-mask-image: linear-gradient(104deg, transparent 48.7%, rgba(0, 0, 0, 0.8) 49.6%, #000 50.1%, rgba(0, 0, 0, 0.55) 50.7%, transparent 51.5%);
          mask-image: linear-gradient(104deg, transparent 48.7%, rgba(0, 0, 0, 0.8) 49.6%, #000 50.1%, rgba(0, 0, 0, 0.55) 50.7%, transparent 51.5%); }
.fsign__brillo--cola { -webkit-text-stroke-color: var(--red); opacity: 0.9;
  -webkit-mask-image: linear-gradient(104deg, transparent 45.4%, rgba(0, 0, 0, 0.55) 48.6%, #000 49.8%, transparent 50.9%);
          mask-image: linear-gradient(104deg, transparent 45.4%, rgba(0, 0, 0, 0.55) 48.6%, #000 49.8%, transparent 50.9%); }
.fsign__brillo { -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: firmaLuz 7.2s linear infinite; }
@keyframes firmaLuz {
  0%   { -webkit-mask-position: -42% 0; mask-position: -42% 0; }
  100% { -webkit-mask-position: 142% 0; mask-position: 142% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fsign__brillo { display: none; }
  .fsign__l--acento { color: rgba(251, 249, 239, 0.26); }
}
/* Con el guion en marcha cada línea va en un solo renglón */
.js .fsign__l[data-fit] { white-space: nowrap; }

/* La línea de datos, repartida de borde a borde */

.js .fsign [data-anim="fsign"] { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js .fsign [data-anim="fsign"].is-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .fsign__line { font-size: clamp(1.7rem, 8.6vw, 2.6rem); line-height: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fsign__rule[data-anim="rule"] { transform: none; transition: none; }
  .js .fsign [data-anim="fsign"] { opacity: 1; transform: none; transition: none; }
}