/* Home: section-sectors - same portfolio SVGs as Portfolio → Years */
.section-sectors__thumbnails img {
  object-fit: contain;
  max-height: min(22vw, 9rem);
  width: auto;
  height: auto;
  padding: 0.35rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.section-sectors__thumbnails img[src$=".svg"] {
  background: #0c0c0c;
}

/* Wearhouse hero phone carousel (copied animation assets from WEARHOUSE-web) */
.vl-wh-phone-carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Width is driven by the handset only - brand/copy must not resize the column. */
  width: min(25rem, 100%);
  max-width: min(100%, 25rem);
  margin: 0;
  flex-shrink: 0;
}

/* Wide screens: a little more room for handset + caption row */
@media (min-width: 900px) {
  .vl-wh-phone-carousel {
    max-width: min(100%, 26rem);
  }
}

.vl-wh-phone-carousel__phone-link {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  align-self: center;
  max-width: 100%;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.vl-wh-phone-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 2rem;
  aspect-ratio: 872 / 1804;
  transform-style: preserve-3d;
  will-change: transform;
  box-sizing: border-box;
  /* Inset screenshots inside the handset bezel (light inset, not cramped). */
  padding: 3.5% 5%;
}

@media (prefers-reduced-motion: reduce) {
  .vl-wh-phone-carousel__viewport {
    transform: none !important;
    will-change: auto;
  }

  .vl-wh-phone-carousel__phone-link {
    perspective: none;
  }
}

.vl-wh-phone-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.vl-wh-phone-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.vl-wh-phone-carousel__brand {
  display: block;
  width: auto;
  height: auto;
  max-height: 5.5rem;
  max-width: min(9.125rem, 42vw);
  flex-shrink: 0;
  object-fit: contain;
}

.vl-wh-phone-carousel__brand-row {
  margin-top: 0.9rem;
  /* Shrink row to logo + copy, then centre that group under the phone. */
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.12rem;
  box-sizing: border-box;
}

.vl-wh-phone-carousel__copy {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.vl-wh-phone-carousel__brand-row > a {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: auto;
  line-height: 0;
}

.vl-wh-phone-carousel__caption {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: left;
}

.vl-wh-phone-carousel__sub {
  margin: 0.14rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.66rem;
  line-height: 1.2;
  text-align: left;
  display: block;
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
}

/* Keep Wearhouse carousel readable when page background fades to white */
body.home.vl-theme-middle .vl-wh-phone-carousel__caption {
  color: #111;
}

body.home.vl-theme-middle .vl-wh-phone-carousel__sub {
  color: rgba(17, 17, 17, 0.78);
}

/* Home sectors row: keep list vertically centered with phone carousel */
.section-sectors__container > .grid.subgrid[pos="row"] {
  align-items: stretch;
}

/* Keep the phone column vertically centered in the row; list column uses a full-height hit layer. */
.section-sectors__container > .grid.subgrid[pos="row"] > div[pos="1-6"] {
  align-self: center;
}

/*
 * Wide viewports: theme grid splits 1–6 / 7–12 (half viewport each), so the nav list
 * sits far from the phone. Shrink-wrap to phone + copy width, list hugs the block.
 */
@media (min-width: 1024px) {
  body.home .section-sectors__container > .grid.subgrid[pos="row"] {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 2.5vw, 2.75rem);
    width: 100%;
    max-width: 100%;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] > div[pos="1-6"] {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: auto !important;
    max-width: none;
    grid-column: unset !important;
    margin: 0;
    align-self: flex-start;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] .section-sectors__list-hit {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    min-width: 0;
    grid-column: unset !important;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] .vl-wh-phone-carousel {
    width: min(26rem, 100%);
    max-width: min(26rem, 100%);
    margin: 0;
  }
}

/* Full grid-cell hit target so pointer tracking works in whitespace above/below the <ul> (Previously the <ul> was align-self:center and dead zones did not receive pointer events.) */
.section-sectors__container > .grid.subgrid[pos="row"] .section-sectors__list-hit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.section-sectors__container > .grid.subgrid[pos="row"] .section-sectors__list {
  align-self: auto;
  width: 100%;
}

