.project {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
/* =====================================
   PROJECT HERO
===================================== */

.project-hero {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding: 200px 24px 0;
  box-sizing: border-box;
}

/* Metadata row */

.project-hero__header {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
 
}

.project-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.project-hero__date {
  font: var(--type-desktop-paragraph-small-regular);
  color: var(--color-grey-700);
  white-space: nowrap;
}

.project-hero__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Tags */

.project-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;

  font: var(--type-desktop-caption-regular);
  color: var(--color-grey-900);
  white-space: nowrap;
}

.project-tag--case-study {
  background: var(--color-green-100);
}

.project-tag--ui {
  background: var(--color-blue-100);
}

.project-tag__dot {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

/* Title and subtitle */

.project-hero__intro {
  text-align: center;
  margin-bottom: 52px;
}

.project-hero__title {
  margin: 0;
  font: var(--type-desktop-h3-extra-bold);
  color: var(--color-dark-blue-900);
  letter-spacing: -0.04em;
}

.project-hero__subtitle {
  margin: 4px 0 0;
  font: var(--type-desktop-paragraph-large-regular);
  color: var(--color-grey-900);
}

/* Hero image */

.project-hero__visual {
  width: 100%;
  overflow: hidden;
}

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



/* =====================================
   PROJECT DETAILS
===================================== */

.project-details {
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 0 auto 0;
  padding: 32px 48px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;

  background: var(--color-foundation-white, #ffffff);
  border: 1px solid var(--color-blue-100, #dbe3ff);
  border-radius: 16px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

/* Individual columns */

.project-details__item {
  min-width: 0;
}

.project-details__item h3 {
  margin: 0 0 8px;

  font: var(--type-desktop-paragraph-large-bold);
  color: var(--color-grey-900);
}

.project-details__item p,
.project-details__item ul {
  margin: 0;

  font: var(--type-desktop-paragraph-medium-light);
  color: var(--color-grey-800);
  line-height: 1.25;
}

.project-details__item ul {
  padding-left: 20px;
}

.project-details__item li {
  padding-left: 0;
}

/* =====================================
   PROJECT STORY
===================================== */

.project-story {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 52px;
  align-items: end;
  box-sizing: border-box;
}

/* Text content */

.project-story__content {
  min-width: 0;
}

.project-story__title {
  margin: 0 0 24px;

  font: var(--type-desktop-h4-regular);
  color: var(--color-dark-blue-900);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.project-story__description {
  margin: 0;

  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  text-align: justify;
  
  
}

/* Image */

.project-story__visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.project-story__image {
  width: 100%;
  max-width: 366px;
  height: 362px;
  object-fit: cover;
  justify-self: end;
  align-self: end;
}


/* =====================================
   PROJECT CONTRIBUTIONS
===================================== */

.project-contributions {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}

.project-contributions__title {
  font: var(--type-desktop-h4-regular);
  color: var(--color-grey-900);
  margin: 0 0 26px;
}

.project-contributions__list {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
}





/* =====================================
   PROJECT CONNECTING
===================================== */

.project-connecting {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}

.project-connecting__title {
 font: var(--type-desktop-h4-regular);
  color: var(--color-grey-900);
  margin: 0 0 16px;
}

/* Image wrapper */

.project-connecting__wrapper {
  width: 100%;
  padding: 8px;
  background: var(--color-blue-100);
  box-sizing: border-box;
  margin-top: 28px;
}

.project-connecting__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-connecting__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

/* Caption */

.project-connecting__caption {
 height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  font: var(--type-desktop-paragraph-medium-bold);
  text-align: center;
  margin: 0;
}

/* Text content */

.project-connecting__content h3 {
  font: var(--type-desktop-paragraph-large-bold);
  color: var(--color-grey-900);
  margin-top: 36px;
}

.project-connecting__content p {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  margin: 0 0 28px;
  text-align: justify;
}

/* =====================================
    PROJECT IMPACT
===================================== */

/* Impact section */

.project-impact {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}

.project-impact__title {
  font: var(--type-desktop-h4-regular);
  color: var(--color-grey-900);
  text-align: left;
  margin: 0 0 24px;
}

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

.project-impact__item h3 {
  font: var(--type-desktop-h1-medium);
  color: var(--color-grey-900);
  text-align: left;
  margin: 0 0 12px;
}

.project-impact__item p {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  text-align: justify;
  margin: 0;
}

/* Final Magic */

.project-final-magic {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}

.project-final-magic__title {
  font: var(--type-desktop-h4-regular);
  color: var(--color-grey-900);
  text-align: left;
  margin: 0 0 24px;
}

.project-final-magic__wrapper {
  width: 100%;
  padding: 12px;
  background: #d5ddff;
  box-sizing: border-box;
}

.project-final-magic__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* The Payoff */

.project-payoff {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}

.project-payoff__title {
  font: var(--type-desktop-h4-regular);
  color: var(--color-grey-900);
  margin: 0 0 20px;
}

.project-payoff__content p {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  text-align: justify;
  margin: 0 0 28px;
}

.project-payoff__content p:last-child {
  margin-bottom: 0;
}

/* Job hunt automation case study visuals */
.project-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--color-dark-blue-900);
  background:
    radial-gradient(ellipse at 78% 22%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(135deg, var(--color-blue-100), #eef1ff 52%, var(--color-green-100));
  border: 1px solid var(--color-blue-100);
}

.project-placeholder::before,
.project-placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(34, 58, 120, .12);
  border-radius: 24px;
  transform: rotate(-8deg);
}

.project-placeholder::before { width: 60%; height: 74%; right: -12%; top: 18%; }
.project-placeholder::after { width: 46%; height: 52%; left: -12%; bottom: -18%; }

.project-placeholder--hero { min-height: 390px; }
.project-placeholder--portrait { min-height: 340px; aspect-ratio: 1 / 1; }
.project-placeholder--wide { width: 100%; min-height: 250px; margin-top: 28px; padding: 32px; }

.placeholder-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.placeholder-kicker {
  font: var(--type-desktop-caption-regular);
  letter-spacing: .12em;
  color: var(--color-grey-700);
}

.placeholder-content strong {
  font: var(--type-desktop-h4-regular);
  line-height: 1.15;
}

.placeholder-content > span:last-child {
  font: var(--type-desktop-paragraph-small-regular);
  color: var(--color-grey-700);
}

.project-placeholder--hero .placeholder-content strong { font: var(--type-desktop-h3-extra-bold); }
.project-story--stacked { grid-template-columns: 1fr; align-items: start; }
.project-impact__note { margin: 28px 0 0; font: var(--type-desktop-paragraph-small-regular); color: var(--color-grey-700); }

.placeholder-flow {
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.placeholder-flow > div {
  min-height: 126px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(34, 58, 120, .14);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(24, 41, 83, .06);
}

.placeholder-flow b { font: var(--type-desktop-caption-regular); color: var(--color-grey-700); }
.placeholder-flow strong { font: var(--type-desktop-paragraph-medium-bold); }
.placeholder-flow span { font: var(--type-desktop-caption-regular); color: var(--color-grey-700); }
.placeholder-flow i { font-style: normal; color: var(--color-dark-blue-900); font-size: 22px; }

.scanx-image {
    width: 100%;
    padding: 8px;
    background: var( --color-foundation-white);
    box-sizing: border-box;
    margin-top: 28px;
}


.content-block {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
}

.section-block {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
}

.section-block__title{
  font: var(--type-desktop-h4-regular);
    color: var(--color-grey-900);
    margin: 0 0 26px;
}

.section-block__caption {
 height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  font: var(--type-desktop-paragraph-medium-bold);
  text-align: center;
  margin: 0;
}

.section-block__description {
  margin: 0;

  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  text-align: justify;
  
  
}

.section-block__content {
  font: var(--type-desktop-paragraph-medium-regular);
  color: var(--color-grey-900);
  text-align: justify;
  margin: 0;
}


/* =========================================
   APP SCREENS
========================================= */

.app-screens {
   width: 820px;
  max-width: 100%;
  margin: 120px auto;
}

.app-screens__grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  column-gap: 40px;
  row-gap: 60px;

  align-items: start;
}

.app-screen {
  width: 100%;
}

.app-screen img {
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
}



/* =====================================
   TABLET
===================================== */

@media (max-width: 768px) {
  .project-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    
  }

  .project-story {
    width: calc(100% - 48px);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 44%);
    gap: 24px;
  }

  .project-story__image {
    width: 100%;
    height: auto;
    aspect-ratio: 366 / 362;
  }

  .placeholder-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .placeholder-flow i { display: none; }

    .project-contributions {
    width: calc(100% - 48px);
  }

   .project-connecting {
    width: calc(100% - 48px);
  }

  .project-final-magic {
    width: calc(100% - 48px);
  }
  
   .project-payoff {
    width: calc(100% - 48px);
  }
}

/* =====================================
   Mobile
===================================== */

@media (max-width: 600px) {
 .project-hero {
    padding: 180px 20px 0;
  }

  .project-hero__header {
  margin-bottom: 40px;
}

  .project-hero__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }

  .project-hero__tags {
    gap: 8px;
  }

  .project-hero__intro {
    margin-bottom: 32px;
    text-align: left;
  }

  .project-hero__title {
    letter-spacing: -0.03em;
    text-align: left;
  }


 
 /* =====================================
   PROJECT DETAILS
===================================== */
 
  .project-details {
    width: calc(100% - 40px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 28px;
    padding: 24px;
   
  }

/* =====================================
   PROJECT STORY
===================================== */

    .project-story {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 24px;
  }


  .project-story__description {
    
    text-align: left;
  }

  .project-story__visual {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

   .project-story__image {
    max-width: 100%;
    height: auto;
    aspect-ratio: 366 / 362;
  }

  /* =====================================
   PROJECT CONTRIBUTIONS
===================================== */


    .project-contributions {
    width: calc(100% - 40px);
  }

  .project-contributions__title {
    font-size: 24px;
    line-height: 32px;
  }


    /* =====================================
   PROJECT CONNECTING
===================================== */



   .project-connecting {
    width: calc(100% - 40px);
  }

  .project-connecting__title {
    font-size: 24px;
    line-height: 32px;
  }

  .project-connecting__wrapper {
    padding: 6px;
  }

  .project-connecting__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-connecting__caption {
    height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  }


  .project-impact {
    width: calc(100% - 40px);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .project-impact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .project-impact__item {
    min-width: 0;
  }

  .project-impact__item p {
    text-align: left;
    overflow-wrap: break-word;
  }


   .project-final-magic {
    width: calc(100% - 40px);
  }

  .project-final-magic__wrapper {
    padding: 6px;
  }

  .project-payoff {
    width: calc(100% - 40px);
  }

  .project-payoff__content p {
    text-align: left;
  }

}

/* Scroll to Top Button */

.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-dark-blue-900);
  color: #ffffff;

  border: none;
  border-radius: 50%;

  font-size: 24px;
  cursor: pointer;
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);

  transition: opacity 0.3s ease,
              transform 0.3s ease,
              visibility 0.3s ease;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
}

/* Mobile */
@media (max-width: 600px) {
  .scroll-to-top {
    width: 42px;
    height: 42px;
    right: 20px;
    bottom: 20px;
    font-size: 20px;
  }


   /* =====================================
   section-block
===================================== */



   .section-block {
    width: calc(100% - 40px);
  }

  .section-block__title {
    font-size: 24px;
    line-height: 32px;
  }

  .section-block__wrapper {
    padding: 6px;
  }

  .section-block__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .section-block__caption {
    height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  }

  .section-block__content {
    text-align: left;
  }

   .app-screens {
    width: calc(100% - 40px);
  }

  .app-screens__grid {
    grid-template-columns: 1fr;

    gap: 32px;

    width: 100%;
  }

  .app-screen {
    width: 100%;
  }

  .app-screen img {
    width: 100%;
  }

  .project-placeholder--hero { min-height: 250px; }
  .project-placeholder--portrait { min-height: 280px; }
  .project-placeholder--wide { min-height: 220px; padding: 18px; }
  .placeholder-flow { grid-template-columns: 1fr; }
  .placeholder-flow > div { min-height: 0; }
  .placeholder-flow i { text-align: center; transform: rotate(90deg); }
  .project-impact__note { text-align: left; }
  .project-connecting__content p,
  .project-impact__item p,
  .section-block__description { text-align: left; }

}