:root {
  --bg: #f7f6ef;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #68675f;
  --line: rgba(17, 17, 17, 0.12);
  --accent: #f4ff00;
  --accent-soft: rgba(244, 255, 0, 0.28);
  --dark: #111111;
  --dark-soft: #1c1c1a;
  --white: #ffffff;
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 24px 80px rgba(17, 17, 17, 0.10);
  --max: 1180px;
  --header-height: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 12% 12%, rgba(244, 255, 0, 0.20), transparent 26rem),
    radial-gradient(circle at 84% 2%, rgba(17, 17, 17, 0.07), transparent 18rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  padding: .8rem 1rem;
  border-radius: 999px;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: min(calc(100% - 28px), 1260px);
  height: var(--header-height);
  transform: translateX(-50%);
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 0 16px 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(247, 246, 239, 0.72);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 45px rgba(17, 17, 17, 0.06);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(17, 17, 17, 0.16);
  box-shadow: 0 16px 55px rgba(17, 17, 17, 0.09);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  font-weight: 850;
  letter-spacing: -.04em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  font-size: .82rem;
  letter-spacing: -.03em;
}

.brand__text {
  font-size: 1.02rem;
}

.site-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .32rem;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

.site-nav a {
  padding: .62rem .82rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
  transition: color .2s ease, background .2s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--ink);
  background: var(--accent-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease;
}

.social-link svg {
  width: 19px;
  height: 19px;
  fill: var(--ink);
}

.social-link:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  background: var(--accent);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  border-radius: 4px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle.is-open span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle.is-open span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.section {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 118px 0;
}

.section--tight {
  padding: 64px 0 118px;
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .82fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding-top: 142px;
}

.eyebrow,
.section-label {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow--dark {
  color: rgba(255,255,255,.64);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 850px;
  margin-bottom: 1.32rem;
  font-size: clamp(3.7rem, 9vw, 8.9rem);
  line-height: .86;
  letter-spacing: -.09em;
  text-wrap: balance;
}

h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(2.25rem, 5.2vw, 5.2rem);
  line-height: .92;
  letter-spacing: -.075em;
  text-wrap: balance;
}

h3 {
  margin-bottom: .8rem;
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  line-height: 1;
  letter-spacing: -.045em;
}

p {
  color: var(--muted);
  font-size: 1.04rem;
}

.hero__lead {
  max-width: 690px;
  margin-bottom: 1.65rem;
  color: #393832;
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.45;
}

.hero__actions,
.contact__actions,
.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

.button {
  --btn-bg: var(--ink);
  --btn-color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .9rem 1.22rem;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: .96rem;
  font-weight: 850;
  letter-spacing: -.02em;
  transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease, color .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.15);
}

.button--small {
  min-height: 42px;
  padding: .65rem .96rem;
  font-size: .86rem;
}

.button--ghost {
  --btn-bg: transparent;
  --btn-color: var(--ink);
  background: rgba(255, 255, 255, 0.46);
}

.button--ghost:hover {
  background: var(--accent);
}

.button--light {
  --btn-bg: var(--accent);
  --btn-color: var(--ink);
}

.button--outline-light {
  --btn-bg: transparent;
  --btn-color: var(--white);
  border-color: rgba(255,255,255,.35);
  background: transparent;
}

.button--outline-light:hover {
  background: var(--white);
  color: var(--ink);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: .54rem;
  margin-top: 1.45rem;
}

.hero__proof span {
  padding: .5rem .78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: #3e3d37;
  font-size: .86rem;
  font-weight: 760;
}

.hero__visual {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}

.hero-portrait {
  width: min(100%, 560px);
  margin: 0;
}

.hero-portrait__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, .16);
  border-radius: 38px;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.54));
  box-shadow: 0 28px 90px rgba(17,17,17,.11);
}

.hero-portrait__frame::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 28px;
  z-index: 2;
  pointer-events: none;
}

.hero-portrait__frame::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: 8%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,255,0,.26) 0%, rgba(244,255,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}

.hero-portrait picture,
.hero-portrait img {
  display: block;
  width: 100%;
}

.hero-portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  position: relative;
  z-index: 0;
}

.hero-portrait__caption {
  margin-top: .75rem;
  padding-left: .4rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-board {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.08;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, .16);
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.46)),
    radial-gradient(circle at 22% 24%, rgba(244,255,0,.48), transparent 8rem),
    radial-gradient(circle at 88% 12%, rgba(17,17,17,.08), transparent 12rem);
  box-shadow: 0 28px 90px rgba(17,17,17,.11);
  isolation: isolate;
}

.board-grid {
  position: absolute;
  inset: 0;
  opacity: .52;
  background-image:
    linear-gradient(rgba(17,17,17,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 96%);
}

.studio-board::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 28px;
  pointer-events: none;
}

.studio-board::after {
  content: "";
  position: absolute;
  left: -24%;
  top: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform: skewX(-14deg);
  animation: boardScan 7.5s ease-in-out infinite;
  opacity: .55;
}

.board-card,
.board-window,
.board-chip {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(17,17,17,.14);
  box-shadow: 0 18px 45px rgba(17,17,17,.08);
  backdrop-filter: blur(18px);
}

.board-card {
  display: grid;
  gap: .42rem;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  animation: boardFloat 6.2s var(--ease) infinite;
}

.board-card span,
.board-window p {
  margin: 0;
  color: rgba(17,17,17,.55);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.board-card strong {
  max-width: 220px;
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.board-card small {
  color: rgba(255,255,255,.62);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.board-card--main {
  left: 9%;
  top: 13%;
  width: 58%;
  min-height: 152px;
  color: var(--white);
  background: #111;
  transform: rotate(-2deg);
}

.board-card--main span {
  color: var(--accent);
}

.board-card--main::after {
  content: "";
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.board-card--brief {
  right: 7%;
  top: 34%;
  width: 38%;
  transform: rotate(2.5deg);
  animation-delay: .45s;
}

.board-card--system {
  left: 10%;
  bottom: 11%;
  width: 42%;
  transform: rotate(1.5deg);
  animation-delay: .85s;
}

.board-window {
  right: 8%;
  bottom: 12%;
  width: 41%;
  min-height: 150px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(17,17,17,.94);
  color: var(--white);
}

.window-bar {
  display: flex;
  gap: .32rem;
  padding: .78rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.window-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}

.window-bar span:first-child {
  background: var(--accent);
}

.board-window p {
  padding: .9rem .9rem .5rem;
  color: rgba(255,255,255,.58);
}

.window-line {
  height: 7px;
  width: 58%;
  margin: .46rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.window-line--long {
  width: 78%;
  background: rgba(244,255,0,.78);
}

.window-output {
  width: fit-content;
  margin: .8rem .9rem 0;
  padding: .36rem .58rem;
  border-radius: 999px;
  background: rgba(244,255,0,.92);
  color: #111;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.board-path {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.board-path path {
  fill: none;
  stroke: rgba(17,17,17,.32);
  stroke-width: 2;
  stroke-dasharray: 8 12;
  animation: dash 12s linear infinite;
}

.board-cursor {
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(244,255,0,.24);
  animation: cursorMove 8s var(--ease) infinite;
}

.board-chip {
  z-index: 3;
  padding: .45rem .66rem;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #272720;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.board-chip--one {
  left: 12%;
  top: 51%;
}

.board-chip--two {
  right: 12%;
  top: 15%;
  background: var(--accent);
}

.board-chip--three {
  left: 45%;
  bottom: 5%;
}

@keyframes dash {
  to { stroke-dashoffset: -180; }
}

@keyframes boardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes boardScan {
  0%, 42% { transform: translateX(0) skewX(-14deg); opacity: 0; }
  58% { opacity: .62; }
  100% { transform: translateX(330%) skewX(-14deg); opacity: 0; }
}

@keyframes cursorMove {
  0%, 100% { left: 16%; top: 70%; }
  24% { left: 32%; top: 48%; }
  48% { left: 54%; top: 52%; }
  72% { left: 78%; top: 26%; }
}

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

.focus__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .72fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: 1rem;
}

.focus__intro p {
  max-width: 560px;
  color: #3f3e38;
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
}

.focus__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1rem;
}

.focus-card {
  min-height: 260px;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.64);
  box-shadow: 0 18px 55px rgba(17, 17, 17, .05);
}

.focus-card--large {
  background:
    radial-gradient(circle at 94% 8%, var(--accent-soft), transparent 12rem),
    rgba(255,255,255,.74);
}

.focus-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 3.2rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 950;
}

.focus-card p {
  margin-bottom: 0;
}

.section-heading {
  max-width: 830px;
  margin-bottom: 2.5rem;
}

.section-heading p:last-child {
  max-width: 650px;
  font-size: 1.12rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-card,
.method-step,
.contact__box,
.terminal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.64);
  box-shadow: 0 18px 55px rgba(17, 17, 17, .05);
}

.service-card {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 1.3rem;
  overflow: hidden;
  transition: transform .25s var(--ease), background .25s ease, border-color .25s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--accent-soft);
  transform: scale(.4);
  opacity: 0;
  transition: transform .25s var(--ease), opacity .25s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(17,17,17,.30);
  background: var(--surface);
}

.service-card:hover::after {
  transform: scale(1);
  opacity: 1;
}

.card-number {
  width: fit-content;
  margin-bottom: auto;
  padding: .42rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.service-card h3 {
  margin-top: 3rem;
}

.service-card p {
  min-height: 72px;
}

.card-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: #4c4b45;
  font-size: .92rem;
}

.card-footer strong {
  color: var(--ink);
}

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

.method-track::before {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 3rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(17,17,17,.18));
}

.method-step {
  position: relative;
  z-index: 1;
  padding: 1.25rem;
}

.method-step span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 4rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-weight: 900;
}

.method-step p {
  margin-bottom: 0;
}

.section--dark {
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
}

.work__content {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 118px 0 88px;
}

.work__content h2 {
  max-width: 980px;
}

.work__content p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(255,255,255,.68);
  font-size: 1.12rem;
}

.work__ticker {
  display: flex;
  gap: .75rem;
  width: max-content;
  padding: 0 0 42px;
  animation: ticker 25s linear infinite;
}

.work__ticker span {
  display: inline-flex;
  align-items: center;
  min-height: 96px;
  padding: .4rem 2rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  white-space: nowrap;
}

@keyframes ticker {
  0% { transform: translateX(1rem); }
  100% { transform: translateX(-34%); }
}

.ai__grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, .82fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.ai__grid p {
  font-size: clamp(1.05rem, 1.65vw, 1.28rem);
}

.terminal {
  overflow: hidden;
  background: #10100f;
  color: #f7f6ef;
}

.terminal__bar {
  display: flex;
  gap: .42rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.terminal__bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.terminal__bar span:first-child {
  background: var(--accent);
}

.terminal pre {
  margin: 0;
  padding: clamp(1.2rem, 4vw, 2rem);
  overflow: auto;
  color: rgba(255,255,255,.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: clamp(.9rem, 1.4vw, 1.06rem);
  line-height: 1.75;
}

.contact {
  padding-top: 40px;
}

.contact__box {
  padding: clamp(1.35rem, 6vw, 4rem);
  background:
    radial-gradient(circle at 92% 10%, var(--accent-soft), transparent 18rem),
    rgba(255,255,255,.68);
}

.contact__box h2 {
  max-width: 900px;
}

.contact__box p:not(.eyebrow) {
  max-width: 760px;
  font-size: 1.14rem;
}

.site-footer {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 36px 0 46px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.site-footer p,
.site-footer a {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}

.site-footer a:hover {
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1020px) {
  .site-header {
    grid-template-columns: auto auto 1fr;
  }

  .menu-toggle {
    display: block;
    justify-self: end;
    order: 3;
  }

  .site-nav {
    position: fixed;
    inset: 86px 14px auto 14px;
    display: grid;
    gap: .3rem;
    padding: .75rem;
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 26px 80px rgba(17,17,17,.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav a {
    padding: 1rem;
    font-size: 1.05rem;
  }

  .header-actions {
    justify-self: end;
    order: 2;
  }

  .header-actions .button {
    display: none;
  }

  .hero,
  .ai__grid,
  .focus__intro,
  .focus__grid {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    min-height: auto;
  }

  .studio-board {
    width: min(100%, 480px);
  }

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

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

  .method-track::before {
    display: none;
  }

  .method-step span {
    margin-bottom: 2.2rem;
  }
}

@media (max-width: 680px) {
  :root {
    --header-height: 68px;
  }

  body {
    background:
      radial-gradient(circle at 4% 2%, rgba(244, 255, 0, 0.24), transparent 15rem),
      var(--bg);
  }

  .site-header {
    width: min(calc(100% - 20px), 1260px);
    margin-top: 10px;
    padding: 0 10px 0 12px;
    gap: .55rem;
  }

  .brand__mark {
    width: 40px;
    height: 40px;
  }

  .brand__text {
    max-width: 120px;
    font-size: .94rem;
    line-height: .95;
  }

  .social-link {
    display: none;
  }

  .section {
    width: min(100% - 24px, var(--max));
    padding: 84px 0;
  }

  .hero {
    padding-top: 120px;
    gap: 1.8rem;
  }

  h1 {
    font-size: clamp(3.25rem, 17vw, 5.2rem);
    letter-spacing: -.085em;
  }

  h2 {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
  }

  .hero__lead {
    font-size: 1.08rem;
  }

  .hero__actions,
  .contact__actions,
  .work-links {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .studio-board {
    width: min(100%, 360px);
    border-radius: 28px;
  }

  .board-card {
    padding: .74rem;
    border-radius: 15px;
  }

  .board-card strong {
    font-size: .9rem;
  }

  .board-card--main {
    width: 62%;
    min-height: 126px;
  }

  .board-card--brief,
  .board-card--system,
  .board-window {
    width: 43%;
  }

  .board-window {
    min-height: 126px;
  }

  .board-chip {
    font-size: .66rem;
  }

  .focus-card {
    min-height: auto;
  }

  .focus-card span {
    margin-bottom: 2rem;
  }

  .cards-grid,
  .method-track {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 280px;
  }

  .work__content {
    width: min(100% - 24px, var(--max));
    padding: 88px 0 64px;
  }

  .work__ticker span {
    min-height: 74px;
    padding: .35rem 1.25rem;
  }

  .site-footer {
    width: min(100% - 24px, var(--max));
    flex-direction: column;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}


@media (max-width: 1020px) {
  .hero-portrait {
    width: min(100%, 500px);
  }
}

@media (max-width: 680px) {
  .hero__visual {
    min-height: auto;
  }

  .hero-portrait {
    width: min(100%, 390px);
  }

  .hero-portrait__frame {
    border-radius: 28px;
  }

  .hero-portrait__frame::before {
    inset: 14px;
    border-radius: 18px;
  }

  .hero-portrait__caption {
    font-size: .74rem;
    letter-spacing: .11em;
  }
}


/* v5 hero cutout */
.hero__visual {
  min-height: 620px;
}

.hero-cutout {
  position: relative;
  width: min(100%, 560px);
  margin: 0;
  display: grid;
  justify-items: center;
}

.hero-cutout__glow {
  position: absolute;
  right: 4%;
  top: 10%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,255,0,.36) 0%, rgba(244,255,0,.10) 34%, rgba(244,255,0,0) 74%);
  filter: blur(10px);
  z-index: 0;
}

.hero-cutout__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 48px rgba(17,17,17,.16));
}

.hero-cutout__caption {
  position: relative;
  z-index: 2;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* v5 IA typing terminal */
.terminal__screen {
  padding: 1rem 1rem 1.2rem;
}

.terminal__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.terminal__file {
  color: rgba(255,255,255,.72);
}

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

.terminal__code {
  position: relative;
  min-height: 320px;
  margin: 0;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255,255,255,.90);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: clamp(.88rem, 1.35vw, 1rem);
  line-height: 1.8;
}

.terminal__code code {
  display: block;
}

.terminal__caret {
  display: inline-block;
  width: 10px;
  height: 1.15em;
  margin-left: 3px;
  vertical-align: -.18em;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (max-width: 1020px) {
  .hero-cutout {
    width: min(100%, 500px);
  }
}

@media (max-width: 680px) {
  .hero__visual {
    min-height: auto;
  }

  .hero-cutout {
    width: min(100%, 390px);
  }

  .hero-cutout__caption {
    font-size: .72rem;
    letter-spacing: .11em;
  }

  .terminal__screen {
    padding: .9rem .9rem 1rem;
  }

  .terminal__code {
    min-height: 260px;
    padding: .95rem 1rem;
    border-radius: 14px;
  }

  .terminal__meta {
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal__caret {
    animation: none;
  }
}


/* v6 hero particle portrait */
.hero__visual {
  min-height: 640px;
}

.hero-particle-portrait {
  position: relative;
  width: min(100%, 620px);
  margin: 0;
  display: grid;
  justify-items: center;
}

.hero-particle-portrait__canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 58px rgba(17,17,17,.16));
}

.hero-particle-portrait__source {
  display: none;
}

.hero-particle-portrait__glow {
  position: absolute;
  inset: 8% 8% 18% 8%;
  z-index: 0;
  background:
    radial-gradient(circle at 52% 34%, rgba(244,255,0,.26) 0%, rgba(244,255,0,.12) 28%, rgba(244,255,0,0) 62%),
    radial-gradient(circle at 74% 72%, rgba(244,255,0,.14) 0%, rgba(244,255,0,0) 56%);
  filter: blur(24px);
  pointer-events: none;
}

.hero-particle-portrait::before {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,17,17,.12), transparent);
  z-index: 1;
}

.hero-particle-portrait__badge {
  position: absolute;
  top: 5%;
  right: 3%;
  z-index: 3;
  padding: .55rem .8rem;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
  color: #222;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-particle-portrait__caption {
  position: relative;
  z-index: 2;
  max-width: 430px;
  margin-top: -.2rem;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 1020px) {
  .hero-particle-portrait {
    width: min(100%, 540px);
  }
}

@media (max-width: 680px) {
  .hero__visual {
    min-height: auto;
  }

  .hero-particle-portrait {
    width: min(100%, 410px);
  }

  .hero-particle-portrait__badge {
    top: 3%;
    right: 2%;
    padding: .42rem .62rem;
    font-size: .63rem;
  }

  .hero-particle-portrait__caption {
    max-width: 300px;
    font-size: .84rem;
  }
}


/* v7 logo replacement */
.brand__mark--image {
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
}
.brand__mark--image img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(17,17,17,.85) inset;
}