/* Mobile: space under Wearhouse block; list centred horizontally and as a block on the vertical middle */
@media (max-width: 1023px) {
  body.home .section-sectors__container > .grid.subgrid[pos="row"] .vl-wh-phone-carousel {
    margin-inline: auto;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] .section-sectors__list-hit {
    padding-top: 30px;
    align-items: center;
    justify-content: center;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] .section-sectors__list {
    width: auto;
    max-width: 100%;
    text-align: center;
  }

  body.home
    .section-sectors__container
    > .grid.subgrid[pos="row"]
    .section-sectors__list
    > .section-sectors__item {
    text-align: center;
  }

  body.home
    .section-sectors__container
    > .grid.subgrid[pos="row"]
    .section-sectors__list
    .section-sectors__item
    a {
    text-align: center;
  }
}

/*
 * Theme only sets --active accent when NOT .section-sectors__list--over:
 * `.section-sectors__list:not(.section-sectors__list--over) .section-sectors__item--active a`.
 * After pointer override, that rule no longer matches, so the “tracked” row only picks up
 * accent via `a:hover` - i.e. it appears stuck unless the cursor is over the link text.
 */
body.home .section-sectors__list.section-sectors__list--over .section-sectors__item.section-sectors__item--active a {
  color: var(--color-accent) !important;
}

/* Avoid two accent lines (JS active + theme a:hover on another row). */
@media screen and (pointer: fine) {
  body.home .section-sectors__list.section-sectors__list--over .section-sectors__item:not(.section-sectors__item--active) a:hover {
    color: inherit !important;
  }
}

/* Remove all dividers around home products boundary */
body.home #home-products {
  position: relative;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home #home-products::before {
  display: none !important;
  content: none !important;
}

body.home #home-products::after {
  display: none !important;
  content: none !important;
}

/* Remove the extra separator coming from the section above Products */
body.home .section-works-homepage {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .section-works-homepage::after,
body.home .section-works-homepage::before {
  display: none !important;
  content: none !important;
}

/* Keep only one divider: remove the next section's top rule */
body.home .section-works-homepage__list {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .section-works-homepage__list::before,
body.home .section-works-homepage__list::after {
  display: none !important;
  content: none !important;
}

/* Hard kill any remaining separators between hero preview and products */
body.home .vl-home-hero-preview,
body.home .vl-home-hero-preview__track-wrap,
body.home .vl-home-hero-preview__track,
body.home .section-works-homepage,
body.home .section-works-homepage__list,
body.home #home-products {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .vl-home-hero-preview::before,
body.home .vl-home-hero-preview::after,
body.home .vl-home-hero-preview__track-wrap::before,
body.home .vl-home-hero-preview__track-wrap::after,
body.home .section-works-homepage::before,
body.home .section-works-homepage::after,
body.home .section-works-homepage__list::before,
body.home .section-works-homepage__list::after,
body.home #home-products::before,
body.home #home-products::after {
  display: none !important;
  content: none !important;
}

/* Second divider source: hero copy separator from theme block styles */
body.home .vl-home-hero__copy,
body.home .vl-home-hero__copy.text {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .vl-home-hero__copy::before,
body.home .vl-home-hero__copy::after,
body.home .vl-home-hero__copy.text::before,
body.home .vl-home-hero__copy.text::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Exact remaining sources: section-works list + footer separators */
body.home .section-works-homepage > ol.section-works-homepage__list,
body.home .section-works-homepage > footer,
body.home .section-works-homepage > footer .section-works-homepage__footer {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.home .section-works-homepage > ol.section-works-homepage__list::before,
body.home .section-works-homepage > ol.section-works-homepage__list::after,
body.home .section-works-homepage > footer::before,
body.home .section-works-homepage > footer::after,
body.home .section-works-homepage > footer .section-works-homepage__footer::before,
body.home .section-works-homepage > footer .section-works-homepage__footer::after {
  display: none !important;
  content: none !important;
}

body.home #home-products .grid,
body.home #home-products .section-wysiwyg__container,
body.home #home-products .vl-home-products-grid-wrap {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Collapse spacing between previous section and Products */
body.home .section-works-homepage {
  margin-bottom: 0 !important;
  /* Was ~1-1.8rem; trim hard so Wearhouse row doesn’t float in white space */
  padding-bottom: clamp(0.25rem, 0.8vw, 0.5rem) !important;
}

/* Ship-products hero sits above this row; theme .section-sectors used ~10rem vertical top + huge padding-bottom - crush it */
body.home .page-template-homepage-static .section-works-homepage:first-of-type > .section-sectors {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(0.5rem, 1.5vw, 1rem) !important;
}

body.home #home-products {
  margin-top: clamp(0.85rem, 2.2vw, 1.5rem) !important;
  padding-top: clamp(0.35rem, 1vw, 0.75rem) !important;
  margin-bottom: clamp(2.25rem, 5.5vw, 3.75rem) !important;
  padding-bottom: clamp(1.5rem, 4vw, 2.75rem) !important;
}

body.home #home-products + .section-works-homepage {
  margin-top: clamp(0.75rem, 2vw, 1.5rem) !important;
  padding-top: clamp(0.5rem, 1.5vw, 1.1rem) !important;
}

/* Home products (cloned animated icon behavior from businesses licensing) */
.vl-home-products-grid-wrap {
  grid-column: 1 / -1;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  visibility: visible;
  overflow: visible !important;
  max-width: none;
  padding-inline: var(--edge-start, clamp(1rem, 4vw, 1.5rem));
  box-sizing: border-box;
}

/* Home products: hero title above the animated icon grid */
body.home .vl-home-products-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(0.95rem, 2.4vw, 1.55rem);
  text-align: center;
}

