/* Squadra Brasil — Trade / Field MKT */

.page-trade {
  background: var(--blue);
}

/* The official Trade/Field lockup is not available as a standalone asset.
   Reuse the original Squadra mark and typeset the page-specific wordmark. */
.brand--trade-field {
  min-width: 0;
  line-height: normal;
}

.trade-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  color: var(--blue);
  text-transform: uppercase;
}

.trade-brand__mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
}

.trade-brand__mark img {
  max-width: none;
  height: auto;
}

.trade-brand__type {
  display: grid;
  justify-items: start;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 900;
  line-height: .76;
}

.trade-brand__type strong,
.trade-brand__type b,
.trade-brand__type em {
  display: block;
  margin: 0;
  font: inherit;
  white-space: nowrap;
}

.trade-brand__type small {
  font: inherit;
  font-size: .34em;
  vertical-align: .38em;
}

.trade-brand__type em {
  justify-self: center;
  letter-spacing: .62em;
  line-height: 1;
  translate: .31em 0;
}

.trade-brand--header {
  gap: 5px;
}

.trade-brand--header .trade-brand__mark {
  width: 52px;
  height: 62px;
}

.trade-brand--header .trade-brand__mark img {
  width: 193px;
}

.trade-brand--header .trade-brand__type {
  font-size: 20px;
}

.trade-brand--header .trade-brand__type em {
  margin-top: 5px;
  font-size: 7px;
}

.trade-brand--footer {
  gap: 8px;
  justify-content: center;
  color: var(--white);
}

.trade-brand--footer .trade-brand__mark {
  width: 57px;
  height: 95px;
}

.page-trade .trade-brand--footer .trade-brand__mark img {
  left: 0;
  width: 215px;
  margin: 0;
}

.trade-brand--footer .trade-brand__type {
  font-size: 30px;
}

.trade-brand--footer .trade-brand__type em {
  margin-top: 8px;
  font-size: 11px;
}

.page-trade .footer__brand .trade-brand--footer {
  margin: 0 auto 12px;
}

.trade-opening {
  --trade-hero-height: clamp(330px, 22.8vw, 438px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--ink) 0,
    var(--ink) var(--trade-hero-height),
    var(--blue) var(--trade-hero-height),
    var(--blue) 100%
  );
}

.trade-opening__orb {
  position: absolute;
  z-index: 1;
  top: max(-110px, -5.73vw);
  left: 50%;
  display: block;
  width: min(89.43vw, 1717px);
  max-width: none;
  height: auto;
  opacity: .8;
  mix-blend-mode: overlay;
  pointer-events: none;
  user-select: none;
  translate: -50% 0;
  transform-origin: 50% 50%;
  animation: trade-orb-spin 180s linear infinite;
}

.trade-hero {
  position: relative;
  z-index: 2;
  min-height: var(--trade-hero-height);
  overflow: hidden;
  color: var(--white);
}

.trade-hero__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100% - 48px));
  text-align: center;
  translate: -50% -50%;
}

.trade-hero__copy p {
  margin: 0;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(5.6rem, 10.2vw, 11.5rem);
  font-weight: 600;
  line-height: .78;
  text-transform: uppercase;
  animation: hero-copy-in 900ms 100ms cubic-bezier(.2, .75, .25, 1) both;
}

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

.trade-hero__arrows {
  position: absolute;
  z-index: 4;
  top: calc(50% - clamp(88px, 5.3vw, 102px));
  left: calc(50% - min(164px, 18vw));
  width: clamp(92px, 8.45vw, 162px);
  animation: hero-float-x 5.1s ease-in-out infinite;
}

.trade-hero__arrows .decor-loader__track i {
  background: #a600f4;
}

.trade-hero__dots {
  position: absolute;
  z-index: 4;
  top: calc(50% + clamp(68px, 4.8vw, 92px));
  left: 50%;
  display: flex;
  gap: 9px;
  translate: -50% 0;
  animation: hero-float-x-reverse 5.8s ease-in-out infinite;
}

.trade-hero__dots i {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  animation: hero-dot-pulse 1.8s ease-in-out infinite;
}

.trade-hero__dots i:nth-child(2) { animation-delay: 120ms; }
.trade-hero__dots i:nth-child(3) { animation-delay: 240ms; }
.trade-hero__dots i:nth-child(4) { animation-delay: 360ms; }

.trade-banner {
  position: relative;
  z-index: 4;
  height: clamp(220px, 20.9vw, 401px);
  overflow: hidden;
  background: #111;
}