/* v7 hero reveal */
.hero__visual {
  min-height: 650px;
}
.hero-particle-portrait {
  width: min(100%, 620px);
}
.hero-particle-portrait__canvas {
  position: relative;
  z-index: 2;
  background: transparent;
}
.hero-particle-portrait__glow {
  inset: 8% 8% 18% 8%;
  background:
    radial-gradient(circle at 46% 26%, rgba(244,255,0,.30) 0%, rgba(244,255,0,.10) 28%, rgba(244,255,0,0) 62%),
    radial-gradient(circle at 74% 72%, rgba(244,255,0,.16) 0%, rgba(244,255,0,0) 56%);
  filter: blur(20px);
}
.hero-particle-portrait__badge {
  background: rgba(255,255,255,.74);
}
@media (max-width: 680px) {
  .brand__mark--image img {
    width: 40px;
    height: 40px;
  }
}


/* v8 hero video */
.hero--video {
  position: relative;
  overflow: hidden;
  min-height: 88svh;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr);
  align-items: end;
  padding: 150px 42px 42px;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 38px;
  background: #0f0f0f;
}

.hero--video .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--video .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--video .hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,.82) 0%, rgba(7,7,7,.66) 35%, rgba(7,7,7,.42) 62%, rgba(7,7,7,.70) 100%),
    linear-gradient(180deg, rgba(7,7,7,.16) 0%, rgba(7,7,7,.38) 62%, rgba(7,7,7,.78) 100%);
}

.hero--video::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(7,7,7,0), rgba(7,7,7,.22));
  z-index: 1;
}

.hero--video .hero__content,
.hero--video .hero__visual {
  position: relative;
  z-index: 2;
}

.hero--video .eyebrow,
.hero--video h1,
.hero--video .hero__lead {
  color: var(--white);
}

.hero--video .eyebrow {
  color: rgba(255,255,255,.78);
}

.hero--video h1 {
  max-width: 780px;
}

.hero--video .hero__lead {
  max-width: 700px;
  color: rgba(255,255,255,.84);
}

.hero--video .hero__proof span {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}

.hero--video .button {
  --btn-bg: var(--accent);
  --btn-color: var(--ink);
  border-color: var(--accent);
}

.hero--video .button--ghost {
  --btn-bg: rgba(255,255,255,.08);
  --btn-color: var(--white);
  border-color: rgba(255,255,255,.24);
}

.hero--video .button--ghost:hover {
  background: rgba(255,255,255,.16);
}

.hero-panel {
  max-width: 320px;
  margin-left: auto;
  padding: 1.15rem 1.15rem 1.2rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: rgba(255,255,255,.10);
  color: var(--white);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.hero-panel__eyebrow {
  margin: 0 0 .6rem;
  color: rgba(255,255,255,.66);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-panel strong {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.4rem;
  line-height: 1.02;
  letter-spacing: -.05em;
}

.hero-panel span {
  color: rgba(255,255,255,.78);
  font-size: .92rem;
}

/* v8 service icons */
.service-card {
  min-height: 340px;
}

.card-number {
  margin-bottom: .95rem;
}

.service-card h3 {
  margin-top: 1.1rem;
}

.service-card p {
  min-height: 80px;
}

.service-icon {
  position: relative;
  width: 76px;
  height: 76px;
  margin-top: .15rem;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.56));
  overflow: hidden;
}

.service-icon span,
.service-icon i {
  position: absolute;
  display: block;
}

.service-icon--strategy span {
  bottom: 14px;
  width: 10px;
  border-radius: 999px;
  background: #111;
  animation: iconBar 1.8s ease-in-out infinite;
}

.service-icon--strategy span:nth-child(1) { left: 16px; height: 18px; animation-delay: 0s; }
.service-icon--strategy span:nth-child(2) { left: 33px; height: 30px; animation-delay: .18s; }
.service-icon--strategy span:nth-child(3) { left: 50px; height: 42px; animation-delay: .36s; }
.service-icon--strategy i {
  left: 13px; right: 13px; top: 20px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent 0, var(--accent) 15%, var(--accent) 100%);
  transform: rotate(-18deg);
  transform-origin: left center;
  animation: iconLineSweep 2.1s ease-in-out infinite;
}

.service-icon--branding span:nth-child(1),
.service-icon--branding span:nth-child(2) {
  width: 24px; height: 24px; border-radius: 50%; top: 24px;
  border: 2px solid #111;
}
.service-icon--branding span:nth-child(1) { left: 16px; animation: iconPulse 2s ease-in-out infinite; }
.service-icon--branding span:nth-child(2) { left: 36px; background: rgba(244,255,0,.82); animation: iconOrbit 2.2s ease-in-out infinite; }
.service-icon--branding i {
  width: 16px; height: 16px; right: 12px; top: 10px; background: var(--accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: iconSpark 1.8s ease-in-out infinite;
}

.service-icon--design span {
  width: 36px; height: 36px; border: 2px solid #111; border-radius: 10px; top: 18px; left: 18px;
}
.service-icon--design span:nth-child(1) { transform: translate(-8px, 8px); opacity: .36; animation: iconLayerOne 2.2s ease-in-out infinite; }
.service-icon--design span:nth-child(2) { background: rgba(244,255,0,.46); animation: iconLayerTwo 2.2s ease-in-out infinite; }
.service-icon--design span:nth-child(3) { transform: translate(8px, -8px); opacity: .9; animation: iconLayerThree 2.2s ease-in-out infinite; }

.service-icon--content span {
  left: 14px; right: 14px; height: 8px; border-radius: 999px; background: #111;
}
.service-icon--content span:nth-child(1) { top: 18px; width: 52px; animation: iconSlide 1.9s ease-in-out infinite; }
.service-icon--content span:nth-child(2) { top: 33px; width: 40px; background: rgba(17,17,17,.72); animation: iconSlide 1.9s ease-in-out infinite .18s; }
.service-icon--content span:nth-child(3) { top: 48px; width: 56px; background: var(--accent); animation: iconSlide 1.9s ease-in-out infinite .34s; }
.service-icon--content i {
  width: 10px; height: 10px; border-radius: 50%; right: 14px; top: 16px; background: var(--accent);
  box-shadow: 0 15px 0 rgba(244,255,0,.7), 0 30px 0 rgba(244,255,0,.45);
  animation: iconDotBlink 1.9s ease-in-out infinite;
}

.service-icon--ai span:nth-child(1) {
  left: 13px; top: 14px; width: 50px; height: 34px; border-radius: 10px; border: 2px solid #111;
}
.service-icon--ai span:nth-child(2),
.service-icon--ai span:nth-child(3) {
  left: 23px; height: 4px; border-radius: 999px; background: var(--accent);
  animation: iconCode 1.6s ease-in-out infinite;
}
.service-icon--ai span:nth-child(2) { top: 27px; width: 22px; }
.service-icon--ai span:nth-child(3) { top: 39px; width: 14px; animation-delay: .22s; }
.service-icon--ai i {
  width: 5px; height: 16px; left: 49px; top: 23px; background: #111;
  animation: iconCaret 1s steps(1) infinite;
}

.service-icon--consulting span {
  width: 28px; height: 28px; left: 16px; top: 16px; border: 3px solid #111; border-radius: 50%;
  animation: iconSearchPulse 2s ease-in-out infinite;
}
.service-icon--consulting i {
  width: 18px; height: 4px; left: 39px; top: 42px; border-radius: 999px; background: #111;
  transform: rotate(42deg);
  transform-origin: left center;
}

@keyframes iconBar {
  0%,100% { transform: scaleY(.75); }
  50% { transform: scaleY(1.15); }
}
@keyframes iconLineSweep {
  0%,100% { transform: rotate(-18deg) translateX(-4px); opacity: .62; }
  50% { transform: rotate(-18deg) translateX(4px); opacity: 1; }
}
@keyframes iconPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes iconOrbit {
  0%,100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(-8px) scale(1.04); }
}
@keyframes iconSpark {
  0%,100% { transform: scale(.8) rotate(0deg); opacity: .7; }
  50% { transform: scale(1.05) rotate(20deg); opacity: 1; }
}
@keyframes iconLayerOne {
  0%,100% { transform: translate(-8px, 8px); }
  50% { transform: translate(-11px, 11px); }
}
@keyframes iconLayerTwo {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(0,-2px); }
}
@keyframes iconLayerThree {
  0%,100% { transform: translate(8px, -8px); }
  50% { transform: translate(11px, -11px); }
}
@keyframes iconSlide {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes iconDotBlink {
  0%,100% { opacity: .7; }
  50% { opacity: 1; }
}
@keyframes iconCode {
  0%,100% { width: 14px; }
  50% { width: 24px; }
}
@keyframes iconCaret {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}
@keyframes iconSearchPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,255,0,.0); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(244,255,0,.18); }
}

@media (max-width: 1020px) {
  .hero--video {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 138px 28px 30px;
    gap: 1.8rem;
  }

  .hero-panel {
    margin-left: 0;
    max-width: 360px;
  }
}

@media (max-width: 680px) {
  .hero--video {
    width: min(100% - 24px, var(--max));
    min-height: 78svh;
    padding: 120px 20px 22px;
    border-radius: 28px;
  }

  .hero-panel {
    padding: 1rem;
    border-radius: 20px;
  }

  .hero-panel strong {
    font-size: 1.18rem;
  }

  .service-icon {
    width: 70px;
    height: 70px;
  }

  .service-card {
    min-height: 320px;
  }
}


/* v9 full-bleed hero video */
.hero--video {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #070707;
  overflow: clip;
  display: block;
}

.hero--video .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--video .hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero--video .hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,.84) 0%, rgba(7,7,7,.74) 28%, rgba(7,7,7,.48) 56%, rgba(7,7,7,.74) 100%),
    linear-gradient(180deg, rgba(7,7,7,.22) 0%, rgba(7,7,7,.18) 22%, rgba(7,7,7,.40) 60%, rgba(7,7,7,.80) 100%);
}

.hero--video::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(7,7,7,0), rgba(7,7,7,.16) 40%, var(--bg) 100%);
  z-index: 1;
}

.hero--video .hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 32px, var(--max));
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  padding: 152px 0 56px;
}

.hero--video .hero__content {
  max-width: 780px;
}

.hero--video .eyebrow,
.hero--video h1,
.hero--video .hero__lead {
  color: var(--white);
}

.hero--video .eyebrow {
  color: rgba(255,255,255,.78);
}

.hero--video h1 {
  max-width: 760px;
}

.hero--video .hero__lead {
  max-width: 720px;
  color: rgba(255,255,255,.86);
}

.hero--video .hero__proof span {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}

.hero--video .button {
  --btn-bg: var(--accent);
  --btn-color: var(--ink);
  border-color: var(--accent);
}

.hero--video .button--ghost {
  --btn-bg: rgba(255,255,255,.08);
  --btn-color: var(--white);
  border-color: rgba(255,255,255,.24);
}

.hero--video .button--ghost:hover {
  background: rgba(255,255,255,.16);
}

@media (max-width: 680px) {
  .hero--video {
    min-height: 84svh;
  }

  .hero--video .hero__inner {
    width: min(100% - 24px, var(--max));
    min-height: 84svh;
    padding: 118px 0 34px;
  }

  .hero--video::after {
    height: 120px;
  }
}


/* v10 about + interactive timeline */
.about {
  border-top: 1px solid var(--line);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.about__portrait {
  position: relative;
  margin: 0;
}

.about__portrait::before {
  content: '';
  position: absolute;
  inset: 8% -8% 12% 10%;
  z-index: 0;
  border-radius: 38px;
  background:
    radial-gradient(circle at 64% 28%, rgba(244,255,0,.28), transparent 32%),
    linear-gradient(135deg, rgba(17,17,17,.10), rgba(255,255,255,.05));
  filter: blur(12px);
}

.about__portrait picture {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.14);
  border-radius: 34px;
  background: #efeee8;
  box-shadow: 0 24px 70px rgba(17,17,17,.12);
}

.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
}

.about__portrait figcaption {
  position: relative;
  z-index: 2;
  margin-top: .8rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.about__content h2 {
  max-width: 920px;
}

.about__content p:not(.eyebrow) {
  max-width: 720px;
  color: #3f3e38;
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
}

.about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
  margin-top: 1.35rem;
}

.about__stats span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 46px;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  color: #3f3e38;
  font-size: .92rem;
  font-weight: 760;
}

.about__stats strong {
  color: var(--ink);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .45fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  padding: clamp(1rem, 2.6vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 8% 4%, rgba(244,255,0,.20), transparent 16rem),
    rgba(255,255,255,.58);
  box-shadow: 0 18px 55px rgba(17, 17, 17, .05);
}