body.home .vl-home-products-hero-title {
  font-family: var(--font-primary, system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
}

/* Theme draws a full-bleed rule on section h2 - hide above Apps and products */
body.home #home-products .vl-home-products-hero-head::before,
body.home #home-products .vl-home-products-hero-head::after,
body.home #home-products .vl-home-products-hero-title::before,
body.home #home-products .vl-home-products-hero-title::after,
body.home #home-products .section-wysiwyg__container h2::before,
body.home #home-products .section-wysiwyg__container h2::after {
  display: none !important;
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Home: product grid CTA row layout (button uses global `vl-liquid-btn` in vl-liquid-btn.css) */
body.home .vl-home-products-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
  max-width: 100%;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  border-top: none !important;
  box-shadow: none !important;
}

body.home .vl-home-products-cta-row::before,
body.home .vl-home-products-cta-row::after {
  display: none !important;
  content: none !important;
}

body.home .vl-home-products-grid-wrap > .vl-home-products-grid {
  align-self: stretch;
}

.vl-home-products-grid-wrap.grid.subgrid > .vl-home-products-grid {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0;
}

.vl-home-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 2rem;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
  overflow: visible;
  position: relative;
  z-index: 2;
}

/*
 * Featured homepage banners (Creators video, Wearhouse, PONY, NotepadPro): shared corner radius.
 * Theme default on .work__thumbnail is 6px / 12px; featured rows share 12px for consistency.
 */
body.home {
  --vl-home-feature-banner-radius: 12px;
  /* Mobile featured banners (Creators, Wearhouse, NotepadPro, PONY): one rhythm. */
  --vl-home-feature-banner-block-gap: clamp(1.5rem, 4.5vw, 2.15rem);
  --vl-home-feature-banner-inner-gap: clamp(0.7rem, 2.2vw, 1rem);
}

body.home .work.work--vmodel-creators-intro .work__thumbnail,
body.home .work.work--wearhouse-vmodel-intro .work__thumbnail,
body.home .work.work--spinnersonic-dual .work__thumbnail {
  border-radius: var(--vl-home-feature-banner-radius) !important;
  overflow: hidden;
}

body.home .work.work--vmodel-creators-intro .work__thumbnail .media,
body.home .work.work--wearhouse-vmodel-intro .work__thumbnail .media,
body.home .work.work--wearhouse-vmodel-intro .vl-home-wearhouse-intro-media,
body.home .work.work--spinnersonic-dual .work__thumbnail .media,
body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__card {
  border-radius: inherit;
  overflow: hidden;
}

body.home .work.work--vmodel-creators-intro .work__thumbnail .media video,
body.home .work.work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__img--photo,
body.home .work.work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap {
  border-radius: inherit;
}

