:root {
  --bg: oklch(100% 0 0);
  --surface: oklch(98.5% 0.004 145);
  --fg: oklch(25% 0.018 268);
  --muted: oklch(49% 0.015 264);
  --border: oklch(91% 0.012 150);
  --green: oklch(52% 0.17 148);
  --green-dark: oklch(41% 0.14 148);
  --green-deep: oklch(34% 0.09 164);
  --ink: oklch(18% 0.012 270);
  --display: "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
}
    * {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
    }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font: 400 15px/1.65 var(--body);
      -webkit-font-smoothing: antialiased;
    }
    img {
      display: block;
      max-width: 100%;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    button {
      font: inherit;
    }
    :focus-visible {
      outline: 3px solid oklch(68% 0.16 148);
      outline-offset: 4px;
    }
    .wrap {
      width: min(var(--wrap), calc(100% - 48px));
      margin-inline: auto;
    }
    .topline {
      min-height: 37px;
      background: var(--green);
      color: #fff;
      font-size: 12px;
    }
    .topline-inner {
      min-height: 37px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .topline a {
      font-weight: 650;
    }
    .topline a:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .topline-note {
      opacity: .96;
    }
    .masthead {
      position: absolute;
      z-index: 5;
      inset: 37px 0 auto;
      color: #fff;
    }
    .nav-row {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-bottom: 1px solid rgb(255 255 255 / 18%);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      width: 190px;
      flex: 0 0 auto;
    }
    .brand img {
      width: 100%;
      height: auto;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(22px, 3.2vw, 46px);
      font-size: 13px;
      font-weight: 650;
    }
    .nav-links a {
      position: relative;
      padding: 9px 0;
      text-shadow: 0 1px 8px rgb(0 0 0 / 26%);
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 100%;
      height: 2px;
      background: #fff;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .nav-links a:hover::after, .nav-links a[aria-current="page"]::after {
      transform: scaleX(1);
    }
    .menu-toggle {
      display: none;
      width: 46px;
      height: 44px;
      color: #fff;
      background: rgb(0 0 0 / 18%);
      border: 1px solid rgb(255 255 255 / 45%);
      border-radius: 6px;
      cursor: pointer;
    }
    .menu-toggle .fa-icon {
      font-size: 19px;
    }
    .hero {
      min-height: 472px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: #34333b url("../img/hero%20bg.jpg") center 43% / cover no-repeat;
      color: #fff;
    }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(90deg, rgb(26 25 34 / 79%) 0%, rgb(30 29 39 / 60%) 42%, rgb(35 34 41 / 34%) 100%);
    }
    .hero-content {
      width: min(620px, 62%);
      padding-top: 68px;
    }
    .hero h1 {
      max-width: 610px;
      margin: 0 0 18px;
      font: 750 clamp(32px, 4vw, 48px)/1.12 var(--display);
      letter-spacing: -.035em;
      text-wrap: balance;
    }
    .hero p {
      max-width: 540px;
      margin: 0;
      color: rgb(255 255 255 / 91%);
      font-size: 15px;
      line-height: 1.75;
    }
    .section {
      padding-block: 88px;
    }
    .about {
      padding-top: 78px;
      padding-bottom: 85px;
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: clamp(48px, 8vw, 104px);
      align-items: center;
    }
    .eyebrow {
      margin: 0 0 7px;
      color: var(--green);
      font-size: 12px;
      line-height: 1.3;
      font-weight: 750;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .about h2 {
      margin: 0 0 9px;
      color: var(--green);
      font: 750 clamp(31px, 3.6vw, 40px)/1.15 var(--display);
      letter-spacing: -.035em;
    }
    .about-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
    .about-copy p + p {
      border-top: 1px solid var(--border);
      margin-top: 18px;
      padding-top: 18px;
    }
    .project-intro {
      margin-top: 19px !important;
    }
    .project-logos {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px 18px;
      margin-top: 17px;
    }
    .project-logos img {
      width: auto;
      height: auto;
      max-width: 22%;
      max-height: 48px;
      object-fit: contain;
    }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 11px;
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 750;
    }
    .text-link:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .about-visual {
      position: relative;
      width: min(100%, 490px);
      justify-self: center;
      padding: 14px 8px 37px;
    }
    .about-photo {
      width: min(100%, 400px);
      aspect-ratio: 1;
      margin-inline: auto;
      border-radius: 50%;
      object-fit: cover;
      object-position: center;
    }
    .online-badge {
      position: absolute;
      top: 0;
      right: 4%;
      z-index: 1;
      width: 134px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--green);
      color: #fff;
      text-align: center;
      box-shadow: 0 12px 32px rgb(8 73 35 / 15%);
    }
    .online-badge span {
      font-size: 13px;
    }
    .online-badge strong {
      font-size: 22px;
      line-height: 1.3;
    }
    .client-count {
      position: absolute;
      bottom: 0;
      left: 10%;
      min-height: 53px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 22px;
      border-radius: 999px;
      background: var(--fg);
      color: #fff;
      box-shadow: 0 10px 22px rgb(21 23 32 / 16%);
    }
    .client-count span {
      font-size: 12px;
    }
    .client-count strong {
      font-size: 19px;
      line-height: 1;
    }
    .services {
      padding-top: 55px;
      padding-bottom: 90px;
    }
    .section-head {
      margin: 0 auto 33px;
      text-align: center;
    }
    .section-head .eyebrow {
      margin-bottom: 5px;
    }
    .section-head h2 {
      margin: 0;
      color: var(--fg);
      font: 750 clamp(27px, 3.1vw, 35px)/1.2 var(--display);
      letter-spacing: -.03em;
    }
    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .service-card {
      min-height: 385px;
      display: flex;
      flex-direction: column;
      padding: 30px 27px 25px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      text-align: center;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .service-card:hover {
      transform: translateY(-4px);
      border-color: oklch(78% .09 148);
      box-shadow: 0 16px 34px rgb(22 43 30 / 8%);
    }
    .service-icon {
      width: 58px;
      height: 58px;
      margin: 0 auto 14px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--green);
      background: var(--surface);
      box-shadow: 0 3px 13px rgb(16 38 23 / 10%);
    }
    .service-icon .fa-icon {
      font-size: 27px;
    }
    .service-card h3 {
      margin: 0 0 14px;
      color: var(--fg);
      font: 700 17px/1.35 var(--display);
    }
    .service-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.68;
    }
    .service-card ul {
      display: grid;
      gap: 7px;
      width: fit-content;
      max-width: 100%;
      margin: auto auto 0;
      padding: 22px 0 0;
      list-style: none;
      text-align: left;
    }
    .service-card li {
      display: flex;
      align-items: start;
      gap: 9px;
      color: var(--fg);
      font-size: 12px;
      line-height: 1.4;
    }
    .check {
      flex: 0 0 15px;
      width: 15px;
      height: 15px;
      margin-top: 1px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--green);
      color: #fff;
      font-size: 8px;
      font-weight: 900;
    }
    .promo {
      align-self: flex-end;
      margin: -17px -10px 0 0;
      padding: 5px 12px;
      border-radius: 99px;
      background: var(--green);
      color: #fff;
      font-size: 10px;
      font-weight: 750;
    }
    .contact-band {
      background: var(--ink);
      color: #fff;
    }
    .contact-band-inner {
      min-height: 168px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .contact-band h2 {
      margin: 0;
      font: 750 clamp(24px, 3vw, 34px)/1.25 var(--display);
      letter-spacing: -.025em;
    }
    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--green);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      transition: background .18s ease, transform .18s ease;
      white-space: nowrap;
    }
    .button:hover {
      background: var(--green-dark);
      color: #fff;
      transform: translateY(-1px);
    }
    .button .fa-icon {
      font-size: 17px;
    }
    .reach {
      padding-block: 72px;
    }
    .reach-grid {
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      align-items: center;
      gap: clamp(38px, 8vw, 96px);
    }
    .map-frame {
      min-height: 255px;
      display: grid;
      place-items: center;
    }
    .map-frame img {
      width: min(100%, 590px);
      height: auto;
      object-fit: contain;
    }
    .reach-copy h2 {
      margin: 0 0 9px;
      color: var(--fg);
      font: 750 clamp(27px, 3vw, 34px)/1.2 var(--display);
      letter-spacing: -.03em;
    }
    .reach-copy > p {
      margin: 0;
      color: var(--muted);
      font-size: 13.5px;
    }
    .phone-block {
      margin-top: 21px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .phone-block span {
      display: block;
      color: var(--fg);
      font-size: 13px;
      font-weight: 700;
    }
    .phone-block a {
      color: var(--green-dark);
      font-size: 22px;
      font-weight: 750;
      line-height: 1.4;
    }
    .phone-block a:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .testimonials {
      position: relative;
      overflow: hidden;
      padding: 58px 0 62px;
      background: linear-gradient(180deg, var(--green-deep), oklch(49% .09 164));
      color: #fff;
    }
    .testimonial-head {
      text-align: center;
      margin-bottom: 24px;
    }
    .testimonial-mark {
      width: 34px;
      height: 34px;
      margin: 0 auto 9px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgb(255 255 255 / 17%);
    }
    .testimonial-mark .fa-icon {
      font-size: 16px;
    }
    .testimonial-head .eyebrow {
      color: rgb(255 255 255 / 79%);
      margin-bottom: 4px;
    }
    .testimonial-head h2 {
      margin: 0;
      font: 750 clamp(27px, 3vw, 34px)/1.2 var(--display);
      letter-spacing: -.025em;
    }
    .testimonial-head p {
      margin: 4px 0 0;
      color: rgb(255 255 255 / 80%);
      font-size: 12px;
    }
    .quote-wrap {
      display: grid;
      grid-template-columns: 44px minmax(0, 760px) 44px;
      gap: 14px;
      justify-content: center;
      align-items: center;
    }
    .quote-arrow {
      width: 44px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid rgb(255 255 255 / 35%);
      border-radius: 6px;
      background: transparent;
      color: #fff;
      cursor: pointer;
      transition: background .18s ease;
    }
    .quote-arrow:hover {
      background: rgb(255 255 255 / 16%);
      color: #fff;
    }
    .quote-arrow .fa-icon {
      font-size: 16px;
    }
    .quote-card {
      min-height: 116px;
      padding: 18px 22px;
      border-radius: 5px;
      background: #fff;
      color: var(--fg);
      box-shadow: 0 10px 26px rgb(15 35 25 / 12%);
    }
    .quote-card strong {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .quote-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
    }
    .site-footer {
      background: #080a09;
      color: #fff;
    }
    .footer-main {
      display: grid;
      grid-template-columns: 1fr 1.5fr .8fr;
      align-items: center;
      gap: 42px;
      min-height: 220px;
      padding-block: 36px;
    }
    .footer-brand {
      width: min(190px, 100%);
    }
    .footer-copy {
      margin: 0;
      color: rgb(255 255 255 / 77%);
      font-size: 12px;
    }
    .footer-contacts {
      display: grid;
      gap: 9px;
      margin-top: 13px;
    }
    .footer-contacts a {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: rgb(255 255 255 / 89%);
      font-size: 12px;
    }
    .footer-contacts a:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .footer-contacts .fa-icon {
      font-size: 14px;
      color: oklch(65% .16 148);
    }
    .footer-cta {
      justify-self: end;
    }
    .copyright {
      min-height: 58px;
      display: grid;
      place-items: center;
      border-top: 1px solid rgb(255 255 255 / 9%);
      color: rgb(255 255 255 / 70%);
      font-size: 11px;
      text-align: center;
    }
    @media (max-width: 900px) {
      :root {
        --wrap: 760px;
      }
    .hero {
        min-height: 430px;
      }
    .hero-content {
        width: min(620px, 75%);
      }
    .about-grid {
        gap: 44px;
      }
    .about-visual {
        padding-inline: 0;
      }
    .online-badge {
        width: 112px;
      }
    .client-count {
        left: 2%;
        padding-inline: 16px;
      }
    .service-grid {
        gap: 14px;
      }
    .service-card {
        padding-inline: 18px;
      }
    .footer-main {
        grid-template-columns: .8fr 1.4fr;
      }
    .footer-cta {
        grid-column: 2;
        justify-self: start;
      }
    }
    @media (max-width: 640px) {
      html {
        scroll-padding-top: 72px;
      }
    body {
        font-size: 14px;
      }
    .wrap {
        width: min(100% - 36px, 520px);
      }
    .topline {
        min-height: 34px;
        font-size: 11px;
      }
    .topline-inner {
        min-height: 34px;
      }
    .masthead {
        top: 34px;
      }
    .nav-row {
        min-height: 68px;
        border-bottom: 0;
      }
    .brand {
        width: 166px;
      }
    .menu-toggle {
        display: grid;
        place-items: center;
      }
    .menu-toggle .fa-icon {
        width: 22px;
        height: 22px;
      }
    .nav-links {
        position: absolute;
        top: 60px;
        left: 18px;
        right: 18px;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: 8px 18px;
        border: 1px solid rgb(255 255 255 / 21%);
        border-radius: 8px;
        background: oklch(25% .02 268 / 96%);
        box-shadow: 0 16px 36px rgb(0 0 0 / 20%);
      }
    .nav-links.is-open {
        display: flex;
        flex-direction: column;
      }
    .nav-links a {
        padding: 12px 2px;
      }
    .nav-links a + a {
        border-top: 1px solid rgb(255 255 255 / 13%);
      }
    .nav-links a::after {
        display: none;
      }
    .hero {
        min-height: 510px;
        align-items: end;
        background-position: 57% center;
      }
    .hero::before {
        background: linear-gradient(0deg, rgb(23 22 30 / 83%) 0%, rgb(23 22 30 / 63%) 46%, rgb(23 22 30 / 28%) 100%);
      }
    .hero-content {
        width: 100%;
        padding: 0 0 48px;
      }
    .hero h1 {
        max-width: 470px;
        margin-bottom: 14px;
        font-size: clamp(32px, 8.5vw, 43px);
      }
    .hero p {
        max-width: 460px;
        font-size: 14px;
      }
    .section {
        padding-block: 64px;
      }
    .about {
        padding-top: 60px;
        padding-bottom: 64px;
      }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
    .about h2 {
        font-size: 34px;
      }
    .about-copy p {
        font-size: 13.5px;
      }
    .project-logos {
        justify-content: center;
        gap: 18px 22px;
      }
    .project-logos img {
        max-width: 27%;
        max-height: 44px;
      }
    .about-visual {
        width: min(100%, 430px);
      }
    .about-photo {
        width: min(88%, 370px);
      }
    .online-badge {
        right: 2%;
        width: 108px;
      }
    .client-count {
        left: 4%;
        min-height: 48px;
      }
    .services {
        padding-top: 32px;
        padding-bottom: 65px;
      }
    .section-head {
        margin-bottom: 24px;
      }
    .service-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    .service-card {
        min-height: unset;
        padding: 26px 22px 24px;
      }
    .service-card p {
        max-width: 430px;
        margin-inline: auto;
        font-size: 13px;
      }
    .service-card ul {
        margin: 0 auto;
        padding-top: 20px;
      }
    .promo {
        margin-top: -16px;
      }
    .contact-band-inner {
        min-height: unset;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-block: 38px;
      }
    .contact-band h2 {
        max-width: 430px;
        font-size: 28px;
      }
    .reach {
        padding-block: 54px;
      }
    .reach-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    .map-frame {
        min-height: unset;
      }
    .map-frame img {
        width: 100%;
      }
    .reach-copy h2 {
        font-size: 29px;
      }
    .testimonials {
        padding-block: 48px;
      }
    .quote-wrap {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 8px;
      }
    .quote-arrow {
        width: 34px;
        height: 42px;
      }
    .quote-card {
        min-height: 142px;
        padding: 16px;
      }
    .quote-card p {
        font-size: 11.5px;
      }
    .footer-main {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-block: 38px;
      }
    .footer-brand {
        width: 172px;
      }
    .footer-cta {
        grid-column: auto;
        justify-self: start;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }
    .review-note {
      margin: 9px 0 0;
      color: rgb(255 255 255 / 83%);
      text-align: center;
      font-size: 11px;
      line-height: 1.5;
    }
    .review-position {
      margin: 10px 0 0;
      color: rgb(255 255 255 / 88%);
      text-align: center;
      font-size: 11px;
    }

.company-hero {
  min-height: 370px;
  background-image: url("../img/hero-nossa-empresa.webp");
  background-position: center 48%;
}

.company-hero .hero-content {
  width: min(700px, 75%);
  padding-top: 72px;
}

.company-hero .eyebrow {
  color: rgb(255 255 255 / 82%);
}

.company-about {
  padding-block: 78px 88px;
}

.company-about .about-copy h2 {
  max-width: 500px;
}

.company-intro {
  padding-block: 30px;
  background: var(--surface);
}

.company-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.company-intro-grid > div {
  display: grid;
  gap: 3px;
  padding-left: 18px;
  border-left: 3px solid var(--green);
  color: var(--muted);
  font-size: 13px;
}

.company-fact {
  color: var(--fg);
  font: 700 17px/1.3 var(--display);
}

.company-services {
  padding-block: 78px 84px;
}

.company-services .service-card {
  min-height: 310px;
  align-items: center;
  padding: 32px 28px;
}

.company-services .service-card p {
  max-width: 310px;
}

.company-services .service-card .text-link {
  margin-top: auto;
  padding-top: 22px;
}

.company-story-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(42px, 8vw, 96px);
}

.company-image-frame {
  position: relative;
  width: min(100%, 320px);
  justify-self: center;
}

.company-photo {
  display: block;
  width: 320px;
  height: 320px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 18px 42px rgb(21 23 32 / 12%);
}

.company-image-label {
  position: absolute;
  right: -18px;
  bottom: 18px;
  max-width: 205px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgb(8 73 35 / 18%);
}

.company-story h2 {
  margin: 0 0 13px;
  color: var(--fg);
  font: 750 clamp(28px, 3.2vw, 38px)/1.15 var(--display);
  letter-spacing: -.03em;
}

.company-story > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 14px;
}