.timeline__header {
  position: sticky;
  top: 112px;
  align-self: start;
}

.timeline__header h3 {
  margin-bottom: .7rem;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.timeline__header p {
  margin-bottom: 0;
}

.timeline__list {
  position: relative;
  display: grid;
  gap: .72rem;
  padding-left: 1.35rem;
}

.timeline__list::before {
  content: '';
  position: absolute;
  left: .32rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), rgba(17,17,17,.14));
}

.timeline-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.83rem;
  top: 1.15rem;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px rgba(244,255,0,0);
  transition: background .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}

.timeline-item.is-active {
  background: var(--surface);
  border-color: rgba(17,17,17,.28);
  box-shadow: 0 18px 45px rgba(17,17,17,.07);
  transform: translateX(4px);
}

.timeline-item.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(244,255,0,.28);
  transform: scale(1.05);
}

.timeline-item__button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(96px, .32fr) minmax(0, .7fr);
  gap: .75rem 1rem;
  align-items: center;
  padding: 1rem 1.05rem;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.timeline-item__year {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timeline-item__role {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
}

.timeline-item__button strong {
  grid-column: 2;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.timeline-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}

.timeline-item__body p {
  margin: 0;
  padding: 0 1.05rem 1.05rem calc(1.05rem + min(120px, 32%));
  color: #4c4b45;
}

.timeline-item.is-active .timeline-item__body {
  max-height: 240px;
}

@media (max-width: 1020px) {
  .about__grid,
  .timeline {
    grid-template-columns: 1fr;
  }

  .about__portrait {
    max-width: 520px;
  }

  .timeline__header {
    position: static;
  }
}

@media (max-width: 680px) {
  .about__portrait picture {
    border-radius: 26px;
  }

  .about__stats {
    align-items: stretch;
    flex-direction: column;
  }

  .timeline {
    padding: 1rem;
    border-radius: 26px;
  }

  .timeline__list {
    padding-left: 1rem;
  }

  .timeline-item__button {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .95rem;
  }

  .timeline-item__button strong {
    grid-column: auto;
  }

  .timeline-item__body p {
    padding: 0 .95rem .95rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .timeline-item.is-active {
    animation: timelinePop .36s var(--ease);
  }

  @keyframes timelinePop {
    0% { transform: translateX(0) scale(.99); }
    100% { transform: translateX(4px) scale(1); }
  }
}


/* v11 work preview */
.work-preview {
  width: 100%;
  max-width: none;
  padding: 0;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
}

.work-preview__grid {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 118px 0 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: end;
}

.work-preview__content h2 {
  max-width: 900px;
}

.work-preview__content p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(255,255,255,.68);
  font-size: 1.12rem;
}

.work-preview__cards {
  display: grid;
  gap: .8rem;
}

.work-preview__cards a {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 82px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  transition: transform .22s var(--ease), background .22s ease, border-color .22s ease;
}

.work-preview__cards a:hover {
  transform: translateY(-4px);
  border-color: rgba(244,255,0,.55);
  background: rgba(244,255,0,.10);
}

.work-preview__cards span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 950;
}

.work-preview__cards strong {
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: -.04em;
}

/* v11 portfolio page */
.portfolio-hero {
  min-height: 72svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding-top: 150px;
  padding-bottom: 64px;
}

.portfolio-hero__content h1 {
  max-width: 980px;
  font-size: clamp(3.4rem, 8vw, 8rem);
}

.portfolio-hero__aside {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
}

.portfolio-hero__aside span {
  padding: .58rem .78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  font-size: .86rem;
  font-weight: 850;
}

.portfolio-controls {
  padding-top: 24px;
  padding-bottom: 28px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  width: fit-content;
}

.filter-bar button {
  min-height: 44px;
  padding: .72rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease);
}

.filter-bar button:hover,
.filter-bar button.is-active {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 28px;
}

.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 55px rgba(17,17,17,.06);
  transition: transform .28s var(--ease), opacity .22s ease, filter .22s ease;
}

.project-card.is-hidden {
  display: none;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .75fr);
  grid-template-rows: auto;
}

.project-card__media {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: #111;
}

.project-card__media img,
.project-card__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-card__media--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #111;
}

.project-card__content {
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}

.project-card__content h2 {
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  margin-bottom: .8rem;
}

.project-card__content p:not(.eyebrow) {
  color: #3f3e38;
  font-size: 1.05rem;
}

.project-card__content ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
  margin: auto 0 0;
  list-style: none;
}

.project-card__content li {
  padding: .45rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  color: #3e3d37;
  font-size: .78rem;
  font-weight: 850;
}

.portfolio-cta {
  padding-top: 36px;
}

@media (max-width: 1020px) {
  .work-preview__grid,
  .portfolio-hero,
  .project-card--wide {
    grid-template-columns: 1fr;
  }

  .portfolio-hero__aside {
    justify-content: flex-start;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .project-card__media {
    min-height: 340px;
  }
}

@media (max-width: 680px) {
  .work-preview__grid {
    width: min(100% - 24px, var(--max));
    padding: 84px 0 64px;
  }

  .portfolio-hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 34px;
  }

  .filter-bar {
    width: 100%;
    border-radius: 24px;
  }

  .filter-bar button {
    flex: 1 1 auto;
  }

  .portfolio-grid {
    width: min(100% - 24px, var(--max));
  }

  .project-card {
    border-radius: 22px;
  }

  .project-card__media,
  .project-card--wide .project-card__media {
    min-height: 260px;
  }

  .project-card__media--duo {
    grid-template-columns: 1fr;
  }
}


/* v12 portfolio additions */
.project-card__media--contain {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
}

.project-card__media--contain img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
}

.project-card__media--dark {
  background:
    radial-gradient(circle at 24% 20%, rgba(244,255,0,.15), transparent 18rem),
    #0b0b0b;
}

/* v12 mobile navigation redesign */
.site-nav__socials {
  display: none;
}

@media (max-width: 1020px) {
  .site-header {
    z-index: 500;
  }

  .menu-toggle {
    position: relative;
    z-index: 502;
    background: rgba(255,255,255,.86);
  }

  .menu-toggle.is-open {
    background: var(--accent);
    border-color: var(--accent);
  }

  .site-nav {
    counter-reset: menu;
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 104px clamp(1.4rem, 6vw, 4rem) 34px;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 84% 16%, rgba(244,255,0,.26), transparent 18rem),
      linear-gradient(135deg, rgba(17,17,17,.98), rgba(14,14,13,.96));
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity .32s var(--ease), transform .42s var(--ease);
    overflow: hidden;
  }

  .site-nav::before {
    content: 'MENÚ';
    position: absolute;
    left: clamp(1.4rem, 6vw, 4rem);
    top: 104px;
    color: rgba(255,255,255,.28);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .18em;
  }

  .site-nav::after {
    content: 'Joaquín Factory / Marketing · Diseño · IA';
    position: absolute;
    left: clamp(1.4rem, 6vw, 4rem);
    right: clamp(1.4rem, 6vw, 4rem);
    bottom: 28px;
    color: rgba(255,255,255,.46);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav > a {
    counter-increment: menu;
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    padding: .42rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: transparent;
    color: rgba(255,255,255,.88);
    font-size: clamp(2.35rem, 10vw, 6.4rem);
    font-weight: 950;
    line-height: .86;
    letter-spacing: -.08em;
    transition: color .2s ease, transform .2s var(--ease), padding-left .2s var(--ease);
  }

  .site-nav > a::before {
    content: '0' counter(menu);
    color: var(--accent);
    font-size: clamp(.78rem, 2vw, 1rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: .08em;
  }

  .site-nav > a:hover,
  .site-nav > a.is-active {
    color: var(--accent);
    background: transparent;
    transform: translateX(8px);
  }

  .site-nav__socials {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    padding-bottom: 2.5rem;
  }

  .site-nav__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .62rem .85rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.86);
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: -.02em;
  }

  .site-nav__socials a:hover {
    background: var(--accent);
    color: var(--ink);
  }
}

@media (max-width: 680px) {
  .site-nav {
    padding-top: 94px;
  }

  .site-nav::before {
    top: 92px;
  }

  .site-nav > a {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    padding: .46rem 0;
    font-size: clamp(2.15rem, 14vw, 4.7rem);
  }

  .site-nav::after {
    font-size: .72rem;
  }
}


/* v13 refinements: cleaner transition, softer typography spacing, Belvís portfolio */
.hero--video::after {
  display: none !important;
}

.about {
  border-top: 0;
}

.about__portrait::before {
  display: none;
}

/* The previous tracking was too tight in large display words. These overrides loosen the whole site slightly without losing impact. */
h1 {
  letter-spacing: -.055em;
  word-spacing: .035em;
}

h2 {
  letter-spacing: -.045em;
  word-spacing: .025em;
}

h3 {
  letter-spacing: -.025em;
  word-spacing: .015em;
}

.hero--video h1,
.portfolio-hero h1,
.contact__box h2,
.work__content h2,
.about__content h2,
.section-heading h2 {
  letter-spacing: -.052em;
  word-spacing: .04em;
}

.work__ticker span {
  letter-spacing: -.045em;
  word-spacing: .04em;
}

.timeline__header h3,
.project-card__content h2,
.portfolio-cta h2 {
  letter-spacing: -.035em;
  word-spacing: .025em;
}

@media (max-width: 1020px) {
  .site-nav > a {
    letter-spacing: -.045em;
    word-spacing: .025em;
    line-height: .94;
  }
}

@media (max-width: 680px) {
  h1 {
    letter-spacing: -.052em;
    word-spacing: .025em;
  }

  h2 {
    letter-spacing: -.04em;
    word-spacing: .02em;
  }

  .site-nav > a {
    letter-spacing: -.04em;
    word-spacing: .03em;
    line-height: .96;
  }
}


/* v14 refinements: stronger desktop nav state + portfolio editorial additions */
@media (min-width: 1021px) {
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.is-active {
    color: var(--ink);
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.16);
  }
}

.project-card__media--duo img {
  min-width: 0;
}

.project-card:target {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.filter-bar button:focus-visible,
.button:focus-visible,
.site-nav a:focus-visible,
.social-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .work-preview__cards {
    grid-template-columns: 1fr;
  }
}


/* v15 portfolio responsive image fix: no more aggressive cropping on process/branding cases */
.project-card--fit-media .project-card__media--duo {
  min-height: clamp(380px, 42vw, 680px);
  align-items: stretch;
  background: #f2eee4;
}

.project-card--fit-media .project-card__media--duo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f2eee4;
}

.project-card--fit-media .project-card__media--duo img:nth-child(2) {
  background: #111;
}

.project-card--fit-media .project-card__media--duo img[src*="work-belvis-field"],
.project-card--fit-media .project-card__media--duo img[src*="work-casa-tigre-menu"],
.project-card--fit-media .project-card__media--duo img[src*="work-lafina-space"],
.project-card--fit-media .project-card__media--duo img[src*="work-amasama-real"] {
  background: #0f0f0f;
}

@media (max-width: 680px) {
  .project-card--fit-media .project-card__media--duo {
    min-height: auto !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: transparent;
  }

  .project-card--fit-media .project-card__media--duo img {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    display: block;
  }

  .project-card--fit-media .project-card__media--duo img + img {
    margin-top: 0;
  }
}


/* v16 COSOL case study */
.project-card--cosol {
  background: linear-gradient(135deg, rgba(247,246,239,.94), rgba(255,255,255,.74));
}

.project-card__media--cosol {
  display: block;
  min-height: 460px;
  background: #16697A;
}

.project-card__media--cosol img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__link {
  width: fit-content;
  margin-top: 1.2rem;
  padding: .66rem .9rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: .86rem;
  font-weight: 900;
  transition: background .2s ease, color .2s ease, transform .2s var(--ease);
}

.project-card__link:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
}

.cosol-case {
  background: var(--bg);
}

.cosol-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 150px max(24px, calc((100vw - var(--max)) / 2)) 76px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  background: #16697A;
  color: var(--white);
}

.cosol-hero__texture {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.14), transparent 18rem),
    repeating-radial-gradient(ellipse at 72% 34%, rgba(255,255,255,.16) 0 1px, transparent 2px 18px),
    repeating-radial-gradient(ellipse at 20% 72%, rgba(255,255,255,.11) 0 1px, transparent 2px 22px);
  transform: rotate(-6deg) scale(1.2);
}

.cosol-hero__content,
.cosol-hero__mockup {
  position: relative;
  z-index: 1;
}

.cosol-hero .eyebrow,
.cosol-hero p {
  color: rgba(255,255,255,.82);
}

.cosol-hero h1 {
  max-width: 980px;
  margin-bottom: 1.2rem;
  color: var(--white);
  font-size: clamp(3.6rem, 8vw, 8.2rem);
}

.cosol-hero__content > p:not(.eyebrow) {
  max-width: 760px;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
}

.cosol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.5rem;
}

