* { box-sizing: border-box; }
:root{
  --bg:#252321;
  --fg:#FFFBFB;
  --overlay: rgb(0 0 0 / 64%); /* overlay leve por cima da imagem */
  --accent:#FFFBFB;
  --heroA: url('/imgs/bg-website-2.png');  /* começa como está agora */
  --heroB: url('/imgs/bg-website-1.png');  /* a alternativa */
}
/* estado inicial: banner usa A e o botão mostra B */
body{ 
    --hero-bg: var(--heroA); 
    --thumb-bg: var(--heroB);
  margin:0;
  background: var(--bg);
  color: var(--fg); Inter, Arial, sans-serif;
  line-height:1.3;
  position:relative; /* para posicionar o bg-banner */
  overflow-x:hidden;
  scroll-snap-type: y mandatory;
}
html, body { height: 100%; }
/* alternado: banner usa B e o botão mostra A */
body.alt-hero{ 
    --hero-bg: var(--heroB); 
    --thumb-bg: var(--heroA);
}
/* Footer usa o mesmo background que o banner (controlado por --hero-bg) */
body .footer-hero{
  background-image: var(--hero-bg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* aplica a variável ao banner (substitui a linha antiga do .bg-banner) */
.bg-banner{
  background-image: var(--hero-bg);  /* <— em vez de url('/imgs/bg-website-2.png') */
}
/* usa a variável em vez do URL fixo */
body .bg-banner{
  background-image: var(--hero-bg) !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* botão de troca (quadrado, topo-direito) */
.bg-switch{
  position: fixed;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 2px;                 /* quadrado */
  border:1px solid #fff;
  background: rgba(255,255,255,.06);
  background-image: var(--thumb-bg);/* miniatura = o fundo alternativo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  cursor: pointer;
  padding: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.bg-switch:hover{ filter: brightness(1.08); }
.bg-switch:focus-visible{ outline: 2px solid #f3dbc7; outline-offset: 2px; }

/* base */
@font-face {
  font-family: 'migra-bold';
  src: url('/fonts/migra-bold.otf');
  font-display:swap;
}
@font-face {
  font-family: 'montreal-light';
  src: url('/fonts/NeueMontreal-Light.otf');
  font-display:swap;
}
@font-face {
  font-family: 'montreal-regular';
  src: url('/fonts/NeueMontreal-Regular.otf');
  font-display:swap;
}
@font-face {
  font-family: 'montreal-medium';
  src: url('/fonts/NeueMontreal-Medium.otf');
  font-display:swap;
}
@font-face {
  font-family: 'montreal-bold';
  src: url('/fonts/NeueMontreal-Bold.otf');
  font-display:swap;
}

@font-face {
    font-family: 'Tusker-Grotesk';
    src: local('Tusker Grotesk 2500 Medium'), local('/fonts/Tusker-Grotesk-2500-Medium'),
        url('/fonts/TuskerGrotesk-2500Medium.woff2') format('woff2'),
        url('/fonts/TuskerGrotesk-2500Medium.woff') format('woff'),
        url('/fonts/TuskerGrotesk-2500Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'Tusker-Grotesk-medium';
    src: local('Tusker Grotesk 3500 Medium'), local('/fonts/Tusker-Grotesk-3500-Medium'),
        url('/fonts/TuskerGrotesk-3500Medium.woff2') format('woff2'),
        url('/fonts/TuskerGrotesk-3500Medium.woff') format('woff'),
        url('/fonts/TuskerGrotesk-3500Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'Tusker-Grotesk-bold';
    src: local('Tusker Grotesk 5500 Medium'), local('/fonts/Tusker-Grotesk-5500-Medium'),
        url('/fonts/TuskerGrotesk-5500Medium.woff2') format('woff2'),
        url('/fonts/TuskerGrotesk-5500Medium.woff') format('woff'),
        url('/fonts/TuskerGrotesk-5500Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display:swap;
}
/* layer para o crossfade (a imagem que entra) */
.bg-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-next);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease; /* <- ajusta a duração aqui */
}

/* quando vamos trocar, esta layer sobe a opacidade */
body.is-fading .bg-banner::before{
  opacity: 1;
}

/* acessibilidade: sem animação */
@media (prefers-reduced-motion: reduce){
  .bg-banner::before{ transition: none; }
}

/* --- BACKGROUND que cobre 1ª secção + metade da 2ª (150vh) --- */
.bg-banner{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:131vh; /* 100vh (secção 1) + 50vh (metade secção 2) */
  z-index:0;
  pointer-events:none;
  background-image: url('/imgs/bg-website-2.png');
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}
/* overlay leve por cima da imagem */
.bg-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* overlay leve por cima de toda a imagem */
    linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)),
    /* gradiente preto no fundo que se funde com section seguinte */
    linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 100%);
}
span.generic-symbol{
    opacity:1!important;
    animation:none!important;
}
.generic-symbol{
    color:#f3dbc7;
}
/* gradiente escuro que "sobe" quando estamos a meio da 2ª */
.bottom-blend{
  position: fixed;
  left:0; right:0; bottom:0;
  height: 60vh; /* altura do gradiente que entra */
  pointer-events:none;
  z-index:1; /* acima do bg, abaixo do conteúdo */
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
  transform: translateY(100%); /* escondido inicialmente (fora do ecrã) */
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
body.blend-in .bottom-blend{
  transform: translateY(0%); /* entra a partir de baixo */
}
.footer-hero {
  position: relative;
  min-height: 100vh; /* ocupa o ecrã inteiro */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: url("/imgs/bg-website-2.png") center/cover no-repeat; /* troca pela tua */
}
.footer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 40%);
  pointer-events: none;
}