.company-story .text-link {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .company-intro-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .company-services {
    padding-block: 60px 64px;
  }

  .company-services .service-card {
    min-height: 270px;
  }

  .company-story-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .company-photo {
    width: min(78vw, 300px);
    height: min(78vw, 300px);
  }

  .company-image-label {
    right: -8px;
  }

  .company-hero {
    min-height: 430px;
  }

  .company-hero .hero-content {
    width: 100%;
    padding-bottom: 48px;
  }

  .company-about {
    padding-block: 60px 64px;
  }
}

.projects-hero {
  min-height: 390px;
  background-image: url("../img/hero-nossa-empresa.webp");
  background-position: center 48%;
}

.projects-hero .hero-content {
  width: min(700px, 75%);
  padding-top: 72px;
}

.projects-hero .eyebrow {
  color: rgb(255 255 255 / 82%);
}

.portfolio {
  padding-block: 78px 92px;
}

.portfolio-head {
  max-width: 700px;
  margin-bottom: 38px;
}

.portfolio-intro {
  max-width: 580px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 14px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.portfolio-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 6px 22px rgb(22 43 30 / 5%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: oklch(78% .09 148);
  box-shadow: 0 16px 34px rgb(22 43 30 / 10%);
}

.portfolio-card-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: inherit;
}