/* Homepage featured works: centre banner imagery in the thumbnail frame */
body.home .section-works-homepage__list .work__thumbnail .media {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.home .section-works-homepage__list .work__thumbnail .media img,
body.home .section-works-homepage__list .work__thumbnail .media video {
  object-position: center center;
}

/* Wearhouse intro: photo + logo fill frame (cover). */
body.home .section-works-homepage .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__img--photo,
body.home .section-works-homepage .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap {
  transform: none !important;
}

/* Creators (VModel), Wearhouse, NotepadPro, PONY: mobile banners stay in page gutters (not edge bleed). */
@media (max-width: 1023px) {
  /*
   * Theme (voltis-main.css) sets `.section-works-homepage__list > *:nth-child(2) { grid-column: 2 / 7 }`
   * on mobile - span the list row but keep normal horizontal padding.
   */
  body.home .section-works-homepage__list > .work.work--wearhouse-vmodel-intro,
  body.home .section-works-homepage__list > .work.work--vmodel-creators-intro,
  body.home .section-works-homepage__list > .work.work--spinnersonic-dual {
    grid-column: 1 / -1 !important;
    justify-self: stretch;
    /* Half-bleed: between full viewport width and narrow guttered cards. */
    margin-inline: calc(-0.5 * var(--edge-start, clamp(1rem, 4vw, 1.5rem))) !important;
    width: calc(100% + var(--edge-start, clamp(1rem, 4vw, 1.5rem))) !important;
    max-width: none;
    box-sizing: border-box;
  }

  body.home .work.work--wearhouse-vmodel-intro .work__container.grid,
  body.home .work.work--vmodel-creators-intro .work__container.grid,
  body.home .work.work--spinnersonic-dual .work__container.grid {
    padding-inline: calc(0.5 * var(--edge-start, clamp(1rem, 4vw, 1.5rem))) !important;
    margin-inline: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  body.home .work.work--wearhouse-vmodel-intro .work__thumbnail,
  body.home .work.work--vmodel-creators-intro .work__thumbnail,
  body.home .work.work--spinnersonic-dual .work__thumbnail,
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col .work__thumbnail {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: min(24rem, 100%);
    margin-inline: auto;
    border-radius: var(--vl-home-feature-banner-radius, 12px) !important;
    overflow: hidden;
  }

  body.home .work.work--vmodel-creators-intro .work__thumbnail .media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
  }

  body.home .work.work--vmodel-creators-intro .work__thumbnail .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro-media {
    padding: 0.35rem;
    box-sizing: border-box;
    background: #0a0a0a;
  }

  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__img--photo {
    object-fit: cover;
    object-position: center center;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] > div[pos="1-6"] {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  body.home .section-sectors__container > .grid.subgrid[pos="row"] .vl-wh-phone-carousel {
    width: min(23rem, calc(100% - var(--edge-start, clamp(1rem, 4vw, 1.5rem))));
    max-width: min(23rem, 96vw);
  }

  /* Even vertical rhythm between all four featured banners on mobile. */
  body.home .section-works-homepage__list {
    row-gap: var(--vl-home-feature-banner-block-gap) !important;
  }

  body.home .section-works-homepage__list > .work.work--wearhouse-vmodel-intro,
  body.home .section-works-homepage__list > .work.work--vmodel-creators-intro,
  body.home .section-works-homepage__list > .work.work--spinnersonic-dual {
    margin-block: 0 !important;
    padding-block: 0 !important;
  }

  body.home .work.work--wearhouse-vmodel-intro .work__container.grid,
  body.home .work.work--vmodel-creators-intro .work__container.grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--vl-home-feature-banner-inner-gap) !important;
    grid-template-columns: unset !important;
    grid-template-areas: unset !important;
  }

  body.home .work.work--spinnersonic-dual .work__container.grid {
    gap: var(--vl-home-feature-banner-block-gap) !important;
  }

  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col {
    gap: var(--vl-home-feature-banner-inner-gap) !important;
  }

  body.home .section-works-homepage__list [data-vl-home-banner] {
    gap: 0;
  }

  body.home .work.work--wearhouse-vmodel-intro .work__excerpt {
    margin-top: 0;
  }

  body.home .work.work--wearhouse-vmodel-intro .vl-work-vmodel-intro,
  body.home .work.work--vmodel-creators-intro .vl-work-vmodel-intro,
  body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro {
    grid-column: 1 / -1 !important;
    max-width: none;
    width: 100%;
    padding-inline: var(--edge-start, clamp(1rem, 4vw, 1.5rem));
    box-sizing: border-box;
    text-align: left;
  }

  body.home .work.work--wearhouse-vmodel-intro .work__excerpt {
    padding-inline: var(--edge-start, clamp(1rem, 4vw, 1.5rem));
    box-sizing: border-box;
  }

  body.home .work.work--wearhouse-vmodel-intro .vl-work-vmodel-intro__title,
  body.home .work.work--vmodel-creators-intro .vl-work-vmodel-intro__title,
  body.home .work.work--spinnersonic-dual .vl-work-vmodel-intro__title {
    text-align: left;
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  /* "View more" is a sibling under .work__container (outside the banner thumb), full row width. */
  body.home .work.work--wearhouse-vmodel-intro .vl-home-banner-mobile-cta,
  body.home .work.work--vmodel-creators-intro .vl-home-banner-mobile-cta,
  body.home .work.work--spinnersonic-dual .vl-home-banner-mobile-cta,
  body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col > .vl-home-banner-mobile-cta {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--edge-start, clamp(1rem, 4vw, 1.5rem));
    box-sizing: border-box;
  }
}

