:root {
  --bg:#0c0d10; --surface:#131519; --hover:#15181d; --hair:#1c1f25; --border:#22262d;
  --line:#2a2f37; --edge:#3b424c; --ink:#f2f0ec; --muted:#b8b4ac; --muted2:#cfcbc3;
  --dim:#8f8b84; --dim2:#9b968e; --accent:#c9a37a; --onAccent:#20160c; --idle:#2c3138;
  --done:#6b573d; --mark:#15171c; --ghost:#1b1e24; --dash:#343a43;
  --glow:rgba(201,163,122,.16);
}

html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden;
  font-family: Archivo, system-ui, sans-serif;
  transition: background .5s ease, color .5s ease;
}
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--bg); }
button { font-family: inherit; }

/* ---------- keyframes ---------- */
@keyframes fadeUp { from { transform: translateY(28px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes curtainUp { to { transform: translate3d(0,-101%,0) } }
@keyframes loaderOut { to { opacity: 0 } }
@keyframes logLine { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes caret { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes heroLetter { from { transform: translateY(110%) rotate(7deg); opacity: 0 } to { transform: translateY(0) rotate(0); opacity: 1 } }
@keyframes railPulse { 0% { transform: translateY(-14px) } 100% { transform: translateY(44px) } }
@keyframes wipeIn { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0% 0) } }
@keyframes gridDrift { to { transform: perspective(680px) rotateX(72deg) translate3d(0,-120px,0) } }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.loader__curtain { position: absolute; inset: 0; background: var(--bg); }
.loader.is-exiting .loader__curtain { animation: curtainUp .9s cubic-bezier(.76,0,.24,1) both; }
.loader__content {
  position: absolute; inset: 0; padding: clamp(20px,5vw,56px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(18px,3vw,34px);
}
.loader.is-exiting .loader__content { animation: curtainUp .9s cubic-bezier(.76,0,.24,1) both, loaderOut .35s linear both; }
.loader.is-hidden { display: none; }
.loader__log {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px,1.15vw,14px); line-height: 2;
  letter-spacing: .06em; display: flex; flex-direction: column; max-width: 70ch;
}
.loader__log-line {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px;
  animation: logLine .32s ease both; color: var(--muted);
}
.loader__log-line span:first-child { color: var(--accent); }
.loader__log-line span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loader__log-line span:last-child { color: var(--accent); }
.loader__log-current { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; color: var(--ink); }
.loader__log-current span:first-child { color: var(--accent); }
.loader__caret { animation: caret .9s steps(1) infinite; }
.loader__bar-row { display: flex; align-items: center; gap: 16px; max-width: 70ch; }
.loader__bar { flex: 1; height: 2px; background: var(--border); position: relative; overflow: hidden; }
.loader__bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 0%; }
.loader__pct {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px clamp(18px,3.4vw,44px); color: var(--ink);
  /* see-through over the top of the hero; .is-solid once the page moves */
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), padding .35s ease;
}
.nav.is-solid {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hair);
  padding-top: 12px; padding-bottom: 12px;
}
/* out of the way while reading down; back on the first scroll up */
.nav.is-tucked { transform: translateY(-100%); }
.nav__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav__logo { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }

/* the section you are in, rolled over as it changes */
.nav__where {
  position: relative; display: inline-flex; align-items: center; height: 14px; overflow: hidden;
  padding-left: 14px; border-left: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); opacity: 0; transition: opacity .35s ease;
}
.nav.has-where .nav__where { opacity: 1; }
/* wide enough for the longest label ("06 · EDUCATION") at this tracking */
.nav__where-track { position: relative; display: block; height: 14px; min-width: 24ch; }
.nav__where-item {
  position: absolute; left: 0; top: 0; line-height: 14px; white-space: nowrap;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
.nav__where-item.from-below { transform: translateY(100%); opacity: 0; transition: none; }
.nav__where-item.from-above { transform: translateY(-100%); opacity: 0; transition: none; }
.nav__where-item.to-above { transform: translateY(-100%); opacity: 0; }
.nav__where-item.to-below { transform: translateY(100%); opacity: 0; }
.nav__links {
  position: relative; display: flex; flex: 1 1 auto; min-width: 0; align-items: center;
  gap: clamp(10px,2.2vw,32px); row-gap: 12px; flex-wrap: wrap; justify-content: flex-end;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
/* the whole width of the bar, filled by scale so it never reflows */
.nav__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .12s linear;
}
.nav__links a { position: relative; color: var(--muted); text-decoration: none; transition: color .25s ease; }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }
/* one underline that slides between the links */
.nav__ink {
  position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--accent);
  opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.nav__pill {
  background: none; border: 1px solid var(--edge); color: inherit; font: inherit; letter-spacing: .18em;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.nav__pill:hover { border-color: var(--ink); }
/* O botão de língua mostra as duas e acende a que está a correr. Antes dizia
   só a outra ("EN" quando se estava em português), e ninguém sabia se aquilo
   era o estado ou o destino. */
/* sem caixa à volta: a pastilha da língua acesa já diz o que é preciso, e o
   contorno em computador ficava a pedir atenção a mais */
.nav__lang { display: inline-flex; align-items: center; gap: 0; padding: 5px 2px; border-color: transparent; }
.nav__lang:hover { border-color: transparent; }
.nav__lang-opt {
  padding: 2px 8px; border-radius: 999px; color: var(--dim2);
  transition: color .25s ease, background .25s ease;
}
.nav__lang-opt.is-on { color: var(--onAccent); background: var(--accent); }
.pc-lang { gap: 0; }
.pc-lang .nav__lang-opt { padding: 3px 9px; }

/* ---------- shared bits ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--dim); margin-bottom: 38px; }
.kicker--section { margin-bottom: clamp(28px,4vw,56px); }
.kicker__label { color: var(--muted2); }
.rule { width: 16px; height: 1px; background: var(--line); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: inline-block; }
.dot--accent { background: var(--accent); }
.dot--done { background: var(--done); }
.dot--edge { background: var(--edge); }
.dot--sm { width: 5px; height: 5px; }
.section-head {
  flex: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: clamp(74px,11vh,120px) clamp(18px,6vw,120px) clamp(16px,2vw,26px); border-bottom: 1px solid var(--hair);
}
/* no rule above the binder: the dividers are the top edge of that block */
.services .section-head { border-bottom: 0; padding-bottom: clamp(34px,4.4vw,64px); }
.section-title { margin: 0; font-weight: 900; font-stretch: 120%; font-size: clamp(22px,3.4vw,50px); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.section-title--wide { max-width: 20ch; line-height: .92; }
.section-title--inline { font-size: clamp(26px,4.2vw,62px); line-height: .9; letter-spacing: -.04em; margin: 0 0 8px; font-weight: 900; font-stretch: 120%; text-transform: uppercase; }
.btn {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 15px 24px; border-radius: 999px; display: inline-block; cursor: pointer;
}
.btn--sm { padding: 9px 16px; font-size: 10.5px; }
.btn--solid { background: var(--accent); color: var(--onAccent); border: 1px solid transparent; }
.btn--solid:hover { background: var(--ink); color: var(--bg); }
.btn--outline { border: 1px solid var(--edge); color: var(--ink); background: none; }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
[data-reveal] { opacity: 0; }
[data-stage] { will-change: transform, opacity; }

/* ---------- hero ---------- */
.hero-section { position: relative; height: 106vh; }
.hero { position: sticky; top: 0; height: 100vh; min-height: 660px; overflow: hidden; }
.hero__grid { position: absolute; left: 50%; top: 60%; width: 240vw; height: 120vh; transform: translateX(-50%); perspective: 640px; opacity: .16; pointer-events: none; }
.hero__grid-plane {
  position: absolute; inset: 0; transform-origin: 50% 0;
  background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 130px 130px; animation: gridDrift 20s linear infinite;
  transform: perspective(640px) rotateX(74deg); mask-image: linear-gradient(#000,transparent 68%);
}
.hero__flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero__glow {
  position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1;
  transform: translate(-50%,-50%); z-index: 2; pointer-events: none; opacity: .55;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 64%);
  filter: blur(34px);
}
.hero__stagewrap { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.panel { position: absolute; left: 50%; top: 50%; width: clamp(260px,30vw,440px); margin: -0.5px 0 0 -0.5px; transform-style: preserve-3d; will-change: transform; }
.panel__win {
  /* scenery: never louder than the headline sitting in front of it */
  opacity: .82;
  position: relative; width: 100%; aspect-ratio: 16/10; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 40px 90px -50px rgba(0,0,0,.7); overflow: hidden; display: flex; flex-direction: column;
}
.panel__bar { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--hair); background: var(--surface); }
.panel__title { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.panel__media { position: relative; flex: 1; overflow: hidden; background: var(--mark); }
.panel__media img, .panel__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) contrast(1.02) brightness(.82);
}
.panel__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 30%, rgba(0,0,0,.45) 100%);
  mix-blend-mode: multiply;
}
.hud {
  position: absolute; left: 50%; top: 50%; width: clamp(150px,17vw,230px); transform-style: preserve-3d; will-change: transform;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--bg); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: 0 30px 70px -45px rgba(0,0,0,.8);
}
.hud__head { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.hud__bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.hud__bar { flex: 1; background: var(--accent); border-radius: 2px; transition: height .5s cubic-bezier(.76,0,.24,1); }
.hud__label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.hero__fade {
  position: absolute; inset: auto 0 0 0; height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 12%, color-mix(in oklab, var(--bg) 62%, transparent) 58%, transparent 100%);
}
.hero__main {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: clamp(80px,12vh,120px) clamp(18px,6vw,120px) clamp(70px,10vh,110px); pointer-events: auto;
}
.hero__stack {
  width: 100%; max-width: 860px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px,1.7vw,18px);
}
.hero__social { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.hero__social a { color: var(--dim2); display: inline-flex; transition: color .2s ease; }
.hero__social a:hover { color: var(--accent); }
.hero__social svg { width: 16px; height: 16px; display: block; }
.hero__lead {
  margin: 0 auto; max-width: 52ch; font-size: clamp(14.5px,1.35vw,18px); line-height: 1.6; color: var(--muted);
}
.hero__facts {
  list-style: none; margin: clamp(6px,1.2vw,14px) 0 0; padding: clamp(14px,2vw,18px) 0 0;
  border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: clamp(18px,3vw,42px);
  animation: fadeUp 1s 1.05s both;
}
.hero__facts li { display: flex; flex-direction: column; gap: 5px; }
.hero__facts b { font-size: clamp(15px,1.5vw,20px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.hero__facts span {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim2);
}

/* the person: photo, name, rotating role, socials, live counter */
.hero__card {
  justify-self: end; width: min(100%, 372px); display: flex; flex-direction: column; gap: 14px;
  animation: fadeUp 1s .55s both;
}
.hero__card-photo {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
  box-shadow: 0 50px 110px -60px rgba(0,0,0,.85);
}
.hero__card-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 18%; display: block;
  filter: saturate(.92) contrast(1.04);
}
.hero__card-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--bg) 78%, transparent) 100%);
}
.hero__card-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(6px);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink);
}
.hero__card-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__card-name {
  font-weight: 800; font-size: clamp(16px,1.6vw,20px); letter-spacing: -.02em; color: var(--ink);
}
.hero__card-links { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hero__card-links a { color: var(--dim2); display: inline-flex; transition: color .2s ease; }
.hero__card-links a:hover { color: var(--accent); }
.hero__card-links svg { width: 15px; height: 15px; display: block; }
.hud--card { position: static; width: auto; transform: none; }
.hero__main .kicker { margin-bottom: 0; font-size: 10px; letter-spacing: .3em; animation: fadeUp 1s .1s both; }
/* the title leads, above the name: it is the one line that says what he is */
.hero__role {
  display: block; margin-bottom: clamp(10px,1.4vw,16px);
  font-family: 'JetBrains Mono', monospace; font-size: clamp(9.5px,1vw,11px);
  letter-spacing: .34em; text-transform: uppercase; color: var(--accent);
}
.hero__title {
  margin: 0; display: flex; flex-direction: column; gap: 0; font-weight: 900; font-stretch: 118%;
  font-size: clamp(42px,7vw,104px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase;
  align-items: center;
}
/* each line is a mask the letters rise out of */
.hero__title-line { display: block; overflow: hidden; padding: .04em .02em .06em; }
.hero__word { display: inline-block; white-space: nowrap; }
.hero__char { display: inline-block; will-change: transform; }
.hero__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px,3vw,44px); flex-wrap: wrap;
  border-top: 1px solid var(--hair); padding-top: clamp(14px,2vw,22px); animation: fadeUp 1s .9s both;
}
.hero__roles {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  font-family: 'JetBrains Mono', monospace; font-size: clamp(11px,1.3vw,15px);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.hero__roles-mask { height: 1.6em; overflow: hidden; display: inline-block; }
.hero__roles-track { display: block; transition: transform .8s cubic-bezier(.76,0,.24,1); }
.hero__roles-track span { display: block; height: 1.6em; line-height: 1.6em; white-space: nowrap; }
.hero__ctas { display: flex; align-items: center; justify-content: center; gap: clamp(14px,2vw,26px); flex-wrap: wrap; margin-top: 6px; }
.hero__cv {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 13px 22px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--dim2);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.hero__cv:hover {
  color: var(--ink); border-color: var(--edge); background: var(--hover);
  transform: translateY(-2px);
}
.hero__cv svg { width: 14px; height: 14px; display: block; transition: transform .25s cubic-bezier(.2,.9,.3,1); }
.hero__cv:hover svg { transform: translateY(2px); color: var(--accent); }
.hero__card-role {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim2);
}
/* centred under the copy, on the same axis as everything above it */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(16px,3.2vh,34px); z-index: 3;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; white-space: nowrap; transition: color .25s ease;
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-rail { width: 1px; height: 34px; background: linear-gradient(var(--line), transparent); position: relative; overflow: hidden; }
.hero__scroll-pulse { position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: var(--accent); animation: railPulse 2s cubic-bezier(.76,0,.24,1) infinite; }

