/* Base */

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  overflow-x: clip;
  background: var(--color-background);
  color: var(--color-text);
  font: 18px/1.42 var(--font-interface);
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--color-paper);
  background: var(--color-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: fixed;
  z-index: 40;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  transform: translateY(-180%);
  background: var(--color-primary);
  color: white;
}

.skip-link:focus {
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, p {
  text-wrap: pretty;
}

h1, h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-editorial);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
}

h1 {
  font-size: clamp(4.5rem, 7vw, 7rem);
}

h2 {
  font-size: clamp(2.8rem, 4.5vw, 5rem);
}

h1 em, h2 em {
  font-weight: 400;
}

/* Header */

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(13rem,1fr) auto minmax(13rem,1fr);
  align-items: center;
  min-height: 5.8rem;
  padding: .5rem var(--container-gutter);
  border-bottom: 1px solid rgb(8 39 28 / 10%);
  background: rgb(245 237 221 / 97%);
  color: var(--color-primary);
  transition: background var(--transition-standard), box-shadow var(--transition-standard), min-height var(--transition-standard);
}

.site-header.is-scrolled {
  min-height: 4.5rem;
  background: var(--color-background);
  box-shadow: 0 1px 0 var(--color-rule);
}

.wordmark {
  display: block;
  width: clamp(12rem, 14vw, 15rem);
}

.wordmark img {
  width: 100%;
  height: auto;
}

.site-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 3.3rem);
  font-size: clamp(.9rem, 1vw, 1.05rem);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.site-nav a:not(.nav-cta) {
  position: relative;
  padding: .75rem .18rem;
  white-space: nowrap;
}

.site-nav a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -.27rem;
  left: 0;
  height: 1px;
  background: var(--color-accent);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-standard);
}

.site-nav a:not(.nav-cta):hover::after, .site-nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}

.nav-cta {
  position: absolute;
  right: var(--container-gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 3.35rem;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-paper);
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  white-space: nowrap;
  transition: transform var(--transition-standard), background var(--transition-standard);
}

.nav-cta span {
  line-height: 1;
  translate: 0 -1px;
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: #174b35;
}

.nav-cta span, .button span {
  display: inline-block;
  transition: transform var(--transition-standard);
}

.nav-cta:hover span, .button:hover span {
  transform: translateX(3px);
}

.menu-toggle {
  display: none;
}

/* Layout geral */

main {
  position: relative;
}

.section {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--container-width));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.section-meta {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-text);
  font: 500 .68rem/1.2 var(--font-interface);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section-number {
  display: inline-block;
  margin-right: .12em;
  font: 600 .95rem/1 var(--font-interface);
  letter-spacing: .08em;
}

.paper-section {
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 94%),rgb(251 244 232 / 94%)),url("../assets/fundo/textura papel.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Hero */

.hero {
  position: relative;
  z-index: 0;
  min-height: clamp(38rem, 50vw, 46rem);
  padding-top: 5.2rem;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0 calc((100% - 100vw)/2);
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0,100% 0,100% 94%,84% 97%,64% 94%,48% 100%,28% 96%,0 99%);
}

.hero-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media-link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -8px;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 62%;
  translate: 0 var(--hero-drift);
}

.hero .section-meta {
  padding-top: .25rem;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(52%, 45rem);
  margin: clamp(1.6rem, 3.5vw, 3rem) 0 0 3.5%;
}

.hero-brand {
  display: block;
  width: clamp(15rem, 24vw, 22rem);
  height: auto;
  margin-bottom: 1.35rem;
}

.hero h1 {
  font-size: clamp(5.6rem, 8.8vw, 8.5rem);
  line-height: .86;
}

.hero h1 > span {
  display: block;
}

.hero h1 em {
  display: inline-block;
  margin-top: .04em;
  color: var(--color-primary);
  font: 500 .68em/.92 var(--font-handwritten);
  letter-spacing: -.035em;
  transform: rotate(-2deg);
}

.hero-lead {
  max-width: 31rem;
  margin-top: 1.2rem;
  font-size: clamp(1.15rem,1.55vw,1.38rem);
  line-height: 1.4;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}

.hero-actions .button {
  min-height: 2.9rem;
  padding: .7rem 1.35rem;
  font-size: .95rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 2.5rem;
  padding: .58rem 1.1rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  font-size: .86rem;
  transition: transform var(--transition-standard), background var(--transition-standard), color var(--transition-standard);
}

.button-dark {
  background: var(--color-primary);
  color: #fffdf3;
}

.button-dark:hover {
  transform: translateY(-2px);
  background: #174b35;
}

.button-outline {
  background: rgb(251 244 232 / 38%);
  color: var(--color-primary);
}

.button-outline:hover {
  transform: translateY(-2px);
  background: var(--color-primary);
  color: white;
}

.handwritten {
  color: var(--color-text);
  font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.08 var(--font-handwritten);
}

.pink-trail {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 2.4rem;
  width: 49%;
  overflow: visible;
  pointer-events: none;
}

.pink-trail path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
}

.hero-index {
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
  color: var(--color-primary);
  font-size: .58rem;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
}

/* Sobre */

.about {
  z-index: 2;
  min-height: 23rem;
  margin-top: -1.4rem;
  padding-block: 2.8rem 1.8rem;
  background: none;
  isolation: isolate;
}

.about::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 94%),rgb(251 244 232 / 94%)),url("../assets/fundo/textura papel.png");
  background-position: center;
  background-size: cover;
  clip-path: polygon(0 1.5%,17% 0,36% 1.5%,60% 0,81% 1.5%,100% 0,100% 98%,81% 100%,58% 98.5%,35% 100%,16% 98%,0 100%);
  content: '';
}

.about-composition {
  position: relative;
  min-height: 19rem;
  padding-top: .7rem;
}

.about-copy {
  position: relative;
  z-index: 3;
  width: min(46%, 40rem);
  margin-left: 4%;
}

.about-copy h2 {
  max-width: 40rem;
  margin-bottom: .85rem;
  font-size: clamp(3.2rem, 4.8vw, 4.4rem);
}

.about-copy h2 em, .profile-copy h2 em, .contact h2 em, .services-heading h2 em {
  position: relative;
  white-space: nowrap;
}

.about-copy h2 em::after, .profile-copy h2 em::after {
  position: absolute;
  inset: -.08em -.12em;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  content: '';
  transform: rotate(-8deg);
}

.about-copy h2 em::after {
  inset: -.14em -.2em;
}

.about-copy > p {
  max-width: 38rem;
  margin-top: .55rem;
  color: #353a32;
  font-size: 1rem;
  line-height: 1.42;
}

.about-sprout {
  position: absolute;
  z-index: 2;
  top: -1rem;
  left: 38%;
  width: 52%;
  height: 27rem;
  transform: rotate(1deg);
  translate: 0 var(--sprout-drift);
}

.about-sprout img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.about-quote {
  position: absolute;
  z-index: 4;
  right: 2%;
  bottom: 1.2rem;
  width: min(37%, 31rem);
  font-size: clamp(1.45rem,1.8vw,1.85rem);
  line-height: 1.18;
  transform: rotate(2deg);
}

.about-quote p + p {
  margin-top: .75rem;
}

.about-quote-lead {
  font-size: 1.14em;
  font-weight: 600;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding-bottom: .18rem;
  color: var(--color-primary);
  font-size: .9rem;
  font-weight: 700;
  transition: color var(--transition-standard), gap var(--transition-standard);
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-accent);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-standard);
}

.text-link span {
  transition: transform var(--transition-standard);
}

.text-link:hover, .text-link:focus-visible {
  gap: .7rem;
  color: var(--color-primary);
}

.text-link:hover::after, .text-link:focus-visible::after {
  transform: scaleX(1);
}

.text-link:hover span {
  transform: translate(2px,0);
}

/* Projetos */

.projects {
  z-index: 1;
  min-height: 42rem;
  margin-top: -.7rem;
  padding-block: 3rem 3.2rem;
  color: var(--color-paper);
  isolation: isolate;
}

.projects::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  background-image: linear-gradient(90deg,rgb(8 39 28 / 96%) 0%,rgb(8 39 28 / 83%) 29%,transparent 58%),url("../assets/banners/Mural.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%,cover;
  clip-path: polygon(0 1%,18% 0,40% 1.5%,62% 0,83% 1.3%,100% 0,100% 98%,80% 100%,57% 98.5%,36% 100%,16% 98.5%,0 100%);
  content: '';
}

.projects .section-meta, .projects h2 {
  color: var(--color-paper);
}

.contact .section-meta {
  color: var(--color-paper);
}

.project-heading {
  position: relative;
  z-index: 2;
  width: 33%;
  min-height: 25rem;
  padding: 2rem 0 1rem 2%;
}

.project-heading > div {
  width: 100%;
}

.project-heading h2 {
  max-width: 27rem;
  font-size: clamp(3rem,3.9vw,4.1rem);
  line-height: .96;
}

.projects-intro {
  max-width: 21rem;
  margin-top: .9rem;
  font-size: 1rem;
  line-height: 1.42;
}

.project-list {
  position: absolute;
  z-index: 3;
  top: 5.8rem;
  right: 6%;
  left: 36%;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.project {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--color-paper);
  color: var(--color-text);
  transition: transform 260ms ease;
}

.project-one {
  margin-top: 1.1rem;
  transform: rotate(-.45deg);
  box-shadow: -4px 12px 19px rgb(0 0 0 / 25%);
}

.project-two {
  margin-top: -.25rem;
  transform: rotate(.8deg);
  box-shadow: 2px 15px 22px rgb(0 0 0 / 29%);
}

.project-three {
  margin-top: .8rem;
  transform: rotate(0);
  box-shadow: 6px 9px 17px rgb(0 0 0 / 24%);
}

.project:hover {
  z-index: 4;
  transform: translateY(-.12rem) rotate(0);
}

.project-one .project-media {
  height: clamp(15rem,17vw,17rem);
}

.project-two .project-media {
  height: clamp(13.5rem,15vw,15.5rem);
}

.project-three .project-media {
  height: clamp(14rem,16vw,16rem);
}

.project-media {
  overflow: hidden;
  background: #d9ceb9;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.project:hover .project-media img {
  transform: translateY(-3px) scale(1.012);
}