.footer-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.9); /* overlay suave */
}

.footer-hero > * {
  position: relative; /* para ficar acima do overlay */
}

/* layout da hero (secção 1) */
.hero{
  position:relative;
  z-index:2; /* acima do bg/gradiente */
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 4vw, 48px);
  align-items:center;
  padding: clamp(16px, 4vw, 48px);
}

.left-title span{
    font-size: 22vh!important;
    letter-spacing: .03em;
    text-align: left;
    font-family: 'Tusker-Grotesk';
    line-height: 1.1;
    white-space: nowrap;
    will-change: transform;
    margin-bottom: 0;
    padding:0 2rem;
}
.right-copy .coming-soon{
    font-size: 5.2vh!important;
    color: #f3dbc7;
    font-family: 'migra-bold';
    display:inline-block;
}
h1 span.coming-soon{
    font-size: 5.2vh!important;
    color: #f3dbc7;
    font-family: 'migra-bold';
    display:inline-block;
}
.cursor {
  width: 25px;
  height: 25px;
  border: 2px solid #f3dbc7;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.1s ease;
  z-index:99999999999999;
}
.generic-button {
  color: var(--accent);
  opacity: .9;
  font-size: 2vh;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: .6rem;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  line-height: 0;
  padding: 20px;
  font-family: 'montreal-regular';
  background: rgba(255, 255, 255, 0.05); /* fundo levemente transparente */
  transition: all 0.6s ease;
  cursor:pointer;
}

.generic-button:hover {
  background: rgba(255, 255, 255, 0.15); /* aumenta opacidade no hover */
  backdrop-filter: blur(8px); /* desfoque do fundo */
  -webkit-backdrop-filter: blur(8px); /* compatibilidade Safari */
}

  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.8px;
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
.typewriter.finished {
border-right: none;
}
.left-title h1{
    display: flex;
    flex-direction: column;
}
.right-copy{
  max-width: 100%;
  margin-left:auto;
  opacity:.95;
}
.right-copy p{
    font-family: 'montreal-light';
    text-transform: uppercase;
    font-size: 3.4vh!important;
    font-weight:bold;
    letter-spacing: .065em;
}
/* secção 2 — “latest works” */
.works{
  position:relative;
  background:#000;
  z-index:2;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  gap: 0;
  justify-content:flex-start;
}
.works h1{
  font-size:5vh;
  text-transform:uppercase;
  font-family:'montreal-regular';
  letter-spacing:normal;
  text-align:left;
  margin-bottom:0;
}
.services h1{
  font-size: clamp(28px, 5vw, 64px);
  color:#fff;
  margin:40px 0;
  font-size:5vh;
  text-transform:uppercase;
  font-family:'montreal-regular';
  letter-spacing:normal;
  text-align:left;
}
.works h2{
    color: #f3dbc7;
    font-size: 2.5vh;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'migra-bold';   
    text-align:left; 
}
.works .grid{
    display: flex;
    flex-direction: column;
    width:100%;
}
.work-item--container {
    column-gap: 30px;
    display: flex;
    margin-top:60px;
    align-items: center;
    width:60%;
}
.work-item--container .left span {
    font-family: 'Tusker-Grotesk';
    text-transform: uppercase;
    font-size: 10vh;
    letter-spacing: .065em;
}
.work-item--container .left span.work--description{
    font-size: 2vh;
    font-family: 'montreal-regular';
}
.interactive-text {
    perspective: 1000px;
    display: inline-block;
}