/* ---------- the hero entrance ----------
   Held until the desk hands the screen over (.is-live on #top). The name
   rises a letter at a time, sharpening as it lands; the rest follows it down
   the column in the order it is read. */
@keyframes heroChar {
  from { transform: translateY(108%) rotate(6deg); opacity: 0; filter: blur(8px); }
  60%  { filter: blur(0); }
  to   { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes heroRise { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes heroCue  { from { transform: translate(-50%, 12px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }

.hero__char, .hero__roles, .hero__lead, .hero__ctas, .hero__social, .hero__scroll { opacity: 0; }
.hero-section.is-live .hero__char {
  animation: heroChar .95s cubic-bezier(.16,.84,.16,1) both;
  animation-delay: calc(.05s + var(--c) * .045s);
}
.hero-section.is-live .hero__roles  { animation: heroRise .8s cubic-bezier(.2,.85,.2,1) .62s both; }
.hero-section.is-live .hero__lead   { animation: heroRise .8s cubic-bezier(.2,.85,.2,1) .78s both; }
.hero-section.is-live .hero__ctas   { animation: heroRise .8s cubic-bezier(.2,.85,.2,1) .94s both; }
.hero-section.is-live .hero__social { animation: heroRise .8s cubic-bezier(.2,.85,.2,1) 1.08s both; }
.hero-section.is-live .hero__scroll { animation: heroCue  .9s cubic-bezier(.2,.85,.2,1) 1.35s both; }

/* ---------- proof band, between the hero and the first section ----------
   Four columns of text sitting still under the hero read as a footer in the
   wrong place. The items lay themselves down one after the other the first
   time the band is seen, and from then on a light walks across them (in
   main.js), with a rule drawing under whichever is up. */
.proof {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
.proof__row {
  max-width: 1400px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: clamp(26px,3.2vw,38px) clamp(18px,6vw,120px) clamp(32px,3.8vw,46px);
}
.proof__item {
  position: relative;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; text-align: center;
  justify-content: flex-end;
  padding: 0 clamp(8px,1.4vw,18px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,.9,.24,1);
  transition-delay: calc(var(--i, 0) * .11s);
}
.proof.is-in .proof__item { opacity: 1; transform: none; }
/* the divider draws itself down as the item lands */
.proof__item::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px;
  background: var(--hair); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.16,.9,.24,1);
  transition-delay: calc(var(--i, 0) * .11s);
}
.proof.is-in .proof__item::before { transform: scaleY(1); }
.proof__item:first-child::before { display: none; }
/* the rule under the one the light is on */
.proof__item::after {
  content: ''; position: absolute; left: 50%; bottom: -14px;
  width: 42px; height: 2px; border-radius: 2px; background: var(--accent);
  transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%;
  transition: transform .5s cubic-bezier(.16,.9,.24,1);
}
.proof__item.is-on::after { transform: translateX(-50%) scaleX(1); }
.proof__item b {
  font-weight: 700; font-stretch: 108%; letter-spacing: -.015em;
  font-size: clamp(15px,1.5vw,20px); line-height: 1.25; color: var(--muted);
  max-width: 22ch; transition: color .45s ease;
}
.proof__item.is-on b { color: var(--ink); }
.proof__item span {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim2); transition: color .45s ease;
}
.proof__item.is-on span { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .proof__item, .proof__item::before, .proof__item::after { transition: none; }
  .proof__item b { color: var(--ink); }
}
.proof__clients {
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(18px,6vw,120px) clamp(24px,3.4vw,38px);
  display: flex; align-items: center; gap: clamp(18px,3vw,40px); flex-wrap: wrap;
  border-top: 1px solid var(--hair);
}
.proof__clients-label {
  padding-top: clamp(20px,2.6vw,30px);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim2); white-space: nowrap;
}
.proof__marks {
  flex: 1; display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px,2.4vw,34px); padding-top: clamp(20px,2.6vw,30px);
}
/* the marks come in every colour under the sun -- flatten them so the row
   reads as one line of proof rather than a patchwork */
.proof__mark {
  height: clamp(26px,2.6vw,34px); width: auto; object-fit: contain;
  /* The marks are square tiles with a white field, not transparent logos.
     Inverting turns that field black and the artwork light; screen then drops
     the black entirely, leaving the mark floating on the dark background. */
  filter: grayscale(1) invert(1) contrast(1.05); mix-blend-mode: screen; opacity: .55;
  transition: opacity .25s ease, filter .25s ease;
}
.proof__mark:hover { opacity: .95; }

@media (max-width: 700px) {
  .proof__clients { flex-direction: column; align-items: flex-start; gap: 0; }
  .proof__marks { gap: 16px; }
  .proof__row { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .proof__item:nth-child(odd)::before { display: none; }
  .proof__item::after { bottom: -10px; }
}

/* ---------- about ---------- */
/* ---------- about: the person, the claim, and the three steps ---------- */
/* The band that used to sit between the hero and here is being tried out of
   the page, so the section comes up to meet the hero: the top is the old
   padding less the band's height, the bottom is untouched. */
.about {
  padding: clamp(48px,7vh,96px) clamp(18px,6vw,120px) clamp(80px,12vh,160px);
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  column-gap: clamp(32px,6vw,96px); row-gap: clamp(24px,2.6vw,40px); align-items: start;
}

.about__photo-col { min-width: 0; }
.about__photo { position: sticky; top: clamp(80px,12vh,120px); margin: 0; }
.about__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.3; object-fit: cover; object-position: 52% 28%;
  border-radius: 14px; background: var(--surface);
  /* capped, so the steps below it start high on the section instead of being
     pushed down by a very tall photo column */
  max-height: 58vh;
  /* wiped in from the bottom when it first comes into view */
  clip-path: inset(100% 0 0 0 round 14px);
  transform: scale(1.06);
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1), transform 1.6s cubic-bezier(.16,.84,.24,1);
}
.about__photo.is-in img { clip-path: inset(0 0 0 0 round 14px); transform: none; }
.about__caption {
  margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim2);
  opacity: 0; transition: opacity .6s ease .7s;
}
.about__photo.is-in .about__caption { opacity: 1; }