.project-copy {
  padding: .9rem .85rem 1rem;
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 91%),rgb(251 244 232 / 91%)),url("../assets/fundo/textura papel.png");
  background-size: cover;
}

.project h3 {
  color: var(--color-primary);
  font: 400 clamp(1.55rem,2vw,2rem)/1.04 var(--font-editorial);
  letter-spacing: -.035em;
}

.project-copy > p {
  min-height: 3.5rem;
  margin-top: .6rem;
  font-size: .9rem;
  line-height: 1.4;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .22rem;
  margin: .45rem 0 .55rem;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: .13rem .4rem;
  border: 1px solid rgb(8 39 28 / 45%);
  border-radius: 999px;
  font-size: .6rem;
  line-height: 1.2;
}

.project .tag-list li {
  padding: .16rem .45rem;
  font-size: .65rem;
}

.projects .text-link {
  font-size: .9rem;
}

.projects-end {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92%, 46rem);
  margin: 3rem auto 0;
  color: var(--color-paper);
  line-height: 1.45;
  text-align: center;
}

.projects-end-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
}

/* Serviços */

.services {
  display: grid;
  grid-template-columns: minmax(25rem, 1fr) minmax(0, 2.35fr);
  column-gap: 2rem;
  align-items: center;
  min-height: 24rem;
  padding-block: 2.6rem 3rem;
  isolation: isolate;
}

.services::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 94%),rgb(251 244 232 / 94%)),url("../assets/fundo/textura papel.png");
  background-position: center;
  background-size: cover;
  clip-path: polygon(0 1%,20% 0,42% 1.5%,64% 0,84% 1.2%,100% 0,100% 98%,79% 100%,57% 98.5%,35% 100%,15% 98%,0 100%);
  content: '';
}

.services > .section-meta {
  grid-column: 1/-1;
}

.services-heading {
  grid-column: 1;
  grid-row: 2;
  padding: 1rem 0 0 3%;
}

.services-heading h2 {
  font-size: clamp(3.1rem,4.35vw,4.2rem);
}

.services-heading > p {
  max-width: 29rem;
  margin-top: .9rem;
  font-size: 1.05rem;
  line-height: 1.44;
}

.service-list {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-self: center;
  margin-top: .75rem;
}

.service-item {
  position: relative;
  min-width: 0;
  padding: .9rem 1.35rem .65rem;
  border-left: 1px solid var(--color-rule);
}

.service-item:first-child {
  border-left: 0;
}

.service-item:nth-child(2) {
  transform: translateY(.35rem);
}

.service-number {
  display: inline-block;
  margin-bottom: .55rem;
  color: #a80e61;
  font: 1.3rem var(--font-editorial);
}

.service-item h3 {
  min-height: 2.8rem;
  color: var(--color-primary);
  font: 400 clamp(1.4rem,1.7vw,1.75rem)/1.08 var(--font-editorial);
}

.service-item p {
  min-height: 5.2rem;
  margin-top: .6rem;
  color: #43473f;
  font-size: .95rem;
  line-height: 1.43;
}

.service-item .tag-list {
  margin-top: .45rem;
}

/* Carol */

.profile {
  z-index: 2;
  min-height: 30rem;
  margin-top: -1rem;
  padding-block: 3rem 3rem;
  background: none;
  isolation: isolate;
}

.profile::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 94%),rgb(251 244 232 / 94%)),url("../assets/fundo/textura papel.png");
  background-position: center;
  background-size: cover;
  clip-path: polygon(0 1%,19% 0,41% 1.5%,64% 0,83% 1.2%,100% 0,100% 98%,79% 100%,58% 98.5%,37% 100%,16% 98%,0 100%);
  content: '';
}

.profile-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 26rem;
  padding: 1rem 4% 0 4%;
}

.profile-copy {
  position: relative;
  z-index: 3;
  width: min(88%, 31rem);
}

.profile-copy h2 {
  font-size: clamp(3.8rem,5vw,5rem);
}

.profile-copy > p:not(.signature) {
  margin-top: .6rem;
  font-size: 1.04rem;
  line-height: 1.45;
}

.signature {
  margin-top: 1rem;
  color: var(--color-primary);
  font: 500 1.8rem var(--font-handwritten);
}

.signature strong, .signature span {
  display: block;
}

.signature span {
  margin-top: .15rem;
  font: .82rem/1.35 var(--font-interface);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.profile-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .68rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: .92rem;
  font-weight: 600;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}

.profile-links a:hover {
  background: var(--color-primary);
  color: var(--color-paper);
}

.profile-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.profile-links svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.profile-links a span {
  transition: transform var(--transition-standard);
}

.profile-links a:hover span {
  transform: translateX(2px);
}

.profile-media {
  position: absolute;
  z-index: 1;
  top: -1.8rem;
  right: 2%;
  width: 56%;
  height: 30rem;
  transform: rotate(1deg);
}

.profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  clip-path: polygon(3% 0,100% 2%,97% 100%,0 96%);
}

.profile-note {
  position: absolute;
  z-index: 4;
  top: .3rem;
  right: 5%;
  font-size: clamp(1.7rem,2.5vw,2.2rem);
  transform: rotate(-7deg);
}

/* Contato */

.contact {
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 35rem;
  margin-top: -1.2rem;
  padding-block: 3rem 1rem;
  padding-inline: max(var(--container-gutter),calc((100vw - 84rem)/2));
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-primary);
  background-image: url("../assets/banners/porta aberta footer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  clip-path: polygon(0 1%,18% 0,41% 1.5%,64% 0,83% 1.2%,100% 0,100% 100%,0 100%);
}

.contact::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgb(5 32 22 / 94%) 0%,rgb(5 32 22 / 84%) 26%,transparent 55%);
  content: '';
}

.contact-layout {
  position: relative;
  z-index: 2;
  min-height: 29rem;
  padding: 2.5rem 0 1rem 4%;
}

.contact-copy {
  position: relative;
  z-index: 3;
  width: min(40%,28rem);
}

.contact h2 {
  color: var(--color-paper);
  font-size: clamp(4rem,5.5vw,5.6rem);
}

.contact-copy > p:not(.handwritten) {
  max-width: 25rem;
  margin-top: .7rem;
  color: var(--color-paper);
  font-size: .95rem;
  line-height: 1.4;
}

.button-light {
  margin-top: .85rem;
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-primary);
}

.button-light:hover {
  transform: translateY(-2px);
  background: white;
}

.contact-cta {
  min-height: 3.2rem;
  padding: .8rem 1.55rem;
  font-size: 1rem;
}

.social-links {
  display: flex;
  gap: 1.1rem;
  margin-top: .85rem;
  color: var(--color-paper);
  font-size: .9rem;
}

/* Footer */

.site-footer {
  position: absolute;
  z-index: 4;
  right: max(var(--container-gutter),calc((100vw - 84rem)/2));
  bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  width: 13rem;
  color: var(--color-paper);
  text-align: right;
}

.site-footer img {
  width: 10.5rem;
  max-height: 5.5rem;
  object-fit: contain;
  object-position: right;
}

.site-footer p {
  font: italic 1.2rem var(--font-editorial);
}

.site-footer small {
  font-size: .72rem;
  letter-spacing: .08em;
}

/* Animações de entrada */

[data-reveal] {
  opacity: 1;
  translate: none;
}

.js-ready [data-reveal] {
  opacity: 0;
  transition: opacity 480ms ease,translate 480ms cubic-bezier(.2,.7,.2,1);
}

.js-ready [data-reveal="rise"] {
  translate: 0 12px;
}

.js-ready [data-reveal="slide"] {
  translate: -12px 0;
}

.js-ready [data-reveal="tilt"] {
  translate: 0 6px;
}

.js-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Ajustes por largura */

/* Até 1100px */

@media (max-width: 1100px) {
  :root {
    --container-gutter: clamp(1.1rem,4vw,2.5rem);
  }

  .site-nav {
    gap: .9rem;
    font-size: .73rem;
  }

  .wordmark {
    width: 8.6rem;
  }

  .hero {
    min-height: 38rem;
  }

  .hero-copy {
    width: 52%;
    margin-top: 2.5rem;
  }

  .hero-brand {
    width: clamp(14rem, 21vw, 18rem);
  }

  .hero-lead {
    max-width: 25rem;
    font-size: 1.1rem;
  }

  .about {
    min-height: 21rem;
  }

  .about-copy {
    width: 46%;
  }

  .about-copy h2 {
    font-size: clamp(2.8rem,4.4vw,3.7rem);
  }

  .about-sprout {
    left: 45%;
    width: 48%;
    height: 23rem;
  }

  .projects {
    min-height: 0;
    padding-block: 3rem 4rem;
  }

  .project-heading {
    width: 100%;
    min-height: 0;
    padding: 1.2rem 2% .8rem 3%;
  }

  .project-heading h2 {
    max-width: 34rem;
    font-size: clamp(3.2rem,5vw,4.2rem);
  }

  .projects-intro {
    max-width: 32rem;
    font-size: 1rem;
  }

  .project-list {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
    gap: 1.35rem;
    margin: 1.1rem 3% 0;
  }

  .project {
    width: auto;
  }

  .project-one, .project-two, .project-three {
    margin: 0;
  }

  .project-one .project-media {
    height: clamp(15rem,24vw,17rem);
  }

  .project-two .project-media {
    height: clamp(13.5rem,21vw,15.5rem);
  }

  .project-three .project-media {
    height: clamp(14rem,22vw,16rem);
  }

  .project-two {
    transform: translateY(.65rem) rotate(.6deg);
  }

  .project-three {
    transform: translate(16%,.35rem) rotate(-.6deg);
  }

  .projects-end {
    position: static;
    width: auto;
    margin: 3rem 4% 0;
    font-size: .9rem;
  }

  .services {
    grid-template-columns: minmax(20rem,.9fr) minmax(0,2.2fr);
    column-gap: 1rem;
  }

  .services-heading h2 {
    font-size: clamp(2.8rem,4.5vw,3.6rem);
  }

  .services-heading > p {
    font-size: 1rem;
  }

  .service-item {
    padding-inline: .8rem;
  }

  .service-item h3 {
    font-size: clamp(1.3rem,1.8vw,1.6rem);
  }

  .service-item p {
    font-size: .9rem;
  }

  .profile-media {
    right: 2%;
    width: 56%;
    height: 27rem;
  }

}