.interactive-text h1 {
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}
/* Oculta inicialmente */
.logo,
h1 span {
  opacity: 0;
  transform: translateY(30px);
}

/* Animação base */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Letras animadas em sequência */
h1 span:first-child{
  animation: fadeUp 1s ease-out forwards;
  animation-delay: .1s;
}
h1 span:nth-child(2) {
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 1s;
}
h1 span:nth-child(3) {
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 1.8s;
}
h1 span:last-child{
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 2s;
}
/* responsivo */
@media (max-width: 900px){
  .progress-overlay{ pointer-events: auto; z-index: 9999; }
  .hero{ grid-template-columns: 1fr; }
  .right-copy{ margin-left: 0; }
  .left-title span{ font-size: clamp(40px, 12vw, 80px); }
}

/* (Opcional) granulado suave por cima de tudo — comentar se não quiseres */
.grain{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.06;             /* controla intensidade */
  mix-blend-mode: normal;  /* mantém-se discreto */
  background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width=\"100%\" height=\"100%\">\
      <filter id=\"g\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"1.1\" numOctaves=\"4\"/></filter>\
      <rect width=\"100%\" height=\"100%\" filter=\"url(%23g)\"/>\
    </svg>');
  animation: grainMove 1s linear infinite;
}
.work-item--container .right img {
    margin-top: 12px;
}
.scrolling-text {
	font-size: 3rem;
	font-weight: normal !important;
	white-space: nowrap;
	transition: transform 0.5s linear;
	text-transform: uppercase;
	font-family: 'montreal-regular';
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
/*SLIDE BANNER*/
.announcement-bar {
  width: 100%;
  overflow: hidden;
  position: relative;
  align-items: center;
  border-top:1px solid #fff;
  padding:20px 0;
  background:#000;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.track {
  display: flex;
  font-family:'montreal-bold';
  width: max-content;
  animation: scroll-left 410s linear infinite;
  animation-play-state: running;
  cursor:pointer;
}
footer .interactive-text{z-index:999;}
.bottom-logo {
    padding: 20px 0;
    column-gap: 5px;
    font-family: 'montreal-bold';
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    row-gap: 5px;
    flex-direction: column-reverse!important;
}
.marquee:hover .track {
  animation-play-state: paused;
}
.work-item--container img{
    max-height:80px;
    filter: grayscale(1);
}
.work-item--container img:hover{
    filter: grayscale(0);
}
.cards {
	display: flex;
    width: 50%;
    padding-bottom: 0;
    column-gap: 50px;
    flex-wrap: wrap;
}
.services{
    background-color:#000;
}
section#works {
    padding-top: 0;
}
.card {
	background: none;
	color: #fff;
	width: 280px;
	font-family: 'migra-bold';
	text-transform: uppercase;
	font-size: 1.1rem;
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
	position: relative;
	opacity: 0;
	animation: fadeInUp 0.6s ease forwards;
}
.card:nth-child(1) {
	animation-delay: 0.2s;
}

.card:nth-child(2) {
	animation-delay: 0.4s;
}

.card:nth-child(3) {
	animation-delay: 0.6s;
}

.card:nth-child(4) {
	animation-delay: 0.8s;
}

.card:nth-child(5) {
	animation-delay: 1s;
}

.card:nth-child(6) {
	animation-delay: 1.2s;
}

.card h3 {
	font-size: 1.2rem;
	color: #f3dbc7;
	margin-bottom:0;
	padding-bottom:0;
}
.card h3 span,p{
	color: #fff!important;
}
.card h3 span {
	display: block;
	font-family: 'Tusker-Grotesk-bold';
	font-size: 1.5rem;
}

