@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --ink-950: #111827;
  --ink-800: #1f2937;
  --ink-600: #4b5563;
  --ink-500: #6b7280;
  --surface-100: #eeeeee;
  --surface-000: #ffffff;
  --slate-900: #333333;
  --blue-500: #0a86f0;
  --blue-600: #0568cd;
  --shell-1200: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--ink-950);
  background: var(--surface-000);
}



img {
  max-width: 100%;

}

.logo-jess {
  width: 54px;
  height: 32px;
}

.navbar {
  margin: 24px 24px 0;
  padding: 24px 42px;
  background: var(--surface-000);
  border-radius: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-item {
  text-decoration: none;
  color: var(--slate-900);
  padding: 8px 16px;
  border-radius: 16px;
  transition: background-color 0.2s ease;
  font-weight: 400;
}

.nav-item:hover {
  background-color: #f2f2f2;
}

.nav-item_active {
  background-color: var(--slate-900);
  color: var(--surface-000);
  font-weight: 600;
}

.works-page {
  background: var(--surface-000);
  color: var(--ink-950);
}

.work-main {
  background: var(--surface-000);
  margin: 0;
  padding: 0;  
}

.works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;  
}

.works-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

.work-s1-intro {    
  display: flex;
  flex-direction: row;
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 80px;
  padding-bottom: 80px;
  gap: 80px;
  justify-content: center;  
}

.work-s1-intro img{    
  width: 562px;
  height: 594px;
}

.work-s1-intro-container {    
  display: flex;
  flex-direction: column;
  gap: 56px;  
  margin: 0;
}

.work-s1-intro-content {    
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;  
}

.work-s1-intro-date-time {    
  display: flex;
  flex-direction: row;  
  gap: 64px;
}

.work-s1-intro-date-time img{    
  width: 56px;
  height: 56px;
}

.work-s1-intro-date-time p{    
  margin: 0;
  font-size:  16px;
  font-weight: 400;
  line-height: 27px;
}

.work-s1-intro-date-time-item {    
  display: flex;
  flex-direction: row;  
  gap: 16px;
}
h1{    
  margin: 0;
  font-size:  64px;
  font-weight: 700;
  line-height: 89.6px;    
}

h2{
  margin: 0;
  font-size:  48px;
  font-weight: 700;
  line-height: 100%;
}

h3{
  margin: 0;
  font-size:  32px;
  font-weight: 600;
  line-height: 100%;
}


.works-main-div {    
  display: flex;
  flex-direction: column;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 80px;
  padding-bottom: 80px;
  gap: 80px;
}

.works-content-div {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.works-content-p-div {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.works-content-p-div p {
  margin: 0;
}



.works-main-div p{
  margin: 0;
  font-size:  18px;
  font-weight: 400;
  line-height: 27px;
}

.works-main-div img {
  border-radius: 0 30px 30px 30px;
}

.works-dark-div {  
  background: #333333;
  color: #ffffff;
}

.works-list {
  font-size:18px;
  font-weight: 400;
  line-height: 27px;
}



/* Homepage (index.html) */
.about-page {
  background: var(--surface-000);
}

.about-main {
  width: min(calc(100% - 48px), 1280px);
  margin: 0 auto;
}

.about-section {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 0.95fr);
  gap: 64px;
  align-items: start;
  padding: 56px 0 64px;
}

.about-content h1 {
  margin: 0 0 26px;
  font-size: clamp(2.9rem, 6vw, 5rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1e2428;
}

.about-description p {
  margin: 0;
  max-width: 32rem;
  font-size: 18px;
  color: #4e5358;
  line-height: 1.52;
  font-weight: 400;
}

.about-description p + p {
  margin-top: 18px;
}

.tags,
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.tag {
  background-color: #2f3134;
  color: var(--surface-000);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
}

.tag.orange {
  background-color: #f3e2d2;
  color: #8d4f1e;
}

.link-works {
  margin-top: 26px;  
  margin-left: 12px;
}

.link-work {
  text-decoration: none;
  color: #6f747a;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
}

.about-image {
  min-height: 680px;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 30px 30px 30;
}

.content-dark-background-section {
  margin-top: 0;
  background-color: var(--slate-900);
}

.content-dark-background {
  width: min(calc(100% - 48px), 1280px);
  margin: 0 auto;
  padding: 72px 0;
  display: grid;
  gap: 40px;
}

.content-dark-background p {
  margin: 0;
  font-size: 32px;
  line-height: 1.5;
  color: #f4f5f7;
  font-weight: 400;
}

.experience-item {
  display: flex;
  justify-content: space-between;
  gap: 38px;
  align-items: center;
}

.experience-logo {
  max-height: 42px;
  width: auto;
}

.about-works-section {
  display: flex;
  flex-direction: column;
}

.about-works-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;  
  background: var(--surface-000);
}

.about-works-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 82px 74px;
  background: var(--surface-000);
}