/* Header compacto em tablets e celulares */

@media (max-width: 1100px) {
  .site-header {
    min-height: 4.2rem;
    grid-template-columns: 1fr auto;
    padding-inline: 1rem;
  }

  .site-header.is-scrolled {
    min-height: 3.8rem;
  }

  .wordmark {
    width: 8.6rem;
  }

  .menu-toggle {
    display: grid;
    grid-column: 2;
    gap: 5px;
    width: 2.65rem;
    height: 2.65rem;
    place-content: center;
    border: 1px solid var(--color-rule);
    border-radius: 50%;
    background: var(--color-paper);
  }

  .menu-toggle span {
    width: 1rem;
    height: 1px;
    background: var(--color-primary);
    transition: transform var(--transition-standard);
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: .6rem;
    left: .6rem;
    display: none;
    grid-column: 1/-1;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1rem 1rem;
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
  }

  .site-nav a {
    padding: .65rem .15rem;
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav .nav-cta {
    position: static;
    justify-content: center;
    margin-top: .4rem;
  }

  .site-nav a:not(.nav-cta) {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(90deg,rgb(251 244 232 / 96%) 0%,rgb(251 244 232 / 82%) 52%,transparent 90%);
    content: '';
    pointer-events: none;
  }

  .about-composition {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 2rem;
  }

  .about-copy {
    width: calc(100% - .75rem);
    margin-left: .25rem;
  }

  .about-copy h2 {
    max-width: 37rem;
    font-size: clamp(2.8rem,7vw,3.7rem);
  }

  .about-copy > p {
    max-width: 36rem;
    font-size: 1rem;
  }

  .about-sprout {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    width: min(92%,28rem);
    height: auto;
    aspect-ratio: 1 / .82;
    margin: .25rem 0 .5rem;
  }

  .about-quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: 12rem;
    margin: -1rem 3% 0 auto;
    font-size: 1.25rem;
  }

  .services {
    grid-template-columns: minmax(0,1fr);
    row-gap: .8rem;
    padding-block: 2.4rem 3rem;
  }

  .services-heading {
    grid-column: 1;
    grid-row: auto;
    padding: 1rem 3% .25rem;
  }

  .services-heading h2 {
    font-size: clamp(3rem,7vw,4rem);
  }

  .services-heading > p {
    max-width: 36rem;
  }

  .service-list {
    grid-column: 1;
    grid-row: auto;
    margin-top: .15rem;
  }

  .service-item {
    padding-inline: 1rem;
  }

  .service-item h3 {
    min-height: 3rem;
    font-size: clamp(1.25rem,2.6vw,1.6rem);
  }

  .service-item p {
    min-height: 6rem;
    font-size: .88rem;
  }

}

/* Celular */

@media (max-width: 680px) {
  html {
    scroll-padding-top: 4.5rem;
  }

  .section {
    padding-inline: 1.1rem;
  }

  .hero {
    min-height: 44rem;
    padding-top: 5rem;
  }

  .hero::before {
    background: linear-gradient(90deg,rgb(251 244 232 / 97%) 0%,rgb(251 244 232 / 88%) 52%,transparent 92%);
  }

  .hero-media {
    inset: 0;
    height: 100%;
    clip-path: polygon(0 0,100% 0,100% 91%,78% 95%,52% 92%,28% 100%,0 97%);
  }

  .hero-media img {
    object-position: 59% 58%;
  }

  .hero .section-meta {
    padding-inline: .2rem;
  }

  .hero-copy {
    width: 94%;
    margin: 2.6rem 0 0 1%;
  }

  .hero-brand {
    width: min(17rem, 72vw);
    margin-bottom: 1rem;
  }

  .hero-copy-break {
    display: none;
  }

  .hero-lead {
    max-width: 19rem;
    margin-top: 1rem;
    padding-right: .3rem;
    font-size: 1rem;
  }

  .hero-actions {
    gap: .55rem;
  }

  .hero-actions .button {
    min-height: 2.75rem;
    padding-inline: 1.1rem;
    font-size: .9rem;
  }

  .pink-trail {
    right: 0;
    bottom: 1rem;
    width: 83%;
  }

  .hero-index {
    right: .7rem;
    bottom: 1rem;
  }

  .about {
    min-height: 0;
    margin-top: -.7rem;
    padding-block: 2.7rem 2rem;
  }

  .about::before {
    clip-path: polygon(0 1%,22% 0,48% 1.5%,76% 0,100% 1%,100% 99%,76% 100%,50% 98.5%,24% 100%,0 98%);
  }

  .about-copy h2 {
    max-width: 22rem;
    font-size: clamp(2.35rem,9vw,3rem);
  }

  .about-copy > p {
    max-width: 20rem;
    font-size: .94rem;
  }

  .about-sprout {
    margin: -.25rem 0 .5rem;
  }

  .about-quote {
    width: 9rem;
    max-width: 50%;
    margin: -1rem 0 0 auto;
    font-size: 1rem;
    text-align: left;
    transform: translateX(-6rem) rotate(3deg);
  }

  .projects {
    min-height: 0;
    margin-top: -.5rem;
    padding-block: 2.7rem 3.5rem;
    background-position: center;
  }

  .project-heading {
    width: 100%;
    min-height: 0;
    padding: 1.2rem 2% .8rem 6%;
  }

  .project-heading h2 {
    max-width: 21rem;
    font-size: clamp(3rem,11vw,3.8rem);
  }

  .projects-intro {
    max-width: 22rem;
    margin-top: .7rem;
    font-size: .95rem;
  }

  .project-list {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: .7rem 2% .5rem 7%;
  }

  .project {
    flex: none;
    width: min(94%,26rem);
  }

  .project-one {
    align-self: flex-start;
    margin: .4rem 0 0;
    transform: rotate(-.8deg);
  }

  .project-two {
    align-self: flex-end;
    margin: 0;
    transform: translateY(.25rem) rotate(.6deg);
  }

  .project-three {
    align-self: center;
    margin: 0;
    transform: translateX(2%) rotate(-.5deg);
  }

  .project-media, .project-one .project-media, .project-two .project-media, .project-three .project-media {
    height: auto;
    aspect-ratio: 1.25 / 1;
  }

  .project-copy {
    padding: .9rem 1rem 1rem;
  }

  .project h3 {
    font-size: 1.55rem;
  }

  .project-copy > p {
    min-height: 0;
    font-size: .9rem;
  }

  .projects-end {
    position: static;
    width: auto;
    margin: 2.4rem 5% 0 10%;
    font-size: .88rem;
  }

  .services {
    display: block;
    min-height: 0;
    padding-block: 2.7rem 3rem;
  }

  .services-heading {
    padding: 1.2rem 2% .8rem 6%;
  }

  .services-heading h2 {
    font-size: clamp(2.7rem,10.5vw,3.7rem);
  }

  .services-heading > p {
    max-width: 22rem;
    margin-top: .55rem;
    font-size: .86rem;
  }

  .service-list {
    display: block;
    margin: .4rem 2% 0 7%;
  }

  .service-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: .15rem .65rem;
    padding: .85rem 0;
    border: 0;
    border-top: 1px solid var(--color-rule);
    transform: none;
  }

  .service-number {
    grid-row: span 3;
    margin: .15rem 0 0;
  }

  .service-item h3 {
    min-height: 0;
    font-size: 1.2rem;
  }

  .service-item p {
    min-height: 0;
    margin-top: .3rem;
    font-size: .82rem;
  }

  .service-item .tag-list {
    grid-column: 2;
    margin: .35rem 0 0;
  }

  .profile {
    min-height: 0;
    margin-top: -.6rem;
    padding-block: 2.7rem 3rem;
  }

  .profile::before {
    clip-path: polygon(0 1%,22% 0,48% 1.5%,76% 0,100% 1%,100% 99%,76% 100%,50% 98.5%,24% 100%,0 98%);
  }

  .profile-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 1.2rem;
    padding: 1rem 3% 0 6%;
  }

  .profile-copy {
    width: 100%;
  }

  .profile-copy h2 {
    font-size: 3.5rem;
  }

  .profile-copy > p:not(.signature) {
    max-width: 27rem;
    font-size: .98rem;
  }

  .profile-media {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: 96%;
    height: 24rem;
    margin: 0 0 0 2%;
  }

  .profile-note {
    top: 20rem;
    right: -1%;
    font-size: 1.55rem;
  }

  .contact {
    margin-top: -.7rem;
    min-height: 40rem;
    padding: 2.7rem 1.1rem 0;
    background-position: 58% center;
    background-size: auto 100%;
  }

  .contact::before {
    background: linear-gradient(90deg,rgb(5 32 22 / 96%) 0%,rgb(5 32 22 / 84%) 54%,transparent 100%);
  }

  .contact-layout {
    min-height: 32rem;
    padding: 1.8rem 0 1rem 4%;
  }

  .contact-copy {
    width: min(75%,20rem);
  }

  .contact h2 {
    font-size: 3.5rem;
  }

  .contact-cta {
    min-height: 3rem;
    padding-inline: 1.25rem;
    font-size: .95rem;
  }

  .contact-copy > p:not(.handwritten) {
    font-size: .84rem;
  }

  .social-links {
    gap: 1rem;
    margin-top: .8rem;
    font-size: .88rem;
  }

  .site-footer {
    position: absolute;
    right: 1rem;
    bottom: .7rem;
    width: 9.5rem;
  }

  .site-footer img {
    width: 7rem;
    max-height: 3.5rem;
  }

  .site-footer p {
    font-size: 1rem;
  }

  .site-footer small {
    font-size: .75rem;
  }

}

/* Serviços */

.services {
  grid-template-columns: minmax(26rem, 1fr) minmax(0, 2.8fr);
  column-gap: clamp(2.5rem, 5vw, 6rem);
  min-height: 37rem;
  padding-block: 4.2rem 4.8rem;
}

.services::before {
  width: 100vw;
  background-size: 100% 100%, cover;
}

.services-heading {
  padding: 2rem 0 0 4%;
}

.services-heading h2 {
  max-width: 35rem;
  font-size: clamp(4.2rem, 6vw, 6.4rem);
  line-height: .9;
}

.services-heading > p {
  max-width: 34rem;
  margin-top: 1.35rem;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  line-height: 1.48;
}

.service-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: start;
  margin-top: 3rem;
}