.card p {
	font-family: 'montreal-regular';
	text-transform:uppercase;
	font-size: 2vh;
}
section{
    padding: 0 100px;
}
.main-services--container{
    padding: 0 100px;
}
.imagem-container {
  position: relative;
  display: inline-block;
}
.imagem-container::after {
  content: "";
  position: absolute;
  bottom: 0; /* começa do fundo */
  left: 0;
  width: 100%;
  height: 60%; /* altura da faixa de gradiente */
  background: linear-gradient(to top, black, transparent);
  pointer-events: none; /* para não bloquear cliques na imagem */
}
.services--container {
    display: flex;
    justify-content: space-around;
    column-gap: 50px;
    align-items:center;
}
section.separator {
    background: #000;
}
section.separator a {
    margin-bottom: 0;
}
section.separator {
    background: #000;
    padding: 50px 100px;
}
.white-line {
    height: .5px;
    background: #fff;
    width: 56%;
}
.separator--container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
/* cores da barra */
:root{
  --line: rgba(255,255,255,.6);
  --line-track: rgba(255,255,255,.100);
}
#pb-track-ow{ position: relative; width: 100%; max-width: 100%; height: 56px; }
#pb-fill-ow{
  position: absolute !important;
  right: 0 !important; left: auto !important;
  top: 50%; transform: translateY(-50%);
  height: 2px; background: var(--line);
  width: 0; z-index: 1;
}
#pb-btn-ow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
}
/* a secção 1 (services) passa a ser o referencial do overlay */
.services{ position: relative; }

/* overlay da progress bar no fundo da 1ª secção */
.progress-overlay{
      position: relative;
  left: 0; right: 0;/* ajusta a distância à borda */
  pointer-events: none; /* não interfere com o resto */
  z-index: 3;
  padding:80px 0 40px;
}

.progress-wrap{ position: relative; }

/* linha fina, estilo da imagem */
.track-line{
  position: relative;
  height: 2px;
  background: transparent;
}

.track-line .fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0px; background: var(--line);
  z-index: 1;
}

/* botão acompanha a frente da linha (alinhado pela borda ESQUERDA) */
.track-line .lead-btn{
  position: absolute; top: 50%; left: 0;
  transform: translate(0,-50%);
  pointer-events: auto; /* clicável mesmo com o overlay com pointer-events:none */
  z-index: 2;              /* botão por cima */
  /* Override à 'transition: all' da .generic-button
     — não anima left/transform, só o hover */
  transition: background .6s ease, box-shadow .6s ease, filter .6s ease;
  will-change: left;
}