.portfolio-logo {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.portfolio-logo-wordmark {
  display: flex;
  flex-direction: row;
  gap: 14px;
  justify-content: flex-start;
}

.portfolio-wordmark-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-deep);
  color: #fff;
  font: 750 15px/1 var(--display);
  letter-spacing: -.04em;
}

.portfolio-wordmark-name {
  max-width: 230px;
  color: var(--fg);
  font: 750 clamp(18px, 2vw, 23px)/1.15 var(--display);
  letter-spacing: -.035em;
}

.portfolio-grid .portfolio-card:nth-child(6n + 8) .portfolio-wordmark-mark,
.portfolio-grid .portfolio-card:nth-child(6n + 12) .portfolio-wordmark-mark {
  background: var(--green-dark);
}

.portfolio-grid .portfolio-card:nth-child(6n + 9) .portfolio-wordmark-mark,
.portfolio-grid .portfolio-card:nth-child(6n + 15) .portfolio-wordmark-mark {
  background: var(--ink);
}

.portfolio-grid .portfolio-card:nth-child(6n + 10) .portfolio-wordmark-mark,
.portfolio-grid .portfolio-card:nth-child(6n + 14) .portfolio-wordmark-mark {
  background: oklch(46% .11 210);
}

.portfolio-grid .portfolio-card:nth-child(6n + 11) .portfolio-wordmark-mark,
.portfolio-grid .portfolio-card:nth-child(6n + 13) .portfolio-wordmark-mark {
  background: oklch(49% .12 54);
}