.service-item {
  min-height: 19rem;
  padding: 1.1rem clamp(1rem, 1.7vw, 1.8rem) 1rem;
}

.service-item h3 {
  min-height: 4rem;
  font-size: clamp(1.65rem, 2vw, 2rem);
  line-height: 1.02;
}

.service-item p {
  min-height: 7rem;
  margin-top: 1rem;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.48;
}

.service-item .tag-list {
  margin-top: .8rem;
}

.service-item .tag-list li {
  font-size: .7rem;
}

@media (max-width: 820px) {
  .services {
    display: block;
    min-height: 0;
    padding-block: 3.3rem 4rem;
  }

  .services-heading {
    padding: 1.5rem 5% 1rem;
  }

  .services-heading h2 {
    max-width: 31rem;
    font-size: clamp(3.6rem, 12vw, 5.2rem);
  }

  .services-heading > p {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: 1.05rem;
  }

  .service-list {
    display: block;
    margin: 1.2rem 5% 0 7%;
  }

  .service-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    min-height: 0;
    gap: .2rem .8rem;
    padding: 1.1rem 0;
    border: 0;
    border-top: 1px solid var(--color-rule);
  }

  .service-item:first-child {
    border-top: 0;
  }

  .service-item h3 {
    min-height: 0;
    font-size: 1.65rem;
  }

  .service-item p {
    min-height: 0;
    margin-top: .45rem;
    font-size: 1rem;
  }

  .service-item .tag-list {
    grid-column: 2;
    margin-top: .55rem;
  }

}

/* Carol */

.profile {
  min-height: 43rem;
  padding-block: 4.2rem 4.5rem;
}

.profile::before {
  width: 100vw;
  background-size: 100% 100%, cover;
}

.profile-layout {
  display: block;
  min-height: 35rem;
  padding: 2rem 4% 0;
}

.profile-copy {
  width: min(43%, 38rem);
  margin-left: 2%;
}

.profile-copy h2 {
  max-width: 35rem;
  font-size: clamp(5rem, 7vw, 7rem);
  line-height: .9;
}

.profile-copy > p:not(.signature) {
  max-width: 36rem;
  margin-top: 1rem;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  line-height: 1.48;
}

.signature {
  width: min(100%, 22rem);
  height: 5.4rem;
  margin-top: 1.3rem;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background: url("../assets/assinaturas/minha assinatura.png") left center / contain no-repeat;
}

.signature strong, .signature span {
  display: none;
}

.profile-links {
  margin-top: 1rem;
}

.profile-media {
  top: -1rem;
  right: 5%;
  width: min(51%, 44rem);
  height: 35rem;
  transform: rotate(1deg);
}

.profile-media img {
  object-fit: contain;
  object-position: center;
  clip-path: polygon(3% 0,100% 2%,97% 100%,0 96%);
}

.profile-note {
  top: 5rem;
  right: 4%;
  width: 16rem;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

@media (max-width: 820px) {
  .profile {
    min-height: 0;
    padding-block: 3.2rem 4rem;
  }

  .profile-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 1.4rem;
    padding: 1.4rem 5% 0 6%;
  }

  .profile-copy {
    width: 100%;
    margin-left: 0;
  }

  .profile-copy h2 {
    max-width: 28rem;
    font-size: clamp(3.8rem, 13vw, 5.4rem);
  }

  .profile-copy > p:not(.signature) {
    max-width: 34rem;
    font-size: 1rem;
  }

  .profile-media {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: 100%;
    height: auto;
    margin: 0;
    transform: rotate(1deg);
  }

  .profile-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }

  .profile-note {
    position: static;
    width: 14rem;
    margin: 0 3% 0 auto;
    font-size: 1.9rem;
  }

  .signature {
    width: min(100%, 18rem);
    height: 4.8rem;
  }

}

/* Contato */

.contact {
  min-height: 47rem;
  margin-top: -1.2rem;
  padding-block: 4.2rem 1.5rem;
  background-position: 64% center;
  background-size: cover;
  clip-path: polygon(0 1%,18% 0,41% 1.5%,64% 0,83% 1.2%,100% 0,100% 100%,0 100%);
}

.contact-layout {
  min-height: 39rem;
  padding: 3.2rem 0 1rem 4%;
}

.contact-copy {
  width: min(42%, 35rem);
}

.contact h2 {
  font-size: clamp(5rem, 7vw, 7rem);
  line-height: .9;
}

.contact-copy > p:not(.handwritten) {
  max-width: 31rem;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.48;
}

.contact-cta {
  min-height: 4rem;
  margin-top: 1.3rem;
  padding: 1rem 2rem;
  gap: .85rem;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
}

.contact-cta span {
  display: inline-block;
  line-height: 1;
}

.site-footer {
  bottom: 2rem;
}

@media (max-width: 820px) {
  .contact {
    min-height: 45rem;
    padding-block: 3.2rem 1rem;
    background-position: 62% center;
  }

  .contact-layout {
    min-height: 36rem;
    padding: 2rem 0 1rem 4%;
  }

  .contact-copy {
    width: min(82%, 25rem);
  }

  .contact h2 {
    font-size: clamp(4rem, 14vw, 5.4rem);
  }

  .contact-copy > p:not(.handwritten) {
    max-width: 22rem;
    font-size: 1rem;
  }

  .contact-cta {
    min-height: 3.5rem;
    padding: .9rem 1.5rem;
    font-size: 1.05rem;
  }

  .site-footer {
    bottom: .7rem;
  }

}

/* Footer */

.contact {
  background-color: #06281d;
}

.site-footer {
  width: 17rem;
  bottom: 2rem;
  gap: .65rem;
}

.site-footer img {
  width: 14rem;
  max-height: 8rem;
  filter: brightness(0) invert(1);
}

.site-footer p {
  margin: 0;
  color: var(--color-paper);
  font-size: 1rem;
}

.site-footer small {
  color: rgb(251 244 232 / 78%);
}

.social-links {
  position: absolute;
  z-index: 5;
  right: max(var(--container-gutter),calc((100vw - 84rem)/2));
  bottom: 15.5rem;
  display: flex;
  gap: .55rem;
  margin: 0;
}

.social-links a {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(251 244 232 / 42%);
  border-radius: 50%;
  color: var(--color-paper);
  transition: transform var(--transition-standard), background var(--transition-standard), color var(--transition-standard);
}

.social-links a:hover {
  transform: translateY(-3px);
  background: var(--color-paper);
  color: var(--color-primary);
}

.social-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .social-links {
    right: 1rem;
    bottom: 10.5rem;
    gap: .4rem;
  }

  .social-links a {
    width: 2.7rem;
    height: 2.7rem;
  }

  .site-footer {
    right: 1rem;
    bottom: .7rem;
    width: 11rem;
  }

  .site-footer img {
    width: 9rem;
    max-height: 5rem;
  }

}

/* Escala de texto */

.section-meta {
  font-size: clamp(.75rem, .8vw, .82rem);
}

.section-number {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
}

.site-nav {
  font-size: clamp(.92rem, 1vw, 1.05rem);
}

body {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
}

.button {
  min-height: 2.8rem;
  padding-inline: 1.25rem;
  font-size: clamp(.92rem, 1vw, 1.02rem);
}

.text-link {
  font-size: clamp(.95rem, 1vw, 1.05rem);
}

.tag-list li, .project .tag-list li {
  font-size: clamp(.75rem, .78vw, .8rem);
}

.hero-index {
  font-size: clamp(.75rem, .75vw, .78rem);
}

.site-footer small {
  font-size: clamp(.75rem, .75vw, .78rem);
}

@media (max-width: 820px) {
  .site-nav {
    font-size: .92rem;
  }

  .site-nav a {
    padding-block: .78rem;
  }

  .section-meta {
    font-size: .75rem;
  }

  .hero-lead, .about-copy > p, .projects-intro, .services-heading > p, .profile-copy > p:not(.signature), .contact-copy > p:not(.handwritten) {
    font-size: 1rem;
  }

  .hero-actions .button, .button {
    font-size: .95rem;
  }

  .tag-list li, .project .tag-list li {
    font-size: .75rem;
  }

  .site-footer small {
    font-size: .75rem;
  }

}

@media (max-width: 430px) {
  .section-meta {
    font-size: .75rem;
  }

  .section-number {
    font-size: .95rem;
  }

  .site-nav {
    font-size: .9rem;
  }

  .handwritten, .service-note, .profile-note {
    letter-spacing: .01em;
  }

}

/* Desktop */

@media (min-width: 821px) {
  .hero {
    min-height: clamp(44rem, 56vw, 52rem);
  }

  .hero-copy {
    width: min(56%, 49rem);
    margin-left: 2%;
  }

  .hero-brand {
    width: clamp(18rem, 27vw, 26rem);
    margin-top: .45rem;
  }

  .hero-media img {
    object-position: 64% 52%;
  }

  .about {
    min-height: 27rem;
  }

  .about-composition {
    min-height: 23rem;
  }

  .about-copy {
    width: min(48%, 44rem);
  }

  .about-sprout {
    left: 40%;
    width: 57%;
    height: 30rem;
  }

  .services {
    min-height: 39rem;
  }

  .services-heading {
    padding-left: 2%;
  }

  .service-list {
    margin-right: 1%;
  }

  .profile {
    min-height: 46rem;
  }

  .profile-media {
    width: min(55%, 48rem);
    height: 38rem;
    right: 2%;
  }

  .contact {
    min-height: 50rem;
  }

}

/* Serviços no desktop */

@media (min-width: 821px) {
  .services {
    align-items: start;
  }

  .services-heading {
    align-self: start;
    padding-top: 2.8rem;
  }

  .services-heading > p {
    max-width: 32rem;
  }

  .service-list {
    align-self: start;
    margin-top: 2.8rem;
  }

  .service-item {
    min-height: 18.5rem;
    padding-top: 1rem;
    padding-bottom: 1.15rem;
  }

  .service-item + .service-item {
    border-left-color: rgb(16 27 21 / 20%);
  }

}

@media (max-width: 820px) {
  .hero-copy {
    width: 96%;
  }

  .about-copy {
    width: calc(100% - .25rem);
  }

  .about-sprout {
    width: min(100%, 30rem);
  }

  .project-list {
    margin-inline: 3%;
  }

  .profile-media {
    width: 100%;
  }

  .contact-copy {
    width: min(86%, 27rem);
  }

}

