/* Pomar ABM — fonte única dos novos ajustes visuais exclusivos da página de
   Account-Based Marketing. A partir deste ponto, toda nova configuração de
   formatação desta página deve ser adicionada aqui, não no HTML. */
:root {
  --pm-abm-coral: var(--brand-abm, #FD6141);
  --pm-abm-destaque: linear-gradient(100deg, #FD6141 0%, #FDA03C 52%, #00C9AC 100%);
  --pm-hero-faixa-cor: var(--turquoise, #00C9AC);
}

/* Destaques tipográficos da página: um único gradiente, aplicado somente aos
   glifos — sem preenchimento retangular atrás do texto. */
main .pm-hero-destaque,
main .pm-tese-titulo strong {
  background-color: transparent !important;
  background-image: var(--pm-abm-destaque) !important;
  background-repeat: no-repeat;
  /* Folga ótica para o antialiasing da última letra não encostar no limite
     vertical da imagem de fundo. */
  background-size: calc(100% + 2px) 100%;
  background-position: left center;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

main #hero-title .pm-hero-destaque {
  padding-inline-end: .1em;
  margin-inline-end: -.1em;
  background-image: linear-gradient(90deg, #FD6141 0%, #FDA03C 100%) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Segundo menu: mesma linguagem do título de Account-Based Marketing no menu
   de Especialidades — Montserrat light, 18px e coral da página ABM. */
#pm-subnav .pm-subnav-marca {
  display: flex;
  flex: none;
  align-items: center;
}

/* O desenho das listras vem de .pm-faixa, no design system. No desktop ele
   ocupa um único quadrado na borda da tela, sem avançar até o container. */
#pm-subnav .pm-subnav-faixa {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pm-subnav-h);
  height: var(--pm-subnav-h);
  color: var(--pm-abm-coral);
  opacity: .88;
}

#pm-subnav .pm-subnav-titulo {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  line-height: 1.375 !important;
  color: var(--pm-abm-coral) !important;
  transform: none;
}

@media (min-width: 1024px) {
  #pm-subnav .pm-subnav-marca {
    padding-left: var(--fib-2, 13px);
  }

  #pm-subnav .pm-subnav-faixa {
    display: block;
  }
}

/* O fundo da hero é uma única camada fixa. As seções seguintes, todas com
   superfície própria, a cobrem naturalmente quando a abertura termina. */
#top #hero-bg-wrapper {
  position: fixed !important;
  background-color: #0C1D27;
  contain: paint;
}

/* A coluna usa o mesmo padrão .pm-faixa do design system e toma a altura
   completa da hero. A largura deriva da barra secundária para manter a mesma
   proporção nos dois gestos gráficos. As listras turquesa vazadas ocupam os
   80% superiores; o coral chapado cobre os 20% finais sem alterar a geometria. */
#top .pm-hero-faixa {
  display: none;
  position: absolute;
  top: 0;
  right: var(--pm-subnav-h);
  bottom: 0;
  z-index: 8;
  width: var(--pm-subnav-h);
  color: var(--pm-hero-faixa-cor);
  background-color: transparent;
  opacity: 1;
  pointer-events: none;
}

#top .pm-hero-faixa::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  bottom: 0;
  height: 20%;
  background-color: var(--pm-abm-coral);
}

/* A página ABM usa o submenu para comunicar a posição de leitura. O trilho
   linear do header compartilhado seria um segundo indicador concorrente; ele
   é removido apenas nesta página, sem tocar na lógica de estado do submenu. */
body[data-menu-logo="abm"] #pm-progress-track {
  display: none !important;
}

@media (min-width: 1024px) {
  #top .pm-hero-faixa {
    display: block;
  }
}

#hero-mobile-bg {
  display: none;
}

@media (max-width: 1023px) {
  #hero-mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
  }

  #hero-mobile-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }

  #hero-mobile-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(12, 29, 39, .40) 0%,
      rgba(12, 29, 39, .55) 42%,
      #0C1D27 74%,
      #0C1D27 100%);
    pointer-events: none;
  }

  #top #hero-overlay {
    display: none;
  }
}