.about__body { display: flex; flex-direction: column; min-width: 0; }
.about__lead {
  margin: clamp(22px,3vw,36px) 0 0; max-width: 22ch;
  font-weight: 800; font-stretch: 108%; font-size: clamp(26px,3vw,42px);
  line-height: 1.1; letter-spacing: -.03em;
}
.about__claim { color: var(--accent); }

/* who he is and what he does, under the claim and before the three steps */
.about__bio {
  margin: clamp(18px,2.4vw,28px) 0 0; max-width: 58ch;
  font-size: clamp(14px,1.1vw,17px); line-height: 1.65; color: var(--muted);
}

/* the three steps hang off a rail that fills as the section scrolls past.
   Stacked in the text column they were a footnote to the bio; across the foot
   of the section they read as the three beats of the argument. */
.about__steps {
  grid-column: 1 / -1;
  position: relative; list-style: none; margin: 0; padding: 30px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(22px,3.4vw,56px);
}
.about__rail {
  position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line);
}
.about__rail-fill {
  position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.about__step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 8px; align-content: start; }
/* the node sits up on the rail, at the head of its own column */
.about__step-node {
  position: absolute; left: 0; top: -32px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.about__step-num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em;
  color: var(--dim2); padding-top: 3px; transition: color .35s ease;
}
.about__step-title {
  font-weight: 800; font-size: clamp(15px,1.3vw,19px); letter-spacing: -.01em;
  text-transform: uppercase; color: var(--dim); transition: color .35s ease;
}
.about__step-text {
  grid-column: 2; margin: 0; max-width: 52ch;
  font-size: clamp(14px,1.1vw,17px); line-height: 1.6; color: var(--dim);
  transition: color .45s ease;
}
.about__step.is-on .about__step-node { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--glow); }
.about__step.is-on .about__step-num { color: var(--accent); }
.about__step.is-on .about__step-title { color: var(--ink); }
.about__step.is-on .about__step-text { color: var(--muted); }

/* one column: the photo leads, shorter, and stops being sticky, and the three
   steps go back to a vertical rail -- side by side they'd be three slivers */
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { position: relative; top: auto; }
  .about__photo img { aspect-ratio: 4 / 4.2; max-height: 62vh; }
  .about__steps {
    grid-template-columns: 1fr; gap: clamp(30px,4vw,52px);
    padding: 0 0 0 30px; margin-top: clamp(40px,5vw,68px);
  }
  .about__rail { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .about__rail-fill { transform: scaleY(0); transform-origin: top; }
  .about__step-node { left: -30px; top: 3px; }
}

/* ---------- services (pinned) ---------- */
/* no longer a pinned scroll track: the dividers do the work */
/* same column as every other section: without a max-width the binder ran
   almost edge to edge on wide screens */
.services { position: relative; max-width: 1400px; margin: 0 auto; }
.services__pin { position: relative; display: flex; flex-direction: column; padding-bottom: clamp(60px,9vh,110px); }
/* ---------- the binder: dividers on top, sheets hinged underneath ---------- */
.binder {
  display: flex; flex-direction: column;
  padding: 0 clamp(18px,6vw,120px);
}
.binder__tabs {
  flex: none; display: flex; align-items: stretch; gap: 4px;
}
.binder__tab {
  /* every divider the same box, the row flush with the stack underneath */
  flex: 1 1 0; min-width: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  height: 46px; padding: 0 12px 11px; margin-bottom: -1px;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 9px 9px 0 0; background: var(--mark); color: var(--dim2);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.binder__tab-n {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .24em; color: inherit;
}
.binder__tab-l {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.binder__tab.is-done { color: var(--dim); }
.binder__tab:hover { color: var(--ink); }
.binder__tab.is-on {
  background: var(--surface); color: var(--ink); border-color: var(--edge);
  /* the sheet on show is this divider's own sheet, so the two are one piece:
     overlap far enough to bury the stack's top border underneath */
  position: relative; z-index: 3; margin-bottom: -3px; padding-bottom: 14px;
}
/* the live divider keeps the accent, like a coloured tab in a real binder */
.binder__tab.is-on .binder__tab-n { color: var(--accent); }

/* BOTH top corners are square, always. The dividers run the full width, so
   tab 01 sits over the top-left corner and tab 06 over the top-right one
   whichever one is open: round either and the tab hangs over the curve
   instead of meeting it. The rounding belongs to the first and last tab,
   which are the outer corners of the whole thing. */
.binder__stack {
  /* the mat the notebook sits on. It cannot be padding: an absolutely
     positioned child is laid out against the padding box, so padding would
     not move the sheets at all -- the sheets inset themselves by this. */
  --mat: clamp(10px,1.1vw,18px);
  position: relative; height: clamp(430px, 64vh, 640px);
  border: 1px solid var(--edge); border-radius: 0 0 14px 14px;
  background: var(--surface); perspective: 2600px; perspective-origin: 14% 50%;
  /* a binder holds its pages: without this the turning sheet swings out over
     the section title and the dividers */
  overflow: hidden;
}
/* The rings moved to the middle of the sheet, where an open notebook has
   them, so the left spine of the binder is gone. */
/* the thickness of the pages still to come, along the outer edge */
.binder__stack::after {
  content: ''; position: absolute; right: -7px; top: 10px; bottom: 10px; width: 7px; z-index: 0;
  border: 1px solid #c6bca6; border-left: 0; border-radius: 0 12px 12px 0;
  background: #ded6c4;
}
.services__stage { position: relative; }
/* An open notebook: what he wrote on the left page, what he drew on the
   right, and the wire binding down the middle. The section was already a
   ring binder with pages that fall into place, so the page is the unit. */
.step {
  position: absolute; inset: var(--mat); padding: clamp(18px,3vw,44px) clamp(16px,3.4vw,52px);
  display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr);
  gap: clamp(14px,2.4vw,34px);
  align-items: center; will-change: transform, opacity;
  transform-origin: 50% 0%;
  background: #efe9dc; border-radius: 11px;
  /* the ruling, and the light falling off into the fold */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(40,60,120,.13) 27px 28px),
    linear-gradient(90deg, rgba(74,62,40,.12) 0%, transparent 16%, transparent 84%, rgba(74,62,40,.12) 100%);
  background-position: 0 6px, 0 0;
  /* out of frame above, waiting to be laid down */
  transform: translate3d(0,-106%,0) scale(.985);
  box-shadow: 0 34px 60px -18px rgba(0,0,0,.92);
  opacity: 1; pointer-events: none; overflow: hidden;
  transition: transform .62s cubic-bezier(.16,.9,.24,1), box-shadow .62s ease;
}
/* the sheet on show */
.step.is-on {
  transform: translate3d(0,0,0) scale(1);
  box-shadow: 0 18px 36px -34px rgba(0,0,0,.9);
  pointer-events: auto;
}
/* the ones already flipped past stay put underneath */
.step.is-under { transform: translate3d(0,0,0) scale(1); box-shadow: none; }
.step.is-under .step__shade { opacity: .5; }
/* the face darkens as the page angles away from the light */
/* the fold: the two pages dip towards each other where they are bound */
.step::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 190px; z-index: 1;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(78,64,40,.13) 34%,
    rgba(78,64,40,.30) 50%, rgba(78,64,40,.13) 66%, transparent 100%);
}
/* the wire, threaded through both pages */
.step::before {
  content: ''; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 46px; z-index: 3;
  transform: translateX(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='27'%3E%3Cpath d='M9 16.5 H37' stroke='rgba(40,32,18,.30)' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M9 13 H37' stroke='%2325282e' stroke-width='5.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12 11.4 H34' stroke='rgba(255,255,255,.26)' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-y center top;
}
/* the sheet underneath dims once another is laid over it */
.step__shade {
  position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
  border-radius: inherit; background: rgba(0,0,0,.6);
  transition: opacity .5s ease;
}
/* the shadow the turning page drags across the one underneath */
.step__cast {
  position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  border-radius: inherit; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 42%, transparent 72%);
}
.step__info { grid-column: 1; position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(12px,1.7vw,20px); min-width: 0; container-type: inline-size; }
.step__num { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(28,44,112,.62); }
.step__num-rule { width: 22px; height: 1px; background: rgba(28,44,112,.4); }
.step__num-of { color: rgba(60,52,36,.55); }
/* sized off the text column, not the screen: the sheet stops growing at the
   1400px column, and the longest word ("DESENVOLVIMENTO") has to fit it */
.step__title { margin: 0; font-weight: 900; font-stretch: 116%; font-size: clamp(20px,7.2cqi,58px); line-height: .92; letter-spacing: -.042em; text-transform: uppercase; color: #1b2a63; }
.step__desc { margin: 0; font-size: clamp(14px,1.15vw,17px); line-height: 1.75; color: rgba(38,32,22,.8); max-width: 42ch; }
.step__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.step__tool { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(28,44,112,.78); border: 1px solid rgba(28,44,112,.3); border-radius: 999px; padding: 7px 13px; }
/* no frame: the drawing is on the page itself, not in a panel on it */
.step__art-wrap {
  grid-column: 3;
  position: relative; z-index: 2; height: min(48vh,360px); min-width: 0;
  display: grid; place-items: center;
  transition: opacity .2s linear;
}
.step__info { transition: opacity .2s linear; }
/* The panel is a page out of the same notebook as the book on the 3D desk:
   paper, and a drawing in the same blue pen. It replaced a stock photo,
   which was the only thing on the site that was not his. It still drifts
   while its sheet is the one on show, so the panel is never quite still. */
.step__sketch {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}
.step.is-on .step__sketch { animation: pillarDrift 20s ease-in-out infinite alternate; }
@keyframes pillarDrift {
  from { transform: scale(1.01) translate3d(-.6%, .5%, 0); }
  to   { transform: scale(1.05) translate3d(.8%, -.8%, 0); }
}

/* Narrow: a two-page spread would be two 120px slivers, so the pages stack
   and the wire runs along the top instead of down the middle. Same notebook,
   just closed to one page. Written after the base rules on purpose: they
   have the same specificity, so order is what decides. */
@media (max-width: 860px) {
  /* stacked, the page is taller than it is wide: the binder has to grow with it,
     or the sheet clips its own drawing */
  .binder__stack { height: clamp(620px, 84vh, 720px); }
  .step {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto;
    align-content: start; gap: clamp(14px,3vw,24px);
    padding-top: clamp(34px,8vw,48px);
  }
  .step__info, .step__art-wrap { grid-column: 1; }
  .step__art-wrap { height: min(26vh,196px); }
  .step::after { display: none; }
  .step::before {
    left: 0; right: 0; width: auto; top: -4px; bottom: auto; height: 46px;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='46'%3E%3Cpath d='M16.5 9 V37' stroke='rgba(40,32,18,.30)' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M13 9 V37' stroke='%2325282e' stroke-width='5.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.4 12 V34' stroke='rgba(255,255,255,.26)' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x left top;
  }
}


/* ---------- work ---------- */
/* the track still slides edge to edge, but it starts and ends on the same
   column as every other section: the side inset grows past 1400px */

/* ---------- image slot placeholder (empty state, no photo yet) ---------- */
.img-slot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  background: repeating-linear-gradient(135deg, var(--hover) 0 2px, transparent 2px 14px), var(--surface);
  border: 1px dashed var(--dash);
}
.img-slot__cap { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); max-width: 85%; }