/* Celular */

@media (max-width: 430px) {
  html {
    overflow-x: hidden;
  }

  .site-header {
    min-height: 4.2rem;
  }

  .wordmark {
    width: min(8.5rem, 44vw);
  }

  .menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hero {
    min-height: 35rem;
    padding-top: 4.6rem;
    padding-bottom: 1.75rem;
  }

  .hero::before {
    z-index: 1;
    background: linear-gradient(90deg, rgb(251 244 232 / 98%) 0%, rgb(251 244 232 / 91%) 40%, rgb(251 244 232 / 46%) 72%, rgb(251 244 232 / 12%) 100%);
  }

  .hero-copy {
    z-index: 2;
    width: 100%;
    margin: .6rem 0 0;
  }

  .hero-brand {
    width: clamp(11.5rem, 48vw, 13.25rem);
    margin-bottom: .55rem;
  }

  .hero-lead {
    max-width: 20rem;
    margin-top: .35rem;
    font-size: 1rem;
    line-height: 1.35;
  }

  .hero-media {
    z-index: 0;
    inset: 0;
    height: auto;
  }

  .hero-media img {
    object-position: 64% 50%;
  }

  .hero-actions {
    margin-top: .8rem;
  }

  .hero-actions {
    gap: .65rem;
  }

  .hero-actions .button {
    min-height: 3rem;
    padding-inline: 1.15rem;
  }

  .about-copy > p {
    max-width: 25rem;
  }

  .about-sprout {
    width: 100%;
    margin-top: .4rem;
  }

  .project-list {
    width: auto;
    margin-inline: 2%;
    gap: 2rem;
  }

  .project {
    width: 100%;
  }

  .project-media, .project-one .project-media, .project-two .project-media, .project-three .project-media {
    aspect-ratio: 1.18 / 1;
  }

  .project-copy {
    padding: 1.05rem 1.15rem 1.3rem;
  }

  .project h3 {
    font-size: 1.9rem;
  }

  .project-copy > p {
    font-size: .98rem;
    line-height: 1.45;
  }

  .services-heading > p {
    max-width: 26rem;
  }

  .service-list {
    margin-inline: 4% 2%;
  }

  .service-item {
    grid-template-columns: 2.25rem 1fr;
  }

  .service-item h3 {
    font-size: 1.65rem;
  }

  .service-item p {
    font-size: .95rem;
  }

  .profile-media {
    width: 100%;
  }

  .profile-media img {
    aspect-ratio: 1 / 1;
    object-position: center 42%;
  }

  .profile-copy > p:not(.signature) {
    max-width: 25rem;
  }

  .contact {
    min-height: 45rem;
    background-size: auto 100%;
    background-position: 63% center;
  }

  .contact-copy {
    width: min(88%, 25rem);
  }

  .social-links {
    right: .8rem;
    bottom: 10.25rem;
  }

  .social-links a {
    width: 2.65rem;
    height: 2.65rem;
  }

  .site-footer {
    right: .8rem;
    width: 10.5rem;
  }

  .site-footer img {
    width: 8.5rem;
  }

}

/* Tablet */

@media (min-width: 821px) and (max-width: 1100px) {
  .site-header {
    min-height: 5.2rem;
    grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  }

  .wordmark {
    width: 10.5rem;
  }

  .site-nav {
    gap: 1.15rem;
    font-size: .82rem;
  }

  .nav-cta {
    min-height: 3rem;
    padding: .75rem 1.35rem;
    font-size: .9rem;
  }

  .hero {
    min-height: 42rem;
  }

  .hero-copy {
    width: 56%;
    margin-left: 2%;
  }

  .hero-brand {
    width: clamp(14rem, 22vw, 18rem);
  }

  .hero-media img {
    object-position: 58% 58%;
  }

  .about-copy {
    width: 48%;
  }

  .about-sprout {
    left: 43%;
    width: 53%;
    height: 26rem;
  }

  .project-list {
    margin-inline: 3%;
  }

  .services {
    column-gap: 2rem;
  }

  .profile-media {
    width: 53%;
    height: 31rem;
  }

  .contact-copy {
    width: 45%;
  }

}

/* Anotações no celular */

@media (max-width: 820px) {
  .hero-media img {
    object-position: 60% 55%;
  }

  .project-list {
    position: relative;
    inset: auto;
  }

  .project, .project-one, .project-two, .project-three {
    position: relative;
  }

  .about-quote, .service-note, .profile-note {
    position: static;
  }

  .about-quote {
    margin-top: 1rem;
  }

  .profile-note {
    margin-top: 1.25rem;
  }

  .social-links {
    flex-wrap: wrap;
  }

  .site-footer {
    max-width: calc(100vw - 2rem);
  }

}

/* Sobre */

@media (min-width: 821px) {
  .about {
    min-height: 31rem;
    padding-block: 3.2rem 2.4rem;
  }

  .about-composition {
    min-height: 27rem;
    padding-top: 1rem;
  }

  .about-copy {
    width: min(44%, 43rem);
    margin-left: 2%;
  }

  .about-copy > p {
    max-width: 34rem;
  }

  .about-sprout {
    top: -2.2rem;
    left: 33%;
    width: 66%;
    height: 33rem;
    transform: rotate(1.8deg);
  }

  .about-quote {
    right: 2%;
    bottom: 1.2rem;
    width: 14rem;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    transform: rotate(4deg);
  }

}

@media (max-width: 820px) {
  .about-composition {
    padding-top: 1.5rem;
  }

  .about-copy {
    position: relative;
    z-index: 3;
  }

  .about-sprout {
    z-index: 2;
    width: min(100%, 31rem);
    margin-top: .8rem;
  }

  .about-quote {
    position: static;
    margin: 1rem 3% 0 auto;
  }

}

@media (max-width: 430px) {
  .about {
    padding-block: 2.4rem 1.5rem;
  }

  .about-composition {
    padding-top: .85rem;
  }

  .about-sprout {
    width: 100%;
    max-width: 27rem;
    aspect-ratio: 1.4 / 1;
    margin: .2rem 0 .35rem;
  }

  .about-quote {
    width: min(10.5rem, 48%);
    margin: .45rem 3% 0 auto;
    transform: rotate(3deg);
  }

}

@media (max-width: 380px) {
  .wordmark {
    width: 7.7rem;
  }

  .hero-brand {
    width: clamp(11.5rem, 48vw, 13.25rem);
  }

  .hero-lead {
    max-width: 18rem;
    font-size: .96rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .button {
    width: fit-content;
  }

  .project-heading h2 {
    font-size: 3.35rem;
  }

  .project h3 {
    font-size: 1.75rem;
  }

  .profile-copy h2 {
    font-size: 3.7rem;
  }

  .contact h2 {
    font-size: 3.9rem;
  }

  .social-links {
    right: .65rem;
    gap: .3rem;
  }

  .social-links a {
    width: 2.45rem;
    height: 2.45rem;
  }

}

/* Serviços */

@media (min-width: 821px) {
  .services-heading h2 {
    max-width: 40rem;
    font-size: clamp(3.7rem, 5.1vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.025em;
  }

}

@media (max-width: 820px) {
  .services-heading h2 {
    max-width: 32rem;
    font-size: clamp(2.9rem, 9vw, 3.8rem);
    line-height: .98;
    letter-spacing: -.02em;
  }

}

/* Carol */

@media (min-width: 821px) {
  .profile {
    min-height: 40rem;
    padding-block: 3.7rem 3.5rem;
  }

  .profile-layout {
    min-height: 33rem;
  }

}

@media (max-width: 820px) {
  .profile {
    padding-block: 2.8rem 3.2rem;
  }

  .profile-layout {
    gap: 1.1rem;
  }

}

/* Carol: pequenos ajustes de espaço e posição da anotação */
@media (min-width: 821px) {
  .profile {
    min-height: 0;
    padding-block: 3rem 2.6rem;
  }

  .profile-layout {
    min-height: 31rem;
    padding-inline: 5%;
  }

  .profile-copy {
    width: min(44%, 38rem);
  }

  .profile-note {
    top: auto;
    right: 4%;
    bottom: 1.1rem;
    width: 14rem;
    text-align: center;
  }
}

@media (max-width: 820px) {
  .profile-layout {
    gap: .9rem;
  }

  .profile-copy {
    order: 1;
  }

  .profile-note {
    order: 0;
    align-self: flex-end;
    margin: .2rem 3% 0 auto;
  }
}

/* Contato e redes */

.contact .contact-cta {
  min-height: 4.1rem;
  padding: 1rem 2.1rem;
  font-size: 1.12rem;
}

.contact .contact-socials {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  width: fit-content;
  margin: .9rem 0 0;
}

.contact .contact-socials a {
  width: 3rem;
  height: 3rem;
}

@media (max-width: 820px) {
  .contact .contact-cta {
    min-height: 3.75rem;
    padding: .9rem 1.55rem;
    font-size: 1.05rem;
  }

  .contact .contact-socials {
    gap: .6rem;
    margin-top: .8rem;
  }

  .contact .contact-socials a {
    width: 2.85rem;
    height: 2.85rem;
  }

}

/* Projetos e Carol */

@media (min-width: 821px) {
  .profile-copy {
    width: min(42%, 38rem);
  }

  .profile-media {
    top: auto;
    right: 1.5%;
    bottom: 0;
    width: min(55%, 46rem);
    height: 38rem;
  }

}

@media (min-width: 821px) and (max-width: 1100px) {
  .profile-media {
    height: 32rem;
  }

}

/* Menos movimento para quem prefere */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js-ready [data-reveal] {
    opacity: 1;
    translate: none;
  }

}

/* Últimos ajustes de composição */

.projects::before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, cover;
}