.trade-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 45%, rgba(0, 0, 0, .08));
  pointer-events: none;
}

.trade-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.trade-showcase {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: var(--white);
}

.trade-showcase::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .29;
  background-image: radial-gradient(rgba(6, 14, 118, .7) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
  pointer-events: none;
}

.trade-showcase__inner {
  position: relative;
  z-index: 3;
  width: min(1040px, calc(100% - 48px));
  padding: clamp(92px, 6.4vw, 123px) 0 clamp(165px, 11vw, 211px);
  margin-inline: auto;
}

.trade-overview {
  position: relative;
  min-height: 325px;
}

.trade-overview__title {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 0;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 4.25vw, 5.1rem);
  font-weight: 600;
  line-height: .8;
  text-align: left;
  text-transform: uppercase;
  translate: -50% 0;
}

.js .trade-overview__title.reveal {
  transform: translateY(22px);
}

.js .trade-overview__title.reveal.is-visible {
  transform: translateY(0);
}

.trade-overview__title span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.trade-overview__title strong {
  color: var(--white);
  font: inherit;
}

.trade-overview__dots {
  position: absolute;
  top: 16%;
  left: 0;
  display: flex;
  width: 71px;
  height: 85px;
  gap: 9px;
  animation: trade-accent-float 6.3s ease-in-out infinite alternate;
}

.trade-dot-column {
  --trade-dot-color: var(--white);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
}

.trade-dot-column:nth-child(even) {
  translate: 0 25%;
}

.trade-dot-column i {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--trade-dot-color);
  animation: trade-dot-chase 1.65s ease-in-out infinite both;
}

