/* =================================
   PROJECT PAGES
================================= */

.project-layout{
  display:grid;
  grid-template-columns: 1.1fr 360px;
  gap:4rem;
  align-items:start;
    overflow: visible;
    
}

@media (max-width: 1000px){
  .project-layout{
    grid-template-columns:1fr;
  }
}

 
.container {
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
}

.project-page{

  padding:2rem 0 6rem;
}


.project-content {
  padding: 2rem 0;
}

.project-content p,
.project-content ul,
.project-content h2,
.project-content h3 {
  max-width: 68ch;
}

.project-content h2{
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}


.project-content > p:first-child {
  margin-top: 0;
}

.project-sidebar{
  position: sticky;
  top: 90px;
  align-self: start;
}

@media (max-width: 1100px){

  .project-sidebar{
    position:static;
  }
}

@media (hover: none) {
  .project-section:hover,
  .hero-device img:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* =================================
   PROJECT NAVIGATION
================================= */
.project-navigation {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-300);
  display: flex;
  justify-content: space-between;
  
}


.project-section {
  margin-bottom: 3.5rem;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.project-section:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.project-section h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.project-section p {
  margin-bottom: 1.25rem;
}

.project-section ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.project-section li {
  margin-bottom: .75rem;
}

.highlight-quote{
  font-size:2rem;
  line-height:1.3;
  font-weight:700;
  color:#004d1f;
  padding:3rem;
  border-left:6px solid #008a38;
  background:#fff;
  border-radius:24px;
  margin:5rem 0;
}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.active{
  opacity:1;
  transform:none;
}


/* =================================
   CASE STUDY HERO
================================= */

.case-study-hero{
  position: relative;
 min-height: min(760px, 90vh);
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  padding:
    7rem
    5vw
    5rem;
}

/* =========================
   CONTENT
========================= */

.hero-copy{
  position:relative;
  z-index:20;
  max-width: 620px;
}


.eyebrow{
  display:inline-block;
  margin-bottom:1.5rem;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.08em;
  color: var(--green-700);
  text-transform:uppercase;
}

.hero-copy h1{
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: -0.05em;
  max-width: 10ch;
  margin:0 0 1rem;
  color:#081326;
}

.hero-intro{
  font-size:1.35rem;
  line-height:1.6;
  color:#3f4754;
  max-width: 32ch;
  margin-bottom:1rem;
}

 
.impact-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:24px;
  padding:2rem;
  box-shadow:var(--shadow-sm);
}

 
@media (min-width: 1200px) {
  .case-study-hero {
    gap: 2rem;
  }
}
/* =========================
   DEVICE IMAGE
========================= */

.hero-bg {
  z-index: 0;
}
 
 
.hero-copy,
.hero-device {
  position: relative;
}

.hero-device{
  position:relative;
  z-index:2;
  display:flex;
  justify-content: center;
  align-items: center;
  place-content:center;
}

.hero-device img{
 
 width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: var(--shadow-sm);
   transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.hero-device img:hover{
  transform:
    perspective(1600px)
    rotateY(-6deg)
    rotateX(1deg)
    translateY(-6px);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px){

  .case-study-hero{
    grid-template-columns:1fr;
    gap:4rem;
    padding-top:5rem;
    min-height:auto;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero-copy h1{
    max-width:14ch;
  }

  .hero-device img{
    max-width:100%;
    transform:none;
  }
}

@media (max-width: 768px){

  .case-study-hero{
    padding:
      4rem
      1.5rem
      3rem;
  }

  .hero-intro{
    font-size:1.1rem;
  }
 
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .project-section,
  .hero-device img {
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}