/* ==========================================================================
   WORK SHOWCASE — three independent parallax columns
   ========================================================================== */

.work {
  position: relative;
  background: var(--c-offwhite);
  height: clamp(680px, 95vw, 1180px);
  overflow: hidden;
}

.work::before,
.work::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
}

.work::before {
  top: 0;
  background: linear-gradient(to bottom, var(--c-offwhite), rgba(242,242,242,0));
}

.work::after {
  bottom: 0;
  background: linear-gradient(to top, var(--c-offwhite), rgba(242,242,242,0));
}

.work__columns {
  position: relative;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.work__column {
  position: relative;
  width: 33.333%;
  max-width: 390px;
  overflow: hidden;
}

.work__list {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 15px 30px;
  will-change: transform;
}

.work__card {
  width: 100%;
  background: var(--c-white);
  border-radius: var(--radius-card);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.work__card-inner {
  flex: 1;
  background: var(--c-offwhite);
  border-radius: var(--radius-card-inner);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.work__card-image {
  flex: 1;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.work__card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (max-width: 860px) {
  .work { display: none; }
}

/* Dedicated mobile gallery — a horizontal swipeable row rather than the
   desktop parallax columns, which don't translate well to a single
   narrow column or to touch interaction. */
.work-mobile {
  display: none;
}

@media (max-width: 860px) {
  .work-mobile {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 24px var(--gutter) 32px;
  }

  .work-mobile__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .work-mobile__card {
    width: 100%;
    background: var(--c-white);
    border-radius: var(--radius-card);
    padding: 6px;
  }

  .work-mobile__card-inner {
    width: 100%;
    background: var(--c-offwhite);
    border-radius: var(--radius-card-inner);
    padding: 6px;
  }

  .work-mobile__card-image {
    width: 100%;
    border-radius: var(--radius-image);
    overflow: hidden;
  }

  .work-mobile__card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

/* Cursor-follow tooltip for the not-yet-clickable cards */
.work-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 8px 18px;
  border-radius: var(--radius-circle);
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 20px rgba(12,12,12,0.18);
  transition: opacity 0.15s var(--ease-soft);
  transform: translate(-50%, -150%);
}

.work-tooltip.is-visible {
  opacity: 1;
}

/* Decorative badge marking the transition into testimonials.
   Sits as its own element between the two sections (not nested inside
   .work, which has overflow:hidden and was clipping it). */
.work-badge {
  position: relative;
  z-index: 5;
  height: 0;
}

.work-badge img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .work-badge {
    margin-top: 16px;
  }
  .work-badge img {
    width: 150px;
    height: 150px;
    transform: translate(-50%, -58%);
  }
}

/* ==========================================================================
   TESTIMONIALS — auto-rotating, swipeable carousel
   ========================================================================== */

.testimonials {
  position: relative;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--radius-panel);
  padding: clamp(60px, 9vw, 120px) 0 clamp(70px, 9vw, 110px);
  overflow: hidden;
}

.testimonials__track {
  position: relative;
  min-height: clamp(220px, 28vw, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

@media (max-width: 560px) {
  .testimonials {
    padding-top: 80px;
  }
  .testimonials__track {
    min-height: 0;
    padding: 0 16px 24px;
  }
}

.testimonial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(744px, 84vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  opacity: 0.1;
  transform: translate(-50%, -50%);
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease-soft);
  pointer-events: none;
}

.testimonial.is-active {
  opacity: 1;
  pointer-events: auto;
}

.testimonial__quote {
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.9px;
}

.testimonial__quote .is-light {
  font-weight: 300;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 11px;
}

.testimonial__author img {
  width: 57px;
  height: 57px;
  border-radius: 50%;
}

.testimonial__author-name {
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: -0.6px;
}

.testimonials__nav {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.testimonials__dot {
  width: 59px;
  height: 5px;
  background: var(--c-white);
  opacity: 0.2;
  border-radius: 3px;
  transition: opacity 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.testimonials__dot:hover { opacity: 0.45; }

.testimonials__dot.is-active {
  opacity: 1;
  background: var(--c-neon);
}

@media (max-width: 560px) {
  .testimonials__dot { width: 32px; }
  .testimonials__track { min-height: 0; }
  .testimonial { width: 88vw; }
}

/* ==========================================================================
   STACK
   ========================================================================== */

.stack {
  position: relative;
  padding: clamp(60px, 9vw, 110px) var(--gutter) clamp(40px, 6vw, 70px);
  text-align: center;
}

.stack__heading {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 50px);
  letter-spacing: -1.5px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.stack__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.stack__item {
  position: relative;
  flex-shrink: 0;
  width: 89px;
  height: 89px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: var(--c-white);
  box-shadow: 0px 0.597144px 0.597144px -0.9375px rgba(0, 0, 0, 0.07), 0px 1.81088px 1.81088px -1.875px rgba(0, 0, 0, 0.07), 0px 4.78699px 4.78699px -2.8125px rgba(0, 0, 0, 0.06), 0px 15px 15px -3.75px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}

.stack__item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.stack__item:hover {
  transform: scale(1.22);
  z-index: 2;
  box-shadow: 0px 0.731334px 0.731334px -1.14817px rgba(195, 255, 0, 0.07), 0px 2.21782px 2.21782px -2.29635px rgba(195, 255, 0, 0.07), 0px 5.86272px 5.86272px -3.44452px rgba(195, 255, 0, 0.06), 0px 18.3708px 18.3708px -4.5927px rgba(195, 255, 0, 0.03);
}

/* Cursor-follow label, white pill matching the design reference */
.stack-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 8px 18px;
  border-radius: var(--radius-circle);
  background: var(--c-white);
  color: var(--c-black);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 8px 20px rgba(12,12,12,0.18);
  transition: opacity 0.15s var(--ease-soft);
  transform: translate(-50%, -150%);
}

.stack-tooltip.is-visible {
  opacity: 1;
}

@media (max-width: 860px) {
  .stack__row {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .stack__row::-webkit-scrollbar { display: none; }
  .stack__item { width: 72px; height: 72px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  background: linear-gradient(to bottom, var(--c-black), #141414);
  color: var(--c-white);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  padding: clamp(60px, 10vw, 120px) var(--gutter) clamp(28px, 4vw, 44px);
  overflow: hidden;
  text-align: center;
}

.footer__mark {
  position: relative;
  z-index: 2;
  width: min(56vw, 565px);
  margin: 0 auto;
}

.footer__mark img {
  width: 100%;
  height: auto;
}

.footer__headline {
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -1.6px;
  line-height: 1.1;
  max-width: 1300px;
  white-space: nowrap;
  margin: -60px auto 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .footer__headline {
    white-space: normal;
    font-size: clamp(24px, 6.5vw, 32px);
    margin-top: -20px;
  }
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 32px 0 112px;
}

.footer__social a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  transition: color 0.2s var(--ease-soft);
}

.footer__social a:hover {
  color: var(--c-neon);
}

.footer__social svg {
  width: 48px;
  height: 48px;
}

/* Ticker — bleeds full width past the footer's own gutter padding.
   The graphic sits outside the clipped mask so it can overflow the bar
   height (it's deliberately taller than the strip), and only the
   scrolling text track is clipped. */
.footer__ticker {
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin-left: calc(-1 * var(--gutter));
  height: 48px;
  margin-top: 8px;
}

.footer__ticker-mask {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-neon);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.footer__ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.footer__ticker-track span {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--c-black);
}

.footer__ticker-track .accent {
  font-weight: 800;
  font-style: italic;
}

.footer__ticker-track .regular {
  font-weight: 600;
}

.footer__ticker-graphic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 84px;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

/* Fade that masks the scrolling text as it nears the graphic, blending
   into the strip's own green rather than creating a dark patch */
.footer__ticker-fade {
  position: absolute;
  top: 0;
  height: 100%;
  width: 240px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at center, var(--c-neon) 0%, var(--c-neon) 75%, transparent 100%);
}

@media (max-width: 720px) {
  .footer__ticker-graphic { height: 56px; }
  .footer__ticker-fade { width: 180px; }
}