/* Funil de Demanda: imagem de apoio simples, atrás do conteúdo da seção. */
#solucao .pm-funil-imagem {
  position: absolute;
  top: calc(-1 * min(2.27vw, 2.17rem));
  /* Ampliação de 75% a partir do centro: metade do acréscimo avança para
     cada lado, com a parte direita sangrando até a borda da seção. */
  right: calc(-1 * min(17.25vw, 16.5rem));
  z-index: 0;
  width: min(80.5vw, 77rem);
  pointer-events: none;
}

#solucao .pm-funil-imagem img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Dissolução curta só na borda esquerda: completa em 15% da imagem. */
#solucao .pm-funil-imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #F2F1F0 0%, #F2F1F0 5%, rgba(242, 241, 240, 0) 25%),
    linear-gradient(to bottom, rgba(242, 241, 240, 0) 65%, #F2F1F0 100%);
  pointer-events: none;
}

/* Bloco de abertura do Funil de Demanda. */
#solucao .pm-funil-abertura {
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  #solucao .pm-funil-abertura { margin-top: 3rem; }
}

#solucao { overflow: hidden !important; }

/* Véu superior sobre a imagem: turquesa claro que desaparece em transparência,
   preservando o bloco de conteúdo acima dele. */
#solucao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 105%;
  height: 50%;
  pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(0, 201, 172, .28) 0%, rgba(0, 201, 172, .14) 38%, rgba(0, 201, 172, 0) 78%);
}

@media (max-width: 760px) {
  #solucao .pm-funil-imagem {
    width: 72%;
    right: 0;
    top: 0;
  }
}

/* Cenários: mesma construção da imagem do Funil de Demanda, dissolvida em
   azul-petróleo. A imagem entra pelo canto superior direito e fica visível da
   metade em diante; à esquerda, o fade preserva a área de leitura. */
#desafios .pm-cenarios-imagem {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(80.5vw, 77rem);
  pointer-events: none;
}

#desafios .pm-cenarios-imagem img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1);
}

#desafios .pm-cenarios-imagem::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      #0C1D27 0%,
      #0C1D27 28%,
      rgba(12, 29, 39, .55) 45%,
      rgba(12, 29, 39, .18) 58%,
      rgba(12, 29, 39, 0) 66.667%),
    linear-gradient(to bottom, rgba(12, 29, 39, 0) 65%, #0C1D27 100%);
  content: "";
  pointer-events: none;
}

#desafios { overflow: hidden !important; }

@media (max-width: 760px) {
  #desafios .pm-cenarios-imagem {
    top: 0;
    right: 0;
    width: 72%;
  }
}

/* Emendas entre seções: os fundos se encontram sem borda dura e os brilhos
   começam de forma progressiva. O escopo em main mantém o rodapé e os
   componentes compartilhados intactos. */
main #desafios {
  border-bottom: 0 !important;
}

main #resultados-estaticos {
  margin-top: -1px;
}

/* Continuação dark da tese: a seção operacional começa na mesma superfície
   petróleo do Ponto de Vista, sem tocar na imagem ou nos gradientes daquele
   bloco. O recuo negativo elimina qualquer fio subpixel entre as seções. */
main #resultados {
  margin-top: -1px;
  padding-top: clamp(4.5rem, 8vw, 8rem) !important;
  overflow: hidden;
  border-top: 0 !important;
  background: #0C1D27 !important;
  color: #F2F1F0;
}

/* Continua, dentro da nova seção, a mesma auréola que já termina o Ponto de
   Vista. A geometria espelha o pseudo-elemento existente acima, sem mover ou
   modificar a imagem/fundo original. */
main #resultados::before {
  content: "";
  position: absolute;
  top: -20rem;
  right: -18rem;
  z-index: 0;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 85, 163, .2), transparent 68%);
  pointer-events: none;
}

main #resultados-titulo {
  color: #F2F1F0 !important;
}

main #resultados-titulo span {
  color: var(--turquoise, #00C9AC) !important;
}

main #resultados .pm-cx-host {
  border-color: rgba(242, 241, 240, .12) !important;
  background-color: #122937 !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .16);
}

main #resultados .pm-cx-host:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

main #resultados .pm-cx-host h3 {
  color: #F2F1F0 !important;
}

main #resultados .pm-cx-host p {
  color: rgba(242, 241, 240, .72) !important;
}

