/* Shri Krishna TMT — Figma pixel-match layer (BM Websites Design) */

:root {
  --skt-pad-x: clamp(1.25rem, 11.04vw, 9.9375rem);
  --skt-pad-y: clamp(3rem, 6.25vw, 5.625rem);
  --skt-title-36: clamp(1.75rem, 2.5vw, 2.25rem);
  --skt-body-24: clamp(1rem, 1.67vw, 1.5rem);
  --skt-hero-title: clamp(2.5rem, 5.2vw, 4.6875rem);
  --skt-hero-sub: clamp(1.25rem, 2.08vw, 1.875rem);
  --skt-product-hero-title: clamp(2.5rem, 5.208vw, 4.6875rem); /* 75px @ 1440 */
  --skt-product-hero-sub: clamp(1.125rem, 2.083vw, 1.875rem); /* 30px @ 1440 */
  --skt-band-red-bleed: 0.9375rem; /* 15px — trim red shape bottom overlap */
  --skt-hero-band-overlap: 4.6875rem; /* 75px — home hero mb-[-75px] */
  --skt-about-band-overlap: 6.375rem; /* 102px — about hero mb-[-102px] */
  --skt-product-hero-overlap: 1.875rem; /* 30px — product hero mb-[-30px] */
  --skt-product-band-pull: 5.9375rem; /* 95px — red band top-[-95px] inside product-about */
  --skt-product-total-overlap: calc(var(--skt-product-hero-overlap) + var(--skt-product-band-pull)); /* 125px into hero */
}

/* Buttons — dimensions; type in typography.css, hover in buttons.css */
.skt-btn {
  min-height: 4.6875rem;
  min-width: 15rem;
  position: relative;
  overflow: hidden;
}
.skt-btn span {
  position: relative;
  z-index: 1;
}
.skt-btn--hero-cta {
  width: 15.9375rem;
  min-width: 15.9375rem;
}
.skt-btn--full { max-width: 21.5rem; }

/* Home hero — 1024px frame, no dark overlay per Figma */
.skt-hero--home .skt-hero__bg::after {
  display: none;
}
.skt-hero--about .skt-hero__bg::after {
  display: none;
}
.skt-hero--product .skt-hero__bg::after {
  background: rgba(0, 0, 0, 0.48);
}
.skt-header__logo img {
  width: auto !important;
  max-width: 10.375rem !important;
  height: 2.5rem !important;
  max-height: 2.5rem !important;
  object-fit: contain !important;
  object-position: left center;
}
.skt-hero--home {
  min-height: clamp(36rem, 71.111vw, 64rem);
  height: clamp(36rem, 71.111vw, 64rem);
  max-height: 64rem;
  margin-bottom: 0;
}
.skt-hero--home .skt-hero__content {
  position: absolute;
  top: clamp(12rem, 26.67vw, 24rem);
  left: 0;
  padding: 0 var(--skt-pad-x);
  padding-bottom: 0;
  max-width: 44.9375rem;
}
.skt-hero--home .skt-hero__title {
  font-size: var(--skt-hero-title);
  letter-spacing: -0.05em;
  opacity: 0.5;
  line-height: 0.92;
  max-width: none;
  width: fit-content;
}
.skt-hero--home .skt-hero__subtitle {
  font-size: var(--skt-hero-sub);
  line-height: 1.2;
  letter-spacing: -0.05em;
  max-width: 34.8125rem;
}
.skt-hero--home .skt-hero__video-link {
  margin-top: 0;
}
.skt-hero__video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  opacity: 0.5;
}
.skt-hero__play-icon { flex-shrink: 0; }
.skt-hero__cta-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 0;
  margin: 0;
  width: 15.9375rem;
}
.skt-hero--home .skt-hero__cta-bar {
  position: static;
  bottom: auto;
  right: auto;
  width: 15.9375rem;
}
.skt-hero--product .skt-hero__title {
  font-size: var(--skt-product-hero-title);
  letter-spacing: -0.05em;
  opacity: 0.5;
  max-width: none;
  line-height: 1;
}
.skt-hero--product .skt-hero__subtitle {
  font-size: var(--skt-product-hero-sub);
  line-height: 1.2;
  letter-spacing: -0.05em;
  max-width: 34.8125rem;
}
.skt-hero--product {
  min-height: clamp(36rem, 71.111vw, 64rem);
  height: clamp(36rem, 71.111vw, 64rem);
  max-height: 64rem;
  margin-bottom: 0;
  overflow: hidden;
}
.skt-hero--product .skt-hero__content {
  position: absolute;
  top: 50%;
  left: var(--skt-pad-x);
  transform: translateY(-50%);
  padding: 0;
  width: 44.9375rem;
  max-width: calc(100% - var(--skt-pad-x) * 2);
  display: flex;
  flex-direction: column;
  gap: 1.9375rem;
}
.skt-hero--about {
  min-height: clamp(36rem, 71.111vw, 64rem);
  height: clamp(36rem, 71.111vw, 64rem);
  max-height: 64rem;
  margin-bottom: 0;
  overflow: hidden;
}

