/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Cursor personalizado: base. A forma final (circunferência + ponto) está mais abaixo, em "Cursor:" ── */
@media (pointer: fine) {
  * { cursor: none !important; }
}
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  /* efeito "negativo": branco + difference inverte a cor do que está por baixo */
  background: #fff;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  transition: opacity .2s ease;
}
.cursor-dot.hidden { opacity: 0; }

/* ── Separador / preloader de entrada ── */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 1;
  transition: opacity .45s ease;
}
.preloader.done { opacity: 0; pointer-events: none; }
.preloader-video {
  width: min(46vw, 420px); /* pequeno e centrado */
  height: auto;
  display: block;
}

:root {
  /* MEAN AGENCY brand colours — dark theme site-wide (near-black / off-white) */
  --brand-white: #f4f4f1;
  --brand-black: #111111;

  --bg:       #0a0a0a;
  --bg-alt:   #161616;
  --surface:  #1a1a1a;
  --border:   #2c2c2c;
  --text:     #f4f4f1;
  --muted:    #8f8f8d;
  --accent:   #E62834;   /* vermelho do favicon */
  --bordo:    #531316;   /* fundo bordô do favicon */
  --radius:   12px;
  --nav-h:    64px;
  /* helvetica-neue-lt-pro = a Helvetica Neue do Adobe Fonts (link no <head> de cada página): é a que todos os visitantes veem.
     "Helvetica Neue" a seguir é a do sistema (Macs), e só conta se o Adobe Fonts não carregar. */
  --font: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: auto; font-size: 16px; scrollbar-gutter: stable; }   /* auto: o Lenis trata da suavidade (evita conflito) */

/* ── Barra de scroll da página com a cor da marca (tipo alltrue.co): vermelho sobre o fundo escuro ── */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 100px; }
/* Firefox (não suporta ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--accent) var(--bg); scrollbar-width: thin; }
}

body {
  font-family: var(--font);
  font-weight: 500; /* Helvetica Neue 65 Medium (no Adobe Fonts, helvetica-neue-lt-pro 500) */
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ── Typography ── */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.1rem; }

/* ── Nav (pixelmatters-style: logo + inline links left, CTA + burger right) ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0 30px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled {
  border-color: transparent;
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Transparent header over the fullscreen home hero / video */
.nav-over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.nav-left-group { display: flex; align-items: center; gap: 2.5rem; min-width: 0; }
.nav-logo-link { display: block; line-height: 0; flex: none; }
.nav-logo { height: 24px; width: auto; display: block; }
/* branco por defeito (sobre fundo escuro); preto só quando a nav passa sobre a cortina clara do Work */
.nav.nav-on-light .nav-logo { filter: brightness(0); }

.nav-links {
  display: flex; align-items: center; gap: 1.75rem;
}
.nav-links a {
  font-size: .95rem; font-weight: 400; color: var(--text);
  letter-spacing: .01em;
}
.nav-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
/* Home: white nav names over the video/dark hero */
.nav-over .nav-links a { color: #fff; }

.nav-right-group { display: flex; align-items: center; gap: 1.25rem; flex: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: 9999px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  border: none; transition: all .2s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: var(--bg);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.btn-full { width: 100%; }

/* Nav CTA — compact pill, replaces plain "Contact" text link */
.nav-cta { padding: .55rem 1.35rem; font-size: .85rem; text-decoration: none; }
.nav-cta:hover { color: var(--bg); text-decoration: none; }

/* Feedback message */
.form-feedback {
  font-size: .875rem; text-align: center; min-height: 1.2rem;
}
.form-feedback.success { color: var(--accent); }

/* ── Footer ── */
.footer {
  padding: 2rem 30px 10px;
  text-align: left;
  font-size: .8rem; color: var(--muted);
}

/* ===== Home Intro — animação de entrada (inspirada em thebranchmedia.org) ===== */
.hi-hero {
  position: relative;
  width: 100vw; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--bordo);   /* fundo bordô do favicon */
  padding: calc(var(--nav-h) + 2rem) clamp(1.25rem, 6vw, 4rem) 3rem;
  text-align: center;
}
/* Grelha de bolas reais — cada uma escala consoante a distância ao cursor.
   As posições e o tamanho são geridos pelo main.js. */
.hi-dots {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1600px, 96vw); height: min(840px, 86vh);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none; z-index: 0;
}
.hi-hero.is-in .hi-dots { opacity: 1; }
.hi-dot {
  position: absolute;
  /* Renderizada no tamanho MÁXIMO (150px) e reduzida com scale — reduzir mantém-se nítido
     (ampliar um elemento pequeno rasterizava e pixelizava). */
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--accent);
  opacity: 1;
  /* --s: escala 0..1 (0.0667 ≈ 10px base, 1 = 150px junto ao cursor) */
  transform: translate(-50%, -50%) scale(var(--s, .0667));
  /* delay/lag suave ao reagir ao cursor */
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .18s var(--ease);
  will-change: transform;
}

.hi-inner { position: relative; z-index: 2; max-width: 20ch; }
/* Logo central — posição absoluta no centro exato da hero (igual ao centro da grelha) */
.page-home .hi-inner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 78vw); max-width: none;
}
/* véu bordô atrás do logo → as bolas nessa zona ficam com menos opacidade */
.page-home .hi-inner::before {
  content: "";
  position: absolute; inset: -100px -150px;
  z-index: -1;
  /* closest-side: a elipse acaba exatamente nas bordas da caixa, por isso chega a 0 antes
     de a caixa acabar (sem corte visível); várias paragens para uma queda suave, sem degraus */
  background: radial-gradient(closest-side,
    rgba(83, 19, 22, .82) 0%,
    rgba(83, 19, 22, .82) 35%,
    rgba(83, 19, 22, .6) 55%,
    rgba(83, 19, 22, .32) 72%,
    rgba(83, 19, 22, .12) 87%,
    rgba(83, 19, 22, 0) 100%);
  pointer-events: none;
}
.hi-logo-mask { display: block; overflow: hidden; }
.hi-logo { width: 100%; height: auto; display: block; }
/* Versão WebGL (main.js): bolas e logo desenhados juntos num canvas, para se poderem fundir.
   O logo em imagem continua na página (dá a posição, a animação de entrada e o texto alternativo), mas não se vê. */
.hi-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
.hi-hero.hi-gl .hi-dots { visibility: hidden; }
.hi-hero.hi-gl .hi-logo, .hi-hero.hi-wait .hi-logo { opacity: 0; }
.hi-hero.hi-gl .hi-inner::before { display: none; }   /* sem véu: junto ao logo as bolas recolhem-se */

.hi-kicker {
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.75rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
}
.hi-hero.is-in .hi-kicker { opacity: 1; transform: none; }

.hi-title {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.03em; line-height: .92;
  font-size: clamp(3rem, 12vw, 9rem);
  text-transform: uppercase;
}
/* Reveal por linha: máscara + slide-up */
.hi-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hi-line-in {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.hi-hero.is-in .hi-line:nth-child(1) .hi-line-in { transition-delay: .25s; }
.hi-hero.is-in .hi-line:nth-child(2) .hi-line-in { transition-delay: .38s; }
.hi-hero.is-in .hi-line:nth-child(3) .hi-line-in { transition-delay: .51s; }
.hi-hero.is-in .hi-line-in { transform: translateY(0); }

.hi-sub {
  margin: 1.6rem auto 0; max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem); color: #c9c9c6; line-height: 1.55;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease) .7s, transform .7s var(--ease) .7s;
}
.hi-hero.is-in .hi-sub { opacity: 1; transform: none; }

.hi-cta {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.25rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease) .85s, transform .7s var(--ease) .85s;
}
.hi-hero.is-in .hi-cta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hi-dots, .hi-kicker, .hi-line-in, .hi-sub, .hi-cta { transition: none; }
  .hi-line-in { transform: none; }
  .hi-dots { opacity: .22; transform: none; }
  .hi-kicker, .hi-sub, .hi-cta { opacity: 1; transform: none; }
}

