.landing-v2-page {
  --landing-v2-gutter: 60px;
}

.landing-v2-projects {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: calc(100% - (var(--landing-v2-gutter) * 2));
  max-width: 1608px;
  margin: 109px auto 0;
  gap: 24px;
}

.landing-v2-column {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 48px;
}

.landing-v2-project {
  --project-overlay-opacity: 0;
  --info-name-width: 250px;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.landing-v2-project[hidden] {
  display: none;
}

.landing-v2-project--smartrack {
  --project-overlay-opacity: .08;
  --info-name-width: 343px;
}

.landing-v2-project--autoquote {
  --project-overlay-opacity: .15;
  --info-name-width: 251px;
}

.landing-v2-project--soulspace {
  --project-overlay-opacity: .1;
  --info-name-width: 180px;
}

.landing-v2-project--memoar {
  --project-overlay-opacity: .15;
  --info-name-width: 327px;
}

.landing-v2-project--thebackyard {
  --info-name-width: 301px;
}

.landing-v2-project--sectionstar {
  --info-name-width: 268px;
}

.landing-v2-project--hobbycase {
  --info-name-width: 226px;
}

.landing-v2-project--hom {
  --info-name-width: 318px;
}

.landing-v2-project--ziipdot {
  --info-name-width: 285px;
}

.landing-v2-visual {
  --project-parallax-x: 0px;
  --project-parallax-y: 0px;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 796 / 567;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* Continuous/squircle corner geometry matching Figma's 60% smoothing. */
  corner-shape: superellipse(2);
}

.landing-v2-project--left .landing-v2-visual {
  border-radius: 0 120px 0 0;
}

.landing-v2-project--right .landing-v2-visual {
  border-radius: 120px 0 0;
}

.landing-v2-visual--autoquote {
  aspect-ratio: 796 / 637.2;
}

.landing-v2-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.landing-v2-visual--full {
  aspect-ratio: 796 / 569.86;
  background: #fffcf5;
}

.landing-v2-background,
.landing-v2-hero {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.landing-v2-background {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-v2-hero {
  z-index: 2;
  left: 50%;
  top: 50%;
  object-fit: contain;
  transform: translate3d(calc(-50% + var(--project-parallax-x)), calc(-50% + var(--project-parallax-y)), 0);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.landing-v2-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background: #fff;
  content: "";
  pointer-events: none;
  transition: opacity 220ms ease;
}

.landing-v2-visual:hover::after,
.landing-v2-visual:focus-visible::after {
  opacity: var(--project-overlay-opacity);
}

.landing-v2-visual--soulspace .landing-v2-hero {
  width: 29.02%;
  height: 83.88%;
}

.landing-v2-visual--memoar .landing-v2-hero {
  width: 29.02%;
  height: 84.83%;
}

.landing-v2-hero--cover {
  width: 107.25%;
  height: 106.03%;
  object-fit: cover;
}

.landing-v2-project--sectionstar .landing-v2-hero--cover {
  width: 106.39%;
  height: 106.29%;
}

.landing-v2-project--hobbycase .landing-v2-hero--cover {
  width: 105%;
  height: 109.07%;
}

.landing-v2-project--hom .landing-v2-hero--cover {
  width: 105.53%;
  height: 106.62%;
}

.landing-v2-project--ziipdot .landing-v2-hero--cover {
  width: 107.53%;
  height: 105.55%;
}

.landing-v2-visual:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

.landing-v2-info {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 24px;
}

.landing-v2-info__name {
  display: flex;
  flex: 0 1 var(--info-name-width);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.landing-v2-project--autoquote .landing-v2-info__name,
.landing-v2-project--memoar .landing-v2-info__name {
  gap: 6px;
}

.landing-v2-meta {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #838e98;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-v2-meta i {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

.landing-v2-info h2 {
  margin: 0;
  color: #000;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.landing-v2-description {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: #838e98;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.landing-v2-divider {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  place-items: center;
  background: #f0f0f0;
  corner-shape: superellipse(2);
}

.landing-v2-divider img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.landing-v2-divider--previous {
  aspect-ratio: 796 / 640;
  border-radius: 120px 0 0 120px;
}

.landing-v2-divider--happy {
  aspect-ratio: 796 / 177;
  border-radius: 0 0 0 120px;
}

.landing-v2-divider--happy img {
  width: 169.68px;
  height: auto;
}

.works-scroll-graphic {
  position: relative;
  width: 14.824%;
  height: 73.438%;
  color: #bec5cb;
  container-type: inline-size;
}

.works-scroll-label {
  position: absolute;
  left: 50%;
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(10px, 11.865cqw, 14px);
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.works-scroll-label--latest {
  top: 0;
  color: #2f23f2;
}

.works-scroll-label--previous {
  bottom: 0;
  color: #bec5cb;
}

.works-arrow {
  position: absolute;
  left: 50%;
  top: 12.34%;
  display: block;
  width: 11.958px;
  height: 75.32%;
  overflow: visible;
  transform: translateX(-50%);
}

.works-arrow__line {
  vector-effect: non-scaling-stroke;
}

.works-arrow__head {
  opacity: var(--works-arrow-opacity, 1);
}

.works-star-field { display: contents; }

.works-star-field--up {
  color: #2f23f2;
}

.works-star-field--down {
  color: #bec5cb;
}

.works-star {
  --rotation: 0deg;
  position: absolute;
  display: block;
  width: 9.636%;
  aspect-ratio: 9.84409 / 10.647;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.84409 10.647'%3E%3Cpath d='M2.595.984C3.731.328 4.299 0 4.922 0s1.191.328 2.327.984l.268.154c1.136.656 1.704.984 2.015 1.524.312.54.312 1.195.312 2.507v.309c0 1.312 0 1.967-.312 2.507-.311.54-.879.868-2.015 1.524l-.268.154c-1.136.656-1.704.984-2.327.984s-1.191-.328-2.327-.984l-.268-.154C1.191 8.853.624 8.525.312 7.985 0 7.445 0 6.79 0 5.478v-.309c0-1.312 0-1.967.312-2.507.312-.54.879-.868 2.015-1.524Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.84409 10.647'%3E%3Cpath d='M2.595.984C3.731.328 4.299 0 4.922 0s1.191.328 2.327.984l.268.154c1.136.656 1.704.984 2.015 1.524.312.54.312 1.195.312 2.507v.309c0 1.312 0 1.967-.312 2.507-.311.54-.879.868-2.015 1.524l-.268.154c-1.136.656-1.704.984-2.327.984s-1.191-.328-2.327-.984l-.268-.154C1.191 8.853.624 8.525.312 7.985 0 7.445 0 6.79 0 5.478v-.309c0-1.312 0-1.967.312-2.507.312-.54.879-.868 2.015-1.524Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(calc(var(--rotation) + var(--scroll-rotation, 0deg)));
  transform-origin: center;
  will-change: color, transform;
}

.works-star--8 { --forward-delay: 100ms; --reverse-delay: 1600ms; left: 24.24%; top: 15.43%; }
.works-star--9 { --forward-delay: 180ms; --reverse-delay: 1520ms; left: 58.31%; top: 17.42%; }
.works-star--10 { --forward-delay: 260ms; --reverse-delay: 1440ms; left: 28.89%; top: 20.30%; }
.works-star--11 { --forward-delay: 380ms; --reverse-delay: 1320ms; left: 74.29%; top: 24.37%; }
.works-star--14 { --forward-delay: 500ms; --reverse-delay: 1200ms; left: 11.57%; top: 27.97%; }
.works-star--12 { --forward-delay: 580ms; --reverse-delay: 1120ms; left: 62.85%; top: 28.23%; }
.works-star--13 { --forward-delay: 700ms; --reverse-delay: 1000ms; left: 33.65%; top: 33.77%; }
.works-star--1 { --forward-delay: 980ms; --reverse-delay: 720ms; left: 54.59%; top: 48.79%; }
.works-star--2 { --forward-delay: 1120ms; --reverse-delay: 580ms; left: 61.17%; top: 54.76%; }
.works-star--7 { --forward-delay: 1060ms; --reverse-delay: 640ms; left: 20.76%; top: 53.65%; }
.works-star--3 { --forward-delay: 1260ms; --reverse-delay: 440ms; left: 74.36%; top: 58.59%; }
.works-star--5 { --forward-delay: 1340ms; --reverse-delay: 360ms; left: 30.81%; top: 60.27%; }
.works-star--6 { --forward-delay: 1460ms; --reverse-delay: 240ms; left: 10.41%; top: 65%; }
.works-star--4 { --forward-delay: 1580ms; --reverse-delay: 120ms; left: 57.75%; top: 69.69%; }

.landing-v2-footer {
  height: 20px;
  margin-top: 86px;
  margin-bottom: 46px;
}

.landing-v2-footer__coffee {
  display: block;
  width: 22.31px;
  height: 19.96px;
  object-fit: contain;
}

@media (max-width: 1320px) {
  .landing-v2-meta {
    flex-wrap: wrap;
    row-gap: 3px;
    white-space: normal;
  }
}

@media (max-width: 1100px) {
  .landing-v2-page {
    --landing-v2-gutter: 60px;
  }

  .landing-v2-projects {
    max-width: 796px;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .landing-v2-column {
    display: contents;
  }

  .landing-v2-project,
  .landing-v2-divider {
    order: var(--mobile-order);
  }

  .landing-v2-meta {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .landing-v2-page {
    --landing-v2-gutter: 24px;
  }

  .landing-v2-projects {
    margin-top: 80px;
  }

  .landing-v2-info {
    gap: 24px;
  }

  .landing-v2-info__name {
    flex-basis: min(var(--info-name-width), 46%);
  }

  .landing-v2-meta,
  .landing-v2-description {
    font-size: 12px;
    line-height: 16px;
  }

  .landing-v2-meta {
    flex-wrap: wrap;
    row-gap: 2px;
    white-space: normal;
  }

  .landing-v2-info h2 {
    font-size: 19px;
  }

  .landing-v2-project--left .landing-v2-visual {
    border-top-right-radius: clamp(56px, 15vw, 120px);
  }

  .landing-v2-project--right .landing-v2-visual {
    border-top-left-radius: clamp(56px, 15vw, 120px);
  }

  .landing-v2-divider--previous {
    border-radius: clamp(56px, 15vw, 120px) 0 0 clamp(56px, 15vw, 120px);
  }

  .landing-v2-divider--happy {
    border-bottom-left-radius: clamp(56px, 15vw, 120px);
  }
}

@media (max-width: 560px) {
  .landing-v2-info {
    flex-direction: column;
    gap: 12px;
  }

  .landing-v2-info__name {
    flex: none;
    width: 100%;
  }

  .landing-v2-meta {
    flex-wrap: nowrap;
    font-size: 11px;
    white-space: nowrap;
  }

  .landing-v2-description {
    font-size: 13px;
    line-height: 17px;
  }

  .landing-v2-divider--happy img {
    width: 28%;
  }

  .landing-v2-footer {
    gap: 8px;
    font-size: 12px;
  }
}

@media (hover: none), (pointer: coarse) {
  .landing-v2-hero {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v2-hero,
  .landing-v2-visual::after,
  .works-scroll-label,
  .works-arrow__line,
  .works-arrow__head,
  .works-star-field,
  .works-star {
    transition: none;
  }
}