@media (min-width: 821px) {
  .about {
    min-height: 0;
  }

  .about-composition {
    min-height: 31rem;
  }

  .about-quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(58%, 40rem);
    margin: .8rem 1% 0 auto;
    color: var(--color-text);
    font-size: clamp(1.2rem, 1.45vw, 1.35rem);
    line-height: 1.25;
    transform: none;
  }

  .about-quote p + p {
    margin-top: .85rem;
  }

  .projects {
    min-height: 0;
    padding-block: 2.5rem 2.7rem;
  }

  .project-heading {
    width: 100%;
    min-height: 0;
    padding: 1rem 2% .5rem;
  }

  .project-heading h2 {
    max-width: 40rem;
  }

  .projects-intro {
    max-width: 38rem;
  }

  .project-list {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: stretch;
    gap: clamp(1rem, 1.8vw, 1.8rem);
    margin: .8rem 2% 0;
  }

  .project {
    display: flex;
    flex-direction: column;
  }

  .project-one {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .9fr);
    align-items: stretch;
    width: auto;
    margin: 0;
    justify-self: stretch;
    transform: rotate(-.25deg);
  }

  .project-two {
    margin: .25rem 0 0 3%;
    transform: rotate(.55deg);
  }

  .project-three {
    margin: .8rem 3% 0 0;
    transform: rotate(-.35deg);
  }

  .project-one .project-media {
    min-height: 15rem;
    height: auto;
  }

  .project-two .project-media, .project-three .project-media {
    height: auto;
  }

  .project-two .project-media {
    aspect-ratio: 2.2 / 1;
  }

  .project-three .project-media {
    aspect-ratio: 1.95 / 1;
  }

  .project-media img {
    object-fit: contain;
  }

  .project-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.1rem, 2vw, 2rem);
  }

  .project-copy > p {
    min-height: 0;
  }

  .projects-end {
    width: min(92%, 46rem);
    margin-top: 2.2rem;
  }

  .projects-end-title {
    color: var(--color-paper);
    font-size: clamp(2.2rem, 3.4vw, 3rem);
  }

  .projects .project .tag-list {
    gap: .35rem;
  }

  .projects .project .tag-list li {
    padding: .22rem .6rem;
    font-size: clamp(.74rem, .82vw, .82rem);
    line-height: 1.2;
  }

  .profile-media {
    right: 5%;
    width: min(42%, 32rem);
    height: 32rem;
  }

}

@media (min-width: 821px) and (max-width: 980px) {
  .project-one {
    grid-template-columns: 1fr;
  }

  .project-one .project-media {
    min-height: 0;
    aspect-ratio: 3.2 / 1;
  }

}

@media (max-width: 820px) {
  .menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .hero {
    min-height: 34rem;
    padding-top: 4.55rem;
    padding-bottom: 1.2rem;
  }

  .hero::before {
    z-index: 1;
    background: linear-gradient(90deg, rgb(251 244 232 / 97%) 0%, rgb(251 244 232 / 91%) 43%, rgb(251 244 232 / 52%) 70%, rgb(251 244 232 / 8%) 100%);
  }

  .hero-media {
    inset: 0;
    height: 100%;
  }

  .hero-media img {
    object-position: 70% 56%;
  }

  .hero-copy {
    z-index: 2;
    width: 100%;
    margin: .25rem 0 0;
  }

  .hero-brand {
    width: clamp(11.5rem, 52vw, 14rem);
    margin-bottom: .4rem;
  }

  .hero-lead {
    max-width: 21rem;
    margin-top: .3rem;
    font-size: 1rem;
    line-height: 1.38;
  }

  .hero-actions {
    gap: .65rem;
    margin-top: .8rem;
  }

  .hero-actions .button {
    min-height: 3rem;
  }

  .about {
    min-height: 0;
    padding-block: 2.5rem 1.8rem;
  }

  .about-composition {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: .35rem;
    padding-top: .9rem;
  }

  .about-copy {
    width: 100%;
    margin: 0;
  }

  .about-copy h2 {
    font-size: clamp(2.8rem, 8vw, 3.8rem);
  }

  .about-copy > p {
    max-width: 38rem;
  }

  .about-sprout {
    position: relative;
    top: auto;
    left: auto;
    align-self: center;
    width: min(100%, 29rem);
    height: auto;
    aspect-ratio: 1.3 / 1;
    margin: .1rem 0 .2rem;
  }

  .about-quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 36rem);
    margin: .8rem 0 0 auto;
    color: var(--color-text);
    font-size: clamp(1.2rem, 3vw, 1.35rem);
    line-height: 1.25;
    transform: none;
  }

  .about-quote p + p {
    margin-top: .85rem;
  }

  .projects {
    min-height: 0;
    padding-block: 2.4rem;
  }

  .project-heading {
    width: 100%;
    min-height: 0;
    padding: 1rem 2% .6rem;
  }

  .project-heading > div {
    width: 100%;
  }

  .project-heading h2 {
    max-width: 100%;
    font-size: clamp(3rem, 12vw, 4.6rem);
  }

  .projects-intro {
    max-width: 39rem;
    margin-top: .85rem;
    font-size: 1rem;
    line-height: 1.45;
  }

  .project-list {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    width: auto;
    margin: 1rem 1% 0;
  }

  .project, .project-one, .project-two, .project-three {
    width: 100%;
    margin: 0;
  }

  .project-two {
    width: 95%;
    margin-left: auto;
    transform: rotate(.35deg);
  }

  .project-three {
    width: 98%;
    margin-right: auto;
    transform: rotate(-.25deg);
  }

  .project-one {
    transform: rotate(-.2deg);
  }

  .project-media, .project-one .project-media, .project-two .project-media, .project-three .project-media {
    height: auto;
    aspect-ratio: 2.1 / 1;
  }

  .project-media img {
    object-fit: contain;
  }

  .project-copy {
    padding: 1rem 1.1rem 1.2rem;
  }

  .project h3 {
    font-size: clamp(1.75rem, 7vw, 2.1rem);
  }

  .project-copy > p {
    min-height: 0;
    font-size: .98rem;
    line-height: 1.45;
  }

  .projects-end {
    width: min(92%, 36rem);
    margin-top: 1.8rem;
  }

  .projects-end-title {
    color: var(--color-paper);
    font-size: clamp(1.9rem, 7vw, 2.35rem);
  }

  .project .tag-list {
    gap: .3rem .25rem;
  }

  .contact-cta {
    min-height: 3.75rem;
    padding-inline: 1.7rem;
  }

  .social-links a {
    width: 2.75rem;
    height: 2.75rem;
  }

  .profile-media {
    width: min(100%, 32rem);
  }

}

@media (max-width: 430px) {
  .hero {
    min-height: 33rem;
    padding-top: 4.45rem;
  }

  .hero-brand {
    width: clamp(11.5rem, 52vw, 13.25rem);
  }

  .hero-lead {
    max-width: 19rem;
  }

  .hero-actions .button {
    min-height: 3rem;
  }

  .about {
    padding-block: 2.2rem 1.5rem;
  }

  .about-composition {
    padding-top: .7rem;
  }

  .about-sprout {
    width: 100%;
    max-width: 26rem;
    aspect-ratio: 1.3 / 1;
  }

  .about-quote {
    width: min(100%, 36rem);
    margin: .8rem 0 0 auto;
    font-size: 1.35rem;
  }

  .project-copy {
    padding: .95rem 1rem 1.15rem;
  }

}

@media (max-width: 380px) {
  .hero {
    min-height: 32rem;
    padding-top: 4.35rem;
  }

  .hero-brand {
    width: min(11.5rem, 56vw);
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .button {
    width: fit-content;
  }

  .contact-cta {
    min-height: 3.5rem;
    padding-inline: 1.35rem;
  }

}

/* Sobre: texto, planta e anotação lado a lado */

@media (min-width: 1101px) {
  .about {
    min-height: 0;
    padding-block: 2.8rem .8rem;
  }

  .about-composition {
    display: grid;
    grid-template-columns: minmax(19rem, 1.15fr) minmax(23.5rem, 1.05fr);
    width: calc(100% - min(24%, 21rem) - clamp(1rem, 2vw, 2rem));
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    min-height: 0;
    padding-top: 0;
  }

  .about-copy {
    grid-column: 1;
    width: 100%;
    margin: 0;
  }

  .about-copy h2 {
    margin-bottom: 1.55rem;
  }

  .about-copy > p {
    line-height: 1.5;
  }

  .about-copy > p + p {
    margin-top: .9rem;
  }

  .about-sprout {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    grid-column: 2;
    align-self: end;
    width: 100%;
    height: auto;
    aspect-ratio: 1.3 / 1;
    margin: 0;
    transform: translateY(2rem) rotate(1.8deg);
  }

  .about-quote {
    position: absolute;
    top: 50%;
    right: var(--container-gutter);
    bottom: auto;
    width: min(24%, 21rem);
    margin: 0;
    font-size: clamp(1.2rem, 1.45vw, 1.35rem);
    line-height: 1.25;
    transform: translateY(-50%);
  }

  .about-quote p + p {
    margin-top: .85rem;
  }
}

/* Sobre no tablet: texto e planta em duas colunas */

@media (min-width: 821px) and (max-width: 1100px) {
  .about {
    min-height: 0;
    padding-block: 2.6rem 2rem;
  }

  .about-composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 0;
    padding-top: 0;
  }

  .about-copy {
    grid-column: 1;
    width: 100%;
    margin: 0;
  }

  .about-copy h2 {
    margin-bottom: 1.1rem;
  }

  .about-sprout {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    align-self: end;
    width: 100%;
    height: auto;
    aspect-ratio: 1.3 / 1;
    margin: 0;
    transform: rotate(1.8deg);
  }

  .about-quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(70%, 26rem);
    margin: .75rem 2% 0 auto;
    font-size: clamp(1.2rem, 1.45vw, 1.35rem);
    line-height: 1.25;
    transform: none;
  }

  .about-quote p + p {
    margin-top: .85rem;
  }
}

/* Sobre no celular: a imagem e a anotação seguem no fluxo */

@media (max-width: 820px) {
  .about-copy h2 {
    margin-bottom: 1.1rem;
  }

  .about-quote {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 36rem);
    margin: .8rem 0 0 auto;
    line-height: 1.25;
    transform: none;
  }
}

/* Compactação final de Serviços e Contato/Footer */

.service-item .service-note {
  min-height: 0;
  color: var(--color-text);
}

