.collaborazioni-page {
  --collab-red: #ee2c3d;
  --collab-background: var(--collab-red);
  --collab-text: #fff;
  --collab-accent: #fff;
  --collab-rule: rgba(255, 255, 255, .7);
  --collab-label-text: var(--collab-red);
  --page-orientation-gap: 24px;
  --page-orientation-top: clamp(132px, 8vw, 150px);
  background: var(--collab-background);
}
html[data-collaboration="brand"] .collaborazioni-page {
  --collab-background: #fff;
  --collab-text: #0a0a0a;
  --collab-accent: var(--collab-red);
  --collab-rule: #d8d8d8;
  --collab-label-text: #fff;
}
.collab-surface {
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-bottom: 100vh;
  padding: 0 clamp(24px, 3vw, 60px);
  background: var(--collab-background);
  color: var(--collab-text);
  transition: background-color 280ms ease, color 280ms ease;
}
.collab-header {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--page-orientation-gap);
  padding-top: clamp(24px, 2.4vw, 48px);
  padding-bottom: 4rem;
}
.collab-logo {
  display: block;
  width: clamp(150px, 12vw, 225px);
}
.collab-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.collab-logo .collab-logo--red,
html[data-collaboration="brand"] .collab-logo--white {
  display: none;
}
html[data-collaboration="brand"] .collab-logo--red {
  display: block;
}
.collab-modes {
  position: absolute;
  top: calc(var(--page-orientation-top) - 10px);
  left: calc((100% - (3 * var(--page-orientation-gap))) / 4 + var(--page-orientation-gap));
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-right: 70px;
  color: var(--collab-accent);
}
.collab-modes button {
  display: grid;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
  font-weight: var(--weight-text);
  cursor: pointer;
}
.collab-modes button > span,
.collab-modes button::after {
  grid-area: 1 / 1;
  text-align: left;
}
.collab-modes button::after {
  content: attr(data-label);
  font-weight: 600;
  visibility: hidden;
}
.collab-modes button[aria-selected="true"] {
  font-weight: 600;
}
.collab-modes button[aria-selected="true"] > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.collab-main { padding-bottom: 0; }
.collab-overview,
.collab-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
}
.collab-main h1,
.collab-main h2,
.collab-main h3,
.collab-main p {
  margin: 0;
}
.collab-main a { color: var(--collab-accent); }
.collab-kicker,
.collab-direction,
.collab-details,
.collab-step-number {
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  font-weight: var(--weight-label);
}
.collab-kicker { color: var(--collab-accent); }
.collab-main h1 {
  margin-top: var(--space-label-title);
  font-size: var(--type-display);
  line-height: var(--leading-display);
  font-weight: 600;
}
.collab-main .collab-intro-copy {
  margin-top: var(--space-title-copy);
  max-width: var(--measure-intro);
  font-size: var(--type-intro);
  line-height: var(--leading-intro);
}
.collab-intro-copy p + p { margin-top: var(--space-paragraph); }
.collab-work-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin-top: var(--space-copy-action);
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
  font-weight: var(--weight-label);
  text-underline-offset: 5px;
}
.collab-details { margin-top: 2rem; }
.collab-capabilities > h2 {
  font-size: var(--type-block);
  line-height: var(--leading-block);
  font-weight: var(--weight-label);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--collab-rule);
}
.collab-capabilities .collab-direction {
  margin: 12px 0 32px;
  color: var(--collab-accent);
}
html[data-collaboration="agenzie"] .collab-direction { display: none; }
.collab-skills {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
}
.collab-skill {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
}
.collab-skill:nth-child(n+3) { margin-top: 32px; }
html[data-collaboration="agenzie"] .collab-skill--brand-only { display: none; }
.collab-skill h3 {
  padding-bottom: 16px;
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
  font-weight: var(--weight-label);
}
.collab-label {
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  background: var(--collab-accent);
  color: var(--collab-label-text);
  transition: background-color 280ms ease, color 280ms ease;
}
.collab-skill ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.collab-skill li {
  padding: 12px 0;
  border-bottom: 1px solid var(--collab-rule);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.collab-process {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--collab-rule);
}
.collab-faq {
  margin: 5rem calc(-1 * clamp(24px, 3vw, 60px)) 0;
  padding: 3rem clamp(24px, 3vw, 60px);
  border-top: 1px solid rgba(255, 255, 255, .7);
  background: var(--collab-red);
  color: #fff;
}
.collab-faq > h2 {
  margin: 0 0 3rem;
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: 600;
}
.collab-faq-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
}
.collab-faq-column { min-width: 0; }
.collab-faq-item { border-top: 1px solid rgba(255, 255, 255, .7); }
.collab-faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .7); }
.collab-faq-item h3 { margin: 0; }
.collab-faq-item button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-label);
  text-align: left;
  cursor: pointer;
}
.collab-faq-item button span::before { content: "+"; }
.collab-faq-item button[aria-expanded="true"] span::before { content: "−"; }
.collab-faq-item button span { justify-self: end; font-size: 1.5rem; line-height: 1; }
.collab-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 180ms ease, opacity 180ms ease;
}
.collab-faq-answer.is-open { grid-template-rows: 1fr; opacity: 1; }
.collab-faq-answer p {
  overflow: hidden;
  margin: 0;
  max-width: var(--measure-copy);
}
.collab-faq-answer.is-open p { padding-bottom: 22px; }
.collab-process > h2 {
  max-width: 14ch;
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: 600;
}
.collab-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.collab-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 28px;
}
.collab-steps li + li {
  padding-top: 28px;
  border-top: 1px solid var(--collab-rule);
}
.collab-step-number { padding-top: 6px; color: var(--collab-accent); }
.collab-steps h3 {
  font-size: var(--type-block);
  line-height: var(--leading-block);
  font-weight: var(--weight-label);
}
.collab-steps p {
  margin-top: 12px;
  max-width: var(--measure-copy);
}
.collab-contact-band {
  margin-top: 0;
  margin-right: calc(-1 * clamp(24px, 3vw, 60px));
  margin-left: calc(-1 * clamp(24px, 3vw, 60px));
  border-bottom: 3px solid var(--collab-red);
}