/* ---------- real photo fill (case cards, talks grid, case modal) ---------- */
.media-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.03) brightness(.92);
}
.talks__tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 35%, rgba(0,0,0,.4) 100%);
  mix-blend-mode: multiply;
  transition: opacity .5s ease;
}

/* ---------- stack: the system map ----------
   Five stages, the platforms sitting at the stage where they do their work.
   Replaces the 3D ring that lived on a 300vh scroll track. */
.stack {
  position: relative; border-top: 1px solid var(--hair);
  /* nothing closes the board any more, so the foot of the section is the
     last family and not a stretch of empty page */
  padding: clamp(70px,10vh,150px) clamp(18px,6vw,120px) clamp(56px,7vh,96px);
  max-width: 1400px; margin: 0 auto;
}
/* the section already carries the side padding; the head must not add its own */
.stack .section-head { padding: 0 0 clamp(16px,2vw,26px); }
.path .section-head, .edu .section-head { padding: 0 0 clamp(22px,3vw,40px); border-bottom: 0; }
.stack__lead {
  margin: clamp(18px,2.4vw,30px) 0 0; max-width: 62ch;
  font-size: clamp(14px,1.05vw,17px); line-height: 1.6; color: var(--muted);
}

/* ---------- the board: the platforms, and how well he knows each ----------
   A funnel used to run this section, which filed every tool under one stage.
   That is false for the ones that do the whole job, and it buried what the
   section is for. The board is a shelf of families: what each tool is comes
   from the family it sits in, and every family ends in "etc." because he
   works in more than fits on a page. The percentage bars and the three
   "how well he knows it" bands were taken out at his request. */
.rig { display: flex; flex-direction: column; gap: clamp(26px,3.2vw,46px); margin-top: clamp(30px,4vw,54px); }
.rig__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rig__head .dot { background: var(--tone); }
.rig__band {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink);
}
.rig__rule { flex: 1 1 auto; }
.rig__n { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; color: var(--tone); }
.rig__note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.rig__tools {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rig__tool {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 11px 15px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,.9,.24,1),
    border-color .3s ease, background .3s ease;
  transition-delay: calc(var(--ti) * .05s);
}
.rig.is-in .rig__tool { opacity: 1; transform: none; }
.rig__tool:hover { border-color: var(--tone); background: var(--hover); }
/* the brand mark, or the initials in the same box when there is no mark */
.rig__mark {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  color: var(--tone); flex: none;
}
.rig__mark svg { width: 17px; height: 17px; fill: currentColor; display: block; }
/* the wordmarks (WooCommerce, Wix, n8n) are wide and short: in a square box
   they scale down to a dash, so they get a wider one */
.rig__mark--wide { width: 30px; }
.rig__mark--wide svg { width: 30px; height: 30px; }
.rig__mark--ini {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
  border: 1px solid currentColor; border-radius: 6px; opacity: .85;
}
.rig__name { font-size: 15.5px; letter-spacing: -.01em; }
/* the open end of each family */
.rig__tool--more { border-style: dashed; background: transparent; }
.rig__tool--more .rig__name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.rig__tool--more:hover { border-color: var(--line); background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .rig__tool { transition: opacity .2s linear; transform: none; }
}
.stack__legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(30px,4vw,52px); padding-top: clamp(18px,2.4vw,28px);
  border-top: 1px solid var(--hair);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-spacer { flex: 1; min-width: 60px; height: 1px; background: var(--hair); }
.legend-hint { color: var(--dim2); }


/* ---------- talks ---------- */
.talks { padding: clamp(70px,10vh,150px) clamp(18px,6vw,120px); border-top: 1px solid var(--hair); max-width: 1400px; margin: 0 auto; }
/* Each photo is a card that carries its own note: the place and the number on
   a mono line, then what was happening in that shot. The venue used to live in
   a heading over a row of photos, which left every photo but the first mute. */
.talks__lead {
  margin: 18px 0 clamp(26px,3.4vw,44px); max-width: 62ch;
  color: var(--muted); font-size: clamp(15px,1.15vw,17px); line-height: 1.65;
}
.talks__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(20px,2.6vw,38px) clamp(18px,2.2vw,30px);
}
.talk { display: flex; flex-direction: column; gap: 14px; }
.talk__shot { aspect-ratio: 4/3; }
.talk__shot .media-photo { transition: transform .8s cubic-bezier(.16,.9,.24,1), filter .5s ease; }
.talk:hover .media-photo { transform: scale(1.05); filter: saturate(1) contrast(1.03) brightness(1); }
/* the story clip sits over the photo and fades in once it is really playing,
   so a missing file just leaves the photo alone. No z-index: it has to stay
   under the tile gradient and under the badge. */
.talk__video { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.talk__video.is-playing { opacity: 1; }
/* sem rato o vídeo existe na mesma, mas só toca ao toque (ver wireTalkVideo);
   o cartão diz que há clip, com um ponto a pulsar no canto */
@media (hover: none) {
  .talk__shot { cursor: pointer; }
  .talk__shot:has(.talk__video)::before {
    content: ''; position: absolute; right: 12px; bottom: 13px; z-index: 3;
    width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
    animation: talkTapPulse 2.4s ease-out infinite;
  }
  .talk.is-playing .talk__shot::before { animation: none; opacity: .35; }
}
@keyframes talkTapPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}
/* the format sits on the photo, so the card head is free for the place */
.talk__badge {
  position: absolute; left: 12px; bottom: 11px; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(10,11,14,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
}
.talk__info { display: flex; flex-direction: column; gap: 7px; }
.talk__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.talk__n { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .24em; color: var(--accent); }
.talk__place {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}
/* which class it was, next to the venue and set apart from it by a dot */
.talk__lesson {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.talk__lesson::before { content: '\00b7'; margin-right: 10px; color: var(--dim); }
.talk__title { margin: 0; font-size: clamp(17px,1.4vw,21px); line-height: 1.2; letter-spacing: -.01em; }
.talk__desc { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.talks__tile {
  position: relative; overflow: hidden; border-radius: 10px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1);
}
.talks__tile .img-slot { border-radius: 10px; }

/* ---------- path ---------- */
.path { padding: clamp(70px,10vh,150px) clamp(18px,6vw,120px); border-top: 1px solid var(--hair); max-width: 1400px; margin: 0 auto; }
.path-item { display: grid; grid-template-columns: auto minmax(0,140px) minmax(0,1fr); gap: clamp(12px,2.4vw,34px); border-top: 1px solid var(--hair); padding: clamp(22px,3vw,40px) 0; align-items: start; }
.path-item__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; }
/* the rail is drawn as you go down it: each dot lights when the fill reaches it */
.path-item__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.path-item.is-on .path-item__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--glow); }
.path-item__line { position: relative; width: 1px; flex: 1; min-height: 34px; background: var(--hair); overflow: hidden; }
.path-item__line::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--done));
  transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.16,.9,.24,1);
}
.path-item.is-on .path-item__line::after { transform: scaleY(1); }
.path-item__year, .path-item__role { transition: color .4s ease; }
.path-item:not(.is-on) .path-item__year { color: var(--dim2); }
.path-item:not(.is-on) .path-item__role { color: var(--dim); }
.path-item__year { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.path-item__body { display: flex; flex-direction: column; gap: 8px; }
.path-item__role { font-weight: 900; font-stretch: 112%; font-size: clamp(19px,2.1vw,29px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.path-item__place { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.path-item__desc { font-size: clamp(14px,1.05vw,17px); line-height: 1.6; color: var(--muted); max-width: 70ch; }
.path__end-rule { border-top: 1px solid var(--hair); }

/* ---------- contact ---------- */


/* ---------- pc intro (click a desk prop to dive into the laptop screen, real site grows out of it) ---------- */
:root { --pc-inset: clamp(18px, 3.2vw, 40px); }
#pcStage { position: fixed; inset: 0; z-index: 30; background: var(--bg); }
#pcCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* a focused prop keeps its light; the rest of the room goes dark around it */
/* The falloff lands on var(--bg), the very colour the page next to it is
 painted in. It used to end on a deeper black, and that left a visible step
 where the room met the panel. */
.pc-spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--bg) 0%, transparent) 0,
    color-mix(in srgb, var(--bg) 0%, transparent) var(--sr, 200px),
    color-mix(in srgb, var(--bg) 78%, transparent) calc(var(--sr, 200px) * 1.45),
    var(--bg) calc(var(--sr, 200px) * 2.1));
}
/* on a phone the panel covers the screen anyway; keep the zoom clean */
@media (max-width: 760px), (max-aspect-ratio: 85/100) {
  .pc-spot { background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--bg) 0%, transparent) 0,
    color-mix(in srgb, var(--bg) 0%, transparent) var(--sr, 160px),
    color-mix(in srgb, var(--bg) 80%, transparent) calc(var(--sr, 160px) * 2)); }
}
.pc-copy {
  position: fixed; left: var(--pc-inset); bottom: clamp(74px,14vh,160px); z-index: 32;
  max-width: 44ch; transition: opacity .4s ease; pointer-events: none;
}
.pc-copy .kicker { margin-bottom: 16px; }
.pc-copy__title {
  margin: 0; font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(26px,4.6vw,58px); line-height: .95; letter-spacing: -.04em; color: var(--ink); text-wrap: balance;
}
.pc-copy__lead {
  margin: 18px 0 0; max-width: 30ch; font-size: clamp(14px,1.5vw,17px); line-height: 1.45; color: var(--ink);
}
/* socials + CV, docked to the bottom centre of the desk screen */
.pc-dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: clamp(18px,4vh,34px); z-index: 34;
  display: flex; align-items: center; gap: 16px; transition: opacity .3s ease;
}
.pc-dock a {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--dim2); text-decoration: none; transition: color .2s ease;
}
.pc-dock a:hover { color: var(--accent); }
.pc-dock svg { width: 16px; height: 16px; display: block; }
/* CV call to action, top left -- mirrors the language pill on the right */
.pc-cta {
  left: var(--pc-inset); padding: 0 18px; gap: 9px;
  background: var(--accent); color: var(--onAccent); text-decoration: none;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .2s ease, opacity .3s ease;
}
.pc-cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.pc-cta svg { width: 14px; height: 14px; display: block; }
.pc-cta span { white-space: nowrap; }

