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

/* Project HERO ---------------------------------------------------------- */


.project-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.project-hero-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.85);
}

.project-hero-background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.85);
}

.project-hero-overlay {
  position: relative;
  z-index: 2;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  margin-bottom: 4rem;
  align-items: flex-start;
  margin-left: 4rem!important;
  margin-right: 4rem!important;
  border-radius: 0px;

}

.project-title {
  font-size: 3rem;
  line-height: 100%;
  letter-spacing: 1px;
  font-family: 'headline', 'Times New Roman', serif;
  font-style: italic;
  text-transform: uppercase;
  margin-bottom: .5rem;
  text-decoration: none;
}

.project-meta {
  display: flex;
  gap: 2rem; /* space between Role and Timeline */
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #ccc;
  flex-wrap: wrap; /* ensures it wraps on smaller screens */
}

.project-meta .meta-item {
  flex: 1;
  min-width: 120px; /* ensures they stay somewhat balanced */
}

.meta-label {
  font-style: italic;
  color: #aaa;
  display: block;
  margin-bottom: 0.25rem;
}

.meta-value {
  color: #fff;
  font-weight: 500;
}

/* Tablet breakpoint (max 768px) */
@media (max-width: 768px) {

.project-hero-overlay {
  margin-left: 1rem!important;
  margin-right: 1rem!important;
   margin-bottom: 2rem;
  padding: 1.5rem;

}

.project-title {
  font-size: 2rem;
}

.project-meta  {
  margin: 0px;
}
.meta-item {
  padding-bottom: -10px;
  margin-bottom: 0px;
}

}

/* Project DESCRIPTION  ---------------------------------------------------------- */

.project-intro {
  min-height: 60vh;
  align-items: center;
  display: flex;
  background: transparent;
}
.project-intro-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    font-size: 25px;
    letter-spacing: 0.05em;
    color: #d1d1d1;
    line-height: 1.4;
    text-align: left;
    margin: 0;

}


/* Tablet breakpoint (max 640px) */
@media (max-width: 640px) {
.project-intro-text {
  line-height: 1.6;  
  font-size: 1.25rem;

}
}

/* MObile breakpoint (max 576px) */
@media (max-width: 575.99px) {
.project-intro-text {
  line-height: 1.6;  
  font-size: 1rem;
  padding-top: 48px;
  padding-bottom: 48px;

}
}







/* PROCESS – horizontal scroll ---------------------------------------------- */

:root{
  --process-gutter: 36px;
  --process-progress-height: 4px;
  --process-bottom-offset: clamp(1.5rem, 4vh, 3rem);
}

.process-section{
  position: relative;
  background-color: transparent;
  color: #ffffff;
  overflow: hidden;
}

.process-inner{
  position: relative;
  z-index: 1;
}

/* Desktop pinned height: make the section a full-viewport stage */
@media (min-width: 992px){
  .process-inner{
    height: 100vh;
    display: flex;
    align-items: center;
  }
}

/* Overlay title — top-left, under content */
.process-title-block{
  position: absolute;
  top: clamp(2.5rem, 4vh, 4rem);
  left: clamp(2.5rem, 6vw, 4rem);
  max-width: 80vw;
  pointer-events: none;
  z-index: 1;
}

.process-title{
  font-family: 'headline', 'Times New Roman', serif;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  font-size: clamp(4.5rem, 7vw, 8.5rem);
  color: #ffffff;
  opacity: 0.9;
}

@media (max-width: 991.98px){
  /* Remove dead space above "the process" on mobile */
  .process-section{
    padding-top: 0px; /* or 0 if you want it tight */
  }

  /* If the title itself has margin pushing it down */
  .process-title{
    margin-top: 0;
  }
}

/* Track */
.process-track{
  position: relative;
  z-index: 2; /* above title */
  display: flex;
  align-items: center;
  gap: clamp(3rem, 4vw, 5rem);
  padding-inline: var(--process-gutter);
}

/* Panels */
.process-panel{
  flex: 0 0 auto;
  color: #f5f5f5;
}