.vl-home-product-card {
  width: 100%;
  max-width: 9rem;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  will-change: transform;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.vl-home-product-card.is-dragging {
  cursor: grabbing;
  z-index: 30;
}

@media (max-width: 1023px) {
  body.home #home-products .vl-home-product-card {
    cursor: pointer;
    touch-action: manipulation;
    user-select: auto;
    -webkit-user-select: auto;
  }
}

.vl-home-product-card--unlinked {
  cursor: default;
}

.vl-home-product-card--unlinked .vl-home-product-card__link {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 1023px) {
  body.home #home-products .vl-home-product-card--unlinked {
    cursor: default;
    touch-action: none;
  }
}

.vl-home-product-card__link {
  display: block;
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  /* Was hidden + 112% icon - cropped glyphs and spring offset; keep full tile visible */
  overflow: visible;
  border-radius: 14px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none;
  will-change: transform;
}

/* Spring layer (home + voltiscore core apps; not used on `.vl-products-grid-wrap`) */
body.home #home-products .vl-home-product-thumb-spring,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-thumb-spring {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.home #home-products .vl-home-product-thumb-spring__svg,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-thumb-spring__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

body.home #home-products .vl-home-product-thumb-spring__line,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-thumb-spring__line {
  stroke: rgba(255, 170, 150, 0.38);
  stroke-width: 1.75;
}

body.home #home-products .vl-home-product-thumb-spring__mass,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-thumb-spring__mass {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  pointer-events: none;
}

body.home #home-products .vl-home-product-thumb-spring__mass .vl-home-product-card__icon,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-thumb-spring__mass .vl-home-product-card__icon {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal;
  filter: none !important;
}

body.home #home-products .vl-home-product-card__link:not(:has(.vl-home-product-thumb-spring)) > .vl-home-product-card__icon,
body.page-voltiscore #voltiscore-core-apps .vl-home-product-card__link:not(:has(.vl-home-product-thumb-spring)) > .vl-home-product-card__icon {
  width: 72px;
  height: 72px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.home #home-products .vl-home-product-card:has(.vl-home-product-card__link[href="/product-pony"]) .vl-home-product-card__link {
  background: transparent !important;
  box-shadow: none !important;
}

body.home #home-products .vl-home-product-card:has(.vl-home-product-card__link[href="/product-pony"]) .vl-home-product-card__icon {
  filter: none !important;
}

body.home.vl-theme-middle #home-products .vl-home-product-thumb-spring__line,
body.page-voltiscore.vl-theme-middle #voltiscore-core-apps .vl-home-product-thumb-spring__line {
  stroke: rgba(200, 55, 45, 0.48);
}

@media (hover: hover) and (pointer: fine) {
  body.home #home-products .vl-home-products-grid:hover .vl-home-product-card__icon.vl-home-icon-drift,
  body.home #home-products .vl-home-products-grid:hover .vl-home-product-card__icon.vl-home-icon-drift--axis,
  body.page-voltiscore #voltiscore-core-apps .vl-home-products-grid:hover .vl-home-product-card__icon.vl-home-icon-drift,
  body.page-voltiscore #voltiscore-core-apps .vl-home-products-grid:hover .vl-home-product-card__icon.vl-home-icon-drift--axis {
    animation-play-state: paused;
  }
}

.vl-home-product-card__icon {
  transform-origin: center center;
}