/* ── Home hero (pixelmatters-style: live headline + services list + work teaser) ── */
.home {
  width: 100vw; min-height: 100dvh;
  margin: 0; padding: calc(var(--nav-h) + clamp(2rem, 8vh, 5rem)) clamp(1.25rem, 6vw, 3rem) clamp(1.5rem, 6vh, 3rem);
  display: flex; flex-direction: column;
  background: #000000;
  position: relative;
  overflow: hidden;
}
.home-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* escurecer por cima do vídeo p/ o texto branco contrastar */
.home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}
.home-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2.5rem, 10vh, 6rem);
}
.home-top { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.home-content { max-width: 46rem; }
.home-kicker { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
.home-title { font-size: clamp(2.4rem, 6vw, 4.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.home-sub { margin-top: 1.5rem; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #c9c9c6; max-width: 38ch; line-height: 1.55; }
.home-services { list-style: none; display: flex; flex-direction: column; gap: .9rem; text-align: right; flex: none; }
.home-services li { font-size: 1.05rem; color: rgba(255,255,255,.65); letter-spacing: -.01em; }
.home-bottom { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.home-teaser { display: flex; flex-direction: column; gap: .35rem; }
.home-teaser-eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.home-teaser-link {
  font-size: 1.05rem; color: #fff; width: fit-content;
  border-bottom: 2px solid var(--accent); padding-bottom: .2em;
  transition: color .2s var(--ease);
}
.home-teaser:hover .home-teaser-link { color: var(--accent); }
@media (max-width: 768px) {
  .home-services { display: none; }
}

/* ── Work page ── */
.work {
  padding: calc(var(--nav-h) + 4rem) 30px 5rem;
  max-width: none; margin: 0;
}
.work-head { margin-bottom: 1.25rem; }
.work-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; margin-bottom: .5rem; }
.work-sub { color: var(--muted); font-size: 1rem; }

/* Grid: 2 columns, near-full-bleed with ~10px gaps */
.w-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 10px;
}

.w-item { display: block; }

/* Rectangle 16:9 — supports <img> gifs natively */
.w-rect {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.w-rect img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Animated stroke on hover — draws from two opposite corners until the frame closes */
.w-rect::before,
.w-rect::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: width .28s var(--ease), height .28s var(--ease), opacity .1s var(--ease);
}
.w-rect::before {
  top: 0; left: 0;
  border-top: 4px solid var(--stroke, var(--brand-black));
  border-left: 4px solid var(--stroke, var(--brand-black));
}
.w-rect::after {
  bottom: 0; right: 0;
  border-bottom: 4px solid var(--stroke, var(--brand-black));
  border-right: 4px solid var(--stroke, var(--brand-black));
}
/* overshoot a few px so the corners always fill solidly (clipped by overflow) */
.w-item:hover .w-rect::before,
.w-item:hover .w-rect::after {
  width: calc(100% + 4px); height: calc(100% + 4px);
  opacity: 1;
}

/* Right column: mirror the origin to the opposite corners (top-right + bottom-left) */
.w-grid .w-item:nth-child(even) .w-rect::before {
  left: auto; right: 0;
  border-left: 0;
  border-right: 4px solid var(--stroke, var(--brand-black));
}
.w-grid .w-item:nth-child(even) .w-rect::after {
  right: auto; left: 0;
  border-right: 0;
  border-left: 4px solid var(--stroke, var(--brand-black));
}

/* Caption: name left, category right */
.w-caption {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  margin-top: 7px;
}
.w-name {
  font-family: var(--font);
  font-size: 1rem; font-weight: 400; color: var(--text);
  letter-spacing: -.01em;
}
.w-cat {
  font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}

/* ===== Work — layout tipo pixelmatters ===== */
.page-work--grid { --ab-red: var(--accent); }
.work-lead {
  max-width: none; margin: 0;
  padding: calc(var(--nav-h) + clamp(3rem, 10vh, 6rem)) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 6vh, 4rem);
}
.work-lead .ab-kicker {
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ab-red); margin-bottom: 1.6rem;
}
.work-lead-title {
  font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(2.4rem, 7vw, 5.5rem); max-width: 18ch;
}
.work-lead-sub {
  margin-top: 1.6rem; max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: #c9c9c6;
}
.work-list {
  max-width: 1500px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 6vw, 6rem) clamp(3rem, 8vh, 6rem);
}
.work-list .w-grid { column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(2rem, 4vh, 3.5rem); }
.work-list .w-item--feature { grid-column: 1 / -1; }
.work-list .w-item--feature .w-rect { aspect-ratio: 21 / 9; }
.work-list .w-name { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; margin-top: .3rem; }
.work-list .w-desc {
  font-size: .95rem; line-height: 1.5; color: #a7a7a4;
  margin-top: .4rem; max-width: 54ch;
}
.work-list .w-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.work-list .w-tags li {
  font-size: .72rem; color: #c9c9c6;
  border: 1px solid #333; border-radius: 100px; padding: .25rem .75rem;
}
@media (max-width: 760px) {
  .work-list .w-grid { grid-template-columns: 1fr; }
  .work-list .w-item--feature .w-rect { aspect-ratio: 16 / 9; }
}

/* Work — lista em linhas (tipo pixelmatters.com/work) */
.wk { max-width: none; margin: 0; padding: 0 0 clamp(3rem, 8vh, 6rem); }
.wk-list { border-bottom: 1px solid var(--border); }
.wk-row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  transition: background .3s var(--ease);
}
.wk-row:hover { background: rgba(230, 40, 52, .06); }
.wk-logo img { height: 30px; width: auto; opacity: .9; transition: opacity .3s var(--ease); }
.wk-row:hover .wk-logo img { opacity: 1; }
.wk-desc { color: #a7a7a4; font-size: 1rem; line-height: 1.5; max-width: 48ch; }
/* miniatura — em todas as linhas, centrada na sua coluna; anima (arraste) só no hover */
.wk-thumb {
  width: 100%; max-width: 170px; aspect-ratio: 16 / 10;
  border-radius: var(--radius); background: var(--surface); overflow: hidden; justify-self: center;
  opacity: 0; transform: translateX(24px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wk-row:hover .wk-thumb { opacity: 1; transform: translateX(0); }
/* zona direita: encostada à margem direita; no hover as tags deslizam p/ esquerda e o "Ver projeto" ocupa o sítio delas */
.wk-right { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 2.2rem; }
.wk-tags { display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; transition: transform .4s var(--ease); }
.wk-row:hover .wk-tags { transform: translateX(-135px); }
.wk-tags span {
  font-size: .8rem; color: #f4f4f1; white-space: nowrap;
  border: 1px solid #333; border-radius: 100px; padding: .35rem 1rem;
  transition: border-color .3s var(--ease);
}
.wk-row:hover .wk-tags span { border-color: var(--accent); }
.wk-cs {
  position: absolute; right: 0; top: 50%;
  color: var(--accent); font-size: .95rem; white-space: nowrap;
  opacity: 0; transform: translate(16px, -50%);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.wk-row:hover .wk-cs { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 900px) {
  .wk-row { grid-template-columns: 130px minmax(0, 1fr) auto; }
  .wk-thumb { display: none; }
}
@media (max-width: 640px) {
  .wk-row { grid-template-columns: 1fr; gap: 1rem; }
  .wk-right { justify-content: flex-start; }
  .wk-row:hover .wk-tags { transform: none; }
  .wk-cs { position: static; transform: none; opacity: 1; margin-top: .5rem; }
}

/* ── Projects (hairline row-list + category filters) ── */
.projects {
  padding: calc(var(--nav-h) + 4rem) clamp(1.25rem, 6vw, 6rem) 6rem;
}

.wl-filters {
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 2rem 0 1rem;
}
.wl-filter {
  font-size: .8rem; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 9999px;
  padding: .45rem 1.1rem; background: none; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.wl-filter:hover { color: var(--text); border-color: var(--text); }
.wl-filter.active { color: var(--bg); background: var(--text); border-color: var(--text); }

.wl-list { list-style: none; margin-top: 1rem; }
.wl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center; gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vh, 2.4rem) 0;
  border-top: 1px solid var(--border);
  transition: background .3s var(--ease);
}
.wl-list li:last-child .wl-row { border-bottom: 1px solid var(--border); }
.wl-row:hover { background: rgba(230, 40, 52, .05); }
.wl-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 600;
  letter-spacing: -.02em; transition: color .25s var(--ease);
}
.wl-row:hover .wl-name { color: var(--accent); }
.wl-cat {
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); white-space: nowrap;
}
.wl-thumb {
  position: absolute; top: 50%; right: clamp(1rem, 4vw, 3rem);
  transform: translateY(-50%) scale(.96);
  width: 220px; aspect-ratio: 16/9;
  overflow: hidden; border-radius: var(--radius); pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 5;
}
.wl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wl-row:hover .wl-thumb { opacity: 1; transform: translateY(-50%) scale(1); }
.wl-arrow {
  flex: none; font-size: 1.3rem; color: var(--muted);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.wl-row:hover .wl-arrow { color: var(--accent); transform: translateX(4px); }
.wl-empty { color: var(--muted); padding: 3rem 0; }

@media (max-width: 640px) {
  .wl-row { grid-template-columns: 1fr auto; row-gap: .4rem; }
  .wl-thumb { display: none; }
}

/* ── Project page (text on top, full-screen horizontal gallery) ── */
.page-projeto { overflow-x: hidden; }
.projeto {
  margin-top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column;
  padding: clamp(2rem, 5vh, 4rem) 30px 1rem;
  gap: 1.25rem;
}
/* text block — name on the left, description column on the right */
.projeto-head {
  flex: none;
  margin-bottom: clamp(2rem, 5vh, 4rem);
  display: flex; align-items: flex-start;
  gap: clamp(2rem, 7vw, 7rem);
}
.projeto-head-name { flex: 0 0 clamp(200px, 22vw, 320px); }
.projeto-name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; margin-bottom: .35rem; }
.projeto-cat {
  font-size: .75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
}
.projeto-text {
  flex: 1; max-width: 760px;
  font-size: 1.05rem; line-height: 1.55; color: var(--text);
}
/* horizontal scroller fills the remaining height */
.projeto-scroll {
  flex: 1; min-height: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.projeto-scroll::-webkit-scrollbar { display: none; }
.projeto-imgs {
  display: flex; flex-direction: row; align-items: center;
  gap: 5px; height: 100%;
}
.projeto-imgs img {
  height: 100%; width: auto; flex: 0 0 auto;
  display: block; border-radius: var(--radius); background: var(--surface);
}
/* progress bar under the images */
.projeto-progress {
  flex: none;
  display: flex; align-items: center; gap: 14px;
}
.projeto-progress-track {
  flex: 1; height: 3px;
  background: var(--border);
}
.projeto-progress-bar {
  height: 100%; width: 0;
  background: var(--text);
}
.projeto-progress-pct {
  flex: none; min-width: 3.5ch; text-align: right;
  font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ===== About page (dark, immersive) ===== */
.ab { --ab-red: var(--accent); padding: 0 clamp(1.25rem, 6vw, 6rem); }

.ab-hero {
  min-height: 90vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 2rem);
  max-width: 1300px; margin: 0 auto;
}
.ab-kicker {
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ab-red); margin-bottom: 1.6rem;
}
.ab-statement {
  font-weight: 600; letter-spacing: -.025em; line-height: 1.04;
  font-size: clamp(2rem, 6vw, 5rem); max-width: 22ch;
}
.ab-statement .ab-em { color: var(--ab-red); display: block; margin-top: .35em; }
.ab-iconband {
  height: clamp(64px, 11vh, 128px);
  margin-top: clamp(2rem, 5vh, 4rem);
  background-image: url(assets/logo-mean-red.png?v=125);
  background-repeat: repeat-x;
  background-size: auto 52%;
  background-position: left center;
  opacity: .16;
}

/* ===== About — layout tipo pixelmatters ===== */
.ab-section-title {
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: #8f8f8d; margin-bottom: 2.5rem;
}

/* 1. Hero centrado */
.ab-lead {
  min-height: 82vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-top: calc(var(--nav-h) + 3rem); padding-bottom: clamp(2rem, 6vh, 4rem);
  max-width: 1100px; margin: 0 auto;
}
.ab-lead .ab-kicker { margin-bottom: 2rem; }
.ab-lead-statement {
  font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(2.4rem, 7vw, 6rem); max-width: 16ch;
}
.ab-lead-words {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
}
.ab-lead-words span {
  font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500;
  color: var(--ab-red); letter-spacing: -.01em;
}
.ab-lead-sub {
  margin-top: clamp(2rem, 6vh, 3.5rem); max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: #c9c9c6;
}

/* 2 & 5. Grelha de valores */
.ab-values { max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 9vh, 7rem) 0; }
.ab-values-head { max-width: 720px; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.ab-section-lead {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.4;
  color: #c9c9c6; letter-spacing: -.01em; margin-top: -1rem;
}
.ab-section-lead strong { color: #fff; }
.ab-values-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3.5rem);
}
.ab-values-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ab-value { border-top: 1px solid #262626; padding-top: 1.4rem; }
.ab-value-num {
  display: block; font-size: .8rem; letter-spacing: .1em;
  color: var(--ab-red); margin-bottom: 1rem; font-weight: 500;
}
.ab-value-title {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600;
  margin-bottom: .7rem; letter-spacing: -.01em;
  transition: color .3s var(--ease);
}
.ab-value:hover .ab-value-title { color: var(--ab-red); }
.ab-value-text { font-size: .98rem; line-height: 1.55; color: #a7a7a4; }

/* 3. A vida na MEAN */
.ab-life { max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 9vh, 7rem) 0; }
.ab-life-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ab-life-media {
  aspect-ratio: 4 / 3; background: #1a1a1a; border-radius: var(--radius);
  margin-bottom: 1.4rem; overflow: hidden;
  transition: transform .5s var(--ease);
}
.ab-life-card:hover .ab-life-media { transform: scale(1.02); }
.ab-life-title { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; margin-bottom: .7rem; }
.ab-life-text { font-size: .98rem; line-height: 1.55; color: #a7a7a4; }

@media (max-width: 860px) {
  .ab-values-grid, .ab-values-grid--2 { grid-template-columns: 1fr 1fr; }
  .ab-life-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ab-values-grid, .ab-values-grid--2 { grid-template-columns: 1fr; }
}

.ab-narr {
  max-width: 900px; margin: 0 auto;
  padding: clamp(3rem, 10vh, 8rem) 0;
  display: grid; gap: 1.8rem;
}
.ab-narr p { font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.5; color: #c9c9c6; }
.ab-narr strong { color: #fff; font-weight: 700; }

.ab-manifesto { max-width: 1100px; margin: 0 auto; padding: clamp(2rem, 6vh, 5rem) 0; }
.ab-manifesto-title {
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: #8f8f8d; margin-bottom: 2.5rem;
}
.ab-list { list-style: none; }
.ab-item {
  display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem;
  padding: 2.2rem 0; border-top: 1px solid #262626;
}
.ab-item:last-child { border-bottom: 1px solid #262626; }
.ab-num {
  font-size: 1rem; color: var(--ab-red);
  font-variant-numeric: tabular-nums; padding-top: .5rem;
}
.ab-item-title {
  font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 600;
  letter-spacing: -.01em; margin-bottom: .6rem;
  transition: color .25s var(--ease);
}
.ab-item-text { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: #a7a7a4; max-width: 60ch; }
.ab-item:hover .ab-item-title { color: var(--ab-red); }

/* Sticky "active word" column — only on the About page's manifesto section */
.ab-manifesto-grid { display: grid; grid-template-columns: .9fr 1.5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ab-manifesto-sticky-col { position: sticky; top: calc(var(--nav-h) + 3rem); }
.ab-manifesto-active {
  font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1; color: var(--ab-red);
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ab-manifesto-active.visible { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .ab-manifesto-grid { grid-template-columns: 1fr; }
  .ab-manifesto-sticky-col { display: none; }
}

.ab-cta { text-align: center; padding: clamp(4rem, 14vh, 10rem) 0; }
.ab-cta-title { font-size: clamp(1.8rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.1; margin-bottom: 2rem; }
.ab-cta-link {
  display: inline-block; font-size: 1.15rem; color: #fff;
  border-bottom: 2px solid var(--ab-red); padding-bottom: .2rem;
  transition: color .2s var(--ease);
}
.ab-cta-link:hover { color: var(--ab-red); }

.footer-dark { background: #0d0d0d; color: #6b6b68; border-top: 1px solid #1e1e1e; }

/* Footer claro com logo gigante (tipo alltrue.co) */
.ft2 {
  position: relative; z-index: 3;
  background: var(--accent); color: var(--brand-white);
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 3rem) 0;
}
/* bloco com a largura do logo: os textos ficam dentro das margens dele */
.ft2-inner { width: min(760px, 100%); margin: 0 auto; }
.ft2-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.ft2-col { display: flex; flex-direction: column; gap: .3rem; }
.ft2-label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: .2rem; }
.ft2-col a, .ft2-col p { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.3; color: var(--brand-white); }
.ft2-col a { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.ft2-col a:hover { background-size: 100% 1px; }
.ft2-logo { display: block; width: 100%; height: auto; margin-top: clamp(2.5rem, 8vh, 5rem); }
.ft2-copy { padding: 1.25rem 0 1.5rem; font-size: .78rem; opacity: .8; }

/* Team */
.ab-team { max-width: 1100px; margin: 0 auto; padding: clamp(2rem, 6vh, 5rem) 0; }
.ab-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.ab-member-photo { aspect-ratio: 3 / 4; background: #1a1a1a; border-radius: var(--radius); margin-bottom: 1rem; }
.ab-member-name { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 600; }
.ab-member-role { color: #a7a7a4; font-size: .95rem; margin-top: .3rem; }

/* Service tags */
.ab-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ab-tags li { font-size: .8rem; color: #c9c9c6; border: 1px solid #333; border-radius: 100px; padding: .3rem .85rem; }

/* Testimonial */
.ab-quotes { max-width: 1000px; margin: 0 auto; padding: clamp(4rem, 12vh, 9rem) 0; }
.ab-quote p { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.ab-quote cite { display: block; margin-top: 1.5rem; font-style: normal; color: var(--ab-red); font-size: 1rem; }

/* Locations */
.ab-locations { max-width: 1100px; margin: 0 auto; padding: clamp(2rem, 6vh, 5rem) 0; }
.ab-loc { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ab-loc-city { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; }
.ab-loc-addr { color: #a7a7a4; margin: 1rem 0 1.5rem; line-height: 1.6; }
.ab-loc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ab-loc-photo { aspect-ratio: 3 / 4; background: #1a1a1a; border-radius: var(--radius); }

/* Footer (pixelmatters-style: big statement + nav columns + bottom bar) */
.ft { padding: clamp(3rem, 8vh, 6rem) clamp(1.25rem, 6vw, 6rem) 0; }
.ft-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid #1e1e1e;
}
.ft-statement {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: #fff; max-width: 16ch; line-height: 1.15;
}
.ft-nav { display: flex; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; }
.ft-col { display: flex; flex-direction: column; gap: .9rem; min-width: 130px; }
.ft-col-title { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #6b6b68; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ft-col a, .ft-col span { color: #c9c9c6; font-size: .95rem; }
.ft-col a:hover { color: var(--ab-red); }
.ft-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
}
.ft-bottom-left { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ft-bottom a, .ft-bottom span { color: #c9c9c6; font-size: .9rem; }
.ft-bottom a:hover { color: var(--ab-red); }
.ft-social { display: flex; gap: 1.25rem; }
.ft-copy { padding: 1.25rem 0 1.5rem; border-top: 1px solid #1e1e1e; color: #6b6b68; font-size: .78rem; }
@media (max-width: 640px) {
  .ft-top { flex-direction: column; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}

/* "Como trabalhamos" culture grid (About page) */
.ab-culture { max-width: 1100px; margin: 0 auto; padding: clamp(2rem, 6vh, 5rem) 0; }
.ab-culture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.ab-culture-item { border-top: 1px solid #262626; padding-top: 1.5rem; }
.ab-culture-title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; margin-bottom: .6rem; }
.ab-culture-text { color: #a7a7a4; font-size: .95rem; line-height: 1.5; }

@media (max-width: 640px) {
  .ab-item { grid-template-columns: 2.4rem 1fr; gap: 1rem; }
  .ab-loc { grid-template-columns: 1fr; }
}

/* ===== Work page (fullscreen video hero) ===== */
.work-hero { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.work-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.work-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.10) 40%, rgba(13,13,13,.9));
}
.work-hero-overlay {
  position: absolute; z-index: 2;
  left: clamp(1.25rem, 6vw, 6rem); bottom: clamp(2rem, 8vh, 5rem);
}
.work-hero-title {
  font-size: clamp(2.5rem, 9vw, 8rem); font-weight: 600;
  letter-spacing: -.03em; line-height: .95; color: #fff; margin-top: .5rem;
}
.work-hero-scroll {
  position: absolute; z-index: 2;
  right: clamp(1.25rem, 6vw, 6rem); bottom: clamp(2rem, 8vh, 5rem);
  color: #fff; font-size: .8rem; letter-spacing: .15em; opacity: .8;
}

/* ===== Animation layer (MEAN) ===== */
.reveal { transform: translateY(40px); }            /* entrada mais marcada */
.ab-item { transition: background .35s var(--ease); }
.ab-num { transition: color .3s var(--ease), transform .3s var(--ease); }
.ab-item:hover .ab-num { transform: translateX(5px); }
.ab-member-photo { overflow: hidden; transition: transform .5s var(--ease); }
.ab-member:hover .ab-member-photo { transform: scale(1.03); }
.ab-member-name { transition: color .3s var(--ease); }
.ab-member:hover .ab-member-name { color: var(--ab-red); }
[data-parallax] { will-change: transform; }
/* cortina de transição entre páginas (mesma cor do loading: a página seguinte abre com o logo animado) */
.page-trans {
  position: fixed; inset: 0; z-index: 100001; background: var(--bordo);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* ===== Work — vídeo sticky + cortina overlay ===== */
.work-hero { position: sticky; top: 0; z-index: 0; }
.work-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 45%, rgba(0,0,0,.25)); }
.work-curtain {
  position: relative; z-index: 1;
  min-height: 100dvh; background: #ffffff; color: #111111;
  display: flex; align-items: center;
  padding: clamp(3rem, 10vw, 9rem);
}
.work-curtain-text {
  font-size: clamp(1.8rem, 5vw, 4rem); font-weight: 600;
  line-height: 1.08; letter-spacing: -.02em; max-width: 24ch;
}
/* footer precisa de stacking acima do vídeo sticky (que fica "preso" até ao fim do documento) */
.page-work .footer { position: relative; z-index: 2; }

/* Nav muda para escuro quando passa sobre fundo claro (cortina do Work) */
.nav.nav-on-light { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.nav-on-light .nav-links a,
.nav.nav-on-light .nav-clock { color: #111; }
.nav.nav-on-light::before { background: #111; }

/* header sem a linha do topo */
.nav::before { display: none; }

/* Work items: slide in from their side + fade */
.w-item.reveal-left,
.w-item.reveal-right {
  opacity: 0;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.w-item.reveal-left  { transform: translateX(-220px); }
.w-item.reveal-right { transform: translateX(220px); }
.w-item.reveal-left.visible,
.w-item.reveal-right.visible { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Work grid → single column */
  .w-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
}

@media (max-width: 480px) {
  .btn { padding: .7rem 1.4rem; font-size: .85rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .w-item.reveal-left,
  .w-item.reveal-right,
  .ab-manifesto-active {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-parallax] { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* Preloader: logo animado (WebP com transparência). Aparece na 1.ª abertura e a cada mudança de página.
   Só existe com JavaScript; se o script falhar, sai sozinho ao fim de 8 s. */
.preloader { display: none; }
.js .preloader { display: flex; animation: m-pre-safe .01s linear 8s forwards; }
@keyframes m-pre-safe { to { opacity: 0; visibility: hidden; } }
.preloader-anim { width: min(46vw, 420px); height: auto; display: block; }

/* ============================================================
   MEAN v2 — Home / Work / About
   Conteúdos e estrutura em PLANEAMENTO.md. Componentes com prefixo .m-
   O movimento vive em motion.js (data-reveal, data-split, data-line, data-media).
   Sem JS, ou com "reduzir movimento" ligado, tudo aparece sem animação.
   ============================================================ */
:root {
  --m-gut: clamp(20px, 2.1vw, 30px);     /* margem lateral da página */
  --m-gap: clamp(12px, 1.25vw, 24px);    /* intervalo entre colunas */
  --m-line: #262626;                     /* fios */
  --m-soft: #a7a7a4;                     /* texto secundário (contraste 8:1) */
  --m-ease: cubic-bezier(.16, 1, .3, 1);       /* saída longa e suave */
  --m-ease-io: cubic-bezier(.76, 0, .24, 1);   /* entra e sai */
}

/* ── Nav: alinhada à margem da página, sempre à vista ── */
.nav { padding: 0 var(--m-gut); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* ── Cursor: circunferência com um ponto no centro (como a capa do livro do Rick Rubin).
      O grupo faz "negativo" sobre o que está por baixo ── */
.cursor-layer {
  position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 99999; pointer-events: none;
  mix-blend-mode: difference; will-change: transform;
}
/* O grupo tem o tamanho de um ponto e é ele que anda (main.js), com a circunferência centrada nele. Antes ocupava o
   ecrã todo e só a circunferência andava lá dentro: o Safari tinha de a apagar de onde estava e às vezes deixava
   píxeis da cor do cursor pelo caminho, que só desapareciam quando o cursor voltava a passar por cima. */
.cursor-layer .cursor-dot { position: absolute; z-index: 1; mix-blend-mode: normal; }

/* a principal: circunferência + ponto.
   O raio é em px (não 50%) para o círculo esticar para uma pill sem passar por uma elipse. */
.cursor-dot {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px; overflow: hidden;
  background: transparent; border: 2px solid #fff;
  transition: opacity .2s ease, width .6s var(--m-ease), height .6s var(--m-ease);
}
.cursor-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #fff;
  transition: transform .35s var(--m-ease), opacity .2s ease;
}
/* sobre ligações: a circunferência cresce */
.cursor-dot.is-link { width: 56px; height: 56px; }

/* sobre os projetos: a circunferência estica na horizontal para uma pill só com contorno (sem fundo),
   o ponto sai e o texto entra em maiúsculas. A largura (--pill-w) é medida pelo motion.js. */
.cursor-dot.is-view { width: var(--pill-w, 72px); }
.cursor-dot.is-view::before { opacity: 0; transform: scale(0); }
.cursor-label {
  font-size: 10.5px; font-weight: 600; line-height: 1;
  letter-spacing: .14em; margin-right: -.14em;      /* compensa o espaço depois da última letra */
  text-transform: uppercase; color: #fff; white-space: nowrap;
  opacity: 0; transition: opacity .12s ease;
}
.cursor-dot.is-view .cursor-label { opacity: 1; transition: opacity .3s ease .16s; }

/* ── Base do movimento ── */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--m-ease), transform .9s var(--m-ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-line] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s var(--m-ease-io); transition-delay: var(--d, 0ms);
}
.js [data-line].is-in { transform: scaleX(1); }

/* palavras: cada uma sobe de dentro de uma máscara */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.wi { display: inline-block; will-change: transform; }
.js [data-split="rise"] .wi {
  transform: translate3d(0, 115%, 0);
  transition: transform 1.05s var(--m-ease);
  transition-delay: calc(var(--i, 0) * 26ms + var(--d, 0ms));
}
.js [data-split="rise"].is-in .wi { transform: none; }
/* palavras: acendem com o scroll */
.js [data-split="scrub"] .wi { opacity: .16; transition: opacity .3s linear; }
.js [data-split="scrub"] .wi.on { opacity: 1; }

/* ── Etiqueta de secção, ligação com seta ── */
.m-label {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); line-height: 1.2;
}
.m-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.m-link {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-size: clamp(1rem, 1.25vw, 1.25rem); letter-spacing: -.01em; color: var(--text);
  padding-bottom: .22em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: color .3s var(--ease);
}
.m-arrow { display: inline-block; transition: transform .5s var(--m-ease); }
.m-link:hover { color: var(--accent); }
.m-link:hover .m-arrow { transform: translateX(.35em); }
.m-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap;
  padding: 0 var(--m-gut) clamp(1.25rem, 2vw, 2rem);
}

/* ── Imagens: abrem de baixo para cima, com a imagem a assentar ── */
.m-media { position: relative; overflow: hidden; background: var(--surface); }
.m-media > img, .m-media > video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.5s var(--m-ease); }
.js .m-media[data-media] { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--m-ease-io); transition-delay: var(--d, 0ms); }
.js .m-media[data-media] > img { transform: scale(1.18); transition-delay: var(--d, 0ms); }
.js .m-media[data-media].is-in { clip-path: inset(0 0 0 0); }
.js .m-media[data-media].is-in > img { transform: scale(1); }

/* marcador de fotografia em falta */
.m-ph {
  position: relative; overflow: hidden; background: var(--surface);
  display: grid; place-items: center; text-align: center; padding: 1rem;
  color: var(--muted); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ============ HOME ============ */
/* Home — abertura (.m-open): a animação da Intro, em ecrã inteiro. As regras .hi-* estão mais acima. */
.m-open { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: var(--bordo); }
.m-open-frame.hi-hero { position: absolute; inset: 0; width: auto; min-height: 0; }
/* Home — vídeo dos projetos (.m-hero). Sem JavaScript é um bloco de ecrã inteiro; com JavaScript passa a
   calha com o vídeo preso lá dentro (ver "Home: vídeo depois da frase", mais abaixo). */
.m-hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #000; }
.m-hero-media { position: absolute; inset: 0; transform: scale(var(--hero-s, 1)); will-change: transform; background: var(--surface); }
.m-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-sheet { position: relative; z-index: 1; background: var(--bg); }

/* 2. frase de apresentação */
.m-statement {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap); row-gap: 1.75rem;
  padding: clamp(5.5rem, 17vh, 12rem) var(--m-gut) clamp(5rem, 15vh, 11rem);
}
.m-statement .m-label { grid-column: 1 / span 3; align-self: start; margin-top: .95em; }
.m-statement-text {
  grid-column: 4 / -1;
  font-size: clamp(2rem, 4.7vw, 5.4rem); font-weight: 500; line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}

/* 3. grelha de projetos: um grande, dois pequenos, um a toda a largura */
.m-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--m-gap); row-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
  padding: 0 var(--m-gut);
}
.m-tile { grid-column: span 12; display: block; color: inherit; min-width: 0; }
.m-tile--lg { grid-column: span 6; }
.m-tile--sm { grid-column: span 3; }
.m-tile .m-media { aspect-ratio: 16 / 10; }
.m-tile--full .m-media { aspect-ratio: 2 / 1; }
.m-tile:hover .m-media.is-in > img, .m-tile:focus-visible .m-media.is-in > img { transform: scale(1.045); transition-delay: 0s; }
.m-cap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline;
  padding-top: .85rem;
  font-size: clamp(1rem, 1.4vw, 1.55rem); letter-spacing: -.025em; line-height: 1.2;
}
.js .m-cap[data-reveal] { transition-delay: calc(var(--d, 0ms) + 260ms); }
.m-tile--lg .m-cap, .m-tile--full .m-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m-cap-meta { display: flex; justify-content: space-between; gap: 1rem; min-width: 0; }
.m-cap-type, .m-cap-sector { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cap-sector { color: var(--muted); }
.m-tile--sm .m-cap-sector { display: none; }
/* nome ↔ frase curta: trocam ao passar o cursor */
.m-cap-name { display: block; height: 1.2em; overflow: hidden; min-width: 0; }
.m-cap-name > span {
  display: block; height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .65s var(--m-ease);
}
.m-tile:hover .m-cap-name > span, .m-tile:focus-visible .m-cap-name > span { transform: translateY(-100%); }
.m-featured { padding-bottom: clamp(1rem, 3vh, 2rem); }

/* 4. o que fazemos (versão curta) */
.m-svc { padding: clamp(5.5rem, 16vh, 11rem) 0 clamp(5rem, 14vh, 10rem); }
.m-svc-lead {
  padding: 0 var(--m-gut); margin-top: clamp(.75rem, 2vw, 1.5rem);
  font-size: clamp(1.5rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; max-width: 22ch;
}
.m-svc-list { list-style: none; margin-top: clamp(2.5rem, 6vw, 5rem); }
.m-rule { display: block; height: 1px; background: var(--m-line); margin: 0 var(--m-gut); }
.m-svc-row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1.5fr) minmax(0, 1fr) 2.5rem;
  column-gap: var(--m-gap); align-items: baseline;
  padding: clamp(1rem, 2vw, 1.9rem) var(--m-gut); color: inherit;
  transition: opacity .45s var(--ease);
}
.m-svc-num { font-size: .8rem; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.m-svc-name {
  font-size: clamp(1.9rem, 5vw, 5.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.04;
  transition: transform .65s var(--m-ease);
}
.m-svc-desc { font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.45; color: var(--muted); max-width: 36ch; transition: color .35s var(--ease), opacity .9s var(--m-ease), transform .9s var(--m-ease); }
.m-svc-arrow {
  justify-self: end; font-size: clamp(1.2rem, 2vw, 2rem); color: var(--accent);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .35s var(--ease), transform .65s var(--m-ease);
}
@media (hover: hover) {
  .m-svc-list:hover .m-svc-row { opacity: .32; }
  .m-svc-list:hover .m-svc-row:hover { opacity: 1; }
  .m-svc-row:hover .m-svc-name { transform: translateX(.28em); }
  .m-svc-row:hover .m-svc-desc { color: var(--text); }
  .m-svc-row:hover .m-svc-arrow { opacity: 1; transform: none; }
}

/* fecho com convite ao contacto (Work, About) */
.m-cta {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); justify-items: start;
  padding: clamp(6rem, 20vh, 14rem) var(--m-gut);
}
.m-cta-title { font-size: clamp(2.2rem, 6.4vw, 7.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; max-width: 14ch; text-wrap: balance; }

/* ============ WORK ============ */
.page-work .work-lead { padding-left: var(--m-gut); padding-right: var(--m-gut); }
.page-work .work-lead .ab-kicker { margin-bottom: 0; }
.m-work { padding: clamp(1rem, 3vh, 2.5rem) 0 clamp(2rem, 6vh, 4rem); }

/* ============ ABOUT ============ */
.m-ahero { padding: calc(var(--nav-h) + clamp(3.5rem, 13vh, 9rem)) var(--m-gut) 0; }
.m-ahero-title {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(2.2rem, 6.1vw, 7.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; max-width: 17ch;
  text-wrap: balance;
}
.m-accent { color: var(--accent); }
/* secção: coluna da etiqueta + coluna do conteúdo */
.m-sec {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--m-gap); row-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(5rem, 15vh, 11rem) var(--m-gut) 0;
}
.m-sec-side { grid-column: 1 / span 3; align-self: start; }
.m-sec-side--sticky { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
.m-sec-main { grid-column: 4 / -1; min-width: 0; }
.m-lead { font-size: clamp(1.5rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.m-body { margin-top: clamp(1.1rem, 2vw, 1.75rem); font-size: clamp(1.02rem, 1.25vw, 1.3rem); line-height: 1.5; color: var(--m-soft); max-width: 54ch; }
.m-body + .m-body { margin-top: 1em; }

/* clientes */
.m-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--m-line); border-left: 1px solid var(--m-line); }
.m-logo {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  border-right: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line);
  color: var(--muted); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.m-logo:hover { color: var(--text); background: #111; }

/* manifesto: contador preso ao lado, a linha a meio do ecrã ganha foco */
.m-mani-count { margin-top: 1.25rem; font-size: clamp(2.2rem, 4.6vw, 4.8rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.m-mani-count small { font-size: .3em; letter-spacing: 0; color: var(--muted); margin-left: .5em; font-weight: 500; }
.m-mani { list-style: none; margin-top: clamp(2.5rem, 6vw, 5rem); }
.m-mani > li {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--m-gap);
  padding: clamp(1.5rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--m-line);
  transition: opacity .5s var(--ease);
}
.m-mani > li:last-child { border-bottom: 1px solid var(--m-line); }
.js .m-mani.is-live > li { opacity: .42; }
.js .m-mani.is-live > li.is-active { opacity: 1; }
.m-mani-num { font-size: .8rem; color: var(--accent); letter-spacing: .06em; padding-top: .75em; font-variant-numeric: tabular-nums; }
.m-mani-title { font-size: clamp(1.6rem, 3.5vw, 3.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
.m-mani-text { margin-top: .8rem; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.5; color: var(--m-soft); max-width: 52ch; }

/* o que fazemos (versão completa): disciplina + ramificações */
.m-disc { list-style: none; margin-top: clamp(2.5rem, 6vw, 5rem); }
.m-disc > li {
  display: grid; grid-template-columns: 3.25rem minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--m-gap); align-items: start;
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--m-line);
}
.m-disc > li:last-child { border-bottom: 1px solid var(--m-line); }
.m-disc-num { font-size: .8rem; color: var(--accent); letter-spacing: .06em; padding-top: .8em; font-variant-numeric: tabular-nums; }
.m-disc-name { position: sticky; top: calc(var(--nav-h) + 1rem); font-size: clamp(1.7rem, 3.6vw, 3.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
.m-disc-pitch { font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.4; letter-spacing: -.01em; max-width: 40ch; }
.m-branches { list-style: none; margin-top: clamp(1.25rem, 2.5vw, 2rem); columns: 2; column-gap: var(--m-gap); }
.m-branches li {
  position: relative; break-inside: avoid; padding: .55rem 0; border-top: 1px solid var(--m-line);
  font-size: clamp(.95rem, 1.1vw, 1.1rem); color: var(--m-soft);
  transition: color .3s var(--ease), padding-left .45s var(--m-ease), opacity .9s var(--m-ease), transform .9s var(--m-ease);
}
.m-branches li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .35s var(--m-ease);
}
@media (hover: hover) {
  .m-branches li:hover { color: var(--text); padding-left: .95rem; }
  .m-branches li:hover::before { transform: scale(1); }
}

/* testemunhos */
.m-quote blockquote { font-size: clamp(1.5rem, 3.1vw, 3.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; max-width: 26ch; text-wrap: balance; }
.m-quote figcaption { margin-top: 1.5rem; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.m-quote figcaption strong { display: block; color: var(--text); font-weight: 500; }
.m-quote + .m-quote { margin-top: 3rem; }
.js .m-quotes-stage { display: grid; }
.js .m-quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s var(--ease), transform .8s var(--m-ease); }
.js .m-quote.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.m-quotes-nav { display: none; align-items: center; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.js .m-quotes-nav { display: flex; }
.m-quotes-count { font-size: .85rem; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; min-width: 5.5em; }
.m-btn-round {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #3a3a3a; background: transparent; color: var(--text);
  display: grid; place-items: center; font: inherit; font-size: 1.1rem;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .45s var(--m-ease);
}
.m-btn-round:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.m-btn-round:active { transform: scale(.93); }
.m-btn-round:focus-visible, .m-tile:focus-visible, .m-svc-row:focus-visible, .m-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.m-about .m-cta { margin-top: clamp(4rem, 10vh, 8rem); border-top: 1px solid var(--m-line); }

/* ── Ecrãs médios e pequenos ── */
@media (max-width: 1000px) {
  .m-tile--lg { grid-column: span 12; }
  .m-tile--sm { grid-column: span 6; }
  .m-sec-side, .m-sec-main, .m-statement .m-label, .m-statement-text { grid-column: 1 / -1; }
  .m-sec-side--sticky { position: static; }
  .m-statement .m-label { margin-top: 0; }
  .m-mani-count { display: none; }
  .m-disc > li { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: 1rem; }
  .m-disc-name { position: static; }
  .m-disc-body { grid-column: 2; }
}
@media (max-width: 700px) {
  .m-tile--sm { grid-column: span 12; }
  .m-tile--sm .m-cap-sector { display: block; }
  .m-tile--sm .m-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .m-tile--full .m-media { aspect-ratio: 16 / 10; }
  .m-svc-row { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: .4rem; }
  .m-svc-desc { grid-column: 2; }
  .m-svc-arrow { display: none; }
  .m-mani > li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .m-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-branches { columns: 1; }
}

/* ── Reduzir movimento: tudo visível, sem transições ── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-line], .js [data-split] .wi,
  .js .m-media[data-media], .js .m-media[data-media] > img,
  .js .m-hero-video, .js .m-mani.is-live > li {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important; animation: none !important;
  }
  .m-hero-media { transform: none !important; }
  .nav { transition: none; }
}

/* projetos sem imagem: bloco cinzento provisório */
.m-media--ph { background: #262626; display: grid; place-items: center; }
.js .m-media.m-media--ph[data-media] { transition: clip-path 1.25s var(--m-ease-io) var(--d, 0ms), background-color .5s var(--ease) 0s; }
.m-media--ph span { color: #7d7d7b; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.m-tile:hover .m-media--ph, .m-tile:focus-visible .m-media--ph { background: #303030; }

/* footer alinhado à margem da página */
.ft { padding-left: var(--m-gut); padding-right: var(--m-gut); }

/* Work: abertura */
.page-work .work-lead .m-label { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.page-work .work-lead-title { font-weight: 500; letter-spacing: -.045em; line-height: 1; font-size: clamp(2.3rem, 6.4vw, 7.2rem); max-width: 15ch; text-wrap: balance; }
.page-work .work-lead-sub { color: var(--m-soft); }

/* About: acertos */
#servicos { scroll-margin-top: var(--nav-h); }
/* manter as transições de hover depois de reveladas */
.js .m-branches li[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms), color .3s var(--ease), padding-left .45s var(--m-ease);
}
.js .m-svc-desc[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms), color .35s var(--ease);
}
.m-ahero-title { max-width: 21ch; }

/* ============================================================
   MEAN v3 — proporções e dinâmicas
   Referências: madeinevolve.com (proporções e movimento), twks.ch (header a meio do ecrã)
   e flabbergast.agency (abertura do vídeo da Home).
   Só mexe em escala, espaçamento e movimento: a estrutura e os textos ficam iguais.
   Ficaram de fora as linhas verticais de fundo, as maiúsculas e a fonte monoespaçada da referência.
   ============================================================ */
:root {
  --m-gut: clamp(14px, 1.1vw, 20px);              /* margens estreitas */
  --m-gap: clamp(10px, 1.05vw, 18px);
  --m-ease: cubic-bezier(.19, 1, .22, 1);         /* saída longa */
  --m-ease-io: cubic-bezier(.77, 0, .175, 1);     /* entra e sai, para as grandes revelações */
  --m-sec: clamp(5.5rem, 10vw, 10rem);            /* respiração entre secções */
  --m-micro: .75rem;                              /* 12 px: números, legendas pequenas */
  --m-text: clamp(.8125rem, .92vw, .9375rem);     /* 13 a 15 px: texto corrido, em colunas estreitas */
  --m-mid: clamp(1.45rem, 2.7vw, 3.3rem);         /* nomes em listas */
  --m-phrase: clamp(1.75rem, 3.55vw, 4.7rem);     /* TODAS as frases do site: o tamanho da frase de abertura da Home */
}

/* ── Nav: tudo em texto, do mesmo tamanho, sem fundo e sem pill.
      Usa "negativo" (difference): lê-se sobre o vídeo, sobre imagens e sobre texto, sem sombras. ── */
.nav, .nav.scrolled, .nav.nav-over {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
  mix-blend-mode: difference;
}
/* sobre o vídeo da Home: sem "negativo"; branco ou preto conforme o brilho do vídeo (motion.js).
   Sobre o bordô da abertura da Home também sem "negativo": branco simples, sem tingir. */
.nav.nav--onvideo { mix-blend-mode: normal; }
.nav--onvideo .nav-links a, .nav--onvideo .nav-cta, .nav--onvideo .nav-lang { transition: color .3s linear; }
.nav--onvideo .nav-logo { transition: filter .3s linear; }
.nav.nav--onvideo .is-dark a, .nav.nav--onvideo .is-dark a:hover, .nav.nav--onvideo .is-dark a[aria-current="page"],
.nav.nav--onvideo .is-dark .nav-lang { color: #0a0a0a; }
.nav--onvideo .is-dark .nav-logo { filter: invert(1); }
/* o header sai de cena quando o footer chega ao topo */
.nav { transition: opacity .3s linear; }
.nav.nav--away { opacity: 0; pointer-events: none; }
.nav-left-group { gap: 2.25rem; }
.nav-right-group { gap: 1.55rem; }
.nav-logo { height: 17px; }
.nav-links { gap: 1.55rem; }
.nav-links a, .nav-cta, .nav-lang {
  font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
}
.nav-cta, .nav-lang { display: inline-block; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; }
.nav-lang { cursor: pointer; }
.nav-links a:hover, .nav-cta:hover, .nav-lang:hover,
.nav-links a[aria-current="page"], .nav-cta[aria-current="page"] {
  color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.nav-links a:focus-visible, .nav-cta:focus-visible, .nav-lang:focus-visible, .nav-logo-link:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
/* no telemóvel o header fica inteiro, sem menu escondido: menu à esquerda (sem o logo até 600 px, ver "Header
   (experiência)"), contacto e língua à direita, só mais pequenos, para caber numa linha até nos ecrãs de 320 px */
@media (max-width: 768px) {
  .nav-links, .nav-right-group { gap: clamp(10px, 3.2vw, 1.55rem); }
  .nav-links a, .nav-cta, .nav-lang { font-size: clamp(13px, 3.75vw, .9375rem); }
  .nav-logo { height: clamp(14px, 4.2vw, 17px); }
}
/* entrada: os elementos do menu sobem um a um quando a página abre */
.js:not(.is-ready) .nav-logo-link, .js:not(.is-ready) .nav-links a,
.js:not(.is-ready) .nav-cta, .js:not(.is-ready) .nav-lang { opacity: 0; }
.js.is-ready .nav-logo-link, .js.is-ready .nav-links a, .js.is-ready .nav-cta, .js.is-ready .nav-lang {
  animation: m-nav-in 1.1s var(--m-ease) backwards; animation-delay: var(--nav-d, 0ms);
}
.nav-links a:nth-child(1) { --nav-d: 60ms; }
.nav-links a:nth-child(2) { --nav-d: 120ms; }
.nav-links a:nth-child(3) { --nav-d: 180ms; }
.nav-links a, .nav-cta, .nav-lang { white-space: nowrap; }   /* os itens do menu nunca partem em duas linhas ("Talk with us") */
.nav-cta { --nav-d: 240ms; }
.nav-lang { --nav-d: 300ms; }
@keyframes m-nav-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* língua: enquanto o português não é aplicado, a página não aparece (evita ver o inglês a piscar) */
html.i18n-wait body { visibility: hidden; }
/* troca de língua na hora: as palavras e letras são refeitas sem repetir a animação de entrada */
.i18n-swap [data-split] .wi, .i18n-swap .m-label .m-ch, .i18n-swap .m-label::before { transition: none !important; }

/* ── Hovers imediatos ── */
.m-link { font-size: var(--m-text); letter-spacing: -.02em; transition: color .12s linear; }
.m-arrow { transition: transform .4s var(--m-ease); }

/* ── Etiquetas: mais pequenas; entram letra a letra, por ordem aleatória ── */
.m-label { font-size: .6875rem; letter-spacing: .12em; gap: .55rem; }
.m-label::before { width: 5px; height: 5px; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .m-label[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .m-label .m-ch { opacity: 0; }
.js .m-label.is-in .m-ch { opacity: 1; transition: opacity 0s linear var(--cd, 0ms); }
.js .m-label[data-reveal]::before { transform: scale(0); transition: transform .6s var(--m-ease); }
.js .m-label[data-reveal].is-in::before { transform: scale(1); }

/* ── Texto: sobe linha a linha (as palavras de cada linha entram juntas) ── */
.js [data-split="rise"] .wi {
  transition: transform 1.15s var(--m-ease);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
}
/* acende linha a linha com o scroll (a opacidade de cada linha vem do motion.js, em contínuo) */
.js [data-split="scrub"] .wi { opacity: var(--o, .26); transition: opacity .25s linear; }
/* títulos de página: entram desfocados e ganham foco */
.js [data-blur] {
  opacity: 0; filter: blur(.16em); transform: translate3d(0, .05em, 0);
  transition: opacity 1s ease, filter 1.4s var(--m-ease), transform 1.4s var(--m-ease);
  transition-delay: var(--d, 0ms);
}
.js [data-blur].is-in { opacity: 1; filter: blur(0); transform: none; }

/* ── Home: abertura ──
   A animação da Intro (logo e grelha de bolas, em fundo bordô) é o objeto. O ecrã do logo sobe como uma
   cortina e deixa ver o ecrã em branco, onde ela já está: pequena, inteira (sem recortes) e ao centro.
   Depois cresce, num só movimento, até encher o ecrã. O header entra quando ela acaba de crescer.
   São só transformações (translate / scale), sem máscaras: correm lisas em qualquer browser.
   O motion.js põe .is-ready, .is-nav e .is-open no <html>; .is-bare = página aberta sem o ecrã do logo. */
.js .page-home { --mini: .3; }                                /* tamanho da miniatura, em fração do ecrã */
.js:not(.is-open) .page-home .m-open { background: var(--brand-white, #f4f4f1); }
.js:not(.is-open) .page-home .m-open-frame { scale: var(--mini); translate: 0 9vh; }
.js.is-bare:not(.is-open) .page-home .m-open-frame { opacity: 0; }
/* o logo e as bolas só entram quando a cortina começa a subir */
.js:not(.is-ready) .page-home .hi-hero .hi-dots { opacity: 0; transition: none; }
.js:not(.is-ready) .page-home .hi-hero .hi-line-in { transform: translateY(110%); transition: none; }
/* versão simples (sem WebGL): a mesma ordem — fundo, depois as bolas, depois o logo */
.js.is-ready .page-home .hi-hero .hi-dots { transition-delay: 1.6s; }
.js.is-ready .page-home .hi-hero.is-in .hi-line .hi-line-in { transition-delay: 2.15s; }
/* a miniatura assenta enquanto a cortina sobe e, sem chegar a parar, começa a crescer */
.js.is-ready:not(.is-open) .page-home .m-open-frame {
  animation: m-rise 1.3s cubic-bezier(.33, 1, .68, 1) both,
             m-grow 1.5s cubic-bezier(.7, 0, .3, 1) .5s both;
}
.js.is-ready.is-bare:not(.is-open) .page-home .m-open-frame {
  animation: m-rise 1.3s cubic-bezier(.33, 1, .68, 1) both,
             m-show .6s ease both,
             m-grow 1.5s cubic-bezier(.7, 0, .3, 1) .5s both;
}
@keyframes m-rise { from { translate: 0 9vh; } to { translate: 0 0; } }
@keyframes m-grow { from { scale: var(--mini); } to { scale: 1; } }
@keyframes m-show { from { opacity: 0; } to { opacity: 1; } }
/* o ecrã do logo sai para cima, como uma cortina */
@media (prefers-reduced-motion: no-preference) {
  .js .page-home .preloader.done {
    opacity: 1; transition: none;
    animation: m-pre-up .9s cubic-bezier(.76, 0, .24, 1) both;
  }
}
@keyframes m-pre-up { to { transform: translate3d(0, -100%, 0); } }
/* na Home o header só entra quando a abertura acaba de encher o ecrã (.is-nav) */
.js:not(.is-nav) .page-home .nav-logo-link, .js:not(.is-nav) .page-home .nav-links a,
.js:not(.is-nav) .page-home .nav-cta, .js:not(.is-nav) .page-home .nav-lang { opacity: 0; animation: none; }
/* ── Home: vídeo depois da frase (movimento de ondastudio.co) ──
   O vídeo chega com a página, em ecrã inteiro; fica preso ao ecrã, encolhe até uma miniatura ao centro
   sobre o fundo escuro e só depois se solta e sai com a página.
   A .m-hero é uma calha mais alta do que o ecrã; a .m-hero-media é a moldura presa lá dentro.
   --hero-travel = scroll em que o vídeo fica preso; --hero-hold = fração desse scroll em que ainda está
   inteiro; --hero-min = tamanho da miniatura. A escala (--hero-s) vem do motion.js. */
.js .page-home .m-hero {
  --hero-min: .4; --hero-travel: 82vh; --hero-hold: .15;
  overflow: visible; overflow: clip;   /* clip corta sem prender o sticky */
  height: calc(100vh + var(--hero-travel));
  height: calc(100svh + var(--hero-travel));
  min-height: 0; background: var(--bg);
}
.js .page-home .m-hero-media { position: sticky; inset: auto; top: 0; width: 100%; height: 100vh; height: 100svh; }
@media (max-width: 700px) {
  .js .page-home .m-hero { --hero-min: .5; --hero-travel: 65vh; }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-home .m-hero { --hero-travel: 0vh; }                 /* sem encolher: um bloco de ecrã inteiro */
}

/* ── Home: frase de apresentação — bloco alto e estreito à esquerda ── */
.m-statement { padding: var(--m-sec) var(--m-gut); row-gap: clamp(1.25rem, 2vw, 2rem); }
.m-statement .m-label { grid-column: 1 / -1; margin-top: 0; }
.m-statement-text { grid-column: 1 / span 7; text-wrap: wrap; }

/* ── Frases: uma só escala em todas as páginas, a da frase de abertura da Home.
      Títulos de página, frases de secção, testemunhos e fechos têm todos o mesmo tamanho. ── */
.m-statement-text, .page-work .work-lead-title, .m-ahero-title, .m-cta-title,
.m-lead, .m-svc-lead, .m-quote blockquote,
.m-pj-statement, .m-pj-lead, .m-pj-phrase, .m-pj-next-name {
  font-size: var(--m-phrase); font-weight: 500; line-height: .98; letter-spacing: -.045em;
}

/* ── Grelha de projetos: intervalos estreitos, legendas pequenas ── */
.m-grid { row-gap: clamp(1.75rem, 3.2vw, 3.2rem); }
.m-head { padding-bottom: clamp(.75rem, 1.2vw, 1.1rem); }
.m-cap { padding-top: .6rem; font-size: var(--m-text); letter-spacing: -.02em; line-height: 1.2; }
.m-featured { padding-bottom: 0; }

/* ── Frases de secção ── */
.m-lead { max-width: none; }
.m-svc-lead { max-width: 58%; }

/* ── Home: o que fazemos — linhas compactas; ao passar o cursor a linha inverte ── */
.m-svc { padding: var(--m-sec) 0; }
.m-svc-list { margin-top: clamp(2rem, 4vw, 4rem); }
.m-svc-row {
  grid-template-columns: 2.5rem minmax(0, 1.2fr) minmax(0, 1fr) 2rem;
  padding: clamp(.7rem, 1.1vw, 1rem) var(--m-gut);
  transition: background-color .12s linear, color .12s linear;
}
.m-svc-num { font-size: var(--m-micro); letter-spacing: 0; transition: color .12s linear; }
.m-svc-name { font-size: var(--m-mid); line-height: 1; letter-spacing: -.045em; transition: none; }
.m-svc-desc { font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; max-width: 34ch; }
.js .m-svc-desc[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms), color .12s linear;
}
.m-svc-arrow { font-size: var(--m-mid); line-height: 1; transition: opacity .12s linear, transform .4s var(--m-ease), color .12s linear; }
@media (hover: hover) {
  .m-svc-list:hover .m-svc-row { opacity: 1; }
  .m-svc-row:hover { background: var(--text); color: var(--bg); }
  .m-svc-row:hover .m-svc-name { transform: none; }
  .m-svc-row:hover .m-svc-num, .m-svc-row:hover .m-svc-desc, .m-svc-row:hover .m-svc-arrow { color: var(--bg); }
}

/* ── Fecho ── */
.m-cta { padding: var(--m-sec) var(--m-gut); }
.m-cta-title { max-width: 58%; }

/* ── Work: frase à esquerda, texto pequeno em coluna estreita à direita ── */
.page-work .work-lead {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap);
  padding: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem)) var(--m-gut) clamp(2rem, 5vh, 3.5rem);
}
.page-work .work-lead > * { grid-column: 1 / -1; }
.page-work .work-lead > .work-lead-title { grid-column: 1 / span 7; max-width: none; }
.page-work .work-lead > .work-lead-sub {
  grid-column: 9 / -1; margin-top: .3em; max-width: 34ch;
  font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; text-indent: 2.4em; color: var(--m-soft);
}

/* ── About ── */
.m-ahero { padding: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem)) var(--m-gut) 0; }
.m-ahero-title { margin-top: clamp(1.25rem, 2vw, 2rem); max-width: 58%; }
.m-sec { padding: var(--m-sec) var(--m-gut) 0; }
/* a frase fica à esquerda e o texto pequeno numa coluna estreita à direita */
.m-sec-main { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--m-gap); align-items: start; }
.m-sec-main > * { grid-column: 1 / -1; }
.m-sec-main > .m-lead { grid-column: 1 / span 6; }
.m-sec-main > .m-body { grid-column: 7 / -1; margin-top: .3em; }
.m-sec-main > .m-body + .m-body { margin-top: .9em; }
.m-body { font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; text-indent: 2.4em; max-width: 36ch; }
.m-logos { margin-top: clamp(2rem, 4vw, 3.5rem); }
.m-logo { transition: color .12s linear, background-color .12s linear; }

/* manifesto: título à esquerda, texto pequeno à direita */
.m-mani { margin-top: clamp(2rem, 4vw, 3.5rem); }
.m-mani > li { grid-template-columns: 2.5rem minmax(0, 1fr); padding: clamp(1rem, 1.6vw, 1.5rem) 0; }
.m-mani > li > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--m-gap); align-items: baseline; }
.m-mani-num { font-size: var(--m-micro); letter-spacing: 0; padding-top: .55em; }
.m-mani-title { font-size: var(--m-mid); line-height: 1; letter-spacing: -.045em; }
.m-mani-text { margin-top: 0; font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; max-width: 34ch; }
.m-mani-count { font-size: var(--m-mid); }

/* o que fazemos (completo): nome, frase pequena e serviços em lista apertada */
.m-disc { margin-top: clamp(2rem, 4vw, 3.5rem); }
.m-disc > li { grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 5fr); padding: clamp(1.1rem, 1.8vw, 1.7rem) 0 clamp(1.4rem, 2.4vw, 2.2rem); }
.m-disc-num { font-size: var(--m-micro); letter-spacing: 0; padding-top: .55em; }
.m-disc-name { font-size: var(--m-mid); line-height: 1; letter-spacing: -.045em; }
.m-disc-pitch { font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; text-indent: 2.4em; max-width: 36ch; }
.m-branches { margin-top: clamp(1rem, 2vw, 1.6rem); }
.m-branches li { padding: .4rem 0; font-size: var(--m-text); letter-spacing: -.02em; }
.js .m-branches li[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms), color .12s linear, padding-left .4s var(--m-ease);
}

/* testemunhos */
.m-quote blockquote { max-width: 24ch; }
.m-quote figcaption { margin-top: 1.1rem; font-size: var(--m-text); letter-spacing: -.02em; line-height: 1.25; }
.m-quotes-count { font-size: var(--m-micro); letter-spacing: 0; }
.m-btn-round { width: 44px; height: 44px; font-size: 1rem; transition: background-color .12s linear, color .12s linear, border-color .12s linear, transform .4s var(--m-ease); }
.m-about .m-cta { margin-top: var(--m-sec); }

/* ── Ecrãs médios e pequenos ── */
@media (max-width: 1000px) {
  .m-statement-text { grid-column: 1 / -1; }
  .m-sec-main { display: block; }
  .m-sec-main > .m-body { margin-top: 1.1rem; }
  .page-work .work-lead > .work-lead-title { grid-column: 1 / -1; }
  .page-work .work-lead > .work-lead-sub { grid-column: 1 / -1; margin-top: 1.25rem; }
  .m-ahero-title, .m-cta-title, .m-svc-lead { max-width: none; }
  .m-mani > li > div { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .m-disc > li { grid-template-columns: 2.25rem minmax(0, 1fr); }
}
@media (max-width: 700px) {
  :root { --m-text: .875rem; }
  .js .page-home { --mini: .42; }
  .m-svc-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .m-mani > li { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* ── Reduzir movimento ── */
@media (prefers-reduced-motion: reduce) {
  .js [data-blur], .js .m-label .m-ch, .js .m-label[data-reveal]::before {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .js .nav-logo-link, .js .nav-links a, .js .nav-cta, .js .nav-lang { opacity: 1 !important; animation: none !important; }
  .js .page-home .m-open-frame { scale: none !important; translate: none !important; opacity: 1 !important; animation: none !important; }
}

/* ============================================================
   FOOTER — proporções de esrbespoke.au, identidade MEAN
   Ecrã inteiro no vermelho escuro da MEAN (o bordô da Intro e do ecrã do logo), com texto e logo no
   vermelho do logótipo. As duas cores estão em --mean-red-dark e --mean-red. Texto a 14 px com entrelinha de 14 px, em maiúsculas
   espaçadas; grelha de 12 colunas com 16 px de intervalo; margens de 28 px (cima/baixo) e 32 px (lados);
   logo com 32% da largura do ecrã, a meio da altura; contactos em baixo, a partir da 9.ª coluna.
   Em ecrãs largos o footer está preso ao ecrã e é revelado pela página a subir.
   ============================================================ */
:root {
  /* Só há dois vermelhos no site, os da Intro e do favicon: --bordo (#531316) e --accent (#E62834). */
  --mean-red-dark: var(--bordo);   /* vermelho escuro: ecrã do logo, cortina entre páginas, footer, barra */
  --mean-red: var(--accent);       /* vermelho do logótipo MEAN */
}
.m-foot { position: relative; z-index: 6; background: var(--mean-red-dark); color: var(--mean-red); }

/* ── Barra de progresso (todas as páginas, criada pelo motion.js) ──
   Presa ao fundo do ecrã, na cor do footer. Enche com o scroll e fica completa no momento em que o
   footer começa a aparecer; como têm a mesma cor e o footer passa por cima dela, a barra cheia
   transforma-se no footer que sobe. */
.m-progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 6px; z-index: 5; pointer-events: none;
  background: var(--mean-red-dark); transform: scaleX(0); transform-origin: 0 50%;
}
.m-progress.is-off { display: none; }
/* Onde o browser sabe animar com o scroll (Safari 26, Chrome), a barra enche ao ritmo do próprio scroll, sem
   esperar pelo JavaScript (no telemóvel a barra andava aos saltinhos). Acaba quando o topo do footer toca no fundo
   do ecrã: --foot-h (altura do footer) vem do motion.js, que só põe .is-css se o browser souber fazer isto. */
@supports (animation-timeline: scroll()) {
  .m-progress.is-css {
    animation: m-progress auto linear both;
    animation-timeline: scroll(root);
    animation-range: 0 calc(100% - var(--foot-h, 0px));
  }
}
@keyframes m-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.m-foot-in {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  padding: 28px 32px; background: var(--mean-red-dark); color: var(--mean-red);
  font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
}
.m-foot a { color: inherit; text-decoration: none; }
.m-foot a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-foot-top, .m-foot-bottom {
  flex: 1 1 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px;
}
.m-foot-top { align-items: start; }
.m-foot-bottom { align-items: end; }
.m-foot-name { grid-column: 1 / span 3; justify-self: start; }
.m-foot-desc { grid-column: 4 / span 4; }
.m-foot-desc span, .m-foot-block p > * { display: block; }
.m-foot-block p > a { width: fit-content; }   /* o link só é clicável no texto, não na linha toda */
.m-foot-nav { grid-column: 9 / span 3; display: grid; row-gap: 3.5px; justify-items: start; }
.m-foot-nav a { position: relative; }
.m-foot-nav a[aria-current="page"]::before {                 /* bola que marca a página atual */
  content: ""; position: absolute; left: -16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor;
}
.m-foot-logo { display: block; flex: none; width: 32vw; }
.m-foot-logo img { display: block; width: 100%; height: auto; }
.m-foot a.m-foot-logo:hover { text-decoration: none; }
.m-foot-social { grid-column: 1 / span 3; justify-self: start; }
.m-foot-link { grid-column: 4 / span 3; justify-self: start; }
.m-foot-blocks { grid-column: 9 / -1; display: grid; row-gap: 32px; }
.m-foot-block h3 { margin: 0 0 14px; font: inherit; letter-spacing: inherit; color: inherit; opacity: .68; }
.m-foot-block p { margin: 0; }
.m-foot a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* sobre o footer e sobre o painel de contacto o cursor fica no vermelho dos textos (em "negativo" ficaria azulado) */
.cursor-layer.is-foot, .cursor-layer.is-talk { mix-blend-mode: normal; }
.cursor-layer.is-foot .cursor-dot, .cursor-layer.is-talk .cursor-dot { border-color: var(--mean-red); }
.cursor-layer.is-foot .cursor-dot::before, .cursor-layer.is-talk .cursor-dot::before { background: var(--mean-red); }

/* revelação: o conteúdo fica preso ao ecrã e o footer funciona como janela */
@media (min-width: 769px) and (min-height: 620px) {
  .m-foot { height: 100vh; height: 100svh; clip-path: inset(0); }
  .m-foot-in { position: fixed; left: 0; right: 0; bottom: 0; height: 100vh; height: 100svh; min-height: 0; }
}

/* telemóvel: 6 colunas; nome e descrição em cima, contactos a meio, redes e logo a toda a largura em baixo */
@media (max-width: 768px) {
  .m-foot-in { padding: 28px 18px; }
  .m-foot-top { flex: none; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 40px; }
  .m-foot-name { grid-column: 1 / span 3; }
  .m-foot-desc { grid-column: 4 / -1; }
  .m-foot-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 22px; }
  .m-foot-nav a[aria-current="page"]::before { display: none; }
  .m-foot-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .m-foot-bottom { order: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: end; row-gap: 64px; padding-top: 72px; }
  .m-foot-blocks { grid-column: 1 / -1; grid-row: 1; }
  .m-foot-social { grid-column: 1 / span 3; grid-row: 2; }
  .m-foot-link { grid-column: 4 / -1; grid-row: 2; justify-self: end; }
  .m-foot-logo { order: 3; width: 100%; margin-top: 36px; }   /* espaço entre o Instagram/LinkedIn e o logo */
}
/* Telemóvel (e janelas baixas, onde não há a revelação de cima): no fim da página o conteúdo fica parado e o
   footer sobe por cima dele. O motion.js marca com .m-stick o <main> e o que houver entre ele e o footer, e dá a
   cada um a distância do seu topo ao footer (--to-foot) e o sítio onde está na página (--top-max): todos se prendem
   no instante em que o footer começa a aparecer no fundo do ecrã (numa página que não chega a encher o ecrã, cada
   bloco fica onde está). */
@media (max-width: 768px), (max-height: 619px) {
  .m-stick {
    position: sticky;
    top: min(var(--top-max), calc(100vh - var(--to-foot)));
    top: min(var(--top-max), calc(100svh - var(--to-foot)));
  }
  /* o footer tem a altura do ecrã de cada momento (dvh): no fim da página a barra do Safari está recolhida e o
     ecrã fica mais alto; com 100svh ficava uma faixa da página por cima do footer até a barra voltar a aparecer.
     +1px: a altura da página pode ter uma fração de píxel, que deixava um fio da página por cima do footer. */
  .m-foot-in { min-height: calc(100vh + 1px); min-height: calc(100dvh + 1px); }
}

/* ============================================================
   PROJETO — estrutura de burocratik.com/work (página de projeto), linguagem MEAN
   Barra do projeto, frase + ficha técnica, capa, resumo em duas colunas, capítulos com o texto
   preso de um lado e uma pilha de imagens do outro (a alternar), frases e imagens de margem a
   margem entre capítulos, e o projeto seguinte no fim. As frases usam a escala única (--m-phrase).
   ============================================================ */
.m-pj { padding-top: var(--nav-h); }

/* 1. abertura */
.m-pj-bar {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap); align-items: baseline;
  padding: clamp(1.5rem, 4vh, 3rem) var(--m-gut) .85rem;
  font-size: var(--m-text); letter-spacing: -.02em; line-height: 1.2;
}
.m-pj-back { grid-column: 1 / span 3; justify-self: start; }
.m-pj-name { grid-column: 4 / span 6; color: var(--m-soft); }
.m-pj-site { grid-column: 10 / -1; justify-self: start; }
.m-pj-bar a { color: var(--text); transition: color .12s linear; }
.m-pj-bar a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-pj-bar a:hover .m-arrow { transform: translate(.2em, -.2em); }
.m-pj-bar a:hover .m-arrow--back { transform: translateX(-.3em); }
.m-pj-top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap); align-items: start;
  padding: clamp(1.5rem, 3vw, 3rem) var(--m-gut) clamp(2.5rem, 5vw, 5rem);
}
.m-pj-statement { grid-column: 1 / span 8; text-wrap: balance; }
.m-pj-meta { grid-column: 10 / -1; display: grid; row-gap: 1.05rem; margin: .35em 0 0; font-size: var(--m-text); line-height: 1.25; letter-spacing: -.02em; }
.m-pj-meta dt { color: var(--muted); }
.m-pj-meta dd { margin: 0; }
.m-pj-meta dd span { display: block; }
.m-pj-cover-wrap { padding: 0 var(--m-gut); }
.m-pj-cover { aspect-ratio: 16 / 8; }

/* 2. resumo */
.m-pj-summary {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap); align-items: start;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--m-gut) var(--m-sec);
}
.m-pj-lead { grid-column: 1 / span 11; }   /* quase a largura toda, para não ficar em muitas linhas */
.m-pj-summary:has(.m-pj-cols) .m-pj-lead { grid-column: 1 / span 6; }   /* com colunas de texto ao lado (modelo) fica a meio */
.m-pj-cols { grid-column: 9 / -1; columns: 2; column-gap: var(--m-gap); margin-top: .3em; font-size: var(--m-text); line-height: 1.22; letter-spacing: -.02em; color: var(--m-soft); }
.m-pj-cols p { break-inside: avoid; text-indent: 2.4em; margin: 0 0 .9em; }

/* 3. imagem de margem a margem */
.m-pj-full .m-media { aspect-ratio: 16 / 9; }

/* 4. capítulos: texto preso de um lado, pilha de imagens do outro */
.m-pj-chapter {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-gap); align-items: start;
  padding: var(--m-sec) var(--m-gut);
}
.m-pj-text { grid-column: 1 / span 4; grid-row: 1; position: sticky; top: calc(var(--nav-h) + 1.25rem); }
.m-pj-text .m-label { margin-bottom: 1.1rem; }
.m-pj-text .m-body { margin-top: 0; max-width: 40ch; }
.m-pj-text .m-body + .m-body { margin-top: .9em; }
.m-pj-stack {
  grid-column: 6 / -1; grid-row: 1;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--m-gap);
}
.m-pj-stack > * { grid-column: 1 / -1; min-width: 0; }
.m-pj-stack > .is-narrow { grid-column: 3 / -1; }       /* mais estreita, encostada ao lado de fora */
.m-pj-stack > .is-small { grid-column: 4 / -1; }
.m-pj-chapter--flip .m-pj-text { grid-column: 9 / -1; }
.m-pj-chapter--flip .m-pj-stack { grid-column: 1 / span 7; }
.m-pj-chapter--flip .m-pj-stack > .is-narrow { grid-column: 1 / span 5; }
.m-pj-chapter--flip .m-pj-stack > .is-small { grid-column: 1 / span 4; }
.m-media.r-169 { aspect-ratio: 16 / 9; }
.m-media.r-32 { aspect-ratio: 3 / 2; }
.m-media.r-45 { aspect-ratio: 4 / 5; }
.m-media.r-11 { aspect-ratio: 1 / 1; }

/* 5. frase a toda a largura */
.m-pj-quote { padding: var(--m-sec) var(--m-gut); }
.m-pj-phrase { max-width: 78%; }

/* 9. projeto seguinte */
.m-pj-next { display: block; padding: var(--m-sec) var(--m-gut) var(--m-gut); color: inherit; }
.m-pj-next-head { display: grid; justify-items: start; row-gap: clamp(.9rem, 1.4vw, 1.25rem); margin-bottom: clamp(1.25rem, 2.2vw, 2rem); }
.m-pj-next-name { display: inline-flex; align-items: baseline; gap: .35em; }
.m-pj-next-media, .m-pj-next .m-media { display: block; }
.m-pj-next .m-media { aspect-ratio: 16 / 7; }
.m-pj-next:hover .m-arrow, .m-pj-next:focus-visible .m-arrow { transform: translateX(.3em); }
.m-pj-next:hover .m-media--ph, .m-pj-next:focus-visible .m-media--ph { background: #303030; }
.m-pj-next:focus-visible, .m-pj-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 1000px) {
  .m-pj-back { grid-column: 1 / span 6; }
  .m-pj-site { grid-column: 7 / -1; justify-self: end; }
  .m-pj-name { grid-column: 1 / -1; grid-row: 2; margin-top: .6rem; }
  .m-pj-statement, .m-pj-lead { grid-column: 1 / -1; }
  .m-pj-meta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--m-gap); margin-top: clamp(2rem, 6vw, 3rem); }
  .m-pj-cols { grid-column: 1 / -1; columns: 1; margin-top: 1.25rem; max-width: 46ch; }
  .m-pj-text, .m-pj-chapter--flip .m-pj-text { grid-column: 1 / -1; grid-row: 1; position: static; margin-bottom: clamp(1.75rem, 5vw, 2.5rem); }
  .m-pj-stack, .m-pj-chapter--flip .m-pj-stack { grid-column: 1 / -1; grid-row: 2; }
  .m-pj-phrase { max-width: none; }
}
@media (max-width: 700px) {
  .m-pj-cover { aspect-ratio: 4 / 3; }
  .m-pj-full .m-media { aspect-ratio: 4 / 3; }
  .m-pj-next .m-media { aspect-ratio: 16 / 10; }
  .m-pj-stack > .is-narrow, .m-pj-stack > .is-small { grid-column: 2 / -1; }
  .m-pj-chapter--flip .m-pj-stack > .is-narrow, .m-pj-chapter--flip .m-pj-stack > .is-small { grid-column: 1 / span 6; }
}

/* ============================================================
   TALK WITH US — painel de contacto (criado pelo main.js, igual em todas as páginas)
   Entra da direita para a esquerda, por cima da página. Fundo no vermelho escuro da MEAN e tudo o resto
   no vermelho claro, com a tipografia do footer (14 px em maiúsculas espaçadas); a frase tem o tamanho
   das frases do site e os campos são linhas, sem caixas.
   ============================================================ */
/* Sem `html.talk-open { overflow: hidden }`: mudar o overflow da página no instante em que o painel
   começa a deslizar corta a animação de fecho no Safari (o painel desaparece de repente). O scroll por
   trás já fica preso pelo Lenis (stop() ao abrir) e o painel tem overscroll-behavior: contain. */
.m-talk-veil {
  position: fixed; inset: 0; z-index: 900; background: rgba(10, 10, 10, .55);
  opacity: 0; visibility: hidden; transition: opacity .45s linear, visibility 0s linear .45s;
}
.talk-open .m-talk-veil { opacity: 1; visibility: visible; transition: opacity .6s linear; }
.m-talk {
  position: fixed; top: 0; right: 0; z-index: 901;
  width: max(520px, 44vw); max-width: 100vw; height: 100vh; height: 100dvh;
  background: var(--mean-red-dark); color: var(--mean-red);
  font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none;
  transform: translate3d(100%, 0, 0); visibility: hidden;
  transition: transform .55s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .55s;
}
.talk-open .m-talk { transform: none; visibility: visible; transition: transform .75s cubic-bezier(.76, 0, .24, 1); }
.m-talk-in { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; padding: 28px 32px; }
.m-talk a { color: inherit; text-decoration: none; }
.m-talk a:hover, .m-talk-close:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-talk a:focus-visible, .m-talk button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.m-talk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.m-talk-close, .m-talk-submit { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer; }
.m-talk-close { letter-spacing: inherit; text-transform: inherit; }
.m-talk-title {
  margin: clamp(2.5rem, 9vh, 5.5rem) 0 clamp(2rem, 6vh, 3.5rem); max-width: 11em; color: inherit;
  font-size: var(--m-phrase); font-weight: 500; line-height: .98; letter-spacing: -.045em; text-transform: none;
}

/* campos: etiqueta pequena, texto grande, uma linha por baixo */
.m-talk-form { display: grid; row-gap: clamp(22px, 3.4vh, 34px); }
.m-talk-field { display: grid; row-gap: 12px; cursor: text; }
.m-talk-field > span, .m-talk-budget legend, .m-talk-block h3 { opacity: .68; transition: opacity .12s linear; }
.m-talk-field:focus-within > span { opacity: 1; }
.m-talk-field input, .m-talk-field textarea, .m-talk-submit {
  font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.25; letter-spacing: -.02em; text-transform: none;
}
.m-talk-field input, .m-talk-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0 0 10px;
  font-family: inherit; font-weight: inherit; color: inherit; caret-color: currentColor; background: transparent;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.m-talk-field textarea { resize: none; min-height: calc(1.25em * 3 + 10px); }
.m-talk-field input:focus, .m-talk-field textarea:focus { box-shadow: 0 1px 0 0 currentColor; }   /* a linha engrossa */
/* preenchimento automático do browser: sem o fundo claro que ele põe */
.m-talk-field input:-webkit-autofill, .m-talk-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--mean-red); caret-color: var(--mean-red);
  box-shadow: 0 0 0 100px var(--mean-red-dark) inset;
}
.m-talk-field input:-webkit-autofill:focus, .m-talk-field textarea:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--mean-red-dark) inset, 0 1px 0 0 var(--mean-red);
}
/* orçamento: opções em texto, com a bola que marca a página atual no footer */
.m-talk-budget { min-width: 0; margin: 0; padding: 0; border: 0; }
.m-talk-budget legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; }   /* float: comporta-se como um bloco normal */
.m-talk-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }   /* as mesmas duas colunas dos contactos ao fundo */
.m-talk-opt { position: relative; display: inline-flex; justify-self: start; cursor: pointer; }
.m-talk-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.m-talk-opt span { position: relative; padding-left: 16px; }   /* opções na cor normal do painel; a escolhida distingue-se pela bola cheia */
.m-talk-opt span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%;
}
.m-talk-opt:hover span, .m-talk-opt input:checked + span { opacity: 1; }
.m-talk-opt input:checked + span::before { background: currentColor; }
.m-talk-opt input:focus-visible + span { outline: 1px solid currentColor; outline-offset: 4px; }
/* enviar */
.m-talk-send { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 24px; margin-top: 4px; }
.m-talk-submit { padding-bottom: .25em; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; }
.m-talk-submit .m-arrow { display: inline-block; transition: transform .5s var(--m-ease); }
.m-talk-submit:hover .m-arrow { transform: translateX(.35em); }
.m-talk-submit:disabled { opacity: .5; cursor: default; }
.m-talk .form-feedback, .m-talk .form-feedback.success, .m-talk .form-feedback.error {
  margin: 0; min-height: 14px; font-size: inherit; text-align: left; color: inherit;
}
/* contactos diretos, ao fundo */
.m-talk-bottom {
  margin-top: auto; padding-top: clamp(2.5rem, 8vh, 5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; align-items: start;
}
.m-talk-block h3 { margin: 0 0 14px; font: inherit; letter-spacing: inherit; color: inherit; }
.m-talk-block p { margin: 0; }
.m-talk-block p > * { display: block; }
.m-talk-ext { justify-self: start; }
.m-talk-block p > a { width: fit-content; }   /* o link (e o traço do hover) só ocupa o texto, não a linha toda */
/* o conteúdo entra em cadeia, depois de o painel abrir */
.m-talk-rise { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .2s linear, transform 0s linear .3s; }
.talk-open .m-talk-rise {
  opacity: 1; transform: none;
  transition: opacity .7s ease calc(.32s + var(--i, 0) * .055s), transform .9s var(--m-ease) calc(.32s + var(--i, 0) * .055s);
}
@media (max-width: 700px) {
  .m-talk-in { padding: 20px var(--m-gut) 24px; }
  .m-talk-title { margin: 2.25rem 0 1.75rem; }
  .m-talk-bottom { padding-top: 2.5rem; row-gap: 24px; }
  .m-talk-block { grid-column: 1 / -1; }   /* o email não cabe em meia largura */
}
@media (prefers-reduced-motion: reduce) {
  .m-talk, .talk-open .m-talk, .m-talk-veil, .talk-open .m-talk-veil { transition: none; }
  .m-talk-rise, .talk-open .m-talk-rise { opacity: 1; transform: none; transition: none; }
}

/* ── Aparecimento com blur ao dar scroll, no site todo (tipo cardenasdesigngroup.com) ──
   Tudo o que aparece com o scroll entra desfocado (20px) e ganha foco em 1.2s.
   · .reveal (main.js): aparece, sobe 1.5rem e ganha foco.
   · motion.js: só se junta o desfoque, o movimento de cada bloco fica como estava
     ([data-reveal] sobe e aparece, [data-split="rise"] palavras sobem da máscara,
     [data-media] imagem destapa de baixo para cima). Os atrasos em cascata (--d) mantêm-se. */
.reveal {
  opacity: 0; transform: translateY(1.5rem); filter: blur(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease),
              background-color .35s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }

.js [data-reveal] {
  filter: blur(20px);
  transition: opacity .9s var(--m-ease), transform .9s var(--m-ease), filter 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-split="rise"] { filter: blur(20px); transition: filter 1.2s var(--ease) var(--d, 0ms); }
.js .m-media[data-media] {
  filter: blur(20px);
  transition: clip-path 1.25s var(--m-ease-io), filter 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in, .js [data-split="rise"].is-in, .js .m-media[data-media].is-in { filter: none; }

/* blocos que já tinham transições próprias (hover): juntar-lhes o desfoque */
.js .m-label[data-reveal] { transition: filter 1.2s var(--ease); }   /* letras continuam a entrar uma a uma */
.js .m-branches li[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms),
              filter 1.2s var(--ease) var(--d, 0ms), color .12s linear, padding-left .4s var(--m-ease);
}
.js .m-svc-desc[data-reveal] {
  transition: opacity .9s var(--m-ease) var(--d, 0ms), transform .9s var(--m-ease) var(--d, 0ms),
              filter 1.2s var(--ease) var(--d, 0ms), color .12s linear;
}
.js .m-media.m-media--ph[data-media] {
  transition: clip-path 1.25s var(--m-ease-io) var(--d, 0ms), filter 1.2s var(--ease) var(--d, 0ms),
              background-color .5s var(--ease) 0s;
}

/* frases que acendem com o scroll ([data-split="scrub"]): cada palavra ganha foco à medida que acende.
   --o vem do motion.js (.26 por acender → 1 acesa); o desfoque acompanha, de 20px a 0 */
.js [data-split="scrub"] .w { overflow: visible; }   /* a máscara das palavras cortava o desfoque (só é precisa no "rise") */
.js [data-split="scrub"] .wi {
  filter: blur(calc((1 - var(--o, .26)) / .74 * 20px));
  transition: opacity .25s linear, filter .25s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .js [data-reveal], .js [data-split="rise"], .js .m-media[data-media] {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  .js [data-split="scrub"] .wi { filter: none !important; }
}

/* ── Setas: um só desenho em todo o site, a traço médio (2/24) com pontas e cantos retos ──
   O glifo da fonte (→ ← ↗ ↳) fica no HTML por acessibilidade e como reserva, mas é escondido;
   a seta é a máscara pintada com currentColor, por isso acompanha as cores de hover já existentes. */
:root {
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M3.5 12h16M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
  --arrow-left:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M20.5 12h-16M11 5.5L4.5 12l6.5 6.5'/%3E%3C/svg%3E");
  --arrow-ext:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E");
  --arrow-turn:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M5 3.5v12.5h15.5M15.5 11l5 5-5 5'/%3E%3C/svg%3E");
}
.m-arrow, .m-svc-arrow {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; flex: none;
  overflow: hidden; text-indent: 200%; white-space: nowrap;        /* esconde o glifo */
  background: currentColor;
  -webkit-mask: var(--arrow-right) center / contain no-repeat; mask: var(--arrow-right) center / contain no-repeat;
}
.m-arrow--back { -webkit-mask-image: var(--arrow-left); mask-image: var(--arrow-left); }
.m-arrow--ext  { -webkit-mask-image: var(--arrow-ext);  mask-image: var(--arrow-ext); }
.m-arrow--turn { -webkit-mask-image: var(--arrow-turn); mask-image: var(--arrow-turn); width: .95em; height: .95em; vertical-align: -.1em; }
/* ── Botões redondos dos testemunhos (← →) ──
   A seta é desenhada ao centro (o texto do botão fica invisível). Ao passar o rato: o botão enche de claro
   da borda para o centro, e a seta sai na direção para onde aponta enquanto outra entra pelo lado oposto
   (são os dois pseudo-elementos; o círculo do botão serve de máscara). */
.m-quotes-nav { gap: .6rem; }
.m-btn-round {
  position: relative; overflow: hidden; isolation: isolate; width: 48px; height: 48px; font-size: 0;
  border-color: rgba(244, 244, 241, .35);          /* contorno visível sobre o preto (3:1) */
  box-shadow: inset 0 0 0 0 var(--text);
  transition: box-shadow .45s var(--m-ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--m-ease);
}
.m-btn-round::before, .m-btn-round::after {
  /* presas ao centro exato do círculo (o texto invisível do botão ocupava uma linha e empurrava-as para cima) */
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: currentColor;
  -webkit-mask: var(--arrow-right) center / contain no-repeat; mask: var(--arrow-right) center / contain no-repeat;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.m-btn-round::after { transform: translateX(-48px); }                     /* a seta que espera fora do círculo */
.m-btn-round[data-prev]::before, .m-btn-round[data-prev]::after { -webkit-mask-image: var(--arrow-left); mask-image: var(--arrow-left); }
.m-btn-round[data-prev]::after { transform: translateX(48px); }
@media (hover: hover) {
  .m-btn-round:hover { background: transparent; color: var(--bg); border-color: var(--text); box-shadow: inset 0 0 0 26px var(--text); }
  .m-btn-round:hover::before { transform: translateX(48px); }
  .m-btn-round[data-prev]:hover::before { transform: translateX(-48px); }
  .m-btn-round:hover::after { transform: none; }
}
.m-btn-round:active { color: var(--bg); border-color: var(--text); box-shadow: inset 0 0 0 26px var(--text); transform: scale(.93); }
@media (prefers-reduced-motion: reduce) {
  .m-btn-round, .m-btn-round::before, .m-btn-round::after { transition: none; }
}

/* ── Sublinhado de hover animado, em todos os links que sublinhavam ao passar o rato ──
   Entra da esquerda para a direita e sai para a direita (a origem muda de lado sem transição).
   Substitui o text-decoration; a página atual (header e footer) fica com o traço sempre visível. */
.nav-links a, .nav-cta, .nav-lang, .m-foot a:not(.m-foot-logo), .m-pj-bar a, .m-talk a, .m-talk-close {
  position: relative; text-decoration: none;
}
.nav-links a:hover, .nav-cta:hover, .nav-lang:hover, .m-foot a:hover, .m-pj-bar a:hover, .m-talk a:hover, .m-talk-close:hover,
.nav-links a[aria-current="page"], .nav-cta[aria-current="page"], .m-foot-nav a[aria-current="page"] {
  text-decoration: none;
}
.nav-links a::after, .nav-cta::after, .nav-lang::after, .m-foot a:not(.m-foot-logo)::after, .m-pj-bar a::after, .m-talk a::after, .m-talk-close::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .65s cubic-bezier(.65, 0, .35, 1);   /* lento e uniforme, para se ver o traço a entrar e a sair */
}
.nav-links a:hover::after, .nav-cta:hover::after, .nav-lang:hover::after, .m-foot a:not(.m-foot-logo):hover::after, .m-pj-bar a:hover::after, .m-talk a:hover::after, .m-talk-close:hover::after,
.nav-links a[aria-current="page"]::after, .nav-cta[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left center;
}
/* Footer: a página atual já é marcada pela bola, por isso não fica sublinhada (o sublinhado só aparece no
   hover, como nos outros links). No telemóvel a bola não existe: aí a página atual mantém o traço. */
@media (max-width: 768px) {
  .m-foot-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after, .nav-cta::after, .nav-lang::after, .m-foot a::after, .m-pj-bar a::after, .m-talk a::after, .m-talk-close::after { transition: none; }
}

/* ── Formulário do painel "Talk with us" ──
   Nome e empresa lado a lado (a empresa à direita), nas mesmas duas colunas das opções e dos contactos. */
.m-talk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.4vh, 34px) 40px; }
/* o que a pessoa escreve: letra mais pequena do que a do botão (17px; abaixo de 16px o iPhone faz zoom ao focar) */
.m-talk-field input, .m-talk-field textarea { font-size: 17px; }
/* a caixa da mensagem cresce com o texto (main.js acerta a altura); sem barra de scroll própria */
.m-talk-field textarea { overflow: hidden; }
@media (max-width: 520px) { .m-talk-row { grid-template-columns: minmax(0, 1fr); } }

/* Botão de enviar: ao passar o rato, a seta sai pela direita e outra entra pela esquerda,
   e a linha por baixo recolhe para a direita e volta a desenhar-se a partir da esquerda. */
.m-talk-submit { position: relative; display: inline-flex; align-items: center; gap: .4em; background: none; }
.m-talk-submit::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: left center;
}
.m-talk-submit-a { position: relative; display: block; flex: none; width: 1em; height: 1em; overflow: hidden; }
.m-talk-submit-a .m-arrow {
  position: absolute; left: 0; top: 0; vertical-align: 0;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.m-talk-submit-a .m-arrow + .m-arrow { transform: translateX(-130%); }
.m-talk-submit:not(:disabled):hover .m-talk-submit-a .m-arrow,
.m-talk-submit:not(:disabled):focus-visible .m-talk-submit-a .m-arrow { transform: translateX(130%); }
.m-talk-submit:not(:disabled):hover .m-talk-submit-a .m-arrow + .m-arrow,
.m-talk-submit:not(:disabled):focus-visible .m-talk-submit-a .m-arrow + .m-arrow { transform: none; }
.m-talk-submit:not(:disabled):hover::after { animation: m-talk-line .8s cubic-bezier(.65, 0, .35, 1); }
.m-talk-submit:not(:disabled):active .m-talk-submit-t { transform: translateX(.12em); }
.m-talk-submit-t { display: inline-block; transition: transform .25s var(--m-ease); }
@keyframes m-talk-line {
  0%     { transform: scaleX(1); transform-origin: right center; }
  45%    { transform: scaleX(0); transform-origin: right center; }
  45.01% { transform: scaleX(0); transform-origin: left center; }
  100%   { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .m-talk-submit-a .m-arrow, .m-talk-submit-t { transition: none; }
  .m-talk-submit:not(:disabled):hover::after { animation: none; }
}

/* ── Home: o vídeo ganha cantos redondos à medida que encolhe ──
   Em ecrã inteiro não tem cantos; na miniatura fica com 14px à vista (o raio é dividido pela escala,
   para não encolher com o vídeo). clip-path em vez de overflow + border-radius: recorta o vídeo de
   forma fiável também no Safari. --hero-s vem do motion.js; --hero-min é o tamanho da miniatura. */
.js .page-home .m-hero-media {
  --hero-r: 14px;
  clip-path: inset(0 round calc((1 - var(--hero-s, 1)) / (1 - var(--hero-min, .4)) * var(--hero-r) / var(--hero-s, 1)));
}

/* ── About, disciplinas ──
   A frase por cima de cada lista de serviços começa encostada à margem, sem o avanço da primeira linha. */
.m-disc-pitch { text-indent: 0; }
/* Durante o scroll os itens não reagem ao rato: o que passa por baixo dele deixava de dar o salto para a
   direita (o hover só volta quando a página pára; .is-scrolling vem do main.js). */
.is-scrolling .m-branches li:hover { color: var(--m-soft); padding-left: 0; }
.is-scrolling .m-branches li:hover::before { transform: scale(0); }

/* ── Listas de serviços (Home) e de disciplinas (About): bolinha vermelha em vez do número ──
   O número fica no HTML (ordem da lista, leitores de ecrã) mas não se vê; no lugar dele desenha-se a bolinha. */
.m-svc-num, .m-disc-num { font-size: 0; line-height: 0; letter-spacing: 0; padding: 0; }
.m-svc-num::before, .m-disc-num::before {
  content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
/* Home: título, texto, bolinha e seta ao centro entre as duas linhas divisórias (antes: pela base do texto) */
.m-svc-row { align-items: center; }
/* About: a bolinha fica à altura do meio da 1.ª linha do título. O título (e a bolinha) ficam sempre no
   topo do seu bloco: já não descem presos ao ecrã com o scroll até à linha divisória seguinte. */
.m-disc-num { display: flex; align-items: center; height: var(--m-mid); }
.m-disc-name { position: static; }

/* ── About, "What we believe": o texto da direita fica ao centro entre as duas linhas divisórias ──
   (antes alinhava pela base do título). O título mantém-se onde estava, no topo da linha. */
.m-mani-text { align-self: center; }

/* ── Header (experiência): logo MEAN ao centro, menu à esquerda ──
   O logo sai da fila e fica preso ao centro exato do header (sem transform, para não interferir com a
   animação de entrada, que o usa). O menu passa a começar na margem esquerda. Para voltar atrás: apagar este bloco. */
.nav-logo-link { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; }
/* no telemóvel o header não tem o logo (a pedido): fica só o menu à esquerda e o contacto e a língua à direita */
@media (max-width: 600px) {
  .nav-logo-link { display: none; }
}

/* ── Footer: mais espaço entre as linhas ──
   A letra continua a 14px; a altura de linha passa de 14px (linhas coladas) para 18px. A lista de páginas
   tinha um intervalo extra de 3.5px que deixa de ser preciso: todos os grupos ficam com o mesmo ritmo.
   O sublinhado do hover sobe 2px para ficar à mesma distância do texto de antes. */
.m-foot-in { line-height: 18px; }
.m-foot-nav { row-gap: 0; }
.m-foot a:not(.m-foot-logo)::after { bottom: -1px; }

/* ── Footer: uma só bola na lista de páginas, que desliza para o link debaixo do rato (main.js) ──
   Substitui a bola fixa de cada link (::before). Só no computador: no telemóvel a lista é uma linha e
   a página atual é marcada pelo traço. */
.m-foot-nav { position: relative; }
.m-foot-ball {
  position: absolute; left: -16px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--m-ease), opacity .25s linear;
}
.m-foot-ball.is-on { opacity: 1; }
.m-foot-nav.has-ball a[aria-current="page"]::before { display: none; }
@media (max-width: 768px) { .m-foot-ball { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-foot-ball { transition: opacity .2s linear; } }

/* ── Forms: opções (Project type e orçamento) sempre alinhadas com a sua bola ──
   A bola ficava a meio da caixa da opção; em ecrãs estreitos, quando a opção vizinha partia em duas linhas,
   a caixa esticava e a bola descia, desalinhada do texto. Agora cada opção tem só a altura do seu texto e
   fica ao centro da linha: uma opção de uma linha ao lado de outra de duas fica a meio dessas duas, com a
   bola junto ao texto; as bolas dos dois lados ficam à mesma altura. */
.m-talk-opts { align-items: center; }

/* ── About, listas de serviços: grelha de duas colunas em vez de colunas de texto (multi-coluna) ──
   No Safari, o primeiro item da 2.ª coluna ("Brand guidelines", "Portfolios") aparecia depois dos outros:
   as colunas de texto baralham o cálculo da posição dos itens, de que depende a entrada com o scroll.
   A grelha enche primeiro a coluna da esquerda, de cima para baixo (--rows = n.º de linhas, definido em cada
   lista no HTML), por isso a ordem e o aspeto são os mesmos. No telemóvel fica uma só coluna, como antes. */
.m-branches {
  columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), auto); grid-auto-flow: column; column-gap: var(--m-gap);
}
@media (max-width: 700px) {
  .m-branches { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}


/* ── Página de projeto: blocos para projetos com mais imagens do que texto (1.º: Metais Jaime Dias) ──
   .m-pj-pair  = duas imagens lado a lado, entre as margens da página (no telemóvel, uma por baixo da outra);
   .r-43       = proporção 4:3, que faltava às outras (r-169, r-32, r-45, r-11);
   .m-pj-links = mais de uma ligação na barra do projeto (website, Instagram…), lado a lado. */
.m-pj-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-gap);
  padding: var(--m-gap) var(--m-gut);
}
.m-pj-pair > .m-media:nth-child(2) { --d: 120ms; }
.m-media.r-43 { aspect-ratio: 4 / 3; }
.m-pj-links { display: flex; flex-wrap: wrap; gap: .3em 1.6em; }
@media (max-width: 700px) {
  .m-pj-pair { grid-template-columns: minmax(0, 1fr); }
  .m-pj-pair > .m-media:nth-child(2) { --d: 0ms; }
}

/* ── Páginas de projeto: todas as imagens ficam entre as margens da página ──
   As imagens grandes (.m-pj-full) iam de um lado ao outro do ecrã, sem margem; agora têm a mesma margem
   lateral que a capa, os capítulos e os pares de imagens. Vale para todos os projetos e para o modelo. */
.m-pj-full { padding: 0 var(--m-gut); }

/* ── Páginas de projeto: sequências de imagens ──
   Duas imagens grandes seguidas ficam separadas pelo mesmo intervalo que as outras; dois pares seguidos também
   (sem isto ficavam coladas, ou com o dobro do espaço).
   .m-pj-pair--fit = par de imagens com proporções diferentes: cada uma fica com a largura que lhe dá a mesma
   altura da vizinha, sem cortes (--r = largura / altura da imagem, posta em cada bloco no HTML). */
.m-pj-full + .m-pj-full { margin-top: var(--m-gap); }
.m-pj-pair + .m-pj-pair { padding-top: 0; }
.m-pj-pair--fit { display: flex; }
.m-pj-pair--fit > .m-media { flex: var(--r, 1.5) 1 0; min-width: 0; aspect-ratio: var(--r, 1.5); }
@media (max-width: 700px) {
  .m-pj-pair--fit { display: grid; }
}

/* ── Header sobre imagens: preto ou branco conforme o brilho da imagem (main.js põe .nav--onimg e .is-ink) ──
   Sem "negativo" enquanto está sobre uma imagem: sobre um cinzento médio o negativo ficava da cor do fundo. */
.nav.nav--onimg { mix-blend-mode: normal; }
.nav--onimg .nav-links a, .nav--onimg .nav-cta, .nav--onimg .nav-lang { transition: color .25s linear; }
.nav--onimg .nav-logo { transition: filter .25s linear; }
.nav.nav--onimg .is-ink a, .nav.nav--onimg .is-ink a:hover, .nav.nav--onimg .is-ink a[aria-current="page"],
.nav.nav--onimg .is-ink .nav-lang { color: #0a0a0a; }
.nav.nav--onimg .nav-logo-link.is-ink .nav-logo { filter: invert(1); }

/* ── Projeto seguinte (fundo das páginas de projeto): só o nome e a capa são clicáveis ──
   O bloco inteiro era uma ligação, por isso clicava-se também na zona preta à volta. Agora só o nome do
   projeto (as letras e a seta) e a capa respondem ao rato e ao toque; no hover o nome fica no vermelho da marca.
   O bloco continua a ser a ligação (para o teclado e leitores de ecrã); só deixa de apanhar o rato no resto. */
.m-pj-next { pointer-events: none; transition: color .25s linear; }
.m-pj-next-name, .m-pj-next .m-media { pointer-events: auto; }
.m-pj-next:hover, .m-pj-next:focus-visible { color: var(--accent); }

/* ── About, abertura: o título fica com 58% da largura no computador (a toda a largura até 1000 px) ── */
.m-ahero { display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); column-gap: var(--m-gap); align-items: center; }
.m-ahero > .m-label { grid-column: 1 / -1; }
.m-ahero-title { max-width: none; }
@media (max-width: 1000px) { .m-ahero { grid-template-columns: minmax(0, 1fr); } }

/* ── About, clientes: logótipos em caixas iguais, todos no mesmo cinzento claro ──
   Cada logótipo é desenhado como máscara (a forma vem do PNG, a cor vem daqui), por isso ficam todos no cinzento
   claro dos textos secundários seja qual for a cor do ficheiro; no hover passam a branco, como as caixas provisórias.
   O desenho cabe sempre na mesma moldura (48% da largura da caixa por 44% da altura), o que lhes dá o mesmo peso.
   Um logótipo que pese mais do que os outros (formas cheias) leva --s no HTML para ficar mais pequeno (ex.: --s: .8). */
.m-logo--img { color: var(--m-soft); }
.m-logo-img {
  display: block; width: calc(min(48%, 24.75% * var(--bw) / var(--bh)) * var(--s, 1)); aspect-ratio: var(--bw) / var(--bh);
  position: relative; left: var(--dx, 0);     /* --dx no HTML: acerto ótico para um lado (em % da largura da caixa) */
  background: currentColor;
  -webkit-mask: var(--src) no-repeat; mask: var(--src) no-repeat;
  -webkit-mask-size: calc(100% * var(--w) / var(--bw)) calc(100% * var(--h) / var(--bh));
  mask-size: calc(100% * var(--w) / var(--bw)) calc(100% * var(--h) / var(--bh));
  -webkit-mask-position: calc(100% * var(--bx) / (var(--w) - var(--bw))) calc(100% * var(--by) / (var(--h) - var(--bh)));
  mask-position: calc(100% * var(--bx) / (var(--w) - var(--bw))) calc(100% * var(--by) / (var(--h) - var(--bh)));
}
/* Logótipo em dois tons (o 2mas): --src é a silhueta inteira, pintada num cinzento escuro (olhos e boca);
   --src2 é a mesma forma com os olhos e a boca recortados, pintada por cima no cinzento dos outros logótipos.
   No hover a cara passa a branco e os olhos e a boca ficam no mesmo cinzento escuro. */
.m-logo-img--2 { background: #515151; }
.m-logo-img--2::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--src2) no-repeat; mask: var(--src2) no-repeat;
  -webkit-mask-size: inherit; mask-size: inherit; -webkit-mask-position: inherit; mask-position: inherit;
}

/* ── Quebras de linha manuais (<br class="m-br">, postas pelos ficheiros de texto com "<br>") ──
   Valem em computador e tablet. No telemóvel a coluna é estreita e o texto volta a partir sozinho. */
@media (max-width: 700px) {
  br.m-br { display: none; }
}

/* ── About, testemunhos: letra mais pequena e texto a toda a largura da coluna ──
   Um testemunho verdadeiro é um parágrafo, não uma frase: no tamanho das frases do site ocupava três vezes a
   altura que a secção tinha. Com este tamanho e a largura toda, cabe na altura que a secção tinha antes
   (medido em inglês e em português, de 820 px de largura para cima; no telemóvel fica mais alta). */
.m-quote blockquote {
  font-size: clamp(1.1rem, 1.7vw, 1.8rem); line-height: 1.16; letter-spacing: -.03em;
  max-width: none; text-wrap: pretty;
}

/* ── Sem avanço na primeira linha ──
   Os textos pequenos começavam com um espaço de parágrafo (text-indent). Deixam de o ter em todo o site:
   texto por baixo do título do Work, parágrafos do About e das páginas de projeto, frases das disciplinas
   e resumo em duas colunas. (As setas usam text-indent para esconder o caráter; essas não mudam.) */
.page-work .work-lead > .work-lead-sub,
.m-body, .m-disc-pitch, .m-pj-cols p { text-indent: 0; }

/* ── Páginas de projeto: bloco com um logótipo (.m-media--logo) ──
   A imagem não enche a moldura nem é cortada: fica inteira, ao centro, com espaço à volta (ex.: o logótipo
   animado do Comédia a Preto & Branco, um GIF de fundo transparente sobre o painel escuro). */
.m-media--logo { display: grid; place-items: center; }
.m-media--logo > img { width: auto; height: 46%; max-width: 70%; object-fit: contain; }

/* proporção 2:3 (ao alto), para fotografias e mockups verticais nas páginas de projeto */
.m-media.r-23 { aspect-ratio: 2 / 3; }

/* ── Testemunhos: passam sozinhos e o círculo da seta "seguinte" mostra o tempo ──
   O motion.js põe um SVG dentro do botão (.m-btn-ring): um círculo cinzento, igual ao contorno do botão, e por
   cima um círculo branco que se vai fechando durante 6 segundos (m-ring). Quando fecha, passa ao testemunho
   seguinte e recomeça. Enquanto o SVG lá está, o botão fica sem a sua borda (.has-ring), para o círculo ocupar
   exatamente o lugar dela. Quando a pessoa usa as setas, o SVG sai e o botão volta a ser como o outro. */
.m-btn-round.has-ring { border-width: 0; }
.m-btn-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1) rotate(-90deg); pointer-events: none; }   /* começa em cima e fecha no sentido contrário ao dos ponteiros do relógio */
.m-btn-ring circle { fill: none; }
.m-btn-ring-t { stroke: rgba(244, 244, 241, .35); stroke-width: 1; }
.m-btn-ring-p { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 146.1; stroke-dashoffset: 146.1; }
.is-auto .m-btn-ring-p { animation: m-ring 6s linear forwards; }
.is-waiting .m-btn-ring-p { animation-play-state: paused; }
@keyframes m-ring { to { stroke-dashoffset: 0; } }

/* ── Espaçamento entre letras nos textos grandes ──
   Estavam a -0,045em: em tamanhos grandes a Neue Haas Grotesk Display já vem justa e as letras chegavam a
   tocar-se ("ag", "rt"). Passam a -0,025em, com o kerning da fonte sempre ligado. Vale para todas as frases
   (a primeira da Home, títulos de página, frases de secção, testemunhos, páginas de projeto) e para os nomes
   grandes em listas (serviços, manifesto, disciplinas). Os números grandes ficam um pouco mais justos. */
.m-statement-text, .page-work .work-lead-title, .m-ahero-title, .m-cta-title,
.m-lead, .m-svc-lead, .m-pj-statement, .m-pj-lead, .m-pj-phrase, .m-pj-next-name,
.m-svc-name, .m-mani-title, .m-disc-name { letter-spacing: -.025em; }
.m-mani-count { letter-spacing: -.035em; }
body { font-kerning: normal; }

/* ── Cartões dos projetos (Home e Work): o setor vem antes do tipo de trabalho ── */
.m-cap-sector { order: -1; }
/* No telemóvel os cartões mostram só o nome (à esquerda) e o tipo de trabalho (à direita), cada um em metade do
   cartão; o setor fica só na página do projeto (a pedido). O nome e o tipo passam a uma segunda linha em vez de
   serem cortados; sem rato não há a troca do nome ao passar o cursor, por isso fica só o nome. */
@media (max-width: 700px) {
  .m-cap, .m-tile--lg .m-cap, .m-tile--full .m-cap, .m-tile--sm .m-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .m-cap-name { height: auto; overflow: visible; }
  .m-cap-name > span:first-child { height: auto; white-space: normal; overflow: visible; }
  .m-cap-name > span + span { display: none; }
  .m-tile:hover .m-cap-name > span, .m-tile:focus-visible .m-cap-name > span { transform: none; }
  .m-cap-sector, .m-tile--sm .m-cap-sector { display: none; }
  .m-cap-meta { justify-content: flex-end; }
  .m-cap-type { text-align: right; white-space: normal; }
}

/* ── Painel "Talk with us": a bola da opção acende ao passar o rato (tipo de projeto e orçamento) ── */
.m-talk-opt span::before { transition: background-color .2s linear; }
@media (hover: hover) {
  .m-talk-opt:hover span::before { background: currentColor; }
}

/* ── Páginas de projeto: várias imagens no mesmo sítio, a passar como um GIF (.m-loop) ──
   As imagens ficam umas por cima das outras e só a que tem .is-on se vê; o main.js troca-a de data-loop em
   data-loop milissegundos, em ciclo, só enquanto o bloco está no ecrã. Corte seco, como num GIF. As escondidas
   não respondem ao rato, para o header ler o brilho da imagem que se está a ver. */
.m-loop > img { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.m-loop > img.is-on { opacity: 1; pointer-events: auto; }

/* ── Páginas de projeto: na coluna de imagens dos capítulos não há larguras estreitas ──
   Cada imagem ocupa a largura toda da coluna, ou vão duas lado a lado (.m-pj-pair--fit dentro da coluna, cada uma
   com a largura que lhe dá a mesma altura da vizinha). Fora dos capítulos: imagens a toda a largura e pares. */
.m-pj-stack > .m-pj-pair { padding: 0; }

/* ── Imagens dos projetos com cantos ligeiramente redondos (páginas de projeto e cartões da Home e do Work) ──
   O recorte que faz as imagens abrirem de baixo para cima também leva o arredondado, para os cantos ficarem
   redondos durante a entrada e em qualquer browser. */
.m-pj .m-media, .m-tile .m-media { --pj-r: 4px; border-radius: var(--pj-r); }
.js .m-pj .m-media[data-media], .js .m-tile .m-media[data-media] { clip-path: inset(100% 0 0 0 round var(--pj-r)); }
.js .m-pj .m-media[data-media].is-in, .js .m-tile .m-media[data-media].is-in { clip-path: inset(0 round var(--pj-r)); }

/* ── About, "What we do": os serviços de cada disciplina em dropdown (o main.js cria o botão e o "+" e põe .is-acc e .is-open) ──
   A frase da disciplina fica sempre à vista. Fechada, a lista de serviços não aparece e há um "+" à direita; aberta,
   os serviços aparecem por baixo da frase e o "+" passa a "−". O botão cobre a linha toda (clicar no nome ou na
   frase também abre); só a lista fica por cima dele, para os serviços continuarem a reagir ao rato.
   No computador, bolinha, nome, frase e "+" ficam ao centro entre as duas linhas divisórias (como na lista da Home);
   a frase e a lista saem da caixa .m-disc-body (display: contents) para a lista poder abrir numa linha à parte. */
.m-disc > li.is-acc { position: relative; }
.m-disc > li.is-acc .m-disc-name { padding-right: 2.5rem; }
.m-disc-toggle { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.m-disc-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m-disc-plus { position: relative; display: block; width: clamp(14px, 1.3vw, 20px); height: var(--m-mid); color: var(--text); pointer-events: none; transition: color .2s linear; }
/* traço com a espessura da seta "→" das listas do site ao mesmo tamanho (2,3 px no computador; 2 px no mínimo) */
.m-disc-plus { --plus-w: clamp(2px, calc(var(--m-mid) * .06), 3px); }
.m-disc-plus::before, .m-disc-plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--plus-w); margin-top: calc(var(--plus-w) / -2); background: currentColor;
  transition: transform .45s var(--m-ease);
}
.m-disc-plus::after { transform: rotate(90deg); }
.m-disc > li.is-open .m-disc-plus::after { transform: rotate(180deg); }   /* "+" → "−": o traço vertical deita-se no sentido dos ponteiros do relógio */
@media (hover: hover) { .m-disc > li.is-acc:hover .m-disc-plus { color: var(--accent); } }
.m-disc > li.is-acc .m-disc-body { position: relative; z-index: 1; pointer-events: none; }
.m-disc > li.is-acc .m-branches { position: relative; z-index: 1; pointer-events: auto; transition: height .55s var(--m-ease), margin-top .55s var(--m-ease), opacity .4s linear; }
.m-disc > li.is-acc:not(.is-open) .m-branches {
  height: 0; margin-top: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: height .55s var(--m-ease), margin-top .55s var(--m-ease), opacity .3s linear, visibility 0s .55s;
}
.m-disc-pitch { color: var(--m-soft); }   /* a frase no cinzento dos serviços */
/* dentro do dropdown os serviços entram sem desfoque (só sobem e aparecem): enquanto a lista abre, o desfoque era
   cortado pelos limites dela e via-se uma caixa */
.js .m-disc > li.is-acc .m-branches li[data-reveal] { filter: none; }
@media (min-width: 1001px) {
  .m-disc > li.is-acc {
    grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 5fr) auto; align-items: center;
    padding: clamp(1.25rem, 2.1vw, 1.95rem) 0;   /* igual em cima e em baixo: o centro da caixa é o centro entre as linhas */
  }
  .m-disc > li.is-acc .m-disc-body { display: contents; }
  .m-disc > li.is-acc .m-disc-num { grid-row: 1; grid-column: 1; }
  .m-disc > li.is-acc .m-disc-name { grid-row: 1; grid-column: 2; }
  .m-disc > li.is-acc .m-disc-pitch { grid-row: 1; grid-column: 3; }
  .m-disc > li.is-acc .m-disc-plus { grid-row: 1; grid-column: 4; }
  .m-disc > li.is-acc .m-branches { grid-row: 2; grid-column: 3 / -1; }
}
/* telemóvel e tablet: a frase e os serviços por baixo do nome; o "+" à direita, à altura da 1.ª linha do nome */
@media (max-width: 1000px) {
  .m-disc-plus { position: absolute; top: clamp(1.1rem, 1.8vw, 1.7rem); right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m-disc > li.is-acc .m-branches, .m-disc-plus::before, .m-disc-plus::after { transition: none !important; }
}

/* ── Home, "What we do" no telemóvel: a seta de cada disciplina fica à direita, escondida como no computador, e
   aparece enquanto se carrega na linha (sem rato não há hover; o main.js escuta os toques para o iPhone aplicar
   :active). Fica ao centro da linha, na cor do texto, como o "+" do About. Antes caía numa linha à parte, à
   esquerda, e deixava um espaço vazio por baixo de cada disciplina. */
@media (max-width: 700px) {
  .m-svc-row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .m-svc-arrow { display: block; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--text); }
  .m-svc-row:active .m-svc-arrow { opacity: 1; transform: none; }
}