.cosol-tags span {
  padding: .55rem .76rem;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: .84rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.cosol-hero__mockup {
  min-height: 590px;
}

.cosol-card {
  position: absolute;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.cosol-card--logo {
  left: 0;
  top: 120px;
  width: 58%;
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #f7f6ef;
  transform: rotate(-7deg);
}

.cosol-card--logo img {
  width: min(100%, 320px);
}

.cosol-card--manual {
  right: 0;
  top: 0;
  width: 62%;
  background: #f7f6ef;
  transform: rotate(5deg);
}

.cosol-card--manual img {
  width: 100%;
  height: auto;
  display: block;
}

.cosol-section {
  padding-top: 112px;
  padding-bottom: 112px;
}

.cosol-kicker {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cosol-text-block {
  max-width: 760px;
}

.cosol-text-block--wide {
  max-width: 920px;
  margin-bottom: 2rem;
}

.cosol-text-block h2 {
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
}

.cosol-text-block p {
  color: #3f3e38;
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
}

.cosol-split {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(360px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.cosol-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #f2eee4;
  box-shadow: 0 18px 55px rgba(17,17,17,.06);
}

.cosol-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.cosol-figure figcaption {
  padding: .8rem 1rem 1rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}

.cosol-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cosol-system-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.cosol-color {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cosol-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 1rem;
}

.cosol-swatch {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.15rem;
  border-radius: 28px;
  border: 1px solid var(--line);
}

.cosol-swatch span {
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cosol-swatch strong {
  font-size: 1.3rem;
  letter-spacing: -.03em;
}

.cosol-swatch--teal {
  background: #16697A;
  color: #fff;
}

.cosol-swatch--sand {
  background: #D6C092;
  color: #111;
}

.cosol-swatch--cream {
  background: #F7F6EF;
  color: #111;
}

.cosol-close {
  padding-top: 42px;
}

.cosol-close__box {
  display: grid;
  justify-items: start;
  padding: clamp(1.4rem, 6vw, 4rem);
  border-radius: 34px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 86% 12%, rgba(22,105,122,.18), transparent 20rem),
    #fff;
  box-shadow: 0 18px 55px rgba(17,17,17,.06);
}

.cosol-close__box img {
  width: min(330px, 70vw);
  margin-bottom: 2rem;
}

.cosol-close__box h2 {
  max-width: 900px;
}

.cosol-close__box p {
  max-width: 720px;
  color: #3f3e38;
  font-size: 1.12rem;
}

@media (max-width: 1020px) {
  .cosol-hero,
  .cosol-split,
  .cosol-system-grid,
  .cosol-system-grid--two {
    grid-template-columns: 1fr;
  }

  .cosol-hero {
    min-height: auto;
    padding-top: 132px;
  }

  .cosol-hero__mockup {
    min-height: 520px;
  }

  .cosol-card--logo {
    width: 54%;
  }

  .cosol-card--manual {
    width: 58%;
  }

  .cosol-palette {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .project-card__media--cosol {
    min-height: auto;
  }

  .project-card__media--cosol img {
    height: auto;
    object-fit: contain;
  }

  .cosol-hero {
    padding: 118px 18px 54px;
  }

  .cosol-hero h1 {
    font-size: clamp(3rem, 17vw, 5.4rem);
  }

  .cosol-hero__mockup {
    min-height: 450px;
  }

  .cosol-card {
    border-radius: 22px;
  }

  .cosol-card--logo {
    top: 130px;
    width: 66%;
    min-height: 220px;
    padding: 1.3rem;
  }

  .cosol-card--manual {
    width: 68%;
  }

  .cosol-section {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .cosol-figure {
    border-radius: 22px;
  }
}


/* v17 COSOL editorial redesign */
.project-card__media--cosol-preview {
  position: relative;
  min-height: 500px;
  display: block;
  overflow: hidden;
  background: #16697A;
  isolation: isolate;
}

.cosol-preview__texture {
  position: absolute;
  inset: -20%;
  opacity: .28;
  background:
    repeating-radial-gradient(ellipse at 72% 34%, rgba(255,255,255,.18) 0 1px, transparent 2px 18px),
    repeating-radial-gradient(ellipse at 20% 72%, rgba(255,255,255,.12) 0 1px, transparent 2px 22px);
  transform: rotate(-7deg) scale(1.18);
}

.cosol-preview__card {
  position: absolute;
  display: grid;
  border-radius: 28px;
  background: #f7f3e8;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.cosol-preview__card--logo {
  right: 9%;
  top: 8%;
  width: min(44%, 360px);
  min-height: 360px;
  place-items: center;
  padding: 2rem;
  transform: rotate(5deg);
}

.cosol-preview__card--logo img {
  width: min(100%, 260px);
  height: auto;
  object-fit: contain;
}

.cosol-preview__card--logo small {
  color: rgba(22,105,122,.72);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cosol-preview__card--concept {
  left: 8%;
  top: 20%;
  width: min(36%, 300px);
  min-height: 300px;
  align-content: end;
  gap: .4rem;
  padding: 1.4rem;
  transform: rotate(-7deg);
}

.cosol-preview__card--concept b {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  color: #16697A;
  font-size: .78rem;
  letter-spacing: .18em;
}

.cosol-preview__card--concept strong {
  color: #162326;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.cosol-preview__card--concept i {
  color: #16697A;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cosol-preview__label {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 3;
  padding: .58rem .8rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.cosol-case--v17 {
  background: #f4efe4;
  color: #162326;
}

.cosol-editorial-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #16697A;
  color: #fff;
}

.cosol-editorial-hero__texture {
  position: absolute;
  inset: -20%;
  opacity: .25;
  background:
    repeating-radial-gradient(ellipse at 72% 34%, rgba(255,255,255,.20) 0 1px, transparent 2px 18px),
    repeating-radial-gradient(ellipse at 20% 72%, rgba(255,255,255,.13) 0 1px, transparent 2px 22px);
  transform: rotate(-8deg) scale(1.16);
}

.cosol-editorial-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, var(--max));
  min-height: 100svh;
  margin: 0 auto;
  padding: 150px 0 74px;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(360px,1.05fr);
  gap: clamp(2rem,6vw,6rem);
  align-items: center;
}

.cosol-editorial-hero__copy h1 {
  max-width: 920px;
  color: #fff;
  font-size: clamp(3.3rem, 7.6vw, 7.6rem);
  line-height: .9;
}

.cosol-editorial-hero__copy p:not(.eyebrow) {
  max-width: 700px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.12rem,1.8vw,1.42rem);
}

.cosol-tags--editorial span {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}

.cosol-editorial-stack {
  position: relative;
  min-height: 650px;
}

.cosol-manual-card {
  position: absolute;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 30px 90px rgba(0,0,0,.26);
}

.cosol-manual-card--cover {
  right: 1%;
  top: 0;
  width: min(58%, 420px);
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #f7f3e8;
  color: #16697A;
  transform: rotate(5deg);
}

.cosol-manual-card__lines {
  position: absolute;
  inset: -20%;
  opacity: .18;
  background:
    repeating-radial-gradient(ellipse at 72% 34%, #16697A 0 1px, transparent 2px 18px),
    repeating-radial-gradient(ellipse at 20% 72%, #16697A 0 1px, transparent 2px 22px);
}

.cosol-manual-card--cover img {
  position: relative;
  z-index: 1;
  width: min(100%, 310px);
}

.cosol-manual-card--cover small {
  position: relative;
  z-index: 1;
  align-self: end;
  color: rgba(22,105,122,.75);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.cosol-manual-card--concept {
  left: 0;
  top: 118px;
  width: min(48%, 360px);
  min-height: 430px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fbf8f0;
  color: #162326;
  transform: rotate(-7deg);
}

.cosol-manual-card--concept b {
  color: #16697A;
  font-size: .82rem;
  letter-spacing: .20em;
}

.cosol-manual-card--concept h2 {
  margin: .7rem 0 0;
  font-size: clamp(2rem, 3vw, 3rem);
}

.cosol-equation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #16697A;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 900;
}

.cosol-equation i {
  color: rgba(22,105,122,.55);
  font-size: .55em;
  font-style: normal;
}

.cosol-manual-card--concept p {
  color: rgba(22,35,38,.58);
  font-size: .9rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cosol-editorial-intro {
  display: grid;
  grid-template-columns: minmax(240px,.36fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}

.cosol-showcase__heading {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(280px,.48fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.cosol-showcase__heading h2 {
  max-width: 850px;
}

.cosol-showcase__heading p:not(.eyebrow) {
  color: #4f4d45;
}

.cosol-page-gallery {
  display: grid;
  grid-template-columns: 1.25fr .82fr .82fr;
  gap: 1rem;
}

.cosol-page-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.11);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(17,17,17,.07);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}

.cosol-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 80px rgba(17,17,17,.11);
}

.cosol-page-card img {
  width: 100%;
  height: auto;
  display: block;
}

.cosol-page-card figcaption {
  padding: .9rem 1rem 1.05rem;
  color: #59574f;
  font-size: .86rem;
  font-weight: 780;
}

.cosol-concept-band {
  width: 100%;
  background: #162326;
  color: #fff;
}

.cosol-concept-band__inner {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(300px,.55fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}

.cosol-concept-band .cosol-text-block p,
.cosol-concept-band .eyebrow {
  color: rgba(255,255,255,.72);
}

.cosol-concept-band .cosol-text-block h2 {
  color: #fff;
}

.cosol-symbol-panel {
  min-height: 360px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: #f7f3e8;
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
}

.cosol-symbol-panel img {
  width: min(70%, 330px);
}

.cosol-system-editorial__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.cosol-color-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem;
  border-radius: 30px;
  border: 1px solid rgba(17,17,17,.11);
}

.cosol-color-card span {
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.cosol-color-card strong {
  font-size: clamp(1.5rem,2.6vw,2.4rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.cosol-color-card--teal {
  background: #16697A;
  color: #fff;
}

.cosol-color-card--sand {
  background: #D6C092;
  color: #162326;
}

.cosol-rules {
  display: grid;
  grid-template-columns: minmax(280px,.55fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}

.cosol-rules__visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cosol-close--editorial .cosol-close__box {
  background: #fff;
}

@media (max-width: 1020px) {
  .cosol-editorial-hero__inner,
  .cosol-editorial-intro,
  .cosol-showcase__heading,
  .cosol-page-gallery,
  .cosol-concept-band__inner,
  .cosol-system-editorial__grid,
  .cosol-rules,
  .cosol-rules__visuals {
    grid-template-columns: 1fr;
  }

  .cosol-editorial-stack {
    min-height: 560px;
  }

  .cosol-manual-card--cover {
    width: 60%;
  }

  .cosol-manual-card--concept {
    width: 52%;
  }
}

@media (max-width: 680px) {
  .project-card__media--cosol-preview {
    min-height: 430px;
  }

  .cosol-preview__card--logo {
    width: 64%;
    min-height: 300px;
    right: 6%;
  }

  .cosol-preview__card--concept {
    width: 50%;
    min-height: 250px;
    left: 5%;
    top: 24%;
  }

  .cosol-editorial-hero__inner {
    width: min(100% - 24px, var(--max));
    padding: 122px 0 58px;
  }

  .cosol-editorial-hero__copy h1 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .cosol-editorial-stack {
    min-height: 500px;
  }

  .cosol-manual-card {
    border-radius: 24px;
  }

  .cosol-manual-card--cover {
    width: 68%;
    min-height: 420px;
    right: 0;
  }

  .cosol-manual-card--concept {
    width: 62%;
    min-height: 320px;
    top: 125px;
  }

  .cosol-symbol-panel {
    min-height: 280px;
    border-radius: 26px;
  }
}


/* v18 COSOL refresh */
.project-card__media--cosol-preview-v2 {
  position: relative;
  min-height: 500px;
  background: #16697A;
}

.project-card__media--cosol-preview-v2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cosol-preview-v2__badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  padding: .62rem .92rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(10,18,19,.22);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.cosol-case--v18 {
  background: #f4efe4;
  color: #162326;
}

.cosol-v18-hero {
  position: relative;
  overflow: hidden;
  background: #16697A;
  color: #fff;
}

.cosol-v18-hero__ornament {
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    radial-gradient(circle at 20% 16%, transparent 0 75px, rgba(255,255,255,.22) 76px 77px, transparent 78px 130px),
    radial-gradient(circle at 82% 28%, transparent 0 60px, rgba(255,255,255,.20) 61px 62px, transparent 63px 120px),
    radial-gradient(circle at 62% 78%, transparent 0 84px, rgba(255,255,255,.18) 85px 86px, transparent 87px 145px),
    radial-gradient(circle at 10% 80%, transparent 0 55px, rgba(255,255,255,.14) 56px 57px, transparent 58px 120px);
}

.cosol-v18-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: 150px 0 92px;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.cosol-v18-hero__copy h1 {
  max-width: 600px;
  color: #fff;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: .9;
  margin-bottom: 1rem;
}

.cosol-v18-hero__copy p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(255,255,255,.86);
  font-size: clamp(1.14rem, 1.8vw, 1.5rem);
}

.cosol-v18-hero__visual {
  position: relative;
  min-height: 560px;
}

.cosol-v18-card {
  position: absolute;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
}

.cosol-v18-card--cover {
  top: .8rem;
  right: 1rem;
  width: min(58%, 380px);
  min-height: 500px;
  padding: 1.2rem;
  background: #f8f3e8;
  transform: rotate(6deg);
}

.cosol-v18-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  padding: 2rem;
  border: 1px solid rgba(22,105,122,.14);
  border-radius: 26px;
  text-align: center;
  background: #f8f3e8;
}

.cosol-v18-card__inner::before {
  content: '';
  position: absolute;
  inset: -12%;
  opacity: .18;
  background:
    radial-gradient(circle at 14% 22%, transparent 0 48px, rgba(22,105,122,.5) 49px 50px, transparent 51px 108px),
    radial-gradient(circle at 86% 38%, transparent 0 70px, rgba(22,105,122,.36) 71px 72px, transparent 73px 130px),
    radial-gradient(circle at 42% 88%, transparent 0 58px, rgba(22,105,122,.28) 59px 60px, transparent 61px 118px);
}

.cosol-v18-card__inner img,
.cosol-v18-card__inner small {
  position: relative;
  z-index: 1;
}

.cosol-v18-card__inner img {
  width: min(100%, 270px);
  height: auto;
}

.cosol-v18-card__inner small {
  margin-top: 3rem;
  color: rgba(22,105,122,.74);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cosol-v18-card--concept {
  left: 0;
  top: 7rem;
  width: min(48%, 320px);
  min-height: 410px;
  padding: 1.4rem;
  background: #fff;
  color: #162326;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
}

.cosol-v18-card--concept p:first-child {
  color: #16697A;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cosol-v18-card--concept h2 {
  margin: .5rem 0 1rem;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: .95;
}

.cosol-v18-equation {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #16697A;
  font-size: clamp(2.2rem, 4.4vw, 4.3rem);
  font-weight: 900;
}

.cosol-v18-equation i {
  font-style: normal;
  font-size: .54em;
  opacity: .55;
}

.cosol-v18-card--concept small {
  margin-top: auto;
  color: rgba(22,35,38,.6);
  font-size: .9rem;
  line-height: 1.45;
}

.cosol-v18-intro {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.cosol-v18-pages {
  background: #fff;
  padding: 0 0 1rem;
}

.cosol-v18-pages__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-end;
  margin-bottom: 2.25rem;
}

.cosol-v18-pages__heading h2 {
  margin-bottom: 0;
}

.cosol-v18-pages__heading p:last-child {
  max-width: 430px;
  color: #5a584f;
}

.cosol-v18-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.cosol-v18-page-card {
  border-radius: 30px;
  background: #f4efe4;
  padding: .9rem;
  box-shadow: 0 12px 34px rgba(17,17,17,.06);
}

.cosol-v18-page-card__media {
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: #fbf8f0;
}

.cosol-v18-page-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cosol-v18-page-card__media--teal { background: #16697A; }
.cosol-v18-page-card__media--sand { background: #D6C092; }

.cosol-v18-page-card__meta {
  display: grid;
  gap: .35rem;
  padding: 1rem .4rem .3rem;
}

.cosol-v18-page-card__meta span {
  color: rgba(22,105,122,.75);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cosol-v18-page-card__meta strong {
  font-size: 1.5rem;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.cosol-v18-focus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cosol-v18-focus-card {
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(17,17,17,.06);
  padding: clamp(1.6rem, 4vw, 3rem);
}

.cosol-v18-focus-card--dark {
  background: #16697A;
  color: #fff;
}

.cosol-v18-focus-card h2 {
  margin: .8rem 0 1rem;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: .94;
}

.cosol-v18-focus-card--dark p:not(.eyebrow) {
  color: rgba(255,255,255,.8);
}

.cosol-v18-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.4rem 0 1rem;
}

.cosol-v18-swatches span {
  display: block;
  min-height: 120px;
  border-radius: 22px;
}

.cosol-v18-swatches__teal { background: #16697A; }
.cosol-v18-swatches__sand { background: #D6C092; }

.cosol-v18-close {
  background: #162326;
  color: #fff;
}

.cosol-v18-close__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.cosol-v18-close__inner h2 {
  max-width: 820px;
  color: #fff;
  margin-bottom: 0;
}

.button--ghost-light {
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

.button--ghost-light:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}

@media (max-width: 1020px) {
  .cosol-v18-hero__inner,
  .cosol-v18-intro,
  .cosol-v18-page-grid,
  .cosol-v18-focus {
    grid-template-columns: 1fr;
  }

  .cosol-v18-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cosol-v18-hero__visual {
    min-height: 520px;
  }
}

@media (max-width: 680px) {
  .project-card__media--cosol-preview-v2 {
    min-height: 320px;
  }

  .cosol-v18-hero__inner {
    width: min(100% - 24px, var(--max));
    padding: 122px 0 58px;
  }

  .cosol-v18-hero__copy h1 {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .cosol-v18-hero__visual {
    min-height: 440px;
  }

  .cosol-v18-card {
    border-radius: 24px;
  }

  .cosol-v18-card--cover {
    width: 68%;
    min-height: 360px;
    right: 0;
  }

  .cosol-v18-card--concept {
    width: 58%;
    min-height: 280px;
    top: 110px;
  }

  .cosol-v18-page-grid {
    grid-template-columns: 1fr;
  }

  .cosol-v18-focus-card h2,
  .cosol-v18-close__inner h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

/* v20 COSOL real-assets case */
.project-card__media--cosol-real{position:relative;min-height:520px;background:#16697A}.project-card__media--cosol-real img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s var(--ease)}.project-card:hover .project-card__media--cosol-real img{transform:scale(1.035)}.project-card__media--cosol-real::after{content:'';position:absolute;inset:auto 0 0;height:44%;background:linear-gradient(180deg,transparent,rgba(5,18,20,.58));z-index:1}.cosol-real-badge{position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;color:#fff;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);padding:.65rem .9rem;border-radius:999px;font-size:.74rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.cosol-case--v20{background:#f4efe4;color:#162326}.cosol-v20-hero{position:relative;overflow:hidden;background:#16697A;color:#fff}.cosol-v20-hero__image{position:absolute;inset:0;background-image:url(assets/work-cosol-preview-v20.webp);background-size:cover;background-position:center;opacity:.24;filter:saturate(.95)}.cosol-v20-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,105,122,.98) 0%,rgba(22,105,122,.88) 45%,rgba(22,105,122,.48) 100%)}.cosol-v20-hero__inner{position:relative;z-index:1;width:min(100% - 32px,var(--max));min-height:86svh;margin:0 auto;padding:150px 0 72px;display:grid;grid-template-columns:minmax(0,.78fr) minmax(360px,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center}.cosol-v20-hero__copy h1{max-width:680px;color:#fff;font-size:clamp(4rem,13vw,11rem);line-height:.78;letter-spacing:.02em;margin-bottom:1.3rem}.cosol-v20-hero__copy p:not(.eyebrow){max-width:650px;color:rgba(255,255,255,.84);font-size:clamp(1.1rem,1.8vw,1.45rem)}.cosol-v20-hero__stack{position:relative;min-height:560px}.cosol-v20-cover-card{position:absolute;right:2%;top:2%;width:min(62%,460px);min-height:560px;display:grid;place-items:center;border-radius:34px;background:#f8f3e8;box-shadow:0 30px 90px rgba(0,0,0,.25);padding:1rem;transform:rotate(3.8deg);overflow:hidden}.cosol-v20-cover-card img{width:100%;height:100%;min-height:530px;display:block;object-fit:cover;border-radius:26px}.cosol-v20-concept-card{position:absolute;left:0;top:116px;width:min(53%,390px);min-height:355px;background:#fff;color:#162326;border-radius:32px;padding:1.3rem;box-shadow:0 30px 90px rgba(0,0,0,.25);transform:rotate(-5deg);display:flex;flex-direction:column}.cosol-v20-concept-card b{color:#16697A;font-size:.78rem;letter-spacing:.2em}.cosol-v20-concept-card h2{font-size:clamp(2rem,3vw,3rem);line-height:.92;letter-spacing:-.05em;margin:.6rem 0 1rem}.cosol-v20-concept-card img{margin-top:auto;width:100%;height:auto;border-radius:18px;border:1px solid rgba(22,105,122,.13)}.cosol-v20-concept-card small{margin-top:.9rem;color:rgba(20,20,20,.58);font-size:.88rem;line-height:1.45}.cosol-v20-intro{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}.cosol-v20-real-concept{background:#fff}.cosol-v20-large-figure{margin:0;border-radius:34px;background:#fbf8f0;border:1px solid rgba(18,18,18,.13);padding:clamp(1rem,3vw,2rem);box-shadow:0 18px 60px rgba(20,20,20,.07)}.cosol-v20-large-figure img{width:100%;height:auto;display:block;border-radius:24px}.cosol-v20-large-figure figcaption{display:grid;grid-template-columns:minmax(160px,.32fr) 1fr;gap:2rem;margin-top:1.5rem;color:#625f56}.cosol-v20-large-figure figcaption span{color:#16697A;font-size:.72rem;text-transform:uppercase;letter-spacing:.28em;font-weight:950}.cosol-v20-large-figure figcaption p{margin:0;max-width:780px}.cosol-v20-section-head{max-width:940px;margin-bottom:2rem}.cosol-v20-section-head p:not(.eyebrow){max-width:720px}.cosol-v20-assets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.cosol-v20-asset{margin:0;background:#fff;border:1px solid rgba(18,18,18,.13);border-radius:30px;padding:1rem;box-shadow:0 12px 34px rgba(20,20,20,.06)}.cosol-v20-asset img{width:100%;height:auto;display:block;border-radius:22px;background:#fbf8f0}.cosol-v20-asset figcaption{padding:1rem .2rem .25rem;color:#49463f;font-size:.92rem;font-weight:850}.cosol-v20-pages{background:#fff}.cosol-v20-pages__heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2.2rem}.cosol-v20-pages__heading p:last-child{max-width:430px;color:#625f56}.cosol-v20-page-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.cosol-v20-page-card{margin:0;background:#f4efe4;border-radius:30px;padding:.9rem;box-shadow:0 12px 34px rgba(20,20,20,.06);transition:transform .25s var(--ease),box-shadow .25s ease}.cosol-v20-page-card:hover{transform:translateY(-5px);box-shadow:0 22px 60px rgba(20,20,20,.1)}.cosol-v20-page-card img{width:100%;aspect-ratio:3/4;height:auto;display:block;object-fit:cover;border-radius:22px;background:#fbf8f0}.cosol-v20-page-card figcaption{display:grid;gap:.25rem;padding:1rem .4rem .25rem}.cosol-v20-page-card figcaption span{font-size:.75rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,105,122,.78)}.cosol-v20-page-card figcaption strong{font-size:1.4rem;line-height:1}.cosol-v20-focus{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.cosol-v20-focus-card{padding:clamp(1.6rem,4vw,3rem);border-radius:34px;background:#fff;box-shadow:0 12px 34px rgba(20,20,20,.06)}.cosol-v20-focus-card--dark{background:#16697A;color:#fff}.cosol-v20-focus-card h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9}.cosol-v20-focus-card--dark p:not(.eyebrow){color:rgba(255,255,255,.8)}.cosol-v20-swatches{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.6rem 0}.cosol-v20-swatches span{display:block;min-height:130px;border-radius:24px}.cosol-v20-swatch--teal{background:#16697A}.cosol-v20-swatch--sand{background:#D6C092}.cosol-v20-close{background:#162326;color:#fff}.cosol-v20-close__inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}.cosol-v20-close__inner h2{max-width:850px;color:#fff;margin-bottom:0}.button--ghost-light{color:#fff;border-color:rgba(255,255,255,.28)}.button--ghost-light:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}@media(max-width:1020px){.cosol-v20-hero__inner,.cosol-v20-intro,.cosol-v20-focus{grid-template-columns:1fr}.cosol-v20-assets-grid{grid-template-columns:1fr}.cosol-v20-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cosol-v20-hero__stack{min-height:520px}}@media(max-width:680px){.project-card__media--cosol-real{min-height:330px}.cosol-v20-hero__inner{width:min(100% - 24px,var(--max));padding:112px 0 54px}.cosol-v20-hero__copy h1{font-size:clamp(3.2rem,18vw,5rem)}.cosol-v20-hero__stack{min-height:430px}.cosol-v20-cover-card{width:74%;min-height:350px;right:0;border-radius:24px}.cosol-v20-cover-card img{min-height:320px;border-radius:18px}.cosol-v20-concept-card{width:66%;min-height:260px;top:112px;border-radius:24px}.cosol-v20-large-figure figcaption,.cosol-v20-pages__heading{display:block}.cosol-v20-page-grid{grid-template-columns:1fr}}


/* v21 client logo ribbon under timeline */
.client-logo-ribbon {
  margin-top: clamp(1.4rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 30px;
  background: rgba(255,250,240,.72);
  box-shadow: 0 18px 58px rgba(17,17,17,.06);
}

.client-logo-ribbon__intro {
  display: grid;
  grid-template-columns: minmax(220px,.34fr) 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1rem, 2.8vw, 1.9rem) .9rem;
}

.client-logo-ribbon__intro span {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.client-logo-ribbon__intro p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

.client-logo-ribbon__marquee {
  position: relative;
  overflow: hidden;
  padding: .65rem 0 clamp(1rem, 2.4vw, 1.5rem);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.client-logo-ribbon__marquee::before {
  content: '';
  position: absolute;
  left: clamp(1rem, 2.8vw, 1.9rem);
  right: clamp(1rem, 2.8vw, 1.9rem);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,17,17,.14), transparent);
}

.client-logo-ribbon__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  animation: clientLogoMarquee 26s linear infinite;
  will-change: transform;
}

.client-logo-ribbon:hover .client-logo-ribbon__track {
  animation-play-state: paused;
}

.client-logo-ribbon__track img {
  flex: 0 0 auto;
  width: clamp(760px, 88vw, 1120px);
  height: clamp(72px, 10vw, 118px);
  display: block;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1) contrast(1.08);
  transition: opacity .25s ease, filter .25s ease;
}

.client-logo-ribbon__track img:hover {
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

@keyframes clientLogoMarquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(calc(-50% - clamp(1rem, 2.5vw, 2.25rem)),0,0); }
}

@media (max-width: 760px) {
  .client-logo-ribbon {
    border-radius: 24px;
  }

  .client-logo-ribbon__intro {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: 1rem 1rem .75rem;
  }

  .client-logo-ribbon__intro p {
    font-size: .88rem;
  }

  .client-logo-ribbon__marquee {
    padding-top: .55rem;
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .client-logo-ribbon__track {
    gap: 1.75rem;
    animation-duration: 32s;
  }

  .client-logo-ribbon__track img {
    width: 820px;
    height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-logo-ribbon__track {
    animation: none;
  }
}


/* v22 full-width individual logo flow under timeline */
.logo-flow {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(1.5rem, 4vw, 3.2rem);
  padding: clamp(1.1rem, 2.6vw, 1.9rem) 0 clamp(1.35rem, 3vw, 2.2rem);
  overflow: hidden;
  border-top: 1px solid rgba(17,17,17,.10);
  border-bottom: 1px solid rgba(17,17,17,.10);
  background: transparent;
}

.logo-flow__label {
  width: min(100% - 32px, var(--max));
  margin: 0 auto clamp(.85rem, 2vw, 1.4rem);
  display: grid;
  grid-template-columns: minmax(220px,.34fr) 1fr;
  gap: 1.2rem;
  align-items: baseline;
}

.logo-flow__label span {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.logo-flow__label p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

.logo-flow__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.logo-flow__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 5rem);
  padding: 0;
  margin: 0;
  list-style: none;
  animation: logoFlow 30s linear infinite;
  will-change: transform;
}

.logo-flow:hover .logo-flow__track {
  animation-play-state: paused;
}

.logo-flow__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: clamp(110px, 12vw, 180px);
  height: clamp(54px, 7vw, 82px);
  opacity: .72;
  filter: grayscale(1) contrast(1.06);
  transition: opacity .25s ease, filter .25s ease, transform .25s var(--ease);
}

.logo-flow__item:hover {
  opacity: 1;
  filter: grayscale(0) contrast(1);
  transform: translateY(-2px);
}

.logo-flow__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

@keyframes logoFlow {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(calc(-50% - clamp(1.1rem, 2.5vw, 2.5rem)),0,0); }
}

@media (max-width: 760px) {
  .logo-flow {
    margin-top: 1.5rem;
    padding: 1rem 0 1.2rem;
  }

  .logo-flow__label {
    width: min(100% - 24px, var(--max));
    grid-template-columns: 1fr;
    gap: .45rem;
    margin-bottom: .9rem;
  }

  .logo-flow__label p {
    font-size: .88rem;
  }

  .logo-flow__viewport {
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .logo-flow__track {
    gap: 2rem;
    animation-duration: 36s;
  }

  .logo-flow__item {
    min-width: 128px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-flow__track {
    animation: none;
  }
}


/* v23 clean full-width logo stream: no container, no mask, no hover interaction */
.client-logo-ribbon,
.logo-flow {
  display: none !important;
}

.logo-stream {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: clamp(.8rem, 2vw, 1.2rem) 0;
}

.logo-stream__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.6rem, 5vw, 5.8rem);
  padding: 0;
  margin: 0;
  list-style: none;
  animation: logoStreamMove 42s linear infinite;
  will-change: transform;
}

.logo-stream__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(150px, 13vw, 240px);
  height: clamp(70px, 7vw, 110px);
  opacity: .76;
  filter: grayscale(1) contrast(1.04);
  transform: none;
  transition: none;
}

.logo-stream__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* No hover effects, no pause, no scale. It keeps moving cleanly. */
.logo-stream:hover .logo-stream__track,
.logo-stream__item:hover {
  animation-play-state: running;
  opacity: .76;
  filter: grayscale(1) contrast(1.04);
  transform: none;
}

@keyframes logoStreamMove {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@media (max-width: 760px) {
  .logo-stream {
    margin-top: 1.4rem;
    padding: .65rem 0 1rem;
  }

  .logo-stream__track {
    gap: 2.6rem;
    animation-duration: 48s;
  }

  .logo-stream__item {
    width: 176px;
    height: 86px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-stream {
    overflow-x: auto;
  }

  .logo-stream__track {
    animation: none;
  }
}


/* v24 COSOL back to portfolio card only + desktop image background fix */
.project-card__media--cosol-duo {
  background: #f2eee4;
}

.project-card__media--cosol-duo img {
  background: #f2eee4 !important;
  object-fit: cover !important;
}

.project-card__media--cosol-duo img:nth-child(2) {
  object-fit: cover !important;
  background: #f2eee4 !important;
}

/* Remove black bands on desktop portfolio cases while keeping mobile contain behavior */
.project-card--fit-media .project-card__media--duo {
  background: #f2eee4 !important;
}

.project-card--fit-media .project-card__media--duo img,
.project-card--fit-media .project-card__media--duo img:nth-child(2),
.project-card--fit-media .project-card__media--duo img[src*="work-belvis-field"],
.project-card--fit-media .project-card__media--duo img[src*="work-casa-tigre-menu"],
.project-card--fit-media .project-card__media--duo img[src*="work-lafina-space"],
.project-card--fit-media .project-card__media--duo img[src*="work-amasama-real"] {
  background: #f2eee4 !important;
}

/* Desktop: avoid letterbox bands in project previews. Mobile keeps the previous no-crop fix. */
@media (min-width: 681px) {
  .project-card--fit-media .project-card__media--duo img {
    object-fit: cover;
    object-position: center center;
  }

  .project-card--fit-media .project-card__media--duo {
    min-height: clamp(420px, 38vw, 620px);
  }
}

@media (max-width: 680px) {
  .project-card__media--cosol-duo img {
    object-fit: contain !important;
  }
}


/* v25 portfolio image balance: no cropping across desktop/responsive */
.project-card--fit-media .project-card__media--duo,
.project-card__media--cosol-duo {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  background: #f2eee4 !important;
}

.project-card--fit-media .project-card__media--duo img,
.project-card__media--cosol-duo img,
.project-card--fit-media .project-card__media--duo img:nth-child(2),
.project-card__media--cosol-duo img:nth-child(2),
.project-card--fit-media .project-card__media--duo img[src*="work-belvis-field"],
.project-card--fit-media .project-card__media--duo img[src*="work-casa-tigre-menu"],
.project-card--fit-media .project-card__media--duo img[src*="work-lafina-space"],
.project-card--fit-media .project-card__media--duo img[src*="work-amasama-real"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #f2eee4 !important;
}

/* Desktop: keep two-column editorial rhythm, but let images define height naturally */
@media (min-width: 681px) {
  .project-card--fit-media .project-card__media--duo,
  .project-card__media--cosol-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .project-card--fit-media .project-card__media--duo img,
  .project-card__media--cosol-duo img {
    align-self: center;
  }
}

/* Mobile: one image under the other, complete and readable */
@media (max-width: 680px) {
  .project-card--fit-media .project-card__media--duo,
  .project-card__media--cosol-duo {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: transparent !important;
  }

  .project-card--fit-media .project-card__media--duo img,
  .project-card__media--cosol-duo img {
    width: 100% !important;
    height: auto !important;
    background: #f2eee4 !important;
  }
}

/* Single-image project cards: avoid accidental hard crops where possible */
.project-card__media--contain,
.project-card__media--dark {
  background: #f2eee4 !important;
}

.project-card__media--contain img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: #f2eee4 !important;
}


/* v26 polish: less black mass, subtler filters, logo strip positioning */

/* Home work preview: keep contrast, remove excessive black weight */
.work-preview {
  background: #121211;
}

.work-preview__grid {
  padding-top: clamp(72px, 8vw, 96px) !important;
  padding-bottom: clamp(58px, 6vw, 76px) !important;
  align-items: center;
}

.work-preview__content h2 {
  max-width: 820px;
}

.work-preview__content p:not(.eyebrow) {
  max-width: 650px;
}

.work-preview__cards {
  gap: .55rem;
}

.work-preview__cards a {
  min-height: 64px;
  padding: .78rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.105);
  backdrop-filter: none;
}

.work-preview__cards a:hover {
  transform: none;
  border-color: rgba(244,255,0,.38);
  background: rgba(255,255,255,.07);
}

.work-preview__cards span {
  width: 34px;
  height: 34px;
  font-size: .68rem;
}

.work-preview__cards strong {
  font-size: 1rem;
}

/* The giant ticker created too much visual weight */
.work__ticker {
  display: none !important;
}

/* Logo stream: lower, with subtle editorial label. No container. */
.logo-stream-label {
  width: min(100% - 32px, var(--max));
  margin: clamp(2.4rem, 6vw, 4.2rem) auto .55rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-stream {
  margin-top: 0 !important;
  padding-top: .55rem !important;
  padding-bottom: clamp(1.35rem, 3vw, 2rem) !important;
}

/* Portfolio page: remove decorative bubbles and reduce header mass */
.portfolio-hero {
  min-height: auto !important;
  grid-template-columns: 1fr !important;
  padding-top: clamp(124px, 12vw, 150px) !important;
  padding-bottom: clamp(38px, 5vw, 58px) !important;
  align-items: start !important;
}

.portfolio-hero__content h1 {
  max-width: 900px;
  font-size: clamp(3.2rem, 7vw, 7.2rem);
}

.portfolio-hero__aside {
  display: none !important;
}

/* Functional filters, but not bubble-looking */
.portfolio-controls {
  padding-top: 0 !important;
  padding-bottom: 18px !important;
}

.filter-bar {
  width: min(100%, var(--max));
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .95rem;
  padding: .85rem 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(17,17,17,.12) !important;
  border-bottom: 1px solid rgba(17,17,17,.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.filter-bar button {
  min-height: auto !important;
  padding: .35rem 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(17,17,17,.54);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .18s ease;
}

.filter-bar button:hover,
.filter-bar button.is-active {
  background: transparent !important;
  color: var(--ink) !important;
  transform: none !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Keep project tags, but make them less pill-heavy */
.project-card__content li {
  border-radius: 10px;
  background: rgba(255,255,255,.52);
}

@media (max-width: 760px) {
  .logo-stream-label {
    width: min(100% - 24px, var(--max));
    margin-top: 2.2rem;
    font-size: .68rem;
  }

  .work-preview__grid {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  .work-preview__cards a {
    min-height: 60px;
  }

  .filter-bar {
    gap: .45rem .8rem;
  }

  .filter-bar button {
    flex: 0 0 auto !important;
    font-size: .78rem;
  }
}


/* v27 correction: restore ticker; reduce black mass without removing elements */
.work__ticker {
  display: flex !important;
  gap: .75rem;
  width: max-content;
  padding: 0 0 clamp(28px, 4vw, 42px) !important;
  animation: ticker 25s linear infinite;
}

.work__ticker span {
  min-height: clamp(72px, 7vw, 96px);
  padding: .35rem clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: clamp(2.7rem, 7vw, 6.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.work-preview {
  background:
    radial-gradient(circle at 12% 12%, rgba(244,255,0,.055), transparent 22rem),
    #121211;
}

.work-preview__grid {
  padding-top: clamp(72px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 5vw, 62px) !important;
}

@media (max-width: 760px) {
  .work__ticker {
    padding-bottom: 30px !important;
  }

  .work__ticker span {
    min-height: 64px;
    font-size: clamp(2.4rem, 13vw, 4.8rem);
  }
}


/* v28 final QA: ticker readability, responsive, portfolio images, COSOL, filters */

/* Ticker restored and fixed: no overlapping letters */
.work__ticker {
  display: flex !important;
  align-items: center;
  gap: clamp(1.8rem, 4vw, 4rem) !important;
  width: max-content;
  padding: 0 0 clamp(32px, 4vw, 44px) !important;
  animation: ticker 30s linear infinite;
}

.work__ticker span {
  display: inline-flex;
  align-items: center;
  min-height: clamp(76px, 7vw, 98px);
  padding: .3rem clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  font-size: clamp(2.8rem, 6.7vw, 6.2rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.035em !important;
  white-space: nowrap;
  text-rendering: geometricPrecision;
}

@keyframes ticker {
  0% { transform: translateX(1rem); }
  100% { transform: translateX(-34%); }
}

/* Reduce black mass without deleting the ticker */
.work-preview {
  background:
    radial-gradient(circle at 14% 12%, rgba(244,255,0,.055), transparent 22rem),
    #121211;
}

.work-preview__grid {
  padding-top: clamp(72px, 8vw, 94px) !important;
  padding-bottom: clamp(48px, 5vw, 62px) !important;
  align-items: center;
}

.work-preview__content h2 {
  max-width: 820px;
}

.work-preview__content p:not(.eyebrow) {
  max-width: 650px;
}

/* Category cards stay, but lighter */
.work-preview__cards {
  gap: .58rem;
}

.work-preview__cards a {
  min-height: 66px;
  padding: .78rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.105);
  backdrop-filter: none;
}

.work-preview__cards a:hover {
  transform: none;
  border-color: rgba(244,255,0,.38);
  background: rgba(255,255,255,.07);
}

.work-preview__cards span {
  width: 34px;
  height: 34px;
  font-size: .68rem;
}

.work-preview__cards strong {
  font-size: 1rem;
}

/* Logo stream lower + subtle label. No container */
.logo-stream-label {
  width: min(100% - 32px, var(--max));
  margin: clamp(2.4rem, 6vw, 4.2rem) auto .55rem;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-stream {
  margin-top: 0 !important;
  padding-top: .55rem !important;
  padding-bottom: clamp(1.35rem, 3vw, 2rem) !important;
}

/* Portfolio page: no decorative bubbles/asides */
.portfolio-hero {
  min-height: auto !important;
  grid-template-columns: 1fr !important;
  padding-top: clamp(124px, 12vw, 150px) !important;
  padding-bottom: clamp(38px, 5vw, 58px) !important;
  align-items: start !important;
}

.portfolio-hero__content h1 {
  max-width: 900px;
  font-size: clamp(3.2rem, 7vw, 7.2rem);
}

.portfolio-hero__aside {
  display: none !important;
}

/* Functional filters, not decorative bubbles */
.portfolio-controls {
  padding-top: 0 !important;
  padding-bottom: 18px !important;
}

.filter-bar {
  width: min(100%, var(--max));
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .95rem;
  padding: .85rem 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(17,17,17,.12) !important;
  border-bottom: 1px solid rgba(17,17,17,.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.filter-bar button {
  min-height: auto !important;
  padding: .35rem 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(17,17,17,.54);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .18s ease;
}

.filter-bar button:hover,
.filter-bar button.is-active {
  background: transparent !important;
  color: var(--ink) !important;
  transform: none !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Portfolio image equilibrium: complete images, no black bands, no aggressive crop */
.project-card--fit-media .project-card__media--duo,
.project-card__media--cosol-duo {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  background: #f2eee4 !important;
}

.project-card--fit-media .project-card__media--duo img,
.project-card__media--cosol-duo img,
.project-card--fit-media .project-card__media--duo img:nth-child(2),
.project-card__media--cosol-duo img:nth-child(2),
.project-card--fit-media .project-card__media--duo img[src*="work-belvis-field"],
.project-card--fit-media .project-card__media--duo img[src*="work-casa-tigre-menu"],
.project-card--fit-media .project-card__media--duo img[src*="work-lafina-space"],
.project-card--fit-media .project-card__media--duo img[src*="work-amasama-real"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #f2eee4 !important;
}

.project-card__media {
  background: #f2eee4;
}

/* Desktop: two-column editorial rhythm with complete images */
@media (min-width: 681px) {
  .project-card--fit-media .project-card__media--duo,
  .project-card__media--cosol-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .project-card--fit-media .project-card__media--duo img,
  .project-card__media--cosol-duo img {
    align-self: center;
  }
}

/* Mobile: no overlap, no cropped images */
@media (max-width: 760px) {
  .logo-stream-label {
    width: min(100% - 24px, var(--max));
    margin-top: 2.25rem;
    font-size: .68rem;
  }

  .work-preview__grid {
    padding-top: 64px !important;
    padding-bottom: 52px !important;
  }

  .work-preview__cards a {
    min-height: 60px;
  }

  .work__ticker {
    gap: 1.4rem !important;
    padding-bottom: 30px !important;
    animation-duration: 34s;
  }

  .work__ticker span {
    min-height: 64px;
    padding: .24rem 1.1rem;
    font-size: clamp(2.2rem, 11vw, 4.25rem);
    letter-spacing: -.025em !important;
    line-height: 1.08;
  }

  .filter-bar {
    gap: .45rem .8rem;
  }

  .filter-bar button {
    flex: 0 0 auto !important;
    font-size: .78rem;
  }

  .project-card--fit-media .project-card__media--duo,
  .project-card__media--cosol-duo {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: transparent !important;
  }

  .project-card--fit-media .project-card__media--duo img,
  .project-card__media--cosol-duo img {
    width: 100% !important;
    height: auto !important;
    background: #f2eee4 !important;
  }
}


/* v29 logo strip cleanup: one label, less empty mass, closer Servicios */
.logo-stream-label {
  width: min(100% - 32px, var(--max));
  margin: clamp(1.8rem, 4vw, 2.8rem) auto .65rem !important;
  color: rgba(17,17,17,.54);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-stream {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(.6rem, 1.8vw, 1rem) !important;
}

.logo-stream__item {
  height: clamp(62px, 6vw, 92px) !important;
}

/* The services block was starting too far away after the logo marquee */
#servicios.services,
section#servicios {
  padding-top: clamp(54px, 7vw, 76px) !important;
}

/* Mobile balance */
@media (max-width: 760px) {
  .logo-stream-label {
    width: min(100% - 24px, var(--max));
    margin-top: 1.65rem !important;
    margin-bottom: .45rem !important;
    font-size: .66rem;
    letter-spacing: .18em;
  }

  .logo-stream {
    padding-bottom: .5rem !important;
  }

  .logo-stream__item {
    height: 72px !important;
  }

  #servicios.services,
  section#servicios {
    padding-top: 48px !important;
  }
}


/* v30 logo strip final: no clipping + better rhythm with Services */
.logo-stream-label {
  width: min(100% - 32px, var(--max));
  margin: clamp(2.2rem, 5vw, 3.4rem) auto clamp(1.35rem, 2.4vw, 1.9rem) !important;
  color: rgba(17,17,17,.52);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-stream {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0 !important;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 clamp(2.1rem, 4vw, 3rem) !important;
}

.logo-stream__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(2.8rem, 5vw, 5.8rem);
  padding: 0;
  margin: 0;
  list-style: none;
  animation: logoStreamMove 50s linear infinite;
  will-change: transform;
}

.logo-stream__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(220px, 16vw, 300px) !important;
  height: clamp(92px, 7.5vw, 128px) !important;
  opacity: .76;
  filter: grayscale(1) contrast(1.04);
  transform: none;
  transition: none;
  overflow: visible !important;
}

.logo-stream__item img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  object-position: center;
  overflow: visible !important;
}

.logo-stream:hover .logo-stream__track,
.logo-stream__item:hover {
  animation-play-state: running;
  opacity: .76;
  filter: grayscale(1) contrast(1.04);
  transform: none;
}

@keyframes logoStreamMove {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

#servicios.services,
section#servicios {
  padding-top: clamp(62px, 7vw, 86px) !important;
}

@media (max-width: 760px) {
  .logo-stream-label {
    width: min(100% - 24px, var(--max));
    margin-top: 2rem !important;
    margin-bottom: 1.05rem !important;
    font-size: .66rem;
    letter-spacing: .18em;
  }

  .logo-stream {
    padding-bottom: 2.3rem !important;
  }

  .logo-stream__track {
    gap: 2.8rem;
    animation-duration: 56s;
  }

  .logo-stream__item {
    width: 220px !important;
    height: 96px !important;
  }

  #servicios.services,
  section#servicios {
    padding-top: 54px !important;
  }
}


/* v31 logo strip: bigger logos, tighter rhythm, less gap before Servicios */
.logo-stream-label {
  margin: clamp(1.85rem, 4vw, 2.9rem) auto .45rem !important;
}

.logo-stream {
  padding-top: 0 !important;
  padding-bottom: clamp(.55rem, 1.4vw, .95rem) !important;
}

.logo-stream__track {
  gap: clamp(1.25rem, 2.6vw, 3rem) !important;
  animation-duration: 44s !important;
}

.logo-stream__item {
  width: clamp(260px, 17vw, 360px) !important;
  height: clamp(105px, 8vw, 142px) !important;
}

.logo-stream__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#servicios.services,
section#servicios {
  padding-top: clamp(34px, 4.8vw, 54px) !important;
}

@media (max-width: 760px) {
  .logo-stream-label {
    margin-top: 1.65rem !important;
    margin-bottom: .35rem !important;
  }

  .logo-stream {
    padding-bottom: .5rem !important;
  }

  .logo-stream__track {
    gap: 1.45rem !important;
    animation-duration: 48s !important;
  }

  .logo-stream__item {
    width: 250px !important;
    height: 105px !important;
  }

  #servicios.services,
  section#servicios {
    padding-top: 34px !important;
  }
}


/* v39 — vuelve a la base v31 + mejora franja de marcas y efecto amarillo en servicios */

/* Franja negra para marcas colaboradoras */
.logo-collab-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(244,255,0,.24), transparent 18rem),
    radial-gradient(circle at 82% 76%, rgba(244,255,0,.12), transparent 20rem),
    #101010;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.logo-collab-band::before {
  content: "";
  position: absolute;
  left: clamp(18px, 6vw, 92px);
  top: 0;
  width: clamp(70px, 14vw, 190px);
  height: clamp(70px, 14vw, 190px);
  background: var(--accent);
  opacity: .18;
  filter: blur(42px);
  transform: translateY(-44%);
  pointer-events: none;
}

.logo-collab-band::after {
  content: "";
  position: absolute;
  right: clamp(18px, 6vw, 92px);
  bottom: 0;
  width: clamp(90px, 18vw, 240px);
  height: clamp(90px, 18vw, 240px);
  background: var(--accent);
  opacity: .10;
  filter: blur(52px);
  transform: translateY(48%);
  pointer-events: none;
}

.logo-collab-band__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4.4vw, 4rem) 0 clamp(2.1rem, 4.5vw, 4.2rem);
}

/* override old logo strip spacing inside the band */
.logo-collab-band .logo-stream-label {
  width: min(100% - 32px, var(--max));
  margin: 0 auto clamp(1rem, 2vw, 1.4rem) !important;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-collab-band .logo-stream {
  margin-top: 0 !important;
  margin-left: 0 !important;
  width: 100vw;
  padding: .2rem 0 0 !important;
  background: transparent !important;
}

.logo-collab-band .logo-stream__track {
  gap: clamp(1.8rem, 3.6vw, 4rem) !important;
  animation-duration: 46s !important;
}

.logo-collab-band .logo-stream__item {
  width: clamp(230px, 16vw, 320px) !important;
  height: clamp(86px, 7vw, 122px) !important;
  opacity: .86 !important;
  filter: grayscale(1) invert(1) brightness(1.18) contrast(.92) !important;
}

.logo-collab-band .logo-stream__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Servicios: que el efecto amarillo se vea de verdad, no solo en hover */
#servicios.services {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 5%, rgba(244,255,0,.24), transparent 24rem),
    radial-gradient(circle at 92% 18%, rgba(244,255,0,.10), transparent 20rem),
    var(--paper);
}

#servicios.services::before {
  content: "";
  position: absolute;
  left: clamp(18px, 7vw, 110px);
  top: clamp(16px, 4vw, 64px);
  width: clamp(120px, 20vw, 320px);
  height: clamp(120px, 20vw, 320px);
  border-radius: 999px;
  background: var(--accent);
  opacity: .12;
  filter: blur(34px);
  pointer-events: none;
}

#servicios.services > * {
  position: relative;
  z-index: 1;
}

#servicios .service-card {
  background:
    radial-gradient(circle at 100% 100%, rgba(244,255,0,.30), transparent 9rem),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68)) !important;
  border-color: rgba(17,17,17,.16) !important;
}

#servicios .service-card::after {
  right: -28px;
  bottom: -28px;
  width: 152px;
  height: 152px;
  background: rgba(244,255,0,.30) !important;
  opacity: .82 !important;
  transform: scale(.88) !important;
}

#servicios .service-card:hover::after {
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

#servicios .service-card:hover {
  background:
    radial-gradient(circle at 100% 100%, rgba(244,255,0,.42), transparent 10rem),
    rgba(255,255,255,.9) !important;
}

/* Responsive */
@media (max-width: 760px) {
  .logo-collab-band {
    margin-top: 2rem;
    margin-bottom: 2.4rem;
  }

  .logo-collab-band__inner {
    padding: 1.8rem 0 2rem;
  }

  .logo-collab-band .logo-stream-label {
    width: min(100% - 24px, var(--max));
    margin-bottom: .85rem !important;
    font-size: .66rem;
    letter-spacing: .18em;
  }

  .logo-collab-band .logo-stream__track {
    gap: 1.4rem !important;
    animation-duration: 50s !important;
  }

  .logo-collab-band .logo-stream__item {
    width: 230px !important;
    height: 90px !important;
  }

  #servicios.services {
    background:
      radial-gradient(circle at 12% 4%, rgba(244,255,0,.22), transparent 14rem),
      var(--paper);
  }
}


/* v40 — más mancha amarilla en Trabajos + menos aire entre logos y Servicios */

/* Trabajos: la masa negra necesitaba una mancha más visible */
.work-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 18%, rgba(244,255,0,.26), transparent 18rem),
    radial-gradient(circle at 86% 24%, rgba(244,255,0,.13), transparent 22rem),
    linear-gradient(180deg, #101010 0%, #151515 100%) !important;
}

.work-preview::before {
  content: "";
  position: absolute;
  left: clamp(22px, 8vw, 140px);
  top: clamp(36px, 7vw, 96px);
  width: clamp(150px, 24vw, 390px);
  height: clamp(150px, 24vw, 390px);
  border-radius: 999px;
  background: var(--accent);
  opacity: .16;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.work-preview::after {
  content: "";
  position: absolute;
  right: clamp(10px, 5vw, 80px);
  bottom: clamp(12px, 5vw, 86px);
  width: clamp(120px, 18vw, 280px);
  height: clamp(120px, 18vw, 280px);
  border-radius: 999px;
  background: var(--accent);
  opacity: .08;
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
}

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

.work-preview__grid::before {
  opacity: 1 !important;
  box-shadow: 0 0 38px rgba(244,255,0,.30);
}

/* Empresas colaboradoras: compactar ritmo antes de Servicios */
.logo-collab-band {
  margin-bottom: clamp(.65rem, 1.6vw, 1.25rem) !important;
}

.logo-collab-band__inner {
  padding-top: clamp(1.75rem, 3.7vw, 3.25rem) !important;
  padding-bottom: clamp(1.35rem, 2.8vw, 2.25rem) !important;
}

.logo-collab-band .logo-stream-label {
  margin-bottom: clamp(.55rem, 1.1vw, .9rem) !important;
}

.logo-collab-band .logo-stream {
  padding-bottom: 0 !important;
}

/* Servicios: empieza antes para no dejar hueco muerto tras la banda */
#servicios.services,
section#servicios {
  padding-top: clamp(34px, 4.2vw, 58px) !important;
}

/* Responsive */
@media (max-width: 760px) {
  .work-preview {
    background:
      radial-gradient(circle at 12% 12%, rgba(244,255,0,.22), transparent 13rem),
      linear-gradient(180deg, #101010 0%, #151515 100%) !important;
  }

  .work-preview::before {
    width: 160px;
    height: 160px;
    opacity: .14;
    filter: blur(34px);
  }

  .logo-collab-band {
    margin-bottom: .75rem !important;
  }

  .logo-collab-band__inner {
    padding-top: 1.55rem !important;
    padding-bottom: 1.45rem !important;
  }

  #servicios.services,
  section#servicios {
    padding-top: 34px !important;
  }
}


/* v41 — servicios con manchas amarillas orgánicas, no círculos visibles */
#servicios .service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Neutraliza el círculo visible anterior */
#servicios .service-card::after {
  content: "";
  position: absolute;
  inset: auto;
  right: auto;
  bottom: auto;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* Mancha base más orgánica */
#servicios .service-card::before {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .88;
  filter: blur(16px);
  background: radial-gradient(ellipse at center,
    rgba(244,255,0,.34) 0%,
    rgba(244,255,0,.22) 36%,
    rgba(244,255,0,.10) 58%,
    rgba(244,255,0,0) 76%);
  mix-blend-mode: multiply;
}

#servicios .service-card > * {
  position: relative;
  z-index: 1;
}

/* Variación real entre tarjetas */
#servicios .cards-grid > .service-card:nth-child(1)::before {
  width: 176px;
  height: 132px;
  top: -10px;
  right: -36px;
  border-radius: 58% 42% 47% 53% / 43% 58% 42% 57%;
  transform: rotate(-10deg);
}

#servicios .cards-grid > .service-card:nth-child(2)::before {
  width: 150px;
  height: 118px;
  bottom: -22px;
  left: -18px;
  border-radius: 45% 55% 62% 38% / 54% 39% 61% 46%;
  transform: rotate(18deg);
}

#servicios .cards-grid > .service-card:nth-child(3)::before {
  width: 186px;
  height: 108px;
  top: 26px;
  right: -54px;
  border-radius: 63% 37% 44% 56% / 46% 59% 41% 54%;
  transform: rotate(-22deg);
}