/* Red diagonal band */
.skt-band--red {
  margin-top: 0;
  padding: 0;
  padding-bottom: var(--skt-band-red-bleed);
  background: var(--skt-gray-light);
  min-height: 33.8125rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.skt-band__shape {
  clip-path: none;
  background: url('../images/band-shape.svg') no-repeat left top / 100% 100%;
  background-color: transparent;
  height: calc(100% - var(--skt-band-red-bleed));
}
[data-skt-section="home-about"] .skt-band__shape {
  background-image: none;
  background-color: transparent;
}
[data-skt-section="about-intro"] {
  position: relative;
  z-index: 2;
}
[data-skt-section="product-about"] {
  position: relative;
  z-index: 2;
}
[data-skt-section="about-intro"] .skt-band__shape {
  background: none;
}
[data-skt-section="product-about"] .skt-band__shape {
  background: none;
}
[data-skt-section="about-intro"] .skt-band__content {
  gap: 3.3125rem;
}
[data-skt-section="product-about"] .skt-band__content {
  gap: 3.3125rem;
}
[data-skt-section="about-intro"] .skt-band__title {
  margin-bottom: 0;
}
[data-skt-section="product-about"] .skt-band__title {
  margin-bottom: 0;
}
.skt-band__content {
  max-width: 51.5625rem;
  padding: var(--skt-pad-y) var(--skt-pad-x);
}
[data-skt-section="home-about"] .skt-band__content {
  position: absolute;
  left: var(--skt-pad-x);
  right: 0;
  top: 0;
  padding-left: 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 {
  padding-left: 0;
  margin-left: 0;
  max-width: 51.5625rem;
}
.skt-band__title {
  font-size: var(--skt-title-36);
  line-height: 1.14;
  letter-spacing: -0.05em;
  margin-bottom: 2.25rem;
}
.skt-band__body {
  font-size: var(--skt-body-24);
  line-height: 1.33;
  letter-spacing: -0.05em;
  opacity: 0.77;
}

/* Mission / mascot splits */
.skt-split {
  padding: var(--skt-pad-y) var(--skt-pad-x);
  background: #fff;
}
.skt-split__grid {
  display: grid;
  gap: 2rem;
  max-width: 90rem;
  margin: 0 auto;
}
.skt-split__content {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.skt-split__content .skt-btn {
  align-self: flex-start;
}
.skt-split__title {
  font-size: var(--skt-title-36);
  line-height: 1.14;
  letter-spacing: -0.05em;
}
.skt-split__body {
  font-size: var(--skt-body-24);
  line-height: 1.33;
  letter-spacing: -0.05em;
  opacity: 0.77;
}
.skt-split__media img {
  aspect-ratio: 561 / 566;
  object-fit: cover;
}

/* Product feature — overlapping grid (desktop only) */
.skt-product-feature {
  padding: var(--skt-pad-y) clamp(1.5rem, 8.75vw, 7.875rem);
  background: #fff;
}
.skt-product-feature__grid {
  position: relative;
  display: grid;
  gap: 1.5rem;
  max-width: 81.5rem;
  margin: 0 auto;
}
.skt-product-feature__img--top img,
.skt-product-feature__img--bottom img {
  width: 100%;
  height: 100%;
  aspect-ratio: 792 / 364;
  object-fit: cover;
}
.skt-product-feature__card {
  position: relative;
  padding: 2.75rem 2.5rem;
  background: var(--skt-gray-light);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  clip-path: none;
}
.skt-product-feature__cta {
  position: relative;
  margin-top: 0.5rem;
}
.skt-product-feature__title {
  font-size: clamp(2rem, 3.47vw, 3.125rem);
  letter-spacing: -0.05em;
  margin: 0 0 1.75rem;
  font-weight: 700;
}
.skt-product-feature__text {
  font-size: 1.1875rem;
  line-height: 1.26;
  letter-spacing: -0.05em;
  margin: 0;
}

/* About why overlay — Figma 3562:706 */
[data-skt-section="about-why"].skt-why-overlay {
  padding: clamp(3rem, 6.25vw, 5.625rem) clamp(1.25rem, 7.78vw, 7rem);
  background: #fff;
}
.skt-why-overlay {
  padding: var(--skt-pad-y) var(--skt-pad-x);
  background: #fff;
}
.skt-why-overlay__stage {
  position: relative;
  max-width: 81.5rem;
  margin: 0 auto;
  min-height: 56.3125rem;
}
.skt-why-overlay__bg {
  position: absolute;
  left: 0;
  top: auto;
  right: auto;
  bottom: 0;
  width: min(100%, 50.25rem);
  height: 32.1875rem;
  overflow: hidden;
  z-index: 1;
}
.skt-why-overlay__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skt-why-overlay__card {
  position: relative;
  z-index: 2;
  max-width: 49.1875rem;
  background: #fff;
  padding: 3.0625rem 2.75rem;
  box-shadow: none;
}
.skt-why-overlay__title {
  font-size: var(--skt-title-36);
  line-height: 1.139;
  letter-spacing: -0.05em;
  margin: 0;
}
.skt-why-overlay__body {
  font-size: var(--skt-body-24);
  line-height: 1.333;
  letter-spacing: -0.05em;
  color: #1c1c1c;
  opacity: 0.77;
}
.skt-why-overlay__body p { margin: 0 0 1rem; }

/* Full-width feature image */
.skt-full-image {
  padding: 0;
  line-height: 0;
}
.skt-full-image img {
  width: 100%;
  max-height: 51rem;
  object-fit: cover;
}

/* Product about band — see product-sections.css */

/* Used in */
.skt-used-in {
  padding: var(--skt-pad-y) var(--skt-pad-x);
  position: relative;
}
.skt-used-in__title {
  margin-bottom: 3rem;
}
.skt-used-in__grid {
  display: grid;
  gap: 5.375rem 5.375rem;
}
.skt-used-in__item {
  display: block;
  position: relative;
  padding-left: 0.9375rem;
}
.skt-used-in__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.625rem;
  width: 1px;
  height: 2.625rem;
  background: #bababa;
}
.skt-used-in__icon {
  width: 6.125rem;
  height: 4.625rem;
  margin-left: 3.875rem;
  margin-bottom: 1.5rem;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.skt-used-in__icon .skt-stroke-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.skt-used-in .skt-stroke-icon path,
.skt-used-in .skt-stroke-icon line,
.skt-used-in .skt-stroke-icon rect,
.skt-used-in .skt-stroke-icon circle,
.skt-used-in .skt-stroke-icon polyline {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.skt-used-in__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.skt-used-in__head {
  display: flex;
  align-items: center;
  gap: 1.8125rem;
  margin-bottom: 0.5rem;
}
.skt-used-in__num {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #bababa;
  letter-spacing: -0.05em;
}
.skt-used-in__name {
  margin: 0;
  font-size: 1.5625rem;
  font-weight: 400;
  letter-spacing: -0.05em;
}
.skt-used-in__desc {
  margin: 0 0 0 2.9375rem;
  font-size: 1.125rem;
  color: #bababa;
  letter-spacing: -0.05em;
  max-width: 14rem;
}

/* Why choose product — Figma 3556:435 (see product-sections.css for layout) */
.skt-why-product {
  background: #f9f9f9;
  padding: var(--skt-pad-y) var(--skt-pad-x);
}
.skt-why-product__inner {
  max-width: 75.625rem;
  margin: 0 auto;
}
.skt-why-product__title {
  margin: 0;
}

/* Tables */
.skt-table-section { padding: var(--skt-pad-y) var(--skt-pad-x); }
.skt-table-section__title { letter-spacing: -0.05em; }
.skt-table__head .skt-table__cell,
.skt-table__row .skt-table__cell {
  padding: 1.25rem 2.375rem;
  letter-spacing: -0.05em;
}
.skt-table__head .skt-table__cell {
  font-size: 1.5625rem;
}
.skt-table__row .skt-table__cell {
  color: #585858;
  font-size: 1.25rem;
}

/* Accordions — see product-sections.css */
.skt-accordions { padding: 0; background: #fff; }

/* Manufacturing */
.skt-manufacturing { background: #fff; }
.skt-manufacturing__step { margin-bottom: 3.5rem; }
.skt-manufacturing__text h3 {
  font-size: 1.5625rem;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: #000;
  margin: 0 0 1.5rem;
}
.skt-manufacturing__body {
  font-size: 1.125rem;
  line-height: normal;
  letter-spacing: -0.05em;
  color: #747474;
}
.skt-manufacturing__body p {
  margin: 0 0 0.75rem;
  font-weight: 400;
}
.skt-manufacturing__body ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: inherit;
  color: inherit;
}
.skt-manufacturing__body li + li {
  margin-top: 0.35rem;
}

/* Quality carousel */
.skt-quality-carousel { background: #fff; padding: var(--skt-pad-y) var(--skt-pad-x); }
.skt-quality-carousel__title {
  margin: 0 0 2.5rem;
  font-size: var(--skt-title-36);
  letter-spacing: -0.05em;
}
.skt-quality-carousel__track {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}
.skt-quality-carousel__track.swiper-grabbing {
  cursor: grabbing;
}
.skt-quality-carousel .swiper-button-prev,
.skt-quality-carousel .swiper-button-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--skt-red);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.skt-quality-carousel .swiper-wrapper {
  align-items: stretch;
}
.skt-quality-carousel .swiper-slide {
  height: auto;
  box-sizing: border-box;
}
.skt-quality-carousel .swiper-button-prev {
  left: 0;
}
.skt-quality-carousel .swiper-button-next {
  right: 0;
}
.skt-quality-carousel .swiper-button-prev::after,
.skt-quality-carousel .swiper-button-next::after {
  font-size: 0.875rem;
  font-weight: 700;
}
.skt-quality-carousel .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.skt-quality-step {
  background: var(--skt-gray-light);
  min-height: 24.625rem;
  height: auto;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: center;
  overflow: hidden;
}
.skt-quality-step__label {
  color: #585858;
  font-size: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  width: 100%;
}
.skt-quality-step__title {
  font-size: var(--skt-body-24);
  letter-spacing: -0.05em;
  margin: 0;
  flex-shrink: 0;
  width: 100%;
}
.skt-quality-step__image {
  width: 100%;
  height: 15.6875rem;
  flex: 0 0 15.6875rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skt-quality-step__image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  aspect-ratio: unset;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.skt-quality-carousel .swiper-pagination {
  position: relative;
  margin-top: 1.5rem;
  bottom: auto;
  line-height: 1;
}
.skt-quality-carousel .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: #bababa;
  opacity: 1;
  margin: 0 0.25rem;
  transition: background 0.2s ease;
}
.skt-quality-carousel .swiper-pagination-bullet-active {
  background: var(--skt-red);
  opacity: 1;
}
@media (min-width: 992px) {
  .skt-quality-carousel .swiper-slide {
    width: auto;
    max-width: none;
  }
}

/* Contact */
.skt-contact {
  padding: var(--skt-pad-y) var(--skt-pad-x);
  max-width: 90rem;
  margin: 0 auto;
}
.skt-contact__title { font-size: var(--skt-title-36); letter-spacing: -0.05em; }
.skt-contact__intro { font-size: 1.125rem; line-height: 1.33; letter-spacing: -0.05em; }
.skt-contact__form { gap: 0.625rem; }
.skt-contact__form input,
.skt-contact__form textarea,
.skt-contact__form select {
  min-height: 3.3125rem;
  padding: 0 1.875rem;
  font-size: 0.875rem;
  letter-spacing: -0.05em;
  color: var(--skt-black);
  border: 1px solid #ccc !important;
  background-color: #fff !important;
  border-radius: 0;
  box-shadow: none !important;
  appearance: none;
  accent-color: var(--skt-red);
}
.skt-contact__form input:focus,
.skt-contact__form textarea:focus,
.skt-contact__form select.skt-contact__select:focus,
.skt-contact__form select.skt-contact__select:focus-visible {
  outline: none;
  border-color: var(--skt-red) !important;
  box-shadow: 0 0 0 1px var(--skt-red) !important;
}
.skt-contact__form input::placeholder,
.skt-contact__form textarea::placeholder {
  color: #acacac;
}
.skt-contact__form textarea { min-height: 7.9375rem; padding-top: 1.4375rem; }
.skt-contact__select-wrap {
  position: relative;
  width: 100%;
}
.skt-contact__select-wrap::after {
  content: '';
  position: absolute;
  right: 1.375rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.1875rem;
  border-right: 2px solid var(--skt-red);
  border-bottom: 2px solid var(--skt-red);
  transform: rotate(45deg);
  pointer-events: none;
}
.skt-contact__form select.skt-contact__select {
  width: 100%;
  cursor: pointer;
  color: var(--skt-black);
  background-color: #fff !important;
  background-image: none !important;
  accent-color: var(--skt-red);
  padding-right: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
}
.skt-contact__form select.skt-contact__select option {
  color: var(--skt-black);
  background: #fff;
}
.skt-contact__form select.skt-contact__select option:checked {
  background: var(--skt-red);
  color: var(--skt-white);
}
.skt-contact__form select.skt-contact__select:invalid,
.skt-contact__form select.skt-contact__select option[value=""] {
  color: #acacac;
}
.skt-contact__form .skt-btn--contact,
.skt-contact__form button.skt-btn--contact {
  width: 100%;
  max-width: none;
  min-height: 3.3125rem;
  margin-top: 0.375rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.skt-contact__media img {
  width: 100%;
  aspect-ratio: 646 / 551;
  object-fit: cover;
}

@media (min-width: 768px) {
  .skt-split__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4.3125rem;
    align-items: center;
  }
  .skt-contact__grid {
    grid-template-columns: 31rem 1fr;
    gap: 3.75rem;
    align-items: center;
  }
  .skt-used-in__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-left: 0;
  }
  .skt-why-product__grid {
    grid-template-columns: 36.3125rem minmax(0, 34.6875rem);
    gap: 4.625rem;
  }
}

@media (min-width: 992px) {
  .skt-used-in__inner {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 2.4375rem;
    align-items: start;
  }
  .skt-used-in__title {
    position: static;
    width: 9.5rem;
    margin: 0;
  }
  .skt-used-in__grid {
    margin-left: 0;
    padding-top: 0;
  }
  .skt-product-feature__grid {
    display: block;
    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: min(calc(100% - 2rem), 39.9rem);
    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;
  }
  [data-skt-section="about-why"] .skt-why-overlay__bg {
    left: 38.34%;
    top: 42.84%;
    bottom: auto;
  }
}
.skt-product-feature__card-bg {
  background: url('../images/product-card-bg.png') no-repeat center / 100% 100%;
  background-color: var(--skt-gray-light);
}

@media (max-width: 767px) {
  .skt-hero__cta-bar {
    position: relative;
    width: 100%;
    padding: 0 var(--skt-pad-x) 1.5rem;
  }
  .skt-hero__cta-bar .skt-btn--hero-cta { width: 100%; }
  [data-skt-section="product-about"] .skt-product-about__image-wrap { display: none; }
  .skt-why-overlay__bg { position: relative; width: 100%; height: 16rem; }
  .skt-why-overlay__stage { min-height: 0; }
}