/**
 * Home page — section-by-section Figma match (3697:301 @ 1440px)
 * Hero 1024px; red shape only overlaps 75px into band (not white bg)
 */

/* Watch-video play icon/link removed (v2.17.1+) */
.skt-hero--home .skt-hero__video-link,
.skt-hero--home .skt-hero__play-icon,
.skt-hero--home .skt-hero-video-modal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Hero — Figma 3529:1025 @ 1440: 1024px, content @ 384px, video @ 885px ── */
.skt-hero--home {
  min-height: clamp(36rem, 71.111vw, 64rem);
  height: clamp(36rem, 71.111vw, 64rem);
  max-height: 64rem;
  margin-bottom: 0;
  justify-content: flex-start;
}
.skt-hero--home .skt-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.skt-hero--home .skt-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.skt-hero--home .skt-hero__bg-video--mobile {
  display: none;
}
.skt-hero--home .skt-hero__bg-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.skt-hero--home .skt-hero__bg-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  min-height: 100%;
  height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
}
.skt-hero--home .skt-hero__bg-embed--mobile {
  display: none;
}
.skt-hero--home.skt-hero--has-bg-video .skt-hero__bg-img {
  display: none !important;
}
@media (max-width: 767px) {
  .skt-hero--home .skt-hero__bg-video--desktop {
    display: none;
  }
  .skt-hero--home .skt-hero__bg-video--mobile {
    display: block;
  }
  .skt-hero--home .skt-hero__bg-embed--desktop {
    display: none;
  }
  .skt-hero--home .skt-hero__bg-embed--mobile {
    display: block;
  }
  .skt-hero--home.skt-hero--has-bg-video .skt-hero__bg-video:not(.skt-hero__bg-video--mobile):not(.skt-hero__bg-video--desktop) {
    display: block;
  }
  .skt-hero--home.skt-hero--has-bg-video .skt-hero__bg-embed:not(.skt-hero__bg-embed--mobile):not(.skt-hero__bg-embed--desktop) {
    display: block;
  }
}
.skt-hero--home .skt-hero__content {
  position: absolute;
  top: clamp(12rem, 26.67vw, 24rem);
  left: 0;
  z-index: 2;
  padding: 0 var(--skt-pad-x);
  max-width: 44.9375rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}
.skt-hero--home .skt-hero__title {
  margin: 0;
  font-weight: 700;
  max-width: none;
  width: fit-content;
}
.skt-hero--home .skt-hero__title-line {
  display: block;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .skt-hero--home .skt-hero__title-line {
    white-space: normal;
  }
}
.skt-hero--home .skt-hero__subtitle {
  margin: 0;
  font-weight: 400;
}
.skt-hero--home .skt-hero__video-link {
  position: absolute;
  left: var(--skt-pad-x);
  top: clamp(28rem, 61.46vw, 55.3125rem);
  bottom: auto;
  margin: 0;
  z-index: 2;
}
.skt-hero--home .skt-hero__video-link--mobile {
  display: none !important;
}

/* Hero video lightbox */
.skt-hero-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}
.skt-hero-video-modal[hidden] {
  display: none !important;
}
.skt-hero-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.skt-hero-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 56rem);
  aspect-ratio: 16 / 9;
  background: #000;
}
.skt-hero-video-modal__player,
.skt-hero-video-modal__player iframe,
.skt-hero-video-modal__player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
.skt-hero-video-modal__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
html.skt-video-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .skt-hero--home .skt-hero__video-link--desktop {
    display: none !important;
  }
  .skt-hero--home .skt-hero__video-link--mobile {
    display: inline-flex !important;
  }
}
.skt-hero__menu-strip {
  position: absolute;
  top: 0;
  right: 0;
  width: 15.9375rem;
  height: 100%;
  background: rgba(22, 22, 22, 0.2);
  z-index: 1;
  pointer-events: none;
}
.skt-hero__cta-bar {
  position: absolute;
  right: 0;
  z-index: 4;
  width: 15.9375rem;
  margin: 0;
  padding: 0;
}
.skt-hero--home .skt-hero__cta-bar {
  position: static;
  top: auto;
  right: auto;
  width: 15.9375rem;
  margin: 0;
  padding: 0;
}
.skt-hero__cta-bar .skt-btn--hero-cta {
  width: 100%;
  min-width: 0;
  min-height: 4.6875rem;
  height: 4.6875rem;
  border-radius: 0;
  font-weight: 400;
  line-height: 2rem;
}