@keyframes vl-home-icon-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20% { transform: translate3d(2px, -3px, 0) rotate(0.8deg); }
  40% { transform: translate3d(-3px, 2px, 0) rotate(-0.7deg); }
  60% { transform: translate3d(3px, 1px, 0) rotate(0.6deg); }
  80% { transform: translate3d(-2px, -2px, 0) rotate(-0.5deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* PONY (home grid): idle motion uses translation only - no rotation. */
@keyframes vl-home-icon-drift-axis {
  0% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(5px, -4px, 0); }
  45% { transform: translate3d(-4px, 5px, 0); }
  68% { transform: translate3d(4px, 4px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.vl-home-product-card__icon.vl-home-icon-drift {
  animation-name: vl-home-icon-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.vl-home-product-card__icon.vl-home-icon-drift--axis {
  animation-name: vl-home-icon-drift-axis;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (max-width: 860px) {
  .vl-home-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
}

/* Mobile home flow: keep document order stable (flex `order` only on #home-products
 * sent it after every order:0 sibling - icons appeared just above the footer). To pin
 * products directly under the hero, assign explicit order to each top-level block. */
@media (max-width: 1023px) {
  body.home .page-template-homepage-static {
    display: flex;
    flex-direction: column;
  }

  body.home .page-template-homepage-static > *:nth-child(1) {
    order: 1;
  }

  body.home .page-template-homepage-static > *:nth-child(2) {
    order: 2;
  }

  body.home .page-template-homepage-static > #home-products {
    order: 3;
  }

  body.home .page-template-homepage-static > *:nth-child(3) {
    order: 4;
  }

  body.home .page-template-homepage-static > *:nth-child(5) {
    order: 5;
  }

  body.home .page-template-homepage-static > *:nth-child(6) {
    order: 6;
  }

  body.home .page-template-homepage-static > *:nth-child(7) {
    order: 7;
  }

  body.home .page-template-homepage-static > *:nth-child(8) {
    order: 8;
  }

  body.home .page-template-homepage-static > *:nth-child(9) {
    order: 9;
  }
}

/* ── Wearhouse intro: dual photo + compact wordmark (expands on logo hover) ── */
body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro-media {
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: 1376 / 768;
  overflow: hidden;
}

body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__img--photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s ease;
}

body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__img--hover {
  z-index: 1;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  body.home .work--wearhouse-vmodel-intro .work__thumbnail:hover .vl-home-wearhouse-intro__img--hover,
  body.home .work--wearhouse-vmodel-intro .work__thumbnail:focus-within .vl-home-wearhouse-intro__img--hover {
    opacity: 1;
  }
}

body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro-media.is-vl-mobile-slide-b .vl-home-wearhouse-intro__img--hover {
  opacity: 1;
}

body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap {
  position: absolute;
  z-index: 3;
  right: clamp(0.5rem, 2vw, 0.85rem);
  bottom: clamp(0.5rem, 2vw, 0.85rem);
  top: auto;
  display: block;
  line-height: 0;
  text-decoration: none;
  transform-origin: bottom right;
  transition: transform 0.35s ease;
}

body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo {
  display: block;
  width: clamp(3.5rem, 12vw, 6.5rem);
  height: auto;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: width 0.35s ease, filter 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap:hover,
  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap:focus-visible {
    transform: scale(1.02);
  }

  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap:hover .vl-home-wearhouse-intro__logo,
  body.home .work--wearhouse-vmodel-intro .vl-home-wearhouse-intro__logo-wrap:focus-visible .vl-home-wearhouse-intro__logo {
    width: clamp(4.5rem, 16vw, 11.5rem);
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
  }
}

/* Thumbnail stacks: banner + optional mobile CTA */
body.home .section-works-homepage__list [data-vl-home-banner] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.home .section-works-homepage__list [data-vl-home-banner] > .vl-home-spinnersonic-dual__card {
  flex: 0 0 auto;
}

/* Mobile "View more": lives outside .work__thumbnail - no strip inside the banner. */
body.home .section-works-homepage__list .vl-home-banner-mobile-cta {
  display: none;
  margin: 0.5rem 0 0;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: none;
}

body.home .section-works-homepage__list .vl-home-banner-mobile-cta:not([hidden]) {
  display: block;
}

body.home .section-works-homepage__list .vl-home-banner-view-more {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-text, #111);
  background: transparent;
}

body.home .section-works-homepage__list .vl-home-banner-view-more:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.home .section-works-homepage__list .vl-home-banner-view-more:focus-visible {
  outline: 2px solid var(--color-accent, #ff2b2b);
  outline-offset: 2px;
  border-radius: 0.15rem;
}

body.home .work.work--spinnersonic-dual .vl-home-spinnersonic-dual__col > .vl-home-banner-mobile-cta {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@keyframes vl-mobile-creators-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(1.02);
    opacity: 0.92;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

body.home .work--vmodel-creators-intro .media.is-vl-mobile-creators-pulse {
  animation: vl-mobile-creators-pulse 0.55s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body.home .work--vmodel-creators-intro .media.is-vl-mobile-creators-pulse {
    animation: none;
  }
}