#servicios .cards-grid > .service-card:nth-child(4)::before {
  width: 146px;
  height: 128px;
  top: -18px;
  left: 10px;
  border-radius: 39% 61% 57% 43% / 55% 41% 59% 45%;
  transform: rotate(12deg);
}

#servicios .cards-grid > .service-card:nth-child(5)::before {
  width: 168px;
  height: 120px;
  bottom: 2px;
  right: -26px;
  border-radius: 57% 43% 52% 48% / 38% 62% 44% 56%;
  transform: rotate(-6deg);
}

#servicios .cards-grid > .service-card:nth-child(6)::before {
  width: 158px;
  height: 134px;
  bottom: -24px;
  left: 26px;
  border-radius: 48% 52% 36% 64% / 59% 36% 64% 41%;
  transform: rotate(24deg);
}

/* Hover: la mancha respira, no se convierte en círculo */
#servicios .service-card:hover::before {
  opacity: 1;
  filter: blur(18px);
  transform: scale(1.04) rotate(var(--blob-rotate, 0deg));
}

#servicios .cards-grid > .service-card:nth-child(1) { --blob-rotate: -10deg; }
#servicios .cards-grid > .service-card:nth-child(2) { --blob-rotate: 18deg; }
#servicios .cards-grid > .service-card:nth-child(3) { --blob-rotate: -22deg; }
#servicios .cards-grid > .service-card:nth-child(4) { --blob-rotate: 12deg; }
#servicios .cards-grid > .service-card:nth-child(5) { --blob-rotate: -6deg; }
#servicios .cards-grid > .service-card:nth-child(6) { --blob-rotate: 24deg; }