@media (min-width: 821px) {
  .services {
    min-height: 34rem;
    padding-block: 3.2rem 3.6rem;
    grid-template-columns: minmax(23rem, .9fr) minmax(0, 2.6fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }

  .services-heading {
    padding-top: 1.6rem;
  }

  .service-list {
    align-self: center;
    margin: 0;
    column-gap: clamp(.5rem, 1.2vw, 1.2rem);
  }

  .service-item {
    min-height: 18rem;
    padding-block: .9rem .8rem;
  }

  .service-item h3 {
    min-height: 3.6rem;
  }

  .service-item p {
    min-height: 6.4rem;
    margin-top: .8rem;
  }

  .service-item .tag-list {
    margin-top: .65rem;
  }

  .service-item .service-note {
    position: static;
    width: min(100%, 12rem);
    max-width: 12rem;
    margin: .9rem 0 0 auto;
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    line-height: 1.05;
    transform: rotate(-3deg);
  }

  .contact {
    min-height: 44rem;
    padding-block: 3.4rem 1rem;
  }

  .contact-layout {
    min-height: 36rem;
    padding-block: 2.6rem .5rem;
  }
}

@media (max-width: 820px) {
  .services {
    padding-block: 2.5rem 3rem;
  }

  .services-heading {
    padding-block: 1rem .65rem;
  }

  .services-heading > p {
    margin-top: .85rem;
  }

  .service-list {
    margin-top: .8rem;
  }

  .service-item {
    padding-block: .9rem;
  }

  .service-item .service-note {
    grid-column: 2;
    width: min(14rem, 100%);
    margin: .8rem 0 0;
    font-size: 1.55rem;
    line-height: 1.05;
    transform: rotate(-2deg);
  }

}

/* Legibilidade das tags de Serviços */

.service-item .tag-list {
  gap: .35rem .4rem;
}

.service-item .tag-list li {
  padding: .2rem .58rem;
  border-color: rgb(8 39 28 / 60%);
  color: var(--color-primary);
  font-size: .78rem;
  line-height: 1.3;
}

@media (max-width: 820px) {
  .service-item .tag-list {
    gap: .3rem .35rem;
  }

  .service-item .tag-list li {
    padding: .18rem .52rem;
    font-size: .75rem;
  }
}

/* Contato/Footer: compactação e alinhamento dos ícones sociais */

@media (min-width: 821px) {
  .contact {
    min-height: 42rem;
    padding-block: 3rem .8rem;
  }

  .contact-layout {
    min-height: 34rem;
    padding-block: 2.5rem .5rem;
  }
}

.contact .contact-socials {
  position: static;
  margin: .7rem 0 0;
  gap: .6rem;
}

.contact .contact-socials a {
  width: 3rem;
  height: 3rem;
  border-color: rgb(251 244 232 / 68%);
}

@media (max-width: 820px) {
  .contact .contact-socials {
    gap: .55rem;
    margin-top: .65rem;
  }

  .contact .contact-socials a {
    width: 2.85rem;
    height: 2.85rem;
  }
}

/* Fechamento responsivo: fluxo seguro em tablets e celulares */
@media (max-width: 820px) {
  body {
    min-width: 0;
  }

  .menu-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .site-nav a:not(.nav-cta) {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .project-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-two,
  .project-three {
    transform: none;
  }

  .project .text-link,
  .profile-links a,
  .social-links a {
    min-height: 2.75rem;
  }

  .site-footer {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    align-items: flex-start;
    margin-top: 2rem;
    text-align: left;
  }

  .site-footer img {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-actions .button {
    min-height: 3rem;
  }

  .contact-layout {
    min-height: 0;
    padding-bottom: 1rem;
  }

  .contact-copy {
    width: 100%;
  }

  .contact .contact-socials {
    position: static;
    width: 100%;
    margin-top: 1rem;
    gap: .6rem;
  }

  .contact .contact-socials a {
    width: 2.85rem;
    height: 2.85rem;
  }

  .site-footer {
    margin-top: 1.5rem;
  }
}

/* Contato: composição próxima ao mockup aprovado */
.contact .contact-copy {
  width: min(44%, 34rem);
}

.contact h2 {
  margin-bottom: 1rem;
}

.contact .contact-copy-text {
  max-width: 29rem;
  margin-top: 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.4;
}

.contact .contact-cta {
  margin-top: 1.1rem;
}

.contact .contact-socials {
  position: static;
  width: fit-content;
  margin-top: .85rem;
  gap: 1rem;
}

.contact .contact-socials a {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-paper);
}

.contact .contact-socials a:hover {
  transform: translateY(-2px);
  background: transparent;
  color: var(--color-paper);
}

.contact .contact-socials a:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 2px;
}

.contact .contact-socials svg {
  display: block;
  width: 2rem;
  height: 2rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Ícones sociais do contato Vira Mato */
.contact .contact-socials {
  position: static;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem;
  width: fit-content;
  max-width: 100%;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
}

.contact .contact-social-item {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  min-width: 44px;
  min-height: 44px;
  list-style: none;
}

.contact .contact-socials .contact-social-link {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 44px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-primary);
  text-decoration: none;
  transition: color .3s ease-in-out, outline-color .2s ease-in-out;
}

.contact .contact-social-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 0;
  border-radius: 50%;
  background: var(--contact-social-hover, var(--color-accent));
  transition: height .3s ease-in-out;
}