/* ── About band — only RED shape overlaps hero (-75px); white bg starts below hero ── */
[data-skt-section="home-about"] {
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-left: 0;
}
[data-skt-section="home-about"].skt-band--red {
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  min-height: 33.8125rem;
  padding-bottom: var(--skt-band-red-bleed);
}
[data-skt-section="home-about"]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--skt-hero-band-overlap);
  bottom: 0;
  background: var(--skt-gray-light);
  z-index: 0;
  pointer-events: none;
}
[data-skt-section="home-about"] .skt-band__shape {
  top: 0;
  left: 0;
  z-index: 10;
  background-color: var(--skt-red);
  background-image: none;
  clip-path: polygon(0 0, 88.984% 0, 100% 20.055%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 88.984% 0, 100% 20.055%, 100% 100%, 0 100%);
  transform: translateZ(0);
  overflow: hidden;
}
[data-skt-section="home-about"] .skt-band__shape img {
  display: none;
}
[data-skt-section="home-about"] .skt-band__cta-bar {
  display: none !important;
}
[data-skt-section="home-about"] .skt-band__content {
  position: absolute;
  left: var(--skt-pad-x);
  right: 0;
  top: 0;
  z-index: 11;
  color: var(--skt-white);
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  width: auto;
  max-width: none;
  background: transparent;
  pointer-events: none;
}
[data-skt-section="home-about"] .skt-band__title,
[data-skt-section="home-about"] .skt-band__body {
  color: var(--skt-white);
  margin-left: 0;
  padding-left: 0;
  max-width: 51.5625rem;
  pointer-events: auto;
}
.skt-band--red:not([data-skt-section="home-about"]):not([data-skt-section="about-intro"]):not([data-skt-section="product-about"]) {
  min-height: 33.8125rem;
  background: var(--skt-gray-light);
  overflow: hidden;
  padding-bottom: var(--skt-band-red-bleed);
}
.skt-band__shape {
  width: 70.9375%;
  max-width: 63.8125rem;
  height: calc(100% - var(--skt-band-red-bleed));
}
.skt-band__content {
  max-width: 51.5625rem;
  padding-top: clamp(3rem, 6.25vw, 5.625rem);
  padding-bottom: clamp(3rem, 6.25vw, 5.625rem);
  padding-left: var(--skt-pad-x);
  padding-right: 2rem;
}
.skt-band__body p + p {
  margin-top: 1rem;
}

/* ── Mission (px 95, py 90, gap 69, col 619 + img 561×566) ── */
.skt-split--mission {
  padding: clamp(3rem, 6.25vw, 5.625rem) clamp(1.25rem, 6.6vw, 5.9375rem);
}
.skt-split--mission .skt-split__content {
  max-width: 38.6875rem;
  gap: 2.25rem;
}
.skt-split--mission .skt-split__media img {
  width: 100%;
  max-width: 35.0625rem;
  height: auto;
  aspect-ratio: 561 / 566;
  object-fit: cover;
}