.about-works-column-content {
  max-width: 38rem;
}

.about-works-column-content h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-size: 32px;
  line-height: 1.02;
  font-weight: 600;
  color: #1a1a1a;
}

.about-works-column-content p {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
  color: #333333;
  max-width: 33rem;
}

.about-works-column-image {
  min-height: 560px;
  overflow: hidden;
}

.about-works-column-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-footer {
  background-color: var(--slate-900);
  color: #ffffff;
}

.main-footer {
  width: 100%;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 298px;
  }


.main-footer-description {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 177px;
}

.main-footer-info p {
  margin: 0;
  color: #f1f1f3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.main-footer-info p + p {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #d4d6da;
}

.main-footer-links {
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Caixinhas case study */
.case-study-page {
  background: #ffffff;
  color: var(--ink-950);
}

.case-study-main {
  padding-bottom: 72px;
}

.case-study-shell {
  width: min(calc(100% - 48px), var(--shell-1200));
  margin: 0 auto;
}

.case-study-hero {
  padding: 24px 0 48px;
}

.case-study-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 40px;
  align-items: center;
}

.case-study-hero-copy h1,
.case-study-section h2,
.case-study-callout h2,
.case-study-learnings h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.case-study-eyebrow {
  margin: 0 0 18px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.77rem;
  font-weight: 700;
}

.case-study-hero-copy h1 {
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: 0.92;
  color: #111827;
}

.case-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.case-study-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.case-study-meta-item strong,
.case-study-meta-item span {
  display: block;
}

.case-study-meta-item strong {
  color: #111827;
  font-size: 0.95rem;
  font-weight: 700;
}

.case-study-meta-item span {
  color: #6b7280;
  font-size: 0.83rem;
}

.case-study-meta-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  font-size: 1rem;
}

.case-study-lead {
  margin: 24px 0 0;
  max-width: 34rem;
  color: var(--ink-600);
  line-height: 1.8;
  font-size: 1rem;
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.case-chip,
.contributor-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 14px;
  line-height: 1;
  font-size: 0.92rem;
  font-weight: 600;
}

.case-chip {
  background: #1f2937;
  color: #ffffff;
}

.case-study-hero-visual {
  margin: 0;
  min-height: 420px;
  border-radius: 32px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.12);
}

.case-study-hero-mosaic {
  min-height: 430px;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0 84%, var(--blue-500) 84% 100%);
  padding: 20px 18px 0;
  display: grid;
  grid-template-columns: 0.78fr 1fr 0.78fr;
  gap: 16px;
  align-items: end;
}

.mosaic-phone {
  margin: 0;
  min-height: 360px;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.14);
}

.case-study-hero-visual img,
.phone-card img,
.mosaic-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-phone-left img {
  object-position: 18% center;
}

.mosaic-phone-center img {
  object-position: 50% center;
}

.mosaic-phone-right img {
  object-position: 82% center;
}

.case-study-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.phone-card {
  margin: 0;
  min-height: 480px;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
}

.phone-card img {
  object-position: center top;
}

.phone-card-left img {
  object-position: 10% center;
}

.phone-card-center-left img {
  object-position: 37% center;
}

.phone-card-center-right img {
  object-position: 63% center;
}

.phone-card-right img {
  object-position: 87% center;
}

.case-study-section {
  padding: 84px 0 0;
}