.process-panel-first{
  flex-basis: 90vw;
  max-width: 90vw;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.process-panel-first > .container-fluid{ width: 100%; }

.process-panel-first .row{
  min-height: inherit;
  display: flex;
  align-items: center;
}
/* Panel 1 image safety: prevent super-tall images from taking over the stage */
:root{
  /* Tune this if you want the first image larger/smaller on desktop */
  --process-first-image-maxH: clamp(360px, 60vh, 700px);
}

.process-panel-first .process-image{
  max-height: var(--process-first-image-maxH);
  width: 100%;
  height: auto;
  object-fit: cover; /* keeps it feeling "hero" while respecting max-height */
}


.process-panel-narrow{
  flex-basis: min(60vw, 36rem);
  max-width: min(60vw, 36rem);
}

.process-panel-variant-a .process-image{
  max-height: 520px;
  object-fit: cover;
}

.process-panel-variant-b{
  align-self: flex-start;
  margin-top: 10.5rem;
}
.process-panel-variant-b .process-image{
  max-height: 460px;
  object-fit: cover;
}

.process-panel-variant-c{
  align-self: flex-start;
  margin-top: 15.5rem;
}
.process-panel-variant-c .process-image{
  max-height: 500px;
  object-fit: cover;
}

.process-image{
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 ;
}

.process-panel .project-body-text{
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: #d4d4d4;

}

.panel-copy {
  margin-top: 12px !important;
}

/* OUTCOME PANEL (this replaces the old arrow/spacer)
   It scrolls in at the same speed as everything else because it's in the track. */
.process-panel-outcome{
  flex: 0 0 100vw;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.process-panel-outcome .process-outcome-inner{
  width: 100%;
  padding-bottom: 10px; /* aligns title bottom with progress bar */
  pointer-events: none;
}

/* Progress tracker */
.process-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--process-bottom-offset);
  height: var(--process-progress-height);
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
}