/* elimina o que criava o espaço (se ainda existir) */
.progress-space, .progress-stick { display: none !important; height: 0 !important; }
/* CONTACT FLYOUT — linha horizontal que sai da direita */
.contact-flyout{
  position: fixed;
  bottom : 30px;
  transform:rotate(270deg);
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;                 /* espaço entre texto e linha (à frente) */
  z-index: 10000;
  pointer-events: none;      /* não bloqueia cliques do site */
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.contact-text a{text-decoration:none!important;color:#f3dbc7!important;}
/* texto à frente da linha */
.contact-flyout .contact-text{
  font-family: 'Tusker-Grotesk-bold';
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 2vh;
  color: #f3dbc7;
  white-space: nowrap;
}

/* linha horizontal fina, estilo progress bar */
.contact-flyout .contact-hline{
  width: 100px;              /* distância que “sai” do ecrã */
  height: 2px;               /* mesma espessura da tua progress bar */
  background: #fff;
  transform: scaleX(0);      /* cresce a partir da borda direita */
  transform-origin: right center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

/* estado visível: grupo desloca 100px para dentro e a linha “cresce” */
.contact-flyout.show{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.contact-flyout.show .contact-hline{
  transform: scaleX(1);
}

/* Animation keyframes */
@keyframes fadeInUp {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slide {
    0%, 25% { transform: translateY(0); } /* Mostra a primeira mensagem */
    25.01%, 50% { transform: translateY(-30px); } /* Move para a segunda mensagem */
    50.01%, 75% { transform: translateY(-60px); } /* Move para a terceira mensagem */
    75.01%, 100% { transform: translateY(-90px); } /* Move para a quarta mensagem */
}
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes grainMove {
  to { transform: translate(-3%, -3%); }
}
@media only screen and (max-width: 768px) {
div#recentWorks{
    width:100%!important;
}
footer.hero{height:70vh!important;align-content: center;min-height: inherit;}
    .interactive-text h1{margin-bottom:0!important;}
    .badge-spin{
        --size: 100px!important;            /* tamanho do selo */
        --ring-color: #fff;       /* cor dos anéis */
        --text-color: #fff;       /* cor do texto */
        --stroke: 2px!important;            /* espessura do anel exterior */
        --stroke-inner: 1px!important;      /* espessura do anel interior */
        --speed: 10s;             /* velocidade de rotação */
        width: var(--size);
        aspect-ratio: 1;
        display:inline-block;
            position: absolute;
        right: -15px;
        top: -20px!important;
      }
    .icon-row{
      margin-bottom:30px!important;
    }
    .align-right{
        text-align:left!important;
    }
    .work-item--container.invert{
        flex-direction: column!important;
    }
    .contact-flyout{
        top:92.5%!important;
    }
    section.separator {
        padding: 50px 20px;
    }
    .cards{
        width:100%;
    }
    .services--container {
        row-gap:30px;
        flex-direction: column;
    }
    section {
        padding: 0 20px;
    }
    .main-services--container{
        padding: 0 20px;
    }
    .right {
        width: 35%;
        text-align: center;
    }
    .work-item--container img{
        height:60px;
    }
    .card {
		width: 100%;
	}
    .work-item--container .left span.work--description{
        font-size: 1.5vh;
    }
    .card p{
        font-size:1.5vh;
    }
    .scrolling-text {
        font-size: 1rem;
    }
    .works {
        justify-content: flex-start;
        align-items: flex-start;
    }
    .track {
        animation: scroll-left 190s linear infinite;
    }
    .announcement-bar .track {
        font-size:19px!important;
    }
    .works .grid{
        align-items: inherit;
        row-gap:30px;
    }
    .work-item--container{
        width:100%!important;
        margin-top:30px!important;
    }
    .work-item--container .left span {
        font-size: 4vh;
    }
    .works h1{
        font-size: 4vh;
    }
    .services h1{
        font-size: 4vh;
    }
    .works h2{
        font-size: 2vh;
    }
    .left-title span {
        font-size: 15vh !important;
    }
    .left-title span{
        padding:0!important;
    }
    .right-copy .coming-soon {
        font-size: 4.2vh !important;
    }
    .right-copy p {
        font-size: 2vh !important;
        margin-bottom:30px;
    }
    .generic-button {
        font-size:13px;
    }
    h1 span:first-child{
      animation: fadeUp 1s ease-out forwards;
      animation-delay: .2s!important;
    }
}
/* ===== Recent Works — RIGHT COLUMN FULL-WIDTH THUMBS ===== */
:root{
  --thumb-h: 220px;                   /* ↑ aumenta/diminui a altura das imagens */
  --thumb-r: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

.works .grid{ gap: clamp(40px, 8vh, 72px); }

.work-item--container{
  width: 100% !important;             /* vence o 60% antigo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 6vw, 64px);
}

.work-item--container .left{  flex: 1 1 44%; }
.work-item--container .right{ flex: 1 1 56%; display: flex; }

/* “Máscara” que força todas as imagens a ficarem iguais em altura e largura */
.work-item--container .right .work-thumb{
  display: block;
  width: 100%;                        /* ocupa a coluna toda */
  height: var(--thumb-h);             /* altura uniforme */
  overflow: hidden;
  position: relative;
}

/* OVERRIDES — vencem o max-height:80px e o grayscale globais */
.work-item--container .right .work-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* corta mantendo o enquadramento */
  max-height: none !important;         /* destrava o 80px global */
  margin-top: 0 !important;
  filter: sepia(1) contrast(1) brightness(.95) !important;  /* sépia ativo */
  transform: scale(1.02);
  transition: transform .6s var(--ease), filter .3s ease;
  will-change: transform;
}

/* Zoom + ligeiro “lift” no hover (mantendo sépia) */
.work-item--container .right .work-thumb:hover img{
  transform: scale(1.08);
  filter: sepia(1) contrast(1.08) brightness(1) !important;
}

/* ===== Entrada (texto da esquerda ←, imagem da direita →) ===== */
.work-item--container .left,
.work-item--container .right{ opacity: 0; will-change: transform, opacity; }

.work-item--container .left{  transform: translateX(-30px);
  transition: transform .7s var(--ease), opacity .7s var(--ease); }
.work-item--container .right{ transform: translateX(30px);
  transition: transform .7s var(--ease), opacity .7s var(--ease);
  transition-delay: .12s; }

.work-item--container.show .left,
.work-item--container.show .right{ transform: translateX(0); opacity: 1; }

/* ===== Responsivo ===== */
@media (max-width: 900px){
  :root{ --thumb-h: 140px; }
  .work-item--container{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .work-item--container .right{ width: 100%; flex: 0 0 auto; }
}
/* Hover: blur + botão centrado na thumb */
.work-item--container .right .work-thumb{
  position: relative; /* já tinhas, reforço */
}

/* overlay leve para dar contraste ao CTA */
.work-item--container .right .work-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .3s ease;
}

/* CTA visual (não bloqueia o clique do link) */
.work-item--container .right .work-thumb .thumb-cta{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  opacity: 0; pointer-events: none;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  font-family: 'montreal-regular';
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .3s ease, transform .3s var(--ease);
}

/* reforço dos overrides da thumb */
.work-item--container .right .work-thumb img{
  transition: transform .6s var(--ease), filter .3s ease, opacity .3s ease;
}

/* HOVER: imagem aumenta e desfoca, overlay e CTA aparecem */
.work-item--container .right .work-thumb:hover img{
  transform: scale(1.1);
  /* mantém sépia e adiciona blur; !important vence regras globais */
  filter: sepia(1) contrast(1.08) brightness(1) blur(2.5px) !important;
}
.work-item--container .right .work-thumb:hover::after{ opacity: 1; }
.work-item--container .right .work-thumb:hover .thumb-cta{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.work-item--container.invert{
    flex-direction: row-reverse;
}
.align-right{
    text-align:right;
}
footer {
display: flex;
background: #000;
padding: 150px 0 0;
flex-direction: column;
align-items: center;
}
.icon-row{
  display:flex; align-items:center; gap:28px;
      margin-top: -42px!important;
      margin-left:-10px;
    z-index: 99999999999999;
    position: absolute;
}
.icon-row img,
.icon-row svg{
  height:32px; width:auto; display:block;
  /* opcional: realce no hover */
  transition: filter .2s ease, transform .2s ease;
}

.icon-row img:hover,
.icon-row svg:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
}
/* garante que o SQL (SVG local) herda a mesma “altura visual” */
.icon-row .sql-icon{ height:32px; width:auto; }
/* mesmas dimensões dos outros ícones */
.si-icon{
  width:30px; height:30px; display:block;
  background-color:#c7c7c7;            /* cinza que contrasta no teu fundo */
  /* opcional: realce no hover */
  transition: filter .2s ease, transform .2s ease;
}
.si-icon:hover{ filter: brightness(1.12); transform: translateY(-1px); }

/* CSS3 via mask (pinta o SVG com a cor acima) */
.si-css3{
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/css3.svg") no-repeat center / contain;
          mask: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/css3.svg") no-repeat center / contain;
}
/* ===== Fix overflow em mobile (gap à direita) ===== */
/* ===== Ajustes rápidos ===== */
  .badge-spin{
    --size: 150px;            /* tamanho do selo */
    --ring-color: #fff;       /* cor dos anéis */
    --text-color: #fff;       /* cor do texto */
    --stroke: 4px;            /* espessura do anel exterior */
    --stroke-inner: 3px;      /* espessura do anel interior */
    --speed: 10s;             /* velocidade de rotação */
    width: var(--size);
    aspect-ratio: 1;
    display:inline-block;
        position: absolute;
    right: -15px;
    top: -28px;
  }
  .badge-spin__svg{ width:100%; height:auto; display:block; }

  /* anéis */
  .ring{ fill:none; }
  .ring--outer{ stroke: var(--ring-color); stroke-width: var(--stroke); }
  .ring--inner{ stroke: var(--ring-color); stroke-width: var(--stroke-inner); }

  /* texto à volta */
  .circle-text{
    fill: var(--text-color);
    font-family: 'montreal-regular', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    font-size: 23px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  /* animação de rotação */
  .spin{ transform-origin: 100px 100px; animation: spin var(--speed) linear infinite; }
  @keyframes spin{ to { transform: rotate(360deg); } }

  /* opcional: reduzir em mobile */
  @media (max-width: 600px){
    .badge-spin{ --size: 160px; }
  }
@media (max-width: 900px){
  /* garante que nada pode criar scroll horizontal */
  html, body { max-width: 100%; overflow-x: clip;scroll-snap-type: none; } /* melhor que hidden em iOS */

  /* corta qualquer bleed dos wrappers principais */
  .hero, .services, .works, .scrolling-text, .announcement-bar, .marquee { overflow-x: clip; }

  /* permitir quebra das palavras grandes no título e remover o nowrap */
  .left-title { overflow: hidden; } /* segurança extra */
  .left-title span{
    white-space: normal;           /* <— deixa quebrar */
    overflow-wrap: anywhere;       /* quebra forçada se precisar */
    word-break: break-word;
    padding: 0 !important;         /* já tinhas no media query */
    display: block;
    max-width: 100%;
  }

  /* em flex, evita que o conteúdo force alargar o container */
  .work-item--container .left,
  .work-item--container .right { min-width: 0; }
}
.red{color:red;}
.yellow{color:yellow;}
.green{color:green;}
/* ===== Case Study Panel ===== */
.cs-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 20000;
}
.cs-panel{
  position: fixed; top: 0; right: 0;
  width: min(720px, 94vw); height: 100dvh;
  background: #000; color: var(--fg);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -24px 0 80px rgba(0,0,0,.55);
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  z-index: 20001;
  display: grid; grid-template-rows: 1fr auto; /* body + nav */
}
.cs-panel__body{ overflow-y: auto; padding: 28px 32px 80px; }
.cs-header{ margin-bottom: 18px; }
.cs-title{
  margin: 0 0 4px;
      font-family: 'Tusker-Grotesk';
    text-transform: uppercase;
    font-size: 6vh;
    letter-spacing: .065em;
}
.cs-type{
margin: 0; color: #f3dbc7;     font-family: 'montreal-regular';
  text-transform: uppercase; font-size: 1.5vh; letter-spacing: .065em;
}
.cs-sub{
  margin: 18px 0 10px; font-family:'montreal-regular';
  text-transform: uppercase; letter-spacing:.12em; font-size:12px; color:#c7c7c7;
}

/* tecnologias (ícones cinza numa fila que pode quebrar) */
.cs-tech{ display:flex; flex-wrap: wrap; gap:14px; }
.cs-tech img, .cs-tech svg{
  height: 28px; width:auto; display:block;
  filter: none; /* não herdar grayscale global */
}

/* ícone SQL (mask) na mesma cor dos restantes (cinza) */
.cs-sql{
  width: 28px; height: 28px; display:block;
  background-color:#c7c7c7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5.2' rx='8' ry='3'/%3E%3Crect x='4' y='5.2' width='16' height='10.6'/%3E%3Cellipse cx='12' cy='15.8' rx='8' ry='3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5.2' rx='8' ry='3'/%3E%3Crect x='4' y='5.2' width='16' height='10.6'/%3E%3Cellipse cx='12' cy='15.8' rx='8' ry='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* base para ícones pintados via mask */
.cs-icon{
  width: 28px;
  height: 28px;
  display: block;
  background-color: #c7c7c7; /* o teu cinza */
}

/* CSS3 via mask (puxa o SVG monocromático e pinta com a cor acima) */
.cs-css3{
  -webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/css3.svg")
                no-repeat center / contain;
          mask: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/css3.svg")
                no-repeat center / contain;
}

/* navegação (cantos inferiores) */
.cs-nav{ position: absolute; left: 0; right: 0; bottom: 18px; }
.cs-arrow{
  position: absolute; bottom: 0;
  width: 44px; height: 44px;
  background: transparent; color: #fff;
  border: 1px solid #fff; border-radius: 0; /* borda branca quadrada */
  display: grid; place-items: center;
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.cs-prev{ left: 18px; }
.cs-next{ right: 18px; }
.cs-arrow:hover{ background: #fff; color: #000; }
.cs-arrow:focus-visible{ outline: 2px solid #f3dbc7; outline-offset: 2px; }

.cs-open .cs-panel{ transform: translateX(0); }
.cs-open .cs-backdrop{ opacity: 1; pointer-events: auto; }
.cs-open{ overflow: hidden; }

@media (max-width: 768px){
  .cs-panel__body{ padding: 22px 20px 80px; }
  .cs-prev{ left: 12px; } .cs-next{ right: 12px; }
}
section.cs-meta {
    padding: 0;
    margin-top: 30px;
}
section.cs-description {
    padding: 0;
}
section.cs-description p {
    font-family: 'montreal-light';
    font-size: 2vh !important;
    letter-spacing: .065em;
}
/* ===== CONTACT MODAL ===== */
.ctc-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);                 /* preto translúcido */
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  opacity: 0; transform: scale(1.01);
  pointer-events: none; transition: opacity .28s ease, transform .28s ease;
  z-index: 30000; display: grid; place-items: center;
}
.ctc-overlay.show{ opacity: 1; transform: scale(1); pointer-events: auto; }
.ctc-dialog{
  width: min(760px, 92vw); max-height: 90dvh; overflow: auto;
  background: rgba(0,0,0,.9); color: var(--fg);box-shadow: 0 30px 100px rgba(0,0,0,.6);
  padding: clamp(20px, 4vw, 36px); position: relative;
}
.ctc-close{
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  border:none!important;
  background: transparent; color: var(--fg);;
  display: grid; place-items: center; cursor: pointer;
}
.ctc-head{ margin-bottom: 10px; }
.ctc-head h3{
    margin: 0 0 4px;
    font-family: 'Tusker-Grotesk';
    text-transform: uppercase;
    font-size: 6vh;
    letter-spacing: .065em;
}
.ctc-sub{
  margin: 0; color: #c7c7c7; font-family: 'montreal-regular';
  text-transform: uppercase; letter-spacing: .1em; font-size: 12px;
}

/* formulário — linhas finas cinza */
.ctc-form{ display: grid; gap: 18px; margin-top:30px;}
.ctc-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.ctc-field{ display: grid; gap: 6px; }
.ctc-field > span{
  font-family: 'montreal-regular'; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #c7c7c7;
}
.ctc-field input,
.ctc-field textarea{
  width: 100%; background: transparent; color: var(--fg);
  border: none; border-bottom: 1px solid rgba(255,255,255,.22);
  padding: 10px 0 12px; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  font-family: 'montreal-regular';
}
.ctc-field input::placeholder,
.ctc-field textarea::placeholder{ color: rgba(255,255,255,.45); }
.ctc-field input:focus,
.ctc-field textarea:focus{
  border-bottom-color: #c7c7c7; box-shadow: 0 1px 0 0 #c7c7c7;
}

.ctc-actions{ display: flex; justify-content: flex-end; margin-top: 8px; }
.ctc-submit{
  border: 1px solid rgba(255,255,255,.25); color: var(--fg);
  background: rgba(255,255,255,.06); border-radius: 999px;
  padding: 12px 18px; text-transform: uppercase; letter-spacing: .08em;
  font-family: 'montreal-regular'; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.ctc-submit:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

@media (max-width: 760px){
  .ctc-row{ grid-template-columns: 1fr; }
}

/* quando o modal abre, bloqueia scroll do body */
.modal-open{ overflow: hidden; }
/* Mensagem centrada e oculta por defeito */
/* a mensagem não deve captar cliques por defeito */
.ctc-message{
  pointer-events: none;    /* <— evita bloquear o formulário */
  z-index: 1;              /* por baixo do diálogo enquanto não está 'sent' */
}

/* estado “enviado”: esconde a caixa, só o blur + mensagem por cima */
.ctc-overlay.sent .ctc-dialog{
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ctc-overlay.sent .ctc-message{
  opacity: 1;
  pointer-events: auto;    /* agora sim, pode apanhar cliques (se quiseres fechar ao clicar) */
  z-index: 3;              /* por cima da caixa */
}
/* erros do formulário */
.ctc-field.has-error input,
.ctc-field.has-error textarea{
  border-bottom-color: #ff6b6b;
  box-shadow: 0 1px 0 0 #ff6b6b;
}
.ctc-error{
  font: 12px/1.4 'montreal-regular', system-ui;
  color: #ffb3b3;
  margin-top: 6px;
}

/* mensagem centrada; invisível por defeito e sem bloquear cliques */
.ctc-message{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-family:'montreal-regular'; text-transform:uppercase;
  letter-spacing:.08em; font-size:clamp(14px,2.2vw,18px); text-align:center;
  opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:3;
}
/* em sucesso: esconde a caixa e mostra a mensagem */
.ctc-overlay.sent .ctc-dialog{
  opacity:0; transform:translateY(-4px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.ctc-overlay.sent .ctc-message{ opacity:1; }
/* header + botão */
.works-header { display: grid; gap: 6px; }
.works-actions {
    text-align: center;
    margin-top: 70px;
    width: 100%;
}
/* esconder via [hidden] e dar fade quando aparece */
.works-list[hidden] { display: none !important; }
.works-list { animation: worksFade .35s ease both; }
.cs-description, .cs-meta ul.cs-list li{
    font-family: 'montreal-light'!important;
}
/* Painéis laterais: estado fechado/aberto controlado por aria-hidden */
.cs-panel { 
  transform: translateX(100%); 
  pointer-events: none; 
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}

.cs-panel[aria-hidden="false"] {
  transform: translateX(0);
  pointer-events: auto;
  opacity: 1;
}
.form-input{
    position: relative;
    background: #000;
    color: #fff;
    letter-spacing: .065em!important;
    display: flex;
    align-content: center;
    text-align: center;
    padding: 30px 0;
}
/* Backdrops: idem */
.cs-backdrop[hidden] { display: none !important; }
@keyframes worksFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}