/* ── Product feature (px 126, overlapping collage) ── */
.skt-product-feature {
  padding: clamp(3rem, 6.25vw, 5.625rem) clamp(1.5rem, 8.75vw, 7.875rem);
}
.skt-product-feature__card {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.skt-product-feature__card-bg {
  position: absolute;
  inset: 0;
  background: url('../images/product-card-bg.png') no-repeat center / 100% 100%;
  background-color: var(--skt-gray-light);
  box-shadow: none;
}
.skt-product-feature__card-inner {
  position: relative;
  z-index: 1;
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.skt-product-feature__card-inner .skt-product-feature__title {
  margin: 0;
}

/* ── Mascot (px 95, red band, image left 561×558) ── */
.skt-split--mascot {
  padding: clamp(3rem, 6.25vw, 5.625rem) clamp(1.25rem, 6.6vw, 5.9375rem);
  background: var(--skt-red);
  color: #fff;
}
.skt-split--mascot .skt-split__title {
  color: #fff;
  font-weight: 700;
}
.skt-split--mascot .skt-split__body {
  color: #fff;
  opacity: 1;
}
.skt-split--mascot .skt-split__body p {
  margin: 0 0 1.25rem;
}
.skt-split--mascot .skt-split__body p:last-child {
  margin-bottom: 0;
}
.skt-split--mascot .skt-split__content {
  max-width: 38.6875rem;
  gap: 2.25rem;
}
.skt-mascot__frame {
  width: 100%;
  max-width: 35.0625rem;
  aspect-ratio: 561 / 558;
  overflow: visible;
  background: transparent;
}
.skt-split__media--mascot .skt-mascot__frame img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center bottom;
}

/* ── Contact (px 120, form 496px, img 646×551) ── */
.skt-contact--home {
  padding: clamp(3rem, 6.25vw, 5.625rem) clamp(1.25rem, 8.33vw, 7.5rem);
  max-width: none;
  width: 100%;
}
.skt-contact--home .skt-contact__grid {
  max-width: 90rem;
  margin: 0 auto;
}
.skt-contact__intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.skt-contact--home .skt-contact__title {
  margin: 0;
}
.skt-contact--home .skt-contact__intro {
  margin: 0;
  max-width: 31rem;
}
.skt-contact--home .skt-contact__form-wrap {
  max-width: 31rem;
}
.skt-contact--home .skt-contact__form {
  gap: 0.625rem;
}
.skt-contact--home .skt-contact__form input,
.skt-contact--home .skt-contact__form textarea {
  min-height: 3.3125rem;
}
.skt-contact--home .skt-contact__form textarea {
  min-height: 7.9375rem;
}
.skt-contact--home .skt-contact__form .skt-btn,
.skt-contact--home .skt-contact__form button.skt-btn {
  width: 100%;
  max-width: none;
}

/* Buttons — sizing; border + hover in buttons.css */
.skt-btn {
  width: 21.5rem;
  max-width: 100%;
  padding: 0 1.5rem;
  border-radius: 0;
  font-weight: 400;
}
.skt-btn--hero-cta {
  width: 15.9375rem;
}

@media (min-width: 768px) {
  .skt-split--mascot {
    margin-top: 40px;
  }
  .skt-split--mission .skt-split__grid {
    grid-template-columns: minmax(0, 38.6875rem) minmax(0, 35.0625rem);
    gap: 4.3125rem;
    justify-content: center;
  }
  .skt-split--mascot .skt-split__grid {
    grid-template-columns: minmax(0, 35.0625rem) minmax(0, 38.6875rem);
    gap: 4.3125rem;
    justify-content: center;
    align-items: center;
  }
  .skt-contact--home .skt-contact__grid {
    grid-template-columns: minmax(0, 31rem) minmax(0, 40.375rem);
    gap: clamp(2rem, 5vw, 5rem);
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  .skt-product-feature__grid {
    display: block !important;
    min-height: 45.5rem;
    --skt-pf-img-w: min(49.5rem, 55%);
    --skt-pf-img-h: 22.75rem;
  }
  .skt-product-feature__img--top,
  .skt-product-feature__img--bottom {
    width: var(--skt-pf-img-w);
    max-width: var(--skt-pf-img-w);
    height: var(--skt-pf-img-h);
    overflow: hidden;
  }
  .skt-product-feature__img--top img,
  .skt-product-feature__img--bottom img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: auto;
  }
  .skt-product-feature__img--bottom {
    position: absolute;
    left: calc(var(--skt-pf-img-w) / 2);
    top: var(--skt-pf-img-h);
  }
  .skt-product-feature__card {
    position: absolute;
    left: 17.1875rem;
    top: 14.3125rem;
    width: 39.90625rem;
    min-height: 16.9375rem;
    z-index: 2;
  }
  .skt-product-feature__cta {
    position: absolute;
    left: 17.1875rem;
    top: 31.25rem;
    z-index: 3;
    margin-top: 0;
  }
}

/* ── Home hero pixel-perfect @ 1440 (Figma 3529:1025) ── */
@media (min-width: 1440px) {
  .skt-hero--home {
    height: 64rem;
    min-height: 64rem;
    max-height: 64rem;
  }
  .skt-hero--home .skt-hero__content {
    top: 24rem;
    padding-left: 9.9375rem;
    padding-right: 0;
    max-width: 44.9375rem;
    gap: 1.9375rem;
  }
  .skt-hero--home .skt-hero__title {
    font-size: 4.6875rem;
    letter-spacing: -0.234375rem;
    line-height: 0.92;
    max-width: none;
    width: fit-content;
    opacity: 0.5;
  }
  .skt-hero--home .skt-hero__title-line {
    display: block;
    white-space: nowrap;
  }
  .skt-hero--home .skt-hero__subtitle {
    font-size: 1.875rem;
    line-height: 2.25rem;
    letter-spacing: -0.09375rem;
    max-width: 34.8125rem;
  }
  .skt-hero--home .skt-hero__video-link {
    top: 55.3125rem;
    left: 9.9375rem;
    gap: 0.5625rem;
    font-size: 1rem;
    letter-spacing: -0.05rem;
    opacity: 0.5;
  }
  .skt-hero--home .skt-hero__play-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .skt-hero--home .skt-hero__cta-bar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 15.9375rem;
    height: auto;
    margin: 0;
  }
  .skt-hero--home .skt-hero__menu-strip {
    width: 15.9375rem;
  }
  [data-skt-section="home-about"] .skt-band__shape {
    top: 0;
  }
  [data-skt-section="home-about"] .skt-band__content {
    padding-top: 4.0625rem;
    padding-left: 0;
    left: 9.9375rem;
    right: 0;
    margin-left: 0;
    width: auto;
    max-width: none;
  }
  [data-skt-section="home-about"] .skt-band__title,
  [data-skt-section="home-about"] .skt-band__body {
    margin-left: 0;
    padding-left: 0;
    max-width: 51.5625rem;
  }
  [data-skt-section="home-about"] .skt-band__title {
    font-size: 2.25rem;
    letter-spacing: -0.05em;
    margin-bottom: 2.25rem;
  }
  [data-skt-section="home-about"] .skt-band__body {
    font-size: 1.5rem;
    line-height: 1.33;
    letter-spacing: -0.05em;
    opacity: 0.77;
  }
}