main #resultados .pm-cx-host iconify-icon,
main #resultados .pm-cx-host .pm-cruzeta {
  color: var(--turquoise, #00C9AC) !important;
}

main #resultados::after {
  background: radial-gradient(circle, rgba(247, 85, 163, .15), transparent 68%) !important;
}

/* Diferenciais: mosaico editorial reutilizável. Cada imagem ocupa uma camada
   sem borda e se dissolve na superfície petróleo por máscara; o véu central
   garante uma área 100% opaca para a leitura. */
main #equipe {
  --pm-equipe-base-quadro: clamp(18rem, 22vw, 21rem);
  padding-top: clamp(6rem, 10vw, 10rem);
  padding-bottom: calc(var(--pm-equipe-base-quadro) + clamp(4rem, 6vw, 5rem));
  background: var(--petrol, #122937) !important;
}

main #equipe::before {
  content: none !important;
}

main #equipe .pm-equipe-mosaico {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

main #equipe .pm-equipe-mosaico-imagem {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}

main #equipe .pm-equipe-mosaico-imagem--esquerda {
  top: 0;
  left: 0;
  width: min(48vw, 46rem);
  height: 62%;
  background-image:
    linear-gradient(135deg, rgba(18, 41, 55, .08), rgba(18, 41, 55, .72)),
    url("wheel-side-3.jpg");
  background-position: center 22%;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 0 0, #000 0 36%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 0 0, #000 0 36%, transparent 100%);
}

main #equipe .pm-equipe-mosaico-imagem--direita {
  top: 0;
  right: 0;
  width: min(48vw, 46rem);
  height: 62%;
  background-image:
    linear-gradient(225deg, rgba(18, 41, 55, .06), rgba(18, 41, 55, .74)),
    url("wheel-side-4.jpg");
  background-position: center 34%;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 100% 0, #000 0 36%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 100% 0, #000 0 36%, transparent 100%);
}

main #equipe .pm-equipe-mosaico-imagem--base {
  bottom: -1px;
  left: 50%;
  width: calc(var(--pm-equipe-base-quadro) * 3);
  height: var(--pm-equipe-base-quadro);
  transform: translateX(-50%);
  background-image:
    linear-gradient(to bottom,
      var(--petrol, #122937) 0%,
      rgba(18, 41, 55, .72) 24%,
      rgba(18, 41, 55, .12) 58%,
      transparent 100%),
    url("marketing-industrial-growth.webp");
  background-position: center;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0 6%,
    rgba(0, 0, 0, .08) 17%,
    rgba(0, 0, 0, .34) 26%,
    #000 33.333% 66.667%,
    rgba(0, 0, 0, .34) 74%,
    rgba(0, 0, 0, .08) 83%,
    transparent 94% 100%);
  mask-image: linear-gradient(to right,
    transparent 0 6%,
    rgba(0, 0, 0, .08) 17%,
    rgba(0, 0, 0, .34) 26%,
    #000 33.333% 66.667%,
    rgba(0, 0, 0, .34) 74%,
    rgba(0, 0, 0, .08) 83%,
    transparent 94% 100%);
}

main #equipe .pm-equipe-mosaico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 48% 52% at 50% 43%,
    var(--petrol, #122937) 0%,
    var(--petrol, #122937) 52%,
    rgba(18, 41, 55, .9) 62%,
    rgba(18, 41, 55, .42) 75%,
    rgba(18, 41, 55, .12) 88%,
    transparent 100%);
}

main #equipe .pm-equipe-container {
  position: relative;
  z-index: 1;
  width: min(100%, 62rem);
}

main #equipe .pm-equipe-cabecalho {
  justify-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

main #equipe .pm-equipe-cabecalho > div {
  width: 100%;
}

main #equipe .pm-equipe-principio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  margin-inline: auto;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0;
}

main #equipe .pm-diferencial {
  position: relative;
  z-index: 1;
  max-width: 31rem;
  text-shadow: 0 2px 18px rgba(12, 29, 39, .76);
}

main #equipe .pm-diferencial--branding {
  grid-column: 1 / span 5;
  grid-row: 1;
  justify-self: start;
  text-align: left;
}

main #equipe .pm-diferencial--rigor {
  grid-column: 8 / -1;
  grid-row: 1;
  justify-self: end;
  margin-top: clamp(4rem, 6vw, 6rem);
  text-align: right;
}