/* the roll animation needs 1.6em line boxes, which leaves the dot sitting a
   couple of pixels below the cap height of the uppercase label -- pull it
   back onto the text's own centre */
.pc-copy .kicker .dot { transform: translateY(-2px); }

.pc-copy__roles { min-width: 0; }
.pc-copy__meta {
  margin: 16px 0 0; display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim2);
}
.pc-copy__dot { color: var(--border); }

/* discreet signature, bottom right, where the scroll hint used to sit */
.pc-credit {
  position: fixed; right: var(--pc-inset); bottom: clamp(18px,4vh,34px); z-index: 32;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim2); opacity: .55;
  pointer-events: none; transition: opacity .3s ease;
}


/* follows the cursor on hover over a desk prop, naming what it opens */
.pc-hover-label {
  position: fixed; top: 0; left: 0; z-index: 33; pointer-events: none;
  margin: 18px 0 0 18px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; transition: opacity .18s ease;
}
.pc-hover-label.is-on { opacity: 1; }

/* ---------- PT / EN picker on the desk screen ---------- */
/* the two top-corner pills share one height so they read as a pair --
   PC_PILL_H is what keeps the icon in the CV button from making it taller */
.pc-lang, .pc-cta {
  position: fixed; top: clamp(16px,3vw,30px); z-index: 34;
  height: 34px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em;
  line-height: 1;
}
.pc-lang {
  right: var(--pc-inset); padding: 0 5px;
  border-color: var(--border); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.pc-lang:hover { background: var(--hover); border-color: var(--accent); }

/* Phones: one shared side inset for the copy, the two top pills and the
   footer, so nothing sits closer to the edge than anything else. Must come
   after the base rules above to win on equal specificity. */
@media (max-width: 700px) {
  :root { --pc-inset: 24px; }
  /* full width minus the shared inset, so the bigger headline keeps its
     two lines instead of breaking into three on wider phones */
  .pc-copy { left: var(--pc-inset); right: var(--pc-inset); max-width: none; }
  .pc-cta { left: var(--pc-inset); }
  .pc-lang { right: var(--pc-inset); }
  .pc-dock, .pc-credit {
    bottom: 22px; height: 18px; display: flex; align-items: center;
  }
  .pc-dock { left: var(--pc-inset); right: auto; transform: none; gap: 14px; }
  .pc-credit { right: var(--pc-inset); left: auto; text-align: right; }
  /* the headline carries the whole screen on a phone, so give it room */
  .pc-copy__title { font-size: clamp(32px,9.4vw,42px); }
}

/* phones: same pair, one size down -- must come after the base rules above */
@media (max-width: 700px) {
  .pc-lang, .pc-cta { height: 30px; font-size: 9px; }
  .pc-lang { padding: 0 12px; }
  .pc-cta { padding: 0 13px; letter-spacing: .12em; gap: 7px; }
  .pc-cta svg { width: 12px; height: 12px; }
}

/* ---------- back-to-desk button (only while the site is open) ---------- */
.pc-back {
  position: fixed; right: clamp(16px,3vw,34px); bottom: clamp(16px,3vw,34px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pc-back[hidden] { display: none !important; }
.pc-back:hover { background: var(--hover); border-color: var(--accent); transform: translateY(-2px); }
.pc-back__icon { color: var(--accent); font-size: 14px; line-height: 1; }

/* ---------- section pop-up (desk props other than the laptop) ---------- */
/* the panel sits over the right of the screen; the focused prop has the left */
/* The section opens as a page of the site docked to the right, full height,
   not as a card floating over the desk. Only the page itself takes clicks:
   the desk on the left stays live, so the prop can be clicked again. */
.pc-panel { position: fixed; inset: 0; z-index: 45; display: flex; align-items: stretch; justify-content: flex-end; padding: 0; pointer-events: none; }
/* display:flex above outranks the browser's [hidden] rule, so without this the
   closed panel keeps covering the viewport and swallowing every desk click */
.pc-panel[hidden] { display: none !important; }
/* dark only behind the panel, so the prop on the left stays in full view */
.pc-panel__backdrop {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,7,9,0) 0%, rgba(6,7,9,0) 30%, rgba(6,7,9,.55) 40%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.pc-panel.is-open .pc-panel__backdrop { opacity: 1; }
.pc-panel__sheet {
  position: relative; width: min(1180px, 70vw); height: 100%;
  display: flex; flex-direction: column; pointer-events: auto;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
/* The page used to meet the room at a hard 1px edge. It now dissolves into
   it with the same falloff the spotlight puts around the prop (.pc-spot),
   so the two halves read as one scene. Keep the colour in step with it. */
.pc-panel__sheet::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: clamp(120px, 14vw, 320px);
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 30%, transparent) 42%,
    color-mix(in srgb, var(--bg) 72%, transparent) 74%,
    var(--bg) 100%);
}
.pc-panel.is-open .pc-panel__sheet { transform: none; }
/* the page's own header, in the site's nav style */
.pc-panel__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 16px clamp(18px,3vw,36px); border-bottom: 1px solid var(--hair); flex: none;
}
.pc-panel__title {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); text-align: center;
}
.pc-panel__link {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: none; border: 0; padding: 6px 0; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  transition: color .2s ease;
}
.pc-panel__link:hover { color: var(--ink); }
.pc-panel__link--back { justify-self: start; }
.pc-panel__link--site {
  justify-self: end; color: var(--onAccent); background: var(--accent);
  padding: 9px 16px; border-radius: 999px;
}
.pc-panel__link--site:hover { color: var(--onAccent); filter: brightness(1.08); }
.pc-panel__body { overflow: auto; overscroll-behavior: contain; }

/* Sections are built for a full scroll-driven page: tall scroll tracks with
   sticky pins and scroll-positioned inner layouts. Inside the pop-up there is
   no scroll track to drive them, so collapse them to their natural height. */
/* o padding de baixo dá folga de scroll dentro do painel: sem ela o último
   dos três passos do Sobre nunca chegava a subir o suficiente para acender */
.pc-panel__body > section { height: auto !important; min-height: 0 !important; border-top: 0 !important; padding-top: clamp(28px,4vw,54px) !important; padding-bottom: clamp(80px,22vh,220px) !important; }
.pc-panel__body [class$="__pin"] { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
.pc-panel__body .services__stage { height: auto !important; min-height: 0 !important; overflow: visible !important; }
.pc-panel__body .binder__tabs, .pc-panel__body .stack__legend { display: none !important; }
/* the pop-up shows a copy of a section, and a copy is never watched by the
   observers that bring these in on scroll -- so show them outright */
/* the clone is never watched, so the tools would sit hidden in the panel */
.pc-panel__body .rig__tool { opacity: 1 !important; transform: none !important; }
.pc-panel__body .about__photo img { clip-path: none !important; transform: none !important; }
.pc-panel__body .about__caption { opacity: 1 !important; }
/* [data-reveal] starts at opacity 0 and is faded in by the scroll observer;
   the clone is never observed, so unhide it outright. */
.pc-panel__body [data-reveal] { opacity: 1 !important; transform: none !important; }
.pc-panel__body [data-stage] { opacity: 1 !important; transform: none !important; }
/* the 14 programmes are brought in by an observer on .edu__block--training,
   which never runs on the clone, so they sat at opacity 0 forever */
.pc-panel__body .edu__block--training .edu__row { opacity: 1 !important; transform: none !important; }


#realSite {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; width: 100vw; height: 100vh;
  transform: scale(.001); transform-origin: 0 0; background: var(--bg);
}
#realSite.is-released { position: static; inset: auto; overflow: visible; width: auto; height: auto; transform: none; }