@media (max-width: 991px) {
  .skt-hero__menu-strip,
  .skt-hero__cta-bar {
    width: min(15.9375rem, 22vw);
  }
  .skt-hero__menu-strip {
    display: none;
  }
  .skt-hero__cta-bar {
    position: absolute !important;
    top: calc(clamp(36rem, 71.111vw, 64rem) - var(--skt-hero-band-overlap, 4.6875rem)) !important;
    bottom: auto !important;
    right: 0;
    width: min(15.9375rem, 22vw);
    max-width: none;
    padding: 0;
    margin-top: 0 !important;
  }

  .skt-product-feature__img--top img,
  .skt-product-feature__img--bottom img {
    width: 100%;
    height: auto;
    aspect-ratio: 792 / 364;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  :root {
    --skt-pad-x: 1.25rem;
  }

  /* ── Hero ── */
  .skt-hero--home {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: clamp(32rem, 100svh, 40rem);
    max-height: none;
  }

  .skt-hero--home .skt-hero__content {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0 var(--skt-pad-x) 1rem;
    max-width: none;
    gap: 1.25rem;
  }

  .skt-hero--home .skt-hero__title {
    max-width: none;
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    line-height: 1.08;
  }

  .skt-hero--home .skt-hero__subtitle {
    max-width: none;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    line-height: 1.4;
  }

  .skt-hero--home .skt-hero__video-link {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    margin: 0 var(--skt-pad-x) 2rem;
    font-size: 0.875rem;
  }

  .skt-hero--home .skt-hero__cta-bar,
  [data-skt-section="home-about"] .skt-band__cta-bar {
    display: none !important;
  }

  /* ── About band — stacked text on red (no shape strip / CTA on mobile) ── */
  [data-skt-section="home-about"].skt-band--red {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: var(--skt-red);
  }

  [data-skt-section="home-about"]::before {
    display: none;
  }

  [data-skt-section="home-about"] .skt-band__shape {
    display: none;
  }

  [data-skt-section="home-about"] .skt-band__content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.25rem var(--skt-pad-x) 2rem;
    box-sizing: border-box;
    pointer-events: auto;
    order: 1;
  }

  [data-skt-section="home-about"] .skt-band__title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    margin-bottom: 0.75rem;
  }

  [data-skt-section="home-about"] .skt-band__body {
    font-size: clamp(0.9375rem, 3.8vw, 1.25rem);
    line-height: 1.45;
  }

  /* ── Mission ── */
  .skt-split--mission {
    padding: 3rem var(--skt-pad-x);
  }

  .skt-split--mission .skt-split__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .skt-split--mission .skt-split__content {
    gap: 1.5rem;
  }

  .skt-split--mission .skt-split__media img {
    width: 100%;
    max-width: none;
    aspect-ratio: 561 / 566;
  }

  /* ── Mascot ── */
  .skt-split--mascot {
    padding: 3rem var(--skt-pad-x);
  }

  .skt-split--mascot .skt-split__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .skt-split--mascot .skt-split__media {
    order: -1;
  }

  .skt-mascot__frame {
    max-width: min(100%, 20rem);
    margin: 0 auto;
    aspect-ratio: 561 / 558;
  }

  .skt-split--mascot .skt-split__content {
    gap: 1.5rem;
  }

  /* ── Contact ── */
  .skt-contact--home {
    padding: 3rem var(--skt-pad-x);
  }

  .skt-contact--home .skt-contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .skt-contact--home .skt-contact__form-wrap,
  .skt-contact--home .skt-contact__intro {
    max-width: none;
  }

  .skt-band__shape {
    width: 100%;
  }

  .skt-split__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .skt-used-in__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .skt-used-in__title {
    position: relative;
    margin-bottom: 1.5rem;
  }
}

/* 3D viewer styles: inc/assets/css/3d-viewer.css */