/* Inner pages.
   The home is Persuade, footage leads. These are not. Sobre, FAQ and Blog are Read
   surfaces: comprehension and wayfinding outrank spectacle. Contato is Operate: the
   task is filling a form. Same world, film black, academy cream, tally red meaning
   live, Archivo against Courier Prime, spent on reading instead of on cinema. */

.masthead { position: sticky; background: var(--black); }

/* ── page head ────────────────────────────────────────────────────────── */

.crumb {
  padding: 6.5rem var(--pad) 0;
  font-family: var(--doc);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.crumb a { text-decoration: none; border-bottom: 1px solid rgba(242,237,227,.3); }
.crumb a:hover { color: var(--cream); border-bottom-color: var(--tally); }
.crumb span { color: var(--cream); }

/* The service pages open on the same beat the home page runs: footage, grade, type at
   the bottom. They stop short of the home's full 100svh because a service page has to
   show that it continues, the fold is an argument on the home, a cost here. They also
   run without the slate and without the crumb: both restated the service name the
   headline already carries, and two document lines stacked over the footage read as a
   duplicate rather than as a slate. */
.beat-page {
  min-height: 82svh;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* O tamanho do herói é calibrado para manchete de até ~42 caracteres, que é o que
   quase toda página tem. Acima disso o texto passa de três linhas e sai da tela.
   Manchete longa recebe este degrau: mesma família e peso, escala menor. */
.beat-page h1.h1-longo {
  font-size: clamp(2.25rem, 1rem + 4.6vw, 5rem);
  line-height: .95;
}
/* the home hero's framing is specific to its LED-wall source; these ten are framed
   centre, and four are already cropped to drop a burned-in caption band */
.beat-page .beat-media { object-position: 50% 50%; transform: scale(1.1); }

.page-head {
  padding: clamp(1.75rem, 4vw, 3rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(242,237,227,.14);
}
.page-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 1.2rem + 5.5vw, 6rem);
  font-variation-settings: "wdth" 106, "wght" 880;
  line-height: .9;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.page-head h1 em { font-style: normal; color: var(--tally); }
.page-head > p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: #cdc7bc;
}

.page-section { padding: clamp(2.75rem, 6vw, 4.5rem) var(--pad); }
.page-section + .page-section { border-top: 1px solid rgba(242,237,227,.12); }
.page-section > h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.625rem, 1rem + 2.2vw, 2.75rem);
  font-variation-settings: "wdth" 104, "wght" 820;
  line-height: 1;
  letter-spacing: -.035em;
}
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.15rem; color: #cdc7bc; line-height: 1.68; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--cream); font-weight: 700; }

/* ── ledger: values, promises, a list that stays a list ──────────────── */

.ledger { margin: 0; padding: 0; border-top: 1px solid rgba(242,237,227,.16); max-width: 74ch; }
.ledger > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(242,237,227,.12);
}
.ledger dt {
  font-family: var(--doc);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  padding-top: .2rem;
}
.ledger dd { margin: 0; color: #cdc7bc; line-height: 1.6; }

/* ── steps: an ordered operation, numbered because the order is the content ── */

.steps { margin: 0; padding: 0; list-style: none; max-width: 68ch; counter-reset: s; }
.steps li {
  position: relative;
  counter-increment: s;
  padding: .7rem 0 .7rem 2.75rem;
  color: #cdc7bc;
  line-height: 1.6;
  border-bottom: 1px solid rgba(242,237,227,.1);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .85rem;
  font-family: var(--doc);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--tally);
}

/* ── related ──────────────────────────────────────────────────────────── */

.rel-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.rel-list a {
  display: inline-block;
  padding: .6em 1em;
  font-family: var(--doc);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--cream);
  border: 1px solid rgba(242,237,227,.28);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.rel-list a:hover { border-color: var(--tally); background: rgba(232,38,26,.1); }

/* ── service index ────────────────────────────────────────────────────── */

/* fixed at 4 so the 8 services close as two full rows, auto-fill left orphan cells
   showing the grid's own gap colour as an empty panel */
