/* Gasch, home. Tokens first: the lightest and darkest of the palette lead. */
@font-face { font-family: "Gambit"; font-weight: 300; font-style: normal; src: local("At Gambit Light"), local("AtGambit-Light"); }
@font-face { font-family: "Gambit"; font-weight: 400; font-style: normal; src: local("At Gambit Regular"), local("At Gambit"), local("AtGambit-Regular"); }

:root {
  --paper: #fbfbf4;
  --mist: #a8a8a0;
  --slate: #666666;
  --ink: #020202;
  --night: #020202;
  --night-2: #0a0a0a;
  --paper-2: #e7e6dc;

  --serif: "Gambit", "Newsreader", Georgia, serif;
  --sans: "Inter", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  --fs-hero: clamp(32px, 3.9vw, 68px);
  --fs-xl: clamp(44px, 5.83vw, 96px);
  --fs-h2: clamp(34px, 3.75vw, 60px);
  --fs-city: clamp(30px, 3.9vw, 64px);
  --fs-h3: clamp(24px, 2.36vw, 38px);

  --m: 24px;
  --gap: 8px;
  --r: 6px;
  --r-ctl: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-line: rgba(251, 251, 244, 0.12);
  --glass-ink: var(--paper);
  --hair: rgba(2, 2, 2, 0.14);
  color-scheme: dark light;
}
@media (max-width: 767px) { :root { --m: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 18px/25px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
[data-theme="dark"] ::selection { background: var(--paper); color: var(--night); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; border-radius: var(--r-ctl); }
html { scrollbar-color: var(--slate) var(--night); }

/* ---------- glass + border glow (React Bits BorderGlow, ported) ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid transparent;   /* sem stroke: o 1px fica para não mudar o tamanho */
  color: var(--glass-ink);
}
.glow { position: relative; isolation: isolate; }
.glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(var(--gr, 140px) circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--gc, 251 251 244) / 0.95), rgb(var(--gc2, 168 168 160) / 0.5) 40%, transparent 72%);   /* --gc/--gc2: the Prism's colours, set by main.js from the cursor */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--go, 0);
  pointer-events: none;
}
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(var(--gr, 140px) circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--gc, 251 251 244) / 0.14), transparent 70%);
  opacity: var(--go, 0);
  pointer-events: none;
  z-index: -1;
}