@media (max-width: 760px) {
  #servicios .cards-grid > .service-card:nth-child(1)::before,
  #servicios .cards-grid > .service-card:nth-child(2)::before,
  #servicios .cards-grid > .service-card:nth-child(3)::before,
  #servicios .cards-grid > .service-card:nth-child(4)::before,
  #servicios .cards-grid > .service-card:nth-child(5)::before,
  #servicios .cards-grid > .service-card:nth-child(6)::before {
    width: 132px;
    height: 100px;
    filter: blur(14px);
  }
}


/* v42 — replace round isotype and text logo with provided logo */
.brand.brand--image {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

.brand--image .brand__logo {
  display: block;
  width: clamp(170px, 16vw, 230px);
  height: auto;
}

.brand--image .brand__mark,
.brand--image .brand__text {
  display: none !important;
}

@media (max-width: 980px) {
  .brand--image .brand__logo {
    width: clamp(142px, 24vw, 190px);
  }
}

@media (max-width: 760px) {
  .brand--image .brand__logo {
    width: clamp(122px, 32vw, 164px);
  }
}


/* v43 — logos de marcas más grandes, más juntos y compensados */
.logo-collab-band .logo-stream__track {
  gap: clamp(.65rem, 1.55vw, 1.75rem) !important;
  animation-duration: 42s !important;
}

.logo-collab-band .logo-stream__item {
  width: clamp(270px, 18vw, 370px) !important;
  height: clamp(108px, 8.2vw, 148px) !important;
  opacity: .92 !important;
  filter: grayscale(1) invert(1) brightness(1.18) contrast(.96) !important;
}

.logo-collab-band .logo-stream__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.logo-collab-band .logo-stream-label {
  margin-bottom: clamp(.38rem, .9vw, .7rem) !important;
}

.logo-collab-band__inner {
  padding-top: clamp(1.65rem, 3.4vw, 3rem) !important;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.75rem) !important;
}