.svc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(242,237,227,.14); border: 1px solid rgba(242,237,227,.14); }
.svc-list li { background: var(--black); }
.svc-list a {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  padding: 1.35rem 1.25rem;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.svc-list a:hover { background: var(--black-2); }
/* Two caps rather than a fixed height, and align-self so the column flexbox stops
   stretching the mark to the cell width, under stretch, width:auto resolved to the
   stretched width and every mark rendered at the same 12:1 box whatever its file.
   The caps are what make the row read evenly: these eight are not one kind of asset.
   WEBAPPI and PixFind are square app lockups, INAC Live is a 6.7:1 wordmark, and a
   single height sizes the square to a 24px dot beside a 162px signature. Bounding both
   axes lets the wide marks run out to the width cap and the square ones stand up to
   the height cap, with nothing scaled off its own proportion. */
.svc-list img {
  height: auto;
  width: auto;
  max-height: 2.25rem;
  max-width: 9rem;
  align-self: start;
}
.svc-list b {
  font-family: var(--doc);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--cream-dim);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { max-width: 78ch; margin: 0; padding: 0; border-top: 1px solid rgba(242,237,227,.16); }
.faq details { border-bottom: 1px solid rgba(242,237,227,.12); }
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-variation-settings: "wdth" 104, "wght" 720;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--doc);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--tally);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: #fff; }
.faq .answer { padding: 0 0 1.5rem; max-width: 68ch; color: #cdc7bc; line-height: 1.68; }
.faq .answer p { margin: 0; }

/* ── blog ─────────────────────────────────────────────────────────────── */

.posts { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(242,237,227,.16); }
.posts li { border-bottom: 1px solid rgba(242,237,227,.12); }
.posts a {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.75rem;
  padding: 1.6rem 0;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.posts a:hover { background: rgba(242,237,227,.04); }
.post-meta {
  font-family: var(--doc);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.post-meta b { display: block; color: var(--tally); font-weight: 700; }
.posts h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  font-variation-settings: "wdth" 104, "wght" 740;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
}
.posts p { margin: 0; max-width: 62ch; color: #cdc7bc; line-height: 1.6; font-size: .9375rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button {
  font-family: var(--doc);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45em .9em;
  border: 1px solid rgba(242,237,227,.28);
  background: none;
  color: var(--cream-dim);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.filters button:hover { color: var(--cream); }
/* the count rides along as a dimmer figure so the label stays the thing you read */
.filters button i { font-style: normal; opacity: .55; }
.filters button[aria-pressed="true"] { border-color: var(--tally); color: var(--cream); }
.posts-empty { padding: 2rem 0; color: var(--cream-dim); }

/* ── contato ──────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--pad);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--doc);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.field .req { color: var(--tally); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cream);
  background: var(--black-2);
  border: 1px solid rgba(242,237,227,.28);
  border-radius: 0;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--tally);
  background: #15151a;
}
.field input::placeholder, .field textarea::placeholder { color: #6f6a60; }
.field select { appearance: none; background-image: none; }

.form-note {
  margin: 1.25rem 0 0;
  font-family: var(--doc);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--cream-dim);
}

.form-status {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  font-family: var(--doc);
  font-size: .8125rem;
  line-height: 1.5;
  border: 1px solid var(--tally);
  color: var(--cream);
}
.byline {
  margin: .6rem 0 0;
  font-family: var(--doc);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--cream-dim);
}
.byline a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(242,237,227,.3); }
.byline a:hover { border-bottom-color: var(--tally); }

.form-status[hidden] { display: none; }
/* a borda vermelha é o estado de erro; sucesso e envio saem do registro de alerta */
.form-status[data-tipo="ok"] { border-color: rgba(242,237,227,.5); }
.form-status[data-tipo="enviando"] { border-color: rgba(242,237,227,.28); color: var(--cream-dim); }

/* armadilha de bot: fora da tela, fora da ordem de foco, sem display:none -
   parte dos robôs ignora campo escondido por display */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-facts { margin: 0; border-top: 1px solid rgba(242,237,227,.16); }
.contact-facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(242,237,227,.12);
}
.contact-facts dt {
  font-family: var(--doc);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.contact-facts dd { margin: 0; color: var(--cream); }
.contact-facts a { text-decoration: none; border-bottom: 1px solid rgba(242,237,227,.3); }
.contact-facts a:hover { border-bottom-color: var(--tally); }

/* ── shared close ─────────────────────────────────────────────────────── */

.page-close { padding: clamp(3rem, 7vw, 5rem) var(--pad); border-top: 2px solid var(--tally); }
.page-close h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  font-variation-settings: "wdth" 106, "wght" 860;
  line-height: .94;
  letter-spacing: -.04em;
}
.page-close p { margin: 0 0 1.75rem; max-width: 48ch; color: #cdc7bc; }
.page-close .beat-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 62rem) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .crumb { padding-top: 1.5rem; }
  .svc-list { grid-template-columns: minmax(0, 1fr); }
  .ledger > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .posts a { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .contact-facts > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .page-close .beat-actions .btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* this file loads after styles.css, so .beat-page's resting crop would otherwise
     outrank the rule there that settles every beat at scale 1 */
  .beat-page .beat-media { transform: scale(1); }
}