/* ── About, grelha dos clientes: as linhas de cima e da esquerda entram com os logótipos ──
   Eram da caixa à volta da grelha, que não tem animação, por isso apareciam logo. Passam para os logótipos da
   primeira linha e da primeira coluna (4 colunas no computador, 2 no telemóvel). */
.m-logos { border-top: 0; border-left: 0; }
.m-logo:nth-child(-n+4) { border-top: 1px solid var(--m-line); }
.m-logo:nth-child(4n+1) { border-left: 1px solid var(--m-line); }
@media (max-width: 700px) {
  .m-logo:nth-child(-n+4) { border-top: 0; }
  .m-logo:nth-child(4n+1) { border-left: 0; }
  .m-logo:nth-child(-n+2) { border-top: 1px solid var(--m-line); }
  .m-logo:nth-child(2n+1) { border-left: 1px solid var(--m-line); }
}

/* ── Footer no telemóvel, como no computador ──
   Sem o nome "MEAN Agency": o texto (agência, cidade, direitos) fica em cima à esquerda, alinhado com o topo do menu,
   e o menu fica numa coluna à direita, com a
   bola que marca a página atual (e desliza para o link em que se toca, main.js) em vez do traço. */
@media (max-width: 768px) {
  .m-foot-name { display: none; }   /* sem o "MEAN Agency": o logo grande já está no fundo do footer */
  .m-foot-desc { grid-column: 1 / span 3; grid-row: 1; }
  .m-foot-nav { grid-column: 4 / -1; grid-row: 1; display: grid; gap: 0; justify-items: start; align-content: start; margin-left: clamp(12px, 7vw, 40px); }
  .m-foot-ball { display: block; }
  .m-foot-nav a[aria-current="page"]::after { transform: scaleX(0); transform-origin: right center; }
}

