/* ============================================
   HERO
   ============================================ */
.hero {
  padding-top: var(--nav-h);
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
}
.hero__text {
  width: 100%; padding: 5rem var(--pad) 3.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__headline {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.035em; color: var(--text);
  text-wrap: balance;
  width: 100%; max-width: 900px;
}
.hero__headline em { font-style: italic; font-weight: 400; color: var(--muted); }

/* ─── Hero carousel: large full-bleed cards, edge-to-edge ─── */

/* Wrap rises up on load, clips the infinite track */
.hero__featured-wrap {
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(60px);
  animation: riseUp 1s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
@keyframes riseUp { to { opacity: 1; transform: translateY(0); } }

/* Scrolling track — JS sets animation duration and timing */
.hero__slider-track {
  display: flex;
  gap: 1.5rem;
  padding-left: var(--pad);
  will-change: transform;
}
/* heroCarousel keyframes injected by JS with exact pixel value */

/* Each card: large, independent, own border-radius */
.hero__slide {
  flex: 0 0 auto;
  /* Desktop: large — ~75% of viewport so next card peeks */
  width: 75vw;
  max-width: 1000px;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .hero__slide { width: 82vw; }
}
@media (max-width: 600px) {
  .hero__slide {
    width: 88vw;
    aspect-ratio: 4/3;
  }
  .hero__slider-track { gap: 1rem; }
}

/* Hero bottom — two column */
.hero__bottom {
  width: 100%;
  padding: 4rem var(--pad) 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.hero__bottom-inner { display: contents; }
.hero__body-text {
  font-size: clamp(1.4rem, 2.8vw, 2.8125rem);
  font-weight: 400; line-height: 1.35;
  color: var(--text); letter-spacing: -0.02em;
  grid-column: 2;
  white-space: pre-line;
}
.hero__scroll {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400; line-height: 1.35;
  color: var(--muted); letter-spacing: -0.02em;
  grid-column: 1; grid-row: 1;
}

/* ============================================
   STATEMENT — large text block between work and testimonials
   ============================================ */
.statement {
  padding: 3rem var(--pad) 1.5rem calc(50% + 1rem);
}
.statement__text {
  font-size: clamp(1.4rem, 2.8vw, 2.8125rem);
  font-weight: 400; line-height: 1.35;
  color: var(--text); letter-spacing: -0.02em;
}

/* ============================================
   WORK — 2-COL GRID, MAX 4 ON HOMEPAGE
   ============================================ */
.work { padding: 2rem 0; }
.work__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0 var(--pad);
}
.work__list .project-item { padding: 0 0 var(--pad); }
.work__list .project-item:nth-child(odd)  { padding-right: calc(var(--pad) / 2); }
.work__list .project-item:nth-child(even) { padding-left:  calc(var(--pad) / 2); }

.work__more {
  display: flex; justify-content: center;
  padding: 2.5rem var(--pad) 1.5rem;
}

/* ============================================
   TESTIMONIALS — MANUAL SWIPE CAROUSEL
   ============================================ */
.testimonials { padding: 1.5rem 0 2rem; }
.testimonials__heading {
  font-size: clamp(1.4rem, 2.8vw, 2.8125rem);
  font-weight: 400; line-height: 1.35;
  color: var(--text); margin-bottom: 3rem;
  padding-left: calc(50% + 1rem);
  padding-right: var(--pad);
}

/* Outer wrap: clips sides so peeking cards don't cause page overflow */
.testimonials__slider-wrap { overflow: hidden; }

/* Scrollable track — free fluid scroll, no snap */
.testimonials__slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 0 var(--pad);
  align-items: flex-start;
}
.testimonials__slider::-webkit-scrollbar { display: none; }
.testimonials__slider:active { cursor: grabbing; }

/* Cards: desktop — 360px wide, min-height 480px so text never clips */
.testimonial-card {
  flex: 0 0 360px;
  width: 360px;
  min-height: 480px;
  background: var(--surface); border-radius: var(--radius);
  padding: 1.8rem; display: flex; flex-direction: column;
  gap: 1.2rem; box-sizing: border-box;
  border: none;
}
.testimonial-card__quote {
  font-size: 18px; font-weight: 400;
  line-height: 1.6; color: var(--text); flex: 1;
}
.testimonial-card__name {
  font-size: 15px; font-weight: 700;
  color: var(--text); display: block; margin-bottom: 0.15rem;
}
.testimonial-card__role { font-size: 15px; color: var(--text); }

/* Desktop: 3 cards fully visible + fourth peeking ~40px on right */
@media (min-width: 601px) {
  .testimonial-card {
    flex: 0 0 calc((100vw - (var(--pad) * 2) - (1rem * 2)) / 3 - 40px / 3);
    width: calc((100vw - (var(--pad) * 2) - (1rem * 2)) / 3 - 40px / 3);
  }
}

/* Mobile — 80vw wide, min-height 420px */
@media (max-width: 600px) {
  .testimonial-card {
    flex: 0 0 80vw;
    width: 80vw;
    min-height: 420px;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
  .hero__headline { font-size: 1.9rem; }
  .hero__bottom { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__body-text { grid-column: 1; grid-row: 1; font-size: 1.3rem; order: 1; }
  .hero__scroll   { grid-column: 1; grid-row: 2; font-size: 1rem;   order: 2; }

  .work__list { grid-template-columns: 1fr; padding: 0; }
  .work__list .project-item,
  .work__list .project-item:nth-child(odd),
  .work__list .project-item:nth-child(even) {
    padding: 0 var(--pad) var(--pad);
  }

  .testimonials__heading { font-size: 1.4rem; padding-left: var(--pad); padding-right: var(--pad); }
  .statement { padding: 2.5rem var(--pad); }
  .testimonials { padding: 1.5rem 0 2rem; }
}