@media (max-width: 760px) {
  .logo-collab-band .logo-stream__track {
    gap: .7rem !important;
    animation-duration: 46s !important;
  }

  .logo-collab-band .logo-stream__item {
    width: 260px !important;
    height: 108px !important;
  }

  .logo-collab-band__inner {
    padding-top: 1.45rem !important;
    padding-bottom: 1.25rem !important;
  }
}



/* v49 — Mercado del Barranco: orden manual revisado por marca */
.project-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 1.1rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  font-size: .92rem;
  font-weight: 950;
  text-decoration: none;
}

.project-card__media--link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project-card__media--link video {
  width: 100%;
  height: 100%;
  display: block;
}

.back-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 2rem;
  color: rgba(255,255,255,.76);
  font-size: .95rem;
  font-weight: 850;
  text-decoration: none;
}

.market-case-hero {
  min-height: 100vh;
  padding: clamp(118px, 12vw, 170px) max(20px, calc((100vw - var(--max)) / 2)) clamp(58px, 8vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(420px, .94fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(244,255,0,.20), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(244,255,0,.10), transparent 22rem),
    #101010;
  color: #fff;
}

.market-case-hero h1 {
  max-width: 880px;
  color: #fff;
}

.market-case-hero .hero__lead {
  max-width: 700px;
  color: rgba(255,255,255,.72);
}

.market-case-hero__video {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  box-shadow: 0 30px 100px rgba(0,0,0,.32);
  background: #191919;
}

.market-case-hero__video video {
  display: block;
  width: 100%;
  height: auto;
}

.market-case-intro__grid {
  display: grid;
  grid-template-columns: .28fr minmax(0, .72fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.market-case-intro h2 {
  max-width: 900px;
}

.market-case-intro p:last-child {
  max-width: 760px;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}

.market-series-nav {
  padding-top: 0 !important;
}

.market-series-nav__track {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  scrollbar-width: none;
}

.market-series-nav__track::-webkit-scrollbar {
  display: none;
}

.market-series-nav__track a {
  flex: 0 0 auto;
  padding: .74rem 1rem;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
  text-decoration: none;
}

.market-series-wrap {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4.8rem);
  padding: 0 max(20px, calc((100vw - var(--max)) / 2)) clamp(70px, 9vw, 130px);
}

.market-series {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 36px;
  background:
    radial-gradient(circle at 4% 5%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 18rem),
    #111;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 26px 90px rgba(17,17,17,.12);
}

.market-series__copy {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  padding: clamp(1rem, 2vw, 1.8rem);
}

.market-series__number {
  color: var(--brand-accent);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.market-series__copy h2 {
  color: #fff;
  font-size: clamp(2.7rem, 5.4vw, 6.4rem);
  line-height: .82;
  letter-spacing: -.08em;
  margin-bottom: .8rem;
}

.market-series__copy p:not(.eyebrow):not(.market-series__number) {
  max-width: 450px;
  color: rgba(255,255,255,.72);
  font-size: 1.02rem;
  line-height: 1.5;
}

.market-series__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.15rem;
}

.market-series__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .68rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.84);
  font-size: .78rem;
  font-weight: 850;
}

.brand-carousel {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
}

.brand-carousel__track {
  display: flex;
  gap: clamp(.85rem, 1.4vw, 1.25rem);
  overflow-x: auto;
  padding: clamp(.8rem, 1.3vw, 1.1rem);
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(.8rem, 1.3vw, 1.1rem);
  border-radius: 28px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  scrollbar-width: thin;
  scrollbar-color: var(--brand-accent) rgba(255,255,255,.12);
}

.brand-carousel__track::-webkit-scrollbar {
  height: 9px;
}

.brand-carousel__track::-webkit-scrollbar-track {
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}

.brand-carousel__track::-webkit-scrollbar-thumb {
  background: var(--brand-accent);
  border-radius: 999px;
}

.brand-carousel__item {
  flex: 0 0 auto;
  width: min(34vw, 390px);
  margin: 0;
  scroll-snap-align: start;
}

.brand-carousel__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  background: #1d1d1d;
  box-shadow: 0 18px 56px rgba(0,0,0,.28);
}

.brand-carousel__item figcaption {
  padding: .75rem .2rem 0;
  color: var(--brand-accent);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .14em;
}