.contact .contact-socials .contact-social-link[data-social="instagram"] { --contact-social-hover: linear-gradient(45deg, #405de6, #5b51db, #b33ab4, #c135b4, #e1306c, #fd1f1f); }
.contact .contact-socials .contact-social-link[data-social="linkedin"] { --contact-social-hover: #0274b3; }
.contact .contact-socials .contact-social-link[data-social="github"] { --contact-social-hover: #24262a; }
.contact .contact-socials .contact-social-link[data-social="email"] { --contact-social-hover: var(--color-accent); }

.contact .contact-socials .contact-social-link:hover,
.contact .contact-socials .contact-social-link:focus-visible {
  color: #fff;
}

.contact .contact-socials .contact-social-link:hover .contact-social-fill,
.contact .contact-socials .contact-social-link:focus-visible .contact-social-fill {
  height: 100%;
}

.contact .contact-socials .contact-social-link:focus-visible {
  z-index: 2;
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.contact .contact-socials .contact-social-link svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
  fill: currentColor;
  stroke: none;
}

.contact .contact-socials .contact-social-link[data-social="github"] svg { width: 29px; height: 29px; }

.contact .contact-social-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 5;
  padding: .35rem .55rem;
  border-radius: 4px;
  background: var(--color-paper);
  color: var(--color-primary);
  font-size: .75rem;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s;
}

.contact .contact-social-item:hover .contact-social-tooltip,
.contact .contact-socials .contact-social-link:focus-visible + .contact-social-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 520px) {
  .contact .contact-socials { gap: .65rem; }
  .contact .contact-social-item { width: 46px; height: 46px; }
  .contact .contact-socials .contact-social-link svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact .contact-socials .contact-social-link,
  .contact .contact-social-fill,
  .contact .contact-social-tooltip { transition: none; }
  .contact .contact-socials .contact-social-link:hover .contact-social-fill,
  .contact .contact-socials .contact-social-link:focus-visible .contact-social-fill { height: 100%; }
  .contact .contact-social-tooltip { transform: translate(-50%, 0); }
}

@media (min-width: 821px) {
  .contact {
    min-height: 39rem;
    padding-block: 2.6rem .8rem;
    background-position: center;
  }

  .contact-layout {
    min-height: 31rem;
    padding: 2.3rem 0 .5rem 5%;
  }

  .contact .site-footer {
    bottom: 1.5rem;
  }
}

@media (max-width: 820px) {
  .contact {
    min-height: 0;
    padding-block: 2.7rem 1.5rem;
  }

  .contact-layout {
    min-height: 0;
    padding: 1.5rem 0 .5rem;
  }

  .contact .contact-copy {
    width: min(88%, 31rem);
  }

  .contact .site-footer {
    margin-top: 1.25rem;
  }
}

@media (max-width: 430px) {
  .contact .contact-copy {
    width: 100%;
  }

  .contact .contact-socials {
    gap: .75rem;
  }

  .contact .contact-socials a {
    width: 2.65rem;
    height: 2.75rem;
  }
}

/* Contato/Footer: composição em três zonas da referência */
@media (min-width: 821px) {
  .contact {
    display: block;
    min-height: 36rem;
    padding: 2.4rem max(var(--container-gutter), calc((100vw - 84rem) / 2)) 1rem;
    background-color: #06281d;
    background-image:
      linear-gradient(90deg, #06281d 0%, #06281d 28%, rgb(6 40 29 / 88%) 33%, transparent 39%, transparent 63%, rgb(6 40 29 / 84%) 70%, #06281d 76%),
      url("../assets/banners/porta aberta footer.png");
    background-position: center, center;
    background-size: 100% 100%, cover;
    background-repeat: no-repeat;
  }

  .contact::before {
    background: linear-gradient(90deg, rgb(5 32 22 / 24%), transparent 38%, transparent 68%, rgb(5 32 22 / 20%));
    pointer-events: none;
  }

  .contact-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 1.12fr) minmax(14rem, 1.25fr) minmax(13rem, .9fr);
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    min-height: 31rem;
    padding: 0;
  }

  .contact .contact-copy {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 31rem;
    margin: 0;
  }

  .contact h2 {
    max-width: 32rem;
    margin-bottom: .7rem;
    font-size: clamp(2.6rem, 3.3vw, 3.8rem);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .contact h2 em::after {
    position: absolute;
    right: 0;
    bottom: -.08em;
    left: .02em;
    height: .1em;
    border-radius: 60% 35% 55% 25%;
    background: var(--color-accent);
    content: '';
    transform: rotate(-2deg);
  }

  .contact .contact-copy-text {
    max-width: 24rem;
    margin: 0;
    font-size: clamp(1rem, 1.05vw, 1.08rem);
    line-height: 1.4;
  }

  .contact .contact-cta {
    min-height: 3rem;
    margin-top: 1rem;
    padding: .7rem 1.35rem;
    font-size: .98rem;
  }

  .contact .contact-socials {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: fit-content;
    margin: .8rem 0 0;
    gap: .9rem;
  }

  .contact .site-footer {
    position: relative;
    inset: auto;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-items: center;
    width: 100%;
    max-width: 14rem;
    margin: 0;
    text-align: center;
    transform: translateY(-.6rem);
  }

  .contact .site-footer img {
    width: min(100%, 13rem);
    max-height: 10rem;
    object-fit: contain;
    filter: none;
  }

  .contact .site-footer p {
    margin: .2rem 0 0;
    font-size: 1.1rem;
  }

  .contact .site-footer small {
    font-size: .75rem;
    letter-spacing: .07em;
  }

  .contact-swoosh {
    position: absolute;
    right: 13%;
    bottom: -.75rem;
    z-index: 1;
    width: 9rem;
    height: 7rem;
    overflow: visible;
    fill: none;
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-width: 2.2;
    pointer-events: none;
    transform: rotate(-8deg);
  }

}

@media (max-width: 820px) {
  .contact {
    min-height: 0;
    background-color: #06281d;
    background-image: url("../assets/banners/porta aberta footer.png");
    background-position: center bottom;
    background-size: auto 52%;
  }

  .contact::before {
    background: linear-gradient(90deg, rgb(5 32 22 / 94%), rgb(5 32 22 / 78%) 60%, rgb(5 32 22 / 45%));
  }

  .contact-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    min-height: 0;
    padding: 1.5rem 0 .5rem;
  }

  .contact .contact-copy {
    width: min(100%, 31rem);
  }

  .contact h2 {
    margin-bottom: .7rem;
    font-size: clamp(3.4rem, 8vw, 4.5rem);
  }

  .contact .contact-socials {
    position: static;
    align-self: flex-start;
    margin: .8rem 0 0;
  }

  .contact .site-footer {
    position: relative;
    inset: auto;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
  }

  .contact .site-footer img {
    width: min(11rem, 70vw);
    max-height: 8rem;
    filter: none;
  }

  .contact-swoosh {
    display: none;
  }
}

@media (max-width: 430px) {
  .contact {
    background-size: auto 44%;
  }

  .contact .contact-copy-text {
    max-width: 23rem;
  }

  .contact .contact-socials {
    gap: .65rem;
  }
}

/* Sobre: distribuição horizontal e respiro na transição */
@media (min-width: 1101px) {
  .about {
    padding-bottom: 1.35rem;
  }

  .about-composition {
    grid-template-columns: minmax(23rem, 1.35fr) minmax(20rem, .9fr);
    width: calc(100% - min(24%, 21rem) - clamp(.8rem, 1.4vw, 1.25rem));
    gap: clamp(1.5rem, 2.4vw, 2.25rem);
  }

  .about-quote {
    right: 0;
    width: min(24%, 21rem);
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .about {
    padding-bottom: 2.5rem;
  }

  .about-composition {
    gap: clamp(1.25rem, 2vw, 1.5rem);
  }
}

@media (max-width: 820px) {
  .about {
    padding-bottom: 2rem;
  }

  .about-copy > p {
    max-width: 42rem;
  }

  .about-quote {
    width: min(100%, 38rem);
  }
}

@media (max-width: 430px) {
  .about {
    padding-bottom: 1.8rem;
  }
}

/* Projetos: vitrine editorial em duas áreas */
.projects {
  min-height: 0;
  padding-block: 3.5rem 3rem;
}

.projects-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.project-intro-column { min-width: 0; }

.project-heading {
  width: 100%;
  min-height: 0;
  padding: .85rem 0 0;
}

.project-heading > div { width: 100%; }

.project-heading h2 {
  max-width: 100%;
  font-size: clamp(2.8rem, 7vw, 4.1rem);
  line-height: .98;
}

.projects-intro {
  max-width: 38rem;
  margin-top: .9rem;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.5;
}

.project-list {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rubia" "equilibrivm" "keepgoing" "movement";
  align-items: start;
  gap: 1.2rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.project,
.project-one,
.project-two,
.project-three {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(8 39 28 / 17%);
  border-radius: 2px;
  background: var(--color-paper);
  box-shadow: 0 9px 18px rgb(0 0 0 / 20%);
}

.project-one { grid-area: rubia; }
.project-two { grid-area: equilibrivm; }
.project-three { grid-area: keepgoing; }

.project-one,
.project-two,
.project-three { transform: none; }

.project:hover {
  z-index: 4;
  transform: translateY(-.12rem);
}

.project-media,
.project-one .project-media,
.project-two .project-media,
.project-three .project-media {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.75 / 1;
  padding: .4rem;
  background: #d9ceb9;
}

.project-one .project-media { aspect-ratio: 3.5 / 1; }

.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-copy,
.project-one .project-copy {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  padding: .9rem 1rem 1rem;
  background-color: var(--color-paper);
  background-image: linear-gradient(rgb(251 244 232 / 94%), rgb(251 244 232 / 94%)), url("../assets/fundo/textura papel.png");
  background-size: cover;
}

.project h3 {
  color: var(--color-primary);
  font: 400 clamp(1.625rem, 2vw, 1.875rem)/1.08 var(--font-editorial);
  letter-spacing: -.035em;
}

.project-copy > p {
  min-height: 0;
  margin: .5rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
}

.project .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .4rem;
  margin: .65rem 0 .35rem;
  padding: 0;
}

.project .tag-list li {
  padding: .25rem .6rem;
  border-color: rgb(8 39 28 / 62%);
  font-size: .78rem;
  line-height: 1.25;
}

.projects .project .text-link {
  display: inline-flex;
  min-height: 2.4rem;
  margin-top: .3rem;
  padding: .4rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.project-one .project-copy > span {
  display: inline-block;
  margin-top: .35rem;
  color: var(--color-primary);
  font-size: .8rem;
}

.projects-end {
  grid-area: movement;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  margin: .15rem 1rem 0 0;
  color: var(--color-paper);
  text-align: right;
  transform: rotate(-3deg);
}

.projects-end-title {
  margin: 0;
  color: var(--color-paper);
  font-size: clamp(1.9rem, 2.7vw, 2.35rem);
  line-height: 1.05;
}

@media (min-width: 821px) and (max-width: 1279px) {
  .projects { padding-block: 3.5rem 3.25rem; }
  .projects-layout { gap: 1.75rem; }
  .project-heading h2 { font-size: clamp(3rem, 6vw, 4.1rem); }
  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "rubia rubia" "equilibrivm keepgoing" ". movement";
    gap: 1.1rem;
  }
  .project-one .project-media { aspect-ratio: 3.5 / 1; }
  .project-two .project-media,
  .project-three .project-media { aspect-ratio: 1.7 / 1; }
}

@media (min-width: 981px) {
  .projects-layout {
    grid-template-columns: minmax(19rem, .9fr) minmax(0, 2.1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .project-intro-column { padding-top: .25rem; }
  .project-heading h2 { font-size: clamp(3rem, 3.6vw, 3.9rem); }
  .projects-intro { max-width: 25rem; }
  .project-two h3, .project-three h3 { font-size: clamp(1.5rem, 1.65vw, 1.875rem); }
  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "rubia rubia" "equilibrivm keepgoing" ". movement";
    gap: 1.15rem;
  }
  .project-one,
  .project-two,
  .project-three { transform: rotate(-.18deg); }
  .project-two { transform: rotate(.25deg); }
  .project-three { transform: rotate(-.2deg); }
  .project-one .project-media { aspect-ratio: 3.3 / 1; padding: .45rem .55rem; }
  .project-two .project-media,
  .project-three .project-media { aspect-ratio: 1.75 / 1; }
  .project-one .project-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
    align-items: center;
    gap: .65rem .75rem;
    padding: .85rem 1.1rem;
  }
  .project-one .project-copy > p,
  .project-two .project-copy > p,
  .project-three .project-copy > p { display: none; }
  .project-one .project-copy h3 { grid-column: 1; font-size: clamp(1.625rem, 2vw, 1.875rem); }
  .project-one .project-copy .tag-list { grid-column: 2; margin: 0; }
  .project-one .project-copy > span { grid-column: 3; margin: 0; white-space: nowrap; font-size: .8rem; }
  .project-two .project-copy,
  .project-three .project-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .35rem .7rem;
    padding: .8rem .9rem;
  }
  .project-two .project-copy h3,
  .project-three .project-copy h3 {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(1.5rem, 1.65vw, 1.75rem);
    line-height: 1.1;
  }
  .project-two .project-copy .tag-list,
  .project-three .project-copy .tag-list { grid-column: 1; grid-row: 2; margin: 0; }
  .project-two .project-copy .text-link,
  .project-three .project-copy .text-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .projects-end { margin: .1rem .8rem .15rem 0; }
  .project-two .project-copy,
  .project-three .project-copy { padding: .8rem .9rem; }
  .project-two .project-copy .tag-list li,
  .project-three .project-copy .tag-list li { font-size: .78rem; }
}

@media (max-width: 960px) and (min-width: 821px) {
  .project-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rubia" "equilibrivm" "keepgoing" "movement";
  }
  .project-one .project-media { aspect-ratio: 3.5 / 1; }
  .project-two .project-media,
  .project-three .project-media { aspect-ratio: 2 / 1; }
}

@media (max-width: 820px) {
  .projects { padding-block: 3rem 3.5rem; }
  .projects-layout { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .project-heading { padding-top: .7rem; }
  .project-heading h2 { max-width: 30rem; font-size: clamp(2.8rem, 10vw, 4rem); }
  .projects-intro { max-width: 36rem; }
  .project-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rubia" "equilibrivm" "keepgoing" "movement";
    gap: 1.1rem;
    width: min(100%, 38rem);
    margin-inline: auto;
  }
  .project-one,
  .project-two,
  .project-three { transform: none; }
  .project-one .project-media { aspect-ratio: 3.5 / 1; }
  .project-two .project-media,
  .project-three .project-media { aspect-ratio: 1.7 / 1; }
  .project-one .project-copy,
  .project-two .project-copy,
  .project-three .project-copy { display: block; padding: .9rem 1rem 1rem; }
  .project-one .project-copy > p,
  .project-two .project-copy > p,
  .project-three .project-copy > p { display: block; }
  .project-one .project-copy .tag-list,
  .project-two .project-copy .tag-list,
  .project-three .project-copy .tag-list { margin: .65rem 0 .35rem; }
  .project-one .project-copy > span { margin-top: .35rem; }
  .projects .project .text-link { min-height: 2.75rem; }
  .projects-end { margin: .2rem 1rem .25rem 0; }
}

@media (max-width: 480px) {
  .projects-intro { font-size: 1rem; }
  .project .tag-list li { padding-inline: .6rem; font-size: .75rem; }
  .projects-end { margin-right: .5rem; }
}