main #equipe .pm-diferencial--implicacao {
  grid-column: 4 / span 6;
  grid-row: 2;
  justify-self: center;
  max-width: 36rem;
  margin-top: clamp(9rem, 13vw, 13rem);
  text-align: center;
}

main #equipe .pm-diferencial-titulo {
  margin: 0 0 .7rem;
  color: var(--turquoise, #00C9AC);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.35;
}

main #equipe .pm-diferencial p {
  max-width: none;
  margin: 0;
  color: rgba(242, 241, 240, .78);
}

@media (max-width: 767px) {
  main #equipe {
    --pm-equipe-base-quadro: min(64vw, 16rem);
    padding-top: 5.5rem;
    padding-bottom: calc(var(--pm-equipe-base-quadro) + 2.5rem);
  }

  main #equipe .pm-equipe-mosaico-imagem--esquerda,
  main #equipe .pm-equipe-mosaico-imagem--direita {
    width: 72%;
    height: 38%;
    opacity: .72;
  }

  main #equipe .pm-equipe-mosaico-imagem--esquerda {
    left: -24%;
  }

  main #equipe .pm-equipe-mosaico-imagem--direita {
    right: -24%;
  }

  main #equipe .pm-equipe-mosaico-imagem--base {
    bottom: -1px;
    width: calc(var(--pm-equipe-base-quadro) * 3);
    height: var(--pm-equipe-base-quadro);
    background-position: center;
  }

  main #equipe .pm-equipe-principio {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  main #equipe .pm-diferencial {
    width: 88%;
    max-width: 24rem;
  }

  main #equipe .pm-diferencial--branding {
    align-self: flex-start;
    text-align: left;
  }

  main #equipe .pm-diferencial--rigor {
    align-self: flex-end;
    margin-top: 3.5rem;
    text-align: right;
  }

  main #equipe .pm-diferencial--implicacao {
    align-self: center;
    margin-top: 6rem;
    text-align: center;
  }

  main #equipe .pm-diferencial-titulo {
    font-size: 1.05rem;
  }
}

/* O centro do radial fica próximo do topo da seção. A máscara faz o brilho
   nascer gradualmente depois da emenda, sem recortar a auréola na horizontal. */
main #resultados-estaticos .pm-tese-abertura::before {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 48%,
    rgba(0, 0, 0, .18) 54%,
    #000 68%,
    #000 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 48%,
    rgba(0, 0, 0, .18) 54%,
    #000 68%,
    #000 100%);
}

/* Adequação entrega a sua cor ao FAQ sem a antiga borda divisória; a mudança
   para o cinza do FAQ acontece dentro da abertura da própria seção. */
main #adequacao {
  border-bottom: 0 !important;
}

main #perguntas {
  border-top: 0 !important;
  background: linear-gradient(to bottom,
    #FAF9F6 0,
    #F2F1F0 clamp(7rem, 12vw, 12rem),
    #F2F1F0 100%) !important;
}

/* FAQ: replica a construção da imagem do Funil de Demanda, adaptada à
   posição inferior-direita desta seção. O asset preserva a escala responsiva
   e se dissolve no off-white pela esquerda e pelo topo. */
#perguntas .pm-faq-imagem {
  position: absolute;
  bottom: calc(-1 * min(2.27vw, 2.17rem));
  right: calc(-1 * min(17.25vw, 16.5rem));
  z-index: 0;
  width: min(80.5vw, 77rem);
  pointer-events: none;
}

#perguntas .pm-faq-imagem img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

#perguntas .pm-faq-imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #F2F1F0 0%, #F2F1F0 5%, rgba(242, 241, 240, 0) 25%),
    linear-gradient(to bottom, #F2F1F0 0%, #F2F1F0 5%, rgba(242, 241, 240, 0) 25%);
  pointer-events: none;
}

/* Caixa branca reutilizável para blocos editoriais sobre fundos off-white.
   As variantes acrescentam apenas um sopro de cor no canto inferior direito,
   sem linhas de categoria ou perda da predominância branca. */
main .pm-white-box {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid rgba(18, 41, 55, .10);
  border-radius: .125rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .25s ease;
}