@media (max-width: 980px) {
  .market-case-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 120px;
  }

  .market-case-intro__grid {
    grid-template-columns: 1fr;
  }

  .market-series {
    grid-template-columns: 1fr;
  }

  .market-series__copy {
    min-height: auto;
  }

  .brand-carousel__item {
    width: min(52vw, 390px);
  }
}

@media (max-width: 680px) {
  .market-case-hero {
    padding-inline: 16px;
    padding-bottom: 46px;
  }

  .market-case-hero__video {
    border-radius: 22px;
  }

  .market-series-wrap {
    padding-inline: 16px;
  }

  .market-series {
    border-radius: 26px;
    padding: .65rem;
  }

  .market-series__copy {
    padding: 1rem;
  }

  .market-series__copy h2 {
    font-size: clamp(2.45rem, 14vw, 4.4rem);
  }

  .market-series-nav__track {
    border-radius: 20px;
  }

  .brand-carousel__track {
    border-radius: 20px;
  }

  .brand-carousel__item {
    width: min(82vw, 390px);
  }

  .brand-carousel__item img {
    border-radius: 18px;
  }
}



/* v50 — Mercado: corrección editorial, hero sin solape y copy SEO */
.market-case-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.72fr) !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center !important;
}

.market-case-hero__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 670px;
}

.market-case-hero h1 {
  max-width: 640px !important;
  font-size: clamp(3.35rem, 7.1vw, 7.1rem) !important;
  line-height: .84 !important;
  letter-spacing: -.075em !important;
  overflow-wrap: normal;
  text-wrap: balance;
}

.market-case-hero .hero__lead {
  max-width: 560px !important;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.market-case-hero__video {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 590px;
  justify-self: end;
}

.market-case-intro {
  padding-top: clamp(56px, 6vw, 92px) !important;
  padding-bottom: clamp(36px, 4vw, 64px) !important;
}

.market-case-intro__grid {
  row-gap: 1rem !important;
  align-items: start !important;
}

.market-case-intro__grid .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.market-case-intro__grid h2 {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: .8rem;
  max-width: 820px !important;
  text-wrap: balance;
}

.market-case-intro__grid p:last-child {
  grid-column: 2;
  grid-row: 2;
  max-width: 720px !important;
  margin: 0;
}

.market-series-nav {
  padding-top: clamp(14px, 2vw, 28px) !important;
  padding-bottom: clamp(36px, 4vw, 60px) !important;
}

@media (max-width: 1120px) {
  .market-case-hero {
    grid-template-columns: 1fr !important;
  }

  .market-case-hero__copy {
    max-width: 780px;
  }

  .market-case-hero h1 {
    max-width: 780px !important;
    font-size: clamp(3.25rem, 10vw, 6.8rem) !important;
  }

  .market-case-hero__video {
    justify-self: start;
    max-width: 760px;
  }
}

@media (max-width: 980px) {
  .market-case-intro__grid .eyebrow,
  .market-case-intro__grid h2,
  .market-case-intro__grid p:last-child {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  .market-case-hero h1 {
    font-size: clamp(2.85rem, 15vw, 4.8rem) !important;
    letter-spacing: -.065em !important;
  }

  .market-case-hero .hero__lead {
    font-size: 1rem;
  }

  .market-case-intro {
    padding-top: 46px !important;
  }
}


/* v51 — auditoría global SEO/layout: menos masa, mejor responsive y hero Mercado sin solape */
:root {
  --max: 1180px;
}

/* Compensar sección de logos y servicios: menos aire muerto, mejor ritmo editorial */
.logo-collab-band {
  margin-top: clamp(1.8rem, 4vw, 3.6rem) !important;
  margin-bottom: 0 !important;
}

.logo-collab-band__inner {
  padding-top: clamp(1.2rem, 2.8vw, 2.2rem) !important;
  padding-bottom: clamp(.75rem, 1.8vw, 1.25rem) !important;
}

.logo-collab-band .logo-stream-label {
  margin-bottom: clamp(.45rem, .85vw, .75rem) !important;
}

.logo-collab-band .logo-stream {
  padding-block: clamp(.15rem, .5vw, .45rem) !important;
}

#servicios.services {
  padding-top: clamp(4rem, 7vw, 6.5rem) !important;
}

.section-heading h2,
.work-preview__content h2,
.ai h2,
.contact h2,
.portfolio-hero__content h1,
.market-case-hero h1,
.market-case-intro h2 {
  text-wrap: balance;
}

/* Servicios: mejor legibilidad y keywords sin parecer bloque de texto */
#servicios .service-card p {
  max-width: 34rem;
}

#servicios .service-card::before {
  opacity: .45 !important;
  filter: blur(14px) !important;
}

/* Home trabajos: mantener impacto sin masa negra excesiva */
.work-preview {
  padding-top: clamp(5rem, 8vw, 8rem) !important;
  padding-bottom: clamp(0rem, 2vw, 1.6rem) !important;
}

.work-preview__grid {
  align-items: center !important;
}

.work__ticker {
  margin-top: clamp(3rem, 5vw, 5.5rem) !important;
}

/* Portfolio general: cards con mejor equilibrio en desktop y mobile */
.project-card--wide {
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .82fr) !important;
}

.project-card__content p:not(.eyebrow) {
  line-height: 1.55;
}

/* Mercado: nueva composición del hero. El vídeo nunca invade el H1. */
.market-case-hero {
  min-height: auto !important;
  padding-top: clamp(118px, 10vw, 150px) !important;
  padding-bottom: clamp(64px, 7vw, 96px) !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.68fr) !important;
  column-gap: clamp(3rem, 6vw, 6rem) !important;
  align-items: center !important;
}

.market-case-hero__copy {
  max-width: 700px !important;
  min-width: 0;
  z-index: 3;
}

.market-case-hero h1 {
  max-width: 690px !important;
  font-size: clamp(3.2rem, 5.8vw, 5.9rem) !important;
  line-height: .88 !important;
  letter-spacing: -.066em !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.market-case-hero .hero__lead {
  max-width: 610px !important;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem) !important;
  line-height: 1.55 !important;
}

.market-case-hero__video {
  max-width: 560px !important;
  justify-self: end !important;
  margin-top: clamp(1.5rem, 5vw, 6rem);
}

.market-case-hero__video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Mercado intro: menos masa vacía y copy útil */
.market-case-intro {
  padding-top: clamp(48px, 5vw, 76px) !important;
  padding-bottom: clamp(28px, 3.4vw, 52px) !important;
}

.market-case-intro__grid {
  display: grid !important;
  grid-template-columns: minmax(160px, .26fr) minmax(0, .74fr) !important;
  column-gap: clamp(2rem, 5vw, 5rem) !important;
  row-gap: .8rem !important;
  align-items: start !important;
}

.market-case-intro__grid .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  margin-top: .7rem;
}

.market-case-intro__grid h2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  max-width: 860px !important;
  margin: 0 !important;
  font-size: clamp(2.6rem, 5.2vw, 5.2rem) !important;
  line-height: .92 !important;
}

.market-case-intro__grid p:last-child {
  grid-column: 2 !important;
  grid-row: 2 !important;
  max-width: 760px !important;
  margin: clamp(1rem, 2vw, 1.35rem) 0 0 !important;
}

.market-series-nav {
  padding-top: clamp(10px, 1.4vw, 22px) !important;
  padding-bottom: clamp(30px, 4vw, 56px) !important;
}

.market-series__copy h2 {
  overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
  .market-case-hero {
    grid-template-columns: 1fr !important;
    row-gap: 2.2rem !important;
  }

  .market-case-hero__copy,
  .market-case-hero h1 {
    max-width: 820px !important;
  }

  .market-case-hero__video {
    justify-self: start !important;
    max-width: min(760px, 100%) !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 980px) {
  .project-card--wide {
    grid-template-columns: 1fr !important;
  }

  .market-case-intro__grid {
    grid-template-columns: 1fr !important;
  }

  .market-case-intro__grid .eyebrow,
  .market-case-intro__grid h2,
  .market-case-intro__grid p:last-child {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #servicios.services {
    padding-top: clamp(3.2rem, 8vw, 5rem) !important;
  }
}

@media (max-width: 680px) {
  .hero--video h1,
  .portfolio-hero__content h1,
  .market-case-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4.25rem) !important;
    line-height: .9 !important;
    letter-spacing: -.055em !important;
  }

  .market-case-hero {
    padding-inline: 16px !important;
    padding-top: 112px !important;
  }

  .market-case-intro {
    padding-top: 42px !important;
  }

  .market-case-intro__grid h2 {
    font-size: clamp(2.15rem, 10vw, 3.6rem) !important;
  }

  .logo-collab-band .logo-stream__item {
    width: clamp(205px, 58vw, 270px) !important;
    height: clamp(82px, 24vw, 112px) !important;
  }
}


/* v52 — optical logo balancing: natural width, consistent height, fixed rhythm */
.logo-collab-band {
  margin-top: clamp(2.1rem, 4.2vw, 3.2rem) !important;
  margin-bottom: clamp(2.1rem, 4.2vw, 3.2rem) !important;
}

.logo-collab-band__inner {
  padding: clamp(1.8rem, 3.4vw, 3rem) 0 clamp(1.9rem, 3.4vw, 3.1rem) !important;
}

.logo-collab-band .logo-stream-label {
  margin-bottom: clamp(.85rem, 1.6vw, 1.2rem) !important;
}

.logo-collab-band .logo-stream__track {
  gap: clamp(2.4rem, 4vw, 4.6rem) !important;
  align-items: center !important;
  animation-duration: 52s !important;
}

.logo-collab-band .logo-stream__item {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  filter: none !important;
}

.logo-collab-band .logo-stream__item img {
  width: auto !important;
  height: clamp(52px, 4.6vw, 76px) !important;
  max-width: min(34vw, 360px) !important;
  object-fit: contain !important;
  opacity: .82 !important;
  filter: none !important;
}

.logo-stream:hover .logo-stream__track,
.logo-stream__item:hover {
  animation-play-state: running !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .logo-collab-band {
    margin-top: 1.8rem !important;
    margin-bottom: 2rem !important;
  }

  .logo-collab-band__inner {
    padding: 1.55rem 0 1.75rem !important;
  }

  .logo-collab-band .logo-stream__track {
    gap: 2rem !important;
    animation-duration: 54s !important;
  }

  .logo-collab-band .logo-stream__item img {
    height: 52px !important;
    max-width: 260px !important;
  }
}



/* v53 — Logos colaboradores: usar tamaño real de archivo, sin normalizar */
.logo-stream__track {
  gap: clamp(1.8rem, 3.2vw, 3.6rem) !important;
  align-items: center !important;
}

.logo-stream__item {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.logo-stream__item img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: unset !important;
  object-position: unset !important;
}

.logo-stream:hover .logo-stream__track,
.logo-stream__item:hover {
  animation-play-state: running !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .logo-stream__track {
    gap: 2rem !important;
  }

  .logo-stream__item {
    width: auto !important;
    height: auto !important;
  }

  .logo-stream__item img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
}



/* v54 — Logos colaboradores: fondo claro para logos originales negros */
.logo-collab-band {
  background:
    radial-gradient(circle at 18% 18%, rgba(244,255,0,.24), transparent 18rem),
    radial-gradient(circle at 82% 76%, rgba(244,255,0,.14), transparent 20rem),
    #f4f0e7 !important;
  border-top: 1px solid rgba(17,17,17,.08) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

.logo-collab-band::before,
.logo-collab-band::after {
  opacity: .16 !important;
}

.logo-collab-band__inner {
  color: #111 !important;
}

.logo-stream-label {
  color: rgba(17,17,17,.56) !important;
}

.logo-stream {
  background: transparent !important;
}

.logo-stream__item {
  opacity: .82 !important;
  filter: none !important;
}

.logo-stream__item img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
}

.logo-stream:hover .logo-stream__track,
.logo-stream__item:hover {
  animation-play-state: running !important;
  opacity: .82 !important;
  filter: none !important;
  transform: none !important;
}



/* v56 — Logo wall estático: sin ticker, sin movimiento, sin EasyPaymentGateway ni Mercado */
.logo-collab-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(244,255,0,.24), transparent 18rem),
    radial-gradient(circle at 88% 80%, rgba(244,255,0,.12), transparent 19rem),
    #f4f0e7 !important;
  border-top: 1px solid rgba(17,17,17,.08) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

.logo-collab-band__inner {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3.4rem);
}

.logo-wall {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.logo-wall .logo-stream-label {
  width: auto !important;
  margin: 0 !important;
  color: rgba(17,17,17,.58) !important;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
}

.logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.logo-wall__item {
  min-height: clamp(88px, 7vw, 118px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 1.7vw, 1.35rem);
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.42);
}

.logo-wall__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 178px;
  max-height: 58px;
  object-fit: contain;
  filter: none !important;
  opacity: .88;
}

/* Clean old moving ticker behavior inside this band */
.logo-collab-band .logo-stream,
.logo-collab-band .logo-stream__track {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 1080px) {
  .logo-wall__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .logo-collab-band__inner {
    width: min(100% - 24px, var(--max));
    padding: 1.7rem 0 2rem;
  }

  .logo-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .logo-wall__item {
    min-height: 92px;
    border-radius: 18px;
    padding: .9rem;
  }

  .logo-wall__item img {
    max-width: 138px;
    max-height: 52px;
  }

  .logo-wall .logo-stream-label {
    font-size: .66rem;
    letter-spacing: .18em;
  }
}



/* v58 — Logo wall curada y jerarquizada */
.logo-wall__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(.7rem, 1.2vw, .95rem) !important;
}

.logo-wall__item {
  min-height: clamp(86px, 6.4vw, 108px) !important;
}

.logo-wall__item img {
  max-width: 170px !important;
  max-height: 54px !important;
}

@media (max-width: 1080px) {
  .logo-wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .logo-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}



/* v59 — Equalización real de logos: assets recortados y presencia visual uniforme */
.logo-wall__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(.8rem, 1.3vw, 1rem) !important;
}

.logo-wall__item {
  min-height: 108px !important;
  padding: 1rem !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.58) !important;
}

.logo-wall__item img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 160px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

@media (max-width: 1080px) {
  .logo-wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .logo-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .logo-wall__item {
    min-height: 94px !important;
    padding: .9rem !important;
  }

  .logo-wall__item img {
    max-width: 136px !important;
    max-height: 42px !important;
  }
}



/* v60 — Logo wall 15 marcas: más grandes, misma escala visual */
.logo-wall__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(.75rem, 1.1vw, .95rem) !important;
}

.logo-wall__item {
  min-height: 128px !important;
  padding: .85rem !important;
  border-radius: 18px !important;
}

.logo-wall__item img {
  max-width: 205px !important;
  max-height: 68px !important;
}

@media (max-width: 1080px) {
  .logo-wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .logo-wall__item img {
    max-width: 190px !important;
    max-height: 62px !important;
  }
}

@media (max-width: 760px) {
  .logo-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .logo-wall__item {
    min-height: 104px !important;
    padding: .75rem !important;
  }

  .logo-wall__item img {
    max-width: 156px !important;
    max-height: 52px !important;
  }
}



/* v61 — Responsive: 5 logos por columna (3 columnas x 5 filas) */
@media (max-width: 760px) {
  .logo-wall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, auto) !important;
    grid-auto-flow: column !important;
    gap: .6rem !important;
  }

  .logo-wall__item {
    min-height: 88px !important;
    padding: .65rem !important;
  }

  .logo-wall__item img {
    max-width: 124px !important;
    max-height: 42px !important;
  }
}