.case-study-section h2,
.case-study-callout h2,
.case-study-learnings h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin-bottom: 18px;
}

.case-study-section p,
.case-study-callout p,
.case-study-steps p,
.case-study-learnings p {
  margin: 0;
  color: var(--ink-600);
  line-height: 1.8;
  font-size: 1rem;
}

.case-study-section p + p,
.case-study-steps article + article {
  margin-top: 16px;
}

.case-study-callout {
  margin-top: 84px;
  background: #333333;
  padding: 56px 0;
}

.case-study-callout-dark {
  background: #393939;
}

.case-study-callout-inner {
  max-width: var(--shell-1200);
}

.case-study-callout h2,
.case-study-callout p,
.case-study-callout li {
  color: #f4f4f5;
}

.case-study-list {
  margin: 22px 0 0;
  padding-left: 20px;
  color: #edf2f7;
  line-height: 1.8;
}

.case-study-list li + li {
  margin-top: 10px;
}

.case-study-contributors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contributor-chip {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.case-study-steps {
  display: grid;
  gap: 28px;
  margin-top: 8px;
}

.case-study-steps h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 1.15rem;
}

.case-study-showcase {
  margin-top: 84px;
  padding: 56px 0 18px;
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%);
}

.case-study-showcase-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 1.05fr);
  gap: 42px;
  align-items: end;
}

.phone-card-showcase-left,
.phone-card-showcase-right {
  min-height: 560px;
}

.phone-card-showcase-left img {
  object-position: 14% center;
}

.phone-card-showcase-right img {
  object-position: 74% center;
}

.case-study-learnings {
  padding-bottom: 32px;
}

/* Consorcio case study */
.consorcio-page {
  background: #ffffff;
  color: #111827;
}

.consorcio-main {
  padding-bottom: 60px;
}

.consorcio-shell {
  width: min(calc(100% - 48px), 1120px);
  margin: 0 auto;
}



.consorcio-hero {
  padding: 24px 0 48px;
}

.consorcio-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 36px;
  align-items: start;
}

.consorcio-eyebrow {
  margin: 0 0 16px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b7280;
}

.consorcio-hero-copy h1,
.consorcio-section h2,
.consorcio-callout h2,
.consorcio-result h2,
.consorcio-bottom h2 {
  margin: 0;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.consorcio-hero-copy h1 {
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  line-height: 0.92;
  color: #1b2230;
}

.consorcio-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.consorcio-summary strong,
.consorcio-summary span {
  display: block;
}

.consorcio-summary strong {
  font-size: 0.95rem;
  color: #111827;
  margin-bottom: 6px;
}

.consorcio-summary span {
  color: #6b7280;
  line-height: 1.6;
  font-size: 0.92rem;
}

.consorcio-lead {
  margin: 22px 0 0;
  max-width: 30rem;
  color: #4b5563;
  line-height: 1.8;
  font-size: 1rem;
}

.consorcio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.consorcio-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

.consorcio-hero-visual,
.consorcio-card,
.consorcio-result-figure,
.consorcio-strip-card {
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.12);
  background: #ffffff;
}

.consorcio-hero-visual {
  min-height: 430px;
  display: grid;
  align-items: end;
}

.consorcio-hero-visual img,
.consorcio-card img,
.consorcio-result-figure img,
.consorcio-strip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consorcio-hero-visual img {
  object-position: center top;
}

.consorcio-gallery {
  margin-top: 8px;
  padding: 24px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #0a86f0 42%, #0568cd 100%);
}

.consorcio-gallery-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
}

.consorcio-card-tall,
.consorcio-card-wide {
  min-height: 480px;
}

.consorcio-card:nth-child(1) img {
  object-position: 18% center;
}

.consorcio-card:nth-child(2) img {
  object-position: 72% center;
}

.consorcio-card:nth-child(3) img {
  object-position: 28% center;
}

.consorcio-card:nth-child(4) img {
  object-position: 82% center;
}

.consorcio-section,
.consorcio-callout,
.consorcio-result,
.consorcio-strip,
.consorcio-bottom {
  padding-top: 72px;
}

