/* ============================================================
   Homepage — kahchunk_home_v2 (Figma 1645:1860)
   ============================================================ */

.page { position: relative; display: flex; flex-direction: column; align-items: center; }

/* ---------- Nav ---------- */
.nav {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px var(--pad-x) 12px;
  position: relative;
  z-index: 5;
}
.nav__logo { display: block; }
.nav__logo svg,
.nav__logo img { height: 91px; width: auto; }

.status-pill {
  position: absolute;
  top: 41px;
  right: var(--pad-x);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-100);
  color: var(--blue-200);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.44px;
  z-index: 6;
}
.status-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2bbf6a;
  box-shadow: 0 0 0 0 rgba(43, 191, 106, 0.55);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43,191,106,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(43,191,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,191,106,0); }
}

/* ---------- Hero ---------- */
.hero {
  width: 100%;
  max-width: var(--hero-max);
  min-height: min(827px, 88vh);
  padding: 40px var(--pad-x) 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.hero__copy { max-width: 932px; display: flex; flex-direction: column; gap: 22px; }
.hero__eyebrow { color: var(--orange-300); }
.hero__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1;
  color: var(--orange-100);
  max-width: 14ch;
}
.hero__sub {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--blue-100);
  opacity: 0.78;
  max-width: 560px;
}
/* .hero__cta is positioned absolutely at the pivot — see motion.css */
.hero__trust {
  align-self: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.hero__trust-label { color: var(--blue-100); }

/* trust marquee — comment[11]: logos move left to right, repeating */
.marquee {
  width: min(100%, 980px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-rtl 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Two identical copies, each with a trailing gap, so translating exactly
   one copy (-50%) tiles seamlessly with even spacing at the wrap. */
.marquee__group { display: flex; flex: 0 0 auto; padding-right: 80px; }
.marquee__group img { height: 23px; width: auto; opacity: 0.9; }
/* left-to-right (rightward): start shifted one copy, slide back to 0 */
@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ---------- Projects ---------- */
.projects {
  width: 100%;
  max-width: var(--site-max);
  padding: 80px var(--pad-x) 0;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.project {
  display: flex;
  gap: 80px;
  align-items: center;
}
.project__body {
  flex: 0 0 531px;
  max-width: 531px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.project__head { display: flex; flex-direction: column; gap: 12px; }
.project__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  color: var(--orange-100);
  font-size: clamp(40px, 4.4vw, 68px);
}
.project--sm .project__title { font-size: clamp(38px, 4vw, 60px); }
.project__desc {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--orange-100);
}
.project--sm .project__desc { color: var(--orange-100); }
.project__tags { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.project__media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 922 / 549;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px 3px rgba(0, 0, 0, 0.25);
  background: var(--green-100);
  position: relative;
}
.project__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.project:hover .project__media img { transform: scale(1.03); }
.project__media--white { background: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  width: 100%;
  max-width: var(--site-max);
  margin-top: 120px;
  padding: 56px var(--pad-x) 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.site-footer__top { display: flex; gap: 32px; align-items: flex-start; }
.site-footer__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.site-footer__lead { gap: 18px; }
.site-footer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4vw, 52px);
  letter-spacing: -1.3px;
  color: var(--orange-100);
}
.site-footer__blurb {
  margin: 0;
  font-family: var(--font-museo);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  color: var(--orange-100);
  opacity: 0.7;
  max-width: 36ch;
}
.site-footer__actions { display: flex; gap: 10px; padding-top: 4px; }
.site-footer__col-head {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--orange-200);
  margin-bottom: 12px;
}
.site-footer__list { display: flex; flex-direction: column; gap: 4px; }
.site-footer__list a,
.site-footer__list span {
  font-size: 13px;
  line-height: 1.8;
  color: var(--orange-100);
  opacity: 0.78;
}
.site-footer__list a:hover { opacity: 1; text-decoration: underline; }
.site-footer__rule { height: 0.5px; background: var(--orange-100); opacity: 0.18; }
.site-footer__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--orange-100);
}
.site-footer__meta span { opacity: 0.55; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .project { flex-direction: column; gap: 28px; }
  .project__body { flex: 1 1 auto; max-width: 100%; }
  .project__media { width: 100%; }
  .site-footer__top { flex-direction: column; gap: 28px; }
  .status-pill { position: static; margin: 0 auto; }
  .nav { flex-wrap: wrap; gap: 16px; }
}