@media (max-width: 700px) {
  .binder { padding-left: 14px; padding-right: 14px; }
  .binder__tabs { padding-left: 6px; gap: 3px; }
  .binder__tab { padding: 8px 6px 10px; align-items: center; }
  .binder__tab-l { display: none; }
  .hero__ctas { flex-direction: column; gap: 14px; width: 100%; }
  .hero__ctas .btn { width: 100%; text-align: center; }
  .hero__flow { opacity: .55; }
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .nav__links { gap: 10px; }
  .nav__links a[href="#path"] { display: none; }
  .nav__where { display: none; }
  /* .pc-copy width is handled by the phone block above -- an old 26ch cap
     here used to override it and break the headline onto a third line */
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ---------- talks: where each photo was taken ---------- */
.talks__tile { margin: 0; }
@media (max-width: 1100px) { .talks__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .talks__grid { grid-template-columns: 1fr; } }
/* ---------- formação ---------- */
.edu { padding: clamp(70px,10vh,150px) clamp(18px,6vw,120px); border-top: 1px solid var(--hair); max-width: 1400px; margin: 0 auto; }
/* a register of what he took and how, one line each */
.edu__grid { display: flex; flex-direction: column; gap: clamp(34px,5vw,60px); }
.edu__block-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim2);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.edu__count { color: var(--accent); }
.edu__list { list-style: none; margin: 0; padding: 0; }
.edu__list--split { columns: 2; column-gap: clamp(28px,5vw,80px); }
.edu__row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
  break-inside: avoid;
  transition: color .25s ease, border-color .25s ease;
}
.edu__row:hover { border-bottom-color: var(--edge); }
.edu__n { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em; color: var(--dim2); }
.edu__title { font-weight: 700; font-size: clamp(13.5px,1.1vw,16px); letter-spacing: -.01em; color: var(--muted); transition: color .25s ease; }
.edu__row:hover .edu__title { color: var(--ink); }
/* cada formação leva ao site de quem a dá; a seta só aparece a quem passa */
.edu__title--link {
  display: inline-flex; align-items: baseline; gap: 8px;
  text-decoration: none; color: var(--muted);
}
.edu__go { font-size: 11px; color: var(--accent); opacity: 0; transform: translateX(-3px);
  transition: opacity .25s ease, transform .25s ease; }
.edu__row:hover .edu__go, .edu__title--link:focus-visible .edu__go { opacity: 1; transform: none; }
.edu__title--link:hover { color: var(--ink); }
.edu__tag, .edu__meta {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim2); text-align: right; white-space: nowrap;
}
.edu__row--school .edu__title { font-size: clamp(15px,1.3vw,19px); color: var(--ink); }
/* the register arrives line by line when it comes into view */
.edu__block--training .edu__row { opacity: 0; transform: translateY(8px); }
.edu__block--training.is-in .edu__row {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * .035s);
}
@media (max-width: 760px) {
  /* two columns of programmes turn into two narrow slivers */
  .edu__list--split { columns: 1; }
  .edu__meta { display: none; }
  .contact__head { align-items: flex-start; }
  .contact__call { align-self: flex-start; }
}
@media (max-width: 860px) {
  .talks__lead { max-width: none; }
}

/* ---------- contact: the pitch on one side, the form on the other ---------- */
.contact {
  padding: clamp(80px,12vh,160px) clamp(18px,6vw,120px) clamp(36px,5vh,60px);
  border-top: 1px solid var(--hair);
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  gap: clamp(30px,5vw,80px); align-items: start;
}
/* the wrapper is what keeps the sticky column inside its own row: without it
   the pitch slides down over the row below, as the About photo used to */
.contact__col { min-width: 0; }
.contact__intro { position: sticky; top: clamp(90px,13vh,130px); }
.contact__intro { display: flex; flex-direction: column; gap: clamp(16px,2vw,22px); }
/* the title and the way out of the form, on one line */
.contact__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.contact__title {
  margin: 6px 0 0; font-weight: 800; font-stretch: 108%; font-size: clamp(28px,4vw,58px);
  line-height: 1.02; letter-spacing: -.035em; max-width: 18ch;
}
.contact__lead { margin: 0; max-width: 52ch; font-size: clamp(14.5px,1.15vw,17px); line-height: 1.6; color: var(--muted); }
/* the facts read across, as a strip under the pitch */
.contact__facts {
  margin: clamp(8px,1.4vw,16px) 0 0; display: flex; flex-wrap: wrap; gap: 0 clamp(24px,4vw,64px);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 14px 0;
}
.contact__facts > div {
  display: flex; align-items: baseline; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.contact__facts dt { color: var(--dim2); }
.contact__facts dd { margin: 0; color: var(--ink); }
.contact__facts a { color: var(--ink); }
.contact__facts a:hover { color: var(--accent); }
.contact__call {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--accent);
  transition: color .2s ease; white-space: nowrap;
}
.contact__call:hover { color: var(--accent); }
/* The machine is what this section is for, so the column beside it carries
   the three steps of using it, and the call went back to being one quiet line
   at the foot: as a card with a face, three ticks and a button of its own, it
   was pulling harder than the machine. The steps keep the column standing as
   tall as the kiosk, which is why the card was there in the first place. */
.contact__flow {
  list-style: none; margin: clamp(8px,1.4vw,14px) 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.cflow__step {
  display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 16px; row-gap: 4px;
  padding: clamp(14px,1.8vw,20px) 0; border-top: 1px solid var(--hair);
}
.cflow__n {
  grid-row: 1 / span 2; align-self: start; padding-top: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; color: var(--accent);
}
.cflow__title { font-weight: 700; font-size: clamp(15px,1.25vw,17.5px); letter-spacing: -.01em; color: var(--ink); }
.cflow__text { font-size: clamp(13.5px,1.05vw,15px); line-height: 1.55; color: var(--muted); }
/* the second door, said once and quietly */
.contact__aside {
  /* afastada da ficha: a linha da call e outra coisa, nao o fim dela */
  margin: clamp(26px,3.4vw,40px) 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim);
}
.contact__aside-link {
  display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--edge); padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.contact__aside-link:hover { color: var(--accent); border-color: var(--accent); }