.collab-main .collab-contact-band .home-marquee {
  color: #fff;
}

.collab-contact-band .home-marquee__rest {
  clip-path: circle(0 at var(--card-pointer-x) var(--card-pointer-y));
}

@media (hover: hover) and (pointer: fine) {
  .collab-contact-band .home-marquee:hover .home-marquee__rest {
    clip-path: circle(145% at var(--card-pointer-x) var(--card-pointer-y));
  }
}

.collab-contact-band .home-marquee:is(:focus-visible, :active) .home-marquee__rest {
  clip-path: circle(145% at var(--card-pointer-x) var(--card-pointer-y));
}
/* Both copies share one grid cell, reserving their natural maximum height. */
.collab-copy {
  display: grid;
  min-width: 0;
}
.collab-copy > [data-copy-mode] {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 280ms ease;
}
html[data-collaboration="agenzie"] [data-copy-mode="brand"],
html[data-collaboration="brand"] [data-copy-mode="agenzie"] {
  visibility: hidden;
  opacity: 0;
}
.footer-in-flow .collab-surface { margin-bottom: 0; }
@media (max-width: 1180px) {
  .collab-overview,
  .collab-process,
  .collab-header { column-gap: var(--page-orientation-gap); }
  .collab-skills { column-gap: 20px; }
}
@media (max-width: 1000px) {
  .collab-overview { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .collab-intro { max-width: 42rem; }
  .collab-modes { gap: 8px 20px; }
}
@media (max-width: 760px) {
  .collab-surface { padding-inline: 20px; margin-bottom: 100svh; }
  .collab-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 22px;
    padding-bottom: 40px;
  }
  .collab-logo { width: 132px; }
  .collab-modes {
    position: static;
    padding-right: 0;
    column-gap: 20px;
  }
  .collab-modes button { font-size: var(--type-meta); line-height: var(--leading-meta); }
  .collab-main { padding-bottom: 0; }
  .collab-process { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .collab-faq {
    margin: 48px -20px 0;
    padding: 40px 20px;
  }
  .collab-faq > h2 { margin-bottom: 32px; }
  .collab-faq-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .collab-faq-column + .collab-faq-column .collab-faq-item:first-child { border-top: 0; }
  .collab-faq-column:first-child .collab-faq-item:last-child { border-bottom: 0; }
  .collab-faq-item button { min-height: 68px; }
  .collab-overview { gap: 48px; }
  .collab-process { margin-top: 48px; }
  .collab-contact-band {
    margin-top: 0;
    margin-right: -20px;
    margin-left: -20px;
  }
  .collab-skills { column-gap: 20px; }
  .collab-label { padding: 6px 8px; }
}
@media (max-width: 379px) {
  .collab-skills { grid-template-columns: minmax(0, 1fr); }
  .collab-skill + .collab-skill { margin-top: 28px; }
  .collab-modes { column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .collab-surface,
  .collab-label,
  .collab-copy > [data-copy-mode] { transition: none; }
  .collab-faq-answer { transition: none; }
  .collab-contact-band .home-marquee__rest { opacity: 0; }
  .collab-contact-band .home-marquee:is(:hover, :focus-visible, :active) .home-marquee__rest { opacity: 1; }
}