main .pm-white-box:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, .10),
    0 2px 4px -2px rgba(0, 0, 0, .10);
}

main .pm-white-box--turquoise {
  background-image: radial-gradient(circle at 100% 100%,
    rgba(0, 201, 172, .09) 0%,
    rgba(0, 201, 172, .035) 34%,
    rgba(0, 201, 172, 0) 66%);
}

main .pm-white-box--orange {
  background-image: radial-gradient(circle at 100% 100%,
    rgba(253, 160, 60, .09) 0%,
    rgba(253, 160, 60, .035) 34%,
    rgba(253, 160, 60, 0) 66%);
}

@media (max-width: 760px) {
  #perguntas .pm-faq-imagem {
    width: 72%;
    right: 0;
    bottom: 0;
  }
}

/* CASE TEEE · Galeria manual em baralho
   Sete de quatorze cartas compartilham o mesmo centro; o JS troca data-position para
   que o destaque e as três abas de cada lado transitem sem rotação. */
main #pm-teee-art-gallery {
  --pm-gallery-ink: #122937;
  --pm-gallery-turquoise: #00A88F;
  --pm-gallery-bright: #00C9AC;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #F2F1F0;
}

main #pm-teee-art-gallery .pm-teee-gallery-heading {
  transform: translateY(-40px);
}

main #pm-teee-art-gallery .pm-teee-gallery-stage {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  column-gap: .5rem;
  width: calc(100% + 3rem);
  margin: clamp(2rem, 4vw, 4rem) 0 0 -1.5rem;
}

main #pm-teee-art-gallery .pm-teee-deck {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: clamp(20rem, 34.4vw, 31.2rem);
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

main #pm-teee-art-gallery .pm-teee-card {
  position: absolute;
  isolation: isolate;
  top: 0;
  left: 50%;
  display: block;
  width: min(36.8vw, 36rem);
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 41, 55, .28);
  border-radius: 0;
  /* Sem chapa branca: as artes com canal alpha assentam direto sobre o fundo
     da secao, no carrossel e no zoom. */
  background: transparent;
  box-shadow: 0 1.5rem 3.5rem rgba(12, 29, 39, .24);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: 50% 100%;
  transition:
    transform 760ms cubic-bezier(.22, .72, .18, 1),
    filter 520ms ease,
    opacity 520ms ease,
    border-color 300ms ease,
    box-shadow 520ms ease;
  will-change: transform;
}

main #pm-teee-art-gallery .pm-teee-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 900ms cubic-bezier(.22, .72, .18, 1), filter 520ms ease;
}

main #pm-teee-art-gallery .pm-teee-card::after {
  content: none;
}

/* Camada visual real sobre a imagem. O véu branco preserva a mesma curva de
   opacidade e a mesma transição usadas anteriormente no azul-petróleo. */
main #pm-teee-art-gallery .pm-teee-card-overlay {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 30%;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #DCE0E2 24%,
    #8C979D 60%,
    #46565F 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

/* Tratamento inspirado nas capas dos artigos: o texto pertence à carta e fica
   em uma camada independente, sempre acima do gradiente. */
main #pm-teee-art-gallery .pm-teee-card-caption {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 30%;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 1px clamp(.75rem, 1.8vw, 1.5rem);
  overflow: hidden;
  background: transparent;
  color: #FFFFFF;
  opacity: 0;
  text-align: left;
  text-shadow: 0 1px 3px rgba(12, 29, 39, .45);
  pointer-events: none;
  transition: opacity 420ms ease;
}

main #pm-teee-art-gallery .pm-teee-card[data-position="0"] .pm-teee-card-overlay,
main #pm-teee-art-gallery .pm-teee-card[data-position="0"] .pm-teee-card-caption {
  opacity: 1;
}

main #pm-teee-art-gallery .pm-teee-card-caption strong {
  display: block;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

main #pm-teee-art-gallery .pm-teee-card-caption > span {
  display: block;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.05;
}