.portfolio-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 24px;
}

.portfolio-category {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.portfolio-copy h3 {
  margin: 7px 0 8px;
  color: var(--fg);
  font: 700 20px/1.3 var(--display);
}

.portfolio-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.portfolio-visit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 750;
}

.portfolio-card-link:hover .portfolio-visit {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .projects-hero {
    min-height: 430px;
  }

  .projects-hero .hero-content {
    width: 100%;
    padding-bottom: 48px;
  }

  .portfolio {
    padding-block: 60px 68px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portfolio-logo {
    min-height: 136px;
  }
}

.contact-page-hero {
  min-height: 350px;
  background-image: url("../img/hero-nossa-empresa.webp");
  background-position: center 48%;
}

.contact-page-hero .hero-content {
  width: min(700px, 75%);
  padding-top: 62px;
}

.contact-page-hero .eyebrow {
  color: rgb(255 255 255 / 82%);
}

.contact-page-section {
  padding-block: 82px 96px;
  background: var(--surface, #f7f9f7);
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: start;
}

.contact-page-aside {
  padding-top: 12px;
}

.contact-page-aside h2,
.contact-form-heading h2 {
  margin: 0 0 16px;
  color: var(--fg);
  font: 750 clamp(26px, 3vw, 36px)/1.16 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.contact-page-aside > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

.contact-detail-list {
  display: grid;
  gap: 20px;
  margin-top: 34px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.contact-detail-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6f3e9;
  color: var(--green-dark);
  font-size: 18px;
}

.contact-detail strong,
.contact-detail small {
  display: block;
}

.contact-detail strong {
  color: var(--fg);
  font-size: 14px;
}

.contact-detail small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.contact-form {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 38px rgb(22 43 30 / 7%);
}

.contact-form-heading {
  margin-bottom: 26px;
}

.contact-form-heading .eyebrow {
  margin: 0 0 9px;
}

.contact-form-heading h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.5vw, 30px);
}

.contact-form-heading > p:last-child,
.contact-form-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.contact-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.contact-field {
  display: grid;
  gap: 8px;
}

.contact-field-full {
  grid-column: 1 / -1;
}

.contact-field label {
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
}

.contact-field label span {
  color: var(--green-dark);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}

.contact-field textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: 3px solid rgb(8 127 56 / 16%);
  border-color: var(--green-dark);
}

.contact-submit {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.contact-submit .fa-icon {
  margin-right: 8px;
  font-size: 18px;
}

.contact-form-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 800px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .contact-page-aside {
    max-width: 640px;
  }

  .contact-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .contact-page-hero {
    min-height: 380px;
  }

  .contact-page-hero .hero-content {
    width: 100%;
    padding-bottom: 44px;
  }

  .contact-page-section {
    padding-block: 58px 68px;
  }

  .contact-detail-list,
  .contact-form-fields {
    grid-template-columns: 1fr;
  }

  .contact-field-full {
    grid-column: auto;
  }
}