.process-progress-track{
  height: 100%;
  margin-inline: var(--process-gutter);
  background: rgba(60, 60, 60, 0.25);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.process-progress-bar{
  position: absolute;
  left: var(--process-gutter);
  right: var(--process-gutter);
  top: 0;
  height: 100%;
  background: #898989;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Mobile / tablet – vertical stack */
@media (max-width: 991.98px){
  .process-inner{
    height: auto;
    padding-top: 0px;
    padding-bottom: 48px;
  }

  .process-title-block{
    position: static;
    margin-bottom: 1.5rem;
    padding-inline: 1.5rem;
    max-width: 100%;
  }

  .process-title{
    font-size: clamp(2.4rem, 8vw, 3.2rem);
  }

  .process-track{
    flex-direction: column;
    align-items: stretch;
    padding-inline: 1.5rem;
    gap: 2.5rem;
  }

  .process-panel-first,
  .process-panel-narrow,
  .process-panel-outcome{
    flex-basis: 100%;
    max-width: 100%;
    min-height: auto;
  }

  .process-panel-variant-b,
  .process-panel-variant-c{
    margin-top: 2rem;
  }

  /* If you want the progress bar hidden on mobile */
  .process-progress{ display: none; }
}


/* Use the same inset as your overlay headline */
.process-section{
  --process-title-left: clamp(2.5rem, 6vw, 4rem);
}

/* OUTCOME panel: make the title land with the same left inset */
.process-track .process-panel-outcome{
  flex: 0 0 100vw;
  max-width: 100vw;

  display: flex;
  align-items: flex-end; /* keeps it near the bottom */
  padding-left: var(--process-title-left);
  padding-right: var(--process-title-left);

  /* bottom edge aligned to the progress bar */
  padding-bottom: 0px;
}

/* Optional: keep the outcome title from affecting layout around it */
.process-track .process-panel-outcome .process-title{
  margin: 0;
}


/* Mobile: outcome becomes a normal stacked heading (like process title) */
@media (max-width: 991.98px){
  .process-section .process-outcome-block{
    position: static;
    opacity: 1;
    transform: translateX(35vw);
    pointer-events: auto;

    margin-top: 1.5rem;
    padding-inline: 1.5rem;
    max-width: 100%;
  }

  .process-section .process-outcome-block .process-title{
    font-size: clamp(2.4rem, 8vw, 3.2rem);
    line-height: 0.95;
  }

  .process-panel-variant-a, .process-panel-variant-b, .process-panel-variant-c {
    margin-top: 0px;
    padding: 0PX;
  }
}




/* Project gallery  ---------------------------------------------------------- */

.project-gallery {
  background: transparent; /* you can apply gradient later */
  padding: 32px;
  padding-top: 0px !important;
}

.gallery-tile {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0px;
}


.tall-aspect {  
    aspect-ratio: 4 / 3; /* Ensures square shape */
}

.wide-aspect {  
  aspect-ratio: 16 / 9; /* Ensures square shape */
}

.skinny-aspect {  
  aspect-ratio: 5 / 1; /* Ensures square shape */
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.gallery-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.gallery-tile img,
.gallery-tile video {
  will-change: transform, opacity;
  transform: translateZ(0);
}



/* Tablet breakpoint (max 768px) */
@media (max-width: 768px) {
  .project-gallery {
    padding: 0px 0px 24px 0px;
  }
}


/* ----------------------------------------------------------
   MOBILE-ONLY "THE OUTCOME" TITLE (Gallery version)
   - Add an extra <h2 class="process-title process-title--outcome-mobile">the outcome</h2>
     inside the Project Gallery container in your HTML.
   - Hide the in-track Outcome panel/title on mobile (since horizontal scroll is disabled).
----------------------------------------------------------- */

.process-title--outcome-mobile{
  display: none; /* desktop/tablet: hidden */
}

/* Mobile: show gallery title + hide the horizontal-track outcome instance */
@media (max-width: 991.98px){
  .process-title--outcome-mobile{
    display: block;
    margin: 0 0 1.5rem 0; /* space before gallery tiles */
    opacity: 0.9;
    padding-left: 24px;
  }

  /* Hide the in-track outcome panel + any outcome-only blocks inside it */
  .process-panel-outcome,
  .process-outcome-block{
    display: none !important;
  }
}




/* Project Question ---------------------------------------------------------- */
.project-question-title {
  font-family: 'headline';
  font-style: italic;
  text-transform: uppercase;
  font-size: 5.5rem;
  color: rgb(255, 255, 255);
  max-width: 80vw;
  padding: 0px;

}

/* Tablet breakpoint (max 768px) */
@media (max-width: 768px) {
    .project-question-title {
 font-size: 2rem;
 
}
}




.project-question {
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
}

/* Mobile breakpoint (max 768px) */
@media (max-width: 768px) {
  .project-question {
    height: 15vh;
  }
}


.project-contact-icon {
  font-size: 4rem !important;
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
  z-index: 1;
  padding: 30px;
}

.project-contact {
  padding: 0 20px;
  min-height: 100px;
}



.project-question a:hover {
  transform: scale(1.1);
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  transition: all 0.9s ease;
}

/* ----------------------------------------------------------
   SKINNY PROJECT PAGES (NO PROCESS / NO HORIZONTAL SCROLL)
   Use this markup right above .project-gallery:
     <div class="project-outcome-header">
       <h2 class="process-title process-title--outcome-static">the outcome</h2>
     </div>
----------------------------------------------------------- */

.project-outcome-header{
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.process-title--outcome-static{
  display: block;               /* visible on all breakpoints */
  margin: 0 0 1.75rem 0;        /* space before gallery tiles */
  opacity: 0.9;
  padding-left: clamp(24px, 3vw, 4rem);
}

/* Mobile: match existing gallery padding rhythm */
@media (max-width: 991.98px){
  .project-outcome-header{
    padding-top: 2rem;
  }
  .process-title--outcome-static{
    padding-left: 24px;
    margin-bottom: 1.5rem;
  }
}


#related-work {
  padding-bottom: 64px;
}


@media (max-width: 767.99px){
  #related-work {
    padding-bottom: 0px;
  }
}


/* ----------------------------------------------------------
   PROJECT STATS (optional section after gallery)
   ---------------------------------------------------------- */

/* Section padding matches your gallery rhythm:
   - Desktop/Tablet: 32px side inset
   - Mobile: 24px side inset */
.project-stats{
  background: transparent;
  position: relative;
  padding: 0 32px 64px;
}

/* Bottom divider: spans the section width (so it naturally respects the padding above) */
.project-stats::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: 64px;
  background: rgba(255, 255, 255, 0.15);
}

.project-stats__title{
  margin: 0 0 2.5rem 0;
  opacity: 0.9;
}

/* Each stat is a small vertical stack */
.project-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The "big thing" row (number OR icon) */
.stat-number{
  font-family: 'headline', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  opacity: 0.95;
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);

  /* Key: lock the height so labels align even when swapping in an image */
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: 1em;          /* consistent "number row" height */
}

/* +, %, M, etc. — baseline/bottom aligned */
.stat-suffix{
  font-size: 0.45em;
  line-height: 1;
  margin-left: 0.15em;
  opacity: 0.85;
  transform: translateY(-0.06em);
}

/* Image / icon option: match the same "number row" height */
.stat-media img{
  height: 1em;
  width: auto;
  display: block;       /* prevents inline-baseline weirdness */
  transform: none;      /* don't nudge; let flex alignment do the work */
}

.stat-label{
  margin-top: 0.5rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}

/* Tablet: keep the 32px inset (matches your request) */
@media (max-width: 768px){
  .project-stats{
    padding: 0 32px 56px;
  }
  .project-stats__title{
    margin-bottom: 2rem;
  }
}

/* Mobile: 24px inset */
@media (max-width: 575.99px){
  .project-stats{
    padding: 0 24px 56px;
  }
  .project-stats__title{
    margin-bottom: 1.75rem;
  }
  .stat-label{
    font-size: 0.8rem;
  }
}