.trade-dot-column--white { --trade-dot-color: var(--white); --trade-column-delay: 0ms; }
.trade-dot-column--cyan { --trade-dot-color: var(--cyan); --trade-column-delay: 210ms; }
.trade-dot-column--yellow { --trade-dot-color: #f5de0b; --trade-column-delay: 420ms; }
.trade-dot-column--pink { --trade-dot-color: var(--pink); --trade-column-delay: 630ms; }

.trade-dot-column i:nth-child(1) { animation-delay: calc(var(--trade-column-delay) + 0ms); }
.trade-dot-column i:nth-child(2) { animation-delay: calc(var(--trade-column-delay) + 105ms); }
.trade-dot-column i:nth-child(3) { animation-delay: calc(var(--trade-column-delay) + 210ms); }
.trade-dot-column i:nth-child(4) { animation-delay: calc(var(--trade-column-delay) + 315ms); }

.trade-overview__rings {
  position: absolute;
  top: 23%;
  right: -24px;
  width: min(19vw, 365px);
  animation: hero-float-x 7.4s ease-in-out infinite reverse;
}

.trade-overview__rings > i {
  border-color: var(--pink);
}

.trade-case {
  position: relative;
  width: 100%;
  margin: 0 auto clamp(125px, 8.5vw, 164px);
  text-align: center;
}

.trade-case:last-child {
  margin-bottom: 0;
}

.trade-case--field {
  margin-bottom: clamp(95px, 5.73vw, 110px);
}

.trade-case__media {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.trade-case__media img {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(4, 8, 73, .14);
}

.trade-case__media--field {
  aspect-ratio: 1040 / 455;
  margin-bottom: clamp(38px, 3vw, 58px);
}

.trade-case__truck {
  top: 14.5%;
  left: 2.2%;
  width: 56.73%;
}

.trade-case__mascot {
  top: 0;
  right: 0;
  width: 31.64%;
}

.trade-case__media--actions {
  aspect-ratio: 1040 / 541;
  margin-bottom: clamp(38px, 3vw, 58px);
}

.trade-case--actions {
  margin-bottom: clamp(100px, 6.25vw, 120px);
}

.trade-case__wheel {
  top: 0;
  left: 0;
  width: 29.23%;
}

.trade-case__aromaty {
  top: 8.3%;
  right: 0;
  width: 56.73%;
}

.trade-case__media--intelligence {
  width: min(81.73%, 850px);
  aspect-ratio: 850 / 486;
  margin-bottom: clamp(38px, 3vw, 58px);
}

.trade-case__barilla {
  top: 7.2%;
  left: 16px;
  width: 40.24%;
}

.trade-case__nauterra {
  top: 0;
  right: 0;
  width: 42.94%;
}

.trade-case__copy {
  position: relative;
  width: min(760px, 100%);
  margin-inline: auto;
}

.trade-case__atom {
  position: absolute;
  top: -32px;
  left: -210px;
  width: 100px;
  height: auto;
  opacity: .9;
  animation: trade-atom-drift 7.1s ease-in-out infinite alternate;
}

.trade-case h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.45rem, 1.85vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.trade-case p {
  max-width: 760px;
  margin: 17px auto 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.9rem, 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
}

@keyframes trade-orb-spin {
  to { rotate: 360deg; }
}

@keyframes trade-accent-float {
  from { transform: translate3d(-5px, 0, 0); }
  to { transform: translate3d(7px, -8px, 0); }
}

@keyframes trade-dot-chase {
  0%, 68%, 100% { opacity: .32; transform: translateY(-3px) scale(.78); }
  30%, 44% { opacity: 1; transform: translateY(2px) scale(1); }
}

@keyframes trade-atom-drift {
  from { transform: translate3d(-4px, 0, 0) rotate(-2deg); }
  to { transform: translate3d(6px, -9px, 0) rotate(2deg); }
}

@media (max-width: 900px) {
  .page-trade .site-header__inner {
    gap: 12px;
  }

  .page-trade .brand--trade-field {
    flex: 1 1 auto;
    max-width: calc(100% - 60px);
    overflow: hidden;
  }

  .page-trade .trade-brand--header {
    max-width: 100%;
    flex-shrink: 1;
  }

  .page-trade .menu-button {
    display: grid;
    flex: 0 0 44px;
    margin-left: auto;
  }

  .trade-opening { --trade-hero-height: 360px; }

  .trade-opening__orb {
    top: -54px;
    width: 900px;
  }

  .trade-hero__copy p {
    font-size: clamp(5.4rem, 15vw, 8rem);
  }

  .trade-hero__arrows {
    top: calc(50% - 95px);
    left: calc(50% - 135px);
  }

  .trade-hero__dots {
    top: calc(50% + 78px);
  }

  .trade-banner {
    height: min(39vw, 320px);
  }

  .trade-showcase__inner {
    width: min(100% - 36px, 760px);
  }

  .trade-overview__dots {
    left: 2%;
    width: 56px;
    height: 68px;
    gap: 7px;
  }

  .trade-overview__rings {
    right: -3%;
    width: min(30vw, 270px);
  }

  .trade-case__atom {
    left: -38px;
    width: 78px;
  }
}

@media (max-width: 680px) {
  .trade-showcase__inner {
    padding-top: 76px;
  }

  .trade-overview {
    display: grid;
    min-height: 400px;
    align-items: start;
  }

  .trade-overview__title {
    position: relative;
    top: auto;
    left: auto;
    justify-self: center;
    font-size: clamp(3rem, 13vw, 4.5rem);
    translate: none;
  }

  .trade-overview__dots {
    top: 190px;
    left: 5%;
  }

  .trade-overview__rings {
    top: 180px;
    right: 2%;
    width: min(48vw, 260px);
  }

  .trade-case {
    margin-bottom: 105px;
  }

  .trade-case__atom {
    display: none;
  }
}

@media (max-width: 520px) {
  .trade-opening__orb {
    top: 18px;
    width: 690px;
  }

  .trade-hero__copy p {
    font-size: clamp(5.2rem, 25vw, 7.8rem);
  }

  .trade-hero__arrows {
    top: calc(50% - 94px);
    left: calc(50% - 132px);
    width: 102px;
  }

  .trade-hero__dots {
    top: calc(50% + 76px);
  }

  .trade-banner {
    height: 220px;
  }

  .trade-overview {
    min-height: 360px;
  }

  .trade-overview__title {
    max-width: 100%;
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .trade-overview__dots {
    top: 182px;
    width: 50px;
    height: 61px;
    gap: 6px;
  }

  .trade-overview__rings {
    top: 180px;
  }

  .trade-case__media {
    display: grid;
    width: min(100%, 390px);
    height: auto;
    aspect-ratio: auto;
    gap: 18px;
    justify-items: center;
  }

  .trade-case__media img {
    position: static;
  }

  .trade-case__media--field,
  .trade-case__media--actions,
  .trade-case__media--intelligence {
    margin-bottom: 36px;
  }

  .trade-case__truck,
  .trade-case__aromaty {
    width: 100%;
  }

  .trade-case__mascot,
  .trade-case__barilla,
  .trade-case__nauterra,
  .trade-case__wheel {
    width: min(82%, 340px);
  }

  .trade-case h3 {
    font-size: 1.35rem;
  }

  .trade-case p {
    font-size: .9rem;
  }
}