/* ── Telemóvel: sem barra de scroll (a pedido) ──
   A do browser não aceita a cor do site; fica escondida. */
@media (pointer: coarse) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}

/* ── Telemóvel: títulos sem desfoque ([data-split="rise"]) ──
   No iPhone, com scroll, o desfoque dos títulos falhava (uns entravam desfocados, outros nítidos) e pesava. Em
   ecrãs táteis os títulos entram só a subir palavra a palavra de dentro da linha, como no computador, mas sem
   desfoque nenhum, nem no título nem nas palavras. No computador ficam com subida e desfoque. */
@media (pointer: coarse) {
  .js [data-split="rise"], .js [data-split="rise"] * { filter: none !important; }
}

/* ── Páginas de projeto: o site a correr numa janela do browser (projetos de website: SirFred, 2mas, CPB) ──
   Como os posts de apresentação de sites: fundo cinzento e, ao centro, uma janela do Safari com o site em vídeo.
   .m-shot   = o bloco (vai num .m-media, por isso tem a mesma entrada e os mesmos cantos que as imagens);
   .m-win    = a janela: barra do Safari (desenhada aqui, não está no vídeo) e o vídeo do site, 16:10;
   .m-win--tel = janela estreita, com o site no tamanho de telemóvel (9:16).
   A janela mede-se pelo bloco (unidades cq): cabe em qualquer proporção (capa, toda a largura, coluna, par) e
   a barra fica sempre do mesmo tamanho em relação ao bloco. */
