:root {
  --bg:#101110;
  --paper:#e9e7df;
  --lime:#c6f24a;
  --muted:#a8aaa3
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'DM Sans',sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
.wrap {
  width:min(1380px,90%);
  margin:auto
}
.nav {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ffffff24
}
.brand {
  font:700 25px 'Space Grotesk';
  letter-spacing:-2px
}
.brand span {
  color:var(--lime)
}
.navlinks {
  display:flex;
  gap:38px;
  font-size:13px;
  color:#cfcec8
}
.navcta,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  background:var(--lime);
  color:#111;
  padding:16px 22px;
  font-size:13px;
  font-weight:700
}
.hero {
  padding: 0;
  min-height:670px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  position:relative
}
.hero-copy {
  padding:105px 35px 85px 0;
  z-index:1
}
.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--lime)
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:'Space Grotesk',sans-serif
}
h1 {
  font-size:clamp(58px,7.4vw,110px);
  line-height:.94;
  letter-spacing:-.07em;
  margin:28px 0
}
h1 em {
  font-style:normal;
  color:var(--lime)
}
.lead {
  font-size:16px;
  line-height:1.8;
  max-width:430px;
  color:#b9bbb4;
  margin-bottom:35px
}
.hero-img {
  margin:35px 0 35px;
  background:linear-gradient(0deg,#10111082,#10111010),url('https://images.unsplash.com/photo-1590602847861-f357a9332bbc?auto=format&fit=crop&w=1500&q=85') center/cover;
  position:relative;
  min-height:500px
}
.hero-img:after {
  content:'SOM / IMAGEM / HISTÓRIA';
  position:absolute;
  bottom:25px;
  right:25px;
  font-size:10px;
  letter-spacing:.2em
}
.side-tag {
  position:absolute;
  right:22px;
  top:25px;
  font-size:10px;
  letter-spacing:.16em
}
.ticker {
  border-block:1px solid #ffffff2b;
  padding:20px 0;
  overflow:hidden;
  color:#d8d9d2;
  font:500 12px 'Space Grotesk';
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap
}
.ticker div {
  display:flex;
  justify-content:space-between;
  gap:32px
}
.ticker b {
  color:var(--lime)
}
section {
  padding:125px 0
}
.section-head {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:30px;
  margin-bottom:65px
}
.section-head h2,.process h2,.contact h2 {
  font-size:clamp(44px,5vw,72px);
  line-height:1.02;
  letter-spacing:-.055em
}
.section-head h2 span {
  color:#777b72
}
.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.card {
  border-top:1px solid #ffffff50;
  padding-top:20px
}
.card .num {
  color:var(--lime);
  font-size:12px
}
.card img {
  width:100%;
  height:250px;
  object-fit:cover;
  filter:saturate(.7);
  margin:30px 0 25px
}
.card h3 {
  font-size:28px;
  letter-spacing:-.04em
}
.card p {
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
  margin:12px 0 20px;
  max-width:340px
}
.card small {
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#d0d2c8
}
.process {
  background:#e9e7df;
  color:#171916
}
.process-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10%
}
.process .eyebrow {
  color:#596b2d
}
.process h2 {
  margin:24px 0
}
.process-intro {
  color:#64675f;
  line-height:1.7;
  max-width:360px
}
.step {
  display:grid;
  grid-template-columns:50px 1fr;
  gap:20px;
  border-top:1px solid #1a1b1833;
  padding:25px 0
}
.step strong {
  font:500 13px 'Space Grotesk';
  color:#777c6c
}
.step h3 {
  font-size:22px;
  margin-bottom:8px
}
.step p {
  color:#686b63;
  font-size:14px;
  line-height:1.6
}
.contact {
  text-align:center;
  padding:135px 0
}
.contact h2 {
  max-width:750px;
  margin:22px auto
}
.contact p {
  color:var(--muted);
  line-height:1.7;
  margin:0 auto 30px;
  max-width:480px
}
.contact .button {
  min-width:210px
}
.footer {
  border-top:1px solid #ffffff2b;
  padding:30px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#969990;
  font-size:12px
}
.footer .brand {
  color:var(--paper)
}
.menu {
  display:none;
  background:none;
  border:1px solid #777;
  color:white;
  padding:8px 12px
}
@media(max-width:800px) {
  .nav {
  height:72px
}
.navlinks {
  display:none
}
.navcta {
  display:none
}
.menu {
  display:block
}
.navlinks.open {
  display:flex;
  position:absolute;
  z-index:5;
  top:72px;
  left:0;
  right:0;
  background:#171916;
  padding:25px 5%;
  flex-direction:column
}
.hero {
  grid-template-columns:1fr
}
.hero-copy {
  padding:75px 0 35px
}
.hero-img {
  margin:0 0 35px;
  min-height:390px
}
.ticker div {
  width:max-content
}
.section-head,.process-grid {
  grid-template-columns:1fr
}
.services {
  grid-template-columns:1fr
}
.card {
  margin-bottom:30px
}
.card img {
  height:280px
}
section {
  padding:85px 0
}
.contact {
  padding:100px 0
}
.footer {
  gap:20px;
  flex-wrap:wrap
}

}


.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 16px #0005;
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
}
.whatsapp-float:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}