.consorcio-section h2,
.consorcio-callout h2,
.consorcio-result h2,
.consorcio-bottom h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  margin-bottom: 16px;
}

.consorcio-section p,
.consorcio-result p,
.consorcio-bottom p {
  margin: 0;
  color: #4b5563;
  line-height: 1.8;
  font-size: 1rem;
}

.consorcio-callout {
  margin-top: 72px;
  background: #333333;
  color: #ffffff;
  padding-bottom: 72px;
}

.consorcio-callout h2,
.consorcio-callout p,
.consorcio-callout li {
  color: #f4f4f5;
}

.consorcio-list {
  margin: 22px 0 0;
  padding-left: 20px;
  line-height: 1.8;
}

.consorcio-list li + li {
  margin-top: 10px;
}

.consorcio-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.consorcio-result {
  margin-top: 72px;
  background: #333333;
  color: #ffffff;
  padding-bottom: 72px;
}

.consorcio-result-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 28px;
  align-items: center;
}

.consorcio-result p {
  color: #e5e7eb;
}

.consorcio-result-figure {
  min-height: 260px;
}

.consorcio-strip {
  padding-top: 24px;
  background: linear-gradient(180deg, #0a86f0 0%, #0568cd 100%);
}

.consorcio-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.consorcio-strip-card {
  min-height: 220px;
  border-radius: 18px;
}

.consorcio-strip-card:nth-child(1) img {
  object-position: 18% center;
}

.consorcio-strip-card:nth-child(2) img {
  object-position: 38% center;
}

.consorcio-strip-card:nth-child(3) img {
  object-position: 62% center;
}

.consorcio-strip-card:nth-child(4) img {
  object-position: 82% center;
}

.consorcio-bottom {
  padding-bottom: 48px;
}

@media (max-width: 1100px) {
  .about-section,
  .about-works-row,
  .case-study-hero-layout,
  .case-study-showcase-grid,
  .consorcio-hero-layout,
  .consorcio-result-layout,
  .consorcio-grid-two {
    grid-template-columns: 1fr;
  }

  .experience-item {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .about-works-column,
  .about-works-column-image {
    min-height: 420px;
  }

  .about-works-column {
    padding: 56px 40px;
  }

  .case-study-gallery,
  .consorcio-gallery-grid,
  .consorcio-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mosaic-phone {
    min-height: 280px;
  }

  .phone-card,
  .phone-card-showcase-left,
  .phone-card-showcase-right,
  .consorcio-card-tall,
  .consorcio-card-wide {
    min-height: 380px;
  }
}

@media (max-width: 720px) {
  .navbar {
    margin: 16px 16px 0;
    padding: 16px 18px;
    border-radius: 20px;
  }

  .nav-links {
    gap: 10px;
  }

  .about-main,
  .content-dark-background,
  .main-footer-description,
  .case-study-shell
  {
    width: min(calc(100% - 32px), var(--shell-1200));
  }

  .about-section {
    padding: 28px 0 36px;
    gap: 28px;
  }

  .about-content h1 {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
  }

  .about-description p,
  .about-works-column-content p,
  .content-dark-background p {
    font-size: 1rem;
  }

  .about-image {
    min-height: 420px;
  }

  .about-works-column-content h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .about-works-column,
  .about-works-column-image {
    min-height: 320px;
  }

  .content-dark-background {
    padding: 44px 0;
    gap: 28px;
  }

  .main-footer,
  .main-footer-description {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-footer {
    padding: 24px 16px;
  }

  .case-study-hero-copy h1,
  .consorcio-hero-copy h1 {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }

  .case-study-hero-mosaic,
  .case-study-gallery,
  .consorcio-summary,
  .consorcio-gallery-grid,
  .consorcio-strip-grid {
    grid-template-columns: 1fr;
  }

  .mosaic-phone,
  .phone-card,
  .phone-card-showcase-left,
  .phone-card-showcase-right,
  .consorcio-card-tall,
  .consorcio-card-wide,
  .consorcio-strip-card,
  .consorcio-result-figure {
    min-height: 260px;
    border-radius: 24px;
  }
}