.m-media.m-shot { --bar: 3.4cqmin; container-type: size; display: grid; place-items: center; background: #373737; }
.m-win {
  --wr: 1.6;
  width: min(88cqw, calc((88cqh - var(--bar)) * var(--wr)));
  border-radius: 1.2cqmin; overflow: hidden; background: #111; /* escuro: o Safari acerta o vídeo ao píxel e o fundo da janela pode espreitar na margem */
  box-shadow: 0 1.2cqmin 4cqmin rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .3);
}
.m-win--tel { --wr: .5625; width: min(88cqw, calc((90cqh - var(--bar)) * var(--wr))); }
.m-win > video { display: block; width: 100%; height: auto; aspect-ratio: var(--wr); object-fit: cover; background: #111; }
.m-win-bar {
  height: var(--bar); display: flex; align-items: center; gap: 2%; padding: 0 1.6%;
  background: #f3f3f3; border-bottom: 1px solid rgba(0, 0, 0, .1);
  font: 500 calc(var(--bar) * .32) / 1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 0; color: #4d4d4d;
}
/* à esquerda: os três botões da janela, a barra lateral e as setas; à direita: partilhar, novo separador, separadores */
.m-win-bar::before, .m-win-bar::after { content: ''; flex: none; height: 34%; background: no-repeat center / contain; }
.m-win-bar::before {
  aspect-ratio: 92 / 14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14'%3E%3Ccircle cx='6' cy='7' r='5.5' fill='%23ff5f57'/%3E%3Ccircle cx='20' cy='7' r='5.5' fill='%23febc2e'/%3E%3Ccircle cx='34' cy='7' r='5.5' fill='%2328c840'/%3E%3Cg fill='none' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='49' y='2' width='14' height='10' rx='2' stroke='%238e8e8e'/%3E%3Cpath d='M54 2v10M78 3l-4 4 4 4' stroke='%238e8e8e'/%3E%3Cpath d='M85 3l4 4-4 4' stroke='%23c4c4c4'/%3E%3C/g%3E%3C/svg%3E");
}
.m-win-bar::after {
  aspect-ratio: 56 / 14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14'%3E%3Cg fill='none' stroke='%238e8e8e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6H3.5v7h11V6H13M9 9V1M6 3.5L9 .8l3 2.7M28 2v10M23 7h10'/%3E%3Crect x='42' y='4.5' width='9' height='8.5' rx='1.6'/%3E%3Cpath d='M45 2h6.4A1.6 1.6 0 0 1 53 3.6V10'/%3E%3C/g%3E%3C/svg%3E");
}
.m-win-url {
  flex: 0 1 46%; margin: 0 auto; height: 62%; min-width: 0;
  display: grid; place-items: center; padding: 0 .8em; border-radius: .55em; background: #e3e3e3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-win--tel .m-win-bar { gap: 4%; padding: 0 3.5%; }
.m-win--tel .m-win-bar::before {
  aspect-ratio: 40 / 14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Ccircle cx='6' cy='7' r='5.5' fill='%23ff5f57'/%3E%3Ccircle cx='20' cy='7' r='5.5' fill='%23febc2e'/%3E%3Ccircle cx='34' cy='7' r='5.5' fill='%2328c840'/%3E%3C/svg%3E");
}
.m-win--tel .m-win-bar::after {
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' fill='none' stroke='%238e8e8e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.m-win--tel .m-win-url { flex: 1 1 auto; }

/* ── Logo do footer a rolar (experiência; main.js monta as quatro colunas) ──
   Cada coluna mostra um círculo do logo; lá dentro, uma tira com duas cópias do logo (repeat-y) começa escondida por
   baixo e sobe o dobro da altura: a primeira cópia passa e a segunda fica. As colunas saem uma a seguir à outra. */
.m-foot-logo { position: relative; }
.m-foot-logo.is-roll img { visibility: hidden; }
.m-roll { position: absolute; inset: 0; display: flex; pointer-events: none; }
.m-roll > span { flex: 1 1 0; position: relative; overflow: hidden; }
.m-roll i {
  position: absolute; left: 0; right: 0; top: 0; height: 200%;
  background: var(--logo) repeat-y; background-size: 400% 50%; background-position: calc(var(--i) * 100% / 3) 0;
  /* escondida um pouco mais abaixo do que o fundo da coluna: encostada ao fundo, o topo de cada círculo ainda deixava
     um risco de 1 px à vista (quatro pontinhos vermelhos antes de o logo aparecer) */
  transform: translateY(calc(50% + 6px));
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); transition-delay: 0s;
}
.m-foot-logo.is-in .m-roll i { transform: translateY(-50%); transition-delay: calc(var(--i) * 90ms); }
/* o site numa janela a toda a largura: sempre com a proporção da capa (2:1), para todas as janelas largas ficarem
   do mesmo tamanho que a primeira (no telemóvel 4:3, como a capa) */
.m-pj-full .m-media.m-shot { aspect-ratio: 16 / 8; }
@media (max-width: 700px) { .m-pj-full .m-media.m-shot { aspect-ratio: 4 / 3; } }