/* Compact introduction with real client work; scoped to the Home. */
.home-marketing.section {
  background: var(--white);
  color: var(--ink);
  padding-block: 72px;
  border-block: 1px solid var(--fog);
}
.home-marketing-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.home-marketing .marketing-intro-copy h2.service-heading {
  color: var(--green);
  margin-bottom: 20px;
}
.home-marketing .marketing-intro-copy > .service-subheading {
  color: var(--ink);
  font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.45;
  margin: 0 0 20px;
}
.home-marketing .marketing-intro-copy > p:not(.service-subheading) {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  max-width: 510px;
}
.home-marketing-action { margin-top: 28px; }
.home-marketing-action .button {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--deep);
  padding: 16px 22px;
  font-size: 15px;
  gap: 28px;
}
.home-marketing-action .button:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.home-marketing-action > p {
  margin-top: 12px;
  color: var(--graphite);
  font-size: 12px;
  line-height: 1.6;
}
.home-marketing-work { min-width: 0; margin: 0; }
.home-marketing-collage {
  display: block;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.45;
  max-height: 430px;
}
.home-marketing-collage::before {
  content: "";
  position: absolute;
  inset: 11% 1% 6%;
  z-index: -1;
  background: var(--fog);
  border-radius: 70px 16px 70px 16px;
}
.home-marketing-piece {
  position: absolute;
  display: block;
  width: 34%;
  padding: 6px;
  background: var(--white);
  border: 1px solid #285a471a;
  border-radius: 5px;
  box-shadow: 0 10px 24px #25302c1c;
  transition: transform .2s ease;
}
.home-marketing-piece img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--fog);
}
.home-marketing-piece > span {
  display: block;
  padding: 7px 2px 2px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--graphite);
}
.home-marketing-piece--cayo {
  left: 2%;
  top: 10%;
  transform: rotate(-8deg);
}
.home-marketing-piece--jubilarse {
  left: 33%;
  top: 18%;
  z-index: 2;
  transform: rotate(3deg);
}
.home-marketing-piece--puerto {
  right: 0;
  top: 2%;
  transform: rotate(8deg);
}
.home-marketing-open {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 9px 14px;
  border: 1px solid var(--copper);
  border-radius: 4px;
  background: var(--white);
  color: var(--copper-ink);
  font-size: 12px;
  font-weight: 600;
}
.home-marketing-work figcaption {
  margin-top: 16px;
  color: var(--graphite);
  font-size: 12px;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .home-marketing-collage:hover .home-marketing-piece--cayo { transform: translateY(-5px) rotate(-10deg); }
  .home-marketing-collage:hover .home-marketing-piece--jubilarse { transform: translateY(-7px) rotate(1deg); }
  .home-marketing-collage:hover .home-marketing-piece--puerto { transform: translateY(-5px) rotate(10deg); }
}
@media (max-width: 1050px) {
  .home-marketing-grid { gap: 36px; }
  .home-marketing-collage { aspect-ratio: 1.3; }
}
@media (max-width: 760px) {
  .home-marketing.section { padding-block: 56px; }
  .home-marketing-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-marketing .marketing-intro-copy > .service-subheading { font-size: 21px; }
  .home-marketing-action { margin-top: 24px; }
  .home-marketing-action .button { width: 100%; max-width: 360px; }
  .home-marketing-collage { aspect-ratio: 1.4; max-width: 560px; margin-inline: auto; }
  .home-marketing-piece { padding: 4px; }
  .home-marketing-piece > span { font-size: 9px; padding-top: 6px; }
  .home-marketing-work figcaption { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-marketing-piece { transition: none; }
  .home-marketing-collage:hover .home-marketing-piece--cayo { transform: rotate(-8deg); }
  .home-marketing-collage:hover .home-marketing-piece--jubilarse { transform: rotate(3deg); }
  .home-marketing-collage:hover .home-marketing-piece--puerto { transform: rotate(8deg); }
}