.contact__form { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field__label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim2); padding: 0;
}
.field__label em { font-style: normal; color: var(--dim); letter-spacing: .12em; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 4px 0 9px; transition: border-color .25s ease;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'JetBrains Mono', monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 14px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .1s ease;
}
.chip:hover { border-color: var(--edge); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--onAccent); }
.contact__submit { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* ---------- the kiosk ----------
   The standing machine that hands you a queue ticket: screen up on the head,
   the column under it, and the ticket coming out of the slot in the column.
   It stands beside the pitch, not under it. */
.kiosk { position: relative; width: min(420px,100%); margin: 0 auto; transition: min-height .5s ease; }
/* the head: the casing around the screen, wider at the bottom like the real one */
.kiosk__head {
  position: relative; padding: 12px 12px 16px; border-radius: 26px 26px 12px 12px;
  background: linear-gradient(170deg, #4a4e57 0%, #33363d 34%, #262930 100%);
  box-shadow:
    0 50px 80px -46px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.pos__screen {
  background: var(--bg); border-radius: 18px 18px 8px 8px;
  border: 1px solid #0a0b0d; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 14px 30px -20px rgba(0,0,0,.9);
}
.pos__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; color: var(--dim2);
}
/* the machine's own log of what it has taken down so far */
.pos__log {
  display: flex; flex-direction: column; gap: 4px; justify-content: flex-end;
  /* fixed, and scrolling like a terminal: growing with each line typed made
     the machine change height while the visitor was filling it in */
  height: 96px; overflow: hidden; padding: 10px 14px 12px; margin: 0 10px 12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 9%, transparent), transparent);
  border-radius: 0 0 18px 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em;
}
.pos__log-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.pos__log-key { color: var(--dim); text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; }
.pos__log-val { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos__log-line--now .pos__log-key { color: var(--accent); }
.pos__log-line--now .pos__log-key::after { content: '_'; animation: posCaret 1.1s steps(1) infinite; }
@keyframes posCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Both steps sit in the same grid cell, and the one that is off stays laid out
   (visibility, not display). The box is then always as tall as the taller step,
   so choosing an option never resizes the screen. */
.kiosk .contact__form { display: grid; grid-template-columns: 1fr; padding: 0 16px 16px; }
.kiosk .field-row { grid-template-columns: 1fr; gap: 16px; }
.kiosk .field input, .kiosk .field textarea { font-size: 15px; }
.kiosk .field textarea { min-height: 54px; }
.kiosk .contact__submit { margin-top: 2px; }
.kiosk .contact__submit .btn { width: 100%; justify-content: center; text-align: center; }

/* the column under the head, and the mouth the ticket comes out of */
.kiosk__body {
  position: relative; width: 82%; margin: 0 auto; padding: 22px 0 34px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(100deg, #3f434b 0%, #2b2e35 30%, #1f2228 72%, #2a2d34 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 60px -50px rgba(0,0,0,.9);
}
.kiosk__mark {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; color: var(--dim2);
}
.kiosk__mark b { font-size: 11px; letter-spacing: .22em; color: var(--muted2); }
.kiosk__mark span {
  font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 2px 5px;
}
.kiosk__slot {
  position: relative; z-index: 5; width: 62%; height: 9px; margin: 20px auto 0; border-radius: 5px;
  background: linear-gradient(180deg, #000, #0c0d10);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.08);
}
/* the foot it stands on */
.kiosk__base {
  width: 58%; height: 16px; margin: -2px auto 0;
  border-radius: 6px / 50%;
  background: linear-gradient(180deg, #33363d, #1a1c21);
  box-shadow: 0 26px 40px -26px rgba(0,0,0,.95);
}
/* while the ticket is out, the screen steps back behind it */
.kiosk.is-printed .pos__screen { opacity: .2; filter: blur(1.5px); pointer-events: none; transition: opacity .5s ease, filter .5s ease; }

/* The ticket is printed downward out of the slot, and only then does the whole
   thing rise over the face of the machine. It must never make the kiosk taller:
   stretching the machine to hold the paper ballooned the whole section. */
.pos__paper {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  width: 250px; max-width: 78vw; display: flex; flex-direction: column; align-items: center; gap: 20px;
  z-index: 7;
  animation: ticketLift .8s cubic-bezier(.3,.9,.25,1) 1.5s both;
}
/* phase three: taken off the machine and held up over it */
@keyframes ticketLift {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-120%); }
}
.pos__paper[hidden] { display: none; }

/* the two screens of the flow: pick one, then give the details */
.kstep {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 13px; align-content: start;
  visibility: hidden; opacity: 0; pointer-events: none;
}
.kstep.is-on { visibility: visible; opacity: 1; pointer-events: auto; animation: kstepIn .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kstepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.kstep__ask {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--dim2);
}
.kmenu { display: flex; flex-direction: column; gap: 5px; }
/* one row per option, lettered like the menu on the machine at the counter */
.kmenu__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--muted);
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .1s ease;
}
.kmenu__item:hover { border-color: var(--accent); background: var(--hover); color: var(--ink); }
.kmenu__item:active { transform: translateY(1px); }
.kmenu__letter {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px;
  border: 1px solid var(--edge); background: var(--bg);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent);
}
.kmenu__label { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.kmenu__go { color: var(--dim2); font-size: 13px; transition: transform .2s ease, color .2s ease; }
.kmenu__item:hover .kmenu__go { color: var(--accent); transform: translateX(3px); }
/* step two keeps what you picked in view, and the way back to change it */
.kstep__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair);
}
.kstep__back {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--dim);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  transition: color .2s ease;
}
.kstep__back:hover { color: var(--accent); }
.kstep__hint {
  margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim);
  /* the line is empty until something is picked: reserve the tallest it gets,
     or the screen grows the moment the visitor chooses. The hints are written
     to fit two lines at this width -- keep them short. */
  min-height: 3em;
}
.kstep__chosen {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- the ticket ----------
   A queue ticket, not a bill: the number it is filed under, big, and the
   details under it. It feeds out of the machine and is then torn off. */
.ticket {
  position: relative; width: 100%;
  background: #f2efe7; color: #17181c;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.65;
  padding: 26px 20px 24px;
  --tooth: 12px;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--tooth) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--tooth) 51% repeat-x;
  /* phase one: printed, coming down out of the slot. phase two: the tug that
     takes it off the roll. The lift that follows lives on .pos__paper, so the
     button under the ticket travels with it. */
  animation: ticketPrint 1.45s cubic-bezier(.25,.8,.3,1) both;
}
@keyframes ticketPrint {
  0%   { clip-path: inset(0 0 100% 0); transform: translateY(-6px) rotate(0deg); }
  62%  { clip-path: inset(0 0 0 0); transform: translateY(0) rotate(0deg); }
  78%  { transform: translateY(7px) rotate(-1.5deg); }
  100% { transform: translateY(4px) rotate(-.8deg); }
}
.ticket > * { opacity: 0; animation: receiptLine .28s ease forwards; animation-delay: calc(.25s + var(--l) * .05s); }
@keyframes receiptLine { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ticket__head { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ticket__head b { font-size: 12px; letter-spacing: .26em; }
.ticket__head span { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: #6c6a63; }
/* the number, which is the point of a ticket */
.ticket__no {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 0 12px;
}
.ticket__no span { font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase; color: #6c6a63; }
.ticket__no b {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; font-stretch: 112%;
  font-size: 52px; line-height: 1; letter-spacing: -.04em;
}
.ticket__rule { height: 1px; margin: 8px 0; background: repeating-linear-gradient(90deg, #17181c 0 4px, transparent 4px 8px); opacity: .45; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ticket__row span { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #6c6a63; flex: none; }
.ticket__row b { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.ticket__thanks { text-align: center; padding-top: 10px; font-size: 9.5px; letter-spacing: .04em; color: #45443f; }
.ticket__code {
  height: 26px; margin-top: 12px;
  background: repeating-linear-gradient(90deg,
    #17181c 0 2px, transparent 2px 4px, #17181c 4px 5px, transparent 5px 9px,
    #17181c 9px 12px, transparent 12px 13px, #17181c 13px 14px, transparent 14px 18px);
}
/* it lands over the machine, so it carries its own background to stay legible */
.receipt__again {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px;
  backdrop-filter: blur(6px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  opacity: 0; animation: receiptLine .4s ease forwards 2.3s;
}
.receipt__again:hover { color: var(--ink); border-color: var(--accent); background: var(--surface); }

.contact__status { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.contact__status[data-kind="ok"] { color: var(--accent); }
.contact__status[data-kind="error"] { color: #e0876a; }

/* the kiosk drops under the pitch instead of standing beside it */
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .contact__intro { position: relative; top: auto; }
}

/* ---------- footer ----------
   One row across the full width: copyright left, networks in the middle, small
   print right. Two stacked rows with a second set of section links made a
   navigation nobody needed -- the nav at the top already does that. */
.site-foot {
  max-width: 1400px; margin: 0 auto;
  /* the bottom clears the floating "back to the desk" button */
  padding: clamp(26px,3.4vw,38px) clamp(18px,6vw,120px) clamp(76px,10vh,104px);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim2);
}
.site-foot__left { justify-self: start; }
.site-foot__right { justify-self: end; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
/* the same icons, at the same size, as the hero */
.site-foot__social { justify-self: center; display: flex; align-items: center; gap: 20px; }
.site-foot__social a { color: var(--dim2); display: inline-flex; transition: color .2s ease, transform .2s ease; }
.site-foot__social a:hover { color: var(--accent); transform: translateY(-2px); }
.site-foot__social svg { width: 18px; height: 18px; display: block; }
.site-foot__link {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--dim2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; transition: color .2s ease;
}
.site-foot__link:hover { color: var(--accent); }

/* ---------- the privacy policy, as a sheet over the page ---------- */
.legal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(16px,4vw,40px); }
.legal[hidden] { display: none; }
.legal__backdrop { position: absolute; inset: 0; background: rgba(6,7,9,.82); backdrop-filter: blur(6px); }
.legal__sheet {
  position: relative; width: min(680px,100%); max-height: min(80vh,760px); overflow: auto;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: 0 60px 100px -50px rgba(0,0,0,.95);
  animation: legalIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes legalIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.legal__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(18px,2.4vw,24px) clamp(20px,3vw,32px);
  background: var(--surface); border-bottom: 1px solid var(--hair);
}
.legal__title {
  margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted2); font-weight: 500;
}
.legal__close {
  background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer;
  padding: 0 2px; transition: color .2s ease;
}
.legal__close:hover { color: var(--accent); }
.legal__body { padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); }
.legal__item h3 {
  margin: 0 0 7px; font-size: clamp(14px,1.2vw,16px); font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.legal__item p { margin: 0; font-size: clamp(13.5px,1.05vw,15px); line-height: 1.65; color: var(--dim); }
body.legal-open { overflow: hidden; }
/* stacked and centred once the three zones stop fitting side by side */
@media (max-width: 760px) {
  .site-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .site-foot__left, .site-foot__right { justify-self: center; justify-content: center; }
}

/* ---------- CTA dock: call / CV, on screen after the hero ---------- */
.cta-dock {
  position: fixed; left: 50%; bottom: clamp(16px,3vw,34px); z-index: 61;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.95);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.cta-dock.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.cta-dock__line {
  display: block; margin-right: 12px; overflow: hidden; white-space: nowrap;
  font-size: 13.5px; color: var(--muted);
}
.cta-dock__line-text { display: block; transition: transform .22s ease, opacity .22s ease; }
.cta-dock__line-text.is-swapping { transform: translateY(-60%); opacity: 0; }

.cta-dock__btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
}
.cta-dock__btn:hover { transform: translateY(-1px); }
/* the global a:hover paints links accent; on the solid button that put accent
   text on an accent background and the label disappeared */
.cta-dock__btn--ticket:hover { color: var(--onAccent); background: color-mix(in oklab, var(--accent) 88%, #fff); border-color: color-mix(in oklab, var(--accent) 88%, #fff); }
.cta-dock__btn svg { width: 14px; height: 14px; display: block; }
/* the lead action is solid, the other one quiet; they trade places on
   the sections where the CV is the better next step */
.cta-dock__btn--ticket { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }
.cta-dock__btn--call, .cta-dock__btn--cv { background: transparent; color: var(--ink); border-color: var(--line); }
.cta-dock__btn--call:hover, .cta-dock__btn--cv:hover { color: var(--ink); border-color: var(--accent); }
/* on the career and the education the CV takes the second slot, not the call */
.cta-dock__btn--cv { display: none; }
.cta-dock.is-cv .cta-dock__btn--cv { display: inline-flex; }
.cta-dock.is-cv .cta-dock__btn--call { display: none; }
.cta-dock__cv-short { display: none; }

/* a small live dot on the call button */
.cta-dock__pulse {
  position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.cta-dock__pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor;
  animation: dockPulse 2.2s ease-out infinite;
}
@keyframes dockPulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

.cta-dock__desk {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
.cta-dock__desk svg { width: 18px; height: 18px; display: block; }

/* narrower screens: the line goes, so the dock never reaches the back button */
@media (max-width: 1100px) {
  /* left-aligned, so it shares the bottom edge with the back button */
  .cta-dock { left: clamp(16px,3vw,34px); padding-left: 6px; transform: translateY(calc(100% + 40px)); }
  .cta-dock.is-on { transform: none; }
  .cta-dock__line { display: none; }
}
/* phones: the dock takes the bottom edge and carries the way back to the desk */
@media (max-width: 680px) {
  .cta-dock {
    left: 12px; right: 12px; bottom: 12px; padding: 6px;
    transform: translateY(calc(100% + 30px));
  }
  .cta-dock.is-on { transform: none; }
  .cta-dock__btn { flex: 1; justify-content: center; padding: 12px 10px; }
  .cta-dock__cv-long { display: none; }
  .cta-dock__cv-short { display: inline; }
  .cta-dock__desk { display: inline-flex; }
  body.dock-on .pc-back { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-dock, .cta-dock__line-text { transition: none; }
  .cta-dock__pulse::after { animation: none; }
}


/* the desk pop-up: on a phone (or a tall window) the prop takes the top and
   the panel rises from the bottom */
/* phones: after the zoom, the panel takes the whole screen */
@media (max-width: 760px), (max-aspect-ratio: 85/100) {
  .pc-panel { align-items: stretch; justify-content: stretch; }
  .pc-panel__backdrop { background: rgba(6,7,9,.82); }
  /* full width here, so the left fade has nothing to fade into */
  .pc-panel__sheet::before { display: none; }
  .pc-panel__sheet {
    width: 100%; border-left: 0; box-shadow: none;
    opacity: 0; transform: translateY(24px);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .pc-panel.is-open .pc-panel__sheet { opacity: 1; transform: none; }
  /* no room for a centred title between the two links */
  .pc-panel__bar { grid-template-columns: 1fr auto; padding: 14px 16px; gap: 10px; }
  .pc-panel__link { white-space: nowrap; font-size: 9.5px; letter-spacing: .1em; gap: 7px; }
  .pc-panel__link--site { padding: 8px 12px; }
  .pc-panel__title { display: none; }
}
/* ---------- the object panels, measured by the panel ----------
   The sections are built for the 1400px page column, and both their side
   padding and their breakpoints are written in vw -- which inside the panel
   still means the whole screen. On a 1920 screen that put 115px of gutter on
   each side of an 899px panel: 230px thrown away, and every layout squeezed
   into what was left. The panel is a container now, so its own width drives
   the gutter and picks the narrow layouts. Those one-column layouts were
   designed for small widths; the desktop ones here were only crushed. */
.pc-panel__body { container-type: inline-size; container-name: panel; }
.pc-panel__body > section {
  padding-left: clamp(22px, 4cqi, 52px) !important;
  padding-right: clamp(22px, 4cqi, 52px) !important;
  max-width: none !important;
}
.pc-panel__body .about__photo { position: relative !important; top: auto !important; }
@container panel (max-width: 1040px) {
  /* Sobre, in the panel: he wants the photo BESIDE the text, not over it, so
     the picture shrinks to a column of its own and the text tightens up next
     to it. The kicker (01 / Sobre) goes across the top of both: `display:
     contents` on the body hands the kicker, the lead and the bio straight to
     this grid, so each can be placed. */
  .pc-panel__body .about {
    grid-template-columns: minmax(0,1fr) minmax(0,32cqi) !important;
    column-gap: clamp(16px,3cqi,30px) !important;
    row-gap: clamp(10px,1.6cqi,16px) !important;
    align-items: start;
  }
  .pc-panel__body .about__body { display: contents; }
  .pc-panel__body .about__body > .kicker { grid-column: 1 / -1; grid-row: 1; }
  /* o texto manda, e a foto acompanha do lado direito */
  .pc-panel__body .about__photo-col { grid-column: 2; grid-row: 2 / span 2; }
  .pc-panel__body .about__lead { grid-column: 1; grid-row: 2; margin: 0 !important; max-width: none; }
  .pc-panel__body .about__bio { grid-column: 1; grid-row: 3; margin: 0 !important; max-width: none; }
  /* ar a separar o bloco de cima dos tres passos */
  .pc-panel__body .about__steps { grid-column: 1 / -1; margin-top: clamp(28px,6cqi,64px) !important; }
  /* smaller picture, tighter type: this column is a third of a panel */
  .pc-panel__body .about__photo img { aspect-ratio: 4 / 4.6; max-height: none; border-radius: 12px; }
  .pc-panel__body .about__lead { font-size: clamp(19px,3.4cqi,30px) !important; line-height: 1.12; }
  .pc-panel__body .about__bio { font-size: clamp(13px,1.5cqi,15.5px) !important; line-height: 1.6; }
  /* Contacto, no painel: a máquina cai por baixo do texto, e a linha da call
     vai para **debaixo dela**, ao centro, a pedido dele. Para a linha poder
     passar para o fim, o `.contact__col` e o `.contact__intro` entregam os
     filhos à coluna (`display: contents`) e a ordem faz o resto. Com isso
     perde-se o `gap` do intro, por isso as peças levam margens próprias. */
  .pc-panel__body .contact {
    display: flex !important; flex-direction: column;
    grid-template-columns: none !important;
  }
  .pc-panel__body .contact__col,
  .pc-panel__body .contact__intro { display: contents; }
  .pc-panel__body .contact__title { margin-top: clamp(10px,1.6cqi,16px) !important; }
  .pc-panel__body .contact__lead { margin-top: clamp(12px,2cqi,18px) !important; }
  .pc-panel__body .contact__flow { margin-top: clamp(14px,2.4cqi,22px) !important; }
  .pc-panel__body .contact__facts { margin-top: clamp(12px,2cqi,18px) !important; }
  .pc-panel__body .kiosk { order: 2; margin-top: clamp(24px,4cqi,40px); }
  .pc-panel__body .contact__aside {
    order: 3; justify-content: center; text-align: center;
    margin: clamp(22px,3.4cqi,34px) auto 0 !important;
  }
  /* Stack: the board goes two tools a row */
  /* Pilares: the notebook closes to one page */
  .pc-panel__body .step { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto; align-content: start; padding-top: 46px; }
  .pc-panel__body .step__info, .pc-panel__body .step__art-wrap { grid-column: 1 !important; }
  .pc-panel__body .step__art-wrap { height: min(34vh,260px); }
  .pc-panel__body .step::after { display: none; }
  .pc-panel__body .step::before {
    left: 0; right: 0; width: auto; top: -4px; bottom: auto; height: 46px; transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='46'%3E%3Cpath d='M16.5 9 V37' stroke='rgba(40,32,18,.30)' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3Cpath d='M13 9 V37' stroke='%2325282e' stroke-width='5.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M11.4 12 V34' stroke='rgba(255,255,255,.26)' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") repeat-x left top;
  }
  /* Formação: two columns of programmes would be two slivers */
  .pc-panel__body .edu__list--split { columns: 1 !important; }
}
@container panel (max-width: 560px) {
  .pc-panel__body .edu__meta { display: none !important; }
  /* on a phone the panel is the whole screen: a third of it for the photo
     leaves the text in a gutter, so the Sobre stacks again */
  .pc-panel__body .about { grid-template-columns: 1fr !important; row-gap: clamp(14px,3.5cqi,22px) !important; }
  /* one column, but the kicker keeps the top: photo, then lead, then bio */
  .pc-panel__body .about__body > .kicker { grid-column: 1; grid-row: 1; }
  .pc-panel__body .about__photo-col { grid-column: 1; grid-row: 2; }
  .pc-panel__body .about__steps { margin-top: clamp(22px,6cqi,40px) !important; }
  .pc-panel__body .about__lead { grid-column: 1; grid-row: 3; }
  .pc-panel__body .about__bio { grid-column: 1; grid-row: 4; }
  .pc-panel__body .about__photo { max-width: 300px; }
}
/* the path, at panel width: the year sits over the role instead of beside it */
.pc-panel__body .path-item { grid-template-columns: auto minmax(0,1fr) !important; row-gap: 8px; }
.pc-panel__body .path-item__rail { grid-row: span 2; }
.pc-panel__body .path-item__year,
.pc-panel__body .path-item__body { grid-column: 2; }


/* =====================================================================
   Telemóvel: uma passagem pedida por ele, secção a secção. Fica no fim do
   ficheiro de propósito, que as media queries têm de vir depois das regras
   base que sobrepõem.
   ===================================================================== */

/* A nav é só navegação: o nome sai (já está no hero, logo por baixo) e o que
   fica alinha-se ao centro, como o copy do hero. */
@media (max-width: 640px) {
  .nav { justify-content: center; gap: 0; flex-wrap: nowrap; padding: 12px 10px; }
  .nav__brand { display: none; }
  /* tudo numa linha só: três secções e a língua */
  .nav__links {
    flex: 1 1 auto; justify-content: center; flex-wrap: nowrap;
    gap: 12px; font-size: 10px; letter-spacing: .12em;
  }
  .nav__lang { padding: 4px; border-color: var(--edge); }
  .nav__lang-opt { padding: 2px 6px; font-size: 9.5px; }
}

@media (max-width: 700px) {
  /* Sobre: ar depois da fotografia, e o mesmo ar acima e abaixo do "01 Sobre" */
  .about__photo-col { margin-bottom: 4px; }
  .about__body > .kicker { margin: 30px 0 30px; }
  .about__lead { margin-top: 0; }

  /* A ensinar: eram 313px entre o topo da secção e a primeira fotografia, e
     num telemóvel isso é meio ecrã de scroll a ver texto. O cabeçalho aperta
     para as fotos entrarem logo a seguir à secção de cima. */
  .talks { padding-top: clamp(40px,6vh,60px); }
  .talks .kicker--section { margin-bottom: 16px; }
  .talks__lead { margin: 12px 0 20px; }

  /* Percurso: a data deixa de ter uma coluna só para ela e passa para cima do
     cargo, para o texto ficar com a largura toda (e maior) */
  .path-item { grid-template-columns: auto minmax(0,1fr); column-gap: 14px; row-gap: 8px; }
  .path-item__rail { grid-row: span 2; }
  .path-item__year, .path-item__body { grid-column: 2; }
  .path-item__role { font-size: clamp(18px,5.2vw,23px); }
  .path-item__desc { font-size: 14.5px; line-height: 1.65; }
}

/* Pilares: o "PILAR 01 / 06" desce, e a folha deixa de estar encostada ao topo
   -- o conteúdo fica ao centro da página, na mesma alinhado à esquerda. */
@media (max-width: 860px) {
  .step {
    align-content: center;
    padding-top: clamp(58px,13vw,78px);
    padding-bottom: clamp(26px,6vw,40px);
  }
}

/* Contacto: como no painel da secretária, a linha da call passa para baixo da
   máquina e ao centro. Para ela poder ir para o fim, o `.contact__col` e o
   `.contact__intro` entregam os filhos à coluna (`display: contents`), e com
   isso perde-se o `gap` do intro: as peças levam margens próprias. */
@media (max-width: 900px) {
  .contact {
    display: flex; flex-direction: column;
    grid-template-columns: none;
  }
  .contact__col, .contact__intro { display: contents; }
  .contact__title { margin-top: 12px; }
  .contact__lead { margin-top: 16px; }
  .contact__flow { margin-top: 20px; }
  .contact__facts { margin-top: 16px; }
  .kiosk { order: 2; margin-top: clamp(26px,6vw,40px); }
  /* o CTA "Enviar pedido" aterra na máquina: a nav fixa não a pode tapar */
  .kiosk { scroll-margin-top: 72px; }
  .contact__aside {
    order: 3; justify-content: center; text-align: center;
    margin: clamp(24px,6vw,38px) auto 0;
  }
}