/* ---------- loader ---------- */
.loader { display: none; }
.js .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  animation: loader-failsafe 0s 5s forwards;
}
@keyframes loader-failsafe { to { visibility: hidden; } }
.loader__half { position: absolute; inset: 0; }
.loader__half--a { background: #0a0a0a; clip-path: polygon(0 0, 100% 0, 100% 39%, 0 61%); }
.loader__half--b { background: var(--night); clip-path: polygon(0 61%, 100% 39%, 100% 100%, 0 100%); }
.loader__count {
  position: absolute;
  left: var(--m);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  font: 300 34px/1 var(--serif);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.digit { display: block; height: 1em; overflow: hidden; }
.digit__reel { display: flex; flex-direction: column; }
.digit__reel span { display: block; height: 1em; }
.loader__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  margin: -28px 0 0 -23px;
  fill: var(--paper);
}
@media (prefers-reduced-motion: reduce) { .js .loader { display: none; } }

/* ---------- nav: three glass boxes ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  gap: 4px;
  font: 400 15px/21px var(--sans);
}
.nav__box {
  height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-ctl);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.nav__brand { padding: 0 22px; }
.nav__logo { width: 66px; height: auto; fill: currentColor; overflow: visible; } /* the letters reach the very bottom of the viewBox: let their edge show */
.nav__links { padding: 0 10px; }
.nav__links a { padding: 0 12px; height: 100%; display: inline-flex; align-items: center; opacity: 0.86; transition: opacity 0.6s var(--ease); }
.nav__links a:hover { opacity: 1; }
/* hover, its own (not the buttons' fill): the letters roll up one after another and the same word comes up from
   below (a text-shadow copy one line down), in a 1.2em window. main.js puts each letter in a span */
.nav__roll { display: inline-flex; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.nav__roll span { display: inline-block; text-shadow: 0 1.2em currentColor; transition: transform 0.55s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.nav__links a:hover .nav__roll span, .nav__links a:focus-visible .nav__roll span, .nav__cta:hover .nav__roll span, .nav__cta:focus-visible .nav__roll span { transform: translateY(-1.2em); }
.nav__cta { padding: 0 20px; }
.nav__menu { display: none; width: 44px; justify-content: center; gap: 3px; }
.nav__menu span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.nav.is-light .glass {
  --glass-bg: rgba(210, 208, 196, 0.42);   /* a shade under the paper, so it reads on the light sections */
  --glass-line: rgba(2, 2, 2, 0.12);
  --glass-ink: var(--ink);
}
.nav.is-light .glow::after { background: radial-gradient(var(--gr, 140px) circle at var(--gx, 50%) var(--gy, 50%), rgb(var(--gc, 2 2 2)), rgb(var(--gc2, 2 2 2) / 0.6) 40%, transparent 72%); }   /* colour on paper too, a touch stronger */
/* over the hero's bright Prism: smoked glass, white ink stays */
.nav.is-hero .glass {
  --glass-bg: rgba(255, 255, 255, 0.06);   /* plain glass: one even tint, so the three boxes read as one strip (no per-box sheen) */
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}

.sheet {
  position: fixed;
  z-index: 49;
  top: 68px;
  left: var(--m);
  right: var(--m);
  border-radius: var(--r);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  --glass-bg: rgba(10, 10, 10, 0.78);
}
.sheet[hidden] { display: none; }
.sheet a { font: 300 34px/1.4 var(--serif); padding: 6px 0; border-bottom: 1px solid var(--glass-line); }
.sheet a:last-child { border-bottom: 0; }

@media (max-width: 767px) {
  .nav { left: var(--m); right: var(--m); transform: none; justify-content: space-between; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
}

/* ---------- type ---------- */
.eyebrow { font: 500 13px/18px var(--mono); letter-spacing: -0.02em; text-transform: uppercase; color: var(--slate); margin-bottom: 20px; }
.h2 { font: 300 var(--fs-h2)/1.04 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.h2--sm { font-size: clamp(30px, 2.92vw, 48px); line-height: 1.06; }
.h2--xl { font-size: var(--fs-xl); line-height: 1; color: var(--paper); max-width: 13ch; }
.lede { margin-top: 24px; max-width: 46ch; color: var(--slate); }
.lede--dark { color: var(--mist); }
.w-mask { padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* ---------- hero (Estrela) ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
}
.hero__stage { position: absolute; inset: 0; }
/* React Bits Prism, behind the glass deer */
.hero__bg { position: absolute; inset: 0; }
.hero__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.prism {
  position: absolute;
  left: 50%;
  top: 50%;
  --pw: min(54vh, 58vw);
  width: var(--pw);
  height: calc(var(--pw) * 1.225);
  margin: calc(var(--pw) * -0.59) 0 0 calc(var(--pw) * -0.5);
  perspective: 1600px;
}
.prism__halo {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side at 46% 44%, rgba(168, 168, 160, 0.22), transparent 70%),
    radial-gradient(closest-side at 60% 64%, rgba(102, 102, 102, 0.28), transparent 75%);
  filter: blur(10px);
}
.prism__body { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.prism__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; }
.prism__layer--edge use { fill: none; stroke: url(#glass-edge); stroke-width: 2.2; }
.prism__layer--face use { fill: url(#glass-fill); stroke: rgba(251, 251, 244, 0.8); stroke-width: 1.6; }
.prism__layer--sweep use { fill: url(#glass-sweep); opacity: 0.55; mix-blend-mode: screen; }

.hero__title {
  position: absolute;
  left: var(--m);
  right: var(--m);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 300 var(--fs-hero)/1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--paper);
  pointer-events: none;
  z-index: 2;
}
.hero__half { display: block; white-space: nowrap; }
.hero__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  margin: -28px 0 0 -23px;
  fill: var(--paper);
  z-index: 3;
}
/* Estrela's scroll cue: centred, 3rem from the bottom, 1.4rem, desktop only */
.hero__scroll { position: absolute; left: 50%; bottom: calc(0.6944vw * 3); transform: translateX(-50%); z-index: 3; font-size: calc(0.6944vw * 1.4); line-height: 1.4; color: var(--paper); white-space: nowrap; pointer-events: none; }
.hero__scroll span { display: block; }   /* the span takes the entrance, the p takes the scroll */
@media (max-width: 1099px) { .hero__scroll { display: none; } }
@media (max-width: 767px) {
  .hero__title { top: 0; bottom: 0; transform: none; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 22vh 0 16vh; font-size: clamp(34px, 10vw, 44px); }
  .hero__half { white-space: normal; max-width: 9ch; }
  .hero__half--r { align-self: flex-end; text-align: right; }
  .prism { --pw: 74vw; }
}

/* ---------- work (Oimachi) ---------- */
.work { position: relative; z-index: 2; background: var(--paper); padding: 168px var(--m) 120px; }
.head { max-width: 760px; }
.work .head { max-width: 66%; }   /* the Work title runs to two thirds of the page */
.work .head .h2 { text-wrap: pretty; }   /* fill the lines out to that width instead of balancing them shorter */
.work .head .lede { max-width: none; }   /* the subtitle runs as far as the title does */
.cases { margin-top: 88px; }
.case {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  border-top: 1px solid var(--hair);
  padding: 8px 0 24px;
}
/* every case opens the work page (work/): the whole row is the link */
.case { position: relative; }
.case__link { position: absolute; inset: 0; z-index: 1; }
.case__meta { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding-top: 4px; }
.case__id { display: flex; gap: 12px; align-items: flex-start; }
.case__logo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-ctl);
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font: 400 17px/1 var(--serif);   /* Gambit Regular, not the Light of the titles */
  color: var(--ink);
}
.case__name { font: 500 15px/20px var(--sans); color: var(--ink); }
.case__kind { font: 500 11px/20px var(--mono); letter-spacing: -0.02em; text-transform: uppercase; color: var(--slate); }   /* the tags, set like the eyebrows */
.case__desc { font: 400 13px/18px var(--sans); color: var(--slate); max-width: 40ch; }
.case__media { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.case__media .ph { aspect-ratio: 3 / 2; }
.work__more { margin-top: 40px; }

/* honest placeholders: right proportion, palette colour, the name */
.ph {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c, var(--mist));
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), transparent 45%, rgba(2, 2, 2, 0.10));
  transition: transform 0.6s var(--ease);
}
.ph figcaption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 400 12px/16px var(--sans);
  color: var(--t, var(--ink));
  opacity: 0.72;
}
.ph video, .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* real media fills the placeholder's box */
.ph--ink { --c: var(--ink); --t: var(--paper); }
.ph--slate { --c: var(--slate); --t: var(--paper); }
.ph--mist { --c: var(--mist); --t: var(--ink); }
.ph--paper { --c: var(--paper-2); --t: var(--slate); }
.ph--night { --c: var(--night-2); --t: var(--mist); }
.case:hover .ph::before { transform: scale(1.04); }

.btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px 0 20px;
  border-radius: var(--r-ctl);
  font: 500 15px/1 var(--sans);
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background-color 0.4s var(--ease);
}
.btn:active { transform: scale(0.98); }
/* the diamond is always there, in a pale yellow. hover (Estrela's button): the ink fills down from the top,
   the text turns paper and the diamond turns half a circle */
.btn { position: relative; overflow: hidden; isolation: isolate; padding-left: 36px; }
.btn__bg { position: absolute; z-index: -1; left: -1%; top: -1%; width: 102%; height: 102%; background: var(--ink); transform: translateY(-102%); transition: transform 0.3s var(--ease); }
.btn__text { position: relative; transition: transform 0.6s var(--ease), color 0.3s var(--ease); }
.btn__dot { position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: #fff0b0; transform: rotate(45deg); transition: transform 0.8s var(--ease); }
.btn:hover .btn__bg, .btn:focus-visible .btn__bg { transform: translateY(0); transition-duration: 0.4s; }
.btn:hover .btn__text, .btn:focus-visible .btn__text { transform: translateX(3px); color: var(--paper); }
.btn:hover .btn__dot, .btn:focus-visible .btn__dot { transform: rotate(225deg); }
.btn--light { background: var(--paper-2); color: var(--ink); }   /* a shade under the paper, no stroke */
.btn--glass { height: 52px; padding: 0 28px; }

@media (max-width: 900px) {
  .case { row-gap: 16px; }
  .case__meta { grid-column: 1 / -1; }
  .case__media { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .case__media { grid-template-columns: 1fr 1fr; }
  .case__media .ph:first-child { grid-column: 1 / -1; }
  .work { padding-top: 120px; }
}

/* ---------- capabilities ---------- */
.caps { background: var(--paper); }
/* the smooth scroll lands sections on half pixels and the black body shows through as a hairline:
   each light section reaches 2px up over the one before, in the same paper */
.caps { position: relative; z-index: 2; box-shadow: 0 -2px 0 var(--paper); }

/* ---------- capabilities: Estrela "What we do" copied 1:1 ----------
   Desktop measures are Estrela's rem (0.6944vw = 10px at 1440): --u. Cards absolute, stacked;
   JS moves them (base 10.7u apart, the open one 24.7u). Below 1100px they stack as plain blocks. */
.caps--estrela { --u: 0.6944444vw; display: block; padding: 120px var(--m) calc(var(--u) * 2); }
.svcs__head { max-width: 66%; margin-bottom: calc(var(--u) * 4); } /* left, to two thirds of the page like the Work head */
.svcs__head .h2 { text-wrap: pretty; }
.svcs__inner { position: relative; height: calc(var(--u) * (42.7 + 24.7 + 10.7 * 3)); }
.svc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--u) * 42.7);
  padding: calc(var(--u) * 2);
  display: flex;
  justify-content: space-between;
  border-radius: var(--r);
  background: #f7f6f0;
  will-change: transform;
}
.svc:nth-child(2) { background: #e7e6dc; }
.svc:nth-child(3) { background: #dddcd0; }
.svc:nth-child(4) { background: #d2d0c4; }
.svc:nth-child(5) { background: #c8c6b9; }
.svc__media { flex-shrink: 0; width: calc(var(--u) * 44); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 0.2); }
.svc__content { width: calc(var(--u) * 67.5); padding-top: calc(var(--u) * 1.8); }
.svc__header { display: flex; justify-content: space-between; padding-right: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 3.2); }
.svc__title { width: calc(var(--u) * 53); font: 300 calc(var(--u) * 3.4)/1 var(--serif); color: var(--ink); letter-spacing: -0.005em; }
.svc__n { font: 300 calc(var(--u) * 3.4)/1 var(--serif); color: var(--ink); }
.svc__text { width: calc(var(--u) * 46); font-size: calc(var(--u) * 1.5); line-height: 1.4; color: var(--ink); opacity: 0.5; }
.svc--cta { padding: calc(var(--u) * 4); }
.svc--cta .svc__content { width: calc(var(--u) * 65.5); margin-left: auto; padding-top: 0; } /* = 66.5rem from the left at 1440 */
.svc--cta .svc__header { margin-bottom: calc(var(--u) * 5); }
.svc--cta .svc__title { line-height: 1.2; }
.svc__btn { height: calc(var(--u) * 4); padding: 0 calc(var(--u) * 2.2) 0 calc(var(--u) * 3.6); background: #dddcd0; color: var(--ink); }   /* one step lighter than its card (#c8c6b9), the third card's tone; not white */
/* the open card's text rises line by line (Estrela: 105% → 0, 0.6s out, 1.2s in, 0.06s per line) */
@media (min-width: 1100px) {
  .svc__text .line { transform: translateY(105%); transition: transform 0.6s var(--ease); }
  .svc.is-active .svc__text .line { transform: translateY(0); transition-duration: 1.2s; transition-delay: calc(var(--i, 0) * 0.06s + 0.06s); }
}
@media (max-width: 1099px) {
  .caps--estrela { padding: 96px var(--m) var(--m); }
  .svcs__head { margin-bottom: 32px; }
  .svcs__inner { height: auto; }
  .svc { position: relative; display: block; height: auto; padding: 20px 20px 56px; }
  .svc__media { width: 100%; height: auto; aspect-ratio: 5 / 3; }
  .svc__content { width: auto; padding-top: 20px; }
  .svc__header { flex-direction: column; padding-right: 0; margin-bottom: 20px; gap: 8px; }
  .svc__n { order: -1; }
  .svc__title, .svc__n { width: auto; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; }
  .svc__text { width: auto; font-size: 16px; }
  .svc--cta { padding: 92px 20px 104px; }
  .svc--cta .svc__content { width: auto; margin-left: 0; }
  .svc--cta .svc__header { margin-bottom: 20px; }
  .svc__btn { height: 40px; padding: 0 22px 0 36px; }
}

/* ---------- clients in + partners (Oimachi founders × Revelatio cities) ---------- */
.studio { background: var(--night); color: var(--paper); padding: 120px var(--m) 120px; }
.studio .eyebrow { color: var(--mist); }
.studio .h2 { color: var(--paper); }
.studio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tile { border-radius: var(--r); padding: 24px; }
.tile--cities {
  background: #181818;   /* the footer's card: #d9d9d9 at 10% on the black */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.cities {
  margin-top: auto;
  padding-top: 96px;
  font: 300 var(--fs-city)/1.08 var(--serif);
  letter-spacing: -0.01em;
  color: #41413d;   /* Estrela n-1: the cities not lit yet, on black */
  text-wrap: pretty;
}
.city { transition: color 0.5s var(--ease); }
.city.is-past { color: #807f76; }
.city.is-on { color: var(--paper); }
/* the passed cities, lit by the hero's Gasch Faixas: the fx layer sits on the list (same box), black outside the
   letters, so screening it over the card changes nothing but them */
.tile--cities { position: relative; }
.cities__fx { display: none; }
.has-cities-fx .cities__fx {
  display: block;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  isolation: isolate;
  mix-blend-mode: screen;
  clip-path: inset(3px);   /* the layer runs 4px past the list on every side; its rim (where the GPU leaks a hairline of light) is cut off */
}
/* the light never reaches the layer's rim: it is held 4px in, behind the mask's black border, so no edge can leak it while scrolling */
.cities__clip { position: absolute; inset: 4px; overflow: hidden; }
.cities__faixas { position: absolute; left: -10%; bottom: -8%; width: 120%; height: 150%; }
.cities__fx .cities { position: absolute; inset: 0; margin: 0; border: 4px solid #000; background: #000; color: #000; mix-blend-mode: multiply; }   /* black card, white letters: a mask; the 4px border puts the text back on the original */
.cities__fx .city { transition: color 0.8s var(--ease); }
.cities__fx .city.is-past { color: #fff; }
.cities__fx .city.is-on { color: #000; }
.has-cities-fx > .cities > .city.is-past { color: transparent; }   /* the original steps aside; the fx shows it */
.studio__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tile--partners {
  grid-column: 1 / -1;
  background: #2e2e2e;   /* the footer's "Book a call" block: #f7f7f7 at 10% on the card */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.studio .tile--partners .eyebrow { color: var(--mist); }
.studio .tile--partners .h2 { color: var(--paper); max-width: 16ch; }
/* the light card sits under the founders and closes the section as its CTA */
.partners__cta { margin-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.partners__line { font: 400 15px/21px var(--sans); color: var(--mist); max-width: 34ch; }
.partners__cta .btn--light { background: #444443; color: var(--paper); }   /* one more step up the same progression */
.person { background: #181818; display: flex; flex-direction: column; gap: 20px; padding-bottom: 16px; overflow: hidden; } /* 16px under the photo = its side margins */
.person__name { font: 500 15px/20px var(--sans); color: var(--paper); }
.person__bio { font: 400 13px/18px var(--sans); color: var(--mist); margin-top: 4px; max-width: 36ch; }
.person__photo { margin-top: auto; aspect-ratio: 4 / 5; border-radius: var(--r-ctl); margin-left: -8px; margin-right: -8px; overflow: hidden; background: #2e2e2e; }   /* solid placeholder until the portraits are final */
.person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 900px) {
  .studio__grid { grid-template-columns: 1fr; }
  .cities { padding-top: 64px; }
}
@media (max-width: 560px) {
  .studio__side { grid-template-columns: 1fr; }
  .tile--partners { min-height: 240px; }
}

/* ---------- CTA (Estrela testimonials, black, glass) ---------- */
.cta {
  position: relative;
  background: var(--night);
  color: var(--paper);
  padding: 176px var(--m) 152px;
  overflow: hidden;
  isolation: isolate;
}
.cta__light {
  position: absolute;
  z-index: -1;
  right: -6vw;
  top: 8%;
  width: min(62vw, 900px);
  aspect-ratio: 591 / 724;
  filter: blur(70px);
  opacity: 0.5;
}
.cta__light svg { width: 100%; height: 100%; fill: url(#glass-fill); }
.cta__light::after {
  content: "";
  position: absolute;
  inset: 20% -20% -10% -40%;
  background: radial-gradient(closest-side, rgba(102, 102, 102, 0.55), transparent);
}
.paths { margin-top: 88px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.path {
  min-height: 280px;
  padding: 24px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  transition: background-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.path:hover { --glass-bg: rgba(251, 251, 244, 0.11); }
.path__name { font: 300 var(--fs-h3)/1.1 var(--serif); }
.path__line { margin-top: auto; font: 400 15px/21px var(--sans); color: var(--mist); }
.path__go { position: absolute; top: 24px; right: 24px; width: 16px; height: 16px; color: var(--mist); transition: transform 0.6s var(--ease), color 0.6s var(--ease); }
.path:hover .path__go { transform: translate(3px, -3px); color: var(--paper); }
.cta__actions { margin-top: 40px; display: flex; gap: 8px; }
@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; }
  .path { min-height: 168px; }
  .cta { padding-top: 128px; }
}

/* ---------- footer (Estrela) ---------- */
.foot {
  background: var(--night);
  color: var(--paper);
  padding: 120px var(--m) 24px;
  overflow: hidden;
  overflow: clip;
}

/* ---------- footer, variant "estrela": Estrela's footer copied 1:1 ----------
   Measures in Estrela's rem (--u = 0.6944vw, 10px at 1440). A full-screen black footer with an inset card
   (2rem in, 0.4rem radius, #d9d9d9 at 10%): index + social on the left, the contact block on the right
   (12rem button block, text at 50%, diamond bullets, clock), the mark in the middle, the wordmark across the bottom. */
.foot--estrela { --u: 0.6944444vw; position: relative; height: 100vh; height: 100svh; min-height: calc(var(--u) * 80); padding: 0; border: 0; background: var(--night); overflow: hidden; }
.fe__bg, .fe__inner { position: absolute; top: calc(var(--u) * 2); left: calc(var(--u) * 2); width: calc(100% - var(--u) * 4); height: calc(100% - var(--u) * 4); border-radius: calc(var(--u) * 0.4); overflow: hidden; }
.fe__bg { background: rgba(217, 217, 217, 0.1); }
.fe__inner { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.fe__top { width: 100%; display: flex; justify-content: space-between; }
.fe__left { display: flex; margin: calc(var(--u) * 4.4) 0 0 calc(var(--u) * 4); }
.fe__links { display: flex; flex-direction: column; align-items: flex-start; }
.fe__links:first-child { margin-right: calc(var(--u) * 12); }
.fe__title { font: 300 calc(var(--u) * 1.8)/1 var(--serif); color: var(--paper); margin-bottom: calc(var(--u) * 2.4); }
.fe__link { position: relative; display: inline-block; overflow: hidden; vertical-align: top; font-size: calc(var(--u) * 1.5); line-height: 1.4; color: var(--paper); opacity: 0.5; transition: opacity 0.6s var(--ease); }
.fe__link:hover { opacity: 1; }
.fe__links .fe__link:not(:last-child) { margin-bottom: calc(var(--u) * 0.8); }
/* the underline that wipes in under a link (Estrela: 1px, 1.4s expo) */
.fe__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: translateX(-101%); transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1); }
.fe__link:hover::after { transform: translateX(0); }
.fe__link--on { opacity: 1; }
.fe__right { width: calc(var(--u) * 44); margin: calc(var(--u) * 2.4) calc(var(--u) * 2) 0 0; }
.fe__block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
  height: calc(var(--u) * 12);
  margin-bottom: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 0.2);
  background: rgba(247, 247, 247, 0.1);
  color: var(--paper);
  font-size: calc(var(--u) * 1.5);
  isolation: isolate;
  overflow: hidden;
}
/* hover (Estrela's ButtonBlock): the block wipes down to a colour field and the button inside turns into a
   black pill that follows the cursor. Here the field is the hero's Gasch Faixas (gasch-faixas.js) on black, mounted only while hovered. */
.fe__block-prism {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--night);
  clip-path: inset(0 0 102% 0);
  transition: clip-path 0.6s var(--ease);
}
/* the Faixas are drawn on a hero-shaped box (16:10) pinned to the bottom of the block, so the block shows
   the same band of light the hero shows at its foot, not the far sides of the effect */
.fe__faixas { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 16 / 10; }
.fe__block.is-on .fe__block-prism, .fe__block:focus-visible .fe__block-prism { clip-path: inset(0 0 0% 0); }
.fe__btn {
  --u: calc(0.6944444vw * 0.8);   /* the pill, diamond and slide run 20% smaller than the footer's rem */
  font-size: calc(var(--u) * 1.6);   /* ~13px at 1440 */
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 3.6);   /* flatter pill: shorter, same side padding */
  padding: 0 calc(var(--u) * 3.6) 0 calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 0.4);
  pointer-events: none;
  transition: background-color 0.4s var(--ease);
}
.fe__block-text { transition: transform 0.6s var(--ease); }
/* the diamond: right of the text at rest, it moves ahead of it on hover (two dots, one in, one out) */
.fe__btn::before, .fe__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 0.45);
  height: calc(var(--u) * 0.45);
  margin-top: calc(var(--u) * -0.225);
  border-radius: 1px;
  background: var(--paper);
  transition: transform 0.6s var(--ease);
}
.fe__btn::before { left: calc(var(--u) * 1.6); transform: rotate(45deg) scale(0); }
.fe__btn::after { right: calc(var(--u) * 1.6); transform: rotate(45deg) scale(1); }
.fe__block.is-on .fe__btn, .fe__block:focus-visible .fe__btn { background: var(--night); }
.fe__block.is-on .fe__block-text, .fe__block:focus-visible .fe__block-text { transform: translateX(calc(var(--u) * 2)); }
.fe__block.is-on .fe__btn::before, .fe__block:focus-visible .fe__btn::before { transform: rotate(45deg) scale(1); }
.fe__block.is-on .fe__btn::after, .fe__block:focus-visible .fe__btn::after { transform: rotate(45deg) scale(0); }
.fe__contact { display: flex; justify-content: space-between; padding-right: calc(var(--u) * 2); }
.fe__contact-text { margin-bottom: calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.5); line-height: 1.6; color: var(--paper); opacity: 0.5; }
.fe__pitch .fe__contact-text { line-height: 1.4; margin: calc(var(--u) * -0.3) 0 0; }   /* the links' line height, nudged up for Inter vs DM Mono, so it sits level with Home */
.fe__list { list-style: none; margin: 0; padding: 0; }
.fe__list li { display: flex; align-items: center; font-size: calc(var(--u) * 1.5); line-height: 1.4; }
.fe__list li:not(:last-child) { margin-bottom: calc(var(--u) * 1); }
.fe__bullet { width: calc(var(--u) * 0.4); height: calc(var(--u) * 0.4); margin-right: calc(var(--u) * 1); background: var(--paper); transform: rotate(45deg); }
.fe__list .fe__link { font-size: inherit; }
.fe__clock { font: 300 calc(var(--u) * 1.5)/1.4 var(--serif); color: var(--paper); white-space: nowrap; }
.fe__clock span { display: inline-block; min-width: calc(var(--u) * 5.6); font-variant-numeric: tabular-nums; }
.fe__mark { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 7.2); height: calc(var(--u) * 7.2); transform: translate(-50%, -50%); fill: var(--paper); z-index: 3; }
.fe__bottom { width: 100%; margin-top: auto; padding: calc(var(--u) * 2); }
.fe__logo { display: block; width: 100%; height: auto; fill: var(--paper); overflow: visible; }   /* the hover blur spills past the viewBox instead of being cut */
/* hover on the wordmark or the mark (main.js drives it): the other letters vanish, G·a·s·c·h slide together
   into "Gasch" in the middle, and they and the deer become a window onto a stronger, faster Prism */
.fe__logo, .fe__mark { cursor: pointer; }
.foot--estrela[data-fe-scroll] .fe__logo, .foot--estrela[data-fe-scroll] .fe__mark { cursor: auto; }   /* variant "scroll": nothing to hover */
/* 220% tall so the word, at the bottom of the card, falls in the coloured middle of the Prism, not its white base */
.fe__prism { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: 4; pointer-events: none; opacity: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@media (max-width: 1099px) {
  .foot--estrela { height: auto; min-height: 100vh; min-height: 100svh; }
  .fe__inner { position: relative; top: auto; left: auto; width: auto; height: auto; min-height: calc(100svh - 40px); margin: 20px; }
  .fe__bg { top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
  .fe__top { flex-direction: column; flex-grow: 1; }
  .fe__left { margin: 0; padding: 20px 20px 0; }
  .fe__links:first-child { margin-right: 100px; }
  .fe__left { flex-direction: column; }   /* the pitch goes under the index: side by side it wraps into a narrow column */
  .fe__pitch { margin-top: 40px; }
  .fe__pitch .fe__contact-text { margin-top: 0; }
  .fe__title { font-size: 18px; margin-bottom: 20px; }
  .fe__link, .fe__list li, .fe__contact-text, .fe__clock, .fe__block { font-size: 15px; }
  .fe__btn { font-size: 13px; }
  .fe__right { display: flex; flex-direction: column; width: auto; margin: 48px 0 0; padding: 20px 20px 0; }
  .fe__block { order: 2; height: 120px; margin: 30px 0 0; }
  .fe__btn { height: 30px; padding: 0 26px 0 12px; border-radius: 4px; }
  .fe__btn::before { left: 14px; } .fe__btn::after { right: 14px; }
  .fe__btn::before, .fe__btn::after { width: 5px; height: 5px; margin-top: -2.5px; }
  .fe__block.is-on .fe__block-text { transform: translateX(16px); }
  .fe__contact { flex-direction: column; padding-right: 0; }
  .fe__contact > div { order: 2; }
  .fe__clock { order: 1; margin-bottom: 30px; }
  .fe__mark { display: none; }
  .fe__bottom { padding: 20px; }
}

/* ---------- work page (work/): Oimachi's case page ("Evooq") mixed with Koto's ("Instagram") ----------
   Left column, fixed (pinned in main.js): a compact nav (logo, menu) and the other cases. Right: a reel or 16:9 hero first, then name +
   headline + services, then chapters as Koto's rows (small kicker left, title and text right) between images. */
.wk { background: var(--paper); color: var(--ink); padding: var(--m); }
.wk__grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.wk__side { display: flex; flex-direction: column; gap: 36px; }

.wk__nav { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 14px; border-radius: var(--r-ctl); background: var(--paper-2); }
.wk__home { display: flex; margin-right: auto; }   /* logo left, the menu dots right */
.wk__logo { width: 52px; height: auto; fill: var(--ink); overflow: visible; }
.wk__menu { width: 32px; height: 32px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: background-color 0.4s var(--ease); }
.wk__menu:hover, .wk__menu[aria-expanded="true"] { background: var(--paper); }
.wk__menu span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.wk__links { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-ctl); background: var(--paper-2); }
.wk__links a { padding: 8px 6px; font: 400 15px/1 var(--sans); border-radius: var(--r-ctl); transition: background-color 0.3s var(--ease); }
.wk__links a:hover { background: var(--paper); }
.wk__links-cta { margin-top: 4px; background: var(--ink); color: var(--paper); text-align: center; }
.wk__links .wk__links-cta:hover { background: var(--ink); opacity: 0.85; }


.wk__list { display: flex; flex-direction: column; gap: 6px; }
/* filter tags: All work, Brand identity, Web & App (main.js shows only the matching cards) */
.wk__tags { display: flex; gap: 4px; margin-bottom: 2px; }
.wk__tags .wk__all { flex: 1 1 auto; width: auto; justify-content: center; }   /* the three tags share the column's full width */
.wk__all { display: inline-flex; align-items: center; gap: 8px; width: fit-content; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-ctl); background: #f4f3ec; color: var(--slate); font: 500 13px/1 var(--sans); cursor: pointer; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.wk__all:hover { color: var(--ink); background: #ecebe3; }   /* every tag sits in a pill; the unselected ones in the lighter card tone */
.wk__all.is-on { background: var(--paper-2); color: var(--ink); }
.wk__item[hidden] { display: none; }
.wk__all-icon { width: 10px; height: 10px; background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0 / 3.4px 3.4px; }
/* the other cases as Oimachi's cards: category and +/− on top, the number square, name and one line */
.wk__item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: var(--r); background: #f4f3ec; transition: background-color 0.4s var(--ease); }
.wk__item:hover, .wk__item.is-current { background: var(--paper-2); }
.wk__cat { display: flex; justify-content: space-between; align-items: center; font: 400 12px/16px var(--sans); color: var(--slate); }
.wk__sign { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--sans); color: var(--ink); }
.wk__item.is-current .wk__sign { background: var(--ink); color: var(--paper); }
.wk__row-id { display: flex; gap: 12px; align-items: flex-start; }
.wk__row-id .case__logo { width: 38px; height: 38px; background: var(--paper); }
.wk__name { display: block; font: 500 14px/18px var(--sans); color: var(--ink); }
.wk__desc { display: block; font: 400 13px/17px var(--sans); color: var(--slate); }

.wk__case { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.wk__head { padding: 56px 8px 72px; }
.wk__title { font: 300 var(--fs-h3)/1.1 var(--serif); }
.wk__lede { margin-top: 40px; max-width: 30ch; font: 300 var(--fs-h2)/1.08 var(--serif); letter-spacing: -0.01em; text-wrap: pretty; }
.wk__label { color: var(--ink); font-weight: 500; margin-bottom: 4px; }
/* Koto's media blocks: every block is a 16:9 field. --one: a single image or video; --two: two verticals
   side by side; --three: one vertical plus two stacked, the big one on the left (or --right) */
.wk__m { display: grid; gap: var(--gap); aspect-ratio: 16 / 9; }
.wk__m .ph { margin: 0; width: 100%; height: 100%; min-height: 0; }
.wk__m--two { grid-template-columns: 1fr 1fr; }
.wk__m--three { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.wk__m--three > :first-child { grid-row: 1 / 3; }
.wk__m--three.wk__m--right > :first-child { grid-column: 2; }
.wk__m--three.wk__m--right > :nth-child(2) { grid-column: 1; grid-row: 1; }
.wk__m--three.wk__m--right > :nth-child(3) { grid-column: 1; grid-row: 2; }
/* Koto's text rows: a thin rule, a small kicker on the left, title and text in the right half */
.wk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 8px 48px; border-top: 1px solid var(--hair); margin-top: 96px; }
.wk__kicker { font: 500 11px/1.6 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.wk__h { font: 300 var(--fs-h3)/1.15 var(--serif); margin-bottom: 20px; }
.wk__body p { font: 400 16px/1.55 var(--sans); color: var(--slate); max-width: 52ch; }
.wk__body p + p { margin-top: 1em; }
/* the side's CTA balloon: the column runs the viewport's height, so it sits at the bottom */
@media (min-width: 901px) {
  .wk__side { min-height: calc(100vh - var(--m) * 2); min-height: calc(100svh - var(--m) * 2); }
}
.wk__ask { margin-top: auto; display: flex; flex-direction: column; gap: 36px; padding: 14px 14px 16px; border-radius: var(--r); background: var(--paper-2); color: var(--ink); transition: background-color 0.4s var(--ease); }   /* the nav's tone */
.wk__ask:hover { background: #dedcd1; }
.wk__ask-top { display: flex; justify-content: space-between; align-items: center; }
.wk__ask-title { font: 500 15px/20px var(--sans); }
.wk__ask-go { width: 16px; height: 16px; color: var(--slate); transition: transform 0.6s var(--ease), color 0.4s var(--ease); }
.wk__ask:hover .wk__ask-go { transform: rotate(90deg); color: var(--ink); }
.wk__ask-line { font: 400 14px/20px var(--sans); color: var(--slate); max-width: 32ch; }
.wk__next { margin-top: 96px; padding: 24px 8px 0; border-top: 1px solid var(--hair); }
.wk__next-link { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.wk__next-title { font: 300 var(--fs-xl)/1 var(--serif); letter-spacing: -0.01em; }
.wk__next-go { width: 40px; height: 40px; transition: transform 0.6s var(--ease); }
.wk__next-link:hover .wk__next-go { transform: translate(6px, -6px); }
/* CTA: 16:6, black, the hero's Gasch Faixas behind. Like the footer button, the effect is drawn on a hero-shaped
   box (16:10) pinned to the bottom, so the block shows the band of light the hero shows at its foot */
.wk__cta {
  position: relative;
  margin-top: calc(var(--m) - var(--gap));   /* + the column gap = the side margin */
  aspect-ratio: 16 / 6;   /* was 16:5, a little taller (João) */
  min-height: 300px;
  padding: clamp(24px, 3vw, 48px);
  border-radius: var(--r);
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 380px);
  grid-template-rows: 1fr auto;
  gap: 24px;
}
.wk__cta-bg { position: absolute; inset: 0; z-index: -1; }
.wk__cta-faixas { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 16 / 10; }
.wk__cta-faixas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wk__cta-title { grid-column: 1; grid-row: 1; align-self: start; max-width: 14ch; font: 300 var(--fs-h2)/1.04 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.wk__cta-logo { grid-column: 1; grid-row: 2; align-self: end; width: clamp(72px, 7vw, 112px); height: auto; fill: var(--paper); }
/* the glass runs the block's full height inside the padding: text at the top, button at the foot */
.wk__cta-card {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-content: space-between;
  --glass-bg: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-color: var(--glass-line);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.wk__cta-line { font: 400 15px/21px var(--sans); color: rgba(251, 251, 244, 0.78); max-width: 30ch; }
.wk__cta-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--r-ctl);
  background: var(--paper);
  color: var(--ink);
  font: 500 15px/1 var(--sans);
  transition: background-color 0.4s var(--ease);
}
.wk__cta-btn span { width: 14px; height: 14px; transition: transform 0.6s var(--ease); }
.wk__cta-btn:hover { background: #fff; }
.wk__cta-btn:hover span { transform: translate(3px, -3px); }
@media (max-width: 760px) {
  .wk__cta { aspect-ratio: auto; min-height: 460px; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
  .wk__cta-logo { grid-row: 3; }
  .wk__cta-card { grid-column: 1; grid-row: 2; gap: 40px; }
  .wk__cta-faixas { width: 220%; left: -60%; }
}
@media (max-width: 900px) {
  .wk__grid { grid-template-columns: 1fr; }
  .wk__side { gap: 24px; }
  .wk__list { display: none; }
  .wk__ask { display: none; }   /* on a phone the 16:5 CTA at the end does the job */
  .wk__row { grid-template-columns: 1fr; }
}

/* ---------- buttons, set like the eyebrows and tags: DM Mono medium, uppercase, -2% (João) ----------
   kept last so it wins over each button's own font line */
.btn, .nav__cta, .wk__cta-btn, .wk__links .wk__links-cta, .fe__btn { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; }
.btn, .nav__cta, .wk__cta-btn, .wk__links .wk__links-cta { font-size: 12px; }   /* the footer pill (.fe__btn) keeps its own size */
/* the footer's site index and social links, the same way */
.fe__link { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; font-size: calc(var(--u) * 1.3); }
@media (max-width: 1099px) { .fe__link { font-size: 13px; } }
/* the nav's links, like its "Book a call" */
.nav__links a { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; font-size: 12px; }

/* ---------- contact page (contact/): one hero, then the home's footer ----------
   The home's Gasch Faixas behind, the CTA's title and line on the left, the form on a glass card on the right
   (the same glass as the work page's CTA card), sitting over the band of light so the blur picks up its colours */
.ct {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 136px var(--m) var(--m);
  color: var(--paper);   /* no background: the fixed Faixas show through */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.ct__bg { position: fixed; inset: 0; z-index: -1; }   /* outside the smoother, so it stays put while the page scrolls */
/* the contact page's footer: clear around the card, so the Faixas fill the margin; the card itself opaque,
   the same grey it reads as on the home (#d9d9d9 at 10% over night) */
.foot--over { background: transparent; }
.foot--over .fe__bg { background: rgb(24 24 24); }
.ct__bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ct__intro { grid-column: 1 / span 6; align-self: start; }
.ct .eyebrow { color: var(--mist); }
.ct__title { font: 300 var(--fs-xl)/1 var(--serif); letter-spacing: -0.01em; max-width: 11ch; text-wrap: balance; }
.ct__lede { margin-top: 24px; max-width: 34ch; color: rgba(251, 251, 244, 0.78); }
.ct__form {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  padding: 24px;
  border-radius: var(--r);
  --glass-bg: rgba(255, 255, 255, 0.06);   /* the nav's glass over the hero (.nav.is-hero), so the card and the nav read as one material */
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}
.ct__need { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct__label { display: block; margin-bottom: 10px; padding: 0; font: 500 12px/16px var(--mono); letter-spacing: -0.02em; text-transform: uppercase; color: var(--paper); }   /* full white, like the nav's ink (João) */
.ct__label em { font-style: normal; opacity: 0.6; margin-left: 6px; }
.ct__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct__chip { position: relative; }
.ct__chip input { position: absolute; opacity: 0; pointer-events: none; }
.ct__chip span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.04);
  font: 400 14px/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ct__chip span:hover { border-color: rgba(251, 251, 244, 0.4); }
.ct__chip input:checked + span { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ct__chip input:focus-visible + span { outline: 1px solid var(--paper); outline-offset: 3px; }
.ct__field { display: block; }
.ct__field--wide, .ct__foot { grid-column: 1 / -1; }
.ct__field input, .ct__field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(251, 251, 244, 0.22);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: 400 17px/24px var(--sans);
  outline: none;
  transition: border-color 0.4s var(--ease);
}
.ct__field textarea { resize: vertical; min-height: 96px; }
.ct__field input:focus, .ct__field textarea:focus { border-bottom-color: var(--paper); }
.ct__field.is-bad input, .ct__field.is-bad textarea { border-bottom-color: rgb(255 140 140); }
.ct__field input:-webkit-autofill { -webkit-text-fill-color: var(--paper); transition: background-color 9999s; }
.ct__foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.ct__status { font: 400 14px/20px var(--sans); color: rgba(251, 251, 244, 0.78); }
.ct__send:disabled { opacity: 0.6; cursor: progress; }
.ct__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the spam trap: out of sight, out of the tab order */
@media (max-width: 900px) {
  .ct { grid-template-columns: 1fr; row-gap: 56px; min-height: 0; padding-top: 112px; }
  .ct__intro, .ct__form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ct__form { grid-template-columns: 1fr; padding: 20px; }
}