main #pm-teee-art-gallery .pm-teee-card[data-position="0"] {
  z-index: 10;
  border-color: rgba(18, 41, 55, .22);
  box-shadow: 0 2rem 5rem rgba(12, 29, 39, .3);
  filter: none;
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="0"] img {
  transform: scale(1.012);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="-1"] {
  z-index: 9;
  filter: saturate(.96) brightness(.94);
  transform: translateX(-77.5%) translateY(1.6rem) scale(.91) rotate(-10deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="1"] {
  z-index: 9;
  filter: saturate(.96) brightness(.94);
  transform: translateX(-22.5%) translateY(1.6rem) scale(.91) rotate(10deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="-2"] {
  z-index: 8;
  filter: saturate(.92) brightness(.89);
  transform: translateX(-100%) translateY(-.1rem) scale(.82) rotate(-20deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="2"] {
  z-index: 8;
  filter: saturate(.92) brightness(.89);
  transform: translateX(0) translateY(-.1rem) scale(.82) rotate(20deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="-3"] {
  z-index: 7;
  filter: saturate(.88) brightness(.84);
  transform: translateX(-120%) translateY(4.8rem) scale(.73) rotate(-30deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="3"] {
  z-index: 7;
  filter: saturate(.88) brightness(.84);
  transform: translateX(20%) translateY(4.8rem) scale(.73) rotate(30deg);
}

main #pm-teee-art-gallery .pm-teee-card[data-position="hidden"] {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) scale(.68);
  pointer-events: none;
}

main #pm-teee-art-gallery .pm-teee-card:focus-visible,
main #pm-teee-art-gallery .pm-teee-gallery-arrow:focus-visible,
main #pm-teee-art-gallery .pm-teee-gallery-dot:focus-visible {
  outline: 2px solid var(--pm-gallery-bright);
  outline-offset: 4px;
}

main #pm-teee-art-gallery .pm-teee-gallery-arrow {
  position: relative;
  z-index: 20;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(18, 41, 55, .2);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--pm-gallery-ink);
  justify-self: center;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

main #pm-teee-art-gallery [data-teee-prev] {
  grid-column: 1;
  grid-row: 1;
}

main #pm-teee-art-gallery [data-teee-next] {
  grid-column: 3;
  grid-row: 1;
}

main #pm-teee-art-gallery .pm-teee-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 2;
  gap: clamp(.28rem, .7vw, .625rem);
  flex-wrap: wrap;
  max-width: min(100%, 34rem);
  justify-self: center;
  margin: .75rem 0 0;
  transform: translateY(-30px);
}

@media (max-width: 767px) {
  main #pm-teee-art-gallery .pm-teee-gallery-dots {
    max-width: 17rem;
  }
}

main #pm-teee-art-gallery .pm-teee-gallery-dot {
  display: block;
  width: .8125rem;
  height: .8125rem;
  padding: 0;
  border: 1px solid rgba(18, 41, 55, .25);
  border-radius: 0;
  background: transparent;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

main #pm-teee-art-gallery .pm-teee-gallery-dot[aria-selected="true"] {
  border-color: var(--pm-gallery-turquoise);
  background: var(--pm-gallery-turquoise);
}

body.pm-teee-lightbox-open {
  overflow: hidden;
}

main #pm-teee-art-gallery .pm-teee-lightbox[hidden] {
  display: none;
}

main #pm-teee-art-gallery .pm-teee-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(255, 255, 255, .92);
  cursor: zoom-out;
}

main #pm-teee-art-gallery .pm-teee-lightbox img {
  display: block;
  background: transparent;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - clamp(2rem, 6vw, 6rem));
  object-fit: contain;
  border: 0;
  cursor: zoom-out;
}

main #pm-teee-art-gallery .pm-teee-lightbox-media {
  isolation: isolate;
  position: relative;
  background: transparent;
  display: grid;
  max-width: 100%;
  max-height: calc(100svh - clamp(2rem, 6vw, 6rem));
  place-items: center;
}

main #pm-teee-art-gallery .pm-teee-lightbox-media img,
main #pm-teee-art-gallery .pm-teee-lightbox-caption {
  grid-area: 1 / 1;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: stretch;
  min-height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: none;
  color: #FFFFFF;
  pointer-events: none;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #DCE0E2 24%,
    #8C979D 62%,
    #46565F 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption > * {
  position: relative;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption strong,
main #pm-teee-art-gallery .pm-teee-lightbox-caption span {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption strong {
  font-size: 18px;
  font-weight: 700;
}

main #pm-teee-art-gallery .pm-teee-lightbox-caption span {
  font-size: 15px;
  font-weight: 400;
}

main #pm-teee-art-gallery .pm-teee-lightbox-close {
  position: fixed;
  z-index: 2;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(12, 29, 39, .28);
  border-radius: 0;
  background: rgba(12, 29, 39, .82);
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

main #pm-teee-art-gallery .pm-teee-card[data-position="0"],
main #pm-teee-art-gallery .pm-teee-card.is-zoomable,
main #pm-teee-art-gallery .pm-teee-card.is-zoomable * {
  cursor: zoom-in !important;
}

@media (min-width: 768px) {
  main #pm-teee-art-gallery .pm-teee-card[data-position="0"] {
    width: min(44.16vw, 43.2rem);
  }

  main #pm-teee-art-gallery .pm-teee-card:not([data-position="0"]) {
    width: min(29.44vw, 28.8rem);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-1"] {
    transform: translateX(-98%) translateY(1.6rem) scale(.91) rotate(-10deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="1"] {
    transform: translateX(-2%) translateY(1.6rem) scale(.91) rotate(10deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-2"] {
    transform: translateX(-128%) translateY(calc(-20% - .1rem)) scale(.82) rotate(-20deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="2"] {
    transform: translateX(28%) translateY(calc(-20% - .1rem)) scale(.82) rotate(20deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-3"] {
    transform: translateX(-140%) translateY(4.8rem) scale(.73) rotate(-30deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="3"] {
    transform: translateX(40%) translateY(4.8rem) scale(.73) rotate(30deg);
  }
}

@media (max-width: 767px) {
  main #pm-teee-art-gallery .pm-teee-gallery-stage {
    grid-template-columns: 1fr 2.75rem .375rem 2.75rem 1fr;
    column-gap: 0;
  }

  main #pm-teee-art-gallery .pm-teee-deck {
    grid-column: 1 / -1;
    grid-row: 1;
    height: clamp(14.8rem, 73vw, 18rem);
  }

  main #pm-teee-art-gallery .pm-teee-card {
    width: 59.2vw;
    max-width: 17.6rem;
    box-shadow: 0 1rem 2.5rem rgba(12, 29, 39, .2);
  }

  main #pm-teee-art-gallery .pm-teee-card-caption {
    padding-right: .65rem;
    padding-left: .65rem;
  }

  main #pm-teee-art-gallery .pm-teee-card-caption strong {
    font-size: 12px;
  }

  main #pm-teee-art-gallery .pm-teee-card-caption > span {
    display: none;
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="0"] {
    width: 72vw;
    max-width: 21.5rem;
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-1"] {
    transform: translateX(-62.5%) translateY(1.8rem) scale(.92) rotate(-10deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="1"] {
    transform: translateX(-37.5%) translateY(1.8rem) scale(.92) rotate(10deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-2"] {
    transform: translateX(-75%) translateY(1.68rem) scale(.84) rotate(-20deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="2"] {
    transform: translateX(-25%) translateY(1.68rem) scale(.84) rotate(20deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="-3"] {
    transform: translateX(-87.5%) translateY(3.6rem) scale(.76) rotate(-30deg);
  }

  main #pm-teee-art-gallery .pm-teee-card[data-position="3"] {
    transform: translateX(-12.5%) translateY(3.6rem) scale(.76) rotate(30deg);
  }

  main #pm-teee-art-gallery .pm-teee-gallery-arrow {
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-18px);
  }

  main #pm-teee-art-gallery [data-teee-prev] {
    grid-column: 2;
    grid-row: 3;
  }

  main #pm-teee-art-gallery [data-teee-next] {
    grid-column: 4;
    grid-row: 3;
  }

  main #pm-teee-art-gallery .pm-teee-gallery-dots {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 1024px) {
  main #pm-teee-art-gallery .pm-teee-gallery-stage {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    column-gap: 1rem;
    width: calc(100% + 6rem);
    margin-left: -3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  main #pm-teee-art-gallery .pm-teee-card,
  main #pm-teee-art-gallery .pm-teee-card img,
  main #pm-teee-art-gallery .pm-teee-gallery-arrow,
  main #pm-teee-art-gallery .pm-teee-gallery-dot {
    